@nutui/nutui-react-taro 1.5.2-beta.0 → 1.5.2-beta.1

package/dist/esm/shortpassword.taro-9ee034f7.js

@@ -0,0 +1,111 @@
+import React__default, { useRef, useState, useEffect } from 'react';
+import { c as cn } from './bem-350c1702.js';
+import { P as Popup } from './popup.taro-01676bff.js';
+import { I as Icon } from './icon.taro-296a1bec.js';
+import { u as useConfig } from './configprovider.taro-8d71eb49.js';
+import { C as ComponentDefaults } from './typings-b9828dba.js';
+
+const defaultProps = {
+    ...ComponentDefaults,
+    title: '',
+    desc: '',
+    tips: '',
+    visible: false,
+    modelValue: '',
+    errorMsg: '',
+    noButton: true,
+    closeOnClickOverlay: true,
+    length: 6,
+    className: '',
+    autoFocus: false,
+    onChange: (value) => { },
+    onOk: (value) => { },
+    onCancel: () => { },
+    onClose: () => { },
+    onTips: () => { },
+    onComplete: (value) => { },
+};
+const ShortPassword = (props) => {
+    const { locale } = useConfig();
+    const { title, desc, tips, visible, modelValue, errorMsg, noButton, closeOnClickOverlay, length, style, className, onChange, onOk, onTips, onCancel, onClose, onComplete, iconClassPrefix, iconFontClassName, autoFocus, ...reset } = props;
+    const b = cn('shortpassword');
+    const textInput = useRef(null);
+    const range = (val) => {
+        return Math.min(Math.max(4, val), 6);
+    };
+    const [innerVisible, setInnerVisible] = useState(visible);
+    const [comLen, setComLen] = useState(range(Number(length)));
+    const [inputValue, setInputValue] = useState('');
+    useEffect(() => {
+        setInnerVisible(visible);
+    }, [visible]);
+    useEffect(() => {
+        if (typeof modelValue !== 'undefined') {
+            setInputValue(modelValue);
+        }
+    }, [modelValue]);
+    const changeValue = (e) => {
+        let inputValue = e.target.value;
+        if (String(inputValue).length > comLen) {
+            inputValue = inputValue.slice(0, comLen);
+        }
+        setInputValue(inputValue);
+        if (String(inputValue).length === comLen) {
+            onComplete && onComplete(inputValue);
+        }
+        onChange && onChange(inputValue);
+    };
+    const systemStyle = () => {
+        const u = navigator.userAgent;
+        const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; // g
+        const isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // ios终端
+        let style = {};
+        if (isIOS) {
+            style = {
+                paddingRight: '1200px',
+            };
+        }
+        if (isAndroid) {
+            style = {
+                opacity: 0,
+                zIndex: 10,
+            };
+        }
+        return style;
+    };
+    const focus = () => {
+        if (textInput.current) {
+            textInput.current.focus();
+        }
+    };
+    const sure = () => {
+        onOk && onOk(inputValue);
+    };
+    return (React__default.createElement("div", null,
+        React__default.createElement(Popup, { style: {
+                padding: '32px 24px 28px 24px',
+                borderRadius: '12px',
+                textAlign: 'center',
+            }, visible: innerVisible, closeable: true, "close-on-click-overlay": closeOnClickOverlay, onClickOverlay: onClose, onClickCloseIcon: onClose },
+            React__default.createElement("div", { className: `${b()} ${className}`, style: { ...style }, ...reset },
+                React__default.createElement("div", { className: b('title') }, title || locale.shortpassword.title),
+                React__default.createElement("div", { className: b('subtitle') }, desc || locale.shortpassword.desc),
+                React__default.createElement("div", { className: b('input') },
+                    React__default.createElement("input", { ref: textInput, className: b('input-real'), type: "number", style: systemStyle(), maxLength: 6, value: inputValue, autoFocus: autoFocus, onChange: (e) => changeValue(e) }),
+                    React__default.createElement("div", { className: b('input-site') }),
+                    React__default.createElement("div", { className: b('input-fake'), onClick: () => focus() }, [...new Array(comLen).keys()].map((item, index) => {
+                        return (React__default.createElement("div", { className: b('input-fake__li'), key: index }, String(inputValue).length > index ? (React__default.createElement("div", { className: b('input-fake__li__icon') })) : null));
+                    }))),
+                React__default.createElement("div", { className: b('message') },
+                    React__default.createElement("div", { className: b('message__error') }, errorMsg),
+                    tips || locale.shortpassword.tips ? (React__default.createElement("div", { className: b('message__forget') },
+                        React__default.createElement(Icon, { classPrefix: iconClassPrefix, fontClassName: iconFontClassName, className: "icon", size: "11px", name: "tips" }),
+                        React__default.createElement("div", { onClick: onTips }, tips || locale.shortpassword.tips))) : null),
+                !noButton ? (React__default.createElement("div", { className: b('footer') },
+                    React__default.createElement("div", { className: b('footer__cancel'), onClick: onCancel }, locale.cancel),
+                    React__default.createElement("div", { className: b('footer__sure'), onClick: () => sure() }, locale.confirm))) : null))));
+};
+ShortPassword.defaultProps = defaultProps;
+ShortPassword.displayName = 'NutShortPassword';
+
+export { ShortPassword as S };

package/dist/esm/sidenavbar.taro-c307b35e.js

@@ -0,0 +1,35 @@
+import React__default, { useState } from 'react';
+import { u as useConfig } from './configprovider.taro-8d71eb49.js';
+import { P as Popup } from './popup.taro-01676bff.js';
+import { O as OffsetContext } from './offsetContext-c2a746fa.js';
+
+const defaultProps = {
+    showhead: false,
+    position: 'left',
+    width: '80%',
+};
+const SideNavBar = (props) => {
+    useConfig();
+    const { title, visible, width, position, children, className, showhead, onClose, ...rest } = {
+        ...defaultProps,
+        ...props,
+    };
+    const offset = props.offset ? Number(props.offset) : 20;
+    const [sidenavbarShow, setSidenavbarShow] = useState(true);
+    const handleClick = () => {
+        setSidenavbarShow(!sidenavbarShow);
+    };
+    return (React__default.createElement(Popup, { visible: visible, style: { width, height: '100%' }, position: position, onClose: onClose },
+        React__default.createElement("div", { className: className ? `${className} nut-sidenavbar` : 'nut-sidenavbar', ...rest },
+            React__default.createElement("div", { className: "nut-sidenavbar__content" },
+                React__default.createElement("div", { className: `nut-sidenavbar__list ${sidenavbarShow ? 'nutShow' : 'nutHide'}`, onClick: handleClick },
+                    React__default.createElement("div", { className: "nut-sidenavbar__title border-bt ", style: { paddingLeft: `${offset}px` } },
+                        title,
+                        React__default.createElement("i", { className: `arrow-icon ${sidenavbarShow ? 'arrow-up' : 'arrow-down'}` })),
+                    React__default.createElement(OffsetContext.Provider, { value: offset },
+                        React__default.createElement("div", { className: "nut-sidenavbar__content" }, children)))))));
+};
+SideNavBar.defaultProps = defaultProps;
+SideNavBar.displayName = 'NutSideNavBar';
+
+export { SideNavBar as S };

package/dist/esm/sidenavbaritem.taro-5a7965d0.js

@@ -0,0 +1,12 @@
+import React__default from 'react';
+
+const SideNavBarItem = (props) => {
+    const { title, ikey, children, onClick, ...rest } = props;
+    const clickFn = (e) => {
+        e.stopPropagation();
+        onClick && onClick({ title, ikey });
+    };
+    return (React__default.createElement("div", { className: "nut-subsidenavbar__item border-bt", onClick: clickFn, ...rest }, title));
+};
+
+export { SideNavBarItem as S };

package/dist/esm/signature.taro-ec4e713b.js

@@ -0,0 +1,143 @@
+import React__default, { useRef, useState, useEffect } from 'react';
+import { getEnv, nextTick, createSelectorQuery, canvasToTempFilePath } from '@tarojs/taro';
+import { B as Button } from './button.taro-9244d065.js';
+import { c as cn } from './bem-350c1702.js';
+import { u as useConfig } from './configprovider.taro-8d71eb49.js';
+
+/* eslint-disable react/no-unknown-property */
+const defaultProps = {
+    canvasId: 'spcanvas',
+    type: 'png',
+    lineWidth: 2,
+    strokeStyle: '#000',
+    className: '',
+};
+const Signature = (props) => {
+    const { locale } = useConfig();
+    const { canvasId, type, lineWidth, strokeStyle, unSupportTpl, className, confirm, clear, onConfirm, onClear, ...rest } = {
+        ...defaultProps,
+        ...props,
+    };
+    const b = cn('signature');
+    const canvasRef = useRef(null);
+    const wrapRef = useRef(null);
+    const [canvasHeight, setCanvasHeight] = useState(0);
+    const [canvasWidth, setCanvasWidth] = useState(0);
+    const ctx = useRef(null);
+    const [disalbeScroll] = useState('true');
+    const startEventHandler = (event) => {
+        if (ctx.current) {
+            ctx.current.beginPath();
+            ctx.current.lineWidth = lineWidth;
+            ctx.current.strokeStyle = strokeStyle;
+        }
+    };
+    const moveEventHandler = (event) => {
+        if (ctx.current) {
+            const evt = event.changedTouches[0];
+            let mouseX = evt.x || evt.clientX;
+            let mouseY = evt.y || evt.clientY;
+            if (getEnv() === 'WEB' && canvasRef.current) {
+                const coverPos = canvasRef.current.getBoundingClientRect();
+                mouseX = evt.clientX - coverPos.left;
+                mouseY = evt.clientY - coverPos.top;
+            }
+            nextTick(() => {
+                // ctx.current.lineCap = 'round'
+                // ctx.current.lineJoin = 'round'
+                ctx.current?.lineTo(mouseX, mouseY);
+                ctx.current?.stroke();
+            });
+        }
+    };
+    const endEventHandler = (event) => { };
+    const handleClearBtn = () => {
+        if (ctx.current) {
+            ctx.current.clearRect(0, 0, canvasWidth, canvasHeight);
+            ctx.current.closePath();
+        }
+        clear && clear();
+        onClear && onClear();
+    };
+    const handleConfirmBtn = () => {
+        onSave();
+    };
+    const onSave = () => {
+        createSelectorQuery()
+            .select(`#${canvasId}`)
+            .fields({
+            node: true,
+            size: true,
+        })
+            .exec((res) => {
+            canvasToTempFilePath({
+                canvas: res[0].node,
+                fileType: props.type,
+                canvasId: `${canvasId}`,
+                success: (res) => {
+                    handleClearBtn();
+                    confirm && confirm(res.tempFilePath);
+                    onConfirm && onConfirm(res.tempFilePath);
+                },
+                fail: (res) => {
+                    console.log('保存失败');
+                },
+            });
+        });
+    };
+    const canvasSetting = (canvasDom, width, height) => {
+        const canvas = canvasDom;
+        canvas.current = canvas;
+        ctx.current = canvas.getContext('2d');
+        setCanvasWidth(width);
+        setCanvasHeight(height);
+        canvas.width = width;
+        canvas.height = height;
+        if (ctx.current) {
+            ctx.current.clearRect(0, 0, width, height);
+            ctx.current.beginPath();
+            ctx.current.lineWidth = lineWidth;
+            ctx.current.strokeStyle = strokeStyle;
+        }
+    };
+    const initCanvas = () => {
+        nextTick(() => {
+            setTimeout(() => {
+                if (getEnv() === 'WEAPP' || getEnv() === 'JD') {
+                    createSelectorQuery()
+                        .select(`#${canvasId}`)
+                        .fields({
+                        node: true,
+                        size: true,
+                    }, (res) => {
+                        const { node, width, height } = res;
+                        canvasSetting(node, width, height);
+                    })
+                        .exec();
+                }
+                else {
+                    const canvasDom = document.getElementById(`${canvasId}`);
+                    let canvas = canvasDom;
+                    if (canvasDom?.tagName !== 'CANVAS') {
+                        canvas = canvasDom?.getElementsByTagName('canvas')[0];
+                    }
+                    canvasSetting(canvas, canvasDom?.offsetWidth, canvasDom?.offsetHeight);
+                }
+            }, 1000);
+        });
+    };
+    useEffect(() => {
+        initCanvas();
+    }, []);
+    return (React__default.createElement("div", { className: `${b()} ${className}`, ...rest },
+        React__default.createElement("div", { className: `${b('inner')} spcanvas_WEAPP`, ref: wrapRef }, getEnv() === 'WEAPP' || getEnv() === 'JD' ? (React__default.createElement("canvas", { id: canvasId, ref: canvasRef, 
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            canvasId: canvasId, disalbeScroll: true, type: "2d", onTouchStart: startEventHandler, onTouchMove: moveEventHandler, onTouchEnd: endEventHandler })) : (React__default.createElement("canvas", { id: canvasId, ref: canvasRef, "canvas-id": canvasId, "disalbe-scroll": disalbeScroll, onTouchStart: startEventHandler, onTouchMove: moveEventHandler, onTouchEnd: endEventHandler, onTouchCancel: endEventHandler }))),
+        React__default.createElement(Button, { className: `${b('btn')}`, type: "default", onClick: () => handleClearBtn() }, locale.signature.reSign),
+        React__default.createElement(Button, { className: `${b('btn')}`, type: "primary", onClick: () => handleConfirmBtn() }, locale.confirm)));
+};
+Signature.defaultProps = defaultProps;
+Signature.displayName = 'NutSignature';
+
+export { Signature as S };

package/dist/esm/skeleton.taro-76faf63f.js

@@ -0,0 +1,62 @@
+import React__default from 'react';
+import classNames from 'classnames';
+import { A as Avatar } from './avatar.taro-3676f38f.js';
+import { c as cn } from './bem-350c1702.js';
+
+const defaultProps = {
+    width: '100px',
+    height: '100px',
+    row: 1,
+    animated: false,
+    title: false,
+    avatar: false,
+    round: false,
+    avatarSize: '50px',
+    loading: false,
+    avatarShape: 'round',
+};
+const Skeleton = (props) => {
+    const { className, width, height, animated, row, title, avatar, avatarSize, round, loading, children, avatarShape, ...restProps } = {
+        ...defaultProps,
+        ...props,
+    };
+    const b = cn('skeleton');
+    const classes = classNames(className, b());
+    const blockClass = classNames({
+        blockClass: true,
+        'blockClass--round': round,
+    });
+    const avatarClass = classNames({
+        avatarClass: true,
+        [`avatarClass--${avatarShape}`]: avatarShape,
+    });
+    const repeatLines = (num) => {
+        return Array.from({ length: num }, (v, i) => i);
+    };
+    const getStyle = () => {
+        if (avatarSize) {
+            return {
+                width: avatarSize,
+                height: avatarSize,
+            };
+        }
+        return {
+            width: '50px',
+            height: '50px',
+        };
+    };
+    return (React__default.createElement(React__default.Fragment, null, loading ? (React__default.createElement("div", null, children)) : (React__default.createElement("div", { className: classes, ...restProps },
+        animated && React__default.createElement("div", { className: "skeleton-animation" }),
+        React__default.createElement("div", { className: "nut-skeleton-content" },
+            avatar && (React__default.createElement(Avatar, { className: avatarClass, bgColor: "rgb(239, 239, 239)", shape: avatarShape, style: getStyle() })),
+            row === 1 && (React__default.createElement("div", { className: blockClass, style: { width, height } })),
+            React__default.createElement("div", { className: "skeleton-content-line" },
+                title && React__default.createElement("div", { className: "skeleton-title" }),
+                repeatLines(row).map((item, index) => {
+                    return (React__default.createElement("div", { className: blockClass, key: index, style: { width, height } }));
+                })))))));
+};
+Skeleton.defaultProps = defaultProps;
+Skeleton.displayName = 'NutSkeleton';
+
+export { Skeleton as S };

package/dist/esm/step.taro-b7903e8c.js

@@ -0,0 +1,59 @@
+import React__default, { useContext } from 'react';
+import classNames from 'classnames';
+import { D as DataContext } from './UserContext-e402e1a6.js';
+import { c as cn } from './bem-350c1702.js';
+import { I as Icon } from './icon.taro-296a1bec.js';
+import { C as ComponentDefaults } from './typings-b9828dba.js';
+
+const defaultProps = {
+    ...ComponentDefaults,
+    title: '',
+    content: '',
+    activeIndex: 0,
+    icon: '',
+    iconColor: '',
+    size: '12px',
+};
+const Step = (props) => {
+    const { children, title, content, activeIndex, icon, iconColor, size, className, renderContent, iconClassPrefix, iconFontClassName, ...restProps } = {
+        ...defaultProps,
+        ...props,
+    };
+    const parent = useContext(DataContext);
+    const dot = parent.propSteps.progressDot;
+    const getCurrentStatus = () => {
+        const index = activeIndex;
+        if (index < +parent.propSteps.current)
+            return 'finish';
+        return index === +parent.propSteps.current ? 'process' : 'wait';
+    };
+    const handleClickStep = () => {
+        parent.propSteps?.onClickStep && parent.propSteps?.onClickStep(activeIndex);
+        parent.propSteps?.clickStep && parent.propSteps?.clickStep(activeIndex);
+    };
+    const b = cn('step');
+    const classes = classNames({
+        [`${b('')}-${getCurrentStatus()}`]: true,
+    }, className, b(''));
+    const renderIconClass = () => {
+        if (!dot && icon) {
+            return 'nut-step-icon is-icon';
+        }
+        if (!dot && !icon) {
+            return 'nut-step-icon is-text';
+        }
+        return 'nut-step-icon';
+    };
+    return (React__default.createElement("div", { className: classes, ...restProps, onClick: handleClickStep },
+        React__default.createElement("div", { className: "nut-step-head" },
+            React__default.createElement("div", { className: "nut-step-line" }),
+            React__default.createElement("div", { className: renderIconClass() }, icon ? (React__default.createElement(Icon, { classPrefix: iconClassPrefix, fontClassName: iconFontClassName, className: "nut-step-icon-inner", color: iconColor, name: icon, size: size })) : (!dot && React__default.createElement("span", { className: "nut-step-inner" }, activeIndex)))),
+        React__default.createElement("div", { className: "nut-step-main" },
+            React__default.createElement("span", { className: "nut-step-title" }, title),
+            content && React__default.createElement("span", { className: "nut-step-content" }, content),
+            renderContent && (React__default.createElement("span", { className: "nut-step-content" }, renderContent())))));
+};
+Step.defaultProps = defaultProps;
+Step.displayName = 'NutStep';
+
+export { Step as S };

package/dist/esm/steps.taro-c82d2252.js

@@ -0,0 +1,30 @@
+import React__default from 'react';
+import classNames from 'classnames';
+import { D as DataContext } from './UserContext-e402e1a6.js';
+import { c as cn } from './bem-350c1702.js';
+
+const defaultProps = {
+    current: 0,
+    direction: 'horizontal',
+    progressDot: false,
+};
+const Steps = (props) => {
+    const propSteps = { ...defaultProps, ...props };
+    const { children, current, direction, className, progressDot, clickStep, onClickStep, ...restProps } = propSteps;
+    const parentSteps = {
+        propSteps,
+    };
+    const b = cn('steps');
+    const classes = classNames({
+        [`${b('')}-${direction}`]: true,
+        [`${b('')}-dot`]: !!props.progressDot,
+    }, className, b(''));
+    return (React__default.createElement(DataContext.Provider, { value: parentSteps }, React__default.createElement('div', {
+        className: classes,
+        ...restProps,
+    }, children)));
+};
+Steps.defaultProps = defaultProps;
+Steps.displayName = 'NutSteps';
+
+export { Steps as S };

package/dist/esm/sticky.taro-218bda37.js

@@ -0,0 +1,138 @@
+import React__default, { useRef, useEffect, useState, useMemo, useCallback } from 'react';
+import classNames from 'classnames';
+import { getEnv, usePageScroll, getSystemInfoSync } from '@tarojs/taro';
+import { g as getRectByTaro } from './useClientRect-1f8ed1fe.js';
+import { g as getScrollParent } from './get-scroll-parent-b4a07e65.js';
+import { c as cn } from './bem-350c1702.js';
+
+function useWatch(dep, callback, config = { immediate: false }) {
+    const { immediate } = config;
+    const prev = useRef();
+    const inited = useRef(false);
+    const stop = useRef(false);
+    useEffect(() => {
+        const execute = () => callback(prev.current);
+        if (!stop.current) {
+            if (!inited.current) {
+                inited.current = true;
+                if (immediate) {
+                    execute();
+                }
+            }
+            else {
+                execute();
+            }
+            prev.current = dep;
+        }
+    }, [dep]);
+    return () => {
+        stop.current = true;
+    };
+}
+
+const defaultProps = {
+    position: 'top',
+    top: 0,
+    bottom: 0,
+    zIndex: 2000,
+};
+const b = cn('sticky');
+const Sticky = (props) => {
+    const { position = 'top', top = 0, bottom = 0, zIndex = 2000, children, container, className, onChange, ...rest } = props;
+    const stickyRef = useRef(null);
+    const rootRef = useRef(null);
+    const offset = position === 'top' ? top : bottom;
+    const [rootRect, setRootRect] = useState({});
+    const [fixed, setFixed] = useState(false);
+    const [transform, setTransform] = useState(0); // 相对容器偏移距离
+    useWatch(fixed, () => {
+        onChange && onChange(fixed);
+    });
+    const rootStyle = useMemo(() => {
+        if (!fixed) {
+            return {
+                height: '',
+                width: '',
+            };
+        }
+        const style = {};
+        if (rootRect.height) {
+            style.height = rootRect.height;
+        }
+        if (rootRect.width) {
+            style.width = rootRect.width;
+        }
+        return style;
+    }, [fixed, rootRect.height, rootRect.width]);
+    const stickyStyle = useMemo(() => {
+        if (!fixed) {
+            return {
+                height: '',
+                width: '',
+                [position]: '',
+            };
+        }
+        let style = {};
+        if (rootRect.height)
+            style.height = rootRect.height;
+        if (rootRect.width)
+            style.width = rootRect.width;
+        style.transform = `translate3d(0, ${transform}px, 0)`;
+        style[position] = offset;
+        style.zIndex = zIndex;
+        return style;
+    }, [fixed, rootRect.height, rootRect.width, transform, position]);
+    const handleScroll = async (scrollTop) => {
+        const curRootRect = await getRectByTaro(rootRef.current);
+        const stickyRect = await getRectByTaro(stickyRef.current);
+        if (curRootRect && stickyRect) {
+            setRootRect(curRootRect);
+            if (position === 'top') {
+                if (container) {
+                    const containerRect = await getRectByTaro(container.current);
+                    const difference = containerRect.bottom - top - curRootRect.height;
+                    const curTransform = difference < 0 ? difference : 0;
+                    setTransform(curTransform);
+                    const curFixed = top > curRootRect.top && containerRect.bottom > 0;
+                    setFixed(curFixed);
+                }
+                else {
+                    setFixed(top > curRootRect.top);
+                }
+            }
+            else {
+                const windowHeight = getSystemInfoSync().windowHeight;
+                setFixed(windowHeight - offset < curRootRect.bottom);
+            }
+        }
+        else {
+            console.log('getRectByTaro获取失败', { stickyRect, curRootRect });
+        }
+    };
+    const getElement = useCallback(() => {
+        return getScrollParent(rootRef.current);
+    }, []);
+    useEffect(() => {
+        if (getEnv() === 'WEB' && getElement() !== window) {
+            window.addEventListener('touchmove', handleScroll, true);
+            window.addEventListener('scroll', handleScroll, true);
+            return () => {
+                window.removeEventListener('touchmove', handleScroll);
+                window.removeEventListener('scroll', handleScroll);
+            };
+        }
+    }, []);
+    usePageScroll((res) => {
+        if (getEnv() === 'WEAPP') {
+            handleScroll(res.scrollTop);
+        }
+    });
+    return (React__default.createElement("div", { ref: rootRef, style: rootStyle, className: classNames(b(), className), ...rest },
+        React__default.createElement("div", { 
+            // 应符合 bem 规范
+            className: classNames('nut-sticky-box', { 'nut-sticky-fixed': fixed }), ref: stickyRef, style: stickyStyle }, children)));
+};
+Sticky.defaultProps = defaultProps;
+Sticky.displayName = 'NutSticky';
+
+export { Sticky as S };

package/dist/esm/subsidenavbar.taro-69cb9752.js

@@ -0,0 +1,63 @@
+import React__default, { useState, useContext, useRef, useCallback, useEffect } from 'react';
+import { O as OffsetContext } from './offsetContext-c2a746fa.js';
+
+const defaultProps = {
+    open: true,
+};
+const SubSideNavBar = (props) => {
+    const { title, ikey, children, onClick, open, ...rest } = {
+        ...defaultProps,
+        ...props,
+    };
+    const [subShow, setSubShow] = useState(open);
+    const offset = useContext(OffsetContext);
+    const listRef = useRef(null);
+    const setListLevel = useCallback((nodeList, level = 1) => {
+        const titleClass = nodeList[0].className;
+        if (titleClass.includes('nut-subsidenavbar__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('nut-subsidenavbar__item')) {
+                const left = offset * (level + 2);
+                item.style.paddingLeft = `${left}px`;
+            }
+            if (itemClass.includes('nut-subsidenavbar__list')) {
+                let level = item.getAttribute('level')
+                    ? Number(item.getAttribute('level'))
+                    : 1;
+                level += 1;
+                item.setAttribute('level', level.toString());
+                item.children && setListLevel(item.children, level);
+            }
+        });
+    }, [offset]);
+    const clickFn = (e) => {
+        e.stopPropagation();
+        setSubShow(!subShow);
+        const isShow = !subShow;
+        onClick && onClick({ title, ikey, isShow });
+    };
+    useEffect(() => {
+        const childNodes = listRef.current?.children;
+        listRef.current?.setAttribute('level', '1');
+        childNodes && setListLevel(childNodes);
+    }, [setListLevel]);
+    const divClass = subShow
+        ? 'nut-subsidenavbar__list  nutShow'
+        : 'nut-subsidenavbar__list  nutHide';
+    const iconClass = subShow ? 'arrow-icon arrow-down' : 'arrow-icon arrow-up';
+    return (React__default.createElement("div", { className: divClass, ref: listRef, onClick: clickFn, ...rest },
+        React__default.createElement("div", { className: "nut-subsidenavbar__title border-bt" },
+            title,
+            " ",
+            React__default.createElement("i", { className: iconClass })),
+        React__default.createElement("div", { className: "nut-subsidenavbar__content" }, children)));
+};
+
+export { SubSideNavBar as S };

package/dist/esm/supports-passive-c85ef996.js

@@ -0,0 +1,18 @@
+import { c as canUseDom } from './can-use-dom-3eeb5af4.js';
+
+let passiveSupported = false;
+if (canUseDom) {
+    try {
+        const opts = Object.defineProperty({}, 'passive', {
+            get() {
+                passiveSupported = true;
+            },
+        });
+        window.addEventListener('test-passive-supported', null, opts);
+    }
+    catch (e) {
+        console.log(e);
+    }
+}
+
+export { passiveSupported as p };