@nutui/nutui-react 2.0.0-alpha.7 → 2.0.0-alpha.9

package/dist/esm/Range.js

@@ -22,46 +22,41 @@ function _objectSpread(target) {
   return target;
 }
 import React__default, { useState, useRef, useEffect, useCallback } from "react";
+import classNames from "classnames";
 import { u as useTouch } from "./use-touch.js";
 import { g as getRect } from "./use-client-rect.js";
-import Toast from "./Toast.js";
-import { useConfig } from "./ConfigProvider.js";
-var defaultProps = {
+import { C as ComponentDefaults } from "./typings.js";
+import { u as usePropsValue } from "./use-props-value.js";
+var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
   range: false,
-  hiddenRange: false,
-  hiddenTag: false,
   min: 0,
   max: 100,
   step: 1,
-  modelValue: 0,
   vertical: false,
   marks: {}
-};
-var startValue;
-var currentValue;
+});
 var Range = function Range2(props) {
-  var _useConfig = useConfig(), locale = _useConfig.locale;
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), className = _defaultProps$props.className, range = _defaultProps$props.range, disabled = _defaultProps$props.disabled, activeColor = _defaultProps$props.activeColor, inactiveColor = _defaultProps$props.inactiveColor, buttonColor = _defaultProps$props.buttonColor, hiddenRange = _defaultProps$props.hiddenRange, hiddenTag = _defaultProps$props.hiddenTag, modelValue = _defaultProps$props.modelValue, button = _defaultProps$props.button, vertical = _defaultProps$props.vertical, marks = _defaultProps$props.marks, dragStart = _defaultProps$props.dragStart, dragEnd = _defaultProps$props.dragEnd, onChange = _defaultProps$props.onChange, onDragStart = _defaultProps$props.onDragStart, onDragEnd = _defaultProps$props.onDragEnd, minDesc = _defaultProps$props.minDesc, maxDesc = _defaultProps$props.maxDesc, curValueDesc = _defaultProps$props.curValueDesc;
-  var _defaultProps$props2 = _objectSpread(_objectSpread({}, defaultProps), props), min = _defaultProps$props2.min, max = _defaultProps$props2.max, step = _defaultProps$props2.step;
-  min = Number(min);
-  max = Number(max);
-  step = Number(step);
-  var _useState = useState(0), _useState2 = _slicedToArray(_useState, 2), buttonIndex = _useState2[0], SetButtonIndex = _useState2[1];
-  var _useState3 = useState(), _useState4 = _slicedToArray(_useState3, 2), initValue = _useState4[0], SetInitValue = _useState4[1];
-  var _useState5 = useState("start"), _useState6 = _slicedToArray(_useState5, 2), dragStatus = _useState6[0], SetDragStatus = _useState6[1];
+  var _classNames;
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), className = _defaultProps$props.className, range = _defaultProps$props.range, disabled = _defaultProps$props.disabled, button = _defaultProps$props.button, vertical = _defaultProps$props.vertical, marks = _defaultProps$props.marks, onChange = _defaultProps$props.onChange, onStart = _defaultProps$props.onStart, onEnd = _defaultProps$props.onEnd, minDescription = _defaultProps$props.minDescription, maxDescription = _defaultProps$props.maxDescription, currentDescription = _defaultProps$props.currentDescription, min = _defaultProps$props.min, max = _defaultProps$props.max, step = _defaultProps$props.step, value = _defaultProps$props.value, defaultValue = _defaultProps$props.defaultValue;
+  var classPrefix = "nut-range";
+  var _useState = useState(0), _useState2 = _slicedToArray(_useState, 2), buttonIndex = _useState2[0], setButtonIndex = _useState2[1];
+  var _useState3 = useState("start"), _useState4 = _slicedToArray(_useState3, 2), dragStatus = _useState4[0], setDragStatus = _useState4[1];
   var touch = useTouch();
   var root = useRef(null);
-  var _useState7 = useState([]), _useState8 = _slicedToArray(_useState7, 2), marksList = _useState8[0], SetMarksList = _useState8[1];
-  useEffect(function() {
-    if (typeof modelValue === "number") {
-      if (!range && (modelValue < min || modelValue > max)) {
-        SetInitValue(0);
-        Toast.text("".concat(modelValue, " ").concat(locale.range.rangeText));
-        return;
-      }
-      SetInitValue(modelValue);
-    }
-  }, [modelValue]);
+  var _useState5 = useState([]), _useState6 = _slicedToArray(_useState5, 2), marksList = _useState6[0], setMarksList = _useState6[1];
+  var _useState7 = useState(0), _useState8 = _slicedToArray(_useState7, 2), startValue = _useState8[0], setStartValue = _useState8[1];
+  var handleChange = function handleChange2(value2) {
+    onChange && onChange(value2);
+  };
+  var _usePropsValue = usePropsValue({
+    value,
+    defaultValue,
+    finalValue: 0,
+    onChange: handleChange
+  }), _usePropsValue2 = _slicedToArray(_usePropsValue, 2), current = _usePropsValue2[0], setCurrent = _usePropsValue2[1];
+  var _useState9 = useState(function() {
+    return value || defaultValue || 0;
+  }), _useState10 = _slicedToArray(_useState9, 2), exactValue = _useState10[0], setEaxctValue = _useState10[1];
   useEffect(function() {
     if (marks) {
       var marksKeys = Object.keys(marks);
@@ -70,64 +65,41 @@ var Range = function Range2(props) {
       }).filter(function(point) {
         return point >= min && point <= max;
       });
-      SetMarksList(list);
+      setMarksList(list);
     }
   }, [marks]);
   var scope = function scope2() {
-    return Number(max) - Number(min);
+    return max - min;
   };
-  var classes = useCallback(function() {
-    var prefixCls = "nut-range";
-    return [prefixCls, "".concat(disabled ? "".concat(prefixCls, "-disabled") : ""), "".concat(vertical ? "".concat(prefixCls, "-vertical") : ""), "".concat(!hiddenRange ? "".concat(prefixCls, "-show-number") : "")].filter(Boolean).join(" ");
-  }, [disabled, vertical, hiddenRange]);
-  var containerClasses = useCallback(function() {
-    var prefixCls = "nut-range-container";
-    return [prefixCls, "".concat(vertical ? "".concat(prefixCls, "-vertical") : ""), className].filter(Boolean).join(" ");
-  }, [vertical, className]);
+  var classes = classNames(classPrefix, (_classNames = {}, _defineProperty(_classNames, "".concat(classPrefix, "-disabled"), disabled), _defineProperty(_classNames, "".concat(classPrefix, "-vertical"), vertical), _classNames));
+  var containerClasses = classNames("".concat(classPrefix, "-container"), className, _defineProperty({}, "".concat(classPrefix, "-container-vertical"), vertical));
   var markClassName = useCallback(function(mark) {
-    var classPrefix = "nut-range-mark";
-    var lowerBound = Number(min);
-    var upperBound = Number(max);
-    if (range) {
-      var _modelValue = _slicedToArray(modelValue, 2), left = _modelValue[0], right = _modelValue[1];
-      lowerBound = left;
-      upperBound = right;
+    var classPrefix2 = "nut-range-mark";
+    var lowerBound = min;
+    var upperBound = max;
+    if (range && Array.isArray(current)) {
+      lowerBound = current[0];
+      upperBound = current[1];
     } else {
-      upperBound = modelValue;
+      upperBound = current;
     }
     var isActive = mark <= upperBound && mark >= lowerBound;
-    return ["".concat(classPrefix, "-text"), "".concat(isActive ? "".concat(classPrefix, "-text-active") : "")].filter(Boolean).join(" ");
-  }, [range, modelValue, min, max]);
-  var _useState9 = useState(classes()), _useState10 = _slicedToArray(_useState9, 2), rangeName = _useState10[0], setRangeName = _useState10[1];
-  var _useState11 = useState(containerClasses()), _useState12 = _slicedToArray(_useState11, 2), containerName = _useState12[0], setContainerName = _useState12[1];
-  useEffect(function() {
-    setRangeName(classes());
-    setContainerName(containerClasses());
-  }, [classes, containerClasses]);
-  var wrapperStyle = function wrapperStyle2() {
-    return {
-      background: inactiveColor
-    };
-  };
-  var buttonStyle = function buttonStyle2() {
-    return {
-      borderColor: buttonColor
-    };
-  };
+    return ["".concat(classPrefix2, "-text"), "".concat(isActive ? "".concat(classPrefix2, "-text-active") : "")].join(" ");
+  }, [range, current, min, max]);
   var isRange = function isRange2(val) {
     return !!range && Array.isArray(val);
   };
   var calcMainAxis = function calcMainAxis2() {
-    var modelVal = initValue || initValue === 0 ? initValue : modelValue;
+    var modelVal = current;
     if (isRange(modelVal)) {
       return "".concat((modelVal[1] - modelVal[0]) * 100 / scope(), "%");
     }
-    return "".concat((modelVal - Number(min)) * 100 / scope(), "%");
+    return "".concat((modelVal - min) * 100 / scope(), "%");
   };
   var calcOffset = function calcOffset2() {
-    var modelVal = initValue || initValue === 0 ? initValue : modelValue;
+    var modelVal = current;
     if (isRange(modelVal)) {
-      return "".concat((modelVal[0] - Number(min)) * 100 / scope(), "%");
+      return "".concat((modelVal[0] - min) * 100 / scope(), "%");
     }
     return "0%";
   };
@@ -136,74 +108,61 @@ var Range = function Range2(props) {
       return {
         height: calcMainAxis(),
         top: calcOffset(),
-        background: activeColor,
         transition: dragStatus ? "none" : void 0
       };
     }
     return {
       width: calcMainAxis(),
       left: calcOffset(),
-      background: activeColor,
       transition: dragStatus ? "none" : void 0
     };
   };
   var marksStyle = function marksStyle2(mark) {
     var style = {
-      left: "".concat((mark - Number(min)) / scope() * 100, "%")
+      left: "".concat((mark - min) / scope() * 100, "%")
     };
     if (vertical) {
       style = {
-        top: "".concat((mark - Number(min)) / scope() * 100, "%")
+        top: "".concat((mark - min) / scope() * 100, "%")
       };
     }
     return style;
   };
-  var tickStyle = function tickStyle2(mark) {
-    var lowerBound = Number(min);
-    var upperBound = Number(max);
-    if (range) {
-      var _modelValue2 = _slicedToArray(modelValue, 2), left = _modelValue2[0], right = _modelValue2[1];
-      lowerBound = left;
-      upperBound = right;
+  var tickClass = function tickClass2(mark) {
+    if (range && Array.isArray(current)) {
+      return mark <= current[1] && mark >= current[0];
     }
-    var isActive = mark <= upperBound && mark >= lowerBound;
-    var style = {
-      background: !isActive ? inactiveColor : activeColor
-    };
-    return style;
+    return mark <= current;
   };
-  var format = function format2(value) {
-    value = Math.max(+min, Math.min(value, +max));
-    return Math.round(value / +step) * +step;
+  var format = function format2(value2) {
+    value2 = Math.max(+min, Math.min(value2, +max));
+    return Math.round(value2 / +step) * +step;
   };
   var isSameValue = function isSameValue2(newValue, oldValue) {
     return JSON.stringify(newValue) === JSON.stringify(oldValue);
   };
-  var handleOverlap = function handleOverlap2(value) {
-    if (value[0] > value[1]) {
-      return value.slice(0).reverse();
+  var handleOverlap = function handleOverlap2(value2) {
+    if (value2[0] > value2[1]) {
+      return value2.slice(0).reverse();
     }
-    return value;
+    return value2;
   };
-  var updateValue = function updateValue2(value, end) {
-    if (isRange(value)) {
-      value = handleOverlap(value).map(format);
+  var updateValue = function updateValue2(value2, end) {
+    if (isRange(value2)) {
+      value2 = handleOverlap(value2).map(format);
     } else {
-      value = format(value);
-    }
-    var modelVal = initValue || initValue === 0 ? initValue : modelValue;
-    if (!isSameValue(value, modelVal)) {
-      SetInitValue(value);
+      value2 = format(value2);
     }
-    if ((marks || end) && !isSameValue(value, startValue)) {
-      onChange && onChange(value);
+    if (!isSameValue(value2, current)) {
+      setCurrent(value2);
     }
+    end && onEnd && onEnd(value2);
   };
   var click = function click2(event) {
     if (disabled || !root.current) {
       return;
     }
-    SetDragStatus("");
+    setDragStatus("");
     var rect = getRect(root.current);
     var delta = event.clientX - rect.left;
     var total = rect.width;
@@ -211,18 +170,18 @@ var Range = function Range2(props) {
       delta = event.clientY - rect.top;
       total = rect.height;
     }
-    var value = Number(min) + delta / total * scope();
-    currentValue = initValue || initValue === 0 ? initValue : modelValue;
-    if (isRange(currentValue)) {
-      var _currentValue = currentValue, _currentValue2 = _slicedToArray(_currentValue, 2), left = _currentValue2[0], right = _currentValue2[1];
+    var value2 = min + delta / total * scope();
+    setEaxctValue(current);
+    if (isRange(current)) {
+      var _current = _slicedToArray(current, 2), left = _current[0], right = _current[1];
       var middle = (left + right) / 2;
-      if (value <= middle) {
-        updateValue([value, right], true);
+      if (value2 <= middle) {
+        updateValue([value2, right], true);
       } else {
-        updateValue([left, value], true);
+        updateValue([left, value2], true);
       }
     } else {
-      updateValue(value, true);
+      updateValue(value2, true);
     }
   };
   var _onTouchStart = function onTouchStart(event) {
@@ -230,24 +189,24 @@ var Range = function Range2(props) {
       return;
     }
     touch.start(event);
-    currentValue = initValue || initValue === 0 ? initValue : modelValue;
-    if (isRange(currentValue)) {
-      startValue = currentValue.map(format);
+    setEaxctValue(current);
+    if (isRange(current)) {
+      setStartValue(current.map(format));
     } else {
-      startValue = format(currentValue);
+      setStartValue(format(current));
     }
-    SetDragStatus("start");
+    setDragStatus("start");
   };
   var _onTouchMove = function onTouchMove(event) {
+    event.stopPropagation();
     if (disabled || !root.current) {
       return;
     }
     if (dragStatus === "start") {
-      dragStart && dragStart();
-      onDragStart && onDragStart();
+      onStart && onStart();
     }
     touch.move(event);
-    SetDragStatus("draging");
+    setDragStatus("draging");
     var rect = getRect(root.current);
     var delta = touch.deltaX;
     var total = rect.width;
@@ -257,41 +216,48 @@ var Range = function Range2(props) {
       total = rect.height;
       diff = delta / total * scope();
     }
+    var newValue;
     if (isRange(startValue)) {
-      currentValue[buttonIndex] = startValue[buttonIndex] + diff;
+      newValue = exactValue.slice();
+      newValue[buttonIndex] = startValue[buttonIndex] + diff;
     } else {
-      currentValue = startValue + diff;
+      newValue = startValue + diff;
     }
-    updateValue(currentValue);
+    setEaxctValue(newValue);
+    updateValue(newValue);
   };
   var _onTouchEnd = function onTouchEnd(event) {
     if (disabled) {
       return;
     }
     if (dragStatus === "draging") {
-      updateValue(currentValue, true);
-      dragEnd && dragEnd();
-      onDragEnd && onDragEnd();
+      updateValue(current, true);
     }
-    SetDragStatus("");
+    setDragStatus("");
   };
   var curValue = function curValue2(idx) {
-    var modelVal = initValue || initValue === 0 ? initValue : modelValue;
-    var value = typeof idx === "number" ? modelVal[idx] : modelVal;
-    return value;
+    var modelVal = current;
+    var value2 = typeof idx === "number" ? modelVal[idx] : modelVal;
+    return value2;
+  };
+  var renderButton = function renderButton2(index) {
+    return React__default.createElement(React__default.Fragment, null, button || React__default.createElement("div", {
+      className: "nut-range-button"
+    }, currentDescription !== null && React__default.createElement("div", {
+      className: "number"
+    }, currentDescription ? currentDescription(curValue(index)) : curValue(index))));
   };
   return React__default.createElement("div", {
-    className: "".concat(containerName)
-  }, !hiddenRange ? React__default.createElement("div", {
+    className: containerClasses
+  }, minDescription !== null && React__default.createElement("div", {
     className: "min"
-  }, minDesc || +min) : null, React__default.createElement("div", {
+  }, minDescription || min), React__default.createElement("div", {
     ref: root,
-    style: wrapperStyle(),
-    className: "".concat(rangeName),
+    className: classes,
     onClick: function onClick(e) {
-      click(e);
+      return click(e);
     }
-  }, marksList.length > 0 ? React__default.createElement("div", {
+  }, marksList.length > 0 && React__default.createElement("div", {
     className: "nut-range-mark"
   }, marksList.map(function(marks2) {
     return React__default.createElement("span", {
@@ -299,77 +265,56 @@ var Range = function Range2(props) {
       className: markClassName(marks2),
       style: marksStyle(marks2)
     }, marks2, React__default.createElement("span", {
-      className: "nut-range-tick",
-      style: tickStyle(marks2)
+      className: classNames("nut-range-tick", {
+        active: tickClass(marks2)
+      })
     }));
-  })) : null, React__default.createElement("div", {
+  })), React__default.createElement("div", {
     className: "nut-range-bar",
     style: barStyle()
   }, range ? [0, 1].map(function(item, index) {
     return React__default.createElement("div", {
-      role: "slider",
       key: index,
       className: "".concat(index === 0 ? "nut-range-button-wrapper-left" : "", "\n                  ").concat(index === 1 ? "nut-range-button-wrapper-right" : ""),
-      tabIndex: disabled ? -1 : 0,
-      "aria-valuemin": +min,
-      "aria-valuenow": curValue(index),
-      "aria-valuemax": +max,
-      "aria-orientation": vertical ? "vertical" : "horizontal",
       onTouchStart: function onTouchStart(e) {
         if (typeof index === "number") {
-          SetButtonIndex(index);
+          setButtonIndex(index);
         }
         _onTouchStart(e);
       },
       onTouchMove: function onTouchMove(e) {
-        _onTouchMove(e);
+        return _onTouchMove(e);
       },
       onTouchEnd: function onTouchEnd(e) {
-        _onTouchEnd();
+        return _onTouchEnd();
       },
       onTouchCancel: function onTouchCancel(e) {
-        _onTouchEnd();
+        return _onTouchEnd();
       },
       onClick: function onClick(e) {
-        e.stopPropagation();
+        return e.stopPropagation();
       }
-    }, button || React__default.createElement("div", {
-      className: "nut-range-button",
-      style: buttonStyle()
-    }, !hiddenTag ? React__default.createElement("div", {
-      className: "number"
-    }, curValueDesc || curValue(index)) : null));
+    }, renderButton(index));
   }) : React__default.createElement("div", {
-    role: "slider",
     className: "nut-range-button-wrapper",
-    tabIndex: disabled ? -1 : 0,
-    "aria-valuemin": +min,
-    "aria-valuenow": curValue(),
-    "aria-valuemax": +max,
-    "aria-orientation": vertical ? "vertical" : "horizontal",
     onTouchStart: function onTouchStart(e) {
-      _onTouchStart(e);
+      return _onTouchStart(e);
     },
     onTouchMove: function onTouchMove(e) {
-      _onTouchMove(e);
+      return _onTouchMove(e);
     },
     onTouchEnd: function onTouchEnd(e) {
-      _onTouchEnd();
+      return _onTouchEnd();
     },
     onTouchCancel: function onTouchCancel(e) {
-      _onTouchEnd();
+      return _onTouchEnd();
     },
     onClick: function onClick(e) {
-      e.stopPropagation();
+      return e.stopPropagation();
     }
-  }, button || React__default.createElement("div", {
-    className: "nut-range-button",
-    style: buttonStyle()
-  }, !hiddenTag ? React__default.createElement("div", {
-    className: "number"
-  }, curValueDesc || curValue()) : null)))), !hiddenRange ? React__default.createElement("div", {
+  }, renderButton()))), maxDescription !== null && React__default.createElement("div", {
     className: "max"
-  }, maxDesc || +max) : null);
+  }, maxDescription || max));
 };
 Range.defaultProps = defaultProps;
 Range.displayName = "NutRange";