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

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+# v2.0.0-alpha.4
+`2023-05-05`
+
+* 🛠 refactor: circleprogress-v2.0 (#949) @junjun666
+* 🛠 refactor: input (#962) @oasis-cloud
+* 🛠 refactor: Tabbar (#935) @Eiinu
+* :bug: fix: badge 组件的默认样式中，去掉 margin-right (#967) @xiaoyatong
+* 🎨 style: fix endLine display error (#964) @HaiTao
+
 # v2.0.0-alpha.3
 `2023-04-28`
 

package/dist/esm/CircleProgress.js

@@ -1,9 +1,8 @@
-import { C as CircleProgress } from './circleprogress.taro-d8973ae9.js';
+import { C as CircleProgress } from './circleprogress.taro-d4943109.js';
 import 'react';
 import 'classnames';
 import './index-5bcb0ff8.js';
-import './bem-350c1702.js';
-import '@bem-react/classname';
+import './typings-d8491423.js';
 
 
 

package/dist/esm/Input.js

@@ -1,10 +1,13 @@
-import { I as Input } from './input.taro-f4e067f7.js';
+import { I as Input } from './input.taro-1aca4a45.js';
 import 'react';
+import '@tarojs/components';
 import '@nutui/icons-react-taro';
+import '@tarojs/taro';
 import './configprovider.taro-43a3c646.js';
 import 'lodash.kebabcase';
 import './zh-CN-b4f493ba.js';
 import './typings-d8491423.js';
+import './use-props-value-ae7ee726.js';
 
 
 

package/dist/esm/Tabbar.js

@@ -1,7 +1,10 @@
-import { T as Tabbar } from './tabbar.taro-eefd0f8e.js';
+import { T as Tabbar } from './tabbar.taro-48413fb8.js';
 import 'react';
-import './bem-350c1702.js';
-import '@bem-react/classname';
+import 'classnames';
+import './typings-d8491423.js';
+import './use-props-value-ae7ee726.js';
+import './tabbaritem.taro-5afa3562.js';
+import './badge.taro-e2169fbe.js';
 
 
 

package/dist/esm/TabbarItem.js

@@ -1,9 +1,8 @@
-import { T as TabbarItem } from './tabbaritem.taro-7a97e645.js';
+import { T as TabbarItem } from './tabbaritem.taro-5afa3562.js';
 import 'react';
-import '@tarojs/taro';
-import './bem-350c1702.js';
-import '@bem-react/classname';
+import 'classnames';
 import './typings-d8491423.js';
+import './badge.taro-e2169fbe.js';
 
 
 

package/dist/esm/{circleprogress.taro-d8973ae9.js → circleprogress.taro-d4943109.js}

@@ -1,35 +1,36 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import classNames from 'classnames';
 import { a as isObject } from './index-5bcb0ff8.js';
-import { c as cn } from './bem-350c1702.js';
+import { C as ComponentDefaults } from './typings-d8491423.js';
 
 const defaultProps = {
+    ...ComponentDefaults,
     strokeWidth: 5,
     radius: 50,
     strokeLinecap: 'round',
-    circleColor: '#fa2c19',
-    pathColor: '#e5e9f2',
+    color: '#fa2c19',
+    background: '#e5e9f2',
     clockwise: true,
 };
+const classPrefix = `nut-circleprogress`;
 const CircleProgress = (props) => {
-    const { children, progress, className, radius, pathColor, clockwise, circleColor, strokeWidth, style, strokeLinecap, ...restProps } = {
+    const { children, percent, className, radius, background, clockwise, color, strokeWidth, style, strokeLinecap, ...restProps } = {
         ...defaultProps,
         ...props,
     };
-    const [oldValue, setOldValue] = useState(progress);
-    const b = cn('circleprogress');
-    const classes = classNames(className, b(''));
+    const [oldValue, setOldValue] = useState(percent);
+    const classes = classNames(className, classPrefix);
     const refRandomId = Math.random().toString(36).slice(-8);
+    const animateIdRef = useRef(0);
     const styles = {
         height: `${Number(radius) * 2}px`,
         width: `${Number(radius) * 2}px`,
         ...style,
     };
     useEffect(() => {
-        let rafId;
         const startTime = Date.now();
         const startRate = Number(oldValue); // 30
-        const endRate = Number(progress); // 40
+        const endRate = Number(percent); // 40
         const duration = Math.abs(((startRate - endRate) * 1000) / +100); // 100
         const animate = () => {
             const now = Date.now();
@@ -37,22 +38,17 @@ const CircleProgress = (props) => {
             const rate = progress * (endRate - startRate) + startRate;
             setOldValue(Math.min(Math.max(+rate, 0), 100));
             if (endRate > startRate ? rate < endRate : rate > endRate) {
-                rafId = window.requestAnimationFrame(animate);
+                animateIdRef.current = window.requestAnimationFrame(animate);
             }
         };
-        if (rafId) {
-            cancelAnimationFrame(rafId);
-        }
-        rafId = window.requestAnimationFrame(animate);
-    }, [progress]);
-    const cancelAnimationFrame = function (id) {
-        clearTimeout(id);
-    };
+        animateIdRef.current = window.requestAnimationFrame(animate);
+        return () => window.cancelAnimationFrame(animateIdRef.current);
+    }, [percent]);
     const stop = () => {
-        if (!isObject(circleColor)) {
+        if (!isObject(props.color)) {
             return [];
         }
-        const color = circleColor;
+        const color = props.color;
         const colorArr = Object.keys(color).sort((a, b) => parseFloat(a) - parseFloat(b));
         const stopArr = [];
         colorArr.map((item) => {
@@ -84,12 +80,12 @@ const CircleProgress = (props) => {
         const progress = +oldValue;
         const offset = (perimeter * Number(format(parseFloat(progress.toFixed(1))))) / 100;
         const isWise = props.clockwise ? 1 : 0;
-        const color = isObject(circleColor)
+        const color = isObject(props.color)
             ? `url(%23${refRandomId})`
-            : transColor(circleColor);
+            : transColor(props.color);
         const d = `M 50 50 m 0 -45 a 45 45 0 1 ${isWise} 0 90 a 45 45 0 1, ${isWise} 0 -90`;
         const pa = `%3Cdefs%3E%3ClinearGradient id='${refRandomId}' x1='100%25' y1='0%25' x2='0%25' y2='0%25'%3E${stopDom}%3C/linearGradient%3E%3C/defs%3E`;
-        const path = `%3Cpath d='${d}' stroke-width='${strokeWidth}' stroke='${transColor(props.pathColor)}' fill='none'/%3E`;
+        const path = `%3Cpath d='${d}' stroke-width='${strokeWidth}' stroke='${transColor(props.background)}' fill='none'/%3E`;
         const path1 = `%3Cpath d='${d}' stroke-width='${strokeWidth}' stroke-dasharray='${offset},${perimeter}' stroke-linecap='round' stroke='${transColor(color)}' fill='none'/%3E`;
         return {
             background: `url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100'  xmlns='http://www.w3.org/2000/svg'%3E${pa}${path}${path1}%3C/svg%3E")`,
@@ -99,9 +95,7 @@ const CircleProgress = (props) => {
     };
     return (React.createElement("div", { className: classes, style: styles, ...restProps },
         React.createElement("div", { style: circleStyle() }),
-        React.createElement("div", { className: "nut-circleprogress-text" }, children || React.createElement("div", null,
-            progress,
-            "%"))));
+        React.createElement("div", { className: "nut-circleprogress-text" }, children)));
 };
 CircleProgress.defaultProps = defaultProps;
 CircleProgress.displayName = 'NutCircleProgress';

package/dist/esm/input.taro-1aca4a45.js

@@ -0,0 +1,167 @@
+import React, { forwardRef, useRef, useState, useImperativeHandle, useCallback } from 'react';
+import { View, Input as Input$1 } from '@tarojs/components';
+import { MaskClose } from '@nutui/icons-react-taro';
+import { getEnv, ENV_TYPE } from '@tarojs/taro';
+import { u as useConfig } from './configprovider.taro-43a3c646.js';
+import { C as ComponentDefaults } from './typings-d8491423.js';
+import { u as usePropsValue } from './use-props-value-ae7ee726.js';
+
+function trimExtraChar(value, char, regExp) {
+    const index = value.indexOf(char);
+    if (index === -1) {
+        return value;
+    }
+    if (char === '-' && index !== 0) {
+        return value.slice(0, index);
+    }
+    return value.slice(0, index + 1) + value.slice(index).replace(regExp, '');
+}
+function formatNumber(value, allowDot = true, allowMinus = true) {
+    if (allowDot) {
+        value = trimExtraChar(value, '.', /\./g);
+    }
+    else {
+        value = value.split('.')[0];
+    }
+    if (allowMinus) {
+        value = trimExtraChar(value, '-', /-/g);
+    }
+    else {
+        value = value.replace(/-/, '');
+    }
+    const regExp = allowDot ? /[^-0-9.]/g : /[^-0-9]/g;
+    return value.replace(regExp, '');
+}
+
+const defaultProps = {
+    ...ComponentDefaults,
+    type: 'text',
+    name: '',
+    placeholder: '',
+    confirmType: 'done',
+    align: 'left',
+    required: false,
+    disabled: false,
+    readOnly: false,
+    maxLength: 9999,
+    clearable: false,
+    clearIcon: null,
+    formatTrigger: 'onChange',
+    autoFocus: false,
+};
+const Input = forwardRef((props, ref) => {
+    const { locale } = useConfig();
+    const { type, name, placeholder, align, disabled, readOnly, maxLength, clearable, clearIcon, formatTrigger, autoFocus, style, className, onChange, onFocus, onBlur, onClear, formatter, onClick, confirmType, defaultValue, value: _value, ...rest } = {
+        ...defaultProps,
+        ...props,
+    };
+    const [value, setValue] = usePropsValue({
+        value: props.value,
+        defaultValue: props.defaultValue,
+        finalValue: '',
+        onChange,
+    });
+    const inputRef = useRef(null);
+    const [active, setActive] = useState(false);
+    useImperativeHandle(ref, () => {
+        return {
+            clear: () => {
+                setValue('');
+            },
+            focus: () => {
+                inputRef.current?.focus();
+            },
+            blur: () => {
+                inputRef.current?.blur();
+            },
+            get nativeElement() {
+                return inputRef.current;
+            },
+        };
+    });
+    const inputClass = useCallback(() => {
+        const classPrefix = 'nut-input';
+        return [classPrefix, `${disabled ? `${classPrefix}-disabled` : ''}`]
+            .filter(Boolean)
+            .join(' ');
+    }, [disabled]);
+    const [, updateState] = React.useState();
+    const forceUpdate = React.useCallback(() => updateState({}), []);
+    const updateValue = (value, trigger = 'onChange') => {
+        let val = value;
+        if (getEnv() === ENV_TYPE.WEB) {
+            if (type === 'number') {
+                val = formatNumber(val, false, true);
+            }
+            if (type === 'digit') {
+                val = formatNumber(val, true, true);
+            }
+        }
+        if (formatter && trigger === formatTrigger) {
+            val = formatter(val);
+        }
+        setValue(val);
+        const eventHandler = props[trigger];
+        if (eventHandler && typeof eventHandler === 'function') {
+            eventHandler(val);
+        }
+        forceUpdate();
+    };
+    const handleFocus = (event) => {
+        const val = event.target.value;
+        onFocus && onFocus(val);
+        setActive(true);
+    };
+    const handleInput = (value) => {
+        updateValue(value, 'onChange');
+    };
+    const handleBlur = (event) => {
+        const val = event.target.value;
+        updateValue(val, 'onBlur');
+        setTimeout(() => {
+            setActive(false);
+        }, 50);
+    };
+    const inputType = (type) => {
+        if (getEnv() === ENV_TYPE.WEB) {
+            if (type === 'digit') {
+                return 'text';
+            }
+            if (type === 'number') {
+                return 'tel';
+            }
+        }
+        else if (type === 'password') {
+            return 'text';
+        }
+        return type;
+    };
+    return (React.createElement(View, { className: `${inputClass()}  ${className || ''}`, style: style, onClick: (e) => {
+            onClick && onClick(e);
+        } },
+        React.createElement(Input$1, { ...rest, name: name, className: "nut-input-native", ref: inputRef, style: { textAlign: align }, type: inputType(type), password: type === 'password', maxlength: maxLength, placeholder: placeholder || locale.placeholder, disabled: disabled || readOnly, value: value, focus: autoFocus, confirmType: confirmType, onBlur: (e) => {
+                handleBlur(e);
+            }, onFocus: (e) => {
+                handleFocus(e);
+            }, onInput: (e) => {
+                handleInput(e.currentTarget.value);
+            } }),
+        React.createElement(View, { style: {
+                display: clearable && !readOnly && active && value.length > 0
+                    ? 'flex'
+                    : 'none',
+                alignItems: 'center',
+            }, onClick: (e) => {
+                e.stopPropagation();
+                if (!disabled) {
+                    setTimeout(() => {
+                        setValue('');
+                        onClear && onClear('');
+                    }, 50);
+                }
+            } }, clearIcon || React.createElement(MaskClose, { className: "nut-input-clear" }))));
+});
+Input.defaultProps = defaultProps;
+Input.displayName = 'NutInput';
+
+export { Input as I };

package/dist/esm/nutui-react.es.js

@@ -18,8 +18,8 @@ export { N as NavBar } from './navbar.taro-92bab9c4.js';
 export { S as SideNavBar } from './sidenavbar.taro-f8ffb7dc.js';
 export { S as SideNavBarItem } from './sidenavbaritem.taro-6cb0821e.js';
 export { S as SubSideNavBar } from './subsidenavbar.taro-85c03291.js';
-export { T as Tabbar } from './tabbar.taro-eefd0f8e.js';
-export { T as TabbarItem } from './tabbaritem.taro-7a97e645.js';
+export { T as Tabbar } from './tabbar.taro-48413fb8.js';
+export { T as TabbarItem } from './tabbaritem.taro-5afa3562.js';
 export { T as TabPane } from './tabpane.taro-406cc0d3.js';
 export { T as Tabs } from './tabs.taro-d47ccfc5.js';
 export { A as Address } from './address.taro-67e32c33.js';
@@ -30,7 +30,7 @@ export { C as Checkbox, a as CheckboxGroup } from './checkbox.taro-ae460d3a.js';
 export { D as DatePicker } from './datepicker.taro-7d522ff8.js';
 export { F as Form } from './form.taro-7413d868.js';
 export { F as FormItem } from './formitem.taro-b550d29c.js';
-export { I as Input } from './input.taro-f4e067f7.js';
+export { I as Input } from './input.taro-1aca4a45.js';
 export { I as InputNumber } from './inputnumber.taro-1f893d42.js';
 export { M as Menu } from './menu.taro-e5c68cb8.js';
 export { M as MenuItem } from './menuitem.taro-37c18382.js';
@@ -64,7 +64,7 @@ export { A as AnimatingNumbers } from './animatingnumbers.taro-f6eaffef.js';
 export { A as Audio } from './audio.taro-51eafc9d.js';
 export { A as Avatar } from './avatar.taro-a840f345.js';
 export { A as AvatarGroup } from './avatargroup-0eadb514.js';
-export { C as CircleProgress } from './circleprogress.taro-d8973ae9.js';
+export { C as CircleProgress } from './circleprogress.taro-d4943109.js';
 export { C as Collapse } from './collapse.taro-89bcadf2.js';
 export { C as CollapseItem } from './collapseitem-0e228cec.js';
 export { C as CountDown } from './countdown.taro-c14b5c1f.js';
@@ -102,9 +102,9 @@ import './use-client-rect-1f8ed1fe.js';
 import './get-scroll-parent-b4a07e65.js';
 import './can-use-dom-3eeb5af4.js';
 import './offsetContext-c2a746fa.js';
+import './use-props-value-ae7ee726.js';
 import './bem-350c1702.js';
 import '@bem-react/classname';
-import './use-props-value-ae7ee726.js';
 import './configprovider-9960f0fb.js';
 import 'react-transition-group';
 import './use-touch-db24bb5c.js';

package/dist/esm/tabbar.taro-48413fb8.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import classNames from 'classnames';
+import { C as ComponentDefaults } from './typings-d8491423.js';
+import { u as usePropsValue } from './use-props-value-ae7ee726.js';
+import { T as TabbarItem } from './tabbaritem.taro-5afa3562.js';
+
+const defaultProps = {
+    ...ComponentDefaults,
+    defaultValue: 0,
+    fixed: false,
+    inactiveColor: '',
+    activeColor: '',
+    safeArea: false,
+    onSwitch: (value) => { },
+};
+const Tabbar = (props) => {
+    const { children, defaultValue, value, fixed, activeColor, inactiveColor, safeArea, className, style, onSwitch, } = {
+        ...defaultProps,
+        ...props,
+    };
+    const classPrefix = 'nut-tabbar';
+    const [selectIndex, setSelectIndex] = usePropsValue({
+        value,
+        defaultValue,
+        finalValue: 0,
+        onChange: onSwitch,
+    });
+    return (React.createElement("div", { className: classNames(classPrefix, className, {
+            [`${classPrefix}__fixed`]: fixed,
+        }), style: style },
+        React.createElement("div", { className: `${classPrefix}__wrap` }, React.Children.map(children, (child, idx) => {
+            if (!React.isValidElement(child)) {
+                return null;
+            }
+            const childProps = {
+                ...child.props,
+                active: idx === selectIndex,
+                index: idx,
+                inactiveColor,
+                activeColor,
+                handleClick: setSelectIndex,
+            };
+            return React.cloneElement(child, childProps);
+        })),
+        (fixed || safeArea) && React.createElement("div", { className: `${classPrefix}__safe-area` })));
+};
+Tabbar.defaultProps = defaultProps;
+Tabbar.displayName = 'NutTabbar';
+Tabbar.Item = TabbarItem;
+
+export { Tabbar as T };

package/dist/esm/tabbaritem.taro-5afa3562.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import classNames from 'classnames';
+import { C as ComponentDefaults } from './typings-d8491423.js';
+import { B as Badge } from './badge.taro-e2169fbe.js';
+
+const defaultProps = {
+    ...ComponentDefaults,
+    title: '',
+    icon: null,
+    active: false,
+    index: 0,
+    handleClick: (idx) => { },
+};
+const TabbarItem = (props) => {
+    const { className, style, title, icon, active, activeColor, inactiveColor, index, handleClick, ...rest } = {
+        ...defaultProps,
+        ...props,
+    };
+    const classPrefix = 'nut-tabbar-item';
+    const tabbarItemClass = classNames(className, classPrefix, {
+        [`${classPrefix}-active`]: active,
+    });
+    const boxPrefix = `${classPrefix}__icon-box`;
+    const titleClass = classNames(boxPrefix, `${boxPrefix}-nav`, {
+        [`${boxPrefix}-large`]: !icon,
+    });
+    return (React.createElement("div", { className: tabbarItemClass, style: {
+            color: active ? activeColor : inactiveColor,
+            ...style,
+        }, onClick: () => handleClick(index) }, icon ? (React.createElement(React.Fragment, null,
+        React.createElement(Badge, { ...rest },
+            React.createElement("div", { className: boxPrefix }, icon)),
+        React.createElement("div", { className: titleClass }, title))) : (React.createElement(Badge, { ...rest },
+        React.createElement("div", { className: titleClass }, title)))));
+};
+
+export { TabbarItem as T };

package/dist/locales/base.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react-taro v2.0.0-alpha.3 Fri Apr 28 2023 15:56:46 GMT+0800 (China Standard Time)
+* @nutui/nutui-react-taro v2.0.0-alpha.4 Fri May 05 2023 16:38:45 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/en-US.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react-taro v2.0.0-alpha.3 Fri Apr 28 2023 15:56:46 GMT+0800 (China Standard Time)
+* @nutui/nutui-react-taro v2.0.0-alpha.4 Fri May 05 2023 16:38:45 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/id-ID.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react-taro v2.0.0-alpha.3 Fri Apr 28 2023 15:56:46 GMT+0800 (China Standard Time)
+* @nutui/nutui-react-taro v2.0.0-alpha.4 Fri May 05 2023 16:38:45 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/zh-CN.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react-taro v2.0.0-alpha.3 Fri Apr 28 2023 15:56:46 GMT+0800 (China Standard Time)
+* @nutui/nutui-react-taro v2.0.0-alpha.4 Fri May 05 2023 16:38:45 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/zh-TW.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react-taro v2.0.0-alpha.3 Fri Apr 28 2023 15:56:46 GMT+0800 (China Standard Time)
+* @nutui/nutui-react-taro v2.0.0-alpha.4 Fri May 05 2023 16:38:45 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/zh-UG.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react-taro v2.0.0-alpha.3 Fri Apr 28 2023 15:56:46 GMT+0800 (China Standard Time)
+* @nutui/nutui-react-taro v2.0.0-alpha.4 Fri May 05 2023 16:38:45 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */