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

package/dist/esm/inputnumber.taro-108c4784.js

@@ -0,0 +1,199 @@
+import React__default, { useRef, useEffect } from 'react';
+import { Minus, Plus } from '@nutui/icons-react-taro';
+import classNames from 'classnames';
+import { u as usePropsValue } from './use-props-value-ae7ee726.js';
+import { C as ComponentDefaults } from './typings-d8491423.js';
+
+const defaultProps = {
+    ...ComponentDefaults,
+    disabled: false,
+    min: 1,
+    max: 9999,
+    readonly: false,
+    allowEmpty: false,
+    defaultValue: 0,
+    step: 1,
+    digits: 0,
+    async: false,
+};
+const classPrefix = `nut-inputnumber`;
+const InputNumber = (props) => {
+    const { children, disabled, min, max, readonly, value, defaultValue, allowEmpty, digits, step, async, className, style, formatter, onPlus, onMinus, onOverlimit, onBlur, onFocus, onChange, ...restProps } = {
+        ...defaultProps,
+        ...props,
+    };
+    const inputRef = useRef('');
+    let [_checked, setChecked] = usePropsValue({
+        value: value,
+        defaultValue: defaultValue,
+    });
+    useEffect(() => {
+        if (formatter) {
+            if (_checked || _checked === 0) {
+                inputRef.current = formatter(_checked);
+                setChecked(formatter(_checked));
+            }
+        }
+    }, []);
+    const classes = classNames({
+        [`${classPrefix}`]: true,
+        [`${classPrefix}--disabled`]: disabled,
+    }, className);
+    const styles = {
+        ...style,
+    };
+    const addAllow = (value = _checked) => {
+        if (formatter) {
+            const numValue = String(value).replace(/[^0-9|\.]/gi, '');
+            return Number(numValue) < Number(max) && !disabled;
+        }
+        return Number(value) < Number(max) && !disabled;
+    };
+    const reduceAllow = (value = _checked) => {
+        if (formatter) {
+            const numValue = String(value).replace(/[^0-9|\.]/gi, '');
+            return Number(numValue) > Number(min) && !disabled;
+        }
+        return Number(value) > Number(min) && !disabled;
+    };
+    const iconMinusClasses = classNames('nut-inputnumber__icon icon-minus', {
+        'nut-inputnumber__icon--disabled': !reduceAllow(),
+    });
+    const iconAddClasses = classNames('nut-inputnumber__icon icon-plus', {
+        'nut-inputnumber__icon--disabled': !addAllow(),
+    });
+    const fixedDecimalPlaces = (v) => {
+        return Number(v).toFixed(Number(digits));
+    };
+    const emitChange = (value, e) => {
+        const outputValue = fixedDecimalPlaces(value);
+        onChange && onChange(outputValue, e);
+        if (!async) {
+            if (Number(outputValue) < Number(min)) {
+                formatter ? setChecked(formatter(Number(min))) : setChecked(Number(min));
+            }
+            else if (Number(outputValue) > Number(max)) {
+                formatter ? setChecked(formatter(Number(max))) : setChecked(Number(max));
+            }
+            else {
+                formatter ? setChecked(formatter(outputValue)) : setChecked(outputValue);
+            }
+        }
+    };
+    const reduceNumber = (e) => {
+        onMinus && onMinus(e);
+        if (reduceAllow()) {
+            if (formatter) {
+                const numValue = String(_checked).replace(/[^0-9|\.]/gi, '');
+                const outputValue = Number(numValue) - Number(step);
+                inputRef.current = formatter(outputValue);
+                emitChange(outputValue, e);
+            }
+            else {
+                const outputValue = Number(_checked) - Number(step);
+                emitChange(outputValue, e);
+            }
+        }
+        else {
+            onOverlimit && onOverlimit(e);
+        }
+    };
+    const addNumber = (e) => {
+        onPlus && onPlus(e);
+        if (addAllow()) {
+            if (formatter) {
+                const numValue = String(_checked).replace(/[^0-9|\.]/gi, '');
+                const outputValue = Number(numValue) + Number(step);
+                inputRef.current = formatter(outputValue);
+                emitChange(outputValue, e);
+            }
+            else {
+                const outputValue = Number(_checked) + Number(step);
+                emitChange(outputValue, e);
+            }
+        }
+        else {
+            onOverlimit && onOverlimit(e);
+        }
+    };
+    const changeValue = (e) => {
+        const input = e.target;
+        onChange && onChange(input.value, e);
+        if (!async) {
+            setChecked(input.value);
+        }
+    };
+    const changeFormatValue = (e) => {
+        const input = e.target.value;
+        const numReg = new RegExp('^[0-9]*$');
+        const numValue = input.replace(/[^0-9|\.]/gi, '');
+        if (formatter) {
+            if (!numReg.test(input[0]) && numValue) {
+                setChecked(formatter(numValue));
+            }
+            else if (!numReg.test(input[0]) && !numValue) {
+                setChecked(input);
+            }
+            else if (numReg.test(input[0])) {
+                // 针对于100%这种尾字符例子，直接删除会进行匹配
+                if (formatter(numValue) === inputRef.current) {
+                    setChecked(numValue);
+                }
+                else {
+                    setChecked(formatter(numValue));
+                    inputRef.current = formatter(numValue);
+                }
+            }
+        }
+    };
+    const burFormatValue = (e) => {
+        const input = e.target.value;
+        const numReg = new RegExp('^[0-9]*$');
+        const numValue = input.replace(/[^0-9|\.]/gi, '');
+        if (formatter) {
+            if (formatter(numValue) === input) {
+                emitChange(numValue, e);
+                return;
+            }
+            if (!numReg.test(input) || !input) {
+                setChecked(formatter(''));
+            }
+        }
+    };
+    const focusValue = (e) => {
+        if (disabled)
+            return;
+        if (readonly)
+            return;
+        onFocus && onFocus(e);
+    };
+    const burValue = (e) => {
+        if (disabled)
+            return;
+        if (readonly)
+            return;
+        const input = e.target;
+        let value = +input.value;
+        if (value === 0 && !allowEmpty) {
+            value = Number(defaultValue);
+        }
+        if (value < Number(min)) {
+            value = Number(min);
+        }
+        else if (value > Number(max)) {
+            value = Number(max);
+        }
+        emitChange(value, e);
+        onBlur && onBlur(e);
+    };
+    return (React__default.createElement("div", { className: classes, style: styles, ...restProps },
+        React__default.createElement("div", { className: "nut-input-minus" },
+            React__default.createElement(Minus, { className: iconMinusClasses, onClick: reduceNumber })),
+        React__default.createElement(React__default.Fragment, null, formatter ? (React__default.createElement("input", { type: "text", min: min, max: max, disabled: disabled, readOnly: readonly, value: _checked, onInput: changeFormatValue, onBlur: burFormatValue, onFocus: focusValue })) : (React__default.createElement("input", { type: "digit", min: min, max: max, disabled: disabled, readOnly: readonly, value: _checked, onInput: changeValue, onBlur: burValue, onFocus: focusValue }))),
+        React__default.createElement("div", { className: "nut-input-add" },
+            React__default.createElement(Plus, { className: iconAddClasses, onClick: addNumber }))));
+};
+InputNumber.defaultProps = defaultProps;
+InputNumber.displayName = 'NutInputNumber';
+
+export { InputNumber as I };

package/dist/esm/{menu.taro-7e4038a1.js → menu.taro-54951911.js}

@@ -1,20 +1,20 @@
 import React__default, { useRef, useEffect, useState } from 'react';
 import classNames from 'classnames';
-import { I as Icon } from './icon.taro-296a1bec.js';
-import { C as ComponentDefaults } from './typings-b9828dba.js';
+import { RectUp, RectDown } from '@nutui/icons-react-taro';
+import { C as ComponentDefaults } from './typings-d8491423.js';
 
 const defaultProps = {
     ...ComponentDefaults,
     className: '',
     style: {},
-    activeColor: '#F2270C',
+    activeColor: '',
     closeOnClickOverlay: true,
     scrollFixed: false,
     lockScroll: true,
-    titleIcon: '',
+    titleIcon: null,
 };
 const Menu = (props) => {
-    const { className, titleIcon, scrollFixed, lockScroll, closeOnClickOverlay, children, activeColor, iconClassPrefix, iconFontClassName, ...rest } = {
+    const { className, titleIcon, scrollFixed, lockScroll, closeOnClickOverlay, children, activeColor, ...rest } = {
         ...defaultProps,
         ...props,
     };
@@ -88,8 +88,7 @@ const Menu = (props) => {
                             disabled,
                         })}` },
                         React__default.createElement("div", { className: "nut-menu__title-text" }, finallyTitle()),
-                        React__default.createElement(Icon, { classPrefix: iconClassPrefix, fontClassName: iconFontClassName, className: "nut-menu__title-icon", size: "10", name: titleIcon ||
-                                (direction === 'up' ? 'arrow-up' : 'down-arrow') }))));
+                        titleIcon || (React__default.createElement(React__default.Fragment, null, direction === 'up' ? (React__default.createElement(RectUp, { className: "nut-menu__title-icon", size: "14px" })) : (React__default.createElement(RectDown, { className: "nut-menu__title-icon", size: "14px" })))))));
             })),
             cloneChildren())));
 };

package/dist/esm/{menuitem.taro-96cc4f15.js → menuitem.taro-86a6bb6c.js}

@@ -1,10 +1,10 @@
 import React__default, { forwardRef, useState, useEffect, useImperativeHandle } from 'react';
 import classNames from 'classnames';
 import { CSSTransition } from 'react-transition-group';
-import { u as useConfig } from './configprovider.taro-8d71eb49.js';
-import { I as Icon } from './icon.taro-296a1bec.js';
-import { O as Overlay } from './overlay.taro-21e87fb1.js';
-import { C as ComponentDefaults } from './typings-b9828dba.js';
+import { Check } from '@nutui/icons-react-taro';
+import { u as useConfig } from './configprovider.taro-c8c54556.js';
+import { O as Overlay } from './overlay.taro-ad0d4775.js';
+import { C as ComponentDefaults } from './typings-d8491423.js';
 
 const defaultProps = {
     ...ComponentDefaults,
@@ -12,17 +12,15 @@ const defaultProps = {
     style: {},
     columns: 1,
     direction: 'down',
-    optionsIcon: 'Check',
+    optionsIcon: null,
     activeTitleClass: '',
     inactiveTitleClass: '',
-    iconClassPrefix: 'nut-icon',
-    fontClassName: 'nutui-iconfont',
     onChange: (value) => undefined,
 };
 const MenuItem = forwardRef((props, ref) => {
     useConfig();
     const mergedProps = { ...defaultProps, ...props };
-    const { style, options, value, columns, title, optionsIcon, direction, onChange, activeTitleClass, inactiveTitleClass, children, iconClassPrefix, iconFontClassName, } = {
+    const { style, options, value, columns, title, optionsIcon, direction, onChange, activeTitleClass, inactiveTitleClass, children, } = {
         ...defaultProps,
         ...props,
     };
@@ -98,7 +96,7 @@ const MenuItem = forwardRef((props, ref) => {
         React__default.createElement("div", { className: `placeholder-element ${classNames({
                 up: direction === 'up',
             })}`, style: placeholderStyle(), onClick: () => parent.toggleItemShow(orderKey) }),
-        React__default.createElement(Overlay, { overlayClass: "nut-menu__overlay", style: getPosition(), lockScroll: parent.lockScroll, visible: _showPopup, closeOnClickOverlay: parent.closeOnClickOverlay, onClick: () => {
+        React__default.createElement(Overlay, { className: "nut-menu__overlay", style: getPosition(), lockScroll: parent.lockScroll, visible: _showPopup, closeOnOverlayClick: parent.closeOnClickOverlay, onClick: () => {
                 parent.closeOnClickOverlay && parent.toggleItemShow(orderKey);
             } }),
         React__default.createElement("div", { className: direction === 'down'
@@ -117,7 +115,7 @@ const MenuItem = forwardRef((props, ref) => {
                             }, onClick: () => {
                                 handleClick(item);
                             } },
-                            item.value === _value ? (React__default.createElement(Icon, { classPrefix: iconClassPrefix, fontClassName: iconFontClassName, className: getIconCName(item.value, value), name: optionsIcon, color: activeColor })) : null,
+                            item.value === _value ? (React__default.createElement(React__default.Fragment, null, optionsIcon || (React__default.createElement(Check, { color: activeColor, className: getIconCName(item.value, value) })))) : null,
                             React__default.createElement("div", { className: getIconCName(item.value, value), style: {
                                     color: `${item.value === _value ? activeColor : ''}`,
                                 } }, item.text)));

package/dist/esm/{navbar.taro-777c4705.js → navbar.taro-69f47d51.js}

@@ -1,15 +1,14 @@
 import React__default from 'react';
 import classNames from 'classnames';
-import { I as Icon } from './icon.taro-296a1bec.js';
+import { Left } from '@nutui/icons-react-taro';
 import { c as cn } from './bem-350c1702.js';
-import { C as ComponentDefaults } from './typings-b9828dba.js';
+import { C as ComponentDefaults } from './typings-d8491423.js';
 
 const defaultProps = {
     ...ComponentDefaults,
     title: '',
-    desc: '',
+    description: '',
     leftShow: true,
-    titIcon: '',
     className: '',
     leftText: '',
     fixed: false,
@@ -20,7 +19,7 @@ const defaultProps = {
     style: {},
 };
 const NavBar = (props) => {
-    const { desc, title, titIcon, leftShow, className, style, leftText, fixed, safeAreaInsetTop, border, placeholder, zIndex, onClickTitle, onClickIcon, onClickBack, onClickRight, iconClassPrefix, iconFontClassName, } = {
+    const { description, title, leftShow, className, style, leftText, fixed, safeAreaInsetTop, border, placeholder, zIndex, onClickTitle, onClickIcon, onClickBack, onClickRight, } = {
         ...defaultProps,
         ...props,
     };
@@ -31,7 +30,7 @@ const NavBar = (props) => {
     const slot = children.reduce((slot, item) => {
         const data = slot;
         if (item && item.props) {
-            data[item.props.slot] = item;
+            data[item.props.slot] = item.props.children;
         }
         return data;
     }, {});
@@ -43,20 +42,19 @@ const NavBar = (props) => {
     };
     const renderLeft = () => {
         return (React__default.createElement("div", { className: `${b('left')}`, onClick: (e) => onClickBack(e) },
-            leftShow && (React__default.createElement(Icon, { classPrefix: iconClassPrefix, fontClassName: iconFontClassName, name: "left", color: "#979797" })),
+            leftShow && React__default.createElement(Left, { name: "left", color: "#979797" }),
             leftText && React__default.createElement("div", { className: `${b('text')}` }, leftText),
             slot.left));
     };
     const renderContent = () => {
         return (React__default.createElement("div", { className: `${b('title')}` },
             title && (React__default.createElement("div", { className: "title", onClick: (e) => onClickTitle(e) }, title)),
-            titIcon && (React__default.createElement("div", { onClick: (e) => onClickIcon(e) },
-                React__default.createElement(Icon, { classPrefix: iconClassPrefix, fontClassName: iconFontClassName, name: titIcon }))),
+            slot.titleIcon && (React__default.createElement("div", { onClick: (e) => onClickIcon(e) }, slot.titleIcon)),
             slot.content));
     };
     const renderRight = () => {
         return (React__default.createElement("div", { className: `${b('right')}`, onClick: (e) => onClickRight(e) },
-            desc && React__default.createElement("div", { className: `${b('text')}` }, desc),
+            description && React__default.createElement("div", { className: `${b('text')}` }, description),
             slot.right));
     };
     const renderWrapper = () => {

package/dist/esm/{noticebar.taro-4a23cdee.js → noticebar.taro-49e7441f.js}

@@ -1,9 +1,9 @@
 import React__default, { useRef, useState, useMemo, useEffect } from 'react';
 import classNames from 'classnames';
-import { I as Icon } from './icon.taro-296a1bec.js';
 import { c as cn } from './bem-350c1702.js';
-import { g as getRectByTaro } from './useClientRect-1f8ed1fe.js';
-import { C as ComponentDefaults } from './typings-b9828dba.js';
+import { g as getRectByTaro } from './use-client-rect-1f8ed1fe.js';
+import { C as ComponentDefaults } from './typings-d8491423.js';
+import { Notice, Close } from '@nutui/icons-react-taro';
 
 const defaultProps = {
     ...ComponentDefaults,
@@ -16,7 +16,8 @@ const defaultProps = {
     text: '',
     closeMode: false,
     wrapable: false,
-    leftIcon: '',
+    leftIcon: null,
+    rightIcon: null,
     color: '',
     background: '',
     delay: 1,
@@ -24,7 +25,7 @@ const defaultProps = {
     speed: 50,
 };
 const NoticeBar = (props) => {
-    const { children, className, style, direction, list, standTime, complexAm, height, text, closeMode, wrapable, leftIcon, color, background, delay, scrollable, speed, rightIcon, close, click, onClose, onClick, onClickItem, iconClassPrefix, iconFontClassName, } = {
+    const { children, className, style, direction, list, standTime, complexAm, height, text, closeMode, wrapable, leftIcon, rightIcon, color, background, delay, scrollable, speed, close, click, onClose, onClick, onClickItem, } = {
         ...defaultProps,
         ...props,
     };
@@ -44,7 +45,6 @@ const NoticeBar = (props) => {
     const isVertical = direction === 'vertical';
     const [rect, setRect] = useState(null);
     let active = 0;
-    const [vLeftIcon, setLeftIcon] = useState('');
     const [ready, setReady] = useState(false);
     const container = useRef(null);
     const innerRef = useRef(null);
@@ -81,13 +81,6 @@ const NoticeBar = (props) => {
     })();
     useEffect(() => {
         if (isVertical) {
-            // 兼容老版本无左侧Icon问题
-            if (leftIcon !== '') {
-                setLeftIcon(leftIcon);
-            }
-            else {
-                setLeftIcon('close');
-            }
             if (children) {
                 scrollList.current = [].concat(childs);
             }
@@ -214,19 +207,6 @@ const NoticeBar = (props) => {
         close && close(event);
         onClose && onClose(event);
     };
-    const iconShow = () => {
-        if (leftIcon === 'close' || vLeftIcon === 'close') {
-            return false;
-        }
-        return true;
-    };
-    const iconBg = () => {
-        let iconBg = '';
-        if (leftIcon) {
-            iconBg = leftIcon;
-        }
-        return iconBg;
-    };
     const isEllipsis = () => {
         if (isCanScroll == null) {
             return wrapable;
@@ -416,15 +396,14 @@ const NoticeBar = (props) => {
     }, []);
     return (React__default.createElement("div", { className: `${b()} ${className || ''}`, style: style },
         showNoticeBar && direction === 'across' ? (React__default.createElement("div", { className: noticebarClass, style: barStyle, onClick: handleClick },
-            iconShow() ? (React__default.createElement("div", { className: "left-icon", style: { backgroundImage: `url(${iconBg() || ''})` } }, !iconBg() ? (React__default.createElement(Icon, { classPrefix: iconClassPrefix, fontClassName: iconFontClassName, name: "notice", size: "16", color: color })) : null)) : null,
+            React__default.createElement("div", { className: "left-icon" }, leftIcon || React__default.createElement(Notice, { size: 16, color: color })),
             React__default.createElement("div", { ref: wrap, className: "wrap" },
                 React__default.createElement("div", { ref: content, className: `content ${animationClass} ${isEllipsis() ? 'nut-ellipsis' : ''}`, style: contentStyle, onAnimationEnd: onAnimationEnd },
                     children,
                     text)),
-            closeMode || rightIcon ? (React__default.createElement("div", { className: "right-icon", onClick: onClickIcon },
-                React__default.createElement(Icon, { classPrefix: iconClassPrefix, fontClassName: iconFontClassName, name: rightIcon || 'close', color: color }))) : null)) : null,
+            closeMode || rightIcon ? (React__default.createElement("div", { className: "right-icon", onClick: onClickIcon }, rightIcon || React__default.createElement(Close, { size: 12, color: color }))) : null)) : null,
         showNoticeBar && scrollList.current.length > 0 && isVertical ? (React__default.createElement("div", { className: "nut-noticebar-vertical", style: barStyle, ref: container, onClick: handleClick },
-            iconShow() ? (React__default.createElement("div", { className: "left-icon", style: { backgroundImage: `url(${iconBg() || ''})` } }, !iconBg() ? (React__default.createElement(Icon, { classPrefix: iconClassPrefix, fontClassName: iconFontClassName, name: "notice", size: "16", color: color })) : null)) : null,
+            leftIcon ? React__default.createElement("div", { className: "left-icon" }, leftIcon) : null,
             children ? (React__default.createElement(React__default.Fragment, null,
                 React__default.createElement("div", { className: "nut-noticebar__inner", ref: innerRef }, scrollList.current.map((item, index) => {
                     return (React__default.createElement("div", { className: "scroll-inner ", style: itemStyle(index), key: index, onClick: (e) => {
@@ -440,7 +419,7 @@ const NoticeBar = (props) => {
             React__default.createElement("div", { className: "go", onClick: (e) => {
                     handleClickIcon(e);
                 } }, rightIcon ||
-                (closeMode ? (React__default.createElement(Icon, { classPrefix: iconClassPrefix, fontClassName: iconFontClassName, name: rightIcon || 'close', color: color, size: "11px" })) : null)))) : null));
+                (closeMode ? React__default.createElement(Close, { size: 12, color: color }) : null)))) : null));
 };
 NoticeBar.defaultProps = defaultProps;
 NoticeBar.displayName = 'NutNoticeBar';

package/dist/esm/{numberkeyboard.taro-1bc24744.js → numberkeyboard.taro-ed9b2149.js}

@@ -1,8 +1,8 @@
 import React__default, { useState, useEffect } from 'react';
 import classNames from 'classnames';
 import { c as cn } from './bem-350c1702.js';
-import { P as Popup } from './popup.taro-01676bff.js';
-import { u as useConfig } from './configprovider.taro-8d71eb49.js';
+import { P as Popup } from './popup.taro-020bf791.js';
+import { u as useConfig } from './configprovider.taro-c8c54556.js';
 
 const defaultProps = {
     confirmText: '',
@@ -115,7 +115,7 @@ const NumberKeyboard = (props) => {
         setClickKeyIndex(undefined);
     };
     return (React__default.createElement("div", null,
-        React__default.createElement(Popup, { visible: show, overlay: overlay, position: "bottom", popClass: popClass, onClickOverlay: onClose, onClickCloseIcon: onClose, overlayStyle: { backgroundColor: 'rgba(0, 0, 0, 0)' } },
+        React__default.createElement(Popup, { visible: show, overlay: overlay, position: "bottom", className: popClass, onClickOverlay: onClose, onClickCloseIcon: onClose, overlayStyle: { backgroundColor: 'rgba(0, 0, 0, 0)' } },
             React__default.createElement("div", { className: `${b()} ${className}`, style: { ...style } },
                 title ? (React__default.createElement("div", { className: b('header') },
                     React__default.createElement("h3", { className: b('header__tit') }, title),