@nutui/nutui-react-taro
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
88 lines (87 loc) • 4.59 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "FixedNav", {
enumerable: true,
get: function() {
return FixedNav;
}
});
var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
var _object_spread = require("@swc/helpers/_/_object_spread");
var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
var _react = /*#__PURE__*/ _interop_require_default._(require("react"));
var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
var _iconsreacttaro = require("@nutui/icons-react-taro");
var _components = require("@tarojs/components");
var _index = /*#__PURE__*/ _interop_require_default._(require("../overlay/index"));
var _index1 = require("../configprovider/index");
var _overlay = require("../overlay/overlay");
var _index2 = /*#__PURE__*/ _interop_require_default._(require("../badge/index"));
var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _overlay.defaultOverlayProps), {
activeText: '',
inactiveText: '',
type: 'right',
list: [],
overlay: true,
position: {
top: 'auto',
bottom: 'auto'
},
zIndex: 200,
onChange: function onChange(value) {},
onSelect: function onSelect() {}
});
var FixedNav = function FixedNav(props) {
var locale = (0, _index1.useConfig)().locale;
var _$_object_spread = (0, _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 = (0, _classnames.default)(classPrefix, {
active: visible
}, "".concat(classPrefix, "-").concat(type), className);
var renderListItem = function renderListItem(item, index) {
return /*#__PURE__*/ _react.default.createElement(_components.View, {
className: "".concat(classPrefix, "-list-item"),
onClick: function onClick(event) {
return onSelect(item, event);
},
key: item.id || index
}, /*#__PURE__*/ _react.default.isValidElement(item.icon) ? item.icon : /*#__PURE__*/ _react.default.createElement(_components.Image, {
src: item.icon,
className: "".concat(classPrefix, "-list-image")
}), /*#__PURE__*/ _react.default.createElement(_components.View, {
className: "".concat(classPrefix, "-list-text")
}, item.text));
};
return /*#__PURE__*/ _react.default.createElement(_components.View, {
className: classes,
style: (0, _object_spread._)({}, position, style)
}, overlay && /*#__PURE__*/ _react.default.createElement(_index.default, {
visible: visible,
zIndex: zIndex,
onClick: function onClick() {
return onChange(false);
}
}), /*#__PURE__*/ _react.default.createElement(_components.View, {
className: "list"
}, children || /*#__PURE__*/ _react.default.createElement(_components.View, {
className: "".concat(classPrefix, "-list")
}, list.map(function(item, index) {
return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, item.num ? /*#__PURE__*/ _react.default.createElement(_index2.default, {
value: item.num,
top: 8,
right: 6
}, renderListItem(item, index)) : /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, renderListItem(item, index)));
}))), /*#__PURE__*/ _react.default.createElement(_components.View, {
className: "".concat(classPrefix, "-btn"),
onClick: function onClick() {
return onChange(!visible);
}
}, content || /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.ArrowLeft, {
color: "#fff"
}), /*#__PURE__*/ _react.default.createElement(_components.View, {
className: "text"
}, visible ? activeText || locale.fixednav.activeText : inactiveText || locale.fixednav.inactiveText))));
};
FixedNav.displayName = 'NutFixedNav';