@autobest-ui/components 2.13.11 → 3.0.0-alpha.0

package/esm/affix/index.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { AddListenerEventRemoveHandler, getOffsetAndSize } from '@autobest-ui/utils';
+import { CurrentResizeObserver } from './observe';
 export interface GetFixedStateParams {
     positionInfo: OffsetInfo;
     scrollTop: number;
@@ -49,6 +50,10 @@ export interface AffixProps {
      * 是否忽略水平方向固定定位， true将跟着鼠标左右移动
      */
     ignoreHorizontalFixed?: boolean;
+    /**
+     * 是否监听children的大小变化（仅用于非自定义renderAffix的情况）
+     */
+    observeSize?: boolean;
 }
 interface AffixStates {
     visible: boolean;
@@ -64,6 +69,7 @@ declare class Affix extends React.Component<AffixProps, AffixStates> {
     isFixed: boolean;
     wrapRef: React.RefObject<HTMLDivElement>;
     customRef: React.RefObject<HTMLDivElement>;
+    resizeObserver: CurrentResizeObserver;
     static defaultProps: {
         offsetTop: number;
         allWidth: boolean;
@@ -74,6 +80,10 @@ declare class Affix extends React.Component<AffixProps, AffixStates> {
     constructor(props: AffixProps);
     componentDidMount(): void;
     componentWillUnmount(): void;
+    onVisibleChange: (visible: any) => void;
+    addElementObserve: () => void;
+    removeElementObserve: () => void;
+    refreshWrap: () => void;
     onHandlerScroll: (isResize?: boolean) => void;
     renderContent(): JSX.Element;
     render(): JSX.Element;

package/esm/affix/index.js

@@ -34,8 +34,9 @@ var __assign = this && this.__assign || function () {
 };
 import React from 'react';
 import classNames from 'classnames';
-import { throttleWithRAF, addEventListener, getOffsetAndSize, getScrollOffset, getOffset } from '@autobest-ui/utils';
+import { throttleWithRAF, addEventListener, getOffsetAndSize, getScrollOffset, getOffset, getElementSize } from '@autobest-ui/utils';
 import PortalAffix from './PortalAffix';
+import getResizeObserver from './observe';
 var Affix = /** @class */function (_super) {
   __extends(Affix, _super);
   function Affix(props) {
@@ -44,16 +45,46 @@ var Affix = /** @class */function (_super) {
     _this.resizeHandler = null;
     _this.wrapRef = /*#__PURE__*/React.createRef();
     _this.customRef = /*#__PURE__*/React.createRef();
+    _this.onVisibleChange = function (visible) {
+      var _a = _this.props,
+        onChange = _a.onChange,
+        observeSize = _a.observeSize,
+        renderAffix = _a.renderAffix;
+      onChange(visible);
+      if (visible && observeSize && !renderAffix) {
+        _this.addElementObserve();
+        return;
+      }
+      _this.removeElementObserve();
+    };
+    _this.addElementObserve = function () {
+      var element = _this.wrapRef.current;
+      var CurrentResizeObserve = getResizeObserver();
+      if (_this.resizeObserver || !element || !CurrentResizeObserve) {
+        return;
+      }
+      _this.resizeObserver = new CurrentResizeObserve(_this.refreshWrap);
+      _this.resizeObserver.observe(element);
+    };
+    _this.removeElementObserve = function () {
+      if (_this.resizeObserver) {
+        _this.resizeObserver.disconnect();
+        _this.resizeObserver = null;
+      }
+    };
+    _this.refreshWrap = function () {
+      _this.onHandlerScroll();
+    };
     _this.onHandlerScroll = function (isResize) {
       var _a = _this.props,
         offsetTop = _a.offsetTop,
-        onChange = _a.onChange,
         onScroll = _a.onScroll,
         renderAffix = _a.renderAffix,
         allWidth = _a.allWidth,
         fadeEffect = _a.fadeEffect,
         getFixedStatus = _a.getFixedStatus,
-        ignoreHorizontalFixed = _a.ignoreHorizontalFixed;
+        ignoreHorizontalFixed = _a.ignoreHorizontalFixed,
+        observeSize = _a.observeSize;
       var element = _this.wrapRef.current;
       if (!element) {
         return;
@@ -63,12 +94,22 @@ var Affix = /** @class */function (_super) {
         scrollLeft = _b.left;
       var parentElement = element.parentNode;
       // 元素信息
-      var positionElement = _this.isFixed && !renderAffix ? parentElement : element;
-      var positionInfo = getOffsetAndSize(positionElement);
+      var isOriginalFixed = _this.isFixed && !renderAffix;
+      var positionInfo = isOriginalFixed ? getOffsetAndSize(parentElement) : getOffsetAndSize(element);
       if (ignoreHorizontalFixed) {
-        var ignoreScrollLeft = getOffset(positionElement, true).left;
+        var ignoreScrollLeft = getOffset(isOriginalFixed ? parentElement : element, true).left;
         positionInfo.left = ignoreScrollLeft;
       }
+      var sizeChanged = false;
+      if (observeSize && isOriginalFixed) {
+        // 如果监听元素size变化，需要获取原元素的width和height信息
+        var _c = getElementSize(element),
+          elementWidth = _c.width,
+          elementHeight = _c.height;
+        sizeChanged = elementWidth !== positionInfo.width || elementHeight !== positionInfo.height;
+        positionInfo.width = elementWidth;
+        positionInfo.height = elementHeight;
+      }
       var currentFixed = getFixedStatus({
         positionInfo: positionInfo,
         scrollTop: scrollTop,
@@ -88,8 +129,8 @@ var Affix = /** @class */function (_super) {
           parentElement.style.width = '';
           parentElement.style.height = '';
         }
-        onChange(false);
-      } else if ((!_this.isFixed || isResize) && currentFixed) {
+        _this.onVisibleChange(false);
+      } else if ((!_this.isFixed || isResize || sizeChanged) && currentFixed) {
         _this.isFixed = true;
         var documentWidth = document.body.offsetWidth;
         var allWidthLeft = ignoreHorizontalFixed ? "-".concat(scrollLeft, "px") : '0px';
@@ -108,7 +149,7 @@ var Affix = /** @class */function (_super) {
           parentElement.style.width = "".concat(positionInfo.width, "px");
           parentElement.style.height = "".concat(positionInfo.height, "px");
         }
-        onChange(true);
+        _this.onVisibleChange(true);
       } else if (_this.isFixed && currentFixed && ignoreHorizontalFixed) {
         var allWidthLeft = "-".concat(scrollLeft, "px");
         if (renderAffix || fadeEffect) {

package/esm/affix/observe.d.ts

@@ -0,0 +1,8 @@
+export interface CurrentResizeObserver {
+    disconnect(): void;
+    observe(target: Element): void;
+}
+export default function getResizeObserver(): {
+    new (callback: () => void): CurrentResizeObserver;
+    prototype: CurrentResizeObserver;
+};

package/esm/affix/observe.js

@@ -0,0 +1,6 @@
+export default function getResizeObserver() {
+  if (window.ResizeObserver && typeof window.ResizeObserver === 'function') {
+    return window.ResizeObserver;
+  }
+  return null;
+}

package/esm/confirm/style/index.css

@@ -1 +1 @@
-.ab-mask{position:fixed;top:0;left:0;z-index:101;width:100%;height:100%;background-color:rgba(0,0,0,.45);transition:opacity .4s cubic-bezier(.7,.3,.1,1)}.ab-mask-fade-appear,.ab-mask-fade-enter{opacity:0}.ab-mask-fade-appear-active,.ab-mask-fade-enter-active,.ab-mask-fade-enter-done,.ab-mask-fade-exit{opacity:1}.ab-mask-fade-exit-active{opacity:0}.ab-mask-fade-exit-done{display:none}.ab-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:101;overflow:auto;outline:0}.ab-modal.ab-modal-center{text-align:center}.ab-modal.ab-modal-center::before{display:inline-block;width:0;height:100%;vertical-align:middle;content:""}.ab-modal.ab-modal-center .ab-modal-content{top:0;text-align:left;display:inline-block;vertical-align:middle}.ab-modal-content{position:relative;background-color:#fff;max-width:calc(100vw - .3rem);margin-left:auto;margin-right:auto;overflow:auto;-webkit-overflow-scrolling:touch;transition:transform .3s,opacity .3s cubic-bezier(.7,.3,.1,1);z-index:101}.ab-modal-title{position:relative;width:100%}.ab-modal-title .ab-modal-times{top:50%;transform:translateY(-50%)}.ab-modal-times{position:absolute;top:.12rem;right:.12rem;font-size:.15rem;color:#b0b0b0;cursor:pointer}.ab-modal-times svg{display:block}.ab-modal-times:hover{color:#333}.ab-modal-hidden{display:none}@media only screen and (max-width:767px){.ab-modal-content{width:calc(100vw - .3rem)}}.ab-modal-fade-appear,.ab-modal-fade-enter{transform:translate3d(0,-30px,0);opacity:0}.ab-modal-fade-appear-active,.ab-modal-fade-enter-active,.ab-modal-fade-enter-done,.ab-modal-fade-exit{transform:translateZ(0);opacity:1}.ab-modal-fade-exit-active{transform:translate3d(0,-30px,0);opacity:0}.ab-modal-fade-exit-done{display:none}.ab-confirm-btns{display:flex;justify-content:flex-end;padding-top:.42rem}.ab-confirm-cancel,.ab-confirm-ok{overflow:hidden;position:relative;font-size:.12rem;border-width:1px;border-style:solid;outline:0;cursor:pointer;font-weight:700;padding:.05rem .3rem;display:inline-block;color:#fff;margin-left:.3rem}.ab-confirm-ok{border-color:#bc0000;background:linear-gradient(180deg,#c00000 0,#c00000 0,#a00000 100%,#a00000 100%)}.ab-confirm-ok:hover{border-color:#bc0000;background:#bc0000}.ab-confirm-cancel{border-color:grey;background:linear-gradient(180deg,#909090 0,#909090 0,#707070 100%,#707070 100%)}.ab-confirm-cancel:hover{border-color:grey;background:grey}
+.ab-mask{position:fixed;top:0;left:0;z-index:101;width:100%;height:100%;background-color:rgba(0,0,0,.45);transition:opacity .4s cubic-bezier(.7,.3,.1,1)}.ab-mask-fade-appear,.ab-mask-fade-enter{opacity:0}.ab-mask-fade-appear-active,.ab-mask-fade-enter-active,.ab-mask-fade-enter-done,.ab-mask-fade-exit{opacity:1}.ab-mask-fade-exit-active{opacity:0}.ab-mask-fade-exit-done{display:none}.ab-modal{position:fixed;top:0;right:0;bottom:0;left:0;overflow:auto;outline:0}.ab-modal.ab-modal-center{text-align:center}.ab-modal.ab-modal-center::before{display:inline-block;width:0;height:100%;vertical-align:middle;content:""}.ab-modal.ab-modal-center .ab-modal-content{top:0;text-align:left;display:inline-block;vertical-align:middle}.ab-modal-content{position:relative;background-color:#fff;max-width:calc(100vw - .3rem);margin-left:auto;margin-right:auto;overflow:auto;-webkit-overflow-scrolling:touch;transition:transform .3s,opacity .3s cubic-bezier(.7,.3,.1,1);z-index:101}.ab-modal-title{position:relative;width:100%}.ab-modal-title .ab-modal-times{top:50%;transform:translateY(-50%)}.ab-modal-times{position:absolute;top:.12rem;right:.12rem;font-size:.15rem;color:#b0b0b0;cursor:pointer}.ab-modal-times svg{display:block}.ab-modal-times:hover{color:#333}.ab-modal-hidden{display:none}@media only screen and (max-width:767px){.ab-modal-content{width:calc(100vw - .3rem)}}.ab-modal-fade-appear,.ab-modal-fade-enter{transform:translate3d(0,-30px,0);opacity:0}.ab-modal-fade-appear-active,.ab-modal-fade-enter-active,.ab-modal-fade-enter-done,.ab-modal-fade-exit{transform:translateZ(0);opacity:1}.ab-modal-fade-exit-active{transform:translate3d(0,-30px,0);opacity:0}.ab-modal-fade-exit-done{display:none}.ab-confirm-btns{display:flex;justify-content:flex-end;padding-top:.42rem}.ab-confirm-cancel,.ab-confirm-ok{overflow:hidden;position:relative;font-size:.12rem;border-width:1px;border-style:solid;outline:0;cursor:pointer;font-weight:700;padding:.05rem .3rem;display:inline-block;color:#fff;margin-left:.3rem}.ab-confirm-ok{border-color:#bc0000;background:linear-gradient(180deg,#c00000 0,#c00000 0,#a00000 100%,#a00000 100%)}.ab-confirm-ok:hover{border-color:#bc0000;background:#bc0000}.ab-confirm-cancel{border-color:grey;background:linear-gradient(180deg,#909090 0,#909090 0,#707070 100%,#707070 100%)}.ab-confirm-cancel:hover{border-color:grey;background:grey}

package/esm/lazy-image/index.d.ts

@@ -1,5 +1,5 @@
 import React, { MouseEventHandler, MouseEvent } from 'react';
-export interface LazyImageProps {
+export interface LazyImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
     /**
      * 需要显示的图片
      */

package/esm/modal/index.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { CSSProperties } from 'react';
 import { AddListenerEventRemoveHandler } from '@autobest-ui/utils';
 declare type PrevPopupSize = {
     width: number;
@@ -35,9 +35,22 @@ export interface ModalProps {
     popupLimitSpacing?: number;
     /**
      * 当写成`auto`时， 宽度是全屏
+     * 默认值为6.5rem
      */
-    width?: string;
-    height?: string;
+    width?: CSSProperties['width'];
+    /**
+     * 固定弹出框高度
+     * 默认值为auto
+     */
+    height?: CSSProperties['height'];
+    /**
+     * 弹出框最小高度
+     */
+    minHeight?: CSSProperties['minHeight'];
+    /**
+     * 弹出框z-index层级
+     */
+    zIndex?: CSSProperties['zIndex'];
     /**
      * 弹框到顶部距离（只有在placement="top"时，有作用）
      */
@@ -77,7 +90,6 @@ interface ModalStates {
     cacheVisible: boolean;
 }
 declare class Modal extends React.Component<ModalProps, ModalStates> {
-    static Affix: React.ComponentType<Required<Omit<import("../portal").PortalProps, "didUpdate">>>;
     static cacheOpenedIds: number[];
     openId: number;
     prefixCls: string;
@@ -86,7 +98,9 @@ declare class Modal extends React.Component<ModalProps, ModalStates> {
         placement: string;
         width: string;
         height: string;
+        minHeight: string;
         top: string;
+        zIndex: number;
         popupLimitSpacing: number;
         closable: boolean;
         maskClosable: boolean;
@@ -113,7 +127,7 @@ declare class Modal extends React.Component<ModalProps, ModalStates> {
      */
     onDocumentClick: (event: any) => void;
     clearOutsideHandler(): void;
-    clearPopupTimer: (popupEl?: HTMLElement) => void;
+    clearPopupTimer: () => void;
     getPopupDomNode(): HTMLDivElement;
     getMaskDomNode(): HTMLDivElement;
     onClose: (event: any, isOutsideClick?: boolean) => void;

package/esm/modal/index.js

@@ -27,7 +27,6 @@ import { addEventListener, hasVerticalScrollbar, isTouchScreen, getElementSize,
 import Portal from '../portal';
 import Mask from '../mask';
 import Title from './Title';
-import Affix from './Affix';
 import getPopupLocation from './getPopupLocation';
 function getId() {
   try {
@@ -68,12 +67,8 @@ var Modal = /** @class */function (_super) {
         _this.onClose(target, true);
       }
     };
-    _this.clearPopupTimer = function (popupEl) {
+    _this.clearPopupTimer = function () {
       clearTimeout(_this.popupTimer);
-      var element = popupEl || _this.getPopupDomNode();
-      if (element) {
-        element.style.visibility = '';
-      }
     };
     _this.onClose = function (event, isOutsideClick) {
       if (isOutsideClick === void 0) {
@@ -93,11 +88,11 @@ var Modal = /** @class */function (_super) {
       if (!element) {
         return;
       }
-      if (element && element.parentNode) {
+      if (element.parentNode) {
         var parentNode = element.parentNode;
         parentNode.style.display = 'block';
       }
-      _this.clearPopupTimer(element);
+      _this.clearPopupTimer();
       var _a = _this.props,
         placement = _a.placement,
         hiddenScroll = _a.hiddenScroll,
@@ -141,7 +136,7 @@ var Modal = /** @class */function (_super) {
           lastChild.style.overflow = 'auto';
           var popupHeight = height || _this.props.height;
           if (!popupHeight || popupHeight === 'auto') {
-            lastChild.style.maxHeight = "calc(100vh - .3rem - ".concat(placement === 'top' && top ? top : '0px', " - ").concat(firstChildHeight, "px)");
+            lastChild.style.maxHeight = "calc(100vh - ".concat(popupLimitSpacing * 2, "px - ").concat(placement === 'top' && top ? top : '0px', " - ").concat(firstChildHeight, "px)");
           } else {
             lastChild.style.maxHeight = "calc(100% - ".concat(firstChildHeight, "px)");
           }
@@ -240,11 +235,9 @@ var Modal = /** @class */function (_super) {
         width = _a.width,
         height = _a.height;
       if (prevPopupSize.width !== width || prevPopupSize.height !== height) {
-        this.clearPopupTimer(popupEl);
-        popupEl.style.visibility = 'hidden';
+        this.clearPopupTimer();
         this.popupTimer = setTimeout(function () {
           _this.onEnter(popupEl);
-          popupEl.style.visibility = '';
         });
       }
     }
@@ -287,14 +280,20 @@ var Modal = /** @class */function (_super) {
       children = _b.children,
       width = _b.width,
       height = _b.height,
+      minHeight = _b.minHeight,
+      zIndex = _b.zIndex,
       className = _b.className,
       closable = _b.closable,
       title = _b.title,
       placement = _b.placement,
-      top = _b.top;
-    var maxHeight = "calc(100vh - .3rem - ".concat(placement === 'top' && top ? top : '0px', ")");
+      top = _b.top,
+      popupLimitSpacing = _b.popupLimitSpacing;
+    var maxHeight = "calc(100vh - ".concat(popupLimitSpacing * 2, "px - ").concat(placement === 'top' && top ? top : '0px', ")");
     return /*#__PURE__*/React.createElement("div", {
-      className: classNames(cls, className, (_a = {}, _a["".concat(cls, "-center")] = placement === 'center', _a["".concat(this.prefixCls, "-hidden")] = !visible && !this.state.isUserOperated, _a))
+      className: classNames(cls, className, (_a = {}, _a["".concat(cls, "-center")] = placement === 'center', _a["".concat(this.prefixCls, "-hidden")] = !visible && !this.state.isUserOperated, _a)),
+      style: {
+        zIndex: zIndex
+      }
     }, /*#__PURE__*/React.createElement(CSSTransition, {
       "in": visible,
       timeout: 300,
@@ -309,7 +308,8 @@ var Modal = /** @class */function (_super) {
         style: state !== 'exited' ? {
           width: width,
           height: height,
-          maxHeight: maxHeight
+          maxHeight: maxHeight,
+          minHeight: minHeight
         } : undefined,
         ref: _this.popupRef
       }, /*#__PURE__*/React.createElement(Title, {
@@ -341,14 +341,15 @@ var Modal = /** @class */function (_super) {
     }
     return null;
   };
-  Modal.Affix = Affix;
   Modal.cacheOpenedIds = [];
   // 默认值
   Modal.defaultProps = {
     placement: 'center',
     width: '6.5rem',
     height: 'auto',
+    minHeight: '',
     top: '10%',
+    zIndex: 101,
     popupLimitSpacing: 14,
     closable: true,
     maskClosable: true,

package/esm/modal/style/index.css

@@ -1 +1 @@
-.ab-mask{position:fixed;top:0;left:0;z-index:101;width:100%;height:100%;background-color:rgba(0,0,0,.45);transition:opacity .4s cubic-bezier(.7,.3,.1,1)}.ab-mask-fade-appear,.ab-mask-fade-enter{opacity:0}.ab-mask-fade-appear-active,.ab-mask-fade-enter-active,.ab-mask-fade-enter-done,.ab-mask-fade-exit{opacity:1}.ab-mask-fade-exit-active{opacity:0}.ab-mask-fade-exit-done{display:none}.ab-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:101;overflow:auto;outline:0}.ab-modal.ab-modal-center{text-align:center}.ab-modal.ab-modal-center::before{display:inline-block;width:0;height:100%;vertical-align:middle;content:""}.ab-modal.ab-modal-center .ab-modal-content{top:0;text-align:left;display:inline-block;vertical-align:middle}.ab-modal-content{position:relative;background-color:#fff;max-width:calc(100vw - .3rem);margin-left:auto;margin-right:auto;overflow:auto;-webkit-overflow-scrolling:touch;transition:transform .3s,opacity .3s cubic-bezier(.7,.3,.1,1);z-index:101}.ab-modal-title{position:relative;width:100%}.ab-modal-title .ab-modal-times{top:50%;transform:translateY(-50%)}.ab-modal-times{position:absolute;top:.12rem;right:.12rem;font-size:.15rem;color:#b0b0b0;cursor:pointer}.ab-modal-times svg{display:block}.ab-modal-times:hover{color:#333}.ab-modal-hidden{display:none}@media only screen and (max-width:767px){.ab-modal-content{width:calc(100vw - .3rem)}}.ab-modal-fade-appear,.ab-modal-fade-enter{transform:translate3d(0,-30px,0);opacity:0}.ab-modal-fade-appear-active,.ab-modal-fade-enter-active,.ab-modal-fade-enter-done,.ab-modal-fade-exit{transform:translateZ(0);opacity:1}.ab-modal-fade-exit-active{transform:translate3d(0,-30px,0);opacity:0}.ab-modal-fade-exit-done{display:none}
+.ab-mask{position:fixed;top:0;left:0;z-index:101;width:100%;height:100%;background-color:rgba(0,0,0,.45);transition:opacity .4s cubic-bezier(.7,.3,.1,1)}.ab-mask-fade-appear,.ab-mask-fade-enter{opacity:0}.ab-mask-fade-appear-active,.ab-mask-fade-enter-active,.ab-mask-fade-enter-done,.ab-mask-fade-exit{opacity:1}.ab-mask-fade-exit-active{opacity:0}.ab-mask-fade-exit-done{display:none}.ab-modal{position:fixed;top:0;right:0;bottom:0;left:0;overflow:auto;outline:0}.ab-modal.ab-modal-center{text-align:center}.ab-modal.ab-modal-center::before{display:inline-block;width:0;height:100%;vertical-align:middle;content:""}.ab-modal.ab-modal-center .ab-modal-content{top:0;text-align:left;display:inline-block;vertical-align:middle}.ab-modal-content{position:relative;background-color:#fff;max-width:calc(100vw - .3rem);margin-left:auto;margin-right:auto;overflow:auto;-webkit-overflow-scrolling:touch;transition:transform .3s,opacity .3s cubic-bezier(.7,.3,.1,1);z-index:101}.ab-modal-title{position:relative;width:100%}.ab-modal-title .ab-modal-times{top:50%;transform:translateY(-50%)}.ab-modal-times{position:absolute;top:.12rem;right:.12rem;font-size:.15rem;color:#b0b0b0;cursor:pointer}.ab-modal-times svg{display:block}.ab-modal-times:hover{color:#333}.ab-modal-hidden{display:none}@media only screen and (max-width:767px){.ab-modal-content{width:calc(100vw - .3rem)}}.ab-modal-fade-appear,.ab-modal-fade-enter{transform:translate3d(0,-30px,0);opacity:0}.ab-modal-fade-appear-active,.ab-modal-fade-enter-active,.ab-modal-fade-enter-done,.ab-modal-fade-exit{transform:translateZ(0);opacity:1}.ab-modal-fade-exit-active{transform:translate3d(0,-30px,0);opacity:0}.ab-modal-fade-exit-done{display:none}

package/esm/move/index.d.ts

@@ -36,6 +36,14 @@ export interface MoveProps {
      * 点击的回调函数， 如果移动，则不是click
      */
     onClick?: (event: any) => void;
+    /**
+     * 禁止水平方向的移动
+     */
+    horizontalMoveDisabled?: boolean;
+    /**
+     * 禁止垂直方向的移动
+     */
+    verticalMoveDisabled?: boolean;
 }
 declare class Move extends React.Component<MoveProps> {
     readonly prefixCls = "ab-move";
@@ -46,6 +54,8 @@ declare class Move extends React.Component<MoveProps> {
         maxScalable: number;
         horizontalPlacement: string;
         verticalPlacement: string;
+        horizontalMoveDisabled: boolean;
+        verticalMoveDisabled: boolean;
     };
     prevElementSize: {
         width: number;

package/esm/move/index.js

@@ -205,13 +205,16 @@ var Move = /** @class */function (_super) {
       if (_this.isTouchScale && event.touches.length <= 1) {
         return;
       }
+      var _a = _this.props,
+        horizontalMoveDisabled = _a.horizontalMoveDisabled,
+        verticalMoveDisabled = _a.verticalMoveDisabled;
       _this.moveObj = {
         left: event.touches ? event.touches[0].pageX : event.clientX,
         top: event.touches ? event.touches[0].pageY : event.clientY
       };
       _this.currentObj = {
-        left: _this.prevObj.left + _this.moveObj.left - _this.startObj.left,
-        top: _this.prevObj.top + _this.moveObj.top - _this.startObj.top
+        left: horizontalMoveDisabled ? _this.prevObj.left : _this.prevObj.left + _this.moveObj.left - _this.startObj.left,
+        top: verticalMoveDisabled ? _this.prevObj.top : _this.prevObj.top + _this.moveObj.top - _this.startObj.top
       };
       _this.setElementInfo(element);
     };
@@ -223,6 +226,10 @@ var Move = /** @class */function (_super) {
       if (event.stopPropagation) {
         event.stopPropagation();
       }
+      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);
+      }
       var _a = _this.checkRange(),
         nextX = _a.nextX,
         nextY = _a.nextY,
@@ -237,10 +244,6 @@ var Move = /** @class */function (_super) {
         _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();
@@ -375,7 +378,9 @@ var Move = /** @class */function (_super) {
     minScalable: 1,
     maxScalable: 1,
     horizontalPlacement: 'left',
-    verticalPlacement: 'top'
+    verticalPlacement: 'top',
+    horizontalMoveDisabled: false,
+    verticalMoveDisabled: false
   };
   return Move;
 }(React.Component);

package/esm/show-more/index.d.ts

@@ -33,9 +33,17 @@ export interface ShowMoreProps {
      */
     expandable?: boolean;
     /**
-     * 点击展开后的回调函数
+     * 展开后点击收起的文字，若为空则代表没有点击收起的功能
      */
-    onAfterChange?: () => void;
+    collapseText?: string;
+    /**
+     * 收起按钮样式， 注意不能加padding样式， 可以通过空格来解决左右间距问题
+     */
+    collapseClassName?: string;
+    /**
+     * 点击展开/收起后的回调函数
+     */
+    onAfterChange?: (isExpand: boolean) => void;
     /**
      * 渲染后的回调函数
      */
@@ -51,9 +59,11 @@ declare class ShowMore extends Component<ShowMoreProps, ShowMoreStates> {
     static defaultProps: {
         children: string;
         ellipsisText: string;
+        collapseText: any;
         lines: number;
         width: number;
         expandable: boolean;
+        onAfterChange: () => any;
     };
     prefixCls: string;
     targetElement: HTMLSpanElement | null;
@@ -63,13 +73,15 @@ declare class ShowMore extends Component<ShowMoreProps, ShowMoreStates> {
     canvasContext: CanvasRenderingContext2D;
     timer: any;
     targetWidth: number;
+    prevPreviewText: string;
     constructor(props: ShowMoreProps);
     componentDidMount(): void;
     componentDidUpdate(prevProps: ShowMoreProps): void;
     componentWillUnmount(): void;
     setHiddenTextStatus: () => void;
     delayCalculate(): void;
-    onChange: () => void;
+    onExpand: () => void;
+    onCollapse: () => void;
     innerText: (node: HTMLSpanElement) => string;
     calcTargetWidth: (callback?: () => void) => void;
     measureWidth: (text: string) => number;

package/esm/show-more/index.js

@@ -46,6 +46,7 @@ var ShowMore = /** @class */function (_super) {
     _this.setChildrenElement = function (el) {
       return _this.textElement = el;
     };
+    _this.prevPreviewText = '';
     _this.setHiddenTextStatus = function () {
       _this.calcTargetWidth(function () {
         if (_this.textElement) {
@@ -55,11 +56,24 @@ var ShowMore = /** @class */function (_super) {
         }
       });
     };
-    _this.onChange = function () {
+    _this.onExpand = function () {
       if (!_this.props.expandable) {
         return;
       }
-      _this.setRenderText(_this.props.onAfterChange, false);
+      _this.setRenderText(function () {
+        _this.props.onAfterChange(true);
+      }, false);
+    };
+    _this.onCollapse = function () {
+      if (isBlank(_this.props.collapseText)) {
+        return;
+      }
+      _this.setState({
+        previewText: _this.prevPreviewText
+      }, function () {
+        _this.props.onAfterChange(false);
+      });
+      _this.prevPreviewText = '';
     };
     _this.innerText = function (node) {
       var div = document.createElement('div');
@@ -159,7 +173,7 @@ var ShowMore = /** @class */function (_super) {
           hiddenLineStr = hiddenLineStr.replace(lastLineText, '');
           resultLine = /*#__PURE__*/React.createElement(React.Fragment, null, "".concat(lastLineText, "... "), /*#__PURE__*/React.createElement("span", {
             className: classNames(ellipsisClassName, "".concat(cls, "-ellipsis"), (_a = {}, _a["".concat(cls, "-btn")] = expandable, _a)),
-            onClick: _this.onChange
+            onClick: _this.onExpand
           }, ellipsisText));
         } else {
           var lower = 0;
@@ -209,7 +223,9 @@ var ShowMore = /** @class */function (_super) {
       var targetWidth = _this.targetWidth;
       var _a = _this.props,
         children = _a.children,
-        numLines = _a.lines;
+        numLines = _a.lines,
+        collapseText = _a.collapseText,
+        collapseClassName = _a.collapseClassName;
       var previewText;
       var hiddenText;
       var isTruncated = isBlank(isHidden) ? _this.state.isTruncated : isHidden;
@@ -222,6 +238,16 @@ var ShowMore = /** @class */function (_super) {
       } else {
         previewText = children;
         hiddenText = '';
+        if (!isTruncated && !isBlank(collapseText)) {
+          var cls = _this.prefixCls;
+          // 记录未展开前的内容
+          _this.prevPreviewText = _this.state.previewText;
+          // 结尾加上收起按钮
+          previewText = /*#__PURE__*/React.createElement(React.Fragment, null, children, ' ', /*#__PURE__*/React.createElement("span", {
+            className: classNames(collapseClassName, "".concat(cls, "-collapse ").concat(cls, "-btn")),
+            onClick: _this.onCollapse
+          }, collapseText));
+        }
       }
       _this.setState({
         previewText: previewText,
@@ -297,9 +323,13 @@ var ShowMore = /** @class */function (_super) {
   ShowMore.defaultProps = {
     children: '',
     ellipsisText: 'Show More',
+    collapseText: null,
     lines: 2,
     width: 0,
-    expandable: true
+    expandable: true,
+    onAfterChange: function onAfterChange() {
+      return null;
+    }
   };
   return ShowMore;
 }(Component);

package/esm/show-more/style/index.css

@@ -1 +1 @@
-.ab-show-more-ellipsis{white-space:nowrap}.ab-show-more-btn{color:#4068b0;cursor:pointer}.ab-show-more-hidden,.ab-show-more-text{visibility:hidden;height:0;display:block;overflow:hidden}.ab-show-more-hidden{width:0}
+.ab-show-more-collapse,.ab-show-more-ellipsis{white-space:nowrap}.ab-show-more-btn{color:#4068b0;cursor:pointer}.ab-show-more-hidden,.ab-show-more-text{visibility:hidden;height:0;display:block;overflow:hidden}.ab-show-more-hidden{width:0}