@nutui/nutui-react-taro 2.0.0-alpha.4 → 2.0.0-alpha.6

package/dist/esm/range.taro-432d20d7.js

@@ -1,332 +0,0 @@
-import React, { 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-c509a870.js';
-import { u as useConfig } from './configprovider.taro-43a3c646.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.createElement("div", { className: `${containerName}` },
-        !hiddenRange ? React.createElement("div", { className: "min" }, minDesc || +min) : null,
-        React.createElement("div", { ref: root, style: wrapperStyle(), className: `${rangeName}`, onClick: (e) => {
-                click(e);
-            } },
-            marksList.length > 0 ? (React.createElement("div", { className: "nut-range-mark" }, marksList.map((marks) => {
-                return (React.createElement("span", { key: marks, className: markClassName(marks), style: marksStyle(marks) },
-                    marks,
-                    React.createElement("span", { className: "nut-range-tick", style: tickStyle(marks) })));
-            }))) : null,
-            React.createElement("div", { className: "nut-range-bar", style: barStyle() }, range ? ([0, 1].map((item, index) => {
-                return (React.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.createElement("div", { className: "nut-range-button", style: buttonStyle() }, !hiddenTag ? (React.createElement("div", { className: "number" }, curValueDesc || curValue(index))) : null))));
-            })) : (React.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.createElement("div", { className: "nut-range-button", style: buttonStyle() }, !hiddenTag ? (React.createElement("div", { className: "number" }, curValueDesc || curValue())) : null)))))),
-        !hiddenRange ? React.createElement("div", { className: "max" }, maxDesc || +max) : null,
-        React.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-895bb41c.js

@@ -1,77 +0,0 @@
-import React, { 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.createElement(StarFillN, null)
-            : uncheckedIcon ||
-                (checkedIcon ? (React.cloneElement(checkedIcon, {
-                    color: undefined,
-                })) : (React.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.createElement("div", { className: classNames(classPrefix, className, {
-            disabled,
-            readonly: readOnly,
-        }), style: style }, countArray.map((n) => {
-        return (React.createElement("div", { className: `${classPrefix}-item`, key: n, onClick: (event) => onClick(event, n) },
-            React.createElement("div", { className: classNames(`${classPrefix}-item__icon`, {
-                    [`${classPrefix}-item__icon--disabled`]: disabled || n > score,
-                }) }, renderIcon(n)),
-            allowHalf && score > n - 1 && (React.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-e929ec5c.js

@@ -1,48 +0,0 @@
-import React 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.createElement(DataContext.Provider, { value: parentRow }, React.createElement('div', {
-        className: classNames(getClasses(), className),
-        style,
-        onClick: (e) => {
-            onClick && onClick(e, 'row');
-        },
-    }, children)));
-};
-Row.defaultProps = defaultProps;
-Row.displayName = 'NutRow';
-
-export { Row as R };

package/dist/esm/searchbar.taro-4aa300df.js

@@ -1,152 +0,0 @@
-import React, { useRef, useState, useEffect } from 'react';
-import { getEnv } from '@tarojs/taro';
-import { Search, CircleClose } from '@nutui/icons-react-taro';
-import { c as cn } from './bem-350c1702.js';
-import { u as useConfig } from './configprovider.taro-43a3c646.js';
-import { C as ComponentDefaults } from './typings-d8491423.js';
-
-const defaultProps = {
-    ...ComponentDefaults,
-    placeholder: '',
-    shape: 'square',
-    disabled: false,
-    maxLength: 9999,
-    clearable: true,
-    clearSize: '12px',
-    align: 'left',
-    readonly: true,
-    autoFocus: false,
-    label: '',
-    leftinIcon: React.createElement(Search, { size: "12" }),
-};
-const SearchBar = (props) => {
-    const searchbarBem = cn('searchbar');
-    const { locale } = useConfig();
-    const searchRef = useRef(null);
-    const [value, setValue] = useState(() => props.value);
-    const { placeholder, shape, className, disabled, maxLength, clearable, clearSize, align, readOnly, autoFocus, label, actionText, leftinIcon, rightinIcon, leftoutIcon, rightoutIcon, onChange, onFocus, onBlur, onClear, onCancel, onSearch, onClickInput, onClickLeftinIcon, onClickLeftoutIcon, onClickRightinIcon, onClickRightoutIcon, } = {
-        ...defaultProps,
-        ...props,
-    };
-    const alignClass = `${align}`;
-    const forceFocus = () => {
-        const searchSelf = searchRef.current;
-        searchSelf && searchSelf.focus();
-    };
-    const change = (event) => {
-        const { value } = event.target;
-        onChange && onChange?.(value, event);
-        setValue(value);
-        value === '' && forceFocus();
-    };
-    const focus = (event) => {
-        const { value } = event.target;
-        onFocus && onFocus?.(value, event);
-    };
-    const blur = (event) => {
-        const searchSelf = searchRef.current;
-        searchSelf && searchSelf.blur();
-        const { value } = event.target;
-        onBlur && onBlur?.(value, event);
-    };
-    useEffect(() => {
-        setValue(props.value);
-    }, [props.value]);
-    useEffect(() => {
-        autoFocus && forceFocus();
-    }, [autoFocus]);
-    const renderField = () => {
-        return (React.createElement("input", { className: `${searchbarBem('input')}  ${searchbarBem(alignClass)} ${shape === 'round' ? searchbarBem('round') : ''} ${clearable ? searchbarBem('input-clear') : ''}`, ref: searchRef, style: { ...props.style }, value: value || '', placeholder: placeholder || locale.placeholder, disabled: disabled, readOnly: readOnly, maxLength: maxLength, onKeyPress: onKeypress, onChange: (e) => change(e), onFocus: (e) => focus(e), onBlur: (e) => blur(e), onClick: (e) => clickInput(e) }));
-    };
-    const clickInput = (e) => {
-        onClickInput && onClickInput(e);
-    };
-    const renderLeftinIcon = () => {
-        if (!leftinIcon)
-            return null;
-        return (React.createElement("div", { className: `${searchbarBem('leftin-icon')} ${searchbarBem('icon')}`, onClick: (e) => clickLeftIcon('in-left', e) }, leftinIcon));
-    };
-    const renderLeftoutIcon = () => {
-        if (!leftoutIcon)
-            return null;
-        return (React.createElement("div", { className: `${searchbarBem('leftout-icon')}`, onClick: (e) => clickLeftIcon('out-left', e) }, leftoutIcon));
-    };
-    const clickLeftIcon = (flag, event) => {
-        if (flag === 'in-left') {
-            onClickLeftinIcon && onClickLeftinIcon(value, event);
-        }
-        else {
-            onClickLeftoutIcon && onClickLeftoutIcon(value, event);
-        }
-    };
-    const renderRightinIcon = () => {
-        if (!rightinIcon)
-            return null;
-        return (React.createElement("div", { className: `${searchbarBem('rightin-icon')} ${searchbarBem('icon')}`, onClick: (e) => clickRightIcon('in-right', e) }, rightinIcon));
-    };
-    const renderRightoutIcon = () => {
-        if (!rightoutIcon)
-            return null;
-        return (React.createElement("div", { className: `${searchbarBem('rightout-icon')}`, onClick: (e) => clickRightIcon('out-right', e) }, rightoutIcon));
-    };
-    const clickRightIcon = (flag, event) => {
-        if (flag === 'in-left') {
-            onClickRightinIcon && onClickRightinIcon(value, event);
-        }
-        else {
-            onClickRightoutIcon && onClickRightoutIcon(value, event);
-        }
-    };
-    const handleClear = () => {
-        return (React.createElement("div", { className: `${searchbarBem('clear')} ${rightinIcon ? 'pos-right' : ''}`, onClick: (e) => clearaVal(e) },
-            React.createElement(CircleClose, { size: clearSize, color: "#555" })));
-    };
-    const clearaVal = (event) => {
-        if (disabled || readOnly) {
-            return;
-        }
-        setValue('');
-        onClear && onClear(event);
-        forceFocus();
-    };
-    const renderRightLabel = () => {
-        if (actionText) {
-            return (React.createElement("div", { className: searchbarBem('action-text'), onClick: search }, actionText));
-        }
-        return null;
-    };
-    const onKeypress = (e) => {
-        if (e.keyCode === 13) {
-            if (typeof e.cancelable !== 'boolean' || e.cancelable) {
-                e.preventDefault();
-            }
-            onSearch && onSearch(value);
-        }
-    };
-    const search = () => {
-        onSearch && onSearch(value);
-    };
-    const renderLabel = () => {
-        if (label) {
-            return React.createElement("div", { className: searchbarBem('label') }, label);
-        }
-        return null;
-    };
-    const envClass = () => {
-        return getEnv() === 'WEB' ? 'nut-searchbar-taro' : '';
-    };
-    return (React.createElement("div", { className: `${searchbarBem()} ${envClass()} ${disabled ? searchbarBem('disabled') : ''}  ${className || ''}`, style: { ...props.style, background: props.background } },
-        renderLeftoutIcon(),
-        renderLabel(),
-        React.createElement("div", { className: `${searchbarBem('content')}`, style: { background: props.inputBackground } },
-            renderLeftinIcon(),
-            React.createElement("div", { className: "nut-searchbar__input-box" }, renderField()),
-            renderRightinIcon(),
-            clearable && value && handleClear()),
-        renderRightoutIcon(),
-        renderRightLabel()));
-};
-SearchBar.defaultProps = defaultProps;
-SearchBar.displayName = 'NutSearchBar';
-
-export { SearchBar as S };