@nutui/nutui-react-taro 3.0.11 → 3.0.12

package/dist/es/packages/range/range.js

@@ -7,6 +7,7 @@ import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import classNames from "classnames";
 import { Text, View } from "@tarojs/components";
+import { useReady, nextTick } from "@tarojs/taro";
 import { pxTransform } from "../../utils/taro/px-transform";
 import { useTouch } from "../../hooks/use-touch";
 import { ComponentDefaults } from "../../utils/typings";
@@ -14,6 +15,7 @@ import { usePropsValue } from "../../hooks/use-props-value";
 import { getRectInMultiPlatform } from "../../utils/taro/get-rect";
 import { useRtl } from "../configprovider/index";
 import { harmony } from "../../utils/taro/platform";
+import { mergeProps } from "../../utils/merge-props";
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     range: false,
     min: 0,
@@ -29,25 +31,23 @@ var isSameValue = function(newValue, oldValue) {
     return JSON.stringify(newValue) === JSON.stringify(oldValue);
 };
 var handleOverlap = function(value) {
-    if (value[0] > value[1]) {
-        return value.slice(0).reverse();
-    }
-    return value;
+    return value[0] > value[1] ? value.slice(0).reverse() : value;
 };
 export var Range = function(props) {
     var rtl = useRtl();
-    var _$_object_spread = _object_spread({}, defaultProps, props), className = _$_object_spread.className, style = _$_object_spread.style, range = _$_object_spread.range, disabled = _$_object_spread.disabled, button = _$_object_spread.button, vertical = _$_object_spread.vertical, marks = _$_object_spread.marks, minDescription = _$_object_spread.minDescription, maxDescription = _$_object_spread.maxDescription, currentDescription = _$_object_spread.currentDescription, min = _$_object_spread.min, max = _$_object_spread.max, step = _$_object_spread.step, value = _$_object_spread.value, defaultValue = _$_object_spread.defaultValue, onChange = _$_object_spread.onChange, onStart = _$_object_spread.onStart, onEnd = _$_object_spread.onEnd;
+    var _mergeProps = mergeProps(defaultProps, props), className = _mergeProps.className, style = _mergeProps.style, range = _mergeProps.range, disabled = _mergeProps.disabled, button = _mergeProps.button, vertical = _mergeProps.vertical, marks = _mergeProps.marks, minDescription = _mergeProps.minDescription, maxDescription = _mergeProps.maxDescription, currentDescription = _mergeProps.currentDescription, min = _mergeProps.min, max = _mergeProps.max, step = _mergeProps.step, value = _mergeProps.value, defaultValue = _mergeProps.defaultValue, onChange = _mergeProps.onChange, onStart = _mergeProps.onStart, onEnd = _mergeProps.onEnd;
     var rtlClassPrefix = useMemo(function() {
         return "rtl-".concat(vertical ? verticalClassPrefix : classPrefix);
     }, [
         vertical
     ]);
-    var _useState = _sliced_to_array(useState(0), 2), buttonIndex = _useState[0], setButtonIndex = _useState[1];
-    var _useState1 = _sliced_to_array(useState('start'), 2), dragStatus = _useState1[0], setDragStatus = _useState1[1];
+    var buttonRef = useRef(0);
+    var dragStatusRef = useRef('start');
     var touch = useTouch();
     var root = useRef(null);
-    var _useState2 = _sliced_to_array(useState([]), 2), marksList = _useState2[0], setMarksList = _useState2[1];
-    var _useState3 = _sliced_to_array(useState(0), 2), startValue = _useState3[0], setStartValue = _useState3[1];
+    var rootRect = useRef(null);
+    var _useState = _sliced_to_array(useState([]), 2), marksList = _useState[0], setMarksList = _useState[1];
+    var _useState1 = _sliced_to_array(useState(0), 2), startValue = _useState1[0], setStartValue = _useState1[1];
     var scope = useMemo(function() {
         if (max < min || max === min) {
             console.log('max 的值需要大于 min的值');
@@ -65,10 +65,8 @@ export var Range = function(props) {
         defaultValue: defaultValue,
         finalValue: 0,
         onChange: handleChange
-    }), 2), current = _usePropsValue[0], setCurrent = _usePropsValue[1];
-    var _useState4 = _sliced_to_array(useState(function() {
-        return value || defaultValue || 0;
-    }), 2), exactValue = _useState4[0], setExactValue = _useState4[1];
+    }), 2), innerValue = _usePropsValue[0], setInnerValue = _usePropsValue[1];
+    var exactValueRef = useRef(value || defaultValue || 0);
     var marksRef = useRef({});
     useEffect(function() {
         if (marks) {
@@ -108,11 +106,11 @@ export var Range = function(props) {
         var verticalClassPrefix = 'nut-range-vertical-mark';
         var lowerBound = min;
         var upperBound = max;
-        if (range && Array.isArray(current)) {
-            lowerBound = current[0];
-            upperBound = current[1];
+        if (range && Array.isArray(innerValue)) {
+            lowerBound = innerValue[0];
+            upperBound = innerValue[1];
         } else {
-            upperBound = current;
+            upperBound = innerValue;
         }
         var isActive = mark <= upperBound && mark >= lowerBound;
         var _$classNames = [
@@ -131,7 +129,7 @@ export var Range = function(props) {
         min,
         max,
         range,
-        current,
+        innerValue,
         vertical,
         rtl,
         rtlClassPrefix
@@ -141,41 +139,40 @@ export var Range = function(props) {
     }, [
         range
     ]);
-    var calcMainAxis = useCallback(function() {
-        var modelVal = current;
+    var calcMainAxis = useMemo(function() {
+        var modelVal = innerValue;
         return isRange(modelVal) ? "".concat((modelVal[1] - modelVal[0]) * 100 / scope, "%") : "".concat((modelVal - min) * 100 / scope, "%");
     }, [
-        current,
+        innerValue,
         isRange,
         min,
         scope
     ]);
-    var calcOffset = useCallback(function() {
-        var modelVal = current;
-        return isRange(modelVal) ? "".concat((modelVal[0] - min) * 100 / scope, "%") : "0%";
+    var calcOffset = useMemo(function() {
+        var modelVal = innerValue;
+        return isRange(modelVal) ? "".concat((modelVal[0] - min) * 100 / scope, "%") : '0%';
     }, [
-        current,
+        innerValue,
         isRange,
         min,
         scope
     ]);
-    var barStyle = useCallback(function() {
+    var barStyle = useMemo(function() {
         if (vertical) {
             return {
-                height: calcMainAxis(),
-                top: calcOffset(),
-                transition: dragStatus ? 'none' : undefined
+                height: calcMainAxis,
+                top: calcOffset,
+                transition: dragStatusRef.current ? 'none' : undefined
             };
         }
         var dir = rtl ? 'right' : 'left';
         var _obj;
         return _obj = {
-            width: calcMainAxis()
-        }, _define_property(_obj, dir, calcOffset()), _define_property(_obj, "transition", dragStatus ? 'none' : undefined), _obj;
+            width: calcMainAxis
+        }, _define_property(_obj, dir, calcOffset), _define_property(_obj, "transition", dragStatusRef.current ? 'none' : undefined), _obj;
     }, [
         calcMainAxis,
         calcOffset,
-        dragStatus,
         rtl,
         vertical
     ]);
@@ -195,12 +192,12 @@ export var Range = function(props) {
         vertical
     ]);
     var tickClass = useCallback(function(mark) {
-        if (range && Array.isArray(current)) {
-            return mark <= current[1] && mark >= current[0];
+        if (range && Array.isArray(innerValue)) {
+            return mark <= innerValue[1] && mark >= innerValue[0];
         }
-        return mark <= current;
+        return mark <= innerValue;
     }, [
-        current,
+        innerValue,
         range
     ]);
     var format = useCallback(function(value) {
@@ -217,50 +214,53 @@ export var Range = function(props) {
         } else {
             value = format(value);
         }
-        if (!isSameValue(value, current)) {
-            setCurrent(value);
+        if (!isSameValue(value, innerValue)) {
+            setInnerValue(value);
         }
         end && onEnd && onEnd(value);
     }, [
-        current,
+        innerValue,
         format,
         isRange,
         onEnd,
-        setCurrent
+        setInnerValue
     ]);
-    var click = useCallback(/*#__PURE__*/ function() {
+    var handleClick = useCallback(/*#__PURE__*/ function() {
         var _ref = _async_to_generator(function(event) {
-            var _event_detail, rect, x, delta, total, _event_detail1, y, value, _current, left, right, middle;
+            var _event_detail, rect, _event_detail_x, x, delta, total, _event_detail1, _event_detail_y, y, value, _innerValue, left, right, middle;
             return _ts_generator(this, function(_state) {
                 switch(_state.label){
                     case 0:
-                        if (disabled || !root.current) {
-                            return [
-                                2
-                            ];
-                        }
-                        setDragStatus('');
+                        if (disabled || !root.current) return [
+                            2
+                        ];
+                        // TODO 鸿蒙获取clientX的数据有误，windowX 也变成了 undefined。暂不支持，待上游支持。
+                        if (isHm) return [
+                            2
+                        ];
+                        dragStatusRef.current = '';
                         return [
                             4,
                             getRectInMultiPlatform(root.current)
                         ];
                     case 1:
                         rect = _state.sent();
-                        x = typeof ((_event_detail = event.detail) === null || _event_detail === void 0 ? void 0 : _event_detail.x) !== 'undefined' ? event.detail.x : event.clientX;
-                        if (isHm) x = parseFloat(pxTransform(event.windowX));
+                        x = (_event_detail_x = (_event_detail = event.detail) === null || _event_detail === void 0 ? void 0 : _event_detail.x) !== null && _event_detail_x !== void 0 ? _event_detail_x : event.clientX;
+                        if (isHm) x = parseFloat(pxTransform(event.windowX || x));
                         delta = x - rect.left;
                         total = rect.width;
                         if (vertical) {
                             ;
-                            y = typeof ((_event_detail1 = event.detail) === null || _event_detail1 === void 0 ? void 0 : _event_detail1.y) !== 'undefined' ? event.detail.y : event.clientY;
-                            if (isHm) y = parseFloat(pxTransform(event.windowY));
+                            ;
+                            y = (_event_detail_y = (_event_detail1 = event.detail) === null || _event_detail1 === void 0 ? void 0 : _event_detail1.y) !== null && _event_detail_y !== void 0 ? _event_detail_y : event.clientY;
+                            if (isHm) y = parseFloat(pxTransform(event.windowY || y));
                             delta = y - rect.top;
                             total = rect.height;
                         }
                         value = min + delta / total * scope;
-                        setExactValue(current);
-                        if (isRange(current)) {
-                            _current = _sliced_to_array(current, 2), left = _current[0], right = _current[1];
+                        exactValueRef.current = innerValue;
+                        if (isRange(innerValue)) {
+                            _innerValue = _sliced_to_array(innerValue, 2), left = _innerValue[0], right = _innerValue[1];
                             middle = (left + right) / 2;
                             if (value <= middle) {
                                 updateValue([
@@ -286,7 +286,7 @@ export var Range = function(props) {
             return _ref.apply(this, arguments);
         };
     }(), [
-        current,
+        innerValue,
         disabled,
         isRange,
         min,
@@ -294,20 +294,52 @@ export var Range = function(props) {
         updateValue,
         vertical
     ]);
+    useReady(function() {
+        var getRootRect = /*#__PURE__*/ function() {
+            var _ref = _async_to_generator(function() {
+                var rect;
+                return _ts_generator(this, function(_state) {
+                    switch(_state.label){
+                        case 0:
+                            if (!root.current) return [
+                                3,
+                                2
+                            ];
+                            return [
+                                4,
+                                getRectInMultiPlatform(root.current)
+                            ];
+                        case 1:
+                            rect = _state.sent();
+                            rootRect.current = rect;
+                            _state.label = 2;
+                        case 2:
+                            return [
+                                2
+                            ];
+                    }
+                });
+            });
+            return function getRootRect() {
+                return _ref.apply(this, arguments);
+            };
+        }();
+        nextTick(function() {
+            getRootRect();
+        });
+    });
     var onTouchStart = useCallback(function(event) {
-        if (disabled) {
-            return;
-        }
+        if (disabled) return;
         touch.start(event);
-        setExactValue(current);
-        if (isRange(current)) {
-            setStartValue(current.map(format));
+        exactValueRef.current = innerValue;
+        if (isRange(innerValue)) {
+            setStartValue(innerValue.map(format));
         } else {
-            setStartValue(format(current));
+            setStartValue(format(innerValue));
         }
-        setDragStatus('start');
+        dragStatusRef.current = 'start';
     }, [
-        current,
+        innerValue,
         disabled,
         format,
         isRange,
@@ -315,61 +347,60 @@ export var Range = function(props) {
     ]);
     var onTouchMove = useCallback(/*#__PURE__*/ function() {
         var _ref = _async_to_generator(function(event) {
-            var rect, delta, total, diff, newValue;
+            var handleMove;
             return _ts_generator(this, function(_state) {
-                switch(_state.label){
-                    case 0:
-                        // @TODO RN、鸿蒙端垂直滑动时，页面会一同滑动，待解决
-                        if (disabled || !root.current) {
-                            return [
+                // @TODO RN、鸿蒙端垂直滑动时，页面会一同滑动，待解决
+                if (disabled || !root.current) return [
+                    2
+                ];
+                if (dragStatusRef.current === 'start') {
+                    onStart && onStart();
+                    dragStatusRef.current = 'draging';
+                }
+                touch.move(event);
+                handleMove = /*#__PURE__*/ function() {
+                    var _ref = _async_to_generator(function() {
+                        var delta, total, diff, newValue;
+                        return _ts_generator(this, function(_state) {
+                            if (!rootRect.current) return [
                                 2
                             ];
-                        }
-                        if (dragStatus === 'start') {
-                            onStart && onStart();
-                        }
-                        touch.move(event);
-                        setDragStatus('draging');
-                        return [
-                            4,
-                            getRectInMultiPlatform(root.current)
-                        ];
-                    case 1:
-                        rect = _state.sent();
-                        if (!rect) return [
-                            2
-                        ];
-                        delta = isHm ? parseFloat(pxTransform(touch.deltaX.current)) : touch.deltaX.current;
-                        total = rect.width;
-                        diff = delta / total * scope;
-                        diff = rtl ? -diff : diff;
-                        if (vertical) {
-                            delta = isHm ? parseFloat(pxTransform(touch.deltaY.current)) : touch.deltaY.current;
-                            total = rect.height;
+                            delta = isHm ? parseFloat(pxTransform(touch.deltaX.current)) : touch.deltaX.current;
+                            total = rootRect.current.width;
                             diff = delta / total * scope;
-                        }
-                        if (isRange(startValue)) {
-                            newValue = exactValue.slice();
-                            newValue[buttonIndex] = startValue[buttonIndex] + diff;
-                        } else {
+                            diff = rtl ? -diff : diff;
+                            if (vertical) {
+                                delta = isHm ? parseFloat(pxTransform(touch.deltaY.current)) : touch.deltaY.current;
+                                total = rootRect.current.height;
+                                diff = delta / total * scope;
+                            }
                             newValue = startValue + diff;
-                        }
-                        setExactValue(newValue);
-                        updateValue(newValue);
-                        return [
-                            2
-                        ];
-                }
+                            if (isRange(startValue)) {
+                                newValue = exactValueRef.current.slice();
+                                newValue[buttonRef.current] = startValue[buttonRef.current] + diff;
+                            }
+                            exactValueRef.current = newValue;
+                            updateValue(newValue);
+                            return [
+                                2
+                            ];
+                        });
+                    });
+                    return function handleMove() {
+                        return _ref.apply(this, arguments);
+                    };
+                }();
+                requestAnimationFrame(handleMove);
+                return [
+                    2
+                ];
             });
         });
         return function(event) {
             return _ref.apply(this, arguments);
         };
     }(), [
-        buttonIndex,
         disabled,
-        dragStatus,
-        exactValue,
         isRange,
         onStart,
         rtl,
@@ -380,38 +411,23 @@ export var Range = function(props) {
         vertical
     ]);
     var onTouchEnd = useCallback(function() {
-        if (disabled) {
-            return;
-        }
-        if (dragStatus === 'draging') {
-            updateValue(current, true);
+        if (disabled) return;
+        if (dragStatusRef.current === 'draging') {
+            updateValue(innerValue, true);
         }
-        setDragStatus('');
+        dragStatusRef.current = '';
     }, [
-        current,
+        innerValue,
         disabled,
-        dragStatus,
         updateValue
     ]);
     var curValue = useCallback(function(idx) {
-        var modelVal = current;
+        var modelVal = innerValue;
         var value = typeof idx === 'number' ? modelVal[idx] : modelVal;
         return value;
     }, [
-        current
+        innerValue
     ]);
-    var buttonTransform = useMemo(function() {
-        var borderRadis = {
-            borderRadius: pxTransform(13)
-        };
-        var transform = {
-            transform: 'translate(-50%, -50%)'
-        };
-        if (isHm) {
-            return _object_spread({}, borderRadis, transform);
-        }
-        return _object_spread({}, transform);
-    }, []);
     var buttonNumberTransform = useMemo(function() {
         return vertical ? 'translate(100%, -50%)' : 'translate(-50%, -100%)';
     }, [
@@ -419,21 +435,20 @@ export var Range = function(props) {
     ]);
     var renderButton = useCallback(function(index) {
         var _obj, _obj1;
-        return /*#__PURE__*/ React.createElement(View, null, button || /*#__PURE__*/ React.createElement(View, {
+        return /*#__PURE__*/ React.createElement(React.Fragment, null, button || /*#__PURE__*/ React.createElement(View, {
             className: classNames("".concat(classPrefix, "-button"), (_obj = {}, _define_property(_obj, "".concat(verticalClassPrefix, "-button"), vertical), _define_property(_obj, "".concat(rtlClassPrefix, "-button"), rtl), _obj)),
-            // @ts-ignore
-            style: buttonTransform
+            style: {
+                transform: 'translate(-50%, -50%)'
+            }
         }, currentDescription !== null && /*#__PURE__*/ React.createElement(Text, {
             className: classNames("".concat(classPrefix, "-button-number"), (_obj1 = {}, _define_property(_obj1, "".concat(verticalClassPrefix, "-button-number"), vertical), _define_property(_obj1, "".concat(rtlClassPrefix, "-button-number"), rtl), _obj1)),
             style: {
-                // @ts-ignore
                 transform: buttonNumberTransform
             }
         }, currentDescription ? currentDescription(curValue(index)) : curValue(index))));
     }, [
         button,
         buttonNumberTransform,
-        buttonTransform,
         curValue,
         currentDescription,
         rtl,
@@ -469,42 +484,22 @@ export var Range = function(props) {
         tickClass,
         vertical
     ]);
-    var wrapperTransform = useMemo(function() {
-        // @TODO 支持变量
-        var wrapperTransformRN = [
-            {
-                translateX: pxTransform(vertical ? -12 : -13)
-            },
-            {
-                translateY: pxTransform(-12)
-            }
-        ];
-        var wrapperTransform = 'translate(-50%, -50%)';
-        return wrapperTransform;
-    }, [
-        vertical
-    ]);
-    var rangeWrapperTransform = useMemo(function() {
-        return 'translate(-50%, -50%)';
-    }, []);
     var renderRangeButton = useCallback(function() {
         return [
             0,
             1
-        ].map(function(item, index) {
-            var isLeft = index === 0;
-            var suffix = isLeft ? 'left' : 'right';
+        ].map(function(_, index) {
+            var suffix = index === 0 ? 'left' : 'right';
             var _obj;
             var cls = classNames("".concat(classPrefix, "-button-wrapper-").concat(suffix), (_obj = {}, _define_property(_obj, "".concat(verticalClassPrefix, "-button-wrapper-").concat(suffix), vertical), _define_property(_obj, "".concat(rtlClassPrefix, "-button-wrapper-").concat(suffix), rtl), _obj));
             return /*#__PURE__*/ React.createElement(View, {
                 key: index,
                 className: cls,
                 style: {
-                    // @ts-ignore
-                    transform: rangeWrapperTransform
+                    transform: 'translate(-50%, -50%)'
                 },
                 onTouchStart: function(e) {
-                    setButtonIndex(index);
+                    buttonRef.current = index;
                     onTouchStart(e);
                 },
                 onTouchMove: onTouchMove,
@@ -520,7 +515,6 @@ export var Range = function(props) {
         onTouchMove,
         onTouchStart,
         renderButton,
-        rangeWrapperTransform,
         vertical,
         rtl,
         rtlClassPrefix
@@ -530,8 +524,7 @@ export var Range = function(props) {
             catchMove: true,
             className: classNames("".concat(classPrefix, "-button-wrapper"), _define_property({}, "".concat(verticalClassPrefix, "-button-wrapper"), vertical)),
             style: {
-                // @ts-ignore
-                transform: wrapperTransform
+                transform: 'translate(-50%, -50%)'
             },
             onTouchStart: onTouchStart,
             onTouchMove: onTouchMove,
@@ -546,18 +539,18 @@ export var Range = function(props) {
         onTouchMove,
         onTouchStart,
         renderButton,
-        wrapperTransform,
         vertical
     ]);
     var renderButtonWrapper = useCallback(function() {
-        if (range) {
-            return renderRangeButton();
-        }
-        return renderSingleButton();
+        return /*#__PURE__*/ React.createElement(View, {
+            className: "".concat(classPrefix, "-bar ").concat(isHm ? '' : "".concat(classPrefix, "-bar-animate"), "}"),
+            style: barStyle
+        }, range ? renderRangeButton() : renderSingleButton());
     }, [
         renderRangeButton,
         renderSingleButton,
-        range
+        range,
+        barStyle
     ]);
     return /*#__PURE__*/ React.createElement(View, {
         className: containerClasses,
@@ -567,13 +560,8 @@ export var Range = function(props) {
     }, minDescription || min), /*#__PURE__*/ React.createElement(View, {
         ref: root,
         className: classes,
-        onClick: function(e) {
-            return click(e);
-        }
-    }, renderMarks(), /*#__PURE__*/ React.createElement(View, {
-        className: "".concat(classPrefix, "-bar"),
-        style: barStyle()
-    }, renderButtonWrapper())), maxDescription !== null && /*#__PURE__*/ React.createElement(Text, {
+        onClick: handleClick
+    }, renderMarks(), renderButtonWrapper()), maxDescription !== null && /*#__PURE__*/ React.createElement(Text, {
         className: "".concat(classPrefix, "-max")
     }, maxDescription || max));
 };

package/dist/es/packages/range/style/range.scss

@@ -46,7 +46,10 @@
     max-height: 100%;
     background: $range-active-color;
     border-radius: 2px;
-    transition: all 0.2s;
+
+    &-animate {
+      transition: all 0.2s;
+    }
   }
 
   &-button {
@@ -204,7 +207,8 @@
     position: absolute;
     width: 36px;
     height: 100%;
-    top: initial;
+    // top: initial;
+    top: 0px;
     right: 50%;
     overflow: visible;
     font-size: 12px;

package/dist/es/packages/range/style/style.css

@@ -45,6 +45,8 @@
   max-height: 100%;
   background: var(--nutui-range-active-color, var(--nutui-color-primary, #ff0f23));
   border-radius: 2px;
+}
+.nut-range-bar-animate {
   transition: all 0.2s;
 }
 .nut-range-button {
@@ -173,7 +175,7 @@
   position: absolute;
   width: 36px;
   height: 100%;
-  top: initial;
+  top: 0px;
   right: 50%;
   overflow: visible;
   font-size: 12px;