@semcore/ellipsis 16.0.0-prerelease.4 → 16.0.0-prerelease.7
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/lib/esm/Ellipsis.mjs +232 -160
- package/lib/esm/index.mjs +4 -4
- package/lib/esm/useResizeObserver.mjs +28 -16
- package/package.json +4 -4
package/lib/esm/Ellipsis.mjs
CHANGED
|
@@ -1,83 +1,119 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
import { sstyled
|
|
11
|
-
import
|
|
12
|
-
import
|
|
13
|
-
import { Box
|
|
14
|
-
import { useResizeObserver
|
|
15
|
-
import
|
|
16
|
-
import
|
|
17
|
-
import
|
|
18
|
-
import
|
|
19
|
-
import
|
|
20
|
-
import { forkRef
|
|
21
|
-
import { callAllEventHandlers
|
|
22
|
-
var
|
|
1
|
+
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
2
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
3
|
+
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
4
|
+
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
|
|
5
|
+
import _createClass from "@babel/runtime/helpers/esm/createClass";
|
|
6
|
+
import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
|
|
7
|
+
import _inherits from "@babel/runtime/helpers/esm/inherits";
|
|
8
|
+
import _createSuper from "@babel/runtime/helpers/esm/createSuper";
|
|
9
|
+
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
10
|
+
import { sstyled, createComponent, Component, assignProps } from "@semcore/core";
|
|
11
|
+
import React from "react";
|
|
12
|
+
import Tooltip from "@semcore/tooltip";
|
|
13
|
+
import { Box } from "@semcore/flex-box";
|
|
14
|
+
import { useResizeObserver } from "./useResizeObserver.mjs";
|
|
15
|
+
import useEnhancedEffect from "@semcore/core/lib/utils/use/useEnhancedEffect";
|
|
16
|
+
import findComponent, { isAdvanceMode } from "@semcore/core/lib/utils/findComponent";
|
|
17
|
+
import reactToText from "@semcore/core/lib/utils/reactToText";
|
|
18
|
+
import getOriginChildren from "@semcore/core/lib/utils/getOriginChildren";
|
|
19
|
+
import pick from "@semcore/core/lib/utils/pick";
|
|
20
|
+
import { forkRef } from "@semcore/core/lib/utils/ref";
|
|
21
|
+
import { callAllEventHandlers } from "@semcore/core/lib/utils/assignProps";
|
|
22
|
+
var _excluded = ["styles", "Children", "maxLine", "tooltip", "trim", "containerRect", "containerRef", "includeTooltipProps", "children"], _excluded2 = ["styles", "text", "tooltip", "containerRect", "containerRef", "textRef", "tooltipProps", "children", "advanceMode"];
|
|
23
|
+
var style = (
|
|
23
24
|
/*__reshadow_css_start__*/
|
|
24
|
-
(
|
|
25
|
+
(sstyled.insert(
|
|
25
26
|
/*__inner_css_start__*/
|
|
26
27
|
".___SContainerMiddle_1gjq8_gg_,.___SContainer_1gjq8_gg_,.___SEllipsis_1gjq8_gg_.__middle-mod_1gjq8_gg_,.___SNoTooltipContainer_1gjq8_gg_{display:flex;overflow:hidden}.___SBeginning_1gjq8_gg_,.___SEllipsis_1gjq8_gg_{overflow:hidden;display:inline-block;text-overflow:ellipsis;white-space:pre}.___SEllipsis_1gjq8_gg_.__maxLine_1gjq8_gg_{display:-webkit-box;-webkit-line-clamp:var(--maxLine_1gjq8);-webkit-box-orient:vertical;overflow:hidden;white-space:normal;word-wrap:break-word}.___SContainerMiddle_1gjq8_gg_>:has(.___SBeginning_1gjq8_gg_),.___SContainerMiddle_1gjq8_gg_>:has(.___STail_1gjq8_gg_){display:flex;width:100%}.___STail_1gjq8_gg_{white-space:pre}",
|
|
27
28
|
"1gjq8_gg_"
|
|
28
29
|
), {
|
|
29
|
-
__SContainer: "___SContainer_1gjq8_gg_",
|
|
30
|
-
__SNoTooltipContainer: "___SNoTooltipContainer_1gjq8_gg_",
|
|
31
|
-
__SContainerMiddle: "___SContainerMiddle_1gjq8_gg_",
|
|
32
|
-
__SBeginning: "___SBeginning_1gjq8_gg_",
|
|
33
|
-
__SEllipsis: "___SEllipsis_1gjq8_gg_",
|
|
30
|
+
"__SContainer": "___SContainer_1gjq8_gg_",
|
|
31
|
+
"__SNoTooltipContainer": "___SNoTooltipContainer_1gjq8_gg_",
|
|
32
|
+
"__SContainerMiddle": "___SContainerMiddle_1gjq8_gg_",
|
|
33
|
+
"__SBeginning": "___SBeginning_1gjq8_gg_",
|
|
34
|
+
"__SEllipsis": "___SEllipsis_1gjq8_gg_",
|
|
34
35
|
"_middle-mod": "__middle-mod_1gjq8_gg_",
|
|
35
|
-
_maxLine: "__maxLine_1gjq8_gg_",
|
|
36
|
+
"_maxLine": "__maxLine_1gjq8_gg_",
|
|
36
37
|
"--maxLine": "--maxLine_1gjq8",
|
|
37
|
-
__STail: "___STail_1gjq8_gg_"
|
|
38
|
+
"__STail": "___STail_1gjq8_gg_"
|
|
38
39
|
})
|
|
39
|
-
)
|
|
40
|
-
|
|
41
|
-
|
|
40
|
+
);
|
|
41
|
+
var defaultTooltipProps = ["title", "theme", "strategy", "modifiers", "placement", "interaction", "timeout", "visible", "defaultVisible", "onVisibleChange", "offset", "preventOverflow", "arrow", "flip", "computeStyles", "eventListeners", "onFirstUpdate", "cursorAnchoring"];
|
|
42
|
+
var createMeasurerElement = function createMeasurerElement2(element, text) {
|
|
43
|
+
var styleElement = window.getComputedStyle(element, null);
|
|
44
|
+
var temporaryElement = document.createElement("temporary-block");
|
|
45
|
+
temporaryElement.style.display = styleElement.getPropertyValue("display");
|
|
46
|
+
temporaryElement.style.padding = styleElement.getPropertyValue("padding");
|
|
47
|
+
temporaryElement.style.position = "absolute";
|
|
48
|
+
temporaryElement.style.right = "0%";
|
|
49
|
+
temporaryElement.style.bottom = "0%";
|
|
50
|
+
temporaryElement.style.visibility = "hidden";
|
|
51
|
+
temporaryElement.style.fontFamily = styleElement.getPropertyValue("font-family");
|
|
52
|
+
temporaryElement.style.fontSize = styleElement.getPropertyValue("font-size");
|
|
53
|
+
temporaryElement.style.fontWeight = styleElement.getPropertyValue("font-weight");
|
|
54
|
+
temporaryElement.style.lineHeight = styleElement.getPropertyValue("line-height");
|
|
55
|
+
temporaryElement.style.whiteSpace = styleElement.getPropertyValue("white-space");
|
|
56
|
+
temporaryElement.style.wordWrap = styleElement.getPropertyValue("word-wrap");
|
|
57
|
+
temporaryElement.style.fontFeatureSettings = styleElement.getPropertyValue("font-feature-settings");
|
|
58
|
+
temporaryElement.style.fontVariantNumeric = styleElement.getPropertyValue("font-variant-numeric");
|
|
59
|
+
temporaryElement.innerHTML = text !== null && text !== void 0 ? text : element.innerHTML;
|
|
60
|
+
return temporaryElement;
|
|
42
61
|
};
|
|
43
|
-
function
|
|
44
|
-
if (!
|
|
45
|
-
var
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
62
|
+
function isTextOverflowing(element, multiline, text) {
|
|
63
|
+
if (!element) return false;
|
|
64
|
+
var _element$getBoundingC = element.getBoundingClientRect(), currentHeight = _element$getBoundingC.height, currentWidth = _element$getBoundingC.width;
|
|
65
|
+
var measuringElement = createMeasurerElement(element, text);
|
|
66
|
+
var isOverflowing = false;
|
|
67
|
+
document.body.appendChild(measuringElement);
|
|
68
|
+
if (multiline) {
|
|
69
|
+
measuringElement.style.width = "".concat(currentWidth, "px");
|
|
70
|
+
var width = measuringElement.scrollWidth;
|
|
71
|
+
var height = measuringElement.getBoundingClientRect().height;
|
|
72
|
+
if (Math.ceil(currentHeight) < height || Math.ceil(currentWidth) < width) {
|
|
73
|
+
isOverflowing = true;
|
|
74
|
+
}
|
|
75
|
+
} else {
|
|
76
|
+
measuringElement.style.whiteSpace = "nowrap";
|
|
77
|
+
isOverflowing = Math.ceil(currentWidth) < measuringElement.getBoundingClientRect().width;
|
|
78
|
+
}
|
|
79
|
+
document.body.removeChild(measuringElement);
|
|
80
|
+
return isOverflowing;
|
|
53
81
|
}
|
|
54
|
-
var
|
|
55
|
-
forcedAdvancedMode:
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
|
|
82
|
+
var forcedAdvancedMode = {
|
|
83
|
+
forcedAdvancedMode: true
|
|
84
|
+
};
|
|
85
|
+
var noAdvancedMode = {};
|
|
86
|
+
var RootEllipsis = /* @__PURE__ */ function(_Component) {
|
|
87
|
+
_inherits(RootEllipsis2, _Component);
|
|
88
|
+
var _super = _createSuper(RootEllipsis2);
|
|
89
|
+
function RootEllipsis2() {
|
|
90
|
+
var _this;
|
|
91
|
+
_classCallCheck(this, RootEllipsis2);
|
|
92
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
93
|
+
args[_key] = arguments[_key];
|
|
94
|
+
}
|
|
95
|
+
_this = _super.call.apply(_super, [this].concat(args));
|
|
96
|
+
_defineProperty(_assertThisInitialized(_this), "state", {
|
|
97
|
+
visible: false
|
|
98
|
+
});
|
|
99
|
+
_defineProperty(_assertThisInitialized(_this), "textRef", /* @__PURE__ */ React.createRef());
|
|
100
|
+
_defineProperty(_assertThisInitialized(_this), "handlerVisibleChange", function(visible) {
|
|
101
|
+
_this.setState({
|
|
102
|
+
visible: visible && _this.showTooltip()
|
|
69
103
|
});
|
|
70
|
-
})
|
|
104
|
+
});
|
|
105
|
+
return _this;
|
|
71
106
|
}
|
|
72
|
-
|
|
107
|
+
_createClass(RootEllipsis2, [{
|
|
73
108
|
key: "showTooltip",
|
|
74
|
-
value: function() {
|
|
75
|
-
var
|
|
76
|
-
|
|
109
|
+
value: function showTooltip() {
|
|
110
|
+
var _this$asProps = this.asProps, _this$asProps$maxLine = _this$asProps.maxLine, maxLine = _this$asProps$maxLine === void 0 ? 1 : _this$asProps$maxLine, Children = _this$asProps.Children;
|
|
111
|
+
var text = reactToText(getOriginChildren(Children));
|
|
112
|
+
return isTextOverflowing(this.textRef.current, maxLine > 1, text);
|
|
77
113
|
}
|
|
78
114
|
}, {
|
|
79
115
|
key: "getContentProps",
|
|
80
|
-
value: function() {
|
|
116
|
+
value: function getContentProps() {
|
|
81
117
|
return {
|
|
82
118
|
ref: this.textRef,
|
|
83
119
|
maxLine: this.asProps.maxLine
|
|
@@ -85,119 +121,155 @@ var I = {
|
|
|
85
121
|
}
|
|
86
122
|
}, {
|
|
87
123
|
key: "getPopperProps",
|
|
88
|
-
value: function() {
|
|
89
|
-
var
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
124
|
+
value: function getPopperProps() {
|
|
125
|
+
var _this$asProps2 = this.asProps, Children = _this$asProps2.Children, includeTooltipProps = _this$asProps2.includeTooltipProps;
|
|
126
|
+
var text = reactToText(getOriginChildren(Children));
|
|
127
|
+
var tooltipProps = pick(this.asProps, includeTooltipProps);
|
|
128
|
+
return _objectSpread({
|
|
129
|
+
children: text
|
|
130
|
+
}, tooltipProps);
|
|
93
131
|
}
|
|
94
132
|
}, {
|
|
95
133
|
key: "render",
|
|
96
|
-
value: function() {
|
|
97
|
-
var
|
|
98
|
-
|
|
99
|
-
var
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
134
|
+
value: function render() {
|
|
135
|
+
var _ref4, _tooltipProps$visible;
|
|
136
|
+
var SEllipsis = this.Root;
|
|
137
|
+
var SContainer = Tooltip;
|
|
138
|
+
var SNoTooltipContainer = Box;
|
|
139
|
+
var _this$asProps3 = this.asProps, styles = _this$asProps3.styles, Children = _this$asProps3.Children, maxLine = _this$asProps3.maxLine, tooltip = _this$asProps3.tooltip, trim = _this$asProps3.trim, containerRect = _this$asProps3.containerRect, containerRef = _this$asProps3.containerRef, includeTooltipProps = _this$asProps3.includeTooltipProps;
|
|
140
|
+
_this$asProps3.children;
|
|
141
|
+
var other = _objectWithoutProperties(_this$asProps3, _excluded);
|
|
142
|
+
var visible = this.state.visible;
|
|
143
|
+
var advancedContent = findComponent(Children, [Ellipsis.Content.displayName]);
|
|
144
|
+
var text = reactToText(advancedContent || getOriginChildren(Children));
|
|
145
|
+
var advanceMode = isAdvanceMode(Children, [Ellipsis.Content.displayName, Ellipsis.Popper.displayName]);
|
|
146
|
+
var tooltipProps = pick(this.asProps, includeTooltipProps);
|
|
147
|
+
tooltipProps.visible = (_tooltipProps$visible = tooltipProps.visible) !== null && _tooltipProps$visible !== void 0 ? _tooltipProps$visible : visible;
|
|
148
|
+
tooltipProps.onVisibleChange = tooltipProps.onVisibleChange ? callAllEventHandlers(tooltipProps.onVisibleChange, this.handlerVisibleChange) : this.handlerVisibleChange;
|
|
149
|
+
if (trim === "middle") {
|
|
150
|
+
var _ref2;
|
|
151
|
+
return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(EllipsisMiddle, _ref2.cn("EllipsisMiddle", _objectSpread({
|
|
152
|
+
"text": text,
|
|
153
|
+
"styles": styles,
|
|
154
|
+
"tooltip": tooltip,
|
|
155
|
+
"containerRect": containerRect,
|
|
156
|
+
"containerRef": containerRef,
|
|
157
|
+
"textRef": this.textRef,
|
|
158
|
+
"tooltipProps": tooltipProps,
|
|
159
|
+
"advanceMode": advanceMode
|
|
160
|
+
}, other)), /* @__PURE__ */ React.createElement(Children, _ref2.cn("Children", {})));
|
|
112
161
|
}
|
|
113
|
-
if (
|
|
114
|
-
var
|
|
115
|
-
return
|
|
116
|
-
interaction: "hover",
|
|
117
|
-
title:
|
|
118
|
-
},
|
|
119
|
-
render:
|
|
120
|
-
ref: this.textRef,
|
|
121
|
-
maxLine:
|
|
122
|
-
},
|
|
162
|
+
if (tooltip) {
|
|
163
|
+
var _ref3;
|
|
164
|
+
return _ref3 = sstyled(styles), /* @__PURE__ */ React.createElement(SContainer, _ref3.cn("SContainer", _objectSpread(_objectSpread({
|
|
165
|
+
"interaction": "hover",
|
|
166
|
+
"title": !advanceMode ? text : void 0
|
|
167
|
+
}, tooltipProps), advanceMode ? forcedAdvancedMode : noAdvancedMode)), advanceMode ? /* @__PURE__ */ React.createElement(Children, _ref3.cn("Children", {})) : /* @__PURE__ */ React.createElement(SEllipsis, _ref3.cn("SEllipsis", _objectSpread({
|
|
168
|
+
"render": Box,
|
|
169
|
+
"ref": this.textRef,
|
|
170
|
+
"maxLine": maxLine
|
|
171
|
+
}, other)), /* @__PURE__ */ React.createElement(Children, _ref3.cn("Children", {}))));
|
|
123
172
|
}
|
|
124
|
-
return
|
|
125
|
-
render:
|
|
126
|
-
ref: this.textRef,
|
|
127
|
-
maxLine:
|
|
128
|
-
},
|
|
173
|
+
return _ref4 = sstyled(styles), /* @__PURE__ */ React.createElement(SNoTooltipContainer, _ref4.cn("SNoTooltipContainer", {}), advanceMode ? /* @__PURE__ */ React.createElement(Children, _ref4.cn("Children", {})) : /* @__PURE__ */ React.createElement(SEllipsis, _ref4.cn("SEllipsis", _objectSpread({
|
|
174
|
+
"render": Box,
|
|
175
|
+
"ref": this.textRef,
|
|
176
|
+
"maxLine": maxLine
|
|
177
|
+
}, other)), /* @__PURE__ */ React.createElement(Children, _ref4.cn("Children", {}))));
|
|
129
178
|
}
|
|
130
|
-
}])
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
179
|
+
}]);
|
|
180
|
+
return RootEllipsis2;
|
|
181
|
+
}(Component);
|
|
182
|
+
_defineProperty(RootEllipsis, "displayName", "Ellipsis");
|
|
183
|
+
_defineProperty(RootEllipsis, "style", style);
|
|
184
|
+
_defineProperty(RootEllipsis, "defaultProps", {
|
|
135
185
|
trim: "end",
|
|
136
|
-
tooltip:
|
|
137
|
-
includeTooltipProps:
|
|
186
|
+
tooltip: true,
|
|
187
|
+
includeTooltipProps: defaultTooltipProps,
|
|
138
188
|
__excludeProps: ["title"]
|
|
139
189
|
});
|
|
140
|
-
var
|
|
141
|
-
|
|
190
|
+
var EllipsisMiddleContext = /* @__PURE__ */ React.createContext(null);
|
|
191
|
+
var EllipsisMiddle = function EllipsisMiddle2(props) {
|
|
192
|
+
var _ref7;
|
|
193
|
+
var styles = props.styles, text = props.text, tooltip = props.tooltip, containerRect = props.containerRect, containerRef = props.containerRef, textRef = props.textRef, tooltipProps = props.tooltipProps, children = props.children, advanceMode = props.advanceMode, otherProps = _objectWithoutProperties(props, _excluded2);
|
|
194
|
+
var resizeElement = React.useRef(null);
|
|
195
|
+
var _React$useState = React.useState({
|
|
142
196
|
fontSize: "14",
|
|
143
197
|
symbolWidth: 0
|
|
144
|
-
}),
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
198
|
+
}), _React$useState2 = _slicedToArray(_React$useState, 2), dimension = _React$useState2[0], setDimension = _React$useState2[1];
|
|
199
|
+
var blockWidth = useResizeObserver(resizeElement, containerRect).width;
|
|
200
|
+
useEnhancedEffect(function() {
|
|
201
|
+
var node = (containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) || (resizeElement === null || resizeElement === void 0 ? void 0 : resizeElement.current);
|
|
202
|
+
if (!node) return;
|
|
203
|
+
var dateSpan = document.createElement("temporary-block");
|
|
204
|
+
dateSpan.setAttribute("style", "fontSize: ".concat(dimension.fontSize, "px"));
|
|
205
|
+
dateSpan.innerHTML = "a";
|
|
206
|
+
document.body.appendChild(dateSpan);
|
|
207
|
+
var rect = dateSpan.getBoundingClientRect();
|
|
208
|
+
setDimension({
|
|
209
|
+
fontSize: window.getComputedStyle(node, null).getPropertyValue("font-size"),
|
|
210
|
+
symbolWidth: rect.width
|
|
211
|
+
});
|
|
212
|
+
document.body.removeChild(dateSpan);
|
|
156
213
|
}, []);
|
|
157
|
-
var
|
|
158
|
-
|
|
159
|
-
|
|
214
|
+
var STail = "span";
|
|
215
|
+
var SBeginning = "span";
|
|
216
|
+
var SContainerMiddle = props.tag || Box;
|
|
217
|
+
var SAdvancedModeContainerMiddle = Tooltip;
|
|
218
|
+
var displayedSymbols = React.useMemo(function() {
|
|
219
|
+
return Math.round(blockWidth / dimension.symbolWidth);
|
|
220
|
+
}, [blockWidth, dimension.symbolWidth]);
|
|
221
|
+
var interaction = text.length > displayedSymbols ? "hover" : "none";
|
|
222
|
+
var ref = containerRef !== null && containerRef !== void 0 ? containerRef : resizeElement;
|
|
223
|
+
var contextValue = React.useMemo(function() {
|
|
160
224
|
return {
|
|
161
|
-
begining:
|
|
162
|
-
tail:
|
|
163
|
-
ref
|
|
225
|
+
begining: text.substring(0, text.length - displayedSymbols / 2 - 1),
|
|
226
|
+
tail: text.substring(text.length - displayedSymbols / 2 - 1),
|
|
227
|
+
ref
|
|
164
228
|
};
|
|
165
|
-
}, [
|
|
166
|
-
if (
|
|
167
|
-
var
|
|
168
|
-
return
|
|
169
|
-
interaction:
|
|
170
|
-
},
|
|
171
|
-
value:
|
|
172
|
-
},
|
|
229
|
+
}, [text, displayedSymbols]);
|
|
230
|
+
if (advanceMode) {
|
|
231
|
+
var _ref5;
|
|
232
|
+
return _ref5 = sstyled(styles), /* @__PURE__ */ React.createElement(SAdvancedModeContainerMiddle, _ref5.cn("SAdvancedModeContainerMiddle", _objectSpread(_objectSpread({
|
|
233
|
+
"interaction": interaction
|
|
234
|
+
}, tooltipProps), forcedAdvancedMode)), /* @__PURE__ */ React.createElement(EllipsisMiddleContext.Provider, {
|
|
235
|
+
value: contextValue
|
|
236
|
+
}, children));
|
|
173
237
|
}
|
|
174
|
-
if (
|
|
175
|
-
var
|
|
176
|
-
return
|
|
177
|
-
interaction:
|
|
178
|
-
title:
|
|
179
|
-
ref:
|
|
180
|
-
tag:
|
|
181
|
-
__excludeProps: ["title"]
|
|
182
|
-
},
|
|
238
|
+
if (tooltip) {
|
|
239
|
+
var _ref6;
|
|
240
|
+
return _ref6 = sstyled(styles), /* @__PURE__ */ React.createElement(SContainerMiddle, _ref6.cn("SContainerMiddle", _objectSpread({
|
|
241
|
+
"interaction": interaction,
|
|
242
|
+
"title": text,
|
|
243
|
+
"ref": forkRef(ref, textRef),
|
|
244
|
+
"tag": Tooltip,
|
|
245
|
+
"__excludeProps": ["title"]
|
|
246
|
+
}, tooltipProps)), /* @__PURE__ */ React.createElement(SBeginning, _ref6.cn("SBeginning", {}), contextValue.begining), /* @__PURE__ */ React.createElement(STail, _ref6.cn("STail", {}), contextValue.tail));
|
|
183
247
|
}
|
|
184
|
-
return
|
|
185
|
-
ref:
|
|
186
|
-
})), /* @__PURE__ */
|
|
187
|
-
}
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
248
|
+
return _ref7 = sstyled(styles), /* @__PURE__ */ React.createElement(SContainerMiddle, _ref7.cn("SContainerMiddle", _objectSpread(_objectSpread({}, otherProps), {}, {
|
|
249
|
+
"ref": containerRef !== null && containerRef !== void 0 ? containerRef : resizeElement
|
|
250
|
+
})), /* @__PURE__ */ React.createElement(SBeginning, _ref7.cn("SBeginning", {}), contextValue.begining), /* @__PURE__ */ React.createElement(STail, _ref7.cn("STail", {}), contextValue.tail));
|
|
251
|
+
};
|
|
252
|
+
var Content = function Content2(_ref10) {
|
|
253
|
+
var _ref = arguments[0], _ref9;
|
|
254
|
+
var styles = _ref10.styles, Children = _ref10.Children;
|
|
255
|
+
var SEllipsis = Tooltip.Trigger;
|
|
256
|
+
var ellipsisMiddleContext = React.useContext(EllipsisMiddleContext);
|
|
257
|
+
var STail = "span";
|
|
258
|
+
var SBeginning = "span";
|
|
259
|
+
if (ellipsisMiddleContext) {
|
|
260
|
+
var _ref8;
|
|
261
|
+
var begining = ellipsisMiddleContext.begining, tail = ellipsisMiddleContext.tail, ref = ellipsisMiddleContext.ref;
|
|
262
|
+
return _ref8 = sstyled(styles), /* @__PURE__ */ React.createElement(SEllipsis, _ref8.cn("SEllipsis", _objectSpread({}, assignProps({
|
|
263
|
+
"middle-mod": true,
|
|
264
|
+
"ref": ref
|
|
265
|
+
}, _ref))), /* @__PURE__ */ React.createElement(SBeginning, _ref8.cn("SBeginning", {}), begining), /* @__PURE__ */ React.createElement(STail, _ref8.cn("STail", {}), tail));
|
|
195
266
|
}
|
|
196
|
-
return
|
|
197
|
-
}
|
|
198
|
-
|
|
199
|
-
|
|
267
|
+
return _ref9 = sstyled(styles), /* @__PURE__ */ React.createElement(SEllipsis, _ref9.cn("SEllipsis", _objectSpread({}, assignProps({}, _ref))), /* @__PURE__ */ React.createElement(Children, _ref9.cn("Children", {})));
|
|
268
|
+
};
|
|
269
|
+
var Ellipsis = createComponent(RootEllipsis, {
|
|
270
|
+
Content,
|
|
271
|
+
Popper: Tooltip.Popper
|
|
200
272
|
});
|
|
201
273
|
export {
|
|
202
|
-
|
|
274
|
+
Ellipsis as default
|
|
203
275
|
};
|
package/lib/esm/index.mjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { default as
|
|
2
|
-
import { useResizeObserver
|
|
1
|
+
import { default as default2 } from "./Ellipsis.mjs";
|
|
2
|
+
import { useResizeObserver } from "./useResizeObserver.mjs";
|
|
3
3
|
export {
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
default2 as default,
|
|
5
|
+
useResizeObserver
|
|
6
6
|
};
|
|
@@ -1,24 +1,36 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
var
|
|
6
|
-
var
|
|
7
|
-
|
|
1
|
+
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
2
|
+
import React from "react";
|
|
3
|
+
import useEnhancedEffect from "@semcore/core/lib/utils/use/useEnhancedEffect";
|
|
4
|
+
import canUseDOM from "@semcore/core/lib/utils/canUseDOM";
|
|
5
|
+
var useResizeObserver = function useResizeObserver2(ref, hookOverride) {
|
|
6
|
+
var _React$useState = React.useState(0), _React$useState2 = _slicedToArray(_React$useState, 2), width = _React$useState2[0], setWidth = _React$useState2[1];
|
|
7
|
+
var handleResize = React.useCallback(function(entries) {
|
|
8
|
+
setWidth(entries[0].contentRect.width);
|
|
8
9
|
}, []);
|
|
9
|
-
|
|
10
|
-
if (
|
|
11
|
-
|
|
12
|
-
|
|
10
|
+
useEnhancedEffect(function() {
|
|
11
|
+
if (!ref.current) {
|
|
12
|
+
return;
|
|
13
|
+
}
|
|
14
|
+
if (hookOverride) {
|
|
15
|
+
return;
|
|
16
|
+
}
|
|
17
|
+
if (canUseDOM()) {
|
|
18
|
+
var ro = new ResizeObserver(function(entries) {
|
|
19
|
+
handleResize(entries);
|
|
13
20
|
});
|
|
14
|
-
|
|
15
|
-
|
|
21
|
+
ro.observe(ref.current);
|
|
22
|
+
return function() {
|
|
23
|
+
ro.disconnect();
|
|
16
24
|
};
|
|
17
25
|
}
|
|
18
|
-
}, [
|
|
19
|
-
|
|
26
|
+
}, [hookOverride]);
|
|
27
|
+
if (hookOverride) {
|
|
28
|
+
return hookOverride;
|
|
29
|
+
}
|
|
30
|
+
return {
|
|
31
|
+
width
|
|
20
32
|
};
|
|
21
33
|
};
|
|
22
34
|
export {
|
|
23
|
-
|
|
35
|
+
useResizeObserver
|
|
24
36
|
};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/ellipsis",
|
|
3
3
|
"description": "Semrush Ellipsis Component",
|
|
4
|
-
"version": "16.0.0-prerelease.
|
|
4
|
+
"version": "16.0.0-prerelease.7",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
@@ -14,11 +14,11 @@
|
|
|
14
14
|
"types": "./lib/types/index.d.ts"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@semcore/tooltip": "16.0.0-prerelease.
|
|
18
|
-
"@semcore/flex-box": "16.0.0-prerelease.
|
|
17
|
+
"@semcore/tooltip": "16.0.0-prerelease.7",
|
|
18
|
+
"@semcore/flex-box": "16.0.0-prerelease.7"
|
|
19
19
|
},
|
|
20
20
|
"peerDependencies": {
|
|
21
|
-
"@semcore/base-components": "^16.0.0-prerelease.
|
|
21
|
+
"@semcore/base-components": "^16.0.0-prerelease.7"
|
|
22
22
|
},
|
|
23
23
|
"devDependencies": {
|
|
24
24
|
"@types/react": "18.0.21",
|