@autobest-ui/components 2.13.12 → 2.14.0

package/lib/read-more/index.js

@@ -0,0 +1,388 @@
+"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 = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _utils = require("@autobest-ui/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 || {
+      __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 = void 0 && (void 0).__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 = void 0 && (void 0).__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
+    };
+  }
+};
+var ReadMore = /** @class */function (_super) {
+  __extends(ReadMore, _super);
+  function ReadMore(props) {
+    var _this = _super.call(this, props) || this;
+    _this.wrapRef = /*#__PURE__*/_react.default.createRef();
+    _this.prefixCls = 'ab-read-more';
+    /**
+     * 创建Show More/Show Less 按钮
+     */
+    _this.getButtonElement = function (wrapElement, isCollapsed) {
+      var cls = _this.prefixCls;
+      var _a = _this.props,
+        collapseText = _a.collapseText,
+        expandText = _a.expandText;
+      var btn = document.createElement('span');
+      btn.setAttribute('data-collapse', collapseText);
+      btn.setAttribute('data-expand', expandText);
+      _this.isCollapsed = isCollapsed;
+      btn.className = "".concat(cls, "-btn ").concat(isCollapsed ? "".concat(cls, "-collapse") : "".concat(cls, "-expand"));
+      var self = _this;
+      btn.onclick = function () {
+        return __awaiter(_this, void 0, void 0, function () {
+          var _a;
+          return __generator(this, function (_b) {
+            switch (_b.label) {
+              case 0:
+                _a = self.props.onBeforeChange;
+                if (!_a) return [3 /*break*/, 2];
+                return [4 /*yield*/, self.props.onBeforeChange(!self.isCollapsed)];
+              case 1:
+                _a = !_b.sent();
+                _b.label = 2;
+              case 2:
+                if (_a) {
+                  return [2 /*return*/];
+                }
+
+                if (self.isCollapsed) {
+                  self.isCollapsed = false;
+                  btn.className = "".concat(cls, "-btn ").concat(cls, "-expand");
+                  wrapElement.innerHTML = self.originalContent;
+                  wrapElement.appendChild(btn);
+                } else {
+                  self.isCollapsed = true;
+                  wrapElement.innerHTML = self.originalContent;
+                  self.delayCalculate();
+                }
+                if (self.props.onAfterChange) {
+                  self.props.onAfterChange(self.isCollapsed);
+                }
+                return [2 /*return*/];
+            }
+          });
+        });
+      };
+
+      return btn;
+    };
+    _this.applyToggle = function (wrapElement, node, index) {
+      // 1. 将文本节点在 index 处切分为两个
+      var remainingTextNode = node.splitText(index);
+      // 2. 创建一个“隐藏层”容器
+      var hiddenWrapper = document.createElement('div');
+      hiddenWrapper.className = "".concat(_this.prefixCls, "-hidden");
+      // 3. 将截断点之后的所有兄弟节点（不限于文本，包括 HTML 标签）移入隐藏层
+      var nextSibling = remainingTextNode;
+      while (nextSibling) {
+        var current = nextSibling;
+        nextSibling = nextSibling.nextSibling;
+        hiddenWrapper.appendChild(current);
+        // appendChild 会将节点从原位置移动到 hiddenWrapper 中，而不销毁
+      }
+      // 同样需要递归移入父级元素之后的所有兄弟节点，确保彻底隐藏
+      var parent = node.parentNode;
+      while (parent && parent !== wrapElement) {
+        var sib = parent.nextSibling;
+        while (sib) {
+          var currentSib = sib;
+          sib = sib.nextSibling;
+          hiddenWrapper.appendChild(currentSib);
+        }
+        parent = parent.parentNode;
+      }
+      var buttonElement = _this.getButtonElement(wrapElement, true);
+      node.parentNode.insertBefore(buttonElement, node.nextSibling);
+      wrapElement.appendChild(hiddenWrapper);
+      _this.setState({
+        wrapStyle: {
+          maxHeight: 'none'
+        }
+      });
+    };
+    _this.onResizeObserver = function () {
+      var debounceCalculate = (0, _utils.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.isCollapsed = props.lines >= 1 && props.defaultCollapsed;
+    _this.state = {
+      wrapStyle: {
+        maxHeight: props.defaultWrapMaxHeight
+      }
+    };
+    return _this;
+  }
+  ReadMore.prototype.componentDidMount = function () {
+    var wrapElement = this.wrapRef.current;
+    if (!wrapElement) {
+      return;
+    }
+    this.originalContent = wrapElement.innerHTML;
+    if (!this.isCollapsed) {
+      var buttonElement = this.getButtonElement(wrapElement, false);
+      wrapElement.appendChild(buttonElement);
+      this.setState({
+        wrapStyle: {
+          maxHeight: 'none'
+        }
+      });
+    }
+    this.delayCalculate();
+    if (this.props.isResizeObserver) {
+      this.onResizeObserver();
+    }
+  };
+  ReadMore.prototype.componentDidUpdate = function (prevProps) {
+    if (this.props.children !== prevProps.children || this.props.lines !== prevProps.lines) {
+      this.originalContent = this.wrapRef.current ? this.wrapRef.current.innerHTML : '';
+      // 执行render，并且跳过shouldComponentUpdate
+      this.delayCalculate();
+    }
+  };
+  ReadMore.prototype.componentWillUnmount = function () {
+    if (this.resizeObserver && this.wrapRef.current) {
+      this.resizeObserver.unobserve(this.wrapRef.current);
+    }
+  };
+  /**
+   * 计算高度并设置样式
+   */
+  ReadMore.prototype.delayCalculate = function () {
+    var wrapElement = this.wrapRef.current;
+    if (!this.isCollapsed || this.props.lines < 1 || !wrapElement || !document.createTreeWalker) {
+      this.setState({
+        wrapStyle: {
+          maxHeight: 'none'
+        }
+      });
+      return;
+    }
+    var wrapRect = wrapElement.getBoundingClientRect();
+    this.cacheWrapWidth = wrapRect.width;
+    var _a = this.props,
+      ignoreClassList = _a.ignoreClassList,
+      lineThreshold = _a.lineThreshold,
+      lines = _a.lines,
+      buttonWidth = _a.buttonWidth;
+    // 将数组转换为选择器字符串: ".ignore-text1, .ignore-text2"
+    var ignoreSelector = (ignoreClassList || []).map(function (cls) {
+      return ".".concat(cls);
+    }).join(', ');
+    var range = document.createRange();
+    var treeWalker = document.createTreeWalker(wrapElement, 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 targetNode = null;
+    var splitIndex = 0;
+    // 1. 寻找第 targetLine 行的末尾空格位置
+    var node = null;
+    while (node = treeWalker.nextNode()) {
+      var text = node.textContent;
+      for (var i = 0; i < text.length; i++) {
+        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) {
+            if ((text[i] === ' ' || text[i] === '\n') && wrapRect.right - rect.right > buttonWidth) {
+              targetNode = node;
+              splitIndex = i;
+            }
+          } else if (lineCount > lines) break;
+        }
+      }
+      if (lineCount > lines) break;
+    }
+    if (targetNode) {
+      this.applyToggle(wrapElement, targetNode, splitIndex);
+    }
+  };
+  ReadMore.prototype.render = function () {
+    var cls = this.prefixCls;
+    var _a = this.props,
+      className = _a.className,
+      children = _a.children;
+    var wrapStyle = this.state.wrapStyle;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      ref: this.wrapRef,
+      style: wrapStyle,
+      className: (0, _classnames.default)(cls, className)
+    }, children);
+  };
+  ReadMore.defaultProps = {
+    onAfterChange: function onAfterChange() {},
+    isResizeObserver: true,
+    defaultCollapsed: true,
+    expandText: 'Show Less',
+    buttonWidth: 75,
+    collapseText: '...Show More',
+    lineThreshold: 10,
+    lines: 2
+  };
+  return ReadMore;
+}(_react.Component);
+var _default = ReadMore;
+exports.default = _default;

package/lib/read-more/style/index.css

@@ -0,0 +1 @@
+.ab-read-more{overflow:hidden}.ab-read-more-hidden{display:none}.ab-read-more-collapse,.ab-read-more-expand{user-select:none}.ab-read-more-collapse::after,.ab-read-more-expand::after{color:#4068b0;cursor:pointer}.ab-read-more-collapse::after{content:" " attr(data-collapse)}.ab-read-more-expand::after{content:" " attr(data-expand)}

package/lib/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;