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

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

@@ -1,171 +0,0 @@
-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

@@ -1,109 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

@@ -1,83 +0,0 @@
-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

@@ -1,83 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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 };