@semcore/ellipsis 1.1.10 → 1.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +4 -4
- package/lib/cjs/Ellipsis.js +30 -18
- package/lib/cjs/Ellipsis.js.map +1 -1
- package/lib/cjs/index.d.js.map +1 -1
- package/lib/es6/Ellipsis.js +29 -18
- package/lib/es6/Ellipsis.js.map +1 -1
- package/lib/es6/index.d.js.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,13 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
-
## [1.
|
|
5
|
+
## [1.2.0] - 2023-02-15
|
|
6
6
|
|
|
7
|
-
###
|
|
7
|
+
### Added
|
|
8
8
|
|
|
9
|
-
-
|
|
9
|
+
- Supported passing tooltip props.
|
|
10
10
|
|
|
11
|
-
## [1.1.
|
|
11
|
+
## [1.1.10] - 2023-02-09
|
|
12
12
|
|
|
13
13
|
### Fixed
|
|
14
14
|
|
package/lib/cjs/Ellipsis.js
CHANGED
|
@@ -39,10 +39,16 @@ var _reactToText = _interopRequireDefault(require("@semcore/utils/lib/reactToTex
|
|
|
39
39
|
|
|
40
40
|
var _getOriginChildren = _interopRequireDefault(require("@semcore/utils/lib/getOriginChildren"));
|
|
41
41
|
|
|
42
|
+
var _pick = _interopRequireDefault(require("@semcore/utils/lib/pick"));
|
|
43
|
+
|
|
42
44
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
43
45
|
|
|
44
46
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
45
47
|
|
|
48
|
+
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; }
|
|
49
|
+
|
|
50
|
+
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; }
|
|
51
|
+
|
|
46
52
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
|
|
47
53
|
|
|
48
54
|
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
@@ -52,19 +58,20 @@ var style = (
|
|
|
52
58
|
/*__reshadow_css_start__*/
|
|
53
59
|
_core.sstyled.insert(
|
|
54
60
|
/*__inner_css_start__*/
|
|
55
|
-
".
|
|
61
|
+
".___SContainerMiddle_taf9e_gg_,.___SContainer_taf9e_gg_{display:flex;overflow:hidden}.___SBeginning_taf9e_gg_,.___SEllipsis_taf9e_gg_{overflow:hidden;display:inline-block;text-overflow:ellipsis;white-space:nowrap}.___SEllipsis_taf9e_gg_.__maxLine_taf9e_gg_{display:-webkit-box;-webkit-line-clamp:var(--maxLine_taf9e);-webkit-box-orient:vertical;overflow:hidden;white-space:normal}.___STail_taf9e_gg_{white-space:nowrap}"
|
|
56
62
|
/*__inner_css_end__*/
|
|
57
|
-
, "
|
|
63
|
+
, "taf9e_gg_")
|
|
58
64
|
/*__reshadow_css_end__*/
|
|
59
65
|
, {
|
|
60
|
-
"__SContainer": "
|
|
61
|
-
"__SContainerMiddle": "
|
|
62
|
-
"__SBeginning": "
|
|
63
|
-
"__SEllipsis": "
|
|
64
|
-
"_maxLine": "
|
|
65
|
-
"--maxLine": "--
|
|
66
|
-
"__STail": "
|
|
66
|
+
"__SContainer": "___SContainer_taf9e_gg_",
|
|
67
|
+
"__SContainerMiddle": "___SContainerMiddle_taf9e_gg_",
|
|
68
|
+
"__SBeginning": "___SBeginning_taf9e_gg_",
|
|
69
|
+
"__SEllipsis": "___SEllipsis_taf9e_gg_",
|
|
70
|
+
"_maxLine": "__maxLine_taf9e_gg_",
|
|
71
|
+
"--maxLine": "--maxLine_taf9e",
|
|
72
|
+
"__STail": "___STail_taf9e_gg_"
|
|
67
73
|
});
|
|
74
|
+
var defaultTooltipProps = ['title', 'theme', 'strategy', 'modifiers', 'placement', 'interaction', 'timeout', 'visible', 'defaultVisible', 'onVisibleChange', 'offset', 'preventOverflow', 'arrow', 'flip', 'computeStyles', 'eventListeners', 'onFirstUpdate'];
|
|
68
75
|
|
|
69
76
|
var createMeasurerElement = function createMeasurerElement(element) {
|
|
70
77
|
var styleElement = window.getComputedStyle(element, null);
|
|
@@ -155,9 +162,11 @@ var RootEllipsis = /*#__PURE__*/function (_Component) {
|
|
|
155
162
|
tooltip = _this$asProps.tooltip,
|
|
156
163
|
trim = _this$asProps.trim,
|
|
157
164
|
containerRect = _this$asProps.containerRect,
|
|
158
|
-
containerRef = _this$asProps.containerRef
|
|
165
|
+
containerRef = _this$asProps.containerRef,
|
|
166
|
+
includeTooltipProps = _this$asProps.includeTooltipProps;
|
|
159
167
|
var visible = this.state.visible;
|
|
160
168
|
var text = (0, _reactToText["default"])((0, _getOriginChildren["default"])(Children));
|
|
169
|
+
var tooltipProps = (0, _pick["default"])(this.asProps, includeTooltipProps);
|
|
161
170
|
|
|
162
171
|
if (trim === 'middle') {
|
|
163
172
|
var _ref;
|
|
@@ -167,19 +176,20 @@ var RootEllipsis = /*#__PURE__*/function (_Component) {
|
|
|
167
176
|
"styles": styles,
|
|
168
177
|
"tooltip": tooltip,
|
|
169
178
|
"containerRect": containerRect,
|
|
170
|
-
"containerRef": containerRef
|
|
179
|
+
"containerRef": containerRef,
|
|
180
|
+
"tooltipProps": tooltipProps
|
|
171
181
|
}));
|
|
172
182
|
}
|
|
173
183
|
|
|
174
184
|
if (tooltip) {
|
|
175
185
|
var _ref2;
|
|
176
186
|
|
|
177
|
-
return _ref2 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SContainer, _ref2.cn("SContainer", {
|
|
178
|
-
"interaction":
|
|
187
|
+
return _ref2 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SContainer, _ref2.cn("SContainer", _objectSpread({
|
|
188
|
+
"interaction": "hover",
|
|
179
189
|
"title": text,
|
|
180
190
|
"visible": visible,
|
|
181
191
|
"onVisibleChange": this.handlerVisibleChange
|
|
182
|
-
}), /*#__PURE__*/_react["default"].createElement(SEllipsis, _ref2.cn("SEllipsis", {
|
|
192
|
+
}, tooltipProps)), /*#__PURE__*/_react["default"].createElement(SEllipsis, _ref2.cn("SEllipsis", {
|
|
183
193
|
"render": _flexBox.Box,
|
|
184
194
|
"ref": this.textRef,
|
|
185
195
|
"maxLine": maxLine
|
|
@@ -199,7 +209,8 @@ var RootEllipsis = /*#__PURE__*/function (_Component) {
|
|
|
199
209
|
(0, _defineProperty2["default"])(RootEllipsis, "style", style);
|
|
200
210
|
(0, _defineProperty2["default"])(RootEllipsis, "defaultProps", {
|
|
201
211
|
trim: 'end',
|
|
202
|
-
tooltip: true
|
|
212
|
+
tooltip: true,
|
|
213
|
+
includeTooltipProps: defaultTooltipProps
|
|
203
214
|
});
|
|
204
215
|
|
|
205
216
|
var EllipsisMiddle = function EllipsisMiddle(props) {
|
|
@@ -207,7 +218,8 @@ var EllipsisMiddle = function EllipsisMiddle(props) {
|
|
|
207
218
|
text = props.text,
|
|
208
219
|
tooltip = props.tooltip,
|
|
209
220
|
containerRect = props.containerRect,
|
|
210
|
-
containerRef = props.containerRef
|
|
221
|
+
containerRef = props.containerRef,
|
|
222
|
+
tooltipProps = props.tooltipProps;
|
|
211
223
|
var resizeElement = (0, _react.useRef)(null);
|
|
212
224
|
|
|
213
225
|
var _useState = (0, _react.useState)({
|
|
@@ -244,12 +256,12 @@ var EllipsisMiddle = function EllipsisMiddle(props) {
|
|
|
244
256
|
if (tooltip) {
|
|
245
257
|
var _ref4;
|
|
246
258
|
|
|
247
|
-
return _ref4 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SContainerMiddle, _ref4.cn("SContainerMiddle", {
|
|
259
|
+
return _ref4 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SContainerMiddle, _ref4.cn("SContainerMiddle", _objectSpread({
|
|
248
260
|
"interaction": text.length > displayedSymbols ? 'hover' : 'none',
|
|
249
261
|
"title": text,
|
|
250
262
|
"ref": containerRef !== null && containerRef !== void 0 ? containerRef : resizeElement,
|
|
251
263
|
"tag": _tooltip["default"]
|
|
252
|
-
}), /*#__PURE__*/_react["default"].createElement(SBeginning, _ref4.cn("SBeginning", {}), text.substring(0, text.length - displayedSymbols / 2 - 1)), /*#__PURE__*/_react["default"].createElement(STail, _ref4.cn("STail", {}), text.substring(text.length - displayedSymbols / 2 - 1)));
|
|
264
|
+
}, tooltipProps)), /*#__PURE__*/_react["default"].createElement(SBeginning, _ref4.cn("SBeginning", {}), text.substring(0, text.length - displayedSymbols / 2 - 1)), /*#__PURE__*/_react["default"].createElement(STail, _ref4.cn("STail", {}), text.substring(text.length - displayedSymbols / 2 - 1)));
|
|
253
265
|
} else {
|
|
254
266
|
var _ref5;
|
|
255
267
|
|
package/lib/cjs/Ellipsis.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Ellipsis.js","names":["createMeasurerElement","element","styleElement","window","getComputedStyle","temporaryElement","document","createElement","style","display","padding","position","right","bottom","visibility","fontFamily","getPropertyValue","fontSize","fontWeight","innerHTML","isTextOverflowing","multiline","getBoundingClientRect","currentHeight","height","currentWidth","width","measuringElement","currentSize","initialSize","body","appendChild","whiteSpace","removeChild","RootEllipsis","visible","React","createRef","setState","showTooltip","asProps","maxLine","textRef","current","SEllipsis","Root","SContainer","Tooltip","styles","Children","tooltip","trim","containerRect","containerRef","state","text","reactToText","getOriginChildren","sstyled","handlerVisibleChange","Box","Component","EllipsisMiddle","props","resizeElement","useRef","useState","symbolWidth","dimension","setDimension","blockWidth","useResizeObserver","useLayoutEffect","dateSpan","setAttribute","rect","STail","SBeginning","SContainerMiddle","displayedSymbols","useMemo","Math","round","length","substring","Ellipsis","createComponent"],"sources":["../../src/Ellipsis.tsx"],"sourcesContent":["import React, { RefObject, useRef, useMemo, useState, useLayoutEffect } from 'react';\nimport createComponent, { Component, sstyled } from '@semcore/core';\nimport Tooltip from '@semcore/tooltip';\nimport { Box } from '@semcore/flex-box';\nimport { useResizeObserver } from './useResizeObserver';\n\nimport style from './style/ellipsis.shadow.css';\nimport reactToText from '@semcore/utils/lib/reactToText';\nimport getOriginChildren from '@semcore/utils/lib/getOriginChildren';\n\ntype AsProps = {\n maxLine?: number;\n trim?: 'end' | 'middle';\n tooltip?: boolean;\n styles?: React.CSSProperties;\n containerRect?: { width: number };\n // eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope\n containerRef?: RefObject<HTMLElement | null>;\n};\n\ntype AsPropsMiddle = {\n text: string;\n tooltip?: boolean;\n styles?: React.CSSProperties;\n containerRect?: { width: number };\n // eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope\n containerRef?: RefObject<HTMLElement | null>;\n};\n\nconst createMeasurerElement = (element: HTMLElement) => {\n const styleElement = window.getComputedStyle(element, null);\n const temporaryElement = document.createElement('temporary-block');\n temporaryElement.style.display = 'inline-block';\n temporaryElement.style.padding = '0';\n temporaryElement.style.position = 'absolute';\n temporaryElement.style.right = '150%';\n temporaryElement.style.bottom = '150%';\n temporaryElement.style.visibility = 'hidden';\n temporaryElement.style.fontFamily = styleElement.getPropertyValue('font-family');\n temporaryElement.style.fontSize = styleElement.getPropertyValue('font-size');\n temporaryElement.style.fontWeight = styleElement.getPropertyValue('font-weight');\n\n temporaryElement.innerHTML = element.innerHTML;\n return temporaryElement;\n};\n\nfunction isTextOverflowing(element: HTMLElement | null, multiline: boolean): boolean {\n if (!element) return false;\n\n const { height: currentHeight, width: currentWidth } = element.getBoundingClientRect();\n const measuringElement = createMeasurerElement(element);\n let currentSize, initialSize;\n document.body.appendChild(measuringElement);\n if (multiline) {\n currentSize = currentHeight;\n measuringElement.style.width = `${currentWidth}px`;\n initialSize = measuringElement.getBoundingClientRect().height;\n } else {\n currentSize = currentWidth;\n measuringElement.style.whiteSpace = 'nowrap';\n initialSize = measuringElement.getBoundingClientRect().width;\n }\n document.body.removeChild(measuringElement);\n return currentSize < initialSize;\n}\n\n\nclass RootEllipsis extends Component<AsProps> {\n static displayName = 'Ellipsis';\n static style = style;\n static defaultProps: AsProps = {\n trim: 'end',\n tooltip: true,\n };\n\n state = {\n visible: false,\n };\n\n textRef = React.createRef<HTMLElement>();\n\n showTooltip() {\n const { maxLine = 1 } = this.asProps;\n return isTextOverflowing(this.textRef.current, maxLine > 1)\n };\n\n handlerVisibleChange = (visible: boolean) => {\n this.setState({ visible: visible && this.showTooltip() });\n };\n\n render() {\n const SEllipsis = this.Root;\n const SContainer = Tooltip;\n const { styles, Children, maxLine, tooltip, trim, containerRect, containerRef } = this.asProps;\n const { visible } = this.state;\n const text = reactToText(getOriginChildren(Children));\n\n if (trim === 'middle') {\n return sstyled(styles)(\n <EllipsisMiddle\n text={text}\n styles={styles}\n tooltip={tooltip}\n containerRect={containerRect}\n containerRef={containerRef}\n />,\n );\n }\n if (tooltip) {\n return sstyled(styles)(\n <SContainer interaction='hover' title={text} visible={visible} onVisibleChange={this.handlerVisibleChange}>\n <SEllipsis render={Box} ref={this.textRef} maxLine={maxLine}>\n <Children />\n </SEllipsis>\n </SContainer>,\n );\n }\n return sstyled(styles)(\n <SEllipsis render={Box} maxLine={maxLine}>\n <Children />\n </SEllipsis>,\n );\n }\n}\n\nconst EllipsisMiddle: React.FC<AsPropsMiddle> = (props) => {\n const { styles, text, tooltip, containerRect, containerRef } = props;\n const resizeElement = useRef<HTMLElement | null>(null);\n const [dimension, setDimension] = useState<{ fontSize: string; symbolWidth: number }>({\n fontSize: '14',\n symbolWidth: 0,\n });\n const blockWidth = useResizeObserver(resizeElement, containerRect).width;\n\n useLayoutEffect(() => {\n const dateSpan = document.createElement('temporary-block');\n dateSpan.setAttribute('style', `fontSize: ${dimension.fontSize}px`);\n dateSpan.innerHTML = 'a';\n document.body.appendChild(dateSpan);\n const rect = dateSpan.getBoundingClientRect();\n\n setDimension({\n fontSize: window\n // @ts-ignore\n .getComputedStyle(containerRef?.current ?? resizeElement.current, null)\n .getPropertyValue('font-size'),\n symbolWidth: rect.width,\n });\n document.body.removeChild(dateSpan);\n }, []);\n\n const STail = 'span';\n const SBeginning = 'span';\n const SContainerMiddle = Box;\n const displayedSymbols = useMemo(\n () => Math.round(blockWidth / dimension.symbolWidth),\n [blockWidth, dimension.symbolWidth],\n );\n\n if (tooltip) {\n return sstyled(styles)(\n <SContainerMiddle\n interaction={text.length > displayedSymbols ? 'hover' : 'none'}\n title={text}\n ref={containerRef ?? resizeElement}\n tag={Tooltip}\n >\n <SBeginning>{text.substring(0, text.length - displayedSymbols / 2 - 1)}</SBeginning>\n <STail>{text.substring(text.length - displayedSymbols / 2 - 1)}</STail>\n </SContainerMiddle>,\n ) as any;\n } else {\n return sstyled(styles)(\n <SContainerMiddle ref={containerRef ?? resizeElement}>\n <SBeginning>{text.substring(0, text.length - displayedSymbols / 2 - 1)}</SBeginning>\n <STail>{text.substring(text.length - displayedSymbols / 2 - 1)}</STail>\n </SContainerMiddle>,\n ) as any;\n }\n};\n\nconst Ellipsis = createComponent(RootEllipsis);\n\nexport default Ellipsis;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Ellipsis.js","names":["defaultTooltipProps","createMeasurerElement","element","styleElement","window","getComputedStyle","temporaryElement","document","createElement","style","display","padding","position","right","bottom","visibility","fontFamily","getPropertyValue","fontSize","fontWeight","innerHTML","isTextOverflowing","multiline","getBoundingClientRect","currentHeight","height","currentWidth","width","measuringElement","currentSize","initialSize","body","appendChild","whiteSpace","removeChild","RootEllipsis","visible","React","createRef","setState","showTooltip","asProps","maxLine","textRef","current","SEllipsis","Root","SContainer","Tooltip","styles","Children","tooltip","trim","containerRect","containerRef","includeTooltipProps","state","text","reactToText","getOriginChildren","tooltipProps","pick","sstyled","handlerVisibleChange","Box","Component","EllipsisMiddle","props","resizeElement","useRef","useState","symbolWidth","dimension","setDimension","blockWidth","useResizeObserver","useLayoutEffect","dateSpan","setAttribute","rect","STail","SBeginning","SContainerMiddle","displayedSymbols","useMemo","Math","round","length","substring","Ellipsis","createComponent"],"sources":["../../src/Ellipsis.tsx"],"sourcesContent":["import React, { RefObject, useRef, useMemo, useState, useLayoutEffect } from 'react';\nimport createComponent, { Component, sstyled } from '@semcore/core';\nimport Tooltip from '@semcore/tooltip';\nimport { Box } from '@semcore/flex-box';\nimport { useResizeObserver } from './useResizeObserver';\n\nimport style from './style/ellipsis.shadow.css';\nimport reactToText from '@semcore/utils/lib/reactToText';\nimport getOriginChildren from '@semcore/utils/lib/getOriginChildren';\nimport pick from '@semcore/utils/lib/pick';\n\ntype AsProps = {\n maxLine?: number;\n trim?: 'end' | 'middle';\n tooltip?: boolean;\n styles?: React.CSSProperties;\n containerRect?: { width: number };\n // eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope\n containerRef?: RefObject<HTMLElement | null>;\n includeTooltipProps?: string[];\n};\n\ntype AsPropsMiddle = {\n text: string;\n tooltip?: boolean;\n styles?: React.CSSProperties;\n containerRect?: { width: number };\n // eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope\n containerRef?: RefObject<HTMLElement | null>;\n tooltipProps: { [propName: string]: unknown };\n};\n\nconst defaultTooltipProps = [\n 'title',\n 'theme',\n 'strategy',\n 'modifiers',\n 'placement',\n 'interaction',\n 'timeout',\n 'visible',\n 'defaultVisible',\n 'onVisibleChange',\n 'offset',\n 'preventOverflow',\n 'arrow',\n 'flip',\n 'computeStyles',\n 'eventListeners',\n 'onFirstUpdate',\n];\n\nconst createMeasurerElement = (element: HTMLElement) => {\n const styleElement = window.getComputedStyle(element, null);\n const temporaryElement = document.createElement('temporary-block');\n temporaryElement.style.display = 'inline-block';\n temporaryElement.style.padding = '0';\n temporaryElement.style.position = 'absolute';\n temporaryElement.style.right = '150%';\n temporaryElement.style.bottom = '150%';\n temporaryElement.style.visibility = 'hidden';\n temporaryElement.style.fontFamily = styleElement.getPropertyValue('font-family');\n temporaryElement.style.fontSize = styleElement.getPropertyValue('font-size');\n temporaryElement.style.fontWeight = styleElement.getPropertyValue('font-weight');\n\n temporaryElement.innerHTML = element.innerHTML;\n return temporaryElement;\n};\n\nfunction isTextOverflowing(element: HTMLElement | null, multiline: boolean): boolean {\n if (!element) return false;\n\n const { height: currentHeight, width: currentWidth } = element.getBoundingClientRect();\n const measuringElement = createMeasurerElement(element);\n let currentSize, initialSize;\n document.body.appendChild(measuringElement);\n if (multiline) {\n currentSize = currentHeight;\n measuringElement.style.width = `${currentWidth}px`;\n initialSize = measuringElement.getBoundingClientRect().height;\n } else {\n currentSize = currentWidth;\n measuringElement.style.whiteSpace = 'nowrap';\n initialSize = measuringElement.getBoundingClientRect().width;\n }\n document.body.removeChild(measuringElement);\n return currentSize < initialSize;\n}\n\nclass RootEllipsis extends Component<AsProps> {\n static displayName = 'Ellipsis';\n static style = style;\n static defaultProps: AsProps = {\n trim: 'end',\n tooltip: true,\n includeTooltipProps: defaultTooltipProps,\n };\n\n state = {\n visible: false,\n };\n\n textRef = React.createRef<HTMLElement>();\n\n showTooltip() {\n const { maxLine = 1 } = this.asProps;\n return isTextOverflowing(this.textRef.current, maxLine > 1);\n }\n\n handlerVisibleChange = (visible: boolean) => {\n this.setState({ visible: visible && this.showTooltip() });\n };\n\n render() {\n const SEllipsis = this.Root;\n const SContainer = Tooltip;\n const {\n styles,\n Children,\n maxLine,\n tooltip,\n trim,\n containerRect,\n containerRef,\n includeTooltipProps,\n } = this.asProps;\n const { visible } = this.state;\n const text = reactToText(getOriginChildren(Children));\n const tooltipProps = pick(this.asProps, includeTooltipProps);\n\n if (trim === 'middle') {\n return sstyled(styles)(\n <EllipsisMiddle\n text={text}\n styles={styles}\n tooltip={tooltip}\n containerRect={containerRect}\n containerRef={containerRef}\n tooltipProps={tooltipProps}\n />,\n );\n }\n if (tooltip) {\n return sstyled(styles)(\n <SContainer\n interaction=\"hover\"\n title={text}\n visible={visible}\n onVisibleChange={this.handlerVisibleChange}\n {...tooltipProps}\n >\n <SEllipsis render={Box} ref={this.textRef} maxLine={maxLine}>\n <Children />\n </SEllipsis>\n </SContainer>,\n );\n }\n return sstyled(styles)(\n <SEllipsis render={Box} maxLine={maxLine}>\n <Children />\n </SEllipsis>,\n );\n }\n}\n\nconst EllipsisMiddle: React.FC<AsPropsMiddle> = (props) => {\n const { styles, text, tooltip, containerRect, containerRef, tooltipProps } = props;\n const resizeElement = useRef<HTMLElement | null>(null);\n const [dimension, setDimension] = useState<{ fontSize: string; symbolWidth: number }>({\n fontSize: '14',\n symbolWidth: 0,\n });\n const blockWidth = useResizeObserver(resizeElement, containerRect).width;\n\n useLayoutEffect(() => {\n const dateSpan = document.createElement('temporary-block');\n dateSpan.setAttribute('style', `fontSize: ${dimension.fontSize}px`);\n dateSpan.innerHTML = 'a';\n document.body.appendChild(dateSpan);\n const rect = dateSpan.getBoundingClientRect();\n\n setDimension({\n fontSize: window\n // @ts-ignore\n .getComputedStyle(containerRef?.current ?? resizeElement.current, null)\n .getPropertyValue('font-size'),\n symbolWidth: rect.width,\n });\n document.body.removeChild(dateSpan);\n }, []);\n\n const STail = 'span';\n const SBeginning = 'span';\n const SContainerMiddle = Box;\n const displayedSymbols = useMemo(\n () => Math.round(blockWidth / dimension.symbolWidth),\n [blockWidth, dimension.symbolWidth],\n );\n\n if (tooltip) {\n return sstyled(styles)(\n <SContainerMiddle\n interaction={text.length > displayedSymbols ? 'hover' : 'none'}\n title={text}\n ref={containerRef ?? resizeElement}\n tag={Tooltip}\n {...tooltipProps}\n >\n <SBeginning>{text.substring(0, text.length - displayedSymbols / 2 - 1)}</SBeginning>\n <STail>{text.substring(text.length - displayedSymbols / 2 - 1)}</STail>\n </SContainerMiddle>,\n ) as any;\n } else {\n return sstyled(styles)(\n <SContainerMiddle ref={containerRef ?? resizeElement}>\n <SBeginning>{text.substring(0, text.length - displayedSymbols / 2 - 1)}</SBeginning>\n <STail>{text.substring(text.length - displayedSymbols / 2 - 1)}</STail>\n </SContainerMiddle>,\n ) as any;\n }\n};\n\nconst Ellipsis = createComponent(RootEllipsis);\n\nexport default Ellipsis;\n"],"mappings":"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"}
|
package/lib/cjs/index.d.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import { CProps } from '@semcore/core';\nimport { RefObject } from 'react';\n\nexport interface IEllipsisProps {\n /**\n * Rows count in multiline Ellipsis\n * @default 1\n */\n maxLine?: number;\n /**\n * Trimming type\n * @default end\n */\n trim?: 'end' | 'middle';\n /**\n * Show tooltip\n * @default true\n */\n tooltip?: boolean;\n /**\n * Ref to the item that will be observed by ResizeObserver\n */\n // eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope\n containerRef?: RefObject<HTMLElement | null>;\n /**\n * Explicit sizes of container text should be trimmed in\n **/\n containerRect?: { width: number };\n}\n\ndeclare const useResizeObserver: (\n ref: RefObject<HTMLElement>,\n hookOverride?: { width: number },\n) => { width: number };\n\ndeclare const Ellipsis: <T>(props: CProps<IEllipsisProps & T>) => ReturnEl;\n\nexport { useResizeObserver };\nexport default Ellipsis;\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import { CProps, ReturnEl } from '@semcore/core';\nimport { RefObject } from 'react';\nimport { IBoxProps } from '@semcore/flex-box';\nimport { ITooltipProps } from '@semcore/tooltip';\n\nexport interface IEllipsisProps extends IBoxProps, ITooltipProps {\n /**\n * Rows count in multiline Ellipsis\n * @default 1\n */\n maxLine?: number;\n /**\n * Trimming type\n * @default end\n */\n trim?: 'end' | 'middle';\n /**\n * Show tooltip\n * @default true\n */\n tooltip?: boolean;\n /**\n * Ref to the item that will be observed by ResizeObserver\n */\n // eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope\n containerRef?: RefObject<HTMLElement | null>;\n /**\n * Explicit sizes of container text should be trimmed in\n **/\n containerRect?: { width: number };\n /** List of props that will be passed to tooltip\n * @default ['title', 'theme', 'strategy', 'modifiers', 'placement', 'interaction', 'timeout', 'visible', 'defaultVisible', 'onVisibleChange', 'offset', 'preventOverflow', 'arrow', 'flip', 'computeStyles', 'eventListeners', 'onFirstUpdate']\n */\n includeTooltipProps?: string[];\n}\n\ndeclare const useResizeObserver: (\n ref: RefObject<HTMLElement>,\n hookOverride?: { width: number },\n) => { width: number };\n\ndeclare const Ellipsis: <T>(props: CProps<IEllipsisProps & T>) => ReturnEl;\n\nexport { useResizeObserver };\nexport default Ellipsis;\n"],"mappings":""}
|
package/lib/es6/Ellipsis.js
CHANGED
|
@@ -8,6 +8,10 @@ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
|
|
|
8
8
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
9
9
|
import { sstyled as _sstyled } from "@semcore/core";
|
|
10
10
|
|
|
11
|
+
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; }
|
|
12
|
+
|
|
13
|
+
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; }
|
|
14
|
+
|
|
11
15
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
12
16
|
|
|
13
17
|
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
@@ -23,21 +27,23 @@ var style = (
|
|
|
23
27
|
/*__reshadow_css_start__*/
|
|
24
28
|
_sstyled.insert(
|
|
25
29
|
/*__inner_css_start__*/
|
|
26
|
-
".
|
|
30
|
+
".___SContainerMiddle_taf9e_gg_,.___SContainer_taf9e_gg_{display:flex;overflow:hidden}.___SBeginning_taf9e_gg_,.___SEllipsis_taf9e_gg_{overflow:hidden;display:inline-block;text-overflow:ellipsis;white-space:nowrap}.___SEllipsis_taf9e_gg_.__maxLine_taf9e_gg_{display:-webkit-box;-webkit-line-clamp:var(--maxLine_taf9e);-webkit-box-orient:vertical;overflow:hidden;white-space:normal}.___STail_taf9e_gg_{white-space:nowrap}"
|
|
27
31
|
/*__inner_css_end__*/
|
|
28
|
-
, "
|
|
32
|
+
, "taf9e_gg_")
|
|
29
33
|
/*__reshadow_css_end__*/
|
|
30
34
|
, {
|
|
31
|
-
"__SContainer": "
|
|
32
|
-
"__SContainerMiddle": "
|
|
33
|
-
"__SBeginning": "
|
|
34
|
-
"__SEllipsis": "
|
|
35
|
-
"_maxLine": "
|
|
36
|
-
"--maxLine": "--
|
|
37
|
-
"__STail": "
|
|
35
|
+
"__SContainer": "___SContainer_taf9e_gg_",
|
|
36
|
+
"__SContainerMiddle": "___SContainerMiddle_taf9e_gg_",
|
|
37
|
+
"__SBeginning": "___SBeginning_taf9e_gg_",
|
|
38
|
+
"__SEllipsis": "___SEllipsis_taf9e_gg_",
|
|
39
|
+
"_maxLine": "__maxLine_taf9e_gg_",
|
|
40
|
+
"--maxLine": "--maxLine_taf9e",
|
|
41
|
+
"__STail": "___STail_taf9e_gg_"
|
|
38
42
|
});
|
|
39
43
|
import reactToText from '@semcore/utils/lib/reactToText';
|
|
40
44
|
import getOriginChildren from '@semcore/utils/lib/getOriginChildren';
|
|
45
|
+
import pick from '@semcore/utils/lib/pick';
|
|
46
|
+
var defaultTooltipProps = ['title', 'theme', 'strategy', 'modifiers', 'placement', 'interaction', 'timeout', 'visible', 'defaultVisible', 'onVisibleChange', 'offset', 'preventOverflow', 'arrow', 'flip', 'computeStyles', 'eventListeners', 'onFirstUpdate'];
|
|
41
47
|
|
|
42
48
|
var createMeasurerElement = function createMeasurerElement(element) {
|
|
43
49
|
var styleElement = window.getComputedStyle(element, null);
|
|
@@ -132,9 +138,11 @@ var RootEllipsis = /*#__PURE__*/function (_Component) {
|
|
|
132
138
|
tooltip = _this$asProps.tooltip,
|
|
133
139
|
trim = _this$asProps.trim,
|
|
134
140
|
containerRect = _this$asProps.containerRect,
|
|
135
|
-
containerRef = _this$asProps.containerRef
|
|
141
|
+
containerRef = _this$asProps.containerRef,
|
|
142
|
+
includeTooltipProps = _this$asProps.includeTooltipProps;
|
|
136
143
|
var visible = this.state.visible;
|
|
137
144
|
var text = reactToText(getOriginChildren(Children));
|
|
145
|
+
var tooltipProps = pick(this.asProps, includeTooltipProps);
|
|
138
146
|
|
|
139
147
|
if (trim === 'middle') {
|
|
140
148
|
var _ref;
|
|
@@ -144,19 +152,20 @@ var RootEllipsis = /*#__PURE__*/function (_Component) {
|
|
|
144
152
|
"styles": styles,
|
|
145
153
|
"tooltip": tooltip,
|
|
146
154
|
"containerRect": containerRect,
|
|
147
|
-
"containerRef": containerRef
|
|
155
|
+
"containerRef": containerRef,
|
|
156
|
+
"tooltipProps": tooltipProps
|
|
148
157
|
}));
|
|
149
158
|
}
|
|
150
159
|
|
|
151
160
|
if (tooltip) {
|
|
152
161
|
var _ref2;
|
|
153
162
|
|
|
154
|
-
return _ref2 = sstyled(styles), /*#__PURE__*/React.createElement(SContainer, _ref2.cn("SContainer", {
|
|
155
|
-
"interaction":
|
|
163
|
+
return _ref2 = sstyled(styles), /*#__PURE__*/React.createElement(SContainer, _ref2.cn("SContainer", _objectSpread({
|
|
164
|
+
"interaction": "hover",
|
|
156
165
|
"title": text,
|
|
157
166
|
"visible": visible,
|
|
158
167
|
"onVisibleChange": this.handlerVisibleChange
|
|
159
|
-
}), /*#__PURE__*/React.createElement(SEllipsis, _ref2.cn("SEllipsis", {
|
|
168
|
+
}, tooltipProps)), /*#__PURE__*/React.createElement(SEllipsis, _ref2.cn("SEllipsis", {
|
|
160
169
|
"render": Box,
|
|
161
170
|
"ref": this.textRef,
|
|
162
171
|
"maxLine": maxLine
|
|
@@ -179,7 +188,8 @@ _defineProperty(RootEllipsis, "style", style);
|
|
|
179
188
|
|
|
180
189
|
_defineProperty(RootEllipsis, "defaultProps", {
|
|
181
190
|
trim: 'end',
|
|
182
|
-
tooltip: true
|
|
191
|
+
tooltip: true,
|
|
192
|
+
includeTooltipProps: defaultTooltipProps
|
|
183
193
|
});
|
|
184
194
|
|
|
185
195
|
var EllipsisMiddle = function EllipsisMiddle(props) {
|
|
@@ -187,7 +197,8 @@ var EllipsisMiddle = function EllipsisMiddle(props) {
|
|
|
187
197
|
text = props.text,
|
|
188
198
|
tooltip = props.tooltip,
|
|
189
199
|
containerRect = props.containerRect,
|
|
190
|
-
containerRef = props.containerRef
|
|
200
|
+
containerRef = props.containerRef,
|
|
201
|
+
tooltipProps = props.tooltipProps;
|
|
191
202
|
var resizeElement = useRef(null);
|
|
192
203
|
|
|
193
204
|
var _useState = useState({
|
|
@@ -224,12 +235,12 @@ var EllipsisMiddle = function EllipsisMiddle(props) {
|
|
|
224
235
|
if (tooltip) {
|
|
225
236
|
var _ref4;
|
|
226
237
|
|
|
227
|
-
return _ref4 = sstyled(styles), /*#__PURE__*/React.createElement(SContainerMiddle, _ref4.cn("SContainerMiddle", {
|
|
238
|
+
return _ref4 = sstyled(styles), /*#__PURE__*/React.createElement(SContainerMiddle, _ref4.cn("SContainerMiddle", _objectSpread({
|
|
228
239
|
"interaction": text.length > displayedSymbols ? 'hover' : 'none',
|
|
229
240
|
"title": text,
|
|
230
241
|
"ref": containerRef !== null && containerRef !== void 0 ? containerRef : resizeElement,
|
|
231
242
|
"tag": Tooltip
|
|
232
|
-
}), /*#__PURE__*/React.createElement(SBeginning, _ref4.cn("SBeginning", {}), text.substring(0, text.length - displayedSymbols / 2 - 1)), /*#__PURE__*/React.createElement(STail, _ref4.cn("STail", {}), text.substring(text.length - displayedSymbols / 2 - 1)));
|
|
243
|
+
}, tooltipProps)), /*#__PURE__*/React.createElement(SBeginning, _ref4.cn("SBeginning", {}), text.substring(0, text.length - displayedSymbols / 2 - 1)), /*#__PURE__*/React.createElement(STail, _ref4.cn("STail", {}), text.substring(text.length - displayedSymbols / 2 - 1)));
|
|
233
244
|
} else {
|
|
234
245
|
var _ref5;
|
|
235
246
|
|
package/lib/es6/Ellipsis.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Ellipsis.js","names":["React","useRef","useMemo","useState","useLayoutEffect","createComponent","Component","sstyled","Tooltip","Box","useResizeObserver","reactToText","getOriginChildren","createMeasurerElement","element","styleElement","window","getComputedStyle","temporaryElement","document","createElement","style","display","padding","position","right","bottom","visibility","fontFamily","getPropertyValue","fontSize","fontWeight","innerHTML","isTextOverflowing","multiline","getBoundingClientRect","currentHeight","height","currentWidth","width","measuringElement","currentSize","initialSize","body","appendChild","whiteSpace","removeChild","RootEllipsis","visible","createRef","setState","showTooltip","asProps","maxLine","textRef","current","SEllipsis","Root","SContainer","styles","Children","tooltip","trim","containerRect","containerRef","state","text","handlerVisibleChange","EllipsisMiddle","props","resizeElement","symbolWidth","dimension","setDimension","blockWidth","dateSpan","setAttribute","rect","STail","SBeginning","SContainerMiddle","displayedSymbols","Math","round","length","substring","Ellipsis"],"sources":["../../src/Ellipsis.tsx"],"sourcesContent":["import React, { RefObject, useRef, useMemo, useState, useLayoutEffect } from 'react';\nimport createComponent, { Component, sstyled } from '@semcore/core';\nimport Tooltip from '@semcore/tooltip';\nimport { Box } from '@semcore/flex-box';\nimport { useResizeObserver } from './useResizeObserver';\n\nimport style from './style/ellipsis.shadow.css';\nimport reactToText from '@semcore/utils/lib/reactToText';\nimport getOriginChildren from '@semcore/utils/lib/getOriginChildren';\n\ntype AsProps = {\n maxLine?: number;\n trim?: 'end' | 'middle';\n tooltip?: boolean;\n styles?: React.CSSProperties;\n containerRect?: { width: number };\n // eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope\n containerRef?: RefObject<HTMLElement | null>;\n};\n\ntype AsPropsMiddle = {\n text: string;\n tooltip?: boolean;\n styles?: React.CSSProperties;\n containerRect?: { width: number };\n // eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope\n containerRef?: RefObject<HTMLElement | null>;\n};\n\nconst createMeasurerElement = (element: HTMLElement) => {\n const styleElement = window.getComputedStyle(element, null);\n const temporaryElement = document.createElement('temporary-block');\n temporaryElement.style.display = 'inline-block';\n temporaryElement.style.padding = '0';\n temporaryElement.style.position = 'absolute';\n temporaryElement.style.right = '150%';\n temporaryElement.style.bottom = '150%';\n temporaryElement.style.visibility = 'hidden';\n temporaryElement.style.fontFamily = styleElement.getPropertyValue('font-family');\n temporaryElement.style.fontSize = styleElement.getPropertyValue('font-size');\n temporaryElement.style.fontWeight = styleElement.getPropertyValue('font-weight');\n\n temporaryElement.innerHTML = element.innerHTML;\n return temporaryElement;\n};\n\nfunction isTextOverflowing(element: HTMLElement | null, multiline: boolean): boolean {\n if (!element) return false;\n\n const { height: currentHeight, width: currentWidth } = element.getBoundingClientRect();\n const measuringElement = createMeasurerElement(element);\n let currentSize, initialSize;\n document.body.appendChild(measuringElement);\n if (multiline) {\n currentSize = currentHeight;\n measuringElement.style.width = `${currentWidth}px`;\n initialSize = measuringElement.getBoundingClientRect().height;\n } else {\n currentSize = currentWidth;\n measuringElement.style.whiteSpace = 'nowrap';\n initialSize = measuringElement.getBoundingClientRect().width;\n }\n document.body.removeChild(measuringElement);\n return currentSize < initialSize;\n}\n\n\nclass RootEllipsis extends Component<AsProps> {\n static displayName = 'Ellipsis';\n static style = style;\n static defaultProps: AsProps = {\n trim: 'end',\n tooltip: true,\n };\n\n state = {\n visible: false,\n };\n\n textRef = React.createRef<HTMLElement>();\n\n showTooltip() {\n const { maxLine = 1 } = this.asProps;\n return isTextOverflowing(this.textRef.current, maxLine > 1)\n };\n\n handlerVisibleChange = (visible: boolean) => {\n this.setState({ visible: visible && this.showTooltip() });\n };\n\n render() {\n const SEllipsis = this.Root;\n const SContainer = Tooltip;\n const { styles, Children, maxLine, tooltip, trim, containerRect, containerRef } = this.asProps;\n const { visible } = this.state;\n const text = reactToText(getOriginChildren(Children));\n\n if (trim === 'middle') {\n return sstyled(styles)(\n <EllipsisMiddle\n text={text}\n styles={styles}\n tooltip={tooltip}\n containerRect={containerRect}\n containerRef={containerRef}\n />,\n );\n }\n if (tooltip) {\n return sstyled(styles)(\n <SContainer interaction='hover' title={text} visible={visible} onVisibleChange={this.handlerVisibleChange}>\n <SEllipsis render={Box} ref={this.textRef} maxLine={maxLine}>\n <Children />\n </SEllipsis>\n </SContainer>,\n );\n }\n return sstyled(styles)(\n <SEllipsis render={Box} maxLine={maxLine}>\n <Children />\n </SEllipsis>,\n );\n }\n}\n\nconst EllipsisMiddle: React.FC<AsPropsMiddle> = (props) => {\n const { styles, text, tooltip, containerRect, containerRef } = props;\n const resizeElement = useRef<HTMLElement | null>(null);\n const [dimension, setDimension] = useState<{ fontSize: string; symbolWidth: number }>({\n fontSize: '14',\n symbolWidth: 0,\n });\n const blockWidth = useResizeObserver(resizeElement, containerRect).width;\n\n useLayoutEffect(() => {\n const dateSpan = document.createElement('temporary-block');\n dateSpan.setAttribute('style', `fontSize: ${dimension.fontSize}px`);\n dateSpan.innerHTML = 'a';\n document.body.appendChild(dateSpan);\n const rect = dateSpan.getBoundingClientRect();\n\n setDimension({\n fontSize: window\n // @ts-ignore\n .getComputedStyle(containerRef?.current ?? resizeElement.current, null)\n .getPropertyValue('font-size'),\n symbolWidth: rect.width,\n });\n document.body.removeChild(dateSpan);\n }, []);\n\n const STail = 'span';\n const SBeginning = 'span';\n const SContainerMiddle = Box;\n const displayedSymbols = useMemo(\n () => Math.round(blockWidth / dimension.symbolWidth),\n [blockWidth, dimension.symbolWidth],\n );\n\n if (tooltip) {\n return sstyled(styles)(\n <SContainerMiddle\n interaction={text.length > displayedSymbols ? 'hover' : 'none'}\n title={text}\n ref={containerRef ?? resizeElement}\n tag={Tooltip}\n >\n <SBeginning>{text.substring(0, text.length - displayedSymbols / 2 - 1)}</SBeginning>\n <STail>{text.substring(text.length - displayedSymbols / 2 - 1)}</STail>\n </SContainerMiddle>,\n ) as any;\n } else {\n return sstyled(styles)(\n <SContainerMiddle ref={containerRef ?? resizeElement}>\n <SBeginning>{text.substring(0, text.length - displayedSymbols / 2 - 1)}</SBeginning>\n <STail>{text.substring(text.length - displayedSymbols / 2 - 1)}</STail>\n </SContainerMiddle>,\n ) as any;\n }\n};\n\nconst Ellipsis = createComponent(RootEllipsis);\n\nexport default Ellipsis;\n"],"mappings":";;;;;;;;;;;;;;AAAA,OAAOA,KAAP,IAA2BC,MAA3B,EAAmCC,OAAnC,EAA4CC,QAA5C,EAAsDC,eAAtD,QAA6E,OAA7E;AACA,OAAOC,eAAP,IAA0BC,SAA1B,EAAqCC,OAArC,QAAoD,eAApD;AACA,OAAOC,OAAP,MAAoB,kBAApB;AACA,SAASC,GAAT,QAAoB,mBAApB;AACA,SAASC,iBAAT,QAAkC,qBAAlC;;;;;;;;;;;;;;;;;;;;AAGA,OAAOC,WAAP,MAAwB,gCAAxB;AACA,OAAOC,iBAAP,MAA8B,sCAA9B;;AAqBA,IAAMC,qBAAqB,GAAG,SAAxBA,qBAAwB,CAACC,OAAD,EAA0B;EACtD,IAAMC,YAAY,GAAGC,MAAM,CAACC,gBAAP,CAAwBH,OAAxB,EAAiC,IAAjC,CAArB;EACA,IAAMI,gBAAgB,GAAGC,QAAQ,CAACC,aAAT,CAAuB,iBAAvB,CAAzB;EACAF,gBAAgB,CAACG,KAAjB,CAAuBC,OAAvB,GAAiC,cAAjC;EACAJ,gBAAgB,CAACG,KAAjB,CAAuBE,OAAvB,GAAiC,GAAjC;EACAL,gBAAgB,CAACG,KAAjB,CAAuBG,QAAvB,GAAkC,UAAlC;EACAN,gBAAgB,CAACG,KAAjB,CAAuBI,KAAvB,GAA+B,MAA/B;EACAP,gBAAgB,CAACG,KAAjB,CAAuBK,MAAvB,GAAgC,MAAhC;EACAR,gBAAgB,CAACG,KAAjB,CAAuBM,UAAvB,GAAoC,QAApC;EACAT,gBAAgB,CAACG,KAAjB,CAAuBO,UAAvB,GAAoCb,YAAY,CAACc,gBAAb,CAA8B,aAA9B,CAApC;EACAX,gBAAgB,CAACG,KAAjB,CAAuBS,QAAvB,GAAkCf,YAAY,CAACc,gBAAb,CAA8B,WAA9B,CAAlC;EACAX,gBAAgB,CAACG,KAAjB,CAAuBU,UAAvB,GAAoChB,YAAY,CAACc,gBAAb,CAA8B,aAA9B,CAApC;EAEAX,gBAAgB,CAACc,SAAjB,GAA6BlB,OAAO,CAACkB,SAArC;EACA,OAAOd,gBAAP;AACD,CAfD;;AAiBA,SAASe,iBAAT,CAA2BnB,OAA3B,EAAwDoB,SAAxD,EAAqF;EACnF,IAAI,CAACpB,OAAL,EAAc,OAAO,KAAP;;EAEd,4BAAuDA,OAAO,CAACqB,qBAAR,EAAvD;EAAA,IAAgBC,aAAhB,yBAAQC,MAAR;EAAA,IAAsCC,YAAtC,yBAA+BC,KAA/B;;EACA,IAAMC,gBAAgB,GAAG3B,qBAAqB,CAACC,OAAD,CAA9C;EACA,IAAI2B,WAAJ,EAAiBC,WAAjB;EACAvB,QAAQ,CAACwB,IAAT,CAAcC,WAAd,CAA0BJ,gBAA1B;;EACA,IAAIN,SAAJ,EAAe;IACbO,WAAW,GAAGL,aAAd;IACAI,gBAAgB,CAACnB,KAAjB,CAAuBkB,KAAvB,aAAkCD,YAAlC;IACAI,WAAW,GAAGF,gBAAgB,CAACL,qBAAjB,GAAyCE,MAAvD;EACD,CAJD,MAIO;IACLI,WAAW,GAAGH,YAAd;IACAE,gBAAgB,CAACnB,KAAjB,CAAuBwB,UAAvB,GAAoC,QAApC;IACAH,WAAW,GAAGF,gBAAgB,CAACL,qBAAjB,GAAyCI,KAAvD;EACD;;EACDpB,QAAQ,CAACwB,IAAT,CAAcG,WAAd,CAA0BN,gBAA1B;EACA,OAAOC,WAAW,GAAGC,WAArB;AACD;;IAGKK,Y;;;;;;;;;;;;;;;;4DAQI;MACNC,OAAO,EAAE;IADH,C;;2EAIEhD,KAAK,CAACiD,SAAN,E;;2EAOa,UAACD,OAAD,EAAsB;MAC3C,MAAKE,QAAL,CAAc;QAAEF,OAAO,EAAEA,OAAO,IAAI,MAAKG,WAAL;MAAtB,CAAd;IACD,C;;;;;;;WAPD,uBAAc;MACZ,4BAAwB,KAAKC,OAA7B,CAAQC,OAAR;MAAA,IAAQA,OAAR,sCAAkB,CAAlB;MACA,OAAOpB,iBAAiB,CAAC,KAAKqB,OAAL,CAAaC,OAAd,EAAuBF,OAAO,GAAG,CAAjC,CAAxB;IACD;;;WAMD,kBAAS;MAAA;;MACP,IAAMG,SAAS,GAAG,KAAKC,IAAvB;MACA,IAAMC,UAAU,GAAGlD,OAAnB;MACA,oBAAkF,KAAK4C,OAAvF;MAAA,IAAQO,MAAR,iBAAQA,MAAR;MAAA,IAAgBC,QAAhB,iBAAgBA,QAAhB;MAAA,IAA0BP,OAA1B,iBAA0BA,OAA1B;MAAA,IAAmCQ,OAAnC,iBAAmCA,OAAnC;MAAA,IAA4CC,IAA5C,iBAA4CA,IAA5C;MAAA,IAAkDC,aAAlD,iBAAkDA,aAAlD;MAAA,IAAiEC,YAAjE,iBAAiEA,YAAjE;MACA,IAAQhB,OAAR,GAAoB,KAAKiB,KAAzB,CAAQjB,OAAR;MACA,IAAMkB,IAAI,GAAGvD,WAAW,CAACC,iBAAiB,CAACgD,QAAD,CAAlB,CAAxB;;MAEA,IAAIE,IAAI,KAAK,QAAb,EAAuB;QAAA;;QACrB,cAAOvD,OAAO,CAACoD,MAAD,CAAd,eACE,oBAAC,cAAD;UAAA,QACQO,IADR;UAAA,UAEUP,MAFV;UAAA,WAGWE,OAHX;UAAA,iBAIiBE,aAJjB;UAAA,gBAKgBC;QALhB,GADF;MASD;;MACD,IAAIH,OAAJ,EAAa;QAAA;;QACX,eAAOtD,OAAO,CAACoD,MAAD,CAAd,eACE,oBAAC,UAAD;UAAA,eAAwB,OAAxB;UAAA,SAAuCO,IAAvC;UAAA,WAAsDlB,OAAtD;UAAA,mBAAgF,KAAKmB;QAArF,iBACE,oBAAC,SAAD;UAAA,UAAmB1D,GAAnB;UAAA,OAA6B,KAAK6C,OAAlC;UAAA,WAAoDD;QAApD,iBACE,oBAAC,QAAD,2BADF,CADF,CADF;MAOD;;MACD,eAAO9C,OAAO,CAACoD,MAAD,CAAd,eACE,oBAAC,SAAD;QAAA,UAAmBlD,GAAnB;QAAA,WAAiC4C;MAAjC,iBACE,oBAAC,QAAD,2BADF,CADF;IAKD;;;;EAvDwB/C,S;;gBAArByC,Y,iBACiB,U;;gBADjBA,Y,WAEW1B,K;;gBAFX0B,Y,kBAG2B;EAC7Be,IAAI,EAAE,KADuB;EAE7BD,OAAO,EAAE;AAFoB,C;;AAuDjC,IAAMO,cAAuC,GAAG,SAA1CA,cAA0C,CAACC,KAAD,EAAW;EACzD,IAAQV,MAAR,GAA+DU,KAA/D,CAAQV,MAAR;EAAA,IAAgBO,IAAhB,GAA+DG,KAA/D,CAAgBH,IAAhB;EAAA,IAAsBL,OAAtB,GAA+DQ,KAA/D,CAAsBR,OAAtB;EAAA,IAA+BE,aAA/B,GAA+DM,KAA/D,CAA+BN,aAA/B;EAAA,IAA8CC,YAA9C,GAA+DK,KAA/D,CAA8CL,YAA9C;EACA,IAAMM,aAAa,GAAGrE,MAAM,CAAqB,IAArB,CAA5B;;EACA,gBAAkCE,QAAQ,CAA4C;IACpF2B,QAAQ,EAAE,IAD0E;IAEpFyC,WAAW,EAAE;EAFuE,CAA5C,CAA1C;EAAA;EAAA,IAAOC,SAAP;EAAA,IAAkBC,YAAlB;;EAIA,IAAMC,UAAU,GAAGhE,iBAAiB,CAAC4D,aAAD,EAAgBP,aAAhB,CAAjB,CAAgDxB,KAAnE;EAEAnC,eAAe,CAAC,YAAM;IAAA;;IACpB,IAAMuE,QAAQ,GAAGxD,QAAQ,CAACC,aAAT,CAAuB,iBAAvB,CAAjB;IACAuD,QAAQ,CAACC,YAAT,CAAsB,OAAtB,sBAA4CJ,SAAS,CAAC1C,QAAtD;IACA6C,QAAQ,CAAC3C,SAAT,GAAqB,GAArB;IACAb,QAAQ,CAACwB,IAAT,CAAcC,WAAd,CAA0B+B,QAA1B;IACA,IAAME,IAAI,GAAGF,QAAQ,CAACxC,qBAAT,EAAb;IAEAsC,YAAY,CAAC;MACX3C,QAAQ,EAAEd,MAAM,CACd;MADc,CAEbC,gBAFO,0BAEU+C,YAFV,aAEUA,YAFV,uBAEUA,YAAY,CAAET,OAFxB,yEAEmCe,aAAa,CAACf,OAFjD,EAE0D,IAF1D,EAGP1B,gBAHO,CAGU,WAHV,CADC;MAKX0C,WAAW,EAAEM,IAAI,CAACtC;IALP,CAAD,CAAZ;IAOApB,QAAQ,CAACwB,IAAT,CAAcG,WAAd,CAA0B6B,QAA1B;EACD,CAfc,EAeZ,EAfY,CAAf;EAiBA,IAAMG,KAAK,GAAG,MAAd;EACA,IAAMC,UAAU,GAAG,MAAnB;EACA,IAAMC,gBAAgB,GAAGvE,GAAzB;EACA,IAAMwE,gBAAgB,GAAG/E,OAAO,CAC9B;IAAA,OAAMgF,IAAI,CAACC,KAAL,CAAWT,UAAU,GAAGF,SAAS,CAACD,WAAlC,CAAN;EAAA,CAD8B,EAE9B,CAACG,UAAD,EAAaF,SAAS,CAACD,WAAvB,CAF8B,CAAhC;;EAKA,IAAIV,OAAJ,EAAa;IAAA;;IACX,eAAOtD,OAAO,CAACoD,MAAD,CAAd,eACE,oBAAC,gBAAD;MAAA,eACeO,IAAI,CAACkB,MAAL,GAAcH,gBAAd,GAAiC,OAAjC,GAA2C,MAD1D;MAAA,SAESf,IAFT;MAAA,OAGOF,YAHP,aAGOA,YAHP,cAGOA,YAHP,GAGuBM,aAHvB;MAAA,OAIO9D;IAJP,iBAME,oBAAC,UAAD,8BAAa0D,IAAI,CAACmB,SAAL,CAAe,CAAf,EAAkBnB,IAAI,CAACkB,MAAL,GAAcH,gBAAgB,GAAG,CAAjC,GAAqC,CAAvD,CAAb,CANF,eAOE,oBAAC,KAAD,yBAAQf,IAAI,CAACmB,SAAL,CAAenB,IAAI,CAACkB,MAAL,GAAcH,gBAAgB,GAAG,CAAjC,GAAqC,CAApD,CAAR,CAPF,CADF;EAWD,CAZD,MAYO;IAAA;;IACL,eAAO1E,OAAO,CAACoD,MAAD,CAAd,eACE,oBAAC,gBAAD;MAAA,OAAuBK,YAAvB,aAAuBA,YAAvB,cAAuBA,YAAvB,GAAuCM;IAAvC,iBACE,oBAAC,UAAD,8BAAaJ,IAAI,CAACmB,SAAL,CAAe,CAAf,EAAkBnB,IAAI,CAACkB,MAAL,GAAcH,gBAAgB,GAAG,CAAjC,GAAqC,CAAvD,CAAb,CADF,eAEE,oBAAC,KAAD,yBAAQf,IAAI,CAACmB,SAAL,CAAenB,IAAI,CAACkB,MAAL,GAAcH,gBAAgB,GAAG,CAAjC,GAAqC,CAApD,CAAR,CAFF,CADF;EAMD;AACF,CAtDD;;AAwDA,IAAMK,QAAQ,GAAGjF,eAAe,CAAC0C,YAAD,CAAhC;AAEA,eAAeuC,QAAf"}
|
|
1
|
+
{"version":3,"file":"Ellipsis.js","names":["React","useRef","useMemo","useState","useLayoutEffect","createComponent","Component","sstyled","Tooltip","Box","useResizeObserver","reactToText","getOriginChildren","pick","defaultTooltipProps","createMeasurerElement","element","styleElement","window","getComputedStyle","temporaryElement","document","createElement","style","display","padding","position","right","bottom","visibility","fontFamily","getPropertyValue","fontSize","fontWeight","innerHTML","isTextOverflowing","multiline","getBoundingClientRect","currentHeight","height","currentWidth","width","measuringElement","currentSize","initialSize","body","appendChild","whiteSpace","removeChild","RootEllipsis","visible","createRef","setState","showTooltip","asProps","maxLine","textRef","current","SEllipsis","Root","SContainer","styles","Children","tooltip","trim","containerRect","containerRef","includeTooltipProps","state","text","tooltipProps","handlerVisibleChange","EllipsisMiddle","props","resizeElement","symbolWidth","dimension","setDimension","blockWidth","dateSpan","setAttribute","rect","STail","SBeginning","SContainerMiddle","displayedSymbols","Math","round","length","substring","Ellipsis"],"sources":["../../src/Ellipsis.tsx"],"sourcesContent":["import React, { RefObject, useRef, useMemo, useState, useLayoutEffect } from 'react';\nimport createComponent, { Component, sstyled } from '@semcore/core';\nimport Tooltip from '@semcore/tooltip';\nimport { Box } from '@semcore/flex-box';\nimport { useResizeObserver } from './useResizeObserver';\n\nimport style from './style/ellipsis.shadow.css';\nimport reactToText from '@semcore/utils/lib/reactToText';\nimport getOriginChildren from '@semcore/utils/lib/getOriginChildren';\nimport pick from '@semcore/utils/lib/pick';\n\ntype AsProps = {\n maxLine?: number;\n trim?: 'end' | 'middle';\n tooltip?: boolean;\n styles?: React.CSSProperties;\n containerRect?: { width: number };\n // eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope\n containerRef?: RefObject<HTMLElement | null>;\n includeTooltipProps?: string[];\n};\n\ntype AsPropsMiddle = {\n text: string;\n tooltip?: boolean;\n styles?: React.CSSProperties;\n containerRect?: { width: number };\n // eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope\n containerRef?: RefObject<HTMLElement | null>;\n tooltipProps: { [propName: string]: unknown };\n};\n\nconst defaultTooltipProps = [\n 'title',\n 'theme',\n 'strategy',\n 'modifiers',\n 'placement',\n 'interaction',\n 'timeout',\n 'visible',\n 'defaultVisible',\n 'onVisibleChange',\n 'offset',\n 'preventOverflow',\n 'arrow',\n 'flip',\n 'computeStyles',\n 'eventListeners',\n 'onFirstUpdate',\n];\n\nconst createMeasurerElement = (element: HTMLElement) => {\n const styleElement = window.getComputedStyle(element, null);\n const temporaryElement = document.createElement('temporary-block');\n temporaryElement.style.display = 'inline-block';\n temporaryElement.style.padding = '0';\n temporaryElement.style.position = 'absolute';\n temporaryElement.style.right = '150%';\n temporaryElement.style.bottom = '150%';\n temporaryElement.style.visibility = 'hidden';\n temporaryElement.style.fontFamily = styleElement.getPropertyValue('font-family');\n temporaryElement.style.fontSize = styleElement.getPropertyValue('font-size');\n temporaryElement.style.fontWeight = styleElement.getPropertyValue('font-weight');\n\n temporaryElement.innerHTML = element.innerHTML;\n return temporaryElement;\n};\n\nfunction isTextOverflowing(element: HTMLElement | null, multiline: boolean): boolean {\n if (!element) return false;\n\n const { height: currentHeight, width: currentWidth } = element.getBoundingClientRect();\n const measuringElement = createMeasurerElement(element);\n let currentSize, initialSize;\n document.body.appendChild(measuringElement);\n if (multiline) {\n currentSize = currentHeight;\n measuringElement.style.width = `${currentWidth}px`;\n initialSize = measuringElement.getBoundingClientRect().height;\n } else {\n currentSize = currentWidth;\n measuringElement.style.whiteSpace = 'nowrap';\n initialSize = measuringElement.getBoundingClientRect().width;\n }\n document.body.removeChild(measuringElement);\n return currentSize < initialSize;\n}\n\nclass RootEllipsis extends Component<AsProps> {\n static displayName = 'Ellipsis';\n static style = style;\n static defaultProps: AsProps = {\n trim: 'end',\n tooltip: true,\n includeTooltipProps: defaultTooltipProps,\n };\n\n state = {\n visible: false,\n };\n\n textRef = React.createRef<HTMLElement>();\n\n showTooltip() {\n const { maxLine = 1 } = this.asProps;\n return isTextOverflowing(this.textRef.current, maxLine > 1);\n }\n\n handlerVisibleChange = (visible: boolean) => {\n this.setState({ visible: visible && this.showTooltip() });\n };\n\n render() {\n const SEllipsis = this.Root;\n const SContainer = Tooltip;\n const {\n styles,\n Children,\n maxLine,\n tooltip,\n trim,\n containerRect,\n containerRef,\n includeTooltipProps,\n } = this.asProps;\n const { visible } = this.state;\n const text = reactToText(getOriginChildren(Children));\n const tooltipProps = pick(this.asProps, includeTooltipProps);\n\n if (trim === 'middle') {\n return sstyled(styles)(\n <EllipsisMiddle\n text={text}\n styles={styles}\n tooltip={tooltip}\n containerRect={containerRect}\n containerRef={containerRef}\n tooltipProps={tooltipProps}\n />,\n );\n }\n if (tooltip) {\n return sstyled(styles)(\n <SContainer\n interaction=\"hover\"\n title={text}\n visible={visible}\n onVisibleChange={this.handlerVisibleChange}\n {...tooltipProps}\n >\n <SEllipsis render={Box} ref={this.textRef} maxLine={maxLine}>\n <Children />\n </SEllipsis>\n </SContainer>,\n );\n }\n return sstyled(styles)(\n <SEllipsis render={Box} maxLine={maxLine}>\n <Children />\n </SEllipsis>,\n );\n }\n}\n\nconst EllipsisMiddle: React.FC<AsPropsMiddle> = (props) => {\n const { styles, text, tooltip, containerRect, containerRef, tooltipProps } = props;\n const resizeElement = useRef<HTMLElement | null>(null);\n const [dimension, setDimension] = useState<{ fontSize: string; symbolWidth: number }>({\n fontSize: '14',\n symbolWidth: 0,\n });\n const blockWidth = useResizeObserver(resizeElement, containerRect).width;\n\n useLayoutEffect(() => {\n const dateSpan = document.createElement('temporary-block');\n dateSpan.setAttribute('style', `fontSize: ${dimension.fontSize}px`);\n dateSpan.innerHTML = 'a';\n document.body.appendChild(dateSpan);\n const rect = dateSpan.getBoundingClientRect();\n\n setDimension({\n fontSize: window\n // @ts-ignore\n .getComputedStyle(containerRef?.current ?? resizeElement.current, null)\n .getPropertyValue('font-size'),\n symbolWidth: rect.width,\n });\n document.body.removeChild(dateSpan);\n }, []);\n\n const STail = 'span';\n const SBeginning = 'span';\n const SContainerMiddle = Box;\n const displayedSymbols = useMemo(\n () => Math.round(blockWidth / dimension.symbolWidth),\n [blockWidth, dimension.symbolWidth],\n );\n\n if (tooltip) {\n return sstyled(styles)(\n <SContainerMiddle\n interaction={text.length > displayedSymbols ? 'hover' : 'none'}\n title={text}\n ref={containerRef ?? resizeElement}\n tag={Tooltip}\n {...tooltipProps}\n >\n <SBeginning>{text.substring(0, text.length - displayedSymbols / 2 - 1)}</SBeginning>\n <STail>{text.substring(text.length - displayedSymbols / 2 - 1)}</STail>\n </SContainerMiddle>,\n ) as any;\n } else {\n return sstyled(styles)(\n <SContainerMiddle ref={containerRef ?? resizeElement}>\n <SBeginning>{text.substring(0, text.length - displayedSymbols / 2 - 1)}</SBeginning>\n <STail>{text.substring(text.length - displayedSymbols / 2 - 1)}</STail>\n </SContainerMiddle>,\n ) as any;\n }\n};\n\nconst Ellipsis = createComponent(RootEllipsis);\n\nexport default Ellipsis;\n"],"mappings":"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"}
|
package/lib/es6/index.d.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import { CProps } from '@semcore/core';\nimport { RefObject } from 'react';\n\nexport interface IEllipsisProps {\n /**\n * Rows count in multiline Ellipsis\n * @default 1\n */\n maxLine?: number;\n /**\n * Trimming type\n * @default end\n */\n trim?: 'end' | 'middle';\n /**\n * Show tooltip\n * @default true\n */\n tooltip?: boolean;\n /**\n * Ref to the item that will be observed by ResizeObserver\n */\n // eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope\n containerRef?: RefObject<HTMLElement | null>;\n /**\n * Explicit sizes of container text should be trimmed in\n **/\n containerRect?: { width: number };\n}\n\ndeclare const useResizeObserver: (\n ref: RefObject<HTMLElement>,\n hookOverride?: { width: number },\n) => { width: number };\n\ndeclare const Ellipsis: <T>(props: CProps<IEllipsisProps & T>) => ReturnEl;\n\nexport { useResizeObserver };\nexport default Ellipsis;\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import { CProps, ReturnEl } from '@semcore/core';\nimport { RefObject } from 'react';\nimport { IBoxProps } from '@semcore/flex-box';\nimport { ITooltipProps } from '@semcore/tooltip';\n\nexport interface IEllipsisProps extends IBoxProps, ITooltipProps {\n /**\n * Rows count in multiline Ellipsis\n * @default 1\n */\n maxLine?: number;\n /**\n * Trimming type\n * @default end\n */\n trim?: 'end' | 'middle';\n /**\n * Show tooltip\n * @default true\n */\n tooltip?: boolean;\n /**\n * Ref to the item that will be observed by ResizeObserver\n */\n // eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope\n containerRef?: RefObject<HTMLElement | null>;\n /**\n * Explicit sizes of container text should be trimmed in\n **/\n containerRect?: { width: number };\n /** List of props that will be passed to tooltip\n * @default ['title', 'theme', 'strategy', 'modifiers', 'placement', 'interaction', 'timeout', 'visible', 'defaultVisible', 'onVisibleChange', 'offset', 'preventOverflow', 'arrow', 'flip', 'computeStyles', 'eventListeners', 'onFirstUpdate']\n */\n includeTooltipProps?: string[];\n}\n\ndeclare const useResizeObserver: (\n ref: RefObject<HTMLElement>,\n hookOverride?: { width: number },\n) => { width: number };\n\ndeclare const Ellipsis: <T>(props: CProps<IEllipsisProps & T>) => ReturnEl;\n\nexport { useResizeObserver };\nexport default Ellipsis;\n"],"mappings":""}
|