@fruits-chain/react-native-xiaoshu
Version:
🌈 React Native UI library
190 lines (189 loc) • 8.3 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _isNil = _interopRequireDefault(require("lodash/isNil"));
var _isNumber = _interopRequireDefault(require("lodash/isNumber"));
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _index = _interopRequireDefault(require("../bottom-bar/index.js"));
var _style = require("../button/style.js");
var _index2 = require("../helpers/index.js");
var _index3 = require("../hooks/index.js");
var _index4 = _interopRequireDefault(require("../theme/index.js"));
var _style2 = require("./style.js");
var _jsxRuntime = require("react/jsx-runtime");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const TabBar = ({
theme,
textColor,
iconColor,
activeTextColor,
activeIconColor,
options,
indicator = false,
indicatorWidth,
indicatorHeight = 3,
indicatorColor,
tabAlign = 'center',
labelBulge = false,
height,
style,
...restProps
}) => {
const _labelBulge = (0, _isNumber.default)(labelBulge) ? labelBulge : labelBulge ? 1.2 : 0;
const tabNum = options.length;
const isTabAdaption = tabAlign === 'center';
const isTabTextCompact = (0, _isNil.default)(indicatorWidth);
const isIndicatorWidthLayout = isTabTextCompact || indicatorWidth === 0;
const [value, onChange] = (0, _index3.useControllableValue)(restProps, {
defaultValue: options[0]?.value
});
const [CV, STYLES, TOKENS] = _index4.default.useStyle({
varCreator: _style2.varCreator,
styleCreator: _style2.styleCreator,
theme
});
const [CV_BUTTON] = _index4.default.useStyle({
varCreator: _style.varCreator
});
const optionsDeepCopy = (0, _index3.useOriginalDeepCopy)(options);
const [state, setState] = (0, _react.useState)({
layoutFinish: false
});
const layouts = (0, _react.useRef)(new Array(tabNum).fill({}));
const AnimatedIndicatorLeft = (0, _react.useRef)(new _reactNative.Animated.Value(0));
const AnimatedIndicatorWidth = (0, _react.useRef)(new _reactNative.Animated.Value(0));
const ScrollViewRef = (0, _react.useRef)(null);
const ScrollViewWidthRef = (0, _react.useRef)(0);
if (indicator && (0, _isNil.default)(height)) {
height = 40;
}
textColor = (0, _index2.getDefaultValue)(textColor, CV.tab_bar_text_color);
iconColor = (0, _index2.getDefaultValue)(iconColor, CV.tab_bar_icon_color);
activeTextColor = (0, _index2.getDefaultValue)(activeTextColor, CV.tab_bar_active_text_color);
activeIconColor = (0, _index2.getDefaultValue)(activeIconColor, CV.tab_bar_active_icon_color);
indicatorColor = (0, _index2.getDefaultValue)(indicatorColor, CV.tab_bar_indicator_color);
const navigateTo = (0, _react.useCallback)(n => {
const targetLayout = layouts.current[n];
const left = targetLayout.tab.x + (targetLayout.tab.width - (isIndicatorWidthLayout ? targetLayout.text.width : indicatorWidth)) / 2;
const width = isIndicatorWidthLayout ? targetLayout.text.width : indicatorWidth;
_reactNative.Animated.parallel([_reactNative.Animated.timing(AnimatedIndicatorLeft.current, {
toValue: left,
useNativeDriver: false,
duration: TOKENS.animation_duration_base
}), _reactNative.Animated.timing(AnimatedIndicatorWidth.current, {
toValue: width,
useNativeDriver: false,
duration: TOKENS.animation_duration_base
})]).start();
if (!isTabAdaption) {
const hh = ScrollViewWidthRef.current / 2;
ScrollViewRef.current?.scrollTo({
x: targetLayout.tab.x + targetLayout.tab.width / 2 - hh,
animated: true
});
}
}, [TOKENS.animation_duration_base, indicatorWidth, isIndicatorWidthLayout, isTabAdaption]);
const initIndicator = (0, _react.useCallback)(() => {
const layoutItems = layouts.current.filter(item => item.tab && item.text);
if (layoutItems.length === layouts.current.length) {
setState(s => ({
...s,
layoutFinish: true
}));
}
}, []);
(0, _index3.useUpdateEffect)(() => {
setState({
layoutFinish: false
});
}, [optionsDeepCopy]);
(0, _react.useEffect)(() => {
if (state.layoutFinish) {
const n = optionsDeepCopy.findIndex(item => item.value === value);
navigateTo(n);
}
}, [value, optionsDeepCopy, state.layoutFinish, navigateTo]);
const onLayoutScrollView = (0, _react.useCallback)(e => {
ScrollViewWidthRef.current = e.nativeEvent.layout.width;
}, []);
const genOnPress = v => () => {
onChange(v);
};
const genOnLayoutTab = i => e => {
layouts.current[i] = {
text: layouts.current[i]?.text,
tab: e.nativeEvent.layout
};
initIndicator();
};
const genOnLayoutText = i => e => {
layouts.current[i] = {
tab: layouts.current[i]?.tab,
text: e.nativeEvent.layout
};
initIndicator();
};
const tabs = optionsDeepCopy.map((item, index) => {
const isActive = item.value === value;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
style: [STYLES.item, isTabAdaption ? STYLES.item_adaption : null, item.iconRender ? null : STYLES.item_no_icon],
activeOpacity: CV_BUTTON.button_active_opacity,
onPress: isActive ? undefined : genOnPress(item.value),
onLayout: genOnLayoutTab(index),
children: [item.iconRender?.(isActive ? activeIconColor : iconColor), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
style: [STYLES.item_text, isTabTextCompact ? null : STYLES.item_text_full, item.iconRender ? STYLES.item_text_icon : null,
// eslint-disable-next-line react-native/no-inline-styles
{
color: isActive ? activeTextColor : textColor,
fontWeight: isActive && indicator ? '500' : 'normal'
}, isActive && !!_labelBulge ? {
transform: [{
scaleX: _labelBulge
}, {
scaleY: _labelBulge
}]
} : {}],
onLayout: genOnLayoutText(index),
children: [item.label, !(0, _isNil.default)(item.badge) ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
style: STYLES.item_text_badge,
children: [` `, item.badge]
}) : null]
})]
}, item.value);
});
const indicatorJSX = indicator && state.layoutFinish ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
// eslint-disable-next-line react-native/no-inline-styles
style: {
height: indicatorHeight,
width: AnimatedIndicatorWidth.current,
backgroundColor: indicatorColor,
position: 'absolute',
left: AnimatedIndicatorLeft.current,
bottom: 0
}
}) : null;
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.default, {
...restProps,
height: height,
style: [STYLES.tab_bar, style],
children: isTabAdaption ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [tabs, indicatorJSX]
}) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
onLayout: onLayoutScrollView,
ref: ScrollViewRef,
horizontal: true,
bounces: false,
showsHorizontalScrollIndicator: false,
style: STYLES.tab_bar_scroll,
contentContainerStyle: _labelBulge ? [STYLES.tab_bar_scroll_content, STYLES.tab_bar_scroll_content_label_bulge] : STYLES.tab_bar_scroll_content,
children: [indicatorJSX, tabs]
})
});
};
var _default = exports.default = /*#__PURE__*/(0, _react.memo)(TabBar);
//# sourceMappingURL=tab-bar.js.map