@nutui/nutui-react-taro 2.0.0-alpha.5 → 2.0.0-alpha.7

package/dist/esm/popup.taro-89cc342a.js

@@ -1,139 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { createPortal } from 'react-dom';
-import { CSSTransition } from 'react-transition-group';
-import classNames from 'classnames';
-import { Close } from '@nutui/icons-react-taro';
-import { View } from '@tarojs/components';
-import { d as defaultOverlayProps, O as Overlay } from './overlay.taro-067b7202.js';
-import { C as ComponentDefaults } from './typings-d8491423.js';
-
-const defaultProps = {
-    ...ComponentDefaults,
-    position: 'center',
-    transition: '',
-    overlayStyle: {},
-    overlayClassName: '',
-    closeable: false,
-    closeIconPosition: 'top-right',
-    closeIcon: 'close',
-    destroyOnClose: false,
-    portal: null,
-    overlay: true,
-    round: false,
-    onOpen: () => { },
-    onClose: () => { },
-    onClickOverlay: (e) => true,
-    onClickCloseIcon: (e) => true,
-    ...defaultOverlayProps,
-};
-let _zIndex = 2000;
-const Popup = (props) => {
-    const { children, visible, overlay, closeOnOverlayClick, overlayStyle, overlayClassName, zIndex, lockScroll, duration, closeable, closeIconPosition, closeIcon, style, transition, round, position, className, destroyOnClose, portal, onOpen, onClose, onClickOverlay, onClickCloseIcon, afterShow, afterClose, onClick, } = props;
-    const [index, setIndex] = useState(zIndex || _zIndex);
-    const [innerVisible, setInnerVisible] = useState(visible);
-    const [showChildren, setShowChildren] = useState(true);
-    const [transitionName, setTransitionName] = useState('');
-    const classPrefix = 'nut-popup';
-    const baseStyle = {
-        zIndex: index,
-        animationDuration: `${duration}s`,
-    };
-    const overlayStyles = {
-        ...overlayStyle,
-        ...baseStyle,
-    };
-    const popStyles = {
-        ...style,
-        ...baseStyle,
-    };
-    const popClassName = classNames({
-        round,
-        [`${classPrefix}`]: true,
-        [`${classPrefix}-${position}`]: true,
-        [`${className || ''}`]: true,
-    });
-    const closeClasses = classNames({
-        [`${classPrefix}__close-icon`]: true,
-        [`${classPrefix}__close-icon--${closeIconPosition}`]: true,
-    });
-    const open = () => {
-        if (!innerVisible) {
-            setInnerVisible(true);
-            setIndex(++_zIndex);
-        }
-        if (destroyOnClose) {
-            setShowChildren(true);
-        }
-        onOpen && onOpen();
-    };
-    const close = () => {
-        if (innerVisible) {
-            setInnerVisible(false);
-            if (destroyOnClose) {
-                setTimeout(() => {
-                    setShowChildren(false);
-                }, Number(duration) * 1000);
-            }
-            onClose && onClose();
-        }
-    };
-    const onHandleClickOverlay = (e) => {
-        if (closeOnOverlayClick) {
-            const closed = onClickOverlay && onClickOverlay(e);
-            closed && close();
-        }
-    };
-    const onHandleClick = (e) => {
-        onClick && onClick(e);
-    };
-    const onHandleClickCloseIcon = (e) => {
-        const closed = onClickCloseIcon && onClickCloseIcon(e);
-        closed && close();
-    };
-    const onHandleOpened = (e) => {
-        afterShow && afterShow();
-    };
-    const onHandleClosed = (e) => {
-        afterClose && afterClose();
-    };
-    const resolveContainer = (getContainer) => {
-        const container = typeof getContainer === 'function' ? getContainer() : getContainer;
-        return container || document.body;
-    };
-    const renderToContainer = (getContainer, node) => {
-        if (getContainer) {
-            const container = resolveContainer(getContainer);
-            return createPortal(node, container);
-        }
-        return node;
-    };
-    const renderIcon = () => {
-        if (closeable) {
-            return (React.createElement(View, { className: closeClasses, onClick: onHandleClickCloseIcon }, React.isValidElement(closeIcon) ? (closeIcon) : (React.createElement(Close, { width: 12, height: 12 }))));
-        }
-        return null;
-    };
-    const renderPop = () => {
-        return (React.createElement(CSSTransition, { classNames: transitionName, unmountOnExit: true, timeout: 500, in: innerVisible, onEntered: onHandleOpened, onExited: onHandleClosed },
-            React.createElement(View, { style: popStyles, className: popClassName, onClick: onHandleClick },
-                showChildren ? children : '',
-                renderIcon())));
-    };
-    const renderNode = () => {
-        return (React.createElement(React.Fragment, null, overlay ? (React.createElement(React.Fragment, null,
-            React.createElement(Overlay, { style: overlayStyles, className: overlayClassName, visible: innerVisible, closeOnOverlayClick: closeOnOverlayClick, zIndex: zIndex, lockScroll: lockScroll, duration: duration, onClick: onHandleClickOverlay }),
-            renderPop())) : (React.createElement(React.Fragment, null, renderPop()))));
-    };
-    useEffect(() => {
-        visible && open();
-        !visible && close();
-    }, [visible]);
-    useEffect(() => {
-        setTransitionName(transition || `${classPrefix}-slide-${position}`);
-    }, [position, transition]);
-    return React.createElement(React.Fragment, null, renderToContainer(portal, renderNode()));
-};
-Popup.defaultProps = defaultProps;
-Popup.displayName = 'NutPopup';
-
-export { Popup as P };

package/dist/esm/price.taro-959d82f2.js

@@ -1,83 +0,0 @@
-import React from 'react';
-import { c as cn } from './bem-350c1702.js';
-
-const defaultProps = {
-    price: 0,
-    needSymbol: true,
-    symbol: '¥',
-    decimalDigits: 2,
-    thousands: false,
-    position: 'before',
-    size: 'large',
-    className: '',
-};
-const Price = (props) => {
-    const { price, needSymbol, symbol, decimalDigits, thousands, position, size, className, ...rest } = {
-        ...defaultProps,
-        ...props,
-    };
-    const b = cn('price');
-    const replaceSpecialChar = (url) => {
-        url = url.replace(/"/g, '"');
-        url = url.replace(/&/g, '&');
-        url = url.replace(/&lt;/g, '<');
-        url = url.replace(/&gt;/g, '>');
-        url = url.replace(/&nbsp;/g, ' ');
-        url = url.replace(/&yen;/g, '￥');
-        return url;
-    };
-    const showSymbol = () => {
-        return { __html: needSymbol ? replaceSpecialChar(symbol) : '' };
-    };
-    const checkPoint = (price) => {
-        return String(price).indexOf('.') > 0;
-    };
-    const formatThousands = (num) => {
-        if (Number(num) === 0) {
-            num = 0;
-        }
-        if (checkPoint(num)) {
-            num = Number(num).toFixed(decimalDigits);
-            num =
-                typeof num.split('.') === 'string' ? num.split('.') : num.split('.')[0];
-        }
-        else {
-            num = num.toString();
-        }
-        if (thousands) {
-            return (num || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
-        }
-        return num;
-    };
-    const formatDecimal = (decimalNum) => {
-        if (Number(decimalNum) === 0) {
-            decimalNum = 0;
-        }
-        if (checkPoint(decimalNum)) {
-            decimalNum = Number(decimalNum).toFixed(decimalDigits);
-            decimalNum =
-                typeof decimalNum.split('.') === 'string'
-                    ? 0
-                    : decimalNum.split('.')[1] || 0;
-        }
-        else {
-            decimalNum = 0;
-        }
-        const result = `0.${decimalNum}`;
-        const resultFixed = Number(result).toFixed(decimalDigits);
-        return String(resultFixed).substring(2, resultFixed.length);
-    };
-    const renderSymbol = () => {
-        return (React.createElement("div", { className: `${b('symbol')} ${b(`symbol-${size}`)}`, dangerouslySetInnerHTML: showSymbol() }));
-    };
-    return (React.createElement("div", { className: `${b()} ${className}`, ...rest },
-        needSymbol && position === 'before' ? renderSymbol() : null,
-        React.createElement("div", { className: `${b('integer')} ${b(`integer-${size}`)}` }, formatThousands(price)),
-        decimalDigits !== 0 ? (React.createElement("div", { className: `${b('decimal')} ${b(`decimal-${size}`)}` }, ".")) : null,
-        React.createElement("div", { className: `${b('decimal')} ${b(`decimal-${size}`)}` }, formatDecimal(price)),
-        needSymbol && position === 'after' ? renderSymbol() : null));
-};
-Price.defaultProps = defaultProps;
-Price.displayName = 'NutPrice';
-
-export { Price as P };

package/dist/esm/progress.taro-1a7ac8a4.js

@@ -1,40 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-import { C as ComponentDefaults } from './typings-d8491423.js';
-
-const defaultProps = {
-    ...ComponentDefaults,
-    percent: 0,
-    showText: false,
-    animated: false,
-};
-const Progress = (props) => {
-    const { className, style, percent, background, color, strokeWidth, showText, animated, children, ...rest } = {
-        ...defaultProps,
-        ...props,
-    };
-    const classPrefix = 'nut-progress';
-    const classesInner = classNames({
-        [`${classPrefix}-inner`]: true,
-        [`${classPrefix}-active`]: animated,
-    });
-    const stylesOuter = {
-        height: `${strokeWidth}px`,
-        background,
-    };
-    const stylesInner = {
-        width: `${percent}%`,
-        background: color,
-    };
-    return (React.createElement("div", { className: classNames(classPrefix, className), style: style, ...rest },
-        React.createElement("div", { className: `${classPrefix}-outer`, style: stylesOuter },
-            React.createElement("div", { className: classesInner, style: stylesInner }, showText && (React.createElement("div", { className: `${classPrefix}-text`, style: { left: `${percent}%` } }, children || (React.createElement("div", { className: `${classPrefix}-text__inner`, style: {
-                    background: color,
-                } },
-                percent,
-                "%"))))))));
-};
-Progress.defaultProps = defaultProps;
-Progress.displayName = 'NutProgress';
-
-export { Progress as P };

package/dist/esm/pulltorefresh.taro-016d0079.js

@@ -1,181 +0,0 @@
-import React, { useState, useRef, useEffect } from 'react';
-import { useDrag } from '@use-gesture/react';
-import { useSpring, animated } from '@react-spring/web';
-import { u as useConfig } from './configprovider.taro-ce34d482.js';
-import { g as getScrollParent } from './get-scroll-parent-b4a07e65.js';
-import { p as passiveSupported } from './supports-passive-c85ef996.js';
-
-function bound(position, min, max) {
-    let ret = position;
-    if (min !== undefined) {
-        ret = Math.max(position, min);
-    }
-    if (max !== undefined) {
-        ret = Math.min(ret, max);
-    }
-    return ret;
-}
-
-function rubberband(distance, dimension, constant) {
-    return (distance * dimension * constant) / (dimension + constant * distance);
-}
-function rubberbandIfOutOfBounds(position, min, max, dimension, constant = 0.15) {
-    if (constant === 0)
-        return bound(position, min, max);
-    if (position < min)
-        return -rubberband(min - position, dimension, constant) + min;
-    if (position > max)
-        return +rubberband(position - max, dimension, constant) + max;
-    return position;
-}
-
-const sleep = (time) => new Promise((resolve) => setTimeout(resolve, time));
-
-const defaultProps = {
-    pullingText: '',
-    canReleaseText: '',
-    refreshingText: '',
-    completeText: '',
-    completeDelay: 500,
-    disabled: false,
-    headHeight: 40,
-    threshold: 60,
-    onRefresh: () => { },
-};
-const PullToRefresh = (p) => {
-    const { locale } = useConfig();
-    const props = {
-        ...defaultProps,
-        ...p,
-        ...{
-            pullingText: p.pullingText || locale.pullToRefresh.pullingText,
-            canReleaseText: p.canReleaseText || locale.pullToRefresh.canReleaseText,
-            refreshingText: p.refreshingText || locale.pullToRefresh.refreshingText,
-            completeText: p.completeText || locale.pullToRefresh.completeText,
-        },
-    };
-    const headHeight = props.headHeight;
-    const threshold = props.threshold;
-    const [status, setStatus] = useState('pulling');
-    const [springStyles, api] = useSpring(() => ({
-        from: { height: 0 },
-        config: {
-            tension: 300,
-            friction: 30,
-            clamp: true,
-        },
-    }));
-    const elementRef = useRef(null);
-    const pullingRef = useRef(false);
-    useEffect(() => {
-        elementRef.current?.addEventListener('touchmove', () => { });
-    }, []);
-    async function doRefresh() {
-        api.start({ height: headHeight });
-        setStatus('refreshing');
-        try {
-            await props.onRefresh();
-            setStatus('complete');
-        }
-        catch (e) {
-            api.start({
-                to: async (next) => {
-                    await next({ height: 0 });
-                    setStatus('pulling');
-                },
-            });
-            throw e;
-        }
-        if (props.completeDelay > 0) {
-            await sleep(props.completeDelay);
-        }
-        api.start({
-            to: async (next) => {
-                await next({ height: 0 });
-                setStatus('pulling');
-            },
-        });
-    }
-    useDrag((state) => {
-        if (status === 'refreshing' || status === 'complete')
-            return;
-        const { event } = state;
-        // 最后一个事件，检查是否可以刷新或是否是开始状态（第一个状态也是最后一个状态）
-        if (state.last) {
-            pullingRef.current = false;
-            if (status === 'canRelease') {
-                doRefresh();
-            }
-            else {
-                api.start({ height: 0 });
-            }
-            return;
-        }
-        function getScrollTop(element) {
-            return 'scrollTop' in element ? element.scrollTop : element.scrollY;
-        }
-        // 手指位置
-        const [, y] = state.movement;
-        // 第一个事件，并且手指位置大于0
-        if (state.first && y > 0) {
-            const target = state.event.target;
-            if (!target || !(target instanceof Element))
-                return;
-            let scrollParent = getScrollParent(target);
-            while (true) {
-                if (!scrollParent)
-                    return;
-                const scrollTop = getScrollTop(scrollParent);
-                if (scrollTop > 0) {
-                    return;
-                }
-                // 查找到 window 说明到顶了
-                if (scrollParent instanceof Window) {
-                    break;
-                }
-                // 递归查找
-                scrollParent = getScrollParent(scrollParent.parentNode);
-            }
-            pullingRef.current = true;
-        }
-        if (!pullingRef.current)
-            return;
-        if (event.cancelable) {
-            event.preventDefault();
-        }
-        event.stopPropagation();
-        const height = Math.max(rubberbandIfOutOfBounds(y, 0, 0, headHeight * 5, 0.5), 0);
-        api.start({ height });
-        setStatus(height > threshold ? 'canRelease' : 'pulling');
-    }, {
-        pointer: { touch: true },
-        axis: 'y',
-        target: elementRef,
-        enabled: !props.disabled,
-        eventOptions: (passiveSupported
-            ? { passive: false }
-            : false),
-    });
-    const renderStatusText = () => {
-        if (props.renderText) {
-            return props.renderText?.(status);
-        }
-        if (status === 'pulling')
-            return props.pullingText;
-        if (status === 'canRelease')
-            return props.canReleaseText;
-        if (status === 'refreshing')
-            return props.refreshingText;
-        if (status === 'complete')
-            return props.completeText;
-        return '';
-    };
-    return (React.createElement(animated.div, { ref: elementRef, className: "nut-pulltorefresh" },
-        React.createElement(animated.div, { style: springStyles, className: "nut-pulltorefresh-head" },
-            React.createElement("div", { className: "nut-pulltorefresh-head-content", style: { height: headHeight } }, renderStatusText())),
-        React.createElement("div", { className: "nut-pulltorefresh-content" }, props.children)));
-};
-PullToRefresh.defaultProps = defaultProps;
-PullToRefresh.displayName = 'NutPullToRefresh';
-
-export { PullToRefresh as P };

package/dist/esm/radio.taro-36438449.js

@@ -1,177 +0,0 @@
-import React, { 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.createContext(radioContext);
-
-const defaultProps$1 = {
-    value: null,
-    textPosition: 'right',
-    onChange: (value) => { },
-    direction: 'vertical',
-    options: [],
-};
-const RadioGroup = React.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.Children.map(children, (child, index) => {
-            const childChecked = validateChildChecked(child);
-            if (child.type.displayName !== 'NutRadio') {
-                return React.cloneElement(child);
-            }
-            return React.cloneElement(child, {
-                textPosition,
-                checked: childChecked,
-                // onChange: handleChildChange,
-            });
-        });
-    }
-    const renderOptionsChildren = useCallback(() => {
-        return options?.map(({ label, value, disabled, onChange, ...rest }) => {
-            const childChecked = validateChecked(value);
-            return (React.createElement(Radio, { key: value?.toString(), children: label, value: value, disabled: disabled, onChange: onChange, ...rest, textPosition: textPosition, checked: childChecked }));
-        });
-    }, [val2State, options]);
-    return (React.createElement(RadioContext.Provider, { value: {
-            onChange: (val) => {
-                setVal2State(val);
-                onChange && onChange(val);
-            },
-        } },
-        React.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.createElement("div", { className: `${componentName}__label ${disabledStatement ? `${componentName}__label--disabled` : ''}` }, children));
-    };
-    const renderButton = () => {
-        return (React.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.isValidElement(checkedIcon) ? (React.cloneElement(checkedIcon, {
-                ...checkedIcon.props,
-                className: color(),
-            })) : (React.createElement(CheckChecked, { size: iconSize, className: color() }));
-        }
-        return React.isValidElement(icon) ? (React.cloneElement(icon, {
-            ...icon.props,
-            className: color(),
-        })) : (React.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.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 };