@nutui/nutui-react
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
206 lines (205 loc) • 8.73 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "Ellipsis", {
enumerable: true,
get: function() {
return Ellipsis;
}
});
var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
var _define_property = require("@swc/helpers/_/_define_property");
var _object_spread = require("@swc/helpers/_/_object_spread");
var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
var _typings = require("../../utils/typings");
var _useisomprphiclayouteffect = require("../../hooks/use-isomprphic-layout-effect");
var _configprovider = require("../configprovider");
var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
content: '',
direction: 'end',
rows: 1,
expandText: '',
collapseText: '',
symbol: '...',
lineHeight: '20'
});
var classPrefix = "nut-ellipsis";
var Ellipsis = function Ellipsis(props) {
var _ellipsis_current, _ellipsis_current1;
var _ref = (0, _object_spread._)({}, defaultProps, props), children = _ref.children, content = _ref.content, className = _ref.className, direction = _ref.direction, rows = _ref.rows, expandText = _ref.expandText, collapseText = _ref.collapseText, symbol = _ref.symbol, lineHeight = _ref.lineHeight, onClick = _ref.onClick, onChange = _ref.onChange, rest = (0, _object_without_properties._)(_ref, [
"children",
"content",
"className",
"direction",
"rows",
"expandText",
"collapseText",
"symbol",
"lineHeight",
"onClick",
"onChange"
]);
var rtl = (0, _configprovider.useRtl)();
var container = null;
var maxHeight = 0;
var _useState = (0, _sliced_to_array._)((0, _react.useState)(false), 2), exceeded = _useState[0], setExceeded = _useState[1];
var _useState1 = (0, _sliced_to_array._)((0, _react.useState)(false), 2), expanded = _useState1[0], setExpanded = _useState1[1];
var ellipsis = (0, _react.useRef)();
var root = (0, _react.useRef)(null);
var rtlClasses = (0, _classnames.default)((0, _define_property._)({}, "".concat(classPrefix, "-rtl"), rtl));
var classes = (0, _classnames.default)(classPrefix, rtlClasses, className);
(0, _useisomprphiclayouteffect.useIsomorphicLayoutEffect)(function() {
if (content) {
createContainer();
}
}, [
content
]);
// 创建虚拟 container，内容为 contant 的内容
var createContainer = function createContainer() {
if (!root.current) return;
var originStyle = window.getComputedStyle(root.current);
container = document.createElement('div');
var styleNames = Array.prototype.slice.apply(originStyle);
styleNames.forEach(function(name) {
container.style.setProperty(name, originStyle.getPropertyValue(name));
});
container.style.position = 'fixed';
container.style.left = '999999px';
container.style.top = '999999px';
container.style.zIndex = '-1000';
container.style.height = 'auto';
container.style.minHeight = 'auto';
container.style.maxHeight = 'auto';
container.style.textOverflow = 'clip';
container.style.whiteSpace = 'normal';
container.style.webkitLineClamp = 'unset';
container.style.display = 'block';
var lineH = pxToNumber(originStyle.lineHeight === 'normal' ? lineHeight : originStyle.lineHeight);
maxHeight = Math.floor(lineH * (Number(rows) + 0.5) + pxToNumber(originStyle.paddingTop) + pxToNumber(originStyle.paddingBottom));
container.innerText = content;
document.body.appendChild(container);
calcEllipse();
document.body.removeChild(container);
};
// 计算省略号的位置
var calcEllipse = function calcEllipse() {
if (container.offsetHeight <= maxHeight) {
setExceeded(false);
} else {
setExceeded(true);
var end = content.length;
var middle = Math.floor((0 + end) / 2);
var ellipsised = direction === 'middle' ? tailorMiddle([
0,
middle
], [
middle,
end
]) : tailor(0, end);
ellipsis.current = ellipsised;
}
};
// 计算 start/end 省略
var tailor = function tailor1(left, right) {
var actionText = expanded ? collapseText : expandText;
var end = content.length;
if (right - left <= 1) {
if (direction === 'end') {
return {
leading: content.slice(0, left) + symbol
};
}
return {
tailing: symbol + content.slice(right, end)
};
}
var middle = Math.round((left + right) / 2);
if (direction === 'end') {
container.innerText = content.slice(0, middle) + symbol + actionText;
} else {
container.innerText = actionText + symbol + content.slice(middle, end);
}
if (container.offsetHeight <= maxHeight) {
if (direction === 'end') {
return tailor(middle, right);
}
return tailor(left, middle);
}
if (direction === 'end') {
return tailor(left, middle);
}
return tailor(middle, right);
};
// 计算 middle 省略
var tailorMiddle = function tailorMiddle1(leftPart, rightPart) {
var actionText = expanded ? collapseText : expandText;
var end = content.length;
if (leftPart[1] - leftPart[0] <= 1 && rightPart[1] - rightPart[0] <= 1) {
return {
leading: content.slice(0, leftPart[0]) + symbol,
tailing: symbol + content.slice(rightPart[1], end)
};
}
var leftPartMiddle = Math.floor((leftPart[0] + leftPart[1]) / 2);
var rightPartMiddle = Math.ceil((rightPart[0] + rightPart[1]) / 2);
container.innerText = content.slice(0, leftPartMiddle) + symbol + actionText + symbol + content.slice(rightPartMiddle, end);
if (container.offsetHeight <= maxHeight) {
return tailorMiddle([
leftPartMiddle,
leftPart[1]
], [
rightPart[0],
rightPartMiddle
]);
}
return tailorMiddle([
leftPart[0],
leftPartMiddle
], [
rightPartMiddle,
rightPart[1]
]);
};
var pxToNumber = function pxToNumber(value) {
if (!value) return 0;
var match = value.match(/^\d*(\.\d*)?/);
return match ? Number(match[0]) : 0;
};
var clickHandle = function clickHandle(type) {
if (type === 1) {
setExpanded(true);
onChange && onChange('expand');
} else {
setExpanded(false);
onChange && onChange('collapse');
}
};
var handleClick = function handleClick() {
onClick && onClick();
};
return /*#__PURE__*/ _react.default.createElement("div", (0, _object_spread._)({
className: classes,
onClick: handleClick,
ref: root
}, rest), !exceeded ? content : null, exceeded && !expanded ? /*#__PURE__*/ _react.default.createElement("span", null, (_ellipsis_current = ellipsis.current) === null || _ellipsis_current === void 0 ? void 0 : _ellipsis_current.leading, expandText ? /*#__PURE__*/ _react.default.createElement("span", {
className: "nut-ellipsis-text",
onClick: function onClick(e) {
e.stopPropagation();
clickHandle(1);
}
}, expandText) : null, (_ellipsis_current1 = ellipsis.current) === null || _ellipsis_current1 === void 0 ? void 0 : _ellipsis_current1.tailing) : null, exceeded && expanded ? /*#__PURE__*/ _react.default.createElement("span", null, content, expandText ? /*#__PURE__*/ _react.default.createElement("span", {
className: "nut-ellipsis-text",
onClick: function onClick(e) {
e.stopPropagation();
clickHandle(2);
}
}, collapseText) : null) : null);
};
Ellipsis.displayName = 'NutEllipsis';