vantui-edit/lib/ellipsis/index.js

一套适用于Taro3及React的vantui组件库

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = Ellipsis;

var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));

var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _react = require("react");

var _components = require("@tarojs/components");

var _taro = require("@tarojs/taro");

var _utils = require("../common/utils");

var _jsxRuntime = require("react/jsx-runtime");

var preCls = 'van-ellipsis';
var chineseReg = /^[\u4e00-\u9fa5]+$/;
var digitReg = /^[0-9]+$/;
var letterUpperReg = /^[A-Z]+$/;
var letterLowerReg = /^[a-z]+$/;
var defaultWidthBase = [14, 10, 7, 8.4, 10]; // 中、英(大)、英(小)、数字、其他字符的基础宽度

function Ellipsis(_ref) {
  var children = _ref.children,
      _ref$symbol = _ref.symbol,
      symbol = _ref$symbol === void 0 ? '...' : _ref$symbol,
      _ref$expandText = _ref.expandText,
      expandText = _ref$expandText === void 0 ? '展开' : _ref$expandText,
      _ref$collapseText = _ref.collapseText,
      collapseText = _ref$collapseText === void 0 ? '收起' : _ref$collapseText,
      _ref$rows = _ref.rows,
      rows = _ref$rows === void 0 ? 2 : _ref$rows,
      _ref$className = _ref.className,
      className = _ref$className === void 0 ? '' : _ref$className,
      _ref$defaultExpand = _ref.defaultExpand,
      defaultExpand = _ref$defaultExpand === void 0 ? false : _ref$defaultExpand,
      _ref$hiddenAction = _ref.hiddenAction,
      hiddenAction = _ref$hiddenAction === void 0 ? false : _ref$hiddenAction;

  var _useState = (0, _react.useState)(''),
      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
      content = _useState2[0],
      setContent = _useState2[1];

  var _useState3 = (0, _react.useState)(defaultExpand),
      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
      expand = _useState4[0],
      setExpand = _useState4[1];

  var randomRef = (0, _react.useRef)(Math.random().toString(36).slice(-8));
  var getCutChildren = (0, _react.useCallback)(function (_ref2) {
    var containerWidth = _ref2.containerWidth,
        symbolWidth = _ref2.symbolWidth,
        actionWidth = _ref2.actionWidth,
        _ref2$widthBase = _ref2.widthBase,
        widthBase = _ref2$widthBase === void 0 ? defaultWidthBase : _ref2$widthBase;
    var strWidth = containerWidth * rows - symbolWidth - actionWidth;
    var width = 0;
    var cutIndex = 0;

    for (var i = 0; i < children.length; i++) {
      var stringItem = children[i] || '';

      if (chineseReg.test(stringItem)) {
        width = Number(width + (widthBase[0] || 1));
      } else if (letterUpperReg.test(stringItem)) {
        width = Number(width + (widthBase[1] || 1));
      } else if (letterLowerReg.test(stringItem)) {
        width = Number(width + (widthBase[2] || 1));
      } else if (digitReg.test(stringItem)) {
        width = Number(width + (widthBase[3] || 1));
      } else {
        width = Number(width + (widthBase[4] || 1));
      }

      if (width <= strWidth) {
        cutIndex = i;
      } else {
        break;
      }
    }

    return children.slice(0, cutIndex);
  }, [children, rows]);
  var getAllWidth = (0, _react.useCallback)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
    var containerDom, containerDomC, symbolDom, actionDom, fontSize, newChildren;
    return _regenerator.default.wrap(function _callee$(_context) {
      while (1) {
        switch (_context.prev = _context.next) {
          case 0:
            _context.next = 2;
            return (0, _utils.getRect)(null, ".".concat(preCls, "-hidden_").concat(randomRef.current));

          case 2:
            containerDom = _context.sent;
            _context.next = 5;
            return getComputeStyle(".".concat(preCls, "-hidden_").concat(randomRef.current));

          case 5:
            containerDomC = _context.sent;
            _context.next = 8;
            return (0, _utils.getRect)(null, ".".concat(preCls, "-hidden-symbol_").concat(randomRef.current));

          case 8:
            symbolDom = _context.sent;
            _context.next = 11;
            return (0, _utils.getRect)(null, ".".concat(preCls, "-hidden-action_").concat(randomRef.current));

          case 11:
            actionDom = _context.sent;

            if (containerDom.width && symbolDom.width) {
              fontSize = 14;
              if (containerDomC) fontSize = containerDomC.fontSize;
              newChildren = getCutChildren({
                containerWidth: containerDom.width,
                symbolWidth: symbolDom ? symbolDom.width : 0,
                actionWidth: actionDom ? actionDom.width : 0,
                widthBase: [fontSize, fontSize * 0.72, fontSize * 0.53, fontSize * 0.4, fontSize * 0.75]
              });
              setContent(newChildren);
            }

          case 13:
          case "end":
            return _context.stop();
        }
      }
    }, _callee);
  })), [getCutChildren]);
  var handleExpand = (0, _react.useCallback)(function () {
    setExpand(!expand);
  }, [expand]);
  (0, _react.useEffect)(function () {
    setTimeout(function () {
      getAllWidth();
    }, 100); // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [children]);
  (0, _taro.useReady)(function () {
    setTimeout(function () {
      getAllWidth();
    }, 100);
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.View, {
    className: "".concat(preCls, "-wrapper"),
    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.View, {
      className: "".concat(preCls, "-show"),
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Text, {
        className: "".concat(preCls, " ").concat(className),
        children: expand ? children : content
      }), !expand && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Text, {
        className: "".concat(preCls, "-symbol"),
        children: symbol
      }), !hiddenAction && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Text, {
        className: "".concat(preCls, "-action"),
        onClick: handleExpand,
        children: expand ? collapseText : expandText
      })]
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.View, {
      className: "".concat(preCls, " ").concat(preCls, "-hidden ").concat(preCls, "-hidden_").concat(randomRef.current, " ").concat(className),
      children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Text, {
        className: "".concat(preCls, "-symbol ").concat(preCls, "-hidden-symbol_").concat(randomRef.current),
        children: symbol
      }), !hiddenAction && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Text, {
        className: "".concat(preCls, "-action ").concat(preCls, "-hidden-action_").concat(randomRef.current),
        children: expand ? collapseText : expandText
      })]
    })]
  });
}

function getComputeStyle(target) {
  return new Promise(function (resolve) {
    var query = (0, _taro.createSelectorQuery)();
    query.select(target).fields({
      computedStyle: ['width', 'height', 'lineHeight', 'paddingTop', 'paddingBottom', 'fontSize']
    }, function (res) {
      var data = {};
      Object.keys(res).map(function (key) {
        var item = res[key];
        data[key] = typeof item === 'string' ? Number(item.replace('px', '')) : item;
      });
      resolve(data);
    }).exec();
  });
}