@nutui/nutui-react-taro 1.2.2-beta.0 → 1.3.1-beta.0

package/dist/esm/{range.taro-41ced357.js → range.taro-fe08c5f4.js}

@@ -1,70 +1,31 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 
 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 { u as useTouch } from './index-31152350.js';
-import { N as Notification } from './Notification-b09c89e8.js';
-import { u as useConfig } from './configprovider-18657611.js';
-/**
-  获取元素的大小及其相对于视口的位置，等价于 Element.getBoundingClientRect。
-  width 宽度	number
-  height 高度	number
-  top	顶部与视图窗口左上角的距离	number
-  left	左侧与视图窗口左上角的距离	number
-  right	右侧与视图窗口左上角的距离	number
-  bottom	底部与视图窗口左上角的距离	number
- */
-
-function isWindow(val) {
-  return val === window;
-}
-
-var useRect = function useRect(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
-    };
-  }
-
-  if (element && element.getBoundingClientRect) {
-    return element.getBoundingClientRect();
-  }
-
-  return {
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    width: 0,
-    height: 0
-  };
-};
-
+import React__default, { useState, useRef, useEffect, useCallback } from 'react';
+import { u as useTouch } from './useTouch-a2ea68c6.js';
+import { g as getRectByTaro } from './useClientRect-8b7cc406.js';
+import { N as Notification } from './Notification-422905bd.js';
+import { u as useConfig } from './configprovider-9c393a29.js';
 var messageInstance = null;
 var options = {
   msg: '',
   id: '',
+  style: {},
   duration: 1.5,
   center: true,
   type: 'text',
+  title: '',
   customClass: '',
-  bottom: 30,
+  bottom: '30px',
   size: 'base',
-  icon: '',
+  icon: null,
+  iconSize: '20',
   textAlignCenter: true,
   loadingRotate: true,
   bgColor: 'rgba(0, 0, 0, .8)',
@@ -175,7 +136,9 @@ var defaultProps = {
   min: 0,
   max: 100,
   step: 1,
-  modelValue: 0
+  modelValue: 0,
+  vertical: false,
+  marks: {}
 };
 var startValue;
 var currentValue;
@@ -193,15 +156,23 @@ var Range = function Range(props) {
       buttonColor = _defaultProps$props.buttonColor,
       hiddenRange = _defaultProps$props.hiddenRange,
       hiddenTag = _defaultProps$props.hiddenTag,
-      min = _defaultProps$props.min,
-      max = _defaultProps$props.max,
-      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 _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],
@@ -219,7 +190,12 @@ var Range = function Range(props) {
 
   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)) {
@@ -231,11 +207,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
@@ -273,6 +303,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(),
@@ -281,6 +320,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;
@@ -311,11 +384,70 @@ var Range = function Range(props) {
       SetInitValue(value);
     }
 
-    if (end && !isSameValue(value, startValue)) {
+    if ((marks || end) && !isSameValue(value, startValue)) {
       change && change(value);
     }
   };
 
+  var click = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(event) {
+      var rect, delta, total, value, _currentValue, _currentValue2, left, right, middle;
+
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              if (!(disabled || !root.current)) {
+                _context.next = 2;
+                break;
+              }
+
+              return _context.abrupt("return");
+
+            case 2:
+              SetDragStatus('');
+              _context.next = 5;
+              return getRectByTaro(root.current);
+
+            case 5:
+              rect = _context.sent;
+              delta = event.detail.x - rect.left;
+              total = rect.width;
+
+              if (vertical) {
+                delta = event.detail.y - rect.top;
+                total = rect.height;
+              }
+
+              value = Number(min) + delta / total * scope();
+              currentValue = initValue || initValue === 0 ? initValue : modelValue;
+
+              if (isRange(currentValue)) {
+                _currentValue = currentValue, _currentValue2 = _slicedToArray(_currentValue, 2), left = _currentValue2[0], right = _currentValue2[1];
+                middle = (left + right) / 2;
+
+                if (value <= middle) {
+                  updateValue([value, right], true);
+                } else {
+                  updateValue([left, value], true);
+                }
+              } else {
+                updateValue(value, true);
+              }
+
+            case 12:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function click(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+
   var _onTouchStart = function onTouchStart(event) {
     if (disabled) {
       return;
@@ -333,30 +465,62 @@ var Range = function Range(props) {
     SetDragStatus('start');
   };
 
-  var _onTouchMove = function onTouchMove(event) {
-    if (disabled || !root.current) {
-      return;
-    }
-
-    if (dragStatus === 'start') {
-      dragStart && dragStart();
-    }
-
-    touch.move(event);
-    SetDragStatus('draging');
-    var rect = useRect(root.current);
-    var delta = touch.deltaX;
-    var total = rect.width;
-    var diff = delta / total * scope();
-
-    if (isRange(startValue)) {
-      currentValue[buttonIndex] = startValue[buttonIndex] + diff;
-    } else {
-      currentValue = startValue + diff;
-    }
+  var _onTouchMove = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(event) {
+      var rect, delta, total, diff;
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              if (!(disabled || !root.current)) {
+                _context2.next = 2;
+                break;
+              }
+
+              return _context2.abrupt("return");
+
+            case 2:
+              if (dragStatus === 'start') {
+                dragStart && dragStart();
+              }
+
+              touch.move(event);
+              SetDragStatus('draging');
+              _context2.next = 7;
+              return getRectByTaro(root.current);
+
+            case 7:
+              rect = _context2.sent;
+              delta = touch.deltaX;
+              total = rect.width;
+              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 {
+                currentValue = startValue + diff;
+              }
+
+              updateValue(currentValue);
+
+            case 14:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    }));
 
-    updateValue(currentValue);
-  };
+    return function onTouchMove(_x2) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
 
   var _onTouchEnd = function onTouchEnd(event) {
     if (disabled) {
@@ -378,29 +542,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/{rate.taro-3d6edec3.js → rate.taro-a0b21714.js}

@@ -7,7 +7,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import React__default, { useState, useEffect } from 'react';
 import { c as cn } from './bem-893ad28d.js';
-import { I as Icon } from './icon-62bd7379.js';
+import { I as Icon } from './icon-8dc4de10.js';
 var defaultProps = {
   count: 5,
   modelValue: 0,
@@ -78,7 +78,11 @@ var Rate = function Rate(props) {
       value = index;
 
       if (allowHalf) {
-        if (e !== null && e !== void 0 && e.target.className.includes('__icon--half')) {
+        var _e$target, _e$target$className;
+
+        console.log('e', e);
+
+        if (e !== null && e !== void 0 && (_e$target = e.target) !== null && _e$target !== void 0 && (_e$target$className = _e$target.className) !== null && _e$target$className !== void 0 && _e$target$className.includes('__icon--half')) {
           value -= 0.5;
         }
       }

package/dist/esm/render-4a3856cb.js

@@ -0,0 +1,32 @@
+import * as ReactDOM from 'react-dom';
+var createRoot;
+
+try {
+  var mainVersion = Number((ReactDOM.version || '').split('.')[0]);
+
+  if (mainVersion >= 18 && ReactDOM.createRoot) {
+    createRoot = ReactDOM.createRoot;
+  }
+} catch (e) {
+  console.log(e);
+}
+
+function legacyRender(node, container) {
+  ReactDOM.render(node, container);
+}
+
+function concurrentRender(node, container) {
+  var root = ReactDOM.createRoot(container);
+  root.render(node);
+}
+
+function render(node, container) {
+  if (createRoot) {
+    concurrentRender(node, container);
+    return;
+  }
+
+  legacyRender(node, container);
+}
+
+export { render as r };

package/dist/esm/{row.taro-7afb510a.js → row.taro-cec13a7e.js}

@@ -21,12 +21,15 @@ var Row = function Row(props) {
       justify = _defaultProps$props.justify,
       align = _defaultProps$props.align,
       wrap = _defaultProps$props.wrap,
-      gutter = _defaultProps$props.gutter;
+      gutter = _defaultProps$props.gutter,
+      _onClick = _defaultProps$props.onClick;
 
   var prefixCls = 'nut-row';
 
   var getClass = function getClass(prefix, type) {
-    return prefix ? type ? "nut-row-".concat(prefix, "-").concat(type) : '' : "nut-row-".concat(type);
+    var classType = type ? "nut-row-".concat(prefix, "-").concat(type) : '';
+    var className = prefix ? classType : "nut-row-".concat(type);
+    return className;
   };
 
   var getClasses = function getClasses() {
@@ -39,7 +42,10 @@ var Row = function Row(props) {
   return React__default.createElement(DataContext.Provider, {
     value: parentRow
   }, React__default.createElement('div', {
-    className: getClasses()
+    className: getClasses(),
+    onClick: function onClick(e) {
+      _onClick && _onClick(e, 'row');
+    }
   }, children));
 };
 

package/dist/esm/{searchbar.taro-b05ef5a8.js → searchbar.taro-450d2f88.js}

@@ -7,8 +7,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import React__default, { useRef, useState, useEffect } from 'react';
 import { c as cn } from './bem-893ad28d.js';
-import { u as useConfig } from './configprovider-18657611.js';
-import { I as Icon } from './icon-62bd7379.js';
+import { u as useConfig } from './configprovider-9c393a29.js';
+import { I as Icon } from './icon-8dc4de10.js';
 var defaultProps = {
   placeholder: '',
   shape: 'square',