@elastic/eui 88.5.0 → 88.5.1
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/dist/eui_theme_dark.css +8 -21
- package/dist/eui_theme_dark.min.css +1 -1
- package/dist/eui_theme_light.css +8 -21
- package/dist/eui_theme_light.min.css +1 -1
- package/es/components/collapsible_nav_beta/collapsible_nav_beta.js +20 -6
- package/es/components/collapsible_nav_beta/collapsible_nav_beta.styles.js +4 -14
- package/es/components/collapsible_nav_beta/collapsible_nav_body_footer.js +57 -0
- package/es/components/collapsible_nav_beta/collapsible_nav_body_footer.styles.js +25 -0
- package/es/components/collapsible_nav_beta/collapsible_nav_group/collapsible_nav_group.js +156 -0
- package/es/components/collapsible_nav_beta/collapsible_nav_group/collapsible_nav_group.styles.js +19 -0
- package/es/components/collapsible_nav_beta/collapsible_nav_group/index.js +9 -0
- package/es/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_button.js +3 -7
- package/es/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_item.js +3 -7
- package/es/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_popover.js +4 -8
- package/es/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_accordion.js +16 -63
- package/es/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_accordion.styles.js +2 -10
- package/es/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.js +122 -41
- package/es/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.styles.js +13 -3
- package/es/components/combo_box/combo_box.js +12 -25
- package/es/components/combo_box/combo_box_input/combo_box_input.js +61 -53
- package/eui.d.ts +149 -78
- package/i18ntokens.json +8 -8
- package/lib/components/collapsible_nav_beta/collapsible_nav_beta.js +20 -6
- package/lib/components/collapsible_nav_beta/collapsible_nav_beta.styles.js +11 -19
- package/lib/components/collapsible_nav_beta/collapsible_nav_body_footer.js +67 -0
- package/lib/components/collapsible_nav_beta/collapsible_nav_body_footer.styles.js +33 -0
- package/lib/components/collapsible_nav_beta/collapsible_nav_group/collapsible_nav_group.js +166 -0
- package/lib/components/collapsible_nav_beta/collapsible_nav_group/collapsible_nav_group.styles.js +26 -0
- package/lib/components/collapsible_nav_beta/collapsible_nav_group/index.js +12 -0
- package/lib/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_button.js +3 -7
- package/lib/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_item.js +3 -7
- package/lib/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_popover.js +4 -8
- package/lib/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_accordion.js +14 -61
- package/lib/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_accordion.styles.js +1 -9
- package/lib/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.js +122 -39
- package/lib/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.styles.js +13 -4
- package/lib/components/combo_box/combo_box.js +12 -25
- package/lib/components/combo_box/combo_box_input/combo_box_input.js +61 -53
- package/optimize/es/components/collapsible_nav_beta/collapsible_nav_beta.js +17 -3
- package/optimize/es/components/collapsible_nav_beta/collapsible_nav_beta.styles.js +4 -14
- package/optimize/es/components/collapsible_nav_beta/collapsible_nav_body_footer.js +56 -0
- package/optimize/es/components/collapsible_nav_beta/collapsible_nav_body_footer.styles.js +25 -0
- package/optimize/es/components/collapsible_nav_beta/collapsible_nav_group/collapsible_nav_group.js +48 -0
- package/optimize/es/components/collapsible_nav_beta/collapsible_nav_group/collapsible_nav_group.styles.js +19 -0
- package/optimize/es/components/collapsible_nav_beta/collapsible_nav_group/index.js +9 -0
- package/optimize/es/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_accordion.js +7 -33
- package/optimize/es/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_accordion.styles.js +2 -10
- package/optimize/es/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.js +54 -21
- package/optimize/es/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.styles.js +13 -3
- package/optimize/es/components/combo_box/combo_box.js +12 -25
- package/optimize/es/components/combo_box/combo_box_input/combo_box_input.js +61 -52
- package/optimize/lib/components/collapsible_nav_beta/collapsible_nav_beta.js +15 -1
- package/optimize/lib/components/collapsible_nav_beta/collapsible_nav_beta.styles.js +11 -19
- package/optimize/lib/components/collapsible_nav_beta/collapsible_nav_body_footer.js +66 -0
- package/optimize/lib/components/collapsible_nav_beta/collapsible_nav_body_footer.styles.js +33 -0
- package/optimize/lib/components/collapsible_nav_beta/collapsible_nav_group/collapsible_nav_group.js +58 -0
- package/optimize/lib/components/collapsible_nav_beta/collapsible_nav_group/collapsible_nav_group.styles.js +26 -0
- package/optimize/lib/components/collapsible_nav_beta/collapsible_nav_group/index.js +12 -0
- package/optimize/lib/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_accordion.js +5 -31
- package/optimize/lib/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_accordion.styles.js +1 -9
- package/optimize/lib/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.js +54 -20
- package/optimize/lib/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.styles.js +13 -4
- package/optimize/lib/components/combo_box/combo_box.js +12 -25
- package/optimize/lib/components/combo_box/combo_box_input/combo_box_input.js +61 -52
- package/package.json +2 -5
- package/src/components/combo_box/_combo_box.scss +12 -19
- package/test-env/components/collapsible_nav_beta/collapsible_nav_beta.js +20 -6
- package/test-env/components/collapsible_nav_beta/collapsible_nav_beta.styles.js +11 -19
- package/test-env/components/collapsible_nav_beta/collapsible_nav_body_footer.js +66 -0
- package/test-env/components/collapsible_nav_beta/collapsible_nav_body_footer.styles.js +33 -0
- package/test-env/components/collapsible_nav_beta/collapsible_nav_group/collapsible_nav_group.js +165 -0
- package/test-env/components/collapsible_nav_beta/collapsible_nav_group/collapsible_nav_group.styles.js +26 -0
- package/test-env/components/collapsible_nav_beta/collapsible_nav_group/index.js +12 -0
- package/test-env/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_button.js +3 -7
- package/test-env/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_item.js +3 -7
- package/test-env/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_popover.js +4 -8
- package/test-env/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_accordion.js +14 -61
- package/test-env/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_accordion.styles.js +1 -9
- package/test-env/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.js +122 -39
- package/test-env/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.styles.js +13 -4
- package/test-env/components/combo_box/combo_box.js +12 -25
- package/test-env/components/combo_box/combo_box_input/combo_box_input.js +61 -53
- package/test-env/components/text_truncate/utils.js +38 -283
|
@@ -19,8 +19,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
|
|
|
19
19
|
var _react = _interopRequireWildcard(require("react"));
|
|
20
20
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
21
21
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
22
|
-
var _reactInputAutosize = _interopRequireDefault(require("react-input-autosize"));
|
|
23
22
|
var _services = require("../../../services");
|
|
23
|
+
var _text_truncate = require("../../text_truncate");
|
|
24
24
|
var _accessibility = require("../../accessibility");
|
|
25
25
|
var _form_control_layout = require("../../form/form_control_layout");
|
|
26
26
|
var _num_icons = require("../../form/form_control_layout/_num_icons");
|
|
@@ -48,8 +48,27 @@ var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
|
|
|
48
48
|
}
|
|
49
49
|
_this = _super.call.apply(_super, [this].concat(args));
|
|
50
50
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
|
|
51
|
+
inputWidth: 2,
|
|
51
52
|
hasFocus: false
|
|
52
53
|
});
|
|
54
|
+
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "widthUtils", void 0);
|
|
55
|
+
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "inputRefCallback", function (el) {
|
|
56
|
+
var _this$props$inputRef, _this$props;
|
|
57
|
+
_this.widthUtils = new _text_truncate.CanvasTextUtils({
|
|
58
|
+
container: el
|
|
59
|
+
});
|
|
60
|
+
(_this$props$inputRef = (_this$props = _this.props).inputRef) === null || _this$props$inputRef === void 0 ? void 0 : _this$props$inputRef.call(_this$props, el);
|
|
61
|
+
});
|
|
62
|
+
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "updateInputSize", function (inputValue) {
|
|
63
|
+
if (!_this.widthUtils) return;
|
|
64
|
+
_this.widthUtils.setTextToCheck(inputValue);
|
|
65
|
+
// Canvas has minute subpixel differences in rendering compared to DOM
|
|
66
|
+
// We'll buffer the input by ~2px just to ensure sufficient width
|
|
67
|
+
var inputWidth = Math.ceil(_this.widthUtils.textWidth) + 2;
|
|
68
|
+
_this.setState({
|
|
69
|
+
inputWidth: inputWidth
|
|
70
|
+
});
|
|
71
|
+
});
|
|
53
72
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "updatePosition", function () {
|
|
54
73
|
// Wait a beat for the DOM to update, since we depend on DOM elements' bounds.
|
|
55
74
|
requestAnimationFrame(function () {
|
|
@@ -71,13 +90,13 @@ var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
|
|
|
71
90
|
});
|
|
72
91
|
});
|
|
73
92
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onKeyDown", function (event) {
|
|
74
|
-
var _this$
|
|
75
|
-
searchValue = _this$
|
|
76
|
-
selectedOptions = _this$
|
|
77
|
-
onRemoveOption = _this$
|
|
78
|
-
singleSelection = _this$
|
|
79
|
-
isListOpen = _this$
|
|
80
|
-
onOpenListClick = _this$
|
|
93
|
+
var _this$props2 = _this.props,
|
|
94
|
+
searchValue = _this$props2.searchValue,
|
|
95
|
+
selectedOptions = _this$props2.selectedOptions,
|
|
96
|
+
onRemoveOption = _this$props2.onRemoveOption,
|
|
97
|
+
singleSelection = _this$props2.singleSelection,
|
|
98
|
+
isListOpen = _this$props2.isListOpen,
|
|
99
|
+
onOpenListClick = _this$props2.onOpenListClick;
|
|
81
100
|
|
|
82
101
|
// When backspacing from an empty input, delete the last pill option in the list
|
|
83
102
|
var searchIsEmpty = !searchValue.length;
|
|
@@ -90,18 +109,10 @@ var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
|
|
|
90
109
|
}
|
|
91
110
|
});
|
|
92
111
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "inputOnChange", function (event) {
|
|
93
|
-
var _this$
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
onChange(event.target.value);
|
|
98
|
-
}
|
|
99
|
-
});
|
|
100
|
-
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "inputRefCallback", function (ref) {
|
|
101
|
-
var autoSizeInputRef = _this.props.autoSizeInputRef;
|
|
102
|
-
if (autoSizeInputRef) {
|
|
103
|
-
autoSizeInputRef(ref);
|
|
104
|
-
}
|
|
112
|
+
var _this$props$onChange, _this$props3;
|
|
113
|
+
var value = event.target.value;
|
|
114
|
+
_this.updateInputSize(value);
|
|
115
|
+
(_this$props$onChange = (_this$props3 = _this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props3, value);
|
|
105
116
|
});
|
|
106
117
|
return _this;
|
|
107
118
|
}
|
|
@@ -119,35 +130,34 @@ var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
|
|
|
119
130
|
}, {
|
|
120
131
|
key: "render",
|
|
121
132
|
value: function render() {
|
|
122
|
-
var _this$
|
|
123
|
-
compressed = _this$
|
|
124
|
-
focusedOptionId = _this$
|
|
125
|
-
fullWidth = _this$
|
|
126
|
-
hasSelectedOptions = _this$
|
|
127
|
-
id = _this$
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
ariaLabelledby = _this$props3['aria-labelledby'];
|
|
133
|
+
var _this$props4 = this.props,
|
|
134
|
+
compressed = _this$props4.compressed,
|
|
135
|
+
focusedOptionId = _this$props4.focusedOptionId,
|
|
136
|
+
fullWidth = _this$props4.fullWidth,
|
|
137
|
+
hasSelectedOptions = _this$props4.hasSelectedOptions,
|
|
138
|
+
id = _this$props4.id,
|
|
139
|
+
isDisabled = _this$props4.isDisabled,
|
|
140
|
+
isListOpen = _this$props4.isListOpen,
|
|
141
|
+
noIcon = _this$props4.noIcon,
|
|
142
|
+
onClear = _this$props4.onClear,
|
|
143
|
+
onClick = _this$props4.onClick,
|
|
144
|
+
onCloseListClick = _this$props4.onCloseListClick,
|
|
145
|
+
onOpenListClick = _this$props4.onOpenListClick,
|
|
146
|
+
onRemoveOption = _this$props4.onRemoveOption,
|
|
147
|
+
placeholder = _this$props4.placeholder,
|
|
148
|
+
rootId = _this$props4.rootId,
|
|
149
|
+
searchValue = _this$props4.searchValue,
|
|
150
|
+
selectedOptions = _this$props4.selectedOptions,
|
|
151
|
+
singleSelectionProp = _this$props4.singleSelection,
|
|
152
|
+
toggleButtonRef = _this$props4.toggleButtonRef,
|
|
153
|
+
value = _this$props4.value,
|
|
154
|
+
prepend = _this$props4.prepend,
|
|
155
|
+
append = _this$props4.append,
|
|
156
|
+
isLoading = _this$props4.isLoading,
|
|
157
|
+
isInvalid = _this$props4.isInvalid,
|
|
158
|
+
autoFocus = _this$props4.autoFocus,
|
|
159
|
+
ariaLabel = _this$props4['aria-label'],
|
|
160
|
+
ariaLabelledby = _this$props4['aria-labelledby'];
|
|
151
161
|
var singleSelection = Boolean(singleSelectionProp);
|
|
152
162
|
var asPlainText = singleSelectionProp && (0, _typeof2.default)(singleSelectionProp) === 'object' && singleSelectionProp.asPlainText || false;
|
|
153
163
|
var pills = selectedOptions ? selectedOptions.map(function (option) {
|
|
@@ -239,7 +249,7 @@ var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
|
|
|
239
249
|
"data-test-subj": "comboBoxInput",
|
|
240
250
|
onClick: onClick,
|
|
241
251
|
tabIndex: -1 // becomes onBlur event's relatedTarget, otherwise relatedTarget is null when clicking on this div
|
|
242
|
-
}, !singleSelection || !searchValue ? pills : null, placeholderMessage, (0, _react2.jsx)(
|
|
252
|
+
}, !singleSelection || !searchValue ? pills : null, placeholderMessage, (0, _react2.jsx)("input", {
|
|
243
253
|
"aria-activedescendant": focusedOptionId,
|
|
244
254
|
"aria-autocomplete": "list",
|
|
245
255
|
"aria-controls": isListOpen ? rootId('listbox') : '',
|
|
@@ -251,7 +261,6 @@ var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
|
|
|
251
261
|
"data-test-subj": "comboBoxSearchInput",
|
|
252
262
|
disabled: isDisabled,
|
|
253
263
|
id: id,
|
|
254
|
-
inputRef: inputRef,
|
|
255
264
|
onBlur: this.onBlur,
|
|
256
265
|
onChange: this.inputOnChange,
|
|
257
266
|
onFocus: this.onFocus,
|
|
@@ -259,7 +268,7 @@ var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
|
|
|
259
268
|
ref: this.inputRefCallback,
|
|
260
269
|
role: "combobox",
|
|
261
270
|
style: {
|
|
262
|
-
|
|
271
|
+
inlineSize: this.state.inputWidth
|
|
263
272
|
},
|
|
264
273
|
value: searchValue,
|
|
265
274
|
autoFocus: autoFocus
|
|
@@ -270,7 +279,6 @@ var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
|
|
|
270
279
|
}(_react.Component);
|
|
271
280
|
exports.EuiComboBoxInput = EuiComboBoxInput;
|
|
272
281
|
EuiComboBoxInput.propTypes = {
|
|
273
|
-
autoSizeInputRef: _propTypes.default.any,
|
|
274
282
|
compressed: _propTypes.default.bool.isRequired,
|
|
275
283
|
focusedOptionId: _propTypes.default.string,
|
|
276
284
|
fullWidth: _propTypes.default.bool,
|
|
@@ -5,306 +5,61 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
7
|
exports.TruncationUtils = exports.CanvasTextUtils = void 0;
|
|
8
|
-
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
9
|
-
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
10
8
|
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
|
|
11
|
-
var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
|
|
12
9
|
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
13
10
|
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
|
|
14
11
|
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
|
|
15
|
-
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
16
12
|
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
13
|
+
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
17
14
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
18
|
-
var
|
|
15
|
+
var _utils = require("./utils");
|
|
19
16
|
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); }; }
|
|
20
|
-
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; } }
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
*/
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
* DOM and canvas measurement due to the different rendering engines used.
|
|
40
|
-
*/
|
|
41
|
-
var CanvasTextUtils = /*#__PURE__*/function () {
|
|
42
|
-
function CanvasTextUtils(_ref) {
|
|
43
|
-
var _this = this;
|
|
44
|
-
var font = _ref.font,
|
|
45
|
-
container = _ref.container;
|
|
46
|
-
(0, _classCallCheck2.default)(this, CanvasTextUtils);
|
|
47
|
-
(0, _defineProperty2.default)(this, "context", void 0);
|
|
48
|
-
(0, _defineProperty2.default)(this, "currentText", '');
|
|
49
|
-
(0, _defineProperty2.default)(this, "computeFontFromElement", function (element) {
|
|
50
|
-
var computedStyles = window.getComputedStyle(element);
|
|
51
|
-
// TODO: font-stretch is not included even though it potentially should be
|
|
52
|
-
// @see https://developer.mozilla.org/en-US/docs/Web/CSS/font#constituent_properties
|
|
53
|
-
// It appears to be unsupported and/or breaks font computation in canvas
|
|
54
|
-
return ['font-style', 'font-variant', 'font-weight', 'font-size', 'font-family'].map(function (prop) {
|
|
55
|
-
return computedStyles.getPropertyValue(prop);
|
|
56
|
-
}).join(' ').trim();
|
|
57
|
-
});
|
|
58
|
-
(0, _defineProperty2.default)(this, "setTextToCheck", function (text) {
|
|
59
|
-
_this.currentText = text;
|
|
60
|
-
});
|
|
61
|
-
this.context = document.createElement('canvas').getContext('2d');
|
|
62
|
-
|
|
63
|
-
// Set the canvas font to ensure text width calculations are correct
|
|
64
|
-
if (font) {
|
|
65
|
-
this.context.font = font;
|
|
66
|
-
} else if (container) {
|
|
67
|
-
this.context.font = this.computeFontFromElement(container);
|
|
68
|
-
}
|
|
69
|
-
}
|
|
70
|
-
(0, _createClass2.default)(CanvasTextUtils, [{
|
|
71
|
-
key: "textWidth",
|
|
72
|
-
get: function get() {
|
|
73
|
-
return this.context.measureText(this.currentText).width;
|
|
74
|
-
}
|
|
75
|
-
}]);
|
|
76
|
-
return CanvasTextUtils;
|
|
77
|
-
}();
|
|
78
|
-
/**
|
|
79
|
-
* Utilities for truncating types at various positions, as well as
|
|
80
|
-
* determining whether truncation is possible or even necessary.
|
|
81
|
-
*/
|
|
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; } } /*
|
|
18
|
+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
|
19
|
+
* or more contributor license agreements. Licensed under the Elastic License
|
|
20
|
+
* 2.0 and the Server Side Public License, v 1; you may not use this file except
|
|
21
|
+
* in compliance with, at your election, the Elastic License 2.0 or the Server
|
|
22
|
+
* Side Public License, v 1.
|
|
23
|
+
*/
|
|
24
|
+
var CanvasTextUtils = /*#__PURE__*/(0, _createClass2.default)(function CanvasTextUtils(_) {
|
|
25
|
+
var _this = this;
|
|
26
|
+
(0, _classCallCheck2.default)(this, CanvasTextUtils);
|
|
27
|
+
(0, _defineProperty2.default)(this, "computeFontFromElement", function (_) {
|
|
28
|
+
return '';
|
|
29
|
+
});
|
|
30
|
+
(0, _defineProperty2.default)(this, "textWidth", 0);
|
|
31
|
+
(0, _defineProperty2.default)(this, "currentText", '');
|
|
32
|
+
(0, _defineProperty2.default)(this, "setTextToCheck", function (text) {
|
|
33
|
+
_this.currentText = text;
|
|
34
|
+
});
|
|
35
|
+
});
|
|
82
36
|
exports.CanvasTextUtils = CanvasTextUtils;
|
|
83
|
-
var TruncationUtils = /*#__PURE__*/function (
|
|
84
|
-
(0, _inherits2.default)(TruncationUtils,
|
|
37
|
+
var TruncationUtils = /*#__PURE__*/function (_TruncationUtils2) {
|
|
38
|
+
(0, _inherits2.default)(TruncationUtils, _TruncationUtils2);
|
|
85
39
|
var _super = _createSuper(TruncationUtils);
|
|
86
|
-
function TruncationUtils(
|
|
40
|
+
function TruncationUtils(props) {
|
|
87
41
|
var _this2;
|
|
88
|
-
var fullText = _ref2.fullText,
|
|
89
|
-
ellipsis = _ref2.ellipsis,
|
|
90
|
-
_availableWidth = _ref2.availableWidth,
|
|
91
|
-
rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
|
|
92
42
|
(0, _classCallCheck2.default)(this, TruncationUtils);
|
|
93
|
-
_this2 = _super.call(this,
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "
|
|
97
|
-
|
|
98
|
-
* Performance utilities
|
|
99
|
-
*/
|
|
100
|
-
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "debugPerformance", false);
|
|
101
|
-
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "debugCounter", 0);
|
|
102
|
-
/**
|
|
103
|
-
* Internal utils for calculating a ratio based on the passed available width
|
|
104
|
-
* vs the full text width.
|
|
105
|
-
* This ratio is used to get an initial _approximate_ text string that should
|
|
106
|
-
* be slightly over the available width, which we can then remove from
|
|
107
|
-
* character-by-character until the text just fits within the available width.
|
|
108
|
-
*/
|
|
109
|
-
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "widthRatio", 0);
|
|
110
|
-
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "setTextWidthRatio", function () {
|
|
111
|
-
var text = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this2.fullText;
|
|
112
|
-
var textToOffset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
|
|
113
|
-
// Account for reduced available width due to (e.g.) truncation offset
|
|
114
|
-
var availableWidth = _this2.availableWidth;
|
|
115
|
-
if (textToOffset) {
|
|
116
|
-
_this2.setTextToCheck(textToOffset);
|
|
117
|
-
availableWidth = availableWidth - _this2.textWidth;
|
|
118
|
-
}
|
|
119
|
-
_this2.setTextToCheck(text);
|
|
120
|
-
_this2.widthRatio = availableWidth / _this2.textWidth;
|
|
121
|
-
});
|
|
122
|
-
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "getTextFromRatio", function (text, type) {
|
|
123
|
-
var characterRatio = Math.ceil(text.length * _this2.widthRatio);
|
|
124
|
-
var index = type === 'start' ? text.length - characterRatio : characterRatio;
|
|
125
|
-
var _splitText$at = splitText(text).at(index),
|
|
126
|
-
_splitText$at2 = (0, _slicedToArray2.default)(_splitText$at, 2),
|
|
127
|
-
end = _splitText$at2[0],
|
|
128
|
-
start = _splitText$at2[1];
|
|
129
|
-
return type === 'start' ? start : end;
|
|
43
|
+
_this2 = _super.call(this, props);
|
|
44
|
+
// Jest perf optimization - since there's no meaningful truncation we can make
|
|
45
|
+
// without meaningful width calculations, just return the full untruncated text
|
|
46
|
+
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "truncateStart", function (_) {
|
|
47
|
+
return _this2.fullText;
|
|
130
48
|
});
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
*/
|
|
134
|
-
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "checkIfTruncationIsNeeded", function () {
|
|
135
|
-
_this2.setTextToCheck(_this2.fullText);
|
|
136
|
-
if (_this2.availableWidth >= _this2.textWidth) {
|
|
137
|
-
return false;
|
|
138
|
-
}
|
|
49
|
+
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "truncateEnd", function (_) {
|
|
50
|
+
return _this2.fullText;
|
|
139
51
|
});
|
|
140
|
-
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "
|
|
141
|
-
|
|
142
|
-
: _this2.ellipsis;
|
|
143
|
-
_this2.setTextToCheck(textToCheck);
|
|
144
|
-
if (_this2.textWidth >= _this2.availableWidth * 0.9) {
|
|
145
|
-
console.error('The truncation ellipsis is larger than the available width. No text can be rendered.');
|
|
146
|
-
return false;
|
|
147
|
-
}
|
|
148
|
-
});
|
|
149
|
-
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "checkTruncationOffsetWidth", function (text) {
|
|
150
|
-
_this2.setTextToCheck(text);
|
|
151
|
-
if (_this2.textWidth > _this2.availableWidth) {
|
|
152
|
-
console.error('The passed truncationOffset is too large for the available width. Truncating the offset instead.');
|
|
153
|
-
return false;
|
|
154
|
-
}
|
|
155
|
-
});
|
|
156
|
-
/**
|
|
157
|
-
* Truncation types logic. This is where the magic happens
|
|
158
|
-
*/
|
|
159
|
-
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "truncateStart", function (truncationOffset) {
|
|
160
|
-
var truncatedText = _this2.fullText;
|
|
161
|
-
var leadingText = '';
|
|
162
|
-
var combinedText = function combinedText() {
|
|
163
|
-
return leadingText + truncatedText;
|
|
164
|
-
};
|
|
165
|
-
if (truncationOffset) {
|
|
166
|
-
var _splitText$at3 = splitText(_this2.fullText).at(truncationOffset);
|
|
167
|
-
var _splitText$at4 = (0, _slicedToArray2.default)(_splitText$at3, 2);
|
|
168
|
-
leadingText = _splitText$at4[0];
|
|
169
|
-
truncatedText = _splitText$at4[1];
|
|
170
|
-
var widthCheck = leadingText + _this2.ellipsis;
|
|
171
|
-
if (_this2.checkTruncationOffsetWidth(widthCheck) === false) {
|
|
172
|
-
truncatedText = leadingText;
|
|
173
|
-
leadingText = '';
|
|
174
|
-
}
|
|
175
|
-
}
|
|
176
|
-
|
|
177
|
-
// Get text width ratio width accounting for any truncation offset text,
|
|
178
|
-
// and guesstimate an initial truncated string
|
|
179
|
-
_this2.setTextWidthRatio(truncatedText, leadingText);
|
|
180
|
-
truncatedText = _this2.getTextFromRatio(truncatedText, 'start');
|
|
181
|
-
leadingText += _this2.ellipsis;
|
|
182
|
-
_this2.setTextToCheck(combinedText());
|
|
183
|
-
while (_this2.textWidth > _this2.availableWidth) {
|
|
184
|
-
truncatedText = removeFirstCharacter(truncatedText);
|
|
185
|
-
_this2.setTextToCheck(combinedText());
|
|
186
|
-
}
|
|
187
|
-
return combinedText();
|
|
188
|
-
});
|
|
189
|
-
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "truncateEnd", function (truncationOffset) {
|
|
190
|
-
var truncatedText = _this2.fullText;
|
|
191
|
-
var trailingText = '';
|
|
192
|
-
var combinedText = function combinedText() {
|
|
193
|
-
return truncatedText + trailingText;
|
|
194
|
-
};
|
|
195
|
-
if (truncationOffset) {
|
|
196
|
-
var index = _this2.fullText.length - truncationOffset;
|
|
197
|
-
var _splitText$at5 = splitText(_this2.fullText).at(index);
|
|
198
|
-
var _splitText$at6 = (0, _slicedToArray2.default)(_splitText$at5, 2);
|
|
199
|
-
truncatedText = _splitText$at6[0];
|
|
200
|
-
trailingText = _splitText$at6[1];
|
|
201
|
-
var widthCheck = _this2.ellipsis + trailingText;
|
|
202
|
-
if (_this2.checkTruncationOffsetWidth(widthCheck) === false) {
|
|
203
|
-
truncatedText = trailingText;
|
|
204
|
-
trailingText = '';
|
|
205
|
-
}
|
|
206
|
-
}
|
|
207
|
-
|
|
208
|
-
// Get text width ratio width accounting for any truncation offset text,
|
|
209
|
-
// and guesstimate an initial truncated string
|
|
210
|
-
_this2.setTextWidthRatio(truncatedText, trailingText);
|
|
211
|
-
truncatedText = _this2.getTextFromRatio(truncatedText, 'end');
|
|
212
|
-
trailingText = _this2.ellipsis + trailingText;
|
|
213
|
-
_this2.setTextToCheck(combinedText());
|
|
214
|
-
while (_this2.textWidth > _this2.availableWidth) {
|
|
215
|
-
truncatedText = removeLastCharacter(truncatedText);
|
|
216
|
-
_this2.setTextToCheck(combinedText());
|
|
217
|
-
}
|
|
218
|
-
return combinedText();
|
|
219
|
-
});
|
|
220
|
-
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "truncateStartEndAtPosition", function (truncationPosition) {
|
|
221
|
-
// Split the text from the anchor position, using the width ratio
|
|
222
|
-
// to get the starting and ending indices from the position
|
|
223
|
-
_this2.setTextWidthRatio();
|
|
224
|
-
var characterRatio = Math.floor(_this2.fullText.length * _this2.widthRatio / 2);
|
|
225
|
-
var truncateStart = truncationPosition - characterRatio;
|
|
226
|
-
var truncateEnd = truncationPosition + characterRatio;
|
|
227
|
-
|
|
228
|
-
// If either of the approximate start/end truncation indices go beyond the
|
|
229
|
-
// bounds of the actual text, we can simply use end or start truncation instead
|
|
230
|
-
if (truncateStart < 0) {
|
|
231
|
-
return _this2.truncateEnd();
|
|
232
|
-
}
|
|
233
|
-
if (truncateEnd >= _this2.fullText.length) {
|
|
234
|
-
return _this2.truncateStart();
|
|
235
|
-
}
|
|
236
|
-
var truncatedText = _this2.fullText.substring(truncateStart, truncateEnd);
|
|
237
|
-
var combinedText = function combinedText() {
|
|
238
|
-
return _this2.ellipsis + truncatedText + _this2.ellipsis;
|
|
239
|
-
};
|
|
240
|
-
_this2.setTextToCheck(combinedText());
|
|
241
|
-
var alternating;
|
|
242
|
-
while (_this2.textWidth > _this2.availableWidth) {
|
|
243
|
-
truncatedText = alternating ? removeLastCharacter(truncatedText) : removeFirstCharacter(truncatedText);
|
|
244
|
-
alternating = !alternating;
|
|
245
|
-
_this2.setTextToCheck(combinedText());
|
|
246
|
-
}
|
|
247
|
-
return combinedText();
|
|
52
|
+
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "truncateStartEndAtPosition", function (_) {
|
|
53
|
+
return _this2.fullText;
|
|
248
54
|
});
|
|
249
55
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "truncateStartEndAtMiddle", function () {
|
|
250
|
-
|
|
251
|
-
return _this2.truncateStartEndAtPosition(middlePosition);
|
|
56
|
+
return _this2.fullText;
|
|
252
57
|
});
|
|
253
58
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "truncateMiddle", function () {
|
|
254
|
-
|
|
255
|
-
var _splitText$at7 = splitText(_this2.fullText).at(middlePosition),
|
|
256
|
-
_splitText$at8 = (0, _slicedToArray2.default)(_splitText$at7, 2),
|
|
257
|
-
firstHalf = _splitText$at8[0],
|
|
258
|
-
secondHalf = _splitText$at8[1];
|
|
259
|
-
_this2.setTextWidthRatio();
|
|
260
|
-
firstHalf = _this2.getTextFromRatio(firstHalf, 'end');
|
|
261
|
-
secondHalf = _this2.getTextFromRatio(secondHalf, 'start');
|
|
262
|
-
var combinedText = function combinedText() {
|
|
263
|
-
return firstHalf + _this2.ellipsis + secondHalf;
|
|
264
|
-
};
|
|
265
|
-
_this2.setTextToCheck(combinedText());
|
|
266
|
-
var alternating;
|
|
267
|
-
while (_this2.textWidth > _this2.availableWidth) {
|
|
268
|
-
alternating = !alternating;
|
|
269
|
-
if (alternating) {
|
|
270
|
-
firstHalf = removeLastCharacter(firstHalf);
|
|
271
|
-
} else {
|
|
272
|
-
secondHalf = removeFirstCharacter(secondHalf);
|
|
273
|
-
}
|
|
274
|
-
_this2.setTextToCheck(combinedText());
|
|
275
|
-
}
|
|
276
|
-
return combinedText();
|
|
59
|
+
return _this2.fullText;
|
|
277
60
|
});
|
|
278
|
-
_this2.fullText = fullText;
|
|
279
|
-
_this2.ellipsis = ellipsis;
|
|
280
|
-
_this2.availableWidth = _availableWidth;
|
|
281
61
|
return _this2;
|
|
282
62
|
}
|
|
283
|
-
(0, _createClass2.default)(TruncationUtils
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
if (this.debugPerformance) {
|
|
287
|
-
this.debugCounter++;
|
|
288
|
-
}
|
|
289
|
-
return (0, _get2.default)((0, _getPrototypeOf2.default)(TruncationUtils.prototype), "textWidth", this);
|
|
290
|
-
}
|
|
291
|
-
}]);
|
|
292
|
-
return TruncationUtils;
|
|
293
|
-
}(CanvasTextUtils);
|
|
294
|
-
/**
|
|
295
|
-
* DRY character/substring utils
|
|
296
|
-
*/
|
|
297
|
-
exports.TruncationUtils = TruncationUtils;
|
|
298
|
-
var removeLastCharacter = function removeLastCharacter(text) {
|
|
299
|
-
return text.substring(0, text.length - 1);
|
|
300
|
-
};
|
|
301
|
-
var removeFirstCharacter = function removeFirstCharacter(text) {
|
|
302
|
-
return text.substring(1);
|
|
303
|
-
};
|
|
304
|
-
var splitText = function splitText(text) {
|
|
305
|
-
return {
|
|
306
|
-
at: function at(index) {
|
|
307
|
-
return [text.substring(0, index), text.substring(index)];
|
|
308
|
-
}
|
|
309
|
-
};
|
|
310
|
-
};
|
|
63
|
+
return (0, _createClass2.default)(TruncationUtils);
|
|
64
|
+
}(_utils.TruncationUtils);
|
|
65
|
+
exports.TruncationUtils = TruncationUtils;
|