@antmjs/vantui
Version:
一套适用于Taro3及React的vantui组件库
181 lines (179 loc) • 8.98 kB
JavaScript
;
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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
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 _defaultProps = require("../default-props");
var _jsxRuntime = require("react/jsx-runtime");
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) { (0, _defineProperty2.default)(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; }
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(props) {
var _useState = (0, _react.useState)((0, _defaultProps.get)().Ellipsis),
_useState2 = (0, _slicedToArray2.default)(_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 = (0, _react.useState)(''),
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
content = _useState4[0],
setContent = _useState4[1];
var _useState5 = (0, _react.useState)(defaultExpand),
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
expand = _useState6[0],
setExpand = _useState6[1];
var randomRef = (0, _react.useRef)(Math.random().toString(36).slice(-8));
var getCutChildren = (0, _react.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 = (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), 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 (0, _utils.getRect)(null, ".".concat(preCls, "-hidden-symbol_").concat(randomRef.current), rectWrapper);
case 8:
symbolDom = _context.sent;
_context.next = 11;
return (0, _utils.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 = (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();
});
}