tntd
Version:
tntd是基于 TNT Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。
208 lines (207 loc) • 10.1 kB
JavaScript
;
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _copyToClipboard = _interopRequireDefault(require("copy-to-clipboard"));
var _react = _interopRequireWildcard(require("react"));
var _popover2 = _interopRequireDefault(require("../popover"));
var _tooltip = _interopRequireDefault(require("../tooltip"));
var _CopySVG = _interopRequireDefault(require("./Svg/CopySVG"));
var _TickSVG = _interopRequireDefault(require("./Svg/TickSVG"));
var _useScrollLock = _interopRequireDefault(require("../_util/hooks/useScrollLock"));
require("./index.less");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; } /*
* @Author: 梁洪刚
* @CreatDate: 2021-03-31 13:57:32
* @Describe: 省略号组件
*/
var tolerance = 0; // In px. Depends on the font you are using
var isEllipsisActive = function isEllipsisActive(e) {
var _a, _b;
e.setAttribute('style', '');
if (e.offsetWidth === e.scrollWidth && e.offsetHeight === e.scrollHeight) {
var styleStr = 'overflow:visible; ';
if (!((_b = (_a = e === null || e === void 0 ? void 0 : e.parentNode) === null || _a === void 0 ? void 0 : _a.getAttribute('style')) === null || _b === void 0 ? void 0 : _b.includes('width'))) {
styleStr += 'max-width:100%;';
}
e.parentNode.setAttribute('style', styleStr);
e.setAttribute('style', 'overflow:inherit');
} else {
e.setAttribute('style', '');
}
return e.offsetWidth + tolerance < e.scrollWidth || e.offsetHeight < e.scrollHeight;
};
var _default = exports["default"] = function _default(props) {
var _props$_popover = props._popover,
_popover = _props$_popover === void 0 ? props.Popover : _props$_popover,
title = props.title,
content = props.content,
className = props.className,
style = props.style,
widthLimit = props.widthLimit,
_props$_lines = props._lines,
_lines = _props$_lines === void 0 ? props.lines !== 1 && props.lines : _props$_lines,
children = props.children,
emptyText = props.emptyText,
_props$_copyable = props._copyable,
_copyable = _props$_copyable === void 0 ? props.copyable : _props$_copyable,
prefix = props.prefix,
suffix = props.suffix,
_props$needRefresh = props.needRefresh,
needRefresh = _props$needRefresh === void 0 ? true : _props$needRefresh,
enableScrollObserver = props.enableScrollObserver;
var _useState = (0, _react.useState)(1),
_useState2 = _slicedToArray(_useState, 2),
renderId = _useState2[0],
setRenderId = _useState2[1];
// allow visible or not state
var _useState3 = (0, _react.useState)(true),
_useState4 = _slicedToArray(_useState3, 2),
flag = _useState4[0],
setFlag = _useState4[1];
// visible[Tooltip/Popover] state
var _useState5 = (0, _react.useState)(false),
_useState6 = _slicedToArray(_useState5, 2),
tipVisible = _useState6[0],
setTipVisible = _useState6[1];
// copy animation state
var _useState7 = (0, _react.useState)(false),
_useState8 = _slicedToArray(_useState7, 2),
hasCopy = _useState8[0],
setHasCopy = _useState8[1];
var _useState9 = (0, _react.useState)(),
_useState10 = _slicedToArray(_useState9, 2),
lineHeight = _useState10[0],
setLineHeight = _useState10[1];
var elementRef = (0, _react.useRef)();
var isScrolling = (0, _useScrollLock["default"])({
enableScrollObserver: enableScrollObserver
});
(0, _react.useEffect)(function () {
if (isScrolling) {
setTipVisible(false);
}
}, [isScrolling]);
var computeElement = function computeElement() {
elementRef.current && isEllipsisActive(elementRef.current) ? setFlag(true) : (setFlag(false), setTipVisible(false));
if (elementRef.current) {
setLineHeight(getComputedStyle(elementRef.current, null).getPropertyValue('line-height'));
}
};
(0, _react.useEffect)(function () {
return function () {
elementRef.current = null; // 清理引用
};
}, []);
(0, _react.useLayoutEffect)(function () {
if (needRefresh) {
setRenderId(function (id) {
return id + 1;
});
} else {
if (renderId < 2) {
setRenderId(function (id) {
return id + 1;
});
}
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [title, needRefresh, content, children]);
(0, _react.useEffect)(function () {
computeElement();
}, [renderId]);
(0, _react.useEffect)(function () {
var handleResize = function handleResize() {
return computeElement();
};
window.addEventListener('resize', handleResize);
return function () {
window.removeEventListener('resize', handleResize);
};
}, []);
// original Node
var inner = typeof children === 'string' ? children : _popover ? content : title;
// for className
var getClassName = "overflow min-width-0 ".concat(_lines ? 'ellipsis-wrap' : 'ellipsis-nowrap', " ").concat(className || '');
// Tooltip.trigger(default 'hover') ==trigger==> onVisibleChange(visible)
var handleVisibleChange = function handleVisibleChange(visible) {
// const { onVisibleChange } = props;
// onVisibleChange(visible);
flag && setTipVisible(visible);
};
// onClick Copy Button
var handleCopy = function handleCopy(innerText) {
(0, _copyToClipboard["default"])(innerText);
setHasCopy(!hasCopy);
var timer = setTimeout(function () {
setHasCopy(false);
}, 1000);
return function () {
return clearTimeout(timer);
}; // 清除定时器
};
var renderNode = function renderNode() {
var popoverNode = _react["default"].createElement(_popover2["default"], Object.assign({}, props, {
content: content || children,
visible: tipVisible,
onVisibleChange: function onVisibleChange(visible) {
return handleVisibleChange(visible);
}
}), _react["default"].createElement("div", {
className: className,
style: {
WebkitLineClamp: _lines
},
ref: elementRef
}, children || content));
var tooltipNode = _react["default"].createElement(_tooltip["default"], Object.assign({}, props, {
title: title || children,
visible: tipVisible,
onVisibleChange: function onVisibleChange(visible) {
return handleVisibleChange(visible);
}
}), _react["default"].createElement("div", {
className: className,
style: {
WebkitLineClamp: _lines
},
ref: elementRef
}, children || title));
return _popover ? popoverNode : tooltipNode;
};
return _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement("div", {
className: "tntd-ellipsis",
style: Object.assign(Object.assign({}, style), {
maxWidth: widthLimit
})
}, prefix && prefix, _react["default"].createElement("div", {
className: getClassName,
key: renderId
}, inner || inner === 0 ? renderNode() : emptyText), !!suffix && suffix, (inner || inner === 0) && _copyable && lineHeight && _react["default"].createElement("div", {
className: "svg-button",
style: {
height: lineHeight
},
onClick: function onClick() {
return handleCopy(elementRef.current.innerText);
}
}, !hasCopy ? _react["default"].createElement(_CopySVG["default"], {
style: {
height: lineHeight
}
}) : _react["default"].createElement(_TickSVG["default"], {
style: {
height: lineHeight
}
}))));
};