@nutui/nutui-react 1.2.3-beta.4 → 1.3.1-beta.0

package/dist/esm/ImagePreview.js

@@ -0,0 +1,257 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+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, { useRef, useState, useEffect } from 'react';
+import Popup from './Popup.js';
+import Video from './Video.js';
+import Swiper from './Swiper.js';
+import SwiperItem from './SwiperItem.js';
+var defaultProps = {
+  images: [],
+  videos: [],
+  show: false,
+  autoplay: 3000,
+  initNo: 1,
+  contentClose: false,
+  paginationVisible: false,
+  paginationColor: '#fff',
+  onClose: function onClose() {}
+};
+
+var ImagePreview = function ImagePreview(props) {
+  var images = props.images,
+      videos = props.videos,
+      show = props.show,
+      initNo = props.initNo,
+      paginationColor = props.paginationColor,
+      paginationVisible = props.paginationVisible,
+      autoplay = props.autoplay,
+      contentClose = props.contentClose,
+      onClose = props.onClose;
+  var nutImagePreview = useRef(null);
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      showPop = _useState2[0],
+      setShowPop = _useState2[1];
+
+  var _useState3 = useState(1),
+      _useState4 = _slicedToArray(_useState3, 2),
+      active = _useState4[0],
+      setActive = _useState4[1];
+
+  var _useState5 = useState(1),
+      _useState6 = _slicedToArray(_useState5, 2),
+      maxNo = _useState6[0],
+      setMaxNo = _useState6[1];
+
+  var _useState7 = useState({
+    scale: 1,
+    moveable: false
+  }),
+      _useState8 = _slicedToArray(_useState7, 2),
+      store = _useState8[0],
+      setStore = _useState8[1];
+
+  var _useState9 = useState(0),
+      _useState10 = _slicedToArray(_useState9, 2),
+      lastTouchEndTime = _useState10[0],
+      setLastTouchEndTime = _useState10[1]; // 用来辅助监听双击
+
+
+  var onTouchStart = function onTouchStart(event) {
+    var touches = event.touches;
+    var events = touches[0];
+    var events2 = touches[1]; // 如果已经放大，双击应变回原尺寸；如果是原尺寸，双击应放大
+
+    var curTouchTime = new Date().getTime();
+
+    if (curTouchTime - lastTouchEndTime < 300) {
+      var _store = store;
+
+      if (_store.scale > 1) {
+        _store.scale = 1;
+      } else if (_store.scale === 1) {
+        _store.scale = 2;
+      }
+
+      scaleNow();
+    }
+
+    var store1 = store;
+    store1.moveable = true;
+
+    if (events2) {
+      // 如果开始两指操作，记录初始时刻两指间的距离
+      store1.oriDistance = getDistance({
+        x: events.pageX,
+        y: events.pageY
+      }, {
+        x: events2.pageX,
+        y: events2.pageY
+      });
+    } // 取到开始两指操作时的放大（缩小比例），store.scale 存储的是当前的放缩比（相对于标准大小 scale 为 1 的情况的放大缩小比）
+
+
+    store1.originScale = store1.scale || 1;
+  };
+
+  var onTouchMove = function onTouchMove(event) {
+    var touches = event.touches;
+    var events = touches[0];
+    var events2 = touches[1];
+
+    if (!store.moveable) {
+      return;
+    }
+
+    var store1 = store; // 双指移动
+
+    if (events2) {
+      // 获得当前两点间的距离
+      var curDistance = getDistance({
+        x: events.pageX,
+        y: events.pageY
+      }, {
+        x: events2.pageX,
+        y: events2.pageY
+      });
+      /** 此处计算倍数，距离放大（缩小） k 倍则 scale 也 扩大（缩小） k 倍。距离放大（缩小）倍数 = 结束时两点距离 除以 开始时两点距离
+       * 注意此处的 scale 变化是基于 store.scale 的。
+       * store.scale 是一个暂存值，比如第一次放大 2 倍，则 store.scale 为 2。
+       * 再次两指触碰的时候，store.originScale 就为 store.scale 的值，基于此时的 store.scale 继续放大缩小。 * */
+
+      var curScale = curDistance / store1.oriDistance;
+      store1.scale = store1.originScale * curScale; // 最大放大 3 倍，缩小后松手要弹回原比例
+
+      if (store1.scale > 3) {
+        store1.scale = 3;
+      }
+
+      scaleNow();
+    }
+  };
+
+  var onTouchEnd = function onTouchEnd() {
+    setLastTouchEndTime(new Date().getTime());
+    var store1 = store;
+    store1.moveable = false;
+
+    if (store1.scale < 1.1 && store1.scale > 1 || store1.scale < 1) {
+      store1.scale = 1;
+      scaleNow();
+    }
+  };
+
+  var init = function init() {
+    document.addEventListener('touchmove', onTouchMove);
+    document.addEventListener('touchend', onTouchEnd);
+    document.addEventListener('touchcancel', onTouchEnd);
+  };
+
+  useEffect(function () {
+    if (show !== undefined) {
+      setShowPop(show);
+      init();
+    }
+  }, [show]);
+  useEffect(function () {
+    if (initNo !== undefined) {
+      setActive(initNo);
+    }
+
+    if (show !== undefined) {
+      setShowPop(show);
+    }
+
+    if (images && videos) {
+      setMaxNo(images.length + videos.length);
+    }
+  }, []);
+
+  var scaleNow = function scaleNow() {
+    if (nutImagePreview.current) {
+      nutImagePreview.current.style.transform = "scale(".concat(store.scale, ")");
+    }
+  };
+
+  var onCloseInner = function onCloseInner() {
+    setShowPop(false);
+    setActive(1);
+    scaleNow();
+    onClose && onClose();
+    setStore(_objectSpread(_objectSpread({}, store), {}, {
+      scale: 1
+    }));
+  }; // 计算两个点的距离
+
+
+  var getDistance = function getDistance(first, second) {
+    // 计算两个点起始时刻的距离和终止时刻的距离，终止时刻距离变大了则放大，变小了则缩小
+    // 放大 k 倍则 scale 也 扩大 k 倍
+    return Math.hypot(Math.abs(second.x - first.x), Math.abs(second.y - first.y));
+  };
+
+  var slideChangeEnd = function slideChangeEnd(page) {
+    setActive(page + 1);
+  };
+
+  var closeOnImg = function closeOnImg() {
+    // 点击内容区域的图片是否可以关闭弹层（视频区域由于nut-video做了限制，无法关闭弹层）
+    if (contentClose) {
+      onCloseInner();
+    }
+  };
+
+  return React__default.createElement(Popup, {
+    visible: showPop,
+    popClass: "custom-pop",
+    style: {
+      width: '100%'
+    },
+    onClick: onCloseInner
+  }, React__default.createElement("div", {
+    className: "nut-imagepreview",
+    ref: nutImagePreview,
+    onClick: closeOnImg,
+    onTouchStart: onTouchStart
+  }, React__default.createElement(Swiper, {
+    autoPlay: autoplay,
+    className: "nut-imagepreview-swiper",
+    loop: true,
+    isPreventDefault: false,
+    style: {
+      display: showPop ? 'block' : 'none'
+    },
+    direction: "horizontal",
+    onChange: slideChangeEnd,
+    initPage: initNo && (initNo > maxNo ? maxNo - 1 : initNo - 1),
+    paginationColor: paginationColor,
+    paginationVisible: paginationVisible
+  }, videos && videos.length > 0 && videos.map(function (item, index) {
+    return React__default.createElement(SwiperItem, {
+      key: index
+    }, React__default.createElement(Video, {
+      source: item.source,
+      options: item.options
+    }));
+  }), images && images.length > 0 && images.map(function (item, index) {
+    return React__default.createElement(SwiperItem, {
+      key: index
+    }, React__default.createElement("img", {
+      src: item.src,
+      alt: "",
+      className: "nut-imagepreview-img"
+    }));
+  }))), React__default.createElement("div", {
+    className: "nut-imagepreview-index"
+  }, active, "/", (images ? images.length : 0) + (videos ? videos.length : 0)));
+};
+
+ImagePreview.defaultProps = defaultProps;
+ImagePreview.displayName = 'NutImagePreview';
+export { ImagePreview as default };

package/dist/esm/Input.js

@@ -181,7 +181,7 @@ var Input = function Input(props) {
     var trigger = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'onChange';
     var val = value;
 
-    if (type === 'digit') {
+    if (type === 'digit' || type === 'tel') {
       val = formatNumber(val, false, false);
     }
 
@@ -189,6 +189,12 @@ var Input = function Input(props) {
       val = formatNumber(val, true, true);
     }
 
+    if (type === 'tel' && !formatter) {
+      var regTel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
+      var regNumber = /[^-0-9]/g;
+      val = !regTel.test(val) && val.length > 11 ? val.substring(0, 11) : val.replace(regNumber, '');
+    }
+
     if (formatter && trigger === formatTrigger) {
       val = formatter(val);
     }
@@ -356,7 +362,7 @@ var Input = function Input(props) {
     className: "nut-input-clear",
     name: clearIcon,
     size: clearSize,
-    click: function click(e) {
+    onClick: function onClick(e) {
       handleClear(e);
     }
   }) : null, rightIcon && rightIcon.length > 0 ? React__default.createElement("div", {

package/dist/esm/InputNumber.js

@@ -89,16 +89,16 @@ var InputNumber = function InputNumber(props) {
   };
 
   var emitChange = function emitChange(value, e) {
-    var output_value = fixedDecimalPlaces(value);
-    change && change(output_value, e);
+    var outputValue = fixedDecimalPlaces(value);
+    change && change(outputValue, e);
 
     if (!isAsync) {
-      if (Number(output_value) < Number(min)) {
+      if (Number(outputValue) < Number(min)) {
         setInputValue(Number(min));
-      } else if (Number(output_value) > Number(max)) {
+      } else if (Number(outputValue) > Number(max)) {
         setInputValue(Number(max));
       } else {
-        setInputValue(output_value);
+        setInputValue(outputValue);
       }
     }
   };
@@ -107,8 +107,8 @@ var InputNumber = function InputNumber(props) {
     reduce && reduce(e);
 
     if (reduceAllow()) {
-      var output_value = Number(inputValue) - Number(step);
-      emitChange(output_value, e);
+      var outputValue = Number(inputValue) - Number(step);
+      emitChange(outputValue, e);
     } else {
       overlimit && overlimit(e);
     }
@@ -118,8 +118,8 @@ var InputNumber = function InputNumber(props) {
     add && add(e);
 
     if (addAllow()) {
-      var output_value = Number(inputValue) + Number(step);
-      emitChange(output_value, e);
+      var outputValue = Number(inputValue) + Number(step);
+      emitChange(outputValue, e);
     } else {
       overlimit && overlimit(e);
     }
@@ -167,7 +167,7 @@ var InputNumber = function InputNumber(props) {
     className: iconMinusClasses,
     size: buttonSize,
     name: "minus",
-    click: reduceNumber
+    onClick: reduceNumber
   }), React__default.createElement("input", {
     type: "number",
     min: min,
@@ -185,7 +185,7 @@ var InputNumber = function InputNumber(props) {
     className: iconAddClasses,
     size: buttonSize,
     name: "plus",
-    click: addNumber
+    onClick: addNumber
   }));
 };
 

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

@@ -0,0 +1,3 @@
+
+require('../../MenuItem/style')
+require('../../../packages/menu/menu.scss')

package/dist/esm/Menu.js

@@ -0,0 +1,153 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["className", "titleIcon", "scrollFixed", "lockScroll", "closeOnClickOverlay", "children", "activeColor"];
+
+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, { useRef, useEffect, useState } from 'react';
+import classNames from 'classnames';
+import Icon from './Icon.js';
+var defaultProps = {
+  className: '',
+  style: {},
+  activeColor: '#F2270C',
+  closeOnClickOverlay: true,
+  scrollFixed: false,
+  lockScroll: true,
+  titleIcon: ''
+};
+
+var Menu = function Menu(props) {
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
+      className = _defaultProps$props.className,
+      titleIcon = _defaultProps$props.titleIcon,
+      scrollFixed = _defaultProps$props.scrollFixed,
+      lockScroll = _defaultProps$props.lockScroll,
+      closeOnClickOverlay = _defaultProps$props.closeOnClickOverlay,
+      children = _defaultProps$props.children,
+      activeColor = _defaultProps$props.activeColor,
+      rest = _objectWithoutProperties(_defaultProps$props, _excluded);
+
+  var parentRef = useRef(null);
+
+  var onScroll = function onScroll() {};
+
+  useEffect(function () {
+    if (scrollFixed) {
+      window.addEventListener('scroll', onScroll);
+    }
+
+    return function () {
+      return window.removeEventListener('scroll', onScroll);
+    };
+  }, []);
+
+  var _useState = useState([]),
+      _useState2 = _slicedToArray(_useState, 2),
+      itemShow = _useState2[0],
+      setItemShow = _useState2[1];
+
+  var _useState3 = useState([]),
+      _useState4 = _slicedToArray(_useState3, 2),
+      itemTitle = _useState4[0],
+      setItemTitle = _useState4[1];
+
+  var toggleItemShow = function toggleItemShow(index) {
+    itemShow[index] = !itemShow[index];
+    var temp = itemShow.map(function (i, idx) {
+      return idx === index ? i : false;
+    });
+    setItemShow(_toConsumableArray(temp));
+  };
+
+  var hideItemShow = function hideItemShow(index) {
+    itemShow[index] = false;
+    setItemShow(_toConsumableArray(itemShow));
+  };
+
+  var updateTitle = function updateTitle(text, index) {
+    itemTitle[index] = text;
+    setItemTitle(_toConsumableArray(itemTitle));
+  };
+
+  var parent = function parent() {
+    return parentRef;
+  };
+
+  var cloneChildren = function cloneChildren() {
+    return React__default.Children.map(children, function (child, index) {
+      return React__default.cloneElement(child, {
+        showPopup: itemShow[index],
+        orderKey: index,
+        activeColor: activeColor,
+        parent: {
+          closeOnClickOverlay: closeOnClickOverlay,
+          lockScroll: lockScroll,
+          toggleItemShow: toggleItemShow,
+          updateTitle: updateTitle,
+          hideItemShow: hideItemShow,
+          parent: parent
+        }
+      });
+    });
+  };
+
+  return React__default.createElement("div", _objectSpread(_objectSpread({
+    className: "nut-menu ".concat(className)
+  }, rest), {}, {
+    ref: parentRef
+  }), React__default.createElement("div", {
+    className: "nut-menu__bar ".concat(itemShow.includes(true) ? 'opened' : '', " ").concat(className)
+  }, React__default.Children.toArray(children).map(function (child, index) {
+    if (!child) return null;
+    var _child$props = child.props,
+        disabled = _child$props.disabled,
+        title = _child$props.title,
+        value = _child$props.value,
+        direction = _child$props.direction,
+        options = _child$props.options;
+    var currentTitle = options === null || options === void 0 ? void 0 : options.filter(function (option) {
+      return option.value === value;
+    });
+
+    function finallyTitle() {
+      if (title) return title;
+      if (itemTitle && itemTitle[index]) return itemTitle[index];
+      if (currentTitle && currentTitle[0] && currentTitle[0].text) return currentTitle[0].text;
+      return '';
+    }
+
+    return React__default.createElement("div", {
+      className: "nut-menu__item ".concat(classNames({
+        active: itemShow[index],
+        disabled: disabled
+      })),
+      style: {
+        color: itemShow[index] ? activeColor : ''
+      },
+      key: index,
+      onClick: function onClick() {
+        !disabled && toggleItemShow(index);
+      }
+    }, React__default.createElement("div", {
+      className: "nut-menu__title ".concat(classNames({
+        active: itemShow[index],
+        disabled: disabled
+      }))
+    }, React__default.createElement("div", {
+      className: "nut-menu__title-text"
+    }, finallyTitle()), React__default.createElement(Icon, {
+      className: "nut-menu__title-icon",
+      size: "10",
+      name: titleIcon || (direction === 'up' ? 'arrow-up' : 'down-arrow')
+    })));
+  })), cloneChildren());
+};
+
+Menu.defaultProps = defaultProps;
+Menu.displayName = 'NutMenu';
+export { Menu as default };

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

@@ -0,0 +1,3 @@
+require('../../Icon/style')
+require('../../Popup/style')
+require('../../../packages/menuitem/menuitem.scss')