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

package/dist/esm/checkbox.taro-6120e3e3.js

@@ -0,0 +1,171 @@
+import React__default, { createContext, useImperativeHandle, useState, useEffect, useCallback, useContext } from 'react';
+import { I as Icon } from './icon.taro-296a1bec.js';
+import { c as cn } from './bem-350c1702.js';
+import { C as ComponentDefaults } from './typings-b9828dba.js';
+
+const CheckboxGroupContext = createContext(null);
+
+const defaultProps$1 = {
+    disabled: false,
+    checkedValue: [],
+    max: undefined,
+    textPosition: 'right',
+    direction: 'vertical',
+    onChange: (value) => { },
+    options: [],
+};
+const CheckboxGroup = React__default.forwardRef((props, ref) => {
+    const { children } = { ...defaultProps$1, ...props };
+    const b = cn('checkboxgroup');
+    const { className, disabled, onChange, checkedValue, max, textPosition, direction, options, ...rest } = props;
+    useImperativeHandle(ref, () => ({
+        toggleAll(state) {
+            if (state === false) {
+                setInnerValue([]);
+            }
+            else {
+                const childrenLabel = [];
+                React__default.Children.map(children, (child) => {
+                    const childProps = child.props;
+                    childrenLabel.push(childProps.label || child.children);
+                });
+                setInnerValue(childrenLabel);
+            }
+        },
+        toggleReverse() {
+            const childrenLabel = [];
+            React__default.Children.map(children, (child) => {
+                const childProps = child.props;
+                childrenLabel.push(childProps.label || child.children);
+            });
+            const reverse = childrenLabel.filter((c) => innerValue?.findIndex((v) => v === c) === -1);
+            setInnerValue(reverse);
+        },
+    }));
+    const [innerValue, setInnerValue] = useState(checkedValue || []);
+    useEffect(() => {
+        setInnerValue(checkedValue || []);
+    }, [checkedValue]);
+    const renderOptions = useCallback(() => {
+        return options?.map(({ label, value, disabled, onChange, ...rest }) => {
+            return (React__default.createElement(Checkbox, { key: value?.toString(), children: label, label: value, ...rest }));
+        });
+    }, [options, max]);
+    return (React__default.createElement(CheckboxGroupContext.Provider, { value: {
+            textPosition: textPosition || 'left',
+            disabled,
+            max,
+            checkedValue: innerValue || [],
+            check: (value) => {
+                const combined = [...innerValue, value];
+                setInnerValue(combined);
+                onChange && onChange(combined);
+            },
+            uncheck: (value) => {
+                const reduced = innerValue.filter((item) => item !== value);
+                setInnerValue(reduced);
+                onChange && onChange(reduced);
+            },
+        } },
+        React__default.createElement("div", { className: `${b()} nut-checkboxgroup--${props.direction} ${className || ''}`, ...rest }, options?.length ? renderOptions() : children)));
+});
+CheckboxGroup.defaultProps = defaultProps$1;
+CheckboxGroup.displayName = 'NutCheckboxGroup';
+
+const defaultProps = {
+    ...ComponentDefaults,
+    checked: false,
+    disabled: false,
+    textPosition: 'right',
+    iconSize: 18,
+    iconName: 'check-normal',
+    iconActiveName: 'checked',
+    iconClassPrefix: 'nut-icon',
+    iconFontClassName: 'nutui-iconfont',
+    iconIndeterminateName: 'check-disabled',
+    onChange: (state, label) => { },
+};
+const Checkbox = (props) => {
+    const { children } = {
+        ...defaultProps,
+        ...props,
+    };
+    const b = cn('checkbox');
+    const { iconName, iconSize, label, className, iconActiveName, checked, disabled, onChange, indeterminate, iconClassPrefix, iconFontClassName, iconIndeterminateName, ...others } = props;
+    // eslint-disable-next-line prefer-const
+    let { textPosition, ...rest } = others;
+    const ctx = useContext(CheckboxGroupContext);
+    let [innerChecked, setInnerChecked] = useState(checked);
+    // eslint-disable-next-line prefer-const
+    let [innerDisabled, setDisabled] = useState(disabled);
+    const [_indeterminate, setIndeterminate] = useState(indeterminate);
+    useEffect(() => {
+        !ctx && setInnerChecked(checked);
+        setDisabled(disabled);
+        setIndeterminate(indeterminate);
+    }, [disabled, checked, indeterminate]);
+    if (ctx) {
+        if (ctx.textPosition !== undefined) {
+            textPosition = ctx.textPosition;
+        }
+        innerDisabled = ctx.disabled;
+        innerChecked = ctx.checkedValue.includes(label);
+        setInnerChecked = (checked) => {
+            if (ctx.disabled)
+                return;
+            if (checked)
+                ctx.check(label);
+            if (!checked)
+                ctx.uncheck(label);
+        };
+    }
+    const getIconName = () => {
+        if (!innerChecked) {
+            return iconName;
+        }
+        if (_indeterminate) {
+            return iconIndeterminateName;
+        }
+        return iconActiveName;
+    };
+    const renderIcon = () => {
+        return (React__default.createElement(Icon, { classPrefix: iconClassPrefix, fontClassName: iconFontClassName, name: getIconName(), size: iconSize, className: color() }));
+    };
+    const color = () => {
+        if (innerDisabled) {
+            return 'nut-checkbox__icon--disable';
+        }
+        if (innerChecked) {
+            if (_indeterminate) {
+                return 'nut-checkbox__icon--indeterminate';
+            }
+            return 'nut-checkbox__icon';
+        }
+        return 'nut-checkbox__icon--unchecked';
+    };
+    const renderLabel = () => {
+        return (React__default.createElement("span", { className: `${b('label', { disabled: innerDisabled })} ` }, children || label));
+    };
+    const handleClick = () => {
+        // 禁用的时候直接返回
+        if (disabled)
+            return;
+        // 先转换状态
+        const latestChecked = !innerChecked;
+        // 判断是不是有 context 和 max，有的话需要判断是不是超过最大限制
+        if (ctx && ctx.max !== undefined) {
+            if (latestChecked && ctx.checkedValue.length >= ctx.max)
+                return;
+        }
+        onChange && onChange(latestChecked, label || children);
+        setInnerChecked(latestChecked);
+    };
+    return (React__default.createElement("div", { className: `${b({ reverse: textPosition === 'left' })} ${className || ''}`, ...rest, onClick: handleClick },
+        renderIcon(),
+        renderLabel()));
+};
+Checkbox.defaultProps = defaultProps;
+Checkbox.displayName = 'NutCheckBox';
+Checkbox.Group = CheckboxGroup;
+
+export { Checkbox as C, CheckboxGroup as a };

package/dist/esm/circleprogress.taro-79854448.js

@@ -0,0 +1,109 @@
+import React__default, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+import { a as isObject } from './index-5bcb0ff8.js';
+import { c as cn } from './bem-350c1702.js';
+
+const defaultProps = {
+    strokeWidth: 5,
+    radius: 50,
+    strokeLinecap: 'round',
+    circleColor: '#fa2c19',
+    pathColor: '#e5e9f2',
+    clockwise: true,
+};
+const CircleProgress = (props) => {
+    const { children, progress, className, radius, pathColor, clockwise, circleColor, strokeWidth, style, strokeLinecap, ...restProps } = {
+        ...defaultProps,
+        ...props,
+    };
+    const [oldValue, setOldValue] = useState(progress);
+    const b = cn('circleprogress');
+    const classes = classNames(className, b(''));
+    const refRandomId = Math.random().toString(36).slice(-8);
+    const styles = {
+        height: `${Number(radius) * 2}px`,
+        width: `${Number(radius) * 2}px`,
+        ...style,
+    };
+    useEffect(() => {
+        let rafId;
+        const startTime = Date.now();
+        const startRate = Number(oldValue); // 30
+        const endRate = Number(progress); // 40
+        const duration = Math.abs(((startRate - endRate) * 1000) / +100); // 100
+        const animate = () => {
+            const now = Date.now();
+            const progress = Math.min((now - startTime) / duration, 1);
+            const rate = progress * (endRate - startRate) + startRate;
+            setOldValue(Math.min(Math.max(+rate, 0), 100));
+            if (endRate > startRate ? rate < endRate : rate > endRate) {
+                rafId = window.requestAnimationFrame(animate);
+            }
+        };
+        if (rafId) {
+            cancelAnimationFrame(rafId);
+        }
+        rafId = window.requestAnimationFrame(animate);
+    }, [progress]);
+    const cancelAnimationFrame = function (id) {
+        clearTimeout(id);
+    };
+    const stop = () => {
+        if (!isObject(circleColor)) {
+            return [];
+        }
+        const color = circleColor;
+        const colorArr = Object.keys(color).sort((a, b) => parseFloat(a) - parseFloat(b));
+        const stopArr = [];
+        colorArr.map((item) => {
+            const obj = {
+                key: '',
+                value: '',
+            };
+            obj.key = item;
+            obj.value = color[item];
+            stopArr.push(obj);
+        });
+        return stopArr;
+    };
+    const transColor = (color) => {
+        return color && color.replace('#', '%23');
+    };
+    const format = (progress) => Math.min(Math.max(+progress, 0), 100);
+    const circleStyle = () => {
+        const stopArr = stop();
+        const stopDom = [];
+        if (stopArr) {
+            stopArr.map((item) => {
+                let obj = '';
+                obj = `%3Cstop offset='${item.key}' stop-color='${transColor(item.value)}'/%3E`;
+                stopDom.push(obj);
+            });
+        }
+        const perimeter = 283;
+        const progress = +oldValue;
+        const offset = (perimeter * Number(format(parseFloat(progress.toFixed(1))))) / 100;
+        const isWise = props.clockwise ? 1 : 0;
+        const color = isObject(circleColor)
+            ? `url(%23${refRandomId})`
+            : transColor(circleColor);
+        const d = `M 50 50 m 0 -45 a 45 45 0 1 ${isWise} 0 90 a 45 45 0 1, ${isWise} 0 -90`;
+        const pa = `%3Cdefs%3E%3ClinearGradient id='${refRandomId}' x1='100%25' y1='0%25' x2='0%25' y2='0%25'%3E${stopDom}%3C/linearGradient%3E%3C/defs%3E`;
+        const path = `%3Cpath d='${d}' stroke-width='${strokeWidth}' stroke='${transColor(props.pathColor)}' fill='none'/%3E`;
+        const path1 = `%3Cpath d='${d}' stroke-width='${strokeWidth}' stroke-dasharray='${offset},${perimeter}' stroke-linecap='round' stroke='${transColor(color)}' fill='none'/%3E`;
+        return {
+            background: `url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100'  xmlns='http://www.w3.org/2000/svg'%3E${pa}${path}${path1}%3C/svg%3E")`,
+            width: '100%',
+            height: '100%',
+        };
+    };
+    return (React__default.createElement("div", { className: classes, style: styles, ...restProps },
+        React__default.createElement("div", { style: circleStyle() }),
+        React__default.createElement("div", { className: "nut-circleprogress-text" }, children || React__default.createElement("div", null,
+            progress,
+            "%"))));
+};
+CircleProgress.defaultProps = defaultProps;
+CircleProgress.displayName = 'NutCircleProgress';
+
+export { CircleProgress as C };

package/dist/esm/col.taro-53eed3cc.js

@@ -0,0 +1,41 @@
+import React__default, { useState, useContext, useEffect } from 'react';
+import classNames from 'classnames';
+import { D as DataContext } from './UserContext-0aac9a82.js';
+
+const defaultProps = {
+    span: '24',
+    offset: '0',
+    gutter: '0',
+};
+const Col = (props) => {
+    const { className, style = {}, span, offset, children, onClick, } = {
+        ...defaultProps,
+        ...props,
+    };
+    const [colName, setColName] = useState('');
+    const [colStyle, setColStyle] = useState({});
+    const { gutter } = useContext(DataContext);
+    const classs = () => {
+        // 定义col的class类
+        const prefixCls = 'nut-col';
+        return `${prefixCls} ${prefixCls}-${span} ${gutter ? `${prefixCls}-gutter` : ''} ${prefixCls}-${offset}`;
+    };
+    const getStyle = () => {
+        // 定义col的style类
+        const style = {};
+        style.paddingLeft = `${gutter / 2}px`;
+        style.paddingRight = `${gutter / 2}px`;
+        return style;
+    };
+    useEffect(() => {
+        setColName(classs);
+        setColStyle(getStyle);
+    }, [span, offset, gutter]);
+    return (React__default.createElement("div", { className: classNames(colName, className), style: { ...style, ...colStyle }, onClick: (e) => {
+            onClick && onClick(e, 'col');
+        } }, children));
+};
+Col.defaultProps = defaultProps;
+Col.displayName = 'NutCol';
+
+export { Col as C };

package/dist/esm/collapse.taro-1a9e4ba2.js

@@ -0,0 +1,83 @@
+import React__default, { memo, useState, useEffect } from 'react';
+import classNames from 'classnames';
+import { c as cn } from './bem-350c1702.js';
+
+const defaultProps = {
+    activeName: ['0'],
+    accordion: false,
+    icon: '',
+    iconSize: '16px',
+    iconColor: '',
+    rotate: 180,
+};
+function areEqual(prevProps, nextProps) {
+    return (prevProps.children === nextProps.children &&
+        JSON.stringify(prevProps.activeName) ===
+            JSON.stringify(nextProps.activeName));
+}
+const Collapse = memo((props) => {
+    const { className, style, children, activeName, accordion, icon, rotate, iconSize, iconColor, onChange, } = {
+        ...defaultProps,
+        ...props,
+    };
+    const childrenDom = React__default.Children.toArray(children);
+    const [defaultOpenIndex, setDefaultOpenIndex] = useState([]);
+    const handleActiveName = () => {
+        let activeArr = [];
+        if (!Array.isArray(activeName)) {
+            activeArr.push(activeName.toString());
+        }
+        else {
+            // 数组
+            if (accordion && activeName.length > 1) {
+                console.warn('手风琴模式不支持传递多个打开页签');
+            }
+            const activeNameStr = activeName.map((item) => {
+                return item.toString();
+            });
+            activeArr = [...activeNameStr];
+        }
+        return activeArr;
+    };
+    const colBem = cn('collapse');
+    useEffect(() => {
+        const activeArr = handleActiveName();
+        setDefaultOpenIndex(activeArr);
+    }, [activeName]);
+    const onToggle = (isOpen, name) => {
+        let newOpenIndex = [...defaultOpenIndex];
+        if (isOpen) {
+            // 当前状态为true，则变为false,闭合
+            const removeIndex = newOpenIndex.findIndex((value) => {
+                return value === name;
+            });
+            newOpenIndex.splice(removeIndex, 1);
+        }
+        else {
+            // 当前状态为false，变为true，展开
+            // eslint-disable-next-line no-lonely-if
+            if (accordion) {
+                newOpenIndex = [name];
+            }
+            else {
+                newOpenIndex.push(name);
+            }
+        }
+        setDefaultOpenIndex(newOpenIndex);
+        onChange && onChange(!isOpen, name);
+    };
+    return (React__default.createElement("div", { className: classNames(colBem(), className), style: style }, childrenDom.map((item) => {
+        return React__default.cloneElement(item, {
+            isOpen: defaultOpenIndex.includes(item.props.name),
+            onToggle: (isOpen, name) => onToggle(isOpen, name),
+            icon,
+            rotate,
+            iconSize,
+            iconColor,
+        });
+    })));
+}, areEqual);
+Collapse.defaultProps = defaultProps;
+Collapse.displayName = 'NutCollapse';
+
+export { Collapse as C };

package/dist/esm/collapseitem-4d0bc55d.js

@@ -0,0 +1,83 @@
+import React__default, { useState, useCallback, useEffect } from 'react';
+import { c as cn } from './bem-350c1702.js';
+import { I as Icon } from './icon-296a1bec.js';
+import { C as ComponentDefaults } from './typings-b9828dba.js';
+
+const defaultProps = {
+    ...ComponentDefaults,
+    title: '',
+    name: '',
+    isOpen: false,
+    icon: '',
+    iconSize: '',
+    iconColor: '',
+    disabled: false,
+    rotate: 180,
+    subTitle: '',
+    titleIcon: '',
+    titleIconColor: '',
+    titleIconPosition: '',
+    titleIconSize: '',
+    childnull: true,
+};
+const CollapseItem = (props) => {
+    const { children, title, isOpen, onToggle, name, disabled, icon, rotate, subTitle, titleIcon, titleIconColor, titleIconPosition, titleIconSize, iconSize, iconColor, childnull, iconClassPrefix, iconFontClassName, ...rest } = {
+        ...defaultProps,
+        ...props,
+    };
+    const [domHeight, setDomHeight] = useState(-1); // 保存content的高度
+    const [currHeight, setCurrHeight] = useState('auto'); // 设置content的高度
+    const [update, setUpdate] = useState(false);
+    const [iconStyle, setIconStyle] = useState({
+        transform: 'translateY(-50%)',
+    });
+    const colBem = cn('collapse-item');
+    const measuredRef = useCallback((node) => {
+        if (node !== null) {
+            setDomHeight(node.getBoundingClientRect().height);
+        }
+    }, [update]);
+    useEffect(() => {
+        // 一开始content都有高度，在这里根据isOpen，改变其高度
+        setTimeout(() => {
+            if (domHeight !== -1) {
+                isOpen ? setCurrHeight(`${domHeight}px`) : setCurrHeight('0px');
+            }
+            const newIconStyle = isOpen
+                ? { transform: `translateY(-50%) rotate(${rotate}deg)` }
+                : { transform: 'translateY(-50%)' };
+            setIconStyle(newIconStyle);
+        }, 10);
+    }, [isOpen, domHeight, rotate]);
+    useEffect(() => {
+        if (!isOpen) {
+            setCurrHeight('0px');
+        }
+        else {
+            setCurrHeight('auto');
+        }
+        setUpdate(!update);
+    }, [children, isOpen]);
+    return (React__default.createElement("div", { className: colBem(), ...rest },
+        React__default.createElement("div", { className: colBem('header', { disabled }), onClick: () => {
+                if (disabled)
+                    return;
+                onToggle && onToggle(isOpen, name);
+            } },
+            React__default.createElement("div", { className: colBem('title') },
+                titleIcon && titleIconPosition === 'left' && (React__default.createElement("b", { className: colBem('title-icon-left') },
+                    React__default.createElement(Icon, { classPrefix: iconClassPrefix, fontClassName: iconFontClassName, name: titleIcon, size: titleIconSize, color: disabled ? '#C2C2C2' : titleIconColor }))),
+                title,
+                titleIcon && titleIconPosition === 'right' && (React__default.createElement("b", { className: colBem('title-icon-right') },
+                    React__default.createElement(Icon, { classPrefix: iconClassPrefix, fontClassName: iconFontClassName, name: titleIcon, size: titleIconSize, color: disabled ? '#C2C2C2' : titleIconColor })))),
+            React__default.createElement("div", { className: colBem('sub-title') }, subTitle),
+            React__default.createElement("div", { className: colBem('icon-box') },
+                React__default.createElement("div", { className: colBem('icon'), style: iconStyle },
+                    React__default.createElement(Icon, { classPrefix: iconClassPrefix, fontClassName: iconFontClassName, name: icon, size: iconSize, color: disabled ? '#C2C2C2' : iconColor })))),
+        childnull && (React__default.createElement("div", { className: colBem('content'), style: { height: currHeight }, ref: measuredRef },
+            React__default.createElement("div", { className: colBem('content-text') }, children)))));
+};
+CollapseItem.defaultProps = defaultProps;
+CollapseItem.displayName = 'NutCollapseItem';
+
+export { CollapseItem as C };

package/dist/esm/configprovider-67d19d3a.js

@@ -0,0 +1,19 @@
+import { createContext, useContext } from 'react';
+import 'lodash.kebabcase';
+import { z as zhCN } from './zh-CN-c779e6c1.js';
+
+const defaultConfigRef = {
+    current: {
+        locale: zhCN,
+    },
+};
+const getDefaultConfig = () => {
+    return defaultConfigRef.current;
+};
+// 创建一个 Context 对象
+const ConfigContext = createContext(null);
+const useConfig = () => {
+    return useContext(ConfigContext) ?? getDefaultConfig();
+};
+
+export { useConfig as u };

package/dist/esm/configprovider.taro-8d71eb49.js

@@ -0,0 +1,42 @@
+import React__default, { createContext, useContext, useMemo } from 'react';
+import kebabCase from 'lodash.kebabcase';
+import { z as zhCN } from './zh-CN-c779e6c1.js';
+
+const defaultProps = {
+    locale: zhCN,
+};
+const defaultConfigRef = {
+    current: {
+        locale: zhCN,
+    },
+};
+const getDefaultConfig = () => {
+    return defaultConfigRef.current;
+};
+// 创建一个 Context 对象
+const ConfigContext = createContext(null);
+const useConfig = () => {
+    return useContext(ConfigContext) ?? getDefaultConfig();
+};
+function convertThemeVarsToCSSVars(themeVars) {
+    const cssVars = {};
+    Object.keys(themeVars).forEach((key) => {
+        cssVars[`--${kebabCase(key)}`] = themeVars[key];
+    });
+    return cssVars;
+}
+const ConfigProvider = (props) => {
+    const { children, ...config } = { ...defaultProps, ...props };
+    const parentConfig = useConfig();
+    const theme = config.theme || {};
+    const style = useMemo(() => convertThemeVarsToCSSVars(theme), [theme]);
+    return (React__default.createElement(ConfigContext.Provider, { value: {
+            ...parentConfig,
+            ...config,
+        } },
+        React__default.createElement("div", { style: style }, children)));
+};
+ConfigProvider.defaultProps = defaultProps;
+ConfigProvider.displayName = 'NutConfigProvider';
+
+export { ConfigProvider as C, useConfig as u };