@nutui/nutui-react-taro
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
77 lines (76 loc) • 3.73 kB
JavaScript
import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
import React from "react";
import classNames from "classnames";
import { ArrowLeft } from "@nutui/icons-react-taro";
import { View, Image } from "@tarojs/components";
import Overlay from "../overlay/index";
import { useConfig } from "../configprovider/index";
import { defaultOverlayProps } from "../overlay/overlay";
import Badge from "../badge/index";
var defaultProps = _object_spread_props(_object_spread({}, defaultOverlayProps), {
activeText: '',
inactiveText: '',
type: 'right',
list: [],
overlay: true,
position: {
top: 'auto',
bottom: 'auto'
},
zIndex: 200,
onChange: function(value) {},
onSelect: function() {}
});
export var FixedNav = function(props) {
var locale = useConfig().locale;
var _$_object_spread = _object_spread({}, defaultProps, props), className = _$_object_spread.className, overlay = _$_object_spread.overlay, visible = _$_object_spread.visible, list = _$_object_spread.list, activeText = _$_object_spread.activeText, inactiveText = _$_object_spread.inactiveText, position = _$_object_spread.position, type = _$_object_spread.type, children = _$_object_spread.children, style = _$_object_spread.style, content = _$_object_spread.content, zIndex = _$_object_spread.zIndex, onChange = _$_object_spread.onChange, onSelect = _$_object_spread.onSelect;
var classPrefix = 'nut-fixednav';
var classes = classNames(classPrefix, {
active: visible
}, "".concat(classPrefix, "-").concat(type), className);
var renderListItem = function(item, index) {
return /*#__PURE__*/ React.createElement(View, {
className: "".concat(classPrefix, "-list-item"),
onClick: function(event) {
return onSelect(item, event);
},
key: item.id || index
}, /*#__PURE__*/ React.isValidElement(item.icon) ? item.icon : /*#__PURE__*/ React.createElement(Image, {
src: item.icon,
className: "".concat(classPrefix, "-list-image")
}), /*#__PURE__*/ React.createElement(View, {
className: "".concat(classPrefix, "-list-text")
}, item.text));
};
return /*#__PURE__*/ React.createElement(View, {
className: classes,
style: _object_spread({}, position, style)
}, overlay && /*#__PURE__*/ React.createElement(Overlay, {
visible: visible,
zIndex: zIndex,
onClick: function() {
return onChange(false);
}
}), /*#__PURE__*/ React.createElement(View, {
className: "list"
}, children || /*#__PURE__*/ React.createElement(View, {
className: "".concat(classPrefix, "-list")
}, list.map(function(item, index) {
return /*#__PURE__*/ React.createElement(React.Fragment, null, item.num ? /*#__PURE__*/ React.createElement(Badge, {
value: item.num,
top: 8,
right: 6
}, renderListItem(item, index)) : /*#__PURE__*/ React.createElement(React.Fragment, null, renderListItem(item, index)));
}))), /*#__PURE__*/ React.createElement(View, {
className: "".concat(classPrefix, "-btn"),
onClick: function() {
return onChange(!visible);
}
}, content || /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(ArrowLeft, {
color: "#fff"
}), /*#__PURE__*/ React.createElement(View, {
className: "text"
}, visible ? activeText || locale.fixednav.activeText : inactiveText || locale.fixednav.inactiveText))));
};
FixedNav.displayName = 'NutFixedNav';