@nutui/nutui-react-taro
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
348 lines (347 loc) • 16.7 kB
JavaScript
import { _ as _async_to_generator } from "@swc/helpers/_/_async_to_generator";
import { _ as _define_property } from "@swc/helpers/_/_define_property";
import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
import React, { useState, useRef, useEffect } from "react";
import { nextTick, createSelectorQuery } from "@tarojs/taro";
import classNames from "classnames";
import { View } from "@tarojs/components";
import { getRectInMultiPlatform, getRectInMultiPlatformWithoutCache } from "../../utils/taro/get-rect";
import { ComponentDefaults } from "../../utils/typings";
import { useRtl } from "../configprovider/index";
var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
content: '',
direction: 'end',
rows: 1,
expandText: '',
collapseText: '',
symbol: '...',
lineHeight: '20',
width: 'auto'
});
var classPrefix = "nut-ellipsis";
export var Ellipsis = function(props) {
var _ellipsis_current, _ellipsis_current1, _ellipsis_current2, _ellipsis_current3;
var _ref = _object_spread({}, defaultProps, props), children = _ref.children, content = _ref.content, direction = _ref.direction, rows = _ref.rows, className = _ref.className, expandText = _ref.expandText, collapseText = _ref.collapseText, symbol = _ref.symbol, lineHeight = _ref.lineHeight, width = _ref.width, onClick = _ref.onClick, onChange = _ref.onChange, rest = _object_without_properties(_ref, [
"children",
"content",
"direction",
"rows",
"className",
"expandText",
"collapseText",
"symbol",
"lineHeight",
"width",
"onClick",
"onChange"
]);
var maxHeight = useRef(0);
var _useState = _sliced_to_array(useState(false), 2), exceeded = _useState[0], setExceeded = _useState[1];
var _useState1 = _sliced_to_array(useState(false), 2), expanded = _useState1[0], setExpanded = _useState1[1];
var _useState2 = _sliced_to_array(useState(false), 2), cacled = _useState2[0], setCacled = _useState2[1];
var ellipsis = useRef({
leading: '',
tailing: ''
});
var root = useRef(null);
var rootContain = useRef(null);
var symbolContain = useRef(null);
var _useState3 = _sliced_to_array(useState(content), 2), contentCopy = _useState3[0], setContentCopy = _useState3[1];
var lineH = useRef(0) // 当行的最大高度
;
var originHeight = useRef(0) // 原始高度
;
var refRandomId = useRef(Math.random().toString(36).slice(-8));
var widthRef = useRef('auto');
var widthBase = useRef([
14,
10,
7,
8.4,
10
]) // 中、英(大)、英(小)、数字、其他字符的基础宽度
;
var symbolTextWidth = useRef(widthBase.current[0] * 0.7921);
var chineseReg = /^[\u4e00-\u9fa5]+$/ // 汉字
;
var digitReg = /^[0-9]+$/ // 数字
;
var letterUpperReg = /^[A-Z]+$/ // 字母
;
var letterLowerReg = /^[a-z]+$/ // 字母
;
var rtl = useRtl();
var rtlClasses = classNames(_define_property({}, "".concat(classPrefix, "-rtl"), rtl));
var classes = classNames(classPrefix, width ? "".concat(classPrefix, "-width") : '', rtlClasses, className);
useEffect(function() {
setContentCopy(content);
nextTick(function() {
getSymbolInfo();
getReference();
});
return function() {
setCacled(false);
};
}, [
content
]);
// 获取省略号宽度
var getSymbolInfo = function() {
return _async_to_generator(function() {
var refe;
return _ts_generator(this, function(_state) {
switch(_state.label){
case 0:
return [
4,
getRectInMultiPlatform(symbolContain === null || symbolContain === void 0 ? void 0 : symbolContain.current)
];
case 1:
refe = _state.sent();
symbolTextWidth.current = refe.width ? Math.ceil(refe.width) : Math.ceil(widthBase.current[0] * 0.7921);
return [
2
];
}
});
})();
};
var symbolText = function() {
if (direction === 'end' || direction === 'middle') {
return "".concat(symbol).concat(expandText);
}
return "".concat(symbol).concat(expandText).concat(symbol);
};
var getReference = function() {
return _async_to_generator(function() {
var query;
return _ts_generator(this, function(_state) {
query = createSelectorQuery();
query.select("#root".concat(refRandomId.current)) && query.select("#root".concat(refRandomId.current)).fields({
computedStyle: [
'width',
'height',
'lineHeight',
'paddingTop',
'paddingBottom',
'fontSize'
]
}, function(res) {
if (!res) return;
lineH.current = pxToNumber(res.lineHeight === 'normal' ? lineHeight : res.lineHeight);
maxHeight.current = Math.floor(lineH.current * (Number(rows) + 0.5) + pxToNumber(res.paddingTop) + pxToNumber(res.paddingBottom));
originHeight.current = pxToNumber(res.height);
widthRef.current = res.width;
// 设置基础字符
var bsize = pxToNumber(res.fontSize);
widthBase.current = [
bsize,
bsize * 0.72,
bsize * 0.53,
bsize * 0.4,
bsize * 0.75
];
if (rootContain.current && rootContain.current.style) {
rootContain.current.style.fontSize = "".concat(bsize, "px");
}
calcEllipse();
}).exec();
return [
2
];
});
})();
};
// 计算省略号的位置
var calcEllipse = function() {
return _async_to_generator(function() {
var refe, rowNum, end, end1, start;
return _ts_generator(this, function(_state) {
switch(_state.label){
case 0:
return [
4,
getRectInMultiPlatform(rootContain.current)
];
case 1:
refe = _state.sent();
if (refe.height <= maxHeight.current) {
setExceeded(false);
setCacled(true);
} else {
rowNum = Math.floor(content.length / (originHeight.current / lineH.current - 1)); // 每行的字数
if (direction === 'middle') {
end = content.length;
ellipsis.current.leading = tailorContent(0, rowNum * (Number(rows) + 0.5), 'end');
ellipsis.current.tailing = tailorContent(content.length - rowNum * (Number(rows) + 0.5), end, 'start');
} else if (direction === 'end') {
end1 = rowNum * (Number(rows) + 0.5);
ellipsis.current.leading = tailorContent(0, end1);
} else {
start = content.length - rowNum * (Number(rows) + 0.5) - 5;
ellipsis.current.tailing = tailorContent(start, content.length);
}
// 进行兜底判断，是否符合要求
assignContent();
setTimeout(function() {
verifyEllipsis();
}, 100);
}
return [
2
];
}
});
})();
};
// 验证省略号
var verifyEllipsis = function() {
return _async_to_generator(function() {
var refe, _ellipsis_current_leading, _ellipsis_current, _ellipsis_current_leading1, _ellipsis_current1, _ellipsis_current2, _ellipsis_current_tailing, _ellipsis_current3;
return _ts_generator(this, function(_state) {
switch(_state.label){
case 0:
return [
4,
getRectInMultiPlatformWithoutCache(rootContain.current)
];
case 1:
refe = _state.sent();
if (refe && refe.height && refe.height > maxHeight.current) {
if (direction === 'end') {
;
ellipsis.current.leading = (_ellipsis_current1 = ellipsis.current) === null || _ellipsis_current1 === void 0 ? void 0 : (_ellipsis_current_leading1 = _ellipsis_current1.leading) === null || _ellipsis_current_leading1 === void 0 ? void 0 : _ellipsis_current_leading1.slice(0, (((_ellipsis_current = ellipsis.current) === null || _ellipsis_current === void 0 ? void 0 : (_ellipsis_current_leading = _ellipsis_current.leading) === null || _ellipsis_current_leading === void 0 ? void 0 : _ellipsis_current_leading.length) || 0) - 1);
} else {
;
ellipsis.current.tailing = (_ellipsis_current3 = ellipsis.current) === null || _ellipsis_current3 === void 0 ? void 0 : (_ellipsis_current_tailing = _ellipsis_current3.tailing) === null || _ellipsis_current_tailing === void 0 ? void 0 : _ellipsis_current_tailing.slice(1, (_ellipsis_current2 = ellipsis.current) === null || _ellipsis_current2 === void 0 ? void 0 : _ellipsis_current2.tailing.length);
}
assignContent();
setTimeout(function() {
verifyEllipsis();
}, 100);
}
return [
2
];
}
});
})();
};
var assignContent = function() {
var _ellipsis_current, _ellipsis_current1, _ellipsis_current2, _ellipsis_current3;
var newContent = "".concat(((_ellipsis_current = ellipsis.current) === null || _ellipsis_current === void 0 ? void 0 : _ellipsis_current.leading) || '').concat(((_ellipsis_current1 = ellipsis.current) === null || _ellipsis_current1 === void 0 ? void 0 : _ellipsis_current1.leading) ? symbol : '').concat(expandText || '').concat(((_ellipsis_current2 = ellipsis.current) === null || _ellipsis_current2 === void 0 ? void 0 : _ellipsis_current2.tailing) ? symbol : '').concat(((_ellipsis_current3 = ellipsis.current) === null || _ellipsis_current3 === void 0 ? void 0 : _ellipsis_current3.tailing) || '');
setContentCopy(newContent);
};
// 计算省略号
var tailorContent = function(left, right) {
var type = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : '';
var threeDotWidth = symbolTextWidth.current;
var direc = direction === 'middle' && type ? type : direction;
setExceeded(true);
var widthPart = -1;
var start = left;
var end = right;
var cutoff = 0;
var marking = 0;
if (direc === 'end') {
marking = start;
cutoff = end;
} else {
marking = end;
cutoff = start;
}
var contentWidth = pxToNumber(widthRef.current) * Number(rows) - threeDotWidth;
var contentPartWidth = direction === 'middle' ? contentWidth / 2 : contentWidth;
while(widthPart < contentPartWidth){
var zi = content[marking];
if (chineseReg.test(zi)) {
widthPart = Number(widthPart + widthBase.current[0]);
} else if (letterUpperReg.test(zi)) {
widthPart = Number(widthPart + widthBase.current[1]);
} else if (letterLowerReg.test(zi)) {
widthPart = Number(widthPart + widthBase.current[2]);
} else if (digitReg.test(zi)) {
widthPart = Number(widthPart + widthBase.current[3]);
} else {
widthPart = Number(widthPart + widthBase.current[4]);
}
cutoff = marking;
direc === 'end' ? marking++ : marking--;
}
if (direc === 'end') {
return content.slice(0, cutoff);
}
return content.slice(cutoff, end);
};
var pxToNumber = function(value) {
if (!value) return 0;
var match = value.match(/^\d*(\.\d*)?/);
return match ? Number(match[0]) : 0;
};
var clickHandle = function(type) {
if (type === 1) {
setExpanded(true);
onChange && onChange('expand');
} else {
setExpanded(false);
onChange && onChange('collapse');
}
};
var handleClick = function() {
onClick && onClick();
};
return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", _object_spread({
className: classes,
onClick: handleClick,
ref: root,
id: "root".concat(refRandomId.current)
}, rest), /*#__PURE__*/ React.createElement(View, null, !exceeded ? /*#__PURE__*/ React.createElement(View, {
className: "nut-ellipsis-wordbreak",
style: {
width: "".concat(!Number.isNaN(Number(width)) ? "".concat(width, "px") : 'auto'),
minHeight: '20px',
height: cacled ? 'auto' : '20px',
overflow: 'hidden'
}
}, content) : null, exceeded && !expanded ? /*#__PURE__*/ React.createElement(View, {
className: "nut-ellipsis-wordbreak",
style: {
width: "".concat(!Number.isNaN(Number(width)) ? "".concat(width, "px") : 'auto')
}
}, (_ellipsis_current = ellipsis.current) === null || _ellipsis_current === void 0 ? void 0 : _ellipsis_current.leading, ((_ellipsis_current1 = ellipsis.current) === null || _ellipsis_current1 === void 0 ? void 0 : _ellipsis_current1.leading) && symbol, expandText ? /*#__PURE__*/ React.createElement("span", {
className: "nut-ellipsis-text",
onClick: function(e) {
e.stopPropagation();
clickHandle(1);
}
}, expandText) : null, ((_ellipsis_current2 = ellipsis.current) === null || _ellipsis_current2 === void 0 ? void 0 : _ellipsis_current2.tailing) && symbol, (_ellipsis_current3 = ellipsis.current) === null || _ellipsis_current3 === void 0 ? void 0 : _ellipsis_current3.tailing) : null, exceeded && expanded ? /*#__PURE__*/ React.createElement(View, {
style: {
width: "".concat(!Number.isNaN(Number(width)) ? "".concat(width, "px") : 'auto')
}
}, content, expandText ? /*#__PURE__*/ React.createElement("span", {
className: "nut-ellipsis-text",
onClick: function(e) {
e.stopPropagation();
clickHandle(2);
}
}, collapseText) : null) : null)), /*#__PURE__*/ React.createElement(View, {
className: "nut-ellipsis-copy",
ref: rootContain,
id: "rootContain".concat(refRandomId.current),
style: {
width: "".concat(widthRef.current)
}
}, /*#__PURE__*/ React.createElement(View, null, contentCopy)), /*#__PURE__*/ React.createElement(View, {
className: "nut-ellipsis-copy",
ref: symbolContain,
id: "symbolContain".concat(refRandomId.current),
style: {
display: 'inline'
}
}, symbolText()));
};
Ellipsis.displayName = 'NutEllipsis';