@autobest-ui/components 2.13.11 → 2.14.0

package/esm/read-more-html/index.d.ts

@@ -0,0 +1,89 @@
+import React, { Component } from 'react';
+export interface ReadMoreHtmlProps {
+    /**
+     * 需要显示的内容
+     */
+    children: React.ReactChild[] | React.ReactChild;
+    /**
+     * 整体样式
+     */
+    className?: string;
+    /**
+     * 需要忽略的类名数组，例如 ['mc_title']
+     */
+    ignoreClassList?: string[];
+    /**
+     * 展开文本
+     */
+    expandText?: string;
+    /**
+     * 折叠文本, 展开后点击收起的文字
+     */
+    collapseText?: string;
+    /**
+     * 初始时，显示的行数
+     */
+    lines?: number;
+    /**
+     * 是否执行resizeObserver监听宽度变化
+     */
+    isResizeObserver?: boolean;
+    /**
+     * 垂直方向触发换行的判定阈值 (默认 1px), 当一行中有字体，大小不同时，需要根据情况动态触发换行
+     */
+    lineThreshold?: number;
+    /**
+     * [不推荐]设置Wrap容器高度, 用于解决初始化时页面抖动问题，建议通过屏幕大小动态设置className
+     */
+    defaultWrapHeight?: number;
+    /**
+     * [不推荐]设置Content最大高度, 用于解决初始化时页面抖动问题，建议通过屏幕大小动态设置className
+     */
+    defaultContentMaxHeight?: number;
+    /**
+     * 默认是否折叠
+     */
+    defaultCollapsed?: boolean;
+    /**
+     * 点击展开/收起前的回调函数，返回false时阻止change
+     */
+    onBeforeChange?: (isCollapsed: boolean) => Promise<boolean>;
+    /**
+     * 点击展开/收起后的回调函数
+     */
+    onAfterChange?: (isCollapsed: boolean) => void;
+}
+interface ReadMoreHtmlState {
+    isCollapsed: boolean;
+    isShowBtn: boolean;
+    wrapStyle: React.CSSProperties;
+    contentStyle: React.CSSProperties;
+}
+declare class ReadMoreHtml extends Component<ReadMoreHtmlProps, ReadMoreHtmlState> {
+    static defaultProps: {
+        onAfterChange: () => void;
+        isResizeObserver: boolean;
+        defaultCollapsed: boolean;
+        expandText: string;
+        collapseText: string;
+        lineThreshold: number;
+        lines: number;
+    };
+    cacheWrapWidth: number;
+    resizeObserver: ResizeObserver;
+    wrapRef: React.RefObject<HTMLDivElement>;
+    contentRef: React.RefObject<HTMLDivElement>;
+    prefixCls: string;
+    constructor(props: ReadMoreHtmlProps);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: ReadMoreHtmlProps): void;
+    componentWillUnmount(): void;
+    /**
+     * 计算高度并设置样式
+     */
+    delayCalculate(): void;
+    onResizeObserver: () => void;
+    onChange: () => Promise<void>;
+    render(): JSX.Element;
+}
+export default ReadMoreHtml;

package/esm/read-more-html/index.js

@@ -0,0 +1,362 @@
+var __extends = this && this.__extends || function () {
+  var _extendStatics = function extendStatics(d, b) {
+    _extendStatics = Object.setPrototypeOf || {
+      __proto__: []
+    } instanceof Array && function (d, b) {
+      d.__proto__ = b;
+    } || function (d, b) {
+      for (var p in b) {
+        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 __awaiter = this && this.__awaiter || function (thisArg, _arguments, P, generator) {
+  function adopt(value) {
+    return value instanceof P ? value : new P(function (resolve) {
+      resolve(value);
+    });
+  }
+  return new (P || (P = Promise))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+    function step(result) {
+      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+    }
+    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
+};
+var __generator = this && this.__generator || function (thisArg, body) {
+  var _ = {
+      label: 0,
+      sent: function sent() {
+        if (t[0] & 1) throw t[1];
+        return t[1];
+      },
+      trys: [],
+      ops: []
+    },
+    f,
+    y,
+    t,
+    g;
+  return g = {
+    next: verb(0),
+    "throw": verb(1),
+    "return": verb(2)
+  }, typeof Symbol === "function" && (g[Symbol.iterator] = function () {
+    return this;
+  }), g;
+  function verb(n) {
+    return function (v) {
+      return step([n, v]);
+    };
+  }
+  function step(op) {
+    if (f) throw new TypeError("Generator is already executing.");
+    while (_) {
+      try {
+        if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+        if (y = 0, t) op = [op[0] & 2, t.value];
+        switch (op[0]) {
+          case 0:
+          case 1:
+            t = op;
+            break;
+          case 4:
+            _.label++;
+            return {
+              value: op[1],
+              done: false
+            };
+          case 5:
+            _.label++;
+            y = op[1];
+            op = [0];
+            continue;
+          case 7:
+            op = _.ops.pop();
+            _.trys.pop();
+            continue;
+          default:
+            if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
+              _ = 0;
+              continue;
+            }
+            if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
+              _.label = op[1];
+              break;
+            }
+            if (op[0] === 6 && _.label < t[1]) {
+              _.label = t[1];
+              t = op;
+              break;
+            }
+            if (t && _.label < t[2]) {
+              _.label = t[2];
+              _.ops.push(op);
+              break;
+            }
+            if (t[2]) _.ops.pop();
+            _.trys.pop();
+            continue;
+        }
+        op = body.call(thisArg, _);
+      } catch (e) {
+        op = [6, e];
+        y = 0;
+      } finally {
+        f = t = 0;
+      }
+    }
+    if (op[0] & 5) throw op[1];
+    return {
+      value: op[0] ? op[1] : void 0,
+      done: true
+    };
+  }
+};
+import React, { Component } from 'react';
+import classNames from 'classnames';
+import { debounce } from '@autobest-ui/utils';
+var ReadMoreHtml = /** @class */function (_super) {
+  __extends(ReadMoreHtml, _super);
+  function ReadMoreHtml(props) {
+    var _this = _super.call(this, props) || this;
+    _this.wrapRef = /*#__PURE__*/React.createRef();
+    _this.contentRef = /*#__PURE__*/React.createRef();
+    _this.prefixCls = 'ab-rdm-html';
+    _this.onResizeObserver = function () {
+      var debounceCalculate = debounce(function (newWidth) {
+        if (newWidth !== _this.cacheWrapWidth) {
+          _this.cacheWrapWidth = newWidth;
+          _this.delayCalculate();
+        }
+      });
+      _this.resizeObserver = new ResizeObserver(function (entries) {
+        debounceCalculate(entries[0].contentRect.width);
+      });
+      _this.resizeObserver.observe(_this.wrapRef.current);
+    };
+    _this.onChange = function () {
+      return __awaiter(_this, void 0, void 0, function () {
+        var isCollapsed, _a, nextState;
+        var _this = this;
+        return __generator(this, function (_b) {
+          switch (_b.label) {
+            case 0:
+              isCollapsed = !this.state.isCollapsed;
+              _a = this.props.onBeforeChange;
+              if (!_a) return [3 /*break*/, 2];
+              return [4 /*yield*/, this.props.onBeforeChange(isCollapsed)];
+            case 1:
+              _a = !_b.sent();
+              _b.label = 2;
+            case 2:
+              if (_a) {
+                return [2 /*return*/];
+              }
+
+              nextState = {};
+              nextState.isCollapsed = isCollapsed;
+              if (!nextState.isCollapsed) {
+                nextState.contentStyle = {
+                  height: 'auto',
+                  maxHeight: 'none'
+                };
+                nextState.wrapStyle = {
+                  height: 'auto'
+                };
+              }
+              this.setState(nextState, function () {
+                if (isCollapsed) {
+                  _this.delayCalculate();
+                } else {
+                  _this.props.onAfterChange(isCollapsed);
+                }
+              });
+              return [2 /*return*/];
+          }
+        });
+      });
+    };
+
+    _this.state = {
+      isCollapsed: props.lines >= 1 && props.defaultCollapsed,
+      isShowBtn: false,
+      contentStyle: {
+        maxHeight: props.defaultContentMaxHeight
+      },
+      wrapStyle: {
+        height: props.defaultWrapHeight
+      }
+    };
+    return _this;
+  }
+  ReadMoreHtml.prototype.componentDidMount = function () {
+    this.delayCalculate();
+    if (this.props.isResizeObserver) {
+      this.onResizeObserver();
+    }
+  };
+  ReadMoreHtml.prototype.componentDidUpdate = function (prevProps) {
+    if (this.props.children !== prevProps.children || this.props.lines !== prevProps.lines) {
+      // 执行render，并且跳过shouldComponentUpdate
+      this.delayCalculate();
+    }
+  };
+  ReadMoreHtml.prototype.componentWillUnmount = function () {
+    if (this.resizeObserver && this.wrapRef.current) {
+      this.resizeObserver.unobserve(this.wrapRef.current);
+    }
+  };
+  /**
+   * 计算高度并设置样式
+   */
+  ReadMoreHtml.prototype.delayCalculate = function () {
+    var _this = this;
+    var wrapElement = this.wrapRef.current;
+    var contentElement = this.contentRef.current;
+    if (!this.state.isCollapsed || this.props.lines < 1 || !wrapElement || !contentElement || !document.createTreeWalker) {
+      this.setState({
+        isCollapsed: false,
+        contentStyle: {
+          height: 'auto',
+          maxHeight: 'none'
+        },
+        wrapStyle: {
+          height: 'auto'
+        },
+        isShowBtn: false
+      });
+      return;
+    }
+    var elementRect = contentElement.getBoundingClientRect();
+    var _a = this.props,
+      ignoreClassList = _a.ignoreClassList,
+      lineThreshold = _a.lineThreshold,
+      lines = _a.lines;
+    var range = document.createRange();
+    // 将数组转换为选择器字符串: ".ignore-text1, .ignore-text2"
+    var ignoreSelector = (ignoreClassList || []).map(function (cls) {
+      return ".".concat(cls);
+    }).join(', ');
+    var treeWalker = document.createTreeWalker(contentElement, NodeFilter.SHOW_TEXT, {
+      acceptNode: function acceptNode(node) {
+        // 如果 ignoreClassList 为空，或者当前节点不属于任何忽略名单，则接受
+        if (ignoreSelector && node.parentElement.closest(ignoreSelector)) {
+          return NodeFilter.FILTER_REJECT;
+        }
+        return NodeFilter.FILTER_ACCEPT;
+      }
+    });
+    var lineCount = 0;
+    var lastTop = -1;
+    var node;
+    while (node = treeWalker.nextNode()) {
+      var text = node.textContent;
+      for (var i = 0; i < text.length; i++) {
+        if (text[i].trim() === '') continue;
+        range.setStart(node, i);
+        range.setEnd(node, i + 1);
+        var rect = range.getBoundingClientRect();
+        if (rect.height > 0) {
+          // 利用绝对坐标判断换行
+          if (lastTop === -1 || Math.abs(rect.top - lastTop) > lineThreshold) {
+            lineCount++;
+            lastTop = rect.top;
+            // 找到指定行开头的垂直位置
+            if (lineCount > lines) {
+              this.setState({
+                isShowBtn: true,
+                contentStyle: {
+                  height: "".concat(rect.top - elementRect.top, "px"),
+                  maxHeight: 'none',
+                  overflow: 'hidden'
+                },
+                wrapStyle: {
+                  height: 'auto'
+                }
+              }, function () {
+                _this.props.onAfterChange(_this.state.isCollapsed);
+              });
+              return;
+            }
+          }
+        }
+      }
+    }
+    if (lineCount <= lines) {
+      this.setState({
+        isShowBtn: false,
+        contentStyle: {
+          height: 'auto'
+        },
+        wrapStyle: {
+          height: 'auto'
+        }
+      }, function () {
+        _this.props.onAfterChange(_this.state.isCollapsed);
+      });
+    }
+  };
+  ReadMoreHtml.prototype.render = function () {
+    var cls = this.prefixCls;
+    var _a = this.props,
+      className = _a.className,
+      children = _a.children,
+      expandText = _a.expandText,
+      collapseText = _a.collapseText;
+    var _b = this.state,
+      isCollapsed = _b.isCollapsed,
+      isShowBtn = _b.isShowBtn,
+      wrapStyle = _b.wrapStyle,
+      contentStyle = _b.contentStyle;
+    return /*#__PURE__*/React.createElement("div", {
+      ref: this.wrapRef,
+      style: wrapStyle,
+      className: classNames(cls, className)
+    }, /*#__PURE__*/React.createElement("div", {
+      ref: this.contentRef,
+      style: contentStyle,
+      className: "".concat(cls, "-content")
+    }, children), isShowBtn && /*#__PURE__*/React.createElement("span", {
+      onClick: this.onChange,
+      "data-collapse": collapseText,
+      "data-expand": expandText,
+      className: classNames("".concat(cls, "-btn"), isCollapsed ? "".concat(cls, "-collapse") : "".concat(cls, "-expand"))
+    }));
+  };
+  ReadMoreHtml.defaultProps = {
+    onAfterChange: function onAfterChange() {},
+    isResizeObserver: true,
+    defaultCollapsed: true,
+    expandText: 'Show More',
+    collapseText: 'Show Less',
+    lineThreshold: 1,
+    lines: 2
+  };
+  return ReadMoreHtml;
+}(Component);
+export default ReadMoreHtml;

package/esm/read-more-html/style/index.css

@@ -0,0 +1 @@
+.ab-rdm-html,.ab-rdm-html-content{overflow:hidden}.ab-rdm-html-collapse::after,.ab-rdm-html-expand::after{line-height:.18rem;display:block;padding-top:.02rem;cursor:pointer;text-decoration:underline}.ab-rdm-html-collapse::after{content:attr(data-collapse)}.ab-rdm-html-expand::after{content:attr(data-expand)}

package/esm/select/index.d.ts

@@ -92,7 +92,6 @@ export interface SelectProps extends Pick<TriggerProps, 'windowResizeHidden' | '
 }
 interface SelectStates {
     visible: boolean;
-    isEnter: boolean;
     list: [SelectOptionItem[]];
     filterItem?: SelectOptionItem;
 }
@@ -131,8 +130,6 @@ declare class Select extends React.Component<SelectProps, SelectStates> {
     triggerSelect: (status?: boolean) => void;
     onTriggerSelect: () => void;
     onSelecting(ev: React.MouseEvent | React.TouchEvent, item: any): void;
-    onMouseEnter: () => void;
-    onMouseLeave: () => void;
     renderTitle(): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
     renderBottom(): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
     /**

package/esm/select/index.js

@@ -159,25 +159,8 @@ var Select = /** @class */function (_super) {
       }
       _this.triggerSelect(!_this.state.visible);
     };
-    _this.onMouseEnter = function () {
-      if (_this.state.isEnter || _this.props.disabled) {
-        return;
-      }
-      _this.setState({
-        isEnter: true
-      });
-    };
-    _this.onMouseLeave = function () {
-      if (!_this.state.isEnter || _this.props.disabled) {
-        return;
-      }
-      _this.setState({
-        isEnter: false
-      });
-    };
     _this.state = {
       visible: false,
-      isEnter: false,
       list: [[]]
     };
     return _this;
@@ -302,10 +285,8 @@ var Select = /** @class */function (_super) {
     return null;
   };
   Select.prototype.render = function () {
-    var _a;
-    var _b = this.state,
-      visible = _b.visible,
-      isEnter = _b.isEnter;
+    var _a, _b;
+    var visible = this.state.visible;
     var _c = this.props,
       className = _c.className,
       placeholder = _c.placeholder,
@@ -327,12 +308,10 @@ var Select = /** @class */function (_super) {
       popup: this.getSelectPopup(),
       onVisibleChange: this.triggerSelect
     }), /*#__PURE__*/React.createElement("div", {
-      className: classNames(["".concat(cls, "-input-group"), className, (_a = {}, _a["".concat(cls, "-active")] = visible, _a["".concat(cls, "-enter")] = isEnter || visible, _a["".concat(cls, "-empty")] = !currentName, _a["".concat(cls, "-disabled")] = disabled, _a)]),
-      onMouseEnter: this.onMouseEnter,
-      onMouseLeave: this.onMouseLeave,
+      className: classNames(["".concat(cls, "-input-group"), className, (_a = {}, _a["".concat(cls, "-active")] = visible, _a.disabled = disabled, _a)]),
       onClick: this.onTriggerSelect
     }, /*#__PURE__*/React.createElement("div", {
-      className: "".concat(cls, "-input-control")
+      className: classNames(["".concat(cls, "-input-control"), (_b = {}, _b["".concat(cls, "-focused")] = visible, _b["".concat(cls, "-empty")] = !currentName, _b)])
     }, currentName || placeholder), hiddenIcon ? null : /*#__PURE__*/React.createElement("span", {
       className: "".concat(cls, "-icon")
     }, typeof icon === 'function' ? icon() : icon)));

package/esm/select/style/index.css

@@ -1 +1 @@
-.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-select-wrap{min-width:177px;background-color:#fff;background-clip:padding-box;border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.15);display:flex}.ab-select-wrap.ab-trigger-fade-hr-exit-done{display:none}.ab-select-inner{flex:1;width:100%;overflow:auto}.ab-select-bottom,.ab-select-content,.ab-select-title{display:flex}.ab-select-title{padding:.09rem 0;background-color:transparent;cursor:context-menu;border-bottom:1px solid #d7d7d7;font-weight:700;color:#606060;font-size:.12rem;margin:0 .1rem}.ab-select-col{font-size:.12rem;padding-right:.07rem;flex:auto}.ab-select-col:last-child{padding-right:0}.ab-select-col>li{padding:.08rem .11rem;cursor:pointer}.ab-select-col>li:hover{background-color:#eee}.ab-select-col>li.ab-select-active{background-color:#e6f7ff}.ab-select-col>li.ab-select-unselect{background-color:transparent;cursor:context-menu}.ab-select-input-group{position:relative;display:flex;align-items:center;border:1px solid #ccc;cursor:pointer;border-radius:.02rem;user-select:none;padding:.08rem .07rem;font-size:.12rem;background-color:#fff;transition:.2s}.ab-select-input-group.ab-select-active,.ab-select-input-group.ab-select-enter{border-color:#348fee}.ab-select-input-group.ab-select-active{box-shadow:0 0 2px rgba(52,143,238,.8)}.ab-select-input-group.ab-select-empty{color:#888}.ab-select-input-group.ab-select-disabled{cursor:not-allowed}.ab-select-input-control{flex:1;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.ab-select-icon{position:relative;margin-left:.04rem;width:.14rem;height:.14rem}.ab-select-icon svg{position:absolute;left:50%;top:50%;color:#ccc;font-size:.12rem;transition:transform .2s;transform:translate(-50%,-50%)}.ab-select-active .ab-select-icon svg{transform:translate(-50%,-50%) rotate(180deg)}@media only screen and (max-width:767px){.ab-select-content{display:block}.ab-select-input-group{font-size:.14rem;padding:.1rem .07rem}.ab-select-col{padding-right:0}}
+.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-select-wrap{min-width:177px;background-color:#fff;background-clip:padding-box;border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.15);display:flex}.ab-select-wrap.ab-trigger-fade-hr-exit-done{display:none}.ab-select-inner{flex:1;width:100%;overflow:auto}.ab-select-bottom,.ab-select-content,.ab-select-title{display:flex}.ab-select-title{padding:.09rem 0;background-color:transparent;cursor:context-menu;border-bottom:1px solid #d7d7d7;font-weight:700;color:#606060;font-size:.12rem;margin:0 .1rem}.ab-select-col{font-size:.12rem;padding-right:.07rem;flex:auto}.ab-select-col:last-child{padding-right:0}.ab-select-col>li{padding:.08rem .11rem;cursor:pointer}.ab-select-col>li:hover{background-color:#eee}.ab-select-col>li.ab-select-active{background-color:#e6f7ff}.ab-select-col>li.ab-select-unselect{background-color:transparent;cursor:context-menu}.ab-select-input-group{position:relative;overflow:hidden}.ab-select-input-control{appearance:none;outline:0;user-select:none;width:100%;border:1px solid #ccc;border-radius:2px;resize:none;transition:.2s;background-color:#fff;text-overflow:ellipsis;padding:.08rem .28rem .07rem .07rem;font-size:.14rem;white-space:nowrap;overflow:hidden;max-width:100%;cursor:pointer}.ab-select-input-control.ab-select-focused{box-shadow:0 0 4px rgba(52,143,238,.8);border-color:rgba(52,143,238,.8)}.ab-select-input-control.ab-select-empty{color:#888}.ab-select-input-control.error{background-color:#fffacd}.ab-select-icon{position:absolute;right:.21rem;top:50%;color:#ccc;font-size:0;transform:translate(100%,-50%);transition:transform .2s}.ab-select-icon svg{font-size:.12rem}.ab-select-active .ab-select-icon{transform:translate(100%,-50%) rotate(180deg)}@media only screen and (max-width:767px){.ab-select-content{display:block}.ab-select-input-control{padding:.1rem .05rem;font-size:.14rem}.ab-select-col{padding-right:0}}

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

@@ -21,9 +21,9 @@ export interface ShowMoreProps {
      */
     lines?: number;
     /**
-     * 定义内容宽度，单位：px，建议尽量不要使用此属性，当不使用时，根据父元素进行判断
+     * 是否执行resizeObserver监听宽度变化
      */
-    width?: number;
+    isResizeObserver?: boolean;
     /**
      * title属性
      */
@@ -33,9 +33,17 @@ export interface ShowMoreProps {
      */
     expandable?: boolean;
     /**
-     * 点击展开后的回调函数
+     * 展开后点击收起的文字，若为空则代表没有点击收起的功能
      */
-    onAfterChange?: () => void;
+    collapseText?: string;
+    /**
+     * 收起按钮样式， 注意不能加padding样式， 可以通过空格来解决左右间距问题
+     */
+    collapseClassName?: string;
+    /**
+     * 点击展开/收起后的回调函数
+     */
+    onAfterChange?: (isExpand: boolean) => void;
     /**
      * 渲染后的回调函数
      */
@@ -51,34 +59,41 @@ 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;
-    textElement: HTMLSpanElement | null;
-    setTargetElement: (el: HTMLSpanElement) => HTMLSpanElement;
-    setChildrenElement: (el: HTMLSpanElement) => HTMLSpanElement;
+    wrapRef: React.RefObject<HTMLDivElement>;
+    contentRef: React.RefObject<HTMLSpanElement>;
+    childrenRef: React.RefObject<HTMLSpanElement>;
+    resizeObserver: ResizeObserver;
+    wrapWidth: number;
+    targetWidth: number;
     canvasContext: CanvasRenderingContext2D;
+    childrenText: string;
     timer: any;
-    targetWidth: number;
     constructor(props: ShowMoreProps);
     componentDidMount(): void;
     componentDidUpdate(prevProps: ShowMoreProps): void;
     componentWillUnmount(): void;
+    onResizeObserver: () => void;
     setHiddenTextStatus: () => void;
-    delayCalculate(): void;
-    onChange: () => void;
+    delayCalculate(isRefresh?: boolean): void;
+    onExpand: () => void;
+    onCollapse: () => void;
     innerText: (node: HTMLSpanElement) => string;
     calcTargetWidth: (callback?: () => void) => void;
     measureWidth: (text: string) => number;
+    onRefreshChildrenText: () => string;
     getLines: (targetWidth: number) => {
         lines: any[];
         hiddenLineStr: string;
     };
     renderLine: (line: React.ReactChild, i: number, arr: React.ReactChild[]) => JSX.Element | JSX.Element[];
-    setRenderText: (callback: () => void, isHidden?: boolean) => void;
+    setRenderText: (callback: () => void, isTruncated: boolean) => void;
     render(): JSX.Element;
 }
 export default ShowMore;