@nutui/nutui-react
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
68 lines (67 loc) • 3.41 kB
JavaScript
import { _ as _define_property } from "@swc/helpers/_/_define_property";
import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
import React, { useMemo } from "react";
import classNames from "classnames";
import { ComponentDefaults } from "../../utils/typings";
import { usePropsValue } from "../../hooks/use-props-value";
import TabbarItem from "../tabbaritem";
import TabbarContext from "./context";
import SafeArea from "../safearea/index";
var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
defaultValue: 0,
fixed: false,
inactiveColor: '',
activeColor: '',
direction: 'vertical',
safeArea: false,
onSwitch: function() {}
});
export var Tabbar = function(props) {
var _$_object_spread = _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 = _sliced_to_array(usePropsValue({
value: value,
defaultValue: defaultValue,
finalValue: 0,
onChange: onSwitch
}), 2), selectIndex = _usePropsValue[0], setSelectIndex = _usePropsValue[1];
var sizeCls = useMemo(function() {
var size = React.Children.count(children);
var _obj;
return size > 3 ? '' : classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix, "-wrap-3"), size === 3), _define_property(_obj, "".concat(classPrefix, "-wrap-2"), size === 2), _define_property(_obj, "".concat(classPrefix, "-wrap-").concat(direction), size === 2 && direction !== 'vertical'), _obj));
}, [
children,
direction
]);
var itemDirection = useMemo(function() {
var size = React.Children.count(children);
return size === 2 && direction !== 'vertical' && direction;
}, [
direction,
children
]);
return /*#__PURE__*/ React.createElement("div", {
className: classNames(classPrefix, _define_property({}, "".concat(classPrefix, "-fixed"), fixed), className),
style: style
}, /*#__PURE__*/ React.createElement("div", {
className: "".concat(classPrefix, "-wrap ").concat(sizeCls)
}, /*#__PURE__*/ React.createElement(TabbarContext.Provider, {
value: {
selectIndex: selectIndex,
activeColor: activeColor,
inactiveColor: inactiveColor,
handleClick: setSelectIndex
}
}, React.Children.map(children, function(child, index) {
return /*#__PURE__*/ React.isValidElement(child) ? /*#__PURE__*/ React.cloneElement(child, _object_spread_props(_object_spread({}, child.props), {
index: index,
direction: itemDirection
})) : null;
}))), (fixed || safeArea) && /*#__PURE__*/ React.createElement(SafeArea, {
position: "bottom"
}));
};
Tabbar.displayName = 'NutTabbar';
Tabbar.Item = TabbarItem;