@nutui/nutui-react-taro 2.0.0-alpha.1 → 2.0.0-alpha.11

package/dist/esm/radio.taro-51e10152.js

@@ -1,177 +0,0 @@
-import React__default, { useState, useEffect, useCallback, useContext } from 'react';
-import { CheckChecked, CheckNormal } from '@nutui/icons-react-taro';
-import { C as ComponentDefaults } from './typings-d8491423.js';
-import { c as cn } from './bem-350c1702.js';
-
-const radioContext = {
-    onChange: (val) => { },
-};
-var RadioContext = React__default.createContext(radioContext);
-
-const defaultProps$1 = {
-    value: null,
-    textPosition: 'right',
-    onChange: (value) => { },
-    direction: 'vertical',
-    options: [],
-};
-const RadioGroup = React__default.forwardRef((props, ref) => {
-    const { children } = { ...defaultProps$1, ...props };
-    cn('RadioGroup');
-    const { className, value, onChange, textPosition, direction, options, ...rest } = props;
-    const [val2State, setVal2State] = useState(value);
-    // useImperativeHandle(ref, () => ({
-    //   toggleAll(state: boolean) {
-    //     console.log(state)
-    //     if (state === false) {
-    //       setInnerValue([])
-    //     } else {
-    //       const childrenLabel: string[] = []
-    //       React.Children.map(children, (child) => {
-    //         const childProps = (child as any).props
-    //         childrenLabel.push(childProps.label || (child as any).children)
-    //       })
-    //       setInnerValue(childrenLabel)
-    //     }
-    //   },
-    // }))
-    useEffect(() => {
-        setVal2State(value);
-    }, [value]);
-    // function handleChildChange(state: boolean, label: string) {
-    //   if (innerValue) {
-    //     let clippedValue = []
-    //     if (state) {
-    //       clippedValue = [...innerValue, label]
-    //     } else {
-    //       innerValue?.splice(innerValue?.indexOf(label), 1)
-    //       clippedValue = [...innerValue]
-    //     }
-    //     setInnerValue(clippedValue)
-    //     onChange && onChange(clippedValue)
-    //   }
-    // }
-    function validateChildChecked(child) {
-        if (val2State === null)
-            return false;
-        return val2State === child.props.value;
-    }
-    function validateChecked(value) {
-        if (val2State === null)
-            return false;
-        return val2State === value;
-    }
-    function cloneChildren() {
-        return React__default.Children.map(children, (child, index) => {
-            const childChecked = validateChildChecked(child);
-            if (child.type.displayName !== 'NutRadio') {
-                return React__default.cloneElement(child);
-            }
-            return React__default.cloneElement(child, {
-                textPosition,
-                checked: childChecked,
-                // onChange: handleChildChange,
-            });
-        });
-    }
-    const renderOptionsChildren = useCallback(() => {
-        return options?.map(({ label, value, disabled, onChange, ...rest }) => {
-            const childChecked = validateChecked(value);
-            return (React__default.createElement(Radio, { key: value?.toString(), children: label, value: value, disabled: disabled, onChange: onChange, ...rest, textPosition: textPosition, checked: childChecked }));
-        });
-    }, [val2State, options]);
-    return (React__default.createElement(RadioContext.Provider, { value: {
-            onChange: (val) => {
-                setVal2State(val);
-                onChange && onChange(val);
-            },
-        } },
-        React__default.createElement("div", { className: `nut-radiogroup nut-radiogroup--${props.direction} ${className || ''}`, ...rest }, options?.length ? renderOptionsChildren() : cloneChildren())));
-});
-RadioGroup.defaultProps = defaultProps$1;
-RadioGroup.displayName = 'NutRadioGroup';
-
-const defaultProps = {
-    ...ComponentDefaults,
-    className: '',
-    style: {},
-    disabled: false,
-    checked: false,
-    shape: 'round',
-    value: '',
-    textPosition: 'right',
-    icon: null,
-    checkedIcon: null,
-    iconSize: 18,
-    onChange: (e) => { },
-};
-const Radio = (props) => {
-    const { children } = {
-        ...defaultProps,
-        ...props,
-    };
-    const { className, disabled, checked, shape, textPosition, value, icon, checkedIcon, iconSize, onChange, ...rest } = props;
-    const componentName = 'nut-radio';
-    const [checkedStatement, setCheckedStatement] = useState(checked);
-    const [valueStatement, setValueStatement] = useState(value);
-    const [disabledStatement, setDisabledStatement] = useState(disabled);
-    const context = useContext(RadioContext);
-    useEffect(() => {
-        setDisabledStatement(disabled);
-        setValueStatement(value);
-        setCheckedStatement(checked);
-    }, [disabled, value, checked]);
-    const renderLabel = () => {
-        return (React__default.createElement("div", { className: `${componentName}__label ${disabledStatement ? `${componentName}__label--disabled` : ''}` }, children));
-    };
-    const renderButton = () => {
-        return (React__default.createElement("div", { className: `${componentName}__button ${!disabledStatement &&
-                checkedStatement &&
-                `${componentName}__button--active`} ${disabledStatement ? `${componentName}__button--disabled` : ''}` }, children));
-    };
-    const color = () => {
-        if (disabledStatement) {
-            return 'nut-radio__icon--disable';
-        }
-        if (checkedStatement) {
-            return 'nut-radio__icon';
-        }
-        return 'nut-radio__icon--unchecked';
-    };
-    const renderIcon = () => {
-        const { icon, iconSize, checkedIcon } = props;
-        if (!disabledStatement && checkedStatement) {
-            return React__default.isValidElement(checkedIcon) ? (React__default.cloneElement(checkedIcon, {
-                ...checkedIcon.props,
-                className: color(),
-            })) : (React__default.createElement(CheckChecked, { size: iconSize, className: color() }));
-        }
-        return React__default.isValidElement(icon) ? (React__default.cloneElement(icon, {
-            ...icon.props,
-            className: color(),
-        })) : (React__default.createElement(CheckNormal, { size: iconSize, className: color() }));
-    };
-    const reverseState = textPosition === 'left';
-    const renderRadioItem = () => {
-        if (shape === 'button') {
-            return renderButton();
-        }
-        if (reverseState) {
-            return [renderLabel(), renderIcon()];
-        }
-        return [renderIcon(), renderLabel()];
-    };
-    const handleClick = (e) => {
-        if (disabledStatement || checkedStatement)
-            return;
-        setCheckedStatement(!checkedStatement);
-        onChange && onChange(e);
-        context && context.onChange(valueStatement);
-    };
-    return (React__default.createElement("div", { className: `nut-radio ${className} ${reverseState ? `${componentName}--reverse` : ''}`, onClick: handleClick, ...rest }, renderRadioItem()));
-};
-Radio.defaultProps = defaultProps;
-Radio.displayName = 'NutRadio';
-Radio.RadioGroup = RadioGroup;
-
-export { Radio as R, RadioGroup as a };

package/dist/esm/range.taro-7a2b6ca1.js

@@ -1,332 +0,0 @@
-import React__default, { useState, useRef, useEffect, useCallback } from 'react';
-import { u as useTouch } from './use-touch-db24bb5c.js';
-import { g as getRectByTaro } from './use-client-rect-1f8ed1fe.js';
-import { T as Toast } from './toast.taro-e4f44812.js';
-import { u as useConfig } from './configprovider.taro-c8c54556.js';
-
-const defaultProps = {
-    range: false,
-    hiddenRange: false,
-    hiddenTag: false,
-    min: 0,
-    max: 100,
-    step: 1,
-    modelValue: 0,
-    vertical: false,
-    marks: {},
-};
-let startValue;
-let currentValue;
-const Range = (props) => {
-    const { locale } = useConfig();
-    const { className, range, disabled, activeColor, inactiveColor, buttonColor, hiddenRange, hiddenTag, modelValue, button, vertical, marks, dragStart, dragEnd, onChange, onDragStart, onDragEnd, minDesc, maxDesc, curValueDesc, } = { ...defaultProps, ...props };
-    let { min, max, step } = { ...defaultProps, ...props };
-    min = Number(min);
-    max = Number(max);
-    step = Number(step);
-    const [buttonIndex, SetButtonIndex] = useState(0);
-    const [initValue, SetInitValue] = useState();
-    const [dragStatus, SetDragStatus] = useState('start'  );
-    const touch = useTouch();
-    const root = useRef(null);
-    const [marksList, SetMarksList] = useState([]);
-    const [show, SetShow] = useState(false);
-    const [toastMsg, SetToastMsg] = useState('');
-    const toastShow = (msg) => {
-        SetToastMsg(msg);
-        SetShow(true);
-    };
-    useEffect(() => {
-        if (typeof modelValue === 'number') {
-            if (!range && (modelValue < min || modelValue > max)) {
-                SetInitValue(0);
-                toastShow(`${modelValue} ${locale.range.rangeText}`);
-                return;
-            }
-            SetInitValue(modelValue);
-        }
-    }, [modelValue]);
-    useEffect(() => {
-        if (marks) {
-            const marksKeys = Object.keys(marks);
-            const list = marksKeys
-                .map(parseFloat)
-                .sort((a, b) => a - b)
-                .filter((point) => point >= min && point <= max);
-            SetMarksList(list);
-        }
-    }, [marks]);
-    const scope = () => {
-        return Number(max) - Number(min);
-    };
-    const classes = useCallback(() => {
-        const prefixCls = 'nut-range';
-        return [
-            prefixCls,
-            `${disabled ? `${prefixCls}-disabled` : ''}`,
-            `${vertical ? `${prefixCls}-vertical` : ''}`,
-            `${!hiddenRange ? `${prefixCls}-show-number` : ''}`,
-        ]
-            .filter(Boolean)
-            .join(' ');
-    }, [disabled, vertical, hiddenRange]);
-    const containerClasses = useCallback(() => {
-        const prefixCls = 'nut-range-container';
-        return [prefixCls, `${vertical ? `${prefixCls}-vertical` : ''}`, className]
-            .filter(Boolean)
-            .join(' ');
-    }, [vertical, className]);
-    const markClassName = useCallback((mark) => {
-        const classPrefix = 'nut-range-mark';
-        let lowerBound = Number(min);
-        let upperBound = Number(max);
-        if (range) {
-            const [left, right] = modelValue;
-            lowerBound = left;
-            upperBound = right;
-        }
-        else {
-            upperBound = modelValue;
-        }
-        const isActive = mark <= upperBound && mark >= lowerBound;
-        return [
-            `${classPrefix}-text`,
-            `${isActive ? `${classPrefix}-text-active` : ''}`,
-        ]
-            .filter(Boolean)
-            .join(' ');
-    }, [range, modelValue, min, max]);
-    const [rangeName, setRangeName] = useState(classes());
-    const [containerName, setContainerName] = useState(containerClasses());
-    useEffect(() => {
-        setRangeName(classes());
-        setContainerName(containerClasses());
-    }, [classes, containerClasses]);
-    const wrapperStyle = () => {
-        return {
-            background: inactiveColor,
-        };
-    };
-    const buttonStyle = () => {
-        return {
-            borderColor: buttonColor,
-        };
-    };
-    const isRange = (val) => {
-        return !!range && Array.isArray(val);
-    };
-    const calcMainAxis = () => {
-        const modelVal = initValue || initValue === 0 ? initValue : modelValue;
-        if (isRange(modelVal)) {
-            return `${((modelVal[1] - modelVal[0]) * 100) / scope()}%`;
-        }
-        return `${((modelVal - Number(min)) * 100) / scope()}%`;
-    };
-    const calcOffset = () => {
-        const modelVal = initValue || initValue === 0 ? initValue : modelValue;
-        if (isRange(modelVal)) {
-            return `${((modelVal[0] - Number(min)) * 100) / scope()}%`;
-        }
-        return `0%`;
-    };
-    const barStyle = () => {
-        if (vertical) {
-            return {
-                height: calcMainAxis(),
-                top: calcOffset(),
-                background: activeColor,
-                transition: dragStatus ? 'none' : undefined,
-            };
-        }
-        return {
-            width: calcMainAxis(),
-            left: calcOffset(),
-            background: activeColor,
-            transition: dragStatus ? 'none' : undefined,
-        };
-    };
-    const marksStyle = (mark) => {
-        let style = {
-            left: `${((mark - Number(min)) / scope()) * 100}%`,
-        };
-        if (vertical) {
-            style = {
-                top: `${((mark - Number(min)) / scope()) * 100}%`,
-            };
-        }
-        return style;
-    };
-    const tickStyle = (mark) => {
-        let lowerBound = Number(min);
-        let upperBound = Number(max);
-        if (range) {
-            const [left, right] = modelValue;
-            lowerBound = left;
-            upperBound = right;
-        }
-        const isActive = mark <= upperBound && mark >= lowerBound;
-        const style = {
-            background: !isActive ? inactiveColor : activeColor,
-        };
-        return style;
-    };
-    const format = (value) => {
-        value = Math.max(+min, Math.min(value, +max));
-        return Math.round(value / +step) * +step;
-    };
-    const isSameValue = (newValue, oldValue) => {
-        return JSON.stringify(newValue) === JSON.stringify(oldValue);
-    };
-    const handleOverlap = (value) => {
-        if (value[0] > value[1]) {
-            return value.slice(0).reverse();
-        }
-        return value;
-    };
-    const updateValue = (value, end) => {
-        if (isRange(value)) {
-            value = handleOverlap(value).map(format);
-        }
-        else {
-            value = format(value);
-        }
-        const modelVal = initValue || initValue === 0 ? initValue : modelValue;
-        if (!isSameValue(value, modelVal)) {
-            SetInitValue(value);
-        }
-        if ((marks || end) && !isSameValue(value, startValue)) {
-            onChange && onChange(value);
-        }
-    };
-    const click = async (event) => {
-        if (disabled || !root.current) {
-            return;
-        }
-        SetDragStatus('');
-        const rect = await getRectByTaro(root.current);
-        let delta = (event.detail.x ? event.detail.x : event.clientX) - rect.left;
-        let total = rect.width;
-        if (vertical) {
-            delta = (event.detail.y ? event.detail.y : event.clientY) - rect.top;
-            total = rect.height;
-        }
-        const value = Number(min) + (delta / total) * scope();
-        currentValue = initValue || initValue === 0 ? initValue : modelValue;
-        if (isRange(currentValue)) {
-            const [left, right] = currentValue;
-            const middle = (left + right) / 2;
-            if (value <= middle) {
-                updateValue([value, right], true);
-            }
-            else {
-                updateValue([left, value], true);
-            }
-        }
-        else {
-            updateValue(value, true);
-        }
-    };
-    const onTouchStart = (event) => {
-        if (disabled) {
-            return;
-        }
-        touch.start(event);
-        currentValue = initValue || initValue === 0 ? initValue : modelValue;
-        if (isRange(currentValue)) {
-            startValue = currentValue.map(format);
-        }
-        else {
-            startValue = format(currentValue);
-        }
-        SetDragStatus('start');
-    };
-    const onTouchMove = async (event) => {
-        if (disabled || !root.current) {
-            return;
-        }
-        if (dragStatus === 'start') {
-            dragStart && dragStart();
-            onDragStart && onDragStart();
-        }
-        touch.move(event);
-        SetDragStatus('draging');
-        const rect = await getRectByTaro(root.current);
-        let delta = touch.deltaX;
-        let total = rect.width;
-        let diff = (delta / total) * scope();
-        if (vertical) {
-            delta = touch.deltaY;
-            total = rect.height;
-            diff = (delta / total) * scope();
-        }
-        if (isRange(startValue)) {
-            currentValue[buttonIndex] = startValue[buttonIndex] + diff;
-        }
-        else {
-            currentValue = startValue + diff;
-        }
-        updateValue(currentValue);
-    };
-    const onTouchEnd = (event) => {
-        if (disabled) {
-            return;
-        }
-        if (dragStatus === 'draging') {
-            updateValue(currentValue, true);
-            dragEnd && dragEnd();
-            onDragEnd && onDragEnd();
-        }
-        SetDragStatus('');
-    };
-    const curValue = (idx) => {
-        const modelVal = initValue || initValue === 0 ? initValue : modelValue;
-        const value = typeof idx === 'number' ? modelVal[idx] : modelVal;
-        return value;
-    };
-    return (React__default.createElement("div", { className: `${containerName}` },
-        !hiddenRange ? React__default.createElement("div", { className: "min" }, minDesc || +min) : null,
-        React__default.createElement("div", { ref: root, style: wrapperStyle(), className: `${rangeName}`, onClick: (e) => {
-                click(e);
-            } },
-            marksList.length > 0 ? (React__default.createElement("div", { className: "nut-range-mark" }, marksList.map((marks) => {
-                return (React__default.createElement("span", { key: marks, className: markClassName(marks), style: marksStyle(marks) },
-                    marks,
-                    React__default.createElement("span", { className: "nut-range-tick", style: tickStyle(marks) })));
-            }))) : null,
-            React__default.createElement("div", { className: "nut-range-bar", style: barStyle() }, range ? ([0, 1].map((item, index) => {
-                return (React__default.createElement("div", { role: "slider", key: index, className: `${index === 0 ? 'nut-range-button-wrapper-left' : ''}
-                  ${index === 1 ? 'nut-range-button-wrapper-right' : ''}`, tabIndex: disabled ? -1 : 0, "aria-valuemin": +min, "aria-valuenow": curValue(index), "aria-valuemax": +max, "aria-orientation": vertical ? 'vertical' : 'horizontal', onTouchStart: (e) => {
-                        if (typeof index === 'number') {
-                            // 实时更新当前拖动的按钮索引
-                            SetButtonIndex(index);
-                        }
-                        onTouchStart(e);
-                    }, onTouchMove: (e) => {
-                        onTouchMove(e);
-                    }, onTouchEnd: (e) => {
-                        onTouchEnd();
-                    }, onTouchCancel: (e) => {
-                        onTouchEnd();
-                    }, onClick: (e) => {
-                        e.stopPropagation();
-                    } }, button || (React__default.createElement("div", { className: "nut-range-button", style: buttonStyle() }, !hiddenTag ? (React__default.createElement("div", { className: "number" }, curValueDesc || curValue(index))) : null))));
-            })) : (React__default.createElement("div", { role: "slider", className: "nut-range-button-wrapper", tabIndex: disabled ? -1 : 0, "aria-valuemin": +min, "aria-valuenow": curValue(), "aria-valuemax": +max, "aria-orientation": vertical ? 'vertical' : 'horizontal', onTouchStart: (e) => {
-                    onTouchStart(e);
-                }, onTouchMove: (e) => {
-                    onTouchMove(e);
-                }, onTouchEnd: (e) => {
-                    onTouchEnd();
-                }, onTouchCancel: (e) => {
-                    onTouchEnd();
-                }, onClick: (e) => {
-                    e.stopPropagation();
-                } }, button || (React__default.createElement("div", { className: "nut-range-button", style: buttonStyle() }, !hiddenTag ? (React__default.createElement("div", { className: "number" }, curValueDesc || curValue())) : null)))))),
-        !hiddenRange ? React__default.createElement("div", { className: "max" }, maxDesc || +max) : null,
-        React__default.createElement(Toast, { type: "text", visible: show, msg: toastMsg, onClose: () => {
-                SetShow(false);
-            } })));
-};
-Range.defaultProps = defaultProps;
-Range.displayName = 'NutRange';
-
-export { Range as R };

package/dist/esm/rate.taro-57341aa9.js

@@ -1,77 +0,0 @@
-import React__default, { useState, useEffect } from 'react';
-import classNames from 'classnames';
-import { StarFillN } from '@nutui/icons-react-taro';
-import { C as ComponentDefaults } from './typings-d8491423.js';
-import { u as usePropsValue } from './use-props-value-ae7ee726.js';
-
-const defaultProps = {
-    ...ComponentDefaults,
-    count: 5,
-    min: 0,
-    checkedIcon: null,
-    uncheckedIcon: null,
-    disabled: false,
-    readOnly: false,
-    allowHalf: false,
-};
-const Rate = (props) => {
-    const { className, style, count, value, defaultValue, min, checkedIcon, uncheckedIcon, disabled, readOnly, allowHalf, onChange, } = {
-        ...defaultProps,
-        ...props,
-    };
-    const classPrefix = 'nut-rate';
-    const [countArray, setCountArray] = useState([1, 2, 3, 4, 5]);
-    const [score, setScore] = usePropsValue({
-        value,
-        defaultValue: Math.max(defaultValue || 0, min),
-        finalValue: 0,
-        onChange,
-    });
-    useEffect(() => {
-        const tmp = [];
-        for (let i = 1; i <= Number(count); i++) {
-            tmp.push(i);
-        }
-        setCountArray(tmp);
-    }, [count]);
-    const renderIcon = (n) => {
-        return n <= score
-            ? checkedIcon || React__default.createElement(StarFillN, null)
-            : uncheckedIcon ||
-                (checkedIcon ? (React__default.cloneElement(checkedIcon, {
-                    color: undefined,
-                })) : (React__default.createElement(StarFillN, null)));
-    };
-    const onClick = (e, index) => {
-        e.preventDefault();
-        e.stopPropagation();
-        if (disabled || readOnly)
-            return;
-        let value = 0;
-        if (!(index === 1 && score === index)) {
-            value = index;
-        }
-        value = Math.max(value, min);
-        setScore(value);
-    };
-    const onHalfClick = (event, n) => {
-        event.preventDefault();
-        event.stopPropagation();
-        const value = Math.max(min, n - 0.5);
-        setScore(value);
-    };
-    return (React__default.createElement("div", { className: classNames(classPrefix, className, {
-            disabled,
-            readonly: readOnly,
-        }), style: style }, countArray.map((n) => {
-        return (React__default.createElement("div", { className: `${classPrefix}-item`, key: n, onClick: (event) => onClick(event, n) },
-            React__default.createElement("div", { className: classNames(`${classPrefix}-item__icon`, {
-                    [`${classPrefix}-item__icon--disabled`]: disabled || n > score,
-                }) }, renderIcon(n)),
-            allowHalf && score > n - 1 && (React__default.createElement("div", { className: classNames(`${classPrefix}-item__half`, `${classPrefix}-item__icon`, `${classPrefix}-item__icon--half`), onClick: (event) => onHalfClick(event, n) }, renderIcon(n)))));
-    })));
-};
-Rate.defaultProps = defaultProps;
-Rate.displayName = 'NutRate';
-
-export { Rate as R };

package/dist/esm/row.taro-75039d53.js

@@ -1,48 +0,0 @@
-import React__default from 'react';
-import classNames from 'classnames';
-import { D as DataContext } from './UserContext-0aac9a82.js';
-import { C as ComponentDefaults } from './typings-d8491423.js';
-
-const classPrefix = 'nut-row';
-const defaultProps = {
-    ...ComponentDefaults,
-    type: '',
-    justify: 'start',
-    align: 'flex-start',
-    wrap: 'nowrap',
-    gutter: '0',
-};
-const Row = (props) => {
-    const { className, style, children, type, justify, align, wrap, gutter, onClick, } = {
-        ...defaultProps,
-        ...props,
-    };
-    const getClass = (prefix, type) => {
-        const classType = type ? `nut-row-${prefix}-${type}` : '';
-        const className = prefix ? classType : `nut-row-${type}`;
-        return className;
-    };
-    const getClasses = () => {
-        return `
-    ${getClass('', type)}
-    ${getClass('justify', justify)}
-    ${getClass('align', align)}
-    ${getClass('flex', wrap)}
-    ${classPrefix}
-   `;
-    };
-    const parentRow = {
-        gutter,
-    };
-    return (React__default.createElement(DataContext.Provider, { value: parentRow }, React__default.createElement('div', {
-        className: classNames(getClasses(), className),
-        style,
-        onClick: (e) => {
-            onClick && onClick(e, 'row');
-        },
-    }, children)));
-};
-Row.defaultProps = defaultProps;
-Row.displayName = 'NutRow';
-
-export { Row as R };