@nutui/nutui-react
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
80 lines (79 loc) • 4.21 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "Tabbar", {
enumerable: true,
get: function() {
return Tabbar;
}
});
var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
var _define_property = require("@swc/helpers/_/_define_property");
var _object_spread = require("@swc/helpers/_/_object_spread");
var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
var _typings = require("../../utils/typings");
var _usepropsvalue = require("../../hooks/use-props-value");
var _tabbaritem = /*#__PURE__*/ _interop_require_default._(require("../tabbaritem"));
var _context = /*#__PURE__*/ _interop_require_default._(require("./context"));
var _index = /*#__PURE__*/ _interop_require_default._(require("../safearea/index"));
var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
defaultValue: 0,
fixed: false,
inactiveColor: '',
activeColor: '',
direction: 'vertical',
safeArea: false,
onSwitch: function onSwitch() {}
});
var Tabbar = function Tabbar(props) {
var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), children = _$_object_spread.children, defaultValue = _$_object_spread.defaultValue, value = _$_object_spread.value, fixed = _$_object_spread.fixed, activeColor = _$_object_spread.activeColor, inactiveColor = _$_object_spread.inactiveColor, direction = _$_object_spread.direction, safeArea = _$_object_spread.safeArea, className = _$_object_spread.className, style = _$_object_spread.style, onSwitch = _$_object_spread.onSwitch;
var classPrefix = 'nut-tabbar';
var _usePropsValue = (0, _sliced_to_array._)((0, _usepropsvalue.usePropsValue)({
value: value,
defaultValue: defaultValue,
finalValue: 0,
onChange: onSwitch
}), 2), selectIndex = _usePropsValue[0], setSelectIndex = _usePropsValue[1];
var sizeCls = (0, _react.useMemo)(function() {
var size = _react.default.Children.count(children);
var _obj;
return size > 3 ? '' : (0, _classnames.default)((_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-wrap-3"), size === 3), (0, _define_property._)(_obj, "".concat(classPrefix, "-wrap-2"), size === 2), (0, _define_property._)(_obj, "".concat(classPrefix, "-wrap-").concat(direction), size === 2 && direction !== 'vertical'), _obj));
}, [
children,
direction
]);
var itemDirection = (0, _react.useMemo)(function() {
var size = _react.default.Children.count(children);
return size === 2 && direction !== 'vertical' && direction;
}, [
direction,
children
]);
return /*#__PURE__*/ _react.default.createElement("div", {
className: (0, _classnames.default)(classPrefix, (0, _define_property._)({}, "".concat(classPrefix, "-fixed"), fixed), className),
style: style
}, /*#__PURE__*/ _react.default.createElement("div", {
className: "".concat(classPrefix, "-wrap ").concat(sizeCls)
}, /*#__PURE__*/ _react.default.createElement(_context.default.Provider, {
value: {
selectIndex: selectIndex,
activeColor: activeColor,
inactiveColor: inactiveColor,
handleClick: setSelectIndex
}
}, _react.default.Children.map(children, function(child, index) {
return /*#__PURE__*/ _react.default.isValidElement(child) ? /*#__PURE__*/ _react.default.cloneElement(child, (0, _object_spread_props._)((0, _object_spread._)({}, child.props), {
index: index,
direction: itemDirection
})) : null;
}))), (fixed || safeArea) && /*#__PURE__*/ _react.default.createElement(_index.default, {
position: "bottom"
}));
};
Tabbar.displayName = 'NutTabbar';
Tabbar.Item = _tabbaritem.default;