@antmjs/vantui
Version:
一套适用于Taro3及React的vantui组件库
175 lines (174 loc) • 8.33 kB
JavaScript
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _regeneratorRuntime from "@babel/runtime/regenerator";
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
import { useState, useRef, useCallback, useEffect } from 'react';
import { View, Text } from '@tarojs/components';
import { createSelectorQuery, useReady } from '@tarojs/taro';
import { getRect } from '../common/utils';
import { get } from '../default-props';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "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]; // 中、英(大)、英(小)、数字、其他字符的基础宽度
export default function Ellipsis(props) {
var _useState = useState(get().Ellipsis),
_useState2 = _slicedToArray(_useState, 1),
d = _useState2[0];
var _d$props = _objectSpread(_objectSpread({}, d), props),
children = _d$props.children,
_d$props$symbol = _d$props.symbol,
symbol = _d$props$symbol === void 0 ? '...' : _d$props$symbol,
_d$props$expandText = _d$props.expandText,
expandText = _d$props$expandText === void 0 ? '展开' : _d$props$expandText,
_d$props$collapseText = _d$props.collapseText,
collapseText = _d$props$collapseText === void 0 ? '收起' : _d$props$collapseText,
_d$props$rows = _d$props.rows,
rows = _d$props$rows === void 0 ? 2 : _d$props$rows,
_d$props$className = _d$props.className,
className = _d$props$className === void 0 ? '' : _d$props$className,
_d$props$defaultExpan = _d$props.defaultExpand,
defaultExpand = _d$props$defaultExpan === void 0 ? false : _d$props$defaultExpan,
_d$props$hiddenAction = _d$props.hiddenAction,
hiddenAction = _d$props$hiddenAction === void 0 ? false : _d$props$hiddenAction,
_d$props$rectWrapper = _d$props.rectWrapper,
rectWrapper = _d$props$rectWrapper === void 0 ? '' : _d$props$rectWrapper;
var _useState3 = useState(''),
_useState4 = _slicedToArray(_useState3, 2),
content = _useState4[0],
setContent = _useState4[1];
var _useState5 = useState(defaultExpand),
_useState6 = _slicedToArray(_useState5, 2),
expand = _useState6[0],
setExpand = _useState6[1];
var randomRef = useRef(Math.random().toString(36).slice(-8));
var getCutChildren = useCallback(function (_ref) {
var containerWidth = _ref.containerWidth,
symbolWidth = _ref.symbolWidth,
actionWidth = _ref.actionWidth,
_ref$widthBase = _ref.widthBase,
widthBase = _ref$widthBase === void 0 ? defaultWidthBase : _ref$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 = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
var containerDom, containerDomC, symbolDom, actionDom, fontSize, newChildren;
return _regeneratorRuntime.wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
_context.next = 2;
return getRect(null, ".".concat(preCls, "-hidden_").concat(randomRef.current), rectWrapper);
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 getRect(null, ".".concat(preCls, "-hidden-symbol_").concat(randomRef.current), rectWrapper);
case 8:
symbolDom = _context.sent;
_context.next = 11;
return getRect(null, ".".concat(preCls, "-hidden-action_").concat(randomRef.current), rectWrapper);
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 = useCallback(function () {
setExpand(!expand);
}, [expand]);
useEffect(function () {
setTimeout(function () {
getAllWidth();
}, 100);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [children]);
useReady(function () {
setTimeout(function () {
getAllWidth();
}, 100);
});
return /*#__PURE__*/_jsxs(View, {
className: "".concat(preCls, "-wrapper"),
children: [/*#__PURE__*/_jsxs(View, {
className: "".concat(preCls, "-show"),
children: [/*#__PURE__*/_jsx(Text, {
className: "".concat(preCls, " ").concat(className),
children: expand ? children : content
}), !expand && /*#__PURE__*/_jsx(Text, {
className: "".concat(preCls, "-symbol"),
children: symbol
}), !hiddenAction && /*#__PURE__*/_jsx(Text, {
className: "".concat(preCls, "-action"),
onClick: handleExpand,
children: expand ? collapseText : expandText
})]
}), /*#__PURE__*/_jsxs(View, {
className: "".concat(preCls, " ").concat(preCls, "-hidden ").concat(preCls, "-hidden_").concat(randomRef.current, " ").concat(className),
children: [children, /*#__PURE__*/_jsx(Text, {
className: "".concat(preCls, "-symbol ").concat(preCls, "-hidden-symbol_").concat(randomRef.current),
children: symbol
}), !hiddenAction && /*#__PURE__*/_jsx(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 = 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();
});
}