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

package/dist/esm/range.taro-d8fc7656.js

@@ -0,0 +1,332 @@
+import React__default, { useState, useRef, useEffect, useCallback } from 'react';
+import { u as useTouch } from './useTouch-db24bb5c.js';
+import { g as getRectByTaro } from './useClientRect-1f8ed1fe.js';
+import { T as Toast } from './toast.taro-d6c14811.js';
+import { u as useConfig } from './configprovider.taro-8d71eb49.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-6cdf03bd.js

@@ -0,0 +1,75 @@
+import React__default, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+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,
+    count: 5,
+    modelValue: 0,
+    minimizeValue: 0,
+    iconSize: 18,
+    activeColor: '',
+    voidColor: '',
+    checkedIcon: 'star-fill-n',
+    uncheckedIcon: 'star-n',
+    disabled: false,
+    readonly: false,
+    allowHalf: false,
+    spacing: 14,
+};
+const Rate = (props) => {
+    const { className, style, count, modelValue, minimizeValue, iconSize, activeColor, voidColor, checkedIcon, uncheckedIcon, disabled, readonly, allowHalf, spacing, onChange, iconClassPrefix, iconFontClassName, } = {
+        ...defaultProps,
+        ...props,
+    };
+    const b = cn('rate');
+    const bi = cn('rate-item');
+    const [countArray, setCountArray] = useState([1, 2, 3, 4, 5]);
+    const [score, setScore] = useState(0);
+    useEffect(() => {
+        const tmp = [];
+        for (let i = 1; i <= Number(count); i++) {
+            tmp.push(i);
+        }
+        setCountArray(tmp);
+    }, [count]);
+    useEffect(() => {
+        setScore(Math.max(Number(modelValue), Number(minimizeValue)));
+    }, [modelValue]);
+    const pxCheck = (value) => {
+        return Number.isNaN(Number(value)) ? String(value) : `${value}px`;
+    };
+    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, Number(minimizeValue));
+        setScore(value);
+        onChange && onChange(value);
+    };
+    const onHalfClick = (event, n) => {
+        event.preventDefault();
+        event.stopPropagation();
+        const value = Math.max(Number(minimizeValue), n - 0.5);
+        setScore(value);
+        onChange && onChange(value);
+    };
+    return (React__default.createElement("div", { className: classNames(b(), className), style: style }, countArray.map((n) => {
+        return (React__default.createElement("div", { className: bi(), key: n, onClick: (event) => onClick(event, n), style: { marginRight: pxCheck(spacing) } },
+            React__default.createElement(Icon, { classPrefix: iconClassPrefix, fontClassName: iconFontClassName, size: iconSize, className: classNames(bi('icon'), {
+                    [bi('icon--disabled')]: disabled || n > score,
+                }), name: n <= score ? checkedIcon : uncheckedIcon, color: n <= score ? activeColor : voidColor }),
+            allowHalf && score > n - 1 && (React__default.createElement(Icon, { classPrefix: iconClassPrefix, fontClassName: iconFontClassName, onClick: (event) => onHalfClick(event, n), className: `${bi('icon')} ${bi('icon--half')}`, color: n <= score ? activeColor : voidColor, size: iconSize, name: checkedIcon }))));
+    })));
+};
+Rate.defaultProps = defaultProps;
+Rate.displayName = 'NutRate';
+
+export { Rate as R };

package/dist/esm/row.taro-f64d4a13.js

@@ -0,0 +1,46 @@
+import React__default from 'react';
+import classNames from 'classnames';
+import { D as DataContext } from './UserContext-0aac9a82.js';
+
+const defaultProps = {
+    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 prefixCls = 'nut-row';
+    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)}
+    ${prefixCls}
+   `;
+    };
+    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 };

package/dist/esm/searchbar.taro-0c25927b.js

@@ -0,0 +1,152 @@
+import React__default, { useRef, useState, useEffect } from 'react';
+import { getEnv } from '@tarojs/taro';
+import { c as cn } from './bem-350c1702.js';
+import { u as useConfig } from './configprovider.taro-8d71eb49.js';
+import { I as Icon } from './icon.taro-296a1bec.js';
+import { C as ComponentDefaults } from './typings-b9828dba.js';
+
+const defaultProps = {
+    ...ComponentDefaults,
+    placeholder: '',
+    shape: 'square',
+    disabled: false,
+    maxLength: 9999,
+    clearable: true,
+    clearIconSize: '12px',
+    align: 'left',
+    readonly: true,
+    autoFocus: false,
+    label: '',
+    leftinIcon: React__default.createElement(Icon, { name: "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, clearIconSize, align, readOnly, autoFocus, label, actionText, leftinIcon, rightinIcon, leftoutIcon, rightoutIcon, onChange, onFocus, onBlur, onClear, onCancel, onSearch, onClickInput, onClickLeftinIcon, onClickLeftoutIcon, onClickRightinIcon, onClickRightoutIcon, iconClassPrefix, iconFontClassName, } = {
+        ...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__default.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__default.createElement("div", { className: `${searchbarBem('leftin-icon')} ${searchbarBem('icon')}`, onClick: (e) => clickLeftIcon('in-left', e) }, leftinIcon));
+    };
+    const renderLeftoutIcon = () => {
+        if (!leftoutIcon)
+            return null;
+        return (React__default.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__default.createElement("div", { className: `${searchbarBem('rightin-icon')} ${searchbarBem('icon')}`, onClick: (e) => clickRightIcon('in-right', e) }, rightinIcon));
+    };
+    const renderRightoutIcon = () => {
+        if (!rightoutIcon)
+            return null;
+        return (React__default.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__default.createElement("div", { className: `${searchbarBem('clear')} ${rightinIcon ? 'pos-right' : ''}`, onClick: (e) => clearaVal(e) },
+            React__default.createElement(Icon, { classPrefix: iconClassPrefix, fontClassName: iconFontClassName, name: "circle-close", size: clearIconSize, color: "#555" })));
+    };
+    const clearaVal = (event) => {
+        if (disabled || readOnly) {
+            return;
+        }
+        setValue('');
+        onClear && onClear(event);
+        forceFocus();
+    };
+    const renderRightLabel = () => {
+        if (actionText) {
+            return (React__default.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__default.createElement("div", { className: searchbarBem('label') }, label);
+        }
+        return null;
+    };
+    const envClass = () => {
+        return getEnv() === 'WEB' ? 'nut-searchbar-taro' : '';
+    };
+    return (React__default.createElement("div", { className: `${searchbarBem()} ${envClass()} ${disabled ? searchbarBem('disabled') : ''}  ${className || ''}`, style: { ...props.style, background: props.background } },
+        renderLeftoutIcon(),
+        renderLabel(),
+        React__default.createElement("div", { className: `${searchbarBem('content')}`, style: { background: props.inputBackground } },
+            renderLeftinIcon(),
+            React__default.createElement("div", { className: "nut-searchbar__input-box" }, renderField()),
+            renderRightinIcon(),
+            clearable && value && handleClear()),
+        renderRightoutIcon(),
+        renderRightLabel()));
+};
+SearchBar.defaultProps = defaultProps;
+SearchBar.displayName = 'NutSearchBar';
+
+export { SearchBar as S };