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

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

import { _ as __rest } from "./tslib.es6.js";
import React__default from "react";
import classNames from "classnames";
import Popup__default from "./Popup.js";
import { h as handleClick, O as OffsetContext } from "./context4.js";
import { C as ComponentDefaults } from "./typings.js";
const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { position: "left", width: "80%" });
const SideNavBar = (props) => {
  const classPrefix = "nut-sidenavbar";
  const _a = Object.assign(Object.assign({}, defaultProps), props), { title, visible, width, position, children, className, onClose, indent } = _a, rest = __rest(_a, ["title", "visible", "width", "position", "children", "className", "onClose", "indent"]);
  const innerIndent = indent ? Number(indent) : 20;
  return React__default.createElement(
    Popup__default,
    { visible, style: { width, height: "100%" }, position, onClose },
    React__default.createElement(
      "div",
      Object.assign({ className: classNames(classPrefix, className) }, rest),
      React__default.createElement(
        "div",
        { className: `${classPrefix}-content` },
        React__default.createElement(
          "div",
          { className: `${classPrefix}-list sidenavbar-show`, onClick: handleClick },
          React__default.createElement(
            "div",
            { className: `${classPrefix}-title ${classPrefix}-border-bt`, style: { paddingLeft: `${innerIndent}px` } },
            title,
            " ",
            React__default.createElement("i", { className: "arrow-icon arrow-down" })
          ),
          React__default.createElement(
            OffsetContext.Provider,
            { value: innerIndent },
            React__default.createElement("div", { className: `${classPrefix}-content` }, children)
          )
        )
      )
    )
  );
};
SideNavBar.displayName = "NutSideNavBar";
export {
  SideNavBar as default
};