@nutui/nutui-react 2.0.0-beta.0 → 2.0.0-beta.1

package/dist/esm/Range.js

@@ -1,515 +1,323 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-import React__default, { useState, useRef, useEffect, useCallback } from 'react';
-import { u as useTouch } from './useTouch-a2ea68c6.js';
-import Toast from './Toast.js';
-import { useConfig } from './ConfigProvider.js';
-/**
-  获取元素的大小及其相对于视口的位置，等价于 Element.getBoundingClientRect。
-  width 宽度	number
-  height 高度	number
-  top	顶部与视图窗口左上角的距离	number
-  left	左侧与视图窗口左上角的距离	number
-  right	右侧与视图窗口左上角的距离	number
-  bottom	底部与视图窗口左上角的距离	number
- */
-
-function isWindow(val) {
-  return val === window;
-}
-
-var getRect = function getRect(elementRef) {
-  var element = elementRef;
-
-  if (isWindow(element)) {
-    var width = element.innerWidth;
-    var height = element.innerHeight;
-    return {
-      top: 0,
-      left: 0,
-      right: width,
-      bottom: height,
-      width: width,
-      height: height
-    };
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    enumerableOnly && (symbols = symbols.filter(function(sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
   }
-
-  if (element && element.getBoundingClientRect) {
-    return element.getBoundingClientRect();
+  return keys;
+}
+function _objectSpread(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = null != arguments[i] ? arguments[i] : {};
+    i % 2 ? ownKeys(Object(source), true).forEach(function(key) {
+      _defineProperty(target, key, source[key]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function(key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
   }
-
-  return {
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    width: 0,
-    height: 0
-  };
-};
-
-var defaultProps = {
+  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 { 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 Range(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,
-      change = _defaultProps$props.change,
-      dragStart = _defaultProps$props.dragStart,
-      dragEnd = _defaultProps$props.dragEnd;
-
-  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 Range = function Range2(props) {
+  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 (modelValue) {
-      if (!range && (modelValue < min || modelValue > max)) {
-        SetInitValue(0);
-        Toast.text("".concat(modelValue, " ").concat(locale.range.rangeText));
-        return;
-      }
-
-      SetInitValue(modelValue);
-    }
-  }, [modelValue]);
-  useEffect(function () {
+  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);
-      var list = marksKeys.map(parseFloat).sort(function (a, b) {
+      var list = marksKeys.map(parseFloat).sort(function(a, b) {
         return a - b;
-      }).filter(function (point) {
+      }).filter(function(point) {
         return point >= min && point <= max;
       });
-      SetMarksList(list);
+      setMarksList(list);
     }
   }, [marks]);
-
-  var scope = function scope() {
-    return Number(max) - Number(min);
+  var scope = function scope2() {
+    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 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 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 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 wrapperStyle() {
-    return {
-      background: inactiveColor
-    };
-  };
-
-  var buttonStyle = function buttonStyle() {
-    return {
-      borderColor: buttonColor
-    };
-  };
-
-  var isRange = function isRange(val) {
+    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 calcMainAxis() {
-    var modelVal = initValue || initValue === 0 ? initValue : modelValue;
-
+  var calcMainAxis = function calcMainAxis2() {
+    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 calcOffset() {
-    var modelVal = initValue || initValue === 0 ? initValue : modelValue;
-
+  var calcOffset = function calcOffset2() {
+    var modelVal = current;
     if (isRange(modelVal)) {
-      return "".concat((modelVal[0] - Number(min)) * 100 / scope(), "%");
+      return "".concat((modelVal[0] - min) * 100 / scope(), "%");
     }
-
     return "0%";
   };
-
-  var barStyle = function barStyle() {
+  var barStyle = function barStyle2() {
     if (vertical) {
       return {
         height: calcMainAxis(),
         top: calcOffset(),
-        background: activeColor,
-        transition: dragStatus ? 'none' : undefined
+        transition: dragStatus ? "none" : void 0
       };
     }
-
     return {
       width: calcMainAxis(),
       left: calcOffset(),
-      background: activeColor,
-      transition: dragStatus ? 'none' : undefined
+      transition: dragStatus ? "none" : void 0
     };
   };
-
-  var marksStyle = function marksStyle(mark) {
+  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 tickStyle(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 format(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 isSameValue(newValue, oldValue) {
+  var isSameValue = function isSameValue2(newValue, oldValue) {
     return JSON.stringify(newValue) === JSON.stringify(oldValue);
   };
-
-  var handleOverlap = function handleOverlap(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 updateValue(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)) {
-      change && change(value);
+    if (!isSameValue(value2, current)) {
+      setCurrent(value2);
     }
+    end && onEnd && onEnd(value2);
   };
-
-  var click = function click(event) {
+  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;
-
     if (vertical) {
       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) {
     if (disabled) {
       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();
+    if (dragStatus === "start") {
+      onStart && onStart();
     }
-
     touch.move(event);
-    SetDragStatus('draging');
+    setDragStatus("draging");
     var rect = getRect(root.current);
     var delta = touch.deltaX;
     var total = rect.width;
     var diff = delta / total * scope();
-
     if (vertical) {
       delta = touch.deltaY;
       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();
+    if (dragStatus === "draging") {
+      updateValue(current, true);
     }
-
-    SetDragStatus('');
+    setDragStatus("");
+  };
+  var curValue = function curValue2(idx) {
+    var modelVal = current;
+    var value2 = typeof idx === "number" ? modelVal[idx] : modelVal;
+    return value2;
   };
-
-  var curValue = function curValue(idx) {
-    var modelVal = initValue || initValue === 0 ? initValue : modelValue;
-    var value = typeof idx === 'number' ? modelVal[idx] : modelVal;
-    return value;
+  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"
-  }, +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 (marks) {
+  }, marksList.map(function(marks2) {
     return React__default.createElement("span", {
-      key: marks,
-      className: markClassName(marks),
-      style: marksStyle(marks)
-    }, marks, React__default.createElement("span", {
-      className: "nut-range-tick",
-      style: tickStyle(marks)
+      key: marks2,
+      className: markClassName(marks2),
+      style: marksStyle(marks2)
+    }, marks2, React__default.createElement("span", {
+      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) {
+  }, 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": "horizontal",
+      className: "".concat(index === 0 ? "nut-range-button-wrapper-left" : "", "\n                  ").concat(index === 1 ? "nut-range-button-wrapper-right" : ""),
       onTouchStart: function onTouchStart(e) {
-        if (typeof index === 'number') {
-          // 实时更新当前拖动的按钮索引
-          SetButtonIndex(index);
+        if (typeof index === "number") {
+          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"
-    }, 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": "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"
-  }, curValue()) : null)))), !hiddenRange ? React__default.createElement("div", {
+  }, renderButton()))), maxDescription !== null && React__default.createElement("div", {
     className: "max"
-  }, +max) : null);
+  }, maxDescription || max));
 };
-
 Range.defaultProps = defaultProps;
-Range.displayName = 'NutRange';
-export { Range as default };
+Range.displayName = "NutRange";
+export {
+  Range as default
+};