@nutui/nutui-react 1.2.1-beta.1 → 1.2.2-beta.1

package/dist/esm/Progress.js

@@ -0,0 +1,130 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["className", "style", "isShowPercentage", "percentage", "fillColor", "strokeColor", "strokeWidth", "size", "textColor", "textWidth", "showText", "textInside", "textBackground", "textType", "status", "iconName", "iconColor", "iconSize", "rounded", "children"];
+
+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 from 'react';
+import classNames from 'classnames';
+import { I as Icon } from './icon-62bd7379.js';
+import { c as cn } from './bem-893ad28d.js';
+import '@bem-react/classname';
+var defaultProps = {
+  className: '',
+  style: {},
+  isShowPercentage: true,
+  percentage: 0,
+  fillColor: '#f3f3f3',
+  strokeColor: 'linear-gradient(135deg, #fa2c19 0%, #fa6419 100%)',
+  strokeWidth: '',
+  textColor: '',
+  textWidth: '',
+  showText: true,
+  textInside: false,
+  textBackground: 'linear-gradient(135deg, #fa2c19 0%, #fa6419 100%)',
+  textType: 'text',
+  status: false,
+  iconName: 'checked',
+  iconColor: '#439422',
+  iconSize: '16px',
+  rounded: true,
+  children: undefined
+};
+
+var Progress = function Progress(props) {
+  var _classNames, _classNames2, _classNames4;
+
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
+      className = _defaultProps$props.className,
+      style = _defaultProps$props.style,
+      isShowPercentage = _defaultProps$props.isShowPercentage,
+      percentage = _defaultProps$props.percentage,
+      fillColor = _defaultProps$props.fillColor,
+      strokeColor = _defaultProps$props.strokeColor,
+      strokeWidth = _defaultProps$props.strokeWidth,
+      size = _defaultProps$props.size,
+      textColor = _defaultProps$props.textColor,
+      textWidth = _defaultProps$props.textWidth,
+      showText = _defaultProps$props.showText,
+      textInside = _defaultProps$props.textInside,
+      textBackground = _defaultProps$props.textBackground,
+      textType = _defaultProps$props.textType,
+      status = _defaultProps$props.status,
+      iconName = _defaultProps$props.iconName,
+      iconColor = _defaultProps$props.iconColor,
+      iconSize = _defaultProps$props.iconSize,
+      rounded = _defaultProps$props.rounded,
+      children = _defaultProps$props.children,
+      rest = _objectWithoutProperties(_defaultProps$props, _excluded);
+
+  var b = cn('progress');
+  var classes = classNames(b(''));
+  var classesOuter = classNames((_classNames = {}, _defineProperty(_classNames, "".concat(b(''), "-outer"), true), _defineProperty(_classNames, "".concat(b(''), "-").concat(size || 'base'), true), _classNames));
+  var classesInner = classNames((_classNames2 = {}, _defineProperty(_classNames2, "".concat(b(''), "-inner"), true), _defineProperty(_classNames2, "".concat(b(''), "-active"), status), _classNames2));
+  var classesText = classNames(_defineProperty({}, "".concat(b(''), "-text"), true));
+  var classesInsideText = classNames((_classNames4 = {}, _defineProperty(_classNames4, "".concat(b(''), "-text"), true), _defineProperty(_classNames4, "".concat(b(''), "-insidetext"), true), _classNames4));
+  var classesTextInner = classNames(_defineProperty({}, "".concat(b(''), "-text__inner"), true));
+  var stylesOuter = {
+    height: "".concat(strokeWidth, "px"),
+    // eslint-disable-next-line no-nested-ternary
+    borderRadius: "".concat(rounded ? rounded === true ? '12px' : rounded : 0),
+    background: "".concat(fillColor)
+  };
+  var stylesInner = {
+    width: "".concat(percentage, "%"),
+    // eslint-disable-next-line no-nested-ternary
+    borderRadius: "".concat(rounded ? rounded === true ? '12px' : rounded : 0),
+    background: "".concat(strokeColor)
+  };
+  var stylesInsideText = {
+    width: "".concat(textWidth, "px"),
+    left: "".concat(percentage, "%"),
+    background: textBackground || strokeColor
+  };
+  var stylesInsideIcon = {
+    width: "".concat(textWidth, "px"),
+    left: "".concat(percentage, "%")
+  };
+  var stylesText = {
+    width: "".concat(textWidth, "px")
+  };
+  return React__default.createElement("div", _objectSpread({
+    className: "".concat(classes, " ").concat(className),
+    style: style
+  }, rest), React__default.createElement("div", {
+    className: classesOuter,
+    style: stylesOuter
+  }, React__default.createElement("div", {
+    className: classesInner,
+    style: stylesInner
+  }, showText && textInside && React__default.createElement(React__default.Fragment, null, children ? React__default.createElement("div", {
+    className: classesInsideText,
+    style: stylesInsideIcon
+  }, children) : React__default.createElement("div", {
+    className: classesInsideText,
+    style: stylesInsideText
+  }, React__default.createElement("span", {
+    className: classesTextInner,
+    style: {
+      color: textColor || '#fff'
+    }
+  }, percentage, isShowPercentage ? '%' : ''))))), showText && !textInside && React__default.createElement("div", {
+    className: classesText,
+    style: stylesText
+  }, textType === 'text' && React__default.createElement("span", {
+    className: classesTextInner,
+    style: {
+      color: textColor || '#333'
+    }
+  }, percentage, isShowPercentage ? '%' : ''), textType === 'icon' && React__default.createElement(Icon, {
+    size: iconSize,
+    name: iconName,
+    color: iconColor
+  })));
+};
+
+Progress.defaultProps = defaultProps;
+Progress.displayName = 'NutProgress';
+export { Progress as default };

package/dist/esm/Range.js

@@ -1,116 +1,14 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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 } from 'react';
-import { c as cn } from './bem-893ad28d.js';
+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';
-import '@bem-react/classname';
-var MIN_DISTANCE = 10;
-
-function getDirection(x, y) {
-  if (x > y && x > MIN_DISTANCE) {
-    return 'horizontal';
-  }
-
-  if (y > x && y > MIN_DISTANCE) {
-    return 'vertical';
-  }
-
-  return '';
-}
-
-function useTouch() {
-  var _useState = useState(0),
-      _useState2 = _slicedToArray(_useState, 2),
-      startX = _useState2[0],
-      SetStartX = _useState2[1];
-
-  var _useState3 = useState(0),
-      _useState4 = _slicedToArray(_useState3, 2),
-      startY = _useState4[0],
-      SetStartY = _useState4[1];
-
-  var _useState5 = useState(0),
-      _useState6 = _slicedToArray(_useState5, 2),
-      deltaX = _useState6[0],
-      SetDeltaX = _useState6[1];
-
-  var _useState7 = useState(0),
-      _useState8 = _slicedToArray(_useState7, 2),
-      deltaY = _useState8[0],
-      SetDeltaY = _useState8[1];
-
-  var _useState9 = useState(0),
-      _useState10 = _slicedToArray(_useState9, 2),
-      offsetX = _useState10[0],
-      SetOffsetX = _useState10[1];
-
-  var _useState11 = useState(0),
-      _useState12 = _slicedToArray(_useState11, 2),
-      offsetY = _useState12[0],
-      SetOffsetY = _useState12[1];
-
-  var _useState13 = useState(''),
-      _useState14 = _slicedToArray(_useState13, 2),
-      direction = _useState14[0],
-      SetDirection = _useState14[1];
-
-  var isVertical = function isVertical() {
-    return direction === 'vertical';
-  };
-
-  var isHorizontal = function isHorizontal() {
-    return direction === 'horizontal';
-  };
-
-  var reset = function reset() {
-    SetDeltaX(0);
-    SetDeltaY(0);
-    SetOffsetX(0);
-    SetOffsetY(0);
-    SetDirection('');
-  };
-
-  var start = function start(event) {
-    reset();
-    SetStartX(event.touches[0].clientX);
-    SetStartY(event.touches[0].clientY);
-  };
-
-  var move = function move(event) {
-    var touch = event.touches[0];
-    var dX = touch.clientX - startX;
-    var dY = touch.clientY - startY;
-    SetDeltaX(dX);
-    SetDeltaY(dY);
-    SetOffsetX(Math.abs(dX));
-    SetOffsetY(Math.abs(dY));
-
-    if (!direction) {
-      SetDirection(getDirection(Math.abs(dX), Math.abs(dY)));
-    }
-  };
-
-  return {
-    move: move,
-    start: start,
-    reset: reset,
-    startX: startX,
-    startY: startY,
-    deltaX: deltaX,
-    deltaY: deltaY,
-    offsetX: offsetX,
-    offsetY: offsetY,
-    direction: direction,
-    isVertical: isVertical,
-    isHorizontal: isHorizontal
-  };
-}
 /**
   获取元素的大小及其相对于视口的位置，等价于 Element.getBoundingClientRect。
   width 宽度	number
@@ -121,12 +19,11 @@ function useTouch() {
   bottom	底部与视图窗口左上角的距离	number
  */
 
-
 function isWindow(val) {
   return val === window;
 }
 
-var useRect = function useRect(elementRef) {
+var getRect = function getRect(elementRef) {
   var element = elementRef;
 
   if (isWindow(element)) {
@@ -163,7 +60,9 @@ var defaultProps = {
   min: 0,
   max: 100,
   step: 1,
-  modelValue: 0
+  modelValue: 0,
+  vertical: false,
+  marks: {}
 };
 var startValue;
 var currentValue;
@@ -186,28 +85,35 @@ var Range = function Range(props) {
       step = _defaultProps$props.step,
       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 _useState15 = useState(0),
-      _useState16 = _slicedToArray(_useState15, 2),
-      buttonIndex = _useState16[0],
-      SetButtonIndex = _useState16[1];
+  var _useState = useState(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      buttonIndex = _useState2[0],
+      SetButtonIndex = _useState2[1];
 
-  var _useState17 = useState(),
-      _useState18 = _slicedToArray(_useState17, 2),
-      initValue = _useState18[0],
-      SetInitValue = _useState18[1];
+  var _useState3 = useState(),
+      _useState4 = _slicedToArray(_useState3, 2),
+      initValue = _useState4[0],
+      SetInitValue = _useState4[1];
 
-  var _useState19 = useState('start'),
-      _useState20 = _slicedToArray(_useState19, 2),
-      dragStatus = _useState20[0],
-      SetDragStatus = _useState20[1];
+  var _useState5 = useState('start'),
+      _useState6 = _slicedToArray(_useState5, 2),
+      dragStatus = _useState6[0],
+      SetDragStatus = _useState6[1];
 
   var touch = useTouch();
   var root = useRef(null);
-  var rangeBem = cn('range');
+
+  var _useState7 = useState([]),
+      _useState8 = _slicedToArray(_useState7, 2),
+      marksList = _useState8[0],
+      SetMarksList = _useState8[1];
+
   useEffect(function () {
     if (modelValue) {
       if (!range && (modelValue < min || modelValue > max)) {
@@ -219,11 +125,65 @@ var Range = function Range(props) {
       SetInitValue(modelValue);
     }
   }, [modelValue]);
+  useEffect(function () {
+    if (marks) {
+      var marksKeys = Object.keys(marks);
+      var list = marksKeys.map(parseFloat).sort(function (a, b) {
+        return a - b;
+      }).filter(function (point) {
+        return point >= min && point <= max;
+      });
+      SetMarksList(list);
+    }
+  }, [marks]);
 
   var scope = function scope() {
     return Number(max) - Number(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;
+    } else {
+      upperBound = modelValue;
+    }
+
+    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
@@ -261,6 +221,15 @@ var Range = function Range(props) {
   };
 
   var barStyle = function barStyle() {
+    if (vertical) {
+      return {
+        height: calcMainAxis(),
+        top: calcOffset(),
+        background: activeColor,
+        transition: dragStatus ? 'none' : undefined
+      };
+    }
+
     return {
       width: calcMainAxis(),
       left: calcOffset(),
@@ -269,6 +238,40 @@ var Range = function Range(props) {
     };
   };
 
+  var marksStyle = function marksStyle(mark) {
+    var style = {
+      left: "".concat((mark - Number(min)) / scope() * 100, "%")
+    };
+
+    if (vertical) {
+      style = {
+        top: "".concat((mark - Number(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 isActive = mark <= upperBound && mark >= lowerBound;
+    var style = {
+      background: !isActive ? inactiveColor : activeColor
+    };
+    return style;
+  };
+
   var format = function format(value) {
     value = Math.max(+min, Math.min(value, +max));
     return Math.round(value / +step) * +step;
@@ -299,11 +302,47 @@ var Range = function Range(props) {
       SetInitValue(value);
     }
 
-    if (end && !isSameValue(value, startValue)) {
+    if ((marks || end) && !isSameValue(value, startValue)) {
       change && change(value);
     }
   };
 
+  var click = function click(event) {
+    if (disabled || !root.current) {
+      return;
+    }
+
+    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 middle = (left + right) / 2;
+
+      if (value <= middle) {
+        updateValue([value, right], true);
+      } else {
+        updateValue([left, value], true);
+      }
+    } else {
+      updateValue(value, true);
+    }
+  };
+
   var _onTouchStart = function onTouchStart(event) {
     if (disabled) {
       return;
@@ -332,11 +371,17 @@ var Range = function Range(props) {
 
     touch.move(event);
     SetDragStatus('draging');
-    var rect = useRect(root.current);
+    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();
+    }
+
     if (isRange(startValue)) {
       currentValue[buttonIndex] = startValue[buttonIndex] + diff;
     } else {
@@ -366,29 +411,41 @@ var Range = function Range(props) {
   };
 
   return React__default.createElement("div", {
-    className: "nut-range-container ".concat(className || '')
+    className: "".concat(containerName)
   }, !hiddenRange ? React__default.createElement("div", {
     className: "min"
   }, +min) : null, React__default.createElement("div", {
     ref: root,
     style: wrapperStyle(),
-    className: "".concat(rangeBem(), " ").concat(disabled ? rangeBem('disabled') : '', " ").concat(!hiddenRange ? rangeBem('show-number') : '')
-  }, React__default.createElement("div", {
+    className: "".concat(rangeName),
+    onClick: function onClick(e) {
+      click(e);
+    }
+  }, marksList.length > 0 ? React__default.createElement("div", {
+    className: "nut-range-mark"
+  }, marksList.map(function (marks) {
+    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)
+    }));
+  })) : null, 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' : ''),
+      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",
       onTouchStart: function onTouchStart(e) {
-        e.preventDefault;
-
         if (typeof index === 'number') {
           // 实时更新当前拖动的按钮索引
           SetButtonIndex(index);

package/dist/esm/SearchBar/style/index.js

@@ -0,0 +1,2 @@
+
+require('../../../packages/searchbar/searchbar.scss')