UNPKG

@nutui/nutui-react-taro

Version:

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

48 lines (47 loc) 2.13 kB
import { _ as __rest } from "./tslib.es6-iWu3F_1J.js"; import React__default, { useState } from "react"; import classNames from "classnames"; import { P as Popup } from "./popup.taro-JynjcLCn.js"; import { O as OffsetContext } from "./context-4T-L2x0_.js"; import { C as ComponentDefaults } from "./typings-DV9RBfhj.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; const [sidenavbarShow, setSidenavbarShow] = useState(true); const handleClick = () => { setSidenavbarShow(!sidenavbarShow); }; return React__default.createElement( Popup, { 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 ${sidenavbarShow ? "sidenavbar-show" : "sidenavbar-hide"}`, onClick: handleClick }, React__default.createElement( "div", { className: `${classPrefix}-title ${classPrefix}-border-bt`, style: { paddingLeft: `${innerIndent}px` } }, title, React__default.createElement("i", { className: `arrow-icon ${sidenavbarShow ? "arrow-up" : "arrow-down"}` }) ), React__default.createElement( OffsetContext.Provider, { value: innerIndent }, React__default.createElement("div", { className: `${classPrefix}-content` }, children) ) ) ) ) ); }; SideNavBar.displayName = "NutSideNavBar"; export { SideNavBar as S };