@nutui/nutui-react/dist/esm/FixedNav.js

京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序

import { _ as __rest } from "./tslib.es6.js";
import React__default from "react";
import classNames from "classnames";
import { ArrowLeft } from "@nutui/icons-react";
import Overlay__default from "./Overlay.js";
import { useConfig } from "./ConfigProvider.js";
import { C as ComponentDefaults } from "./typings.js";
const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { activeText: "", inactiveText: "", type: "right", position: {
  top: "auto",
  bottom: "auto"
} });
const FixedNav = (props) => {
  const { locale } = useConfig();
  const _a = Object.assign(Object.assign({}, defaultProps), props), { className, overlay, visible, list, activeText, inactiveText, position, onChange, onSelect, type, children, style, content } = _a, rest = __rest(_a, ["className", "overlay", "visible", "list", "activeText", "inactiveText", "position", "onChange", "onSelect", "type", "children", "style", "content"]);
  const classPrefix = "nut-fixednav";
  const classes = classNames(classPrefix, {
    active: visible
  }, type, className);
  const handleClick = (item, event) => {
    onSelect(item, event);
  };
  const onUpdateValue = (value = !visible) => {
    onChange(value);
  };
  return React__default.createElement(
    "div",
    Object.assign({ className: classes, style: Object.assign(Object.assign({}, position), style) }, rest),
    overlay && React__default.createElement(Overlay__default, { visible, style: { "--nutui-overlay-zIndex": 200 }, onClick: () => onUpdateValue(false) }),
    React__default.createElement("div", { className: "list" }, children || React__default.createElement("div", { className: `${classPrefix}-list` }, list.map((item, index) => {
      return React__default.createElement(
        "div",
        { className: `${classPrefix}-list-item`, onClick: (event) => handleClick(item, event), key: item.id || index },
        React__default.isValidElement(item.icon) ? item.icon : React__default.createElement("img", { src: item.icon, alt: "" }),
        React__default.createElement("div", { className: `${classPrefix}-list-text` }, item.text),
        item.num && React__default.createElement("div", { className: "b" }, item.num)
      );
    }))),
    React__default.createElement("div", { className: `${classPrefix}-btn`, onClick: () => onUpdateValue() }, content || React__default.createElement(
      React__default.Fragment,
      null,
      React__default.createElement(ArrowLeft, { color: "#fff" }),
      React__default.createElement("div", { className: "text" }, visible ? activeText || locale.fixednav.activeText : inactiveText || locale.fixednav.inactiveText)
    ))
  );
};
FixedNav.displayName = "NutFixedNav";
export {
  FixedNav as default
};