@autobest-ui/components 2.2.1 → 2.4.0

package/esm/move/index.js

@@ -9,39 +9,29 @@ var __extends = this && this.__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 = this && this.__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);
 };
-
 import React from 'react';
 import * as ReactIs from 'react-is';
 import classNames from 'classnames';
@@ -52,15 +42,10 @@ 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,
@@ -82,41 +67,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.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 = 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 = 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 = getInitElementPlacement({
           horizontalPlacement: horizontalPlacement,
@@ -124,41 +101,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 (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,
@@ -166,51 +134,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 = 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 = isTouchScreen();
       _this.prevScaleSize = _this.currentScaleSize;
-
       if (_this.props.scalable && isTouch && event.touches.length > 1) {
-        _this.isTouchScale = true; // 记录双指的间距长度
-
+        _this.isTouchScale = true;
+        // 记录双指的间距长度
         _this.scaleStart = getDistance(event.touches);
       } else {
         _this.moveObj = __assign({}, defaultPosition);
@@ -220,43 +177,34 @@ function (_super) {
           top: event.touches ? event.touches[0].pageY : event.clientY
         };
       }
-
       if (!_this.moveHandler) {
         _this.moveHandler = addEventListener(window.document, isTouch ? 'touchmove' : 'mousemove', function (ev) {
           return _this.onMove(ev, element);
         });
       }
-
       if (!_this.endHandler) {
         _this.endHandler = 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 = getDistance(event.touches); // 设置缩放尺寸
-
+        _this.scaleEnd = 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
@@ -265,27 +213,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 = {
@@ -293,93 +235,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 = isTouchScreen();
-
       if (!_this.startHandler) {
         var eventType = isTouch ? 'touchstart' : 'mousedown';
         _this.startHandler = addEventListener(currentElement, eventType, function (ev) {
           return _this.onStart(ev, currentElement);
         });
-      } // 不支持Touch的设备监听滚动
-
-
+      }
+      // 不支持Touch的设备监听滚动
       if (_this.props.scalable && !isTouch && !_this.mousewheelHandler) {
         _this.mousewheelHandler = addEventListener(currentElement, 'wheel', function (ev) {
           return _this.onMousewheel(ev, currentElement);
         });
-      } // 加入 resize 监听
-
-
+      }
+      // 加入 resize 监听
       if (_this.props.monitorWindowResize && !_this.resizeHandler) {
         _this.resizeHandler = addEventListener(window, 'resize', throttleWithRAF(function () {
           return _this.refreshInfo(currentElement, prevProps);
@@ -388,51 +307,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 = filterScaleRange(nextScaleSize, this.props.maxScalable, this.props.minScalable);
     }
-
     var _a = 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,
@@ -440,23 +348,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.Children.only(children);
-
     if (ReactIs.isElement(child) && !ReactIs.isFragment(child)) {
       return /*#__PURE__*/React.cloneElement(child, {
         ref: this.moveRef,
@@ -464,10 +367,8 @@ function (_super) {
         className: classNames(this.prefixCls, child.props.className)
       });
     }
-
     throw new Error('Move component only support HTMLElement!');
   };
-
   Move.defaultProps = {
     scalable: true,
     monitorWindowResize: true,
@@ -478,5 +379,4 @@ function (_super) {
   };
   return Move;
 }(React.Component);
-
 export default Move;

package/esm/move/range.js

@@ -1,37 +1,32 @@
 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;
 }
-
 export function filterPositionRange(positionInfo, cSize, pSize, scaleSize) {
   return {
     left: getPositionValue(pSize.width, cSize.width, positionInfo.left, scaleSize),
@@ -44,6 +39,5 @@ export function filterScaleRange(nextScaleSize, maxScalable, minScalable) {
   } else if (nextScaleSize < minScalable) {
     nextScaleSize = minScalable;
   }
-
   return nextScaleSize;
 }

package/esm/move/utils.js

@@ -11,38 +11,31 @@ export function getDistance(touches) {
 }
 export 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

package/esm/popover/index.js

@@ -2,75 +2,58 @@ var __assign = this && this.__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);
 };
-
 import React from 'react';
 import classNames from 'classnames';
 import Trigger from '../trigger';
 var prefixCls = 'ab-popover';
-
 function Popover(props) {
   var _a;
-
   var triggerEl = React.useRef(null);
-
   var _b = React.useState({}),
-      arrowStyle = _b[0],
-      setState = _b[1];
-
+    arrowStyle = _b[0],
+    setState = _b[1];
   var cls = props.prefixCls || prefixCls;
-
   var onHidePopup = function onHidePopup() {
     if (triggerEl.current && triggerEl.current.hidePopup) {
       triggerEl.current.hidePopup();
     }
   };
-
   var onArrowStyleChange = function onArrowStyleChange(value) {
     if (props.hiddenArrow) {
       return;
     }
-
     setState(value);
   };
-
   var hiddenClose = props.hiddenClose,
-      closeIcon = props.closeIcon,
-      closeClassName = props.closeClassName,
-      innerClassName = props.innerClassName,
-      tip = props.tip,
-      arrowClassName = props.arrowClassName;
-
+    closeIcon = props.closeIcon,
+    closeClassName = props.closeClassName,
+    innerClassName = props.innerClassName,
+    tip = props.tip,
+    arrowClassName = props.arrowClassName;
   function renderClose() {
     if (hiddenClose) {
       return null;
-    } // 当有自定义的icon时，直接使用,样式需要完全自定义
-
-
+    }
+    // 当有自定义的icon时，直接使用,样式需要完全自定义
     if (closeIcon) {
       return /*#__PURE__*/React.cloneElement(closeIcon, {
         onClick: onHidePopup
       });
     }
-
     return /*#__PURE__*/React.createElement("i", {
       className: classNames("".concat(cls, "-close"), closeClassName),
       onClick: onHidePopup
     }, "\xD7");
   }
-
   var innerClass = classNames("".concat(cls, "-inner"), innerClassName, (_a = {}, _a["".concat(cls, "-inner-expand")] = !hiddenClose, _a));
-
   function renderPopup() {
     return /*#__PURE__*/React.createElement(React.Fragment, null, renderClose(), props.hiddenArrow ? null : /*#__PURE__*/React.createElement("i", {
       className: classNames("".concat(cls, "-arrow"), arrowClassName),
@@ -79,7 +62,6 @@ function Popover(props) {
       className: innerClass
     }, tip));
   }
-
   return /*#__PURE__*/React.createElement(Trigger, __assign({}, props, {
     wrapClassName: classNames("".concat(cls, "-wrap "), props.wrapClassName),
     ref: triggerEl,
@@ -87,7 +69,6 @@ function Popover(props) {
     onArrowStyleChange: onArrowStyleChange
   }), props.children);
 }
-
 Popover.defaultProps = {
   hiddenClose: true,
   hiddenArrow: false

package/esm/popover/style/index.css

@@ -1 +1 @@
-.ab-popover-wrap{background-color:#fff;background-clip:padding-box;box-shadow:0 2px 8px rgba(0,0,0,.15);padding:.08rem .11rem .05rem;min-width:210px;border-radius:4px}.ab-popover-inner{position:relative;width:100%;overflow:hidden;font-size:.12rem}.ab-popover-inner-expand{padding-right:.1rem}.ab-popover-arrow{position:absolute;display:block;width:8px;height:8px;border-top-color:transparent;border-left-color:transparent;border-style:solid;background-color:#fff;border-right-color:#fff;border-bottom-color:#fff;border-width:4px;box-shadow:3px 3px 7px rgba(0,0,0,.07)}.ab-popover-close{position:absolute;right:.02rem;top:.05rem;cursor:pointer;padding:0 .05rem;color:#bfbfbf;font-size:.2rem;line-height:1;z-index:2}.ab-popover-close:hover{color:#4a4a4a}@media only screen and (max-width:767px){.ab-popover-wrap{width:calc(100% - .3rem)}}
+.ab-trigger-wrap{position:absolute;top:0;left:0;z-index:101}.ab-trigger-wrap.ab-trigger-hidden{display:none}.ab-trigger-mask{position:fixed;top:0;left:0;bottom:0;right:0;z-index:101;background-color:transparent;display:none}.ab-trigger-mask.ab-trigger-mask-show{display:block}.ab-trigger-fade-appear,.ab-trigger-fade-enter,.ab-trigger-fade-hr-appear,.ab-trigger-fade-hr-enter{opacity:0}.ab-trigger-fade-appear,.ab-trigger-fade-enter{transform:scale(.7)}.ab-trigger-fade-hr-appear,.ab-trigger-fade-hr-enter{opacity:0;transform:scaleY(.7)}.ab-trigger-fade-appear-active,.ab-trigger-fade-enter-active,.ab-trigger-fade-hr-appear-active,.ab-trigger-fade-hr-enter-active{opacity:1;transition:opacity .2s,transform .2s}.ab-trigger-fade-appear-active,.ab-trigger-fade-enter-active{transform:scale(1)}.ab-trigger-fade-hr-appear-active,.ab-trigger-fade-hr-enter-active{transform:scaleY(1)}.ab-trigger-fade-exit,.ab-trigger-fade-hr-exit{opacity:1}.ab-trigger-fade-exit-active,.ab-trigger-fade-hr-exit-active{opacity:0;transition:opacity .2s,transform .2s}.ab-trigger-fade-exit-active{transform:scale(.7)}.ab-trigger-fade-hr-exit-active{transform:scaleY(.7)}.ab-trigger-fade-exit-done,.ab-trigger-fade-hr-exit-done{display:none}.ab-popover-wrap{background-color:#fff;background-clip:padding-box;box-shadow:0 2px 8px rgba(0,0,0,.15);padding:.08rem .11rem .05rem;min-width:210px;border-radius:4px}.ab-popover-inner{position:relative;width:100%;overflow:hidden;font-size:.12rem}.ab-popover-inner-expand{padding-right:.1rem}.ab-popover-arrow{position:absolute;display:block;width:8px;height:8px;border-style:solid;background-color:#fff;border-color:transparent #fff #fff transparent;border-width:4px;box-shadow:3px 3px 7px rgba(0,0,0,.07)}.ab-popover-close{position:absolute;right:.02rem;top:.05rem;cursor:pointer;padding:0 .05rem;color:#bfbfbf;font-size:.2rem;line-height:1;z-index:2}.ab-popover-close:hover{color:#4a4a4a}@media only screen and (max-width:767px){.ab-popover-wrap{width:calc(100% - .3rem)}}