@nutui/nutui-react
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
104 lines (103 loc) • 4.74 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 _object_without_properties = require("@swc/helpers/_/_object_without_properties");
var _react = /*#__PURE__*/ _interop_require_default._(require("react"));
var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
var _iconsreact = require("@nutui/icons-react");
var _index = /*#__PURE__*/ _interop_require_default._(require("../overlay/index"));
var _configprovider = require("../configprovider");
var _overlay = require("../overlay/overlay");
var _index1 = /*#__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, _configprovider.useConfig)().locale;
var _ref = (0, _object_spread._)({}, defaultProps, props), overlay = _ref.overlay, visible = _ref.visible, list = _ref.list, activeText = _ref.activeText, inactiveText = _ref.inactiveText, position = _ref.position, type = _ref.type, children = _ref.children, style = _ref.style, className = _ref.className, content = _ref.content, zIndex = _ref.zIndex, onChange = _ref.onChange, onSelect = _ref.onSelect, rest = (0, _object_without_properties._)(_ref, [
"overlay",
"visible",
"list",
"activeText",
"inactiveText",
"position",
"type",
"children",
"style",
"className",
"content",
"zIndex",
"onChange",
"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("div", {
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("img", {
src: item.icon,
alt: "",
className: "".concat(classPrefix, "-list-image")
}), /*#__PURE__*/ _react.default.createElement("div", {
className: "".concat(classPrefix, "-list-text")
}, item.text));
};
return /*#__PURE__*/ _react.default.createElement("div", (0, _object_spread._)({
className: classes,
style: (0, _object_spread._)({}, position, style)
}, rest), overlay && /*#__PURE__*/ _react.default.createElement(_index.default, {
visible: visible,
zIndex: zIndex,
onClick: function onClick() {
return onChange(false);
}
}), /*#__PURE__*/ _react.default.createElement("div", {
className: "list"
}, children || /*#__PURE__*/ _react.default.createElement("div", {
className: "".concat(classPrefix, "-list")
}, list.map(function(item, index) {
return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, item.num ? /*#__PURE__*/ _react.default.createElement(_index1.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("div", {
className: "".concat(classPrefix, "-btn"),
onClick: function onClick() {
return onChange(!visible);
}
}, content || /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/ _react.default.createElement(_iconsreact.ArrowLeft, {
color: "#fff"
}), /*#__PURE__*/ _react.default.createElement("div", {
className: "text"
}, visible ? activeText || locale.fixednav.activeText : inactiveText || locale.fixednav.inactiveText))));
};
FixedNav.displayName = 'NutFixedNav';