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

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

import { _ as __rest } from "./tslib.es6.js";
import React__default, { useContext, useRef, useCallback, useEffect } from "react";
import { O as OffsetContext, h as handleClick } from "./context4.js";
const defaultProps = {
  open: true
};
const SubSideNavBar = (props) => {
  const classPrefix = "nut-subsidenavbar";
  const _a = Object.assign(Object.assign({}, defaultProps), props), { title, value, children, onClick, open } = _a, rest = __rest(_a, ["title", "value", "children", "onClick", "open"]);
  const offset = useContext(OffsetContext);
  const listRef = useRef(null);
  const setListLevel = useCallback((nodeList, level = 1) => {
    const titleClass = nodeList[0].className;
    if (titleClass.includes(`${classPrefix}-title`)) {
      const left = offset * (level + 1);
      nodeList[0].style.paddingLeft = `${left}px`;
    }
    const childNodes = nodeList[1] && nodeList[1].children && Array.from(nodeList[1].children).filter((item) => item.nodeType !== 3 && item.nodeType !== 8);
    childNodes.forEach((item) => {
      const itemClass = item.className;
      if (itemClass.includes(`${classPrefix}-item`)) {
        const left = offset * (level + 2);
        item.style.paddingLeft = `${left}px`;
      }
      if (itemClass.includes(`${classPrefix}-list`)) {
        let level2 = item.getAttribute("level") ? Number(item.getAttribute("level")) : 1;
        level2 += 1;
        item.setAttribute("level", level2.toString());
        item.children && setListLevel(item.children, level2);
      }
    });
  }, [offset]);
  const clickFn = (e) => {
    handleClick(e);
    const currentClass = e.currentTarget.className;
    const isShow = currentClass.includes("sidenavbar-show");
    onClick && onClick({ title, value, isShow });
  };
  useEffect(() => {
    var _a2, _b;
    const childNodes = (_a2 = listRef.current) === null || _a2 === void 0 ? void 0 : _a2.children;
    (_b = listRef.current) === null || _b === void 0 ? void 0 : _b.setAttribute("level", "1");
    childNodes && setListLevel(childNodes);
  }, [setListLevel]);
  const divClass = open ? `${classPrefix}-list sidenavbar-show` : `${classPrefix}-list sidenavbar-hide`;
  const iconClass = open ? "arrow-icon arrow-down" : "arrow-icon arrow-up";
  return React__default.createElement(
    "div",
    Object.assign({ className: divClass, ref: listRef, onClick: clickFn }, rest),
    React__default.createElement(
      "div",
      { className: `${classPrefix}-title ${classPrefix}-border-bt` },
      title,
      " ",
      React__default.createElement("i", { className: iconClass })
    ),
    React__default.createElement("div", { className: `${classPrefix}-content` }, children)
  );
};
export {
  SubSideNavBar as default
};