@autobest-ui/components 2.2.1 → 2.4.0

package/lib/move/index.js

@@ -1,30 +1,19 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var ReactIs = _interopRequireWildcard(require("react-is"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _utils = require("@autobest-ui/utils");
-
 var _range = require("./range");
-
 var _utils2 = require("./utils");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 var __extends = void 0 && (void 0).__extends || function () {
   var _extendStatics = function extendStatics(d, b) {
     _extendStatics = Object.setPrototypeOf || {
@@ -36,52 +25,37 @@ var __extends = void 0 && (void 0).__extends || function () {
         if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p];
       }
     };
-
     return _extendStatics(d, b);
   };
-
   return function (d, b) {
     if (typeof b !== "function" && b !== null) throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-
     _extendStatics(d, b);
-
     function __() {
       this.constructor = d;
     }
-
     d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
   };
 }();
-
 var __assign = void 0 && (void 0).__assign || function () {
   __assign = Object.assign || function (t) {
     for (var s, i = 1, n = arguments.length; i < n; i++) {
       s = arguments[i];
-
       for (var p in s) {
         if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
       }
     }
-
     return t;
   };
-
   return __assign.apply(this, arguments);
 };
-
 var defaultPosition = {
   left: 0,
   top: 0
 };
-
-var Move =
-/** @class */
-function (_super) {
+var Move = /** @class */function (_super) {
   __extends(Move, _super);
-
   function Move() {
     var _this = _super !== null && _super.apply(this, arguments) || this;
-
     _this.prefixCls = 'ab-move';
     _this.prevElementSize = {
       width: 0,
@@ -103,41 +77,33 @@ function (_super) {
     _this.currentScaleSize = 1;
     _this.scaleStart = 0;
     _this.scaleEnd = 0;
-    _this.isTouchScale = false; // 强制刷新元素位置
-
+    _this.isTouchScale = false;
+    // 强制刷新元素位置
     _this.isForceUpdatePlacement = false;
     _this.moveRef = /*#__PURE__*/_react.default.createRef();
     _this.updateTimer = null;
-
     _this.refreshInfo = function (el, prevProps) {
       var element = el || _this.getDomNode();
-
       if (!element) {
         return;
       }
-
       var parentNode = element.parentNode;
-
       if (!parentNode) {
         return;
       }
-
       var elementSize = (0, _utils.getElementSize)(element);
       _this.elementSize = {
         width: elementSize.width,
         height: elementSize.height
       };
-
       if (_this.elementSize.width !== _this.prevElementSize.width || _this.elementSize.height !== _this.prevElementSize.height) {
         _this.isForceUpdatePlacement = true;
       }
-
       _this.prevElementSize = _this.elementSize;
       _this.elementParentSize = (0, _utils.getElementSize)(parentNode, true);
       var _a = _this.props,
-          horizontalPlacement = _a.horizontalPlacement,
-          verticalPlacement = _a.verticalPlacement;
-
+        horizontalPlacement = _a.horizontalPlacement,
+        verticalPlacement = _a.verticalPlacement;
       if (!prevProps || _this.isForceUpdatePlacement || horizontalPlacement !== prevProps.horizontalPlacement || verticalPlacement !== prevProps.verticalPlacement) {
         _this.currentObj = (0, _utils2.getInitElementPlacement)({
           horizontalPlacement: horizontalPlacement,
@@ -145,41 +111,32 @@ function (_super) {
           elementSize: _this.elementSize,
           elementParentSize: _this.elementParentSize
         });
-
         var _b = _this.checkRange(),
-            nextScaleSize = _b.nextScaleSize,
-            nextX = _b.nextX,
-            nextY = _b.nextY;
-
+          nextScaleSize = _b.nextScaleSize,
+          nextX = _b.nextX,
+          nextY = _b.nextY;
         _this.currentObj = {
           left: nextX,
           top: nextY
         };
         _this.currentScaleSize = nextScaleSize;
-
         _this.setElementInfo(element);
-
         element.style.visibility = 'visible';
         _this.isForceUpdatePlacement = false;
       }
     };
-
     _this.resetTranslate = function (info) {
       var element = _this.getDomNode();
-
       if ((0, _utils.isEmptyObject)(info) || !element) {
         return;
       }
-
       _this.currentObj = info;
       element.style.transition = 'transform 200ms ease-in-out';
-
       var _a = _this.checkRange(),
-          nextX = _a.nextX,
-          nextY = _a.nextY,
-          nextScaleSize = _a.nextScaleSize,
-          isRefresh = _a.isRefresh;
-
+        nextX = _a.nextX,
+        nextY = _a.nextY,
+        nextScaleSize = _a.nextScaleSize,
+        isRefresh = _a.isRefresh;
       if (isRefresh) {
         _this.currentObj = {
           left: nextX,
@@ -187,51 +144,40 @@ function (_super) {
         };
         _this.currentScaleSize = nextScaleSize;
       }
-
       _this.setElementInfo(element);
     };
-
     _this.onMousewheel = function (event, element) {
       if (event.preventDefault) {
         event.preventDefault();
       }
-
       if (event.stopPropagation) {
         event.stopPropagation();
       }
-
       var _a = _this.props,
-          maxScalable = _a.maxScalable,
-          minScalable = _a.minScalable;
+        maxScalable = _a.maxScalable,
+        minScalable = _a.minScalable;
       var nextScaleSize = (0, _range.filterScaleRange)(event.deltaY < 0 ? _this.currentScaleSize + 0.02 : _this.currentScaleSize - 0.02, maxScalable, minScalable);
-
       if (_this.currentScaleSize === nextScaleSize || _this.currentScaleSize === nextScaleSize) {
         return;
       }
-
       _this.currentScaleSize = nextScaleSize;
       element.style.transition = 'transform 200ms';
-
       _this.setElementInfo(element);
     };
-
     _this.onStart = function (event, element) {
       if (event.preventDefault) {
         event.preventDefault();
       }
-
       if (event.stopPropagation) {
         event.stopPropagation();
       }
-
       _this.isTouchScale = false;
       element.style.transition = '';
       var isTouch = (0, _utils.isTouchScreen)();
       _this.prevScaleSize = _this.currentScaleSize;
-
       if (_this.props.scalable && isTouch && event.touches.length > 1) {
-        _this.isTouchScale = true; // 记录双指的间距长度
-
+        _this.isTouchScale = true;
+        // 记录双指的间距长度
         _this.scaleStart = (0, _utils2.getDistance)(event.touches);
       } else {
         _this.moveObj = __assign({}, defaultPosition);
@@ -241,43 +187,34 @@ function (_super) {
           top: event.touches ? event.touches[0].pageY : event.clientY
         };
       }
-
       if (!_this.moveHandler) {
         _this.moveHandler = (0, _utils.addEventListener)(window.document, isTouch ? 'touchmove' : 'mousemove', function (ev) {
           return _this.onMove(ev, element);
         });
       }
-
       if (!_this.endHandler) {
         _this.endHandler = (0, _utils.addEventListener)(window.document, isTouch ? 'touchend' : 'mouseup', function (ev) {
           return _this.onEnd(ev, element);
         });
       }
     };
-
     _this.onMove = function (event, element) {
       if (event.preventDefault) {
         event.preventDefault();
       }
-
       if (event.stopPropagation) {
         event.stopPropagation();
       }
-
       if (_this.isTouchScale && event.touches.length > 1) {
-        _this.scaleEnd = (0, _utils2.getDistance)(event.touches); // 设置缩放尺寸
-
+        _this.scaleEnd = (0, _utils2.getDistance)(event.touches);
+        // 设置缩放尺寸
         _this.currentScaleSize = (_this.scaleEnd / _this.scaleStart - 1) / 2 + _this.prevScaleSize;
-
         _this.setElementInfo(element);
-
         return;
       }
-
       if (_this.isTouchScale && event.touches.length <= 1) {
         return;
       }
-
       _this.moveObj = {
         left: event.touches ? event.touches[0].pageX : event.clientX,
         top: event.touches ? event.touches[0].pageY : event.clientY
@@ -286,27 +223,21 @@ function (_super) {
         left: _this.prevObj.left + _this.moveObj.left - _this.startObj.left,
         top: _this.prevObj.top + _this.moveObj.top - _this.startObj.top
       };
-
       _this.setElementInfo(element);
     };
-
     _this.onEnd = function (event, element) {
       _this.clearHandler();
-
       if (event.preventDefault) {
         event.preventDefault();
       }
-
       if (event.stopPropagation) {
         event.stopPropagation();
       }
-
       var _a = _this.checkRange(),
-          nextX = _a.nextX,
-          nextY = _a.nextY,
-          nextScaleSize = _a.nextScaleSize,
-          isRefresh = _a.isRefresh;
-
+        nextX = _a.nextX,
+        nextY = _a.nextY,
+        nextScaleSize = _a.nextScaleSize,
+        isRefresh = _a.isRefresh;
       if (isRefresh) {
         element.style.transition = 'transform 200ms ease-in-out';
         _this.currentObj = {
@@ -314,93 +245,70 @@ function (_super) {
           top: nextY
         };
         _this.currentScaleSize = nextScaleSize;
-
         _this.setElementInfo(element);
       }
-
       var onClick = _this.props.onClick;
-
       if (onClick && _this.currentObj.left === _this.prevObj.left && _this.currentObj.top === _this.prevObj.top && _this.prevScaleSize === _this.currentScaleSize) {
         onClick(event);
       }
     };
-
     _this.onTransitionEnd = function () {
       var element = _this.getDomNode();
-
       if (!element) {
         return;
       }
-
       element.style.transition = '';
       var _a = _this.props,
-          onAfterChange = _a.onAfterChange,
-          name = _a.name;
-
+        onAfterChange = _a.onAfterChange,
+        name = _a.name;
       if (onAfterChange) {
         onAfterChange(name);
       }
     };
-
     return _this;
   }
-
   Move.prototype.componentDidMount = function () {
     this.isForceUpdatePlacement = true;
     this.componentDidUpdate();
   };
-
   Move.prototype.componentDidUpdate = function (prevProps) {
     var _this = this;
-
     clearTimeout(this.updateTimer);
     var element = this.getDomNode();
-
     if (!element) {
       return;
     }
-
     var parentNode = element.parentNode;
-
     if (!parentNode) {
       return;
     }
-
     parentNode.style.overflow = 'hidden';
     var _a = this.props,
-        horizontalPlacement = _a.horizontalPlacement,
-        verticalPlacement = _a.verticalPlacement;
-
+      horizontalPlacement = _a.horizontalPlacement,
+      verticalPlacement = _a.verticalPlacement;
     if (prevProps && (horizontalPlacement !== prevProps.horizontalPlacement || verticalPlacement !== prevProps.verticalPlacement)) {
       this.isForceUpdatePlacement = true;
     }
-
     this.updateTimer = setTimeout(function () {
       var currentElement = _this.getDomNode();
-
       if (!currentElement) {
         return;
       }
-
       _this.refreshInfo(currentElement, prevProps);
-
       var isTouch = (0, _utils.isTouchScreen)();
-
       if (!_this.startHandler) {
         var eventType = isTouch ? 'touchstart' : 'mousedown';
         _this.startHandler = (0, _utils.addEventListener)(currentElement, eventType, function (ev) {
           return _this.onStart(ev, currentElement);
         });
-      } // 不支持Touch的设备监听滚动
-
-
+      }
+      // 不支持Touch的设备监听滚动
       if (_this.props.scalable && !isTouch && !_this.mousewheelHandler) {
         _this.mousewheelHandler = (0, _utils.addEventListener)(currentElement, 'wheel', function (ev) {
           return _this.onMousewheel(ev, currentElement);
         });
-      } // 加入 resize 监听
-
-
+      }
+      // 加入 resize 监听
       if (_this.props.monitorWindowResize && !_this.resizeHandler) {
         _this.resizeHandler = (0, _utils.addEventListener)(window, 'resize', (0, _utils.throttleWithRAF)(function () {
           return _this.refreshInfo(currentElement, prevProps);
@@ -409,51 +317,40 @@ function (_super) {
     }, 0);
     this.clearHandler();
   };
-
   Move.prototype.componentWillUnmount = function () {
     clearTimeout(this.updateTimer);
-
     if (this.startHandler) {
       this.startHandler.remove();
       this.startHandler = null;
     }
-
     if (this.mousewheelHandler) {
       this.mousewheelHandler.remove();
       this.mousewheelHandler = null;
     }
-
     if (this.resizeHandler) {
       this.resizeHandler.remove();
       this.resizeHandler = null;
     }
-
     this.clearHandler();
   };
-
   Move.prototype.clearHandler = function () {
     if (this.moveHandler) {
       this.moveHandler.remove();
       this.moveHandler = null;
     }
-
     if (this.endHandler) {
       this.endHandler.remove();
       this.endHandler = null;
     }
   };
-
   Move.prototype.checkRange = function () {
     var nextScaleSize = this.currentScaleSize;
-
     if (this.props.scalable) {
       nextScaleSize = (0, _range.filterScaleRange)(nextScaleSize, this.props.maxScalable, this.props.minScalable);
     }
-
     var _a = (0, _range.filterPositionRange)(this.currentObj, this.elementSize, this.elementParentSize, nextScaleSize),
-        left = _a.left,
-        top = _a.top;
-
+      left = _a.left,
+      top = _a.top;
     return {
       isRefresh: left !== this.currentObj.left || top !== this.currentObj.top || nextScaleSize !== this.currentScaleSize,
       nextX: left,
@@ -461,24 +358,18 @@ function (_super) {
       nextScaleSize: nextScaleSize
     };
   };
-
   Move.prototype.setElementInfo = function (element) {
     element.style.transform = "translate(".concat(this.currentObj.left, "px, ").concat(this.currentObj.top, "px) scale(").concat(this.currentScaleSize, ")");
   };
-
   Move.prototype.getDomNode = function () {
     if (this.moveRef && this.moveRef.current) {
       return this.moveRef.current;
     }
-
     return null;
   };
-
   Move.prototype.render = function () {
     var children = this.props.children;
-
     var child = _react.default.Children.only(children);
-
     if (ReactIs.isElement(child) && !ReactIs.isFragment(child)) {
       return /*#__PURE__*/_react.default.cloneElement(child, {
         ref: this.moveRef,
@@ -486,10 +377,8 @@ function (_super) {
         className: (0, _classnames.default)(this.prefixCls, child.props.className)
       });
     }
-
     throw new Error('Move component only support HTMLElement!');
   };
-
   Move.defaultProps = {
     scalable: true,
     monitorWindowResize: true,
@@ -500,6 +389,5 @@ function (_super) {
   };
   return Move;
 }(_react.default.Component);
-
 var _default = Move;
 exports.default = _default;

package/lib/move/range.js

@@ -5,54 +5,46 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.filterPositionRange = filterPositionRange;
 exports.filterScaleRange = filterScaleRange;
-
 function getPositionValue(pValue, cValue, prevValue, scaleSize) {
-  var cScaleValue = cValue * scaleSize; // 内容缩放后扩展的一半
-
-  var scaleOverValue = (cScaleValue - cValue) / 2; // 内容小于或等于父级时，滑动不能超出
-
+  var cScaleValue = cValue * scaleSize;
+  // 内容缩放后扩展的一半
+  var scaleOverValue = (cScaleValue - cValue) / 2;
+  // 内容小于或等于父级时，滑动不能超出
   if (pValue >= cScaleValue) {
     // 不能超出左边/上边
     if (prevValue < scaleOverValue) {
       return scaleOverValue;
     }
-
     if (prevValue + cScaleValue - scaleOverValue > pValue) {
       // 不能超出右边/下边
       return pValue - cScaleValue + scaleOverValue;
     }
-  } // 内容大于父级时，
+  }
+  // 内容大于父级时，
   // 滑动时，左边/上边只能滑动到内容最左边/上边， 右边/下边可以滑动到内容最右边/下边
-
-
   if (pValue < cScaleValue) {
     // 左边只能滑动到内容最左边/上边
     if (prevValue > scaleOverValue) {
       return scaleOverValue;
     }
-
     if (Math.abs(prevValue) + pValue + scaleOverValue > cScaleValue) {
       // 右边可以滑动到内容最右边/下边
       return pValue - cScaleValue + scaleOverValue;
     }
   }
-
   return prevValue;
 }
-
 function filterPositionRange(positionInfo, cSize, pSize, scaleSize) {
   return {
     left: getPositionValue(pSize.width, cSize.width, positionInfo.left, scaleSize),
     top: getPositionValue(pSize.height, cSize.height, positionInfo.top, scaleSize)
   };
 }
-
 function filterScaleRange(nextScaleSize, maxScalable, minScalable) {
   if (nextScaleSize > maxScalable) {
     nextScaleSize = maxScalable;
   } else if (nextScaleSize < minScalable) {
     nextScaleSize = minScalable;
   }
-
   return nextScaleSize;
 }

package/lib/move/utils.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getDistance = getDistance;
 exports.getInitElementPlacement = getInitElementPlacement;
-
 function getDistance(touches) {
   var start = {
     left: touches[0].pageX,
@@ -17,41 +16,33 @@ function getDistance(touches) {
   };
   return Math.sqrt(Math.pow(end.left - start.left, 2) + Math.pow(end.top - start.top, 2));
 }
-
 function getInitElementPlacement(_a) {
   var elementSize = _a.elementSize,
-      elementParentSize = _a.elementParentSize,
-      horizontalPlacement = _a.horizontalPlacement,
-      verticalPlacement = _a.verticalPlacement;
+    elementParentSize = _a.elementParentSize,
+    horizontalPlacement = _a.horizontalPlacement,
+    verticalPlacement = _a.verticalPlacement;
   var translateX = 0;
   var translateY = 0;
-
   switch (horizontalPlacement) {
     case 'center':
       translateX = (elementParentSize.width - elementSize.width) / 2;
       break;
-
     case 'right':
       translateX = elementParentSize.width - elementSize.width;
       break;
-
     default:
       translateX = 0;
   }
-
   switch (verticalPlacement) {
     case 'center':
       translateY = (elementParentSize.height - elementSize.height) / 2;
       break;
-
     case 'bottom':
       translateY = elementParentSize.height - elementSize.height;
       break;
-
     default:
       translateY = 0;
   }
-
   return {
     left: translateX,
     top: translateY