react-native-curved-bottom-bar
Version:
A high performance, beautiful and fully customizable curved bottom navigation bar for React Native.
209 lines (208 loc) • 11 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _bottomTabs = require("@react-navigation/bottom-tabs");
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _reactNativeSizeScaling = require("react-native-size-scaling");
var _useDeviceOrientation = require("../../../useDeviceOrientation");
var _pathDown = require("../../utils/pathDown");
var _pathUp = require("../../utils/pathUp");
var _curvedViewExpo = require("../CurvedView/curvedViewExpo");
var _styles = require("./styles");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
const {
width: maxW
} = _reactNative.Dimensions.get('window');
const Tab = (0, _bottomTabs.createBottomTabNavigator)();
const BottomBarComponent = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
const {
type = 'DOWN',
circlePosition = 'CENTER',
style,
width = null,
height = 65,
circleWidth = 50,
bgColor = 'gray',
initialRouteName,
tabBar,
renderCircle,
borderTopLeftRight = false,
shadowStyle,
borderColor = 'gray',
borderWidth = 0
} = props;
const [itemLeft, setItemLeft] = (0, _react.useState)([]);
const [itemRight, setItemRight] = (0, _react.useState)([]);
const [maxWidth, setMaxWidth] = (0, _react.useState)(width || maxW);
const [isShow, setIsShow] = (0, _react.useState)(true);
const children = props === null || props === void 0 ? void 0 : props.children;
const orientation = (0, _useDeviceOrientation.useDeviceOrientation)();
(0, _react.useImperativeHandle)(ref, () => {
return {
setVisible
};
});
const setVisible = visible => {
setIsShow(visible);
};
(0, _react.useEffect)(() => {
const {
width: w
} = _reactNative.Dimensions.get('window');
if (!width) {
setMaxWidth(w);
}
}, [orientation, width]);
const _renderButtonCenter = (0, _react.useCallback)((focusedTab, navigate) => {
var _children$filter$, _children$filter$$pro;
const getTab = (_children$filter$ = children.filter(e => {
var _e$props, _e$props2;
return (e === null || e === void 0 ? void 0 : (_e$props = e.props) === null || _e$props === void 0 ? void 0 : _e$props.position) === 'CIRCLE' || (e === null || e === void 0 ? void 0 : (_e$props2 = e.props) === null || _e$props2 === void 0 ? void 0 : _e$props2.position) === 'CENTER';
})[0]) === null || _children$filter$ === void 0 ? void 0 : (_children$filter$$pro = _children$filter$.props) === null || _children$filter$$pro === void 0 ? void 0 : _children$filter$$pro.name;
return renderCircle({
routeName: getTab,
selectedTab: focusedTab,
navigate: selectTab => {
if (selectTab) {
navigate(selectTab);
}
}
});
}, [children, renderCircle]);
(0, _react.useEffect)(() => {
const arrLeft = children.filter(item => {
var _item$props;
return (item === null || item === void 0 ? void 0 : (_item$props = item.props) === null || _item$props === void 0 ? void 0 : _item$props.position) === 'LEFT';
});
const arrRight = children.filter(item => {
var _item$props2;
return (item === null || item === void 0 ? void 0 : (_item$props2 = item.props) === null || _item$props2 === void 0 ? void 0 : _item$props2.position) === 'RIGHT';
});
setItemLeft(arrLeft);
setItemRight(arrRight);
}, [children, initialRouteName]);
const getCircleWidth = (0, _react.useMemo)(() => {
return circleWidth < 50 ? 50 : circleWidth > 60 ? 60 : circleWidth;
}, [circleWidth]);
const getTabbarHeight = (0, _react.useMemo)(() => {
return height < 50 ? 50 : height > 90 ? 90 : height;
}, [height]);
const d = (0, _react.useMemo)(() => {
return type === 'DOWN' ? (0, _pathDown.getPathDown)(maxWidth, getTabbarHeight, getCircleWidth, borderTopLeftRight, !_reactNative.I18nManager.isRTL ? circlePosition : circlePosition === 'LEFT' ? 'RIGHT' : circlePosition === 'RIGHT' ? 'LEFT' : 'CENTER') : (0, _pathUp.getPathUp)(maxWidth, getTabbarHeight + 30, getCircleWidth, borderTopLeftRight, !_reactNative.I18nManager.isRTL ? circlePosition : circlePosition === 'LEFT' ? 'RIGHT' : circlePosition === 'RIGHT' ? 'LEFT' : 'CENTER');
}, [borderTopLeftRight, circlePosition, getCircleWidth, getTabbarHeight, maxWidth, type]);
const renderItem = _ref => {
let {
color,
routeName,
navigate
} = _ref;
return /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
key: routeName,
style: _styles.styles.itemTab,
onPress: () => navigate(routeName)
}, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
style: {
color: color
}
}, routeName));
};
const _renderTabIcon = (0, _react.useCallback)((arr, focusedTab, navigation) => {
return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: [_styles.styles.rowLeft, {
height: (0, _reactNativeSizeScaling.scale)(getTabbarHeight)
}]
}, arr.map((item, index) => {
var _item$props3;
const routeName = item === null || item === void 0 ? void 0 : (_item$props3 = item.props) === null || _item$props3 === void 0 ? void 0 : _item$props3.name;
if (tabBar === undefined) {
return renderItem({
routeName,
color: focusedTab === routeName ? 'blue' : 'gray',
navigate: navigation.navigate
});
}
return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: _styles.styles.flex1,
key: index.toString()
}, tabBar({
routeName,
selectedTab: focusedTab,
navigate: selectTab => {
if (selectTab !== focusedTab) {
navigation.navigate({
name: routeName,
merge: true
});
}
}
}));
}));
}, [getTabbarHeight, tabBar]);
const renderPosition = (0, _react.useCallback)(props => {
const {
state,
navigation
} = props;
const focusedTab = state === null || state === void 0 ? void 0 : state.routes[state.index].name;
if (circlePosition === 'LEFT') {
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: {
marginLeft: (0, _reactNativeSizeScaling.scale)(getCircleWidth) / 2
}
}, _renderButtonCenter(focusedTab, navigation.navigate)), _renderTabIcon([...itemLeft, ...itemRight], focusedTab, navigation));
}
if (circlePosition === 'RIGHT') {
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, _renderTabIcon([...itemLeft, ...itemRight], focusedTab, navigation), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: {
marginRight: (0, _reactNativeSizeScaling.scale)(getCircleWidth) / 2
}
}, _renderButtonCenter(focusedTab, navigation.navigate)));
}
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, _renderTabIcon(itemLeft, focusedTab, navigation), _renderButtonCenter(focusedTab, navigation.navigate), _renderTabIcon(itemRight, focusedTab, navigation));
}, [_renderButtonCenter, _renderTabIcon, circlePosition, getCircleWidth, itemLeft, itemRight]);
const _renderTabContainer = (0, _react.useCallback)(props => {
return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: [_styles.styles.main, {
width: maxWidth
}, type === 'UP' && _styles.styles.top30]
}, renderPosition(props));
}, [maxWidth, renderPosition, type]);
const MyTabBar = (0, _react.useCallback)(props => {
if (!isShow) {
return null;
}
return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: [_styles.styles.container, style]
}, /*#__PURE__*/_react.default.createElement(_curvedViewExpo.CurvedViewExpoComponent, {
style: shadowStyle,
width: maxWidth,
height: (0, _reactNativeSizeScaling.scale)(getTabbarHeight) + (type === 'DOWN' ? 0 : (0, _reactNativeSizeScaling.scale)(30)),
bgColor: bgColor,
path: d,
borderColor: borderColor,
borderWidth: borderWidth
}), _renderTabContainer(props));
}, [_renderTabContainer, bgColor, d, getTabbarHeight, isShow, maxWidth, shadowStyle, style, type, borderColor, borderWidth]);
const main = (0, _react.useMemo)(() => {
return /*#__PURE__*/_react.default.createElement(Tab.Navigator, _extends({}, props, {
tabBar: MyTabBar
}), children === null || children === void 0 ? void 0 : children.map(e => {
var _e$props3, _e$props4, _e$props5, _e$props6;
const Component = e === null || e === void 0 ? void 0 : (_e$props3 = e.props) === null || _e$props3 === void 0 ? void 0 : _e$props3.component;
return /*#__PURE__*/_react.default.createElement(Tab.Screen, {
options: e === null || e === void 0 ? void 0 : (_e$props4 = e.props) === null || _e$props4 === void 0 ? void 0 : _e$props4.options,
key: e === null || e === void 0 ? void 0 : (_e$props5 = e.props) === null || _e$props5 === void 0 ? void 0 : _e$props5.name,
name: e === null || e === void 0 ? void 0 : (_e$props6 = e.props) === null || _e$props6 === void 0 ? void 0 : _e$props6.name
}, props => /*#__PURE__*/_react.default.createElement(Component, props));
}));
}, [MyTabBar, children, props]);
return main;
});
var _default = BottomBarComponent;
exports.default = _default;
//# sourceMappingURL=index.js.map