@elastic/eui 77.1.0 → 77.1.2
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/es/components/focus_trap/focus_trap.js +21 -5
- package/es/components/index.js +0 -1
- package/eui.d.ts +8 -119
- package/i18ntokens.json +0 -36
- package/lib/components/focus_trap/focus_trap.js +21 -5
- package/lib/components/index.js +0 -11
- package/optimize/es/components/focus_trap/focus_trap.js +15 -5
- package/optimize/es/components/index.js +0 -1
- package/optimize/lib/components/focus_trap/focus_trap.js +15 -5
- package/optimize/lib/components/index.js +0 -11
- package/package.json +2 -1
- package/test-env/components/index.js +0 -11
- package/es/components/inline_edit/index.js +0 -10
- package/es/components/inline_edit/inline_edit.styles.js +0 -15
- package/es/components/inline_edit/inline_edit_form.js +0 -190
- package/es/components/inline_edit/inline_edit_text.js +0 -97
- package/es/components/inline_edit/inline_edit_title.js +0 -105
- package/lib/components/inline_edit/index.js +0 -19
- package/lib/components/inline_edit/inline_edit.styles.js +0 -22
- package/lib/components/inline_edit/inline_edit_form.js +0 -193
- package/lib/components/inline_edit/inline_edit_text.js +0 -97
- package/lib/components/inline_edit/inline_edit_title.js +0 -106
- package/optimize/es/components/inline_edit/index.js +0 -10
- package/optimize/es/components/inline_edit/inline_edit.styles.js +0 -15
- package/optimize/es/components/inline_edit/inline_edit_form.js +0 -133
- package/optimize/es/components/inline_edit/inline_edit_text.js +0 -52
- package/optimize/es/components/inline_edit/inline_edit_title.js +0 -56
- package/optimize/lib/components/inline_edit/index.js +0 -19
- package/optimize/lib/components/inline_edit/inline_edit.styles.js +0 -22
- package/optimize/lib/components/inline_edit/inline_edit_form.js +0 -144
- package/optimize/lib/components/inline_edit/inline_edit_text.js +0 -52
- package/optimize/lib/components/inline_edit/inline_edit_title.js +0 -57
- package/test-env/components/inline_edit/index.js +0 -19
- package/test-env/components/inline_edit/inline_edit.styles.js +0 -22
- package/test-env/components/inline_edit/inline_edit_form.js +0 -196
- package/test-env/components/inline_edit/inline_edit_text.js +0 -96
- package/test-env/components/inline_edit/inline_edit_title.js +0 -105
|
@@ -1,190 +0,0 @@
|
|
|
1
|
-
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
-
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
3
|
-
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
4
|
-
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
5
|
-
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
6
|
-
function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
|
|
7
|
-
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
8
|
-
/*
|
|
9
|
-
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
|
10
|
-
* or more contributor license agreements. Licensed under the Elastic License
|
|
11
|
-
* 2.0 and the Server Side Public License, v 1; you may not use this file except
|
|
12
|
-
* in compliance with, at your election, the Elastic License 2.0 or the Server
|
|
13
|
-
* Side Public License, v 1.
|
|
14
|
-
*/
|
|
15
|
-
|
|
16
|
-
import React, { useState } from 'react';
|
|
17
|
-
import PropTypes from "prop-types";
|
|
18
|
-
import classNames from 'classnames';
|
|
19
|
-
import { EuiFormRow, EuiFieldText, EuiForm } from '../form';
|
|
20
|
-
import { EuiButtonIcon, EuiButtonEmpty } from '../button';
|
|
21
|
-
import { EuiFlexGroup, EuiFlexItem } from '../flex';
|
|
22
|
-
import { useEuiI18n } from '../i18n';
|
|
23
|
-
import { useGeneratedHtmlId } from '../../services/accessibility';
|
|
24
|
-
|
|
25
|
-
// Props shared between the internal form component as well as consumer-facing components
|
|
26
|
-
import { jsx as ___EmotionJSX } from "@emotion/react";
|
|
27
|
-
export var SMALL_SIZE_FORM = {
|
|
28
|
-
iconSize: 's',
|
|
29
|
-
compressed: true,
|
|
30
|
-
buttonSize: 's'
|
|
31
|
-
};
|
|
32
|
-
export var MEDIUM_SIZE_FORM = {
|
|
33
|
-
iconSize: 'm',
|
|
34
|
-
compressed: false,
|
|
35
|
-
buttonSize: 'm'
|
|
36
|
-
};
|
|
37
|
-
export var EuiInlineEditForm = function EuiInlineEditForm(_ref) {
|
|
38
|
-
var className = _ref.className,
|
|
39
|
-
children = _ref.children,
|
|
40
|
-
sizes = _ref.sizes,
|
|
41
|
-
defaultValue = _ref.defaultValue,
|
|
42
|
-
onConfirm = _ref.onConfirm,
|
|
43
|
-
inputAriaLabel = _ref.inputAriaLabel,
|
|
44
|
-
saveButtonAriaLabel = _ref.saveButtonAriaLabel,
|
|
45
|
-
cancelButtonAriaLabel = _ref.cancelButtonAriaLabel,
|
|
46
|
-
startWithEditOpen = _ref.startWithEditOpen,
|
|
47
|
-
readModeProps = _ref.readModeProps,
|
|
48
|
-
editModeProps = _ref.editModeProps;
|
|
49
|
-
var classes = classNames('euiInlineEdit', className);
|
|
50
|
-
|
|
51
|
-
// Styles to come later! (Styling editMode text to match the size of its readMode counterpart)
|
|
52
|
-
/*const theme = useEuiTheme();
|
|
53
|
-
const styles = euiInlineEditStyles(theme);
|
|
54
|
-
const cssStyles = [styles.euiInlineEdit];*/
|
|
55
|
-
|
|
56
|
-
var defaultSaveButtonAriaLabel = useEuiI18n('euiInlineEditForm.saveButtonAriaLabel', 'Save edit');
|
|
57
|
-
var defaultCancelButtonAriaLabel = useEuiI18n('euiInlineEditForm.cancelButtonAriaLabel', 'Cancel edit');
|
|
58
|
-
var _useState = useState(false || startWithEditOpen),
|
|
59
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
60
|
-
isEditing = _useState2[0],
|
|
61
|
-
setIsEditing = _useState2[1];
|
|
62
|
-
var inlineEditInputId = useGeneratedHtmlId({
|
|
63
|
-
prefix: '__inlineEditInput'
|
|
64
|
-
});
|
|
65
|
-
var _useState3 = useState(defaultValue),
|
|
66
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
|
67
|
-
editModeValue = _useState4[0],
|
|
68
|
-
setEditModeValue = _useState4[1];
|
|
69
|
-
var _useState5 = useState(defaultValue),
|
|
70
|
-
_useState6 = _slicedToArray(_useState5, 2),
|
|
71
|
-
readModeValue = _useState6[0],
|
|
72
|
-
setReadModeValue = _useState6[1];
|
|
73
|
-
var cancelInlineEdit = function cancelInlineEdit() {
|
|
74
|
-
setEditModeValue(readModeValue);
|
|
75
|
-
setIsEditing(!isEditing);
|
|
76
|
-
};
|
|
77
|
-
var saveInlineEditValue = function saveInlineEditValue() {
|
|
78
|
-
if (editModeValue && onConfirm && !onConfirm()) {
|
|
79
|
-
// If there is text, an onConfirm method is present, and it has returned false, cancel the action
|
|
80
|
-
return;
|
|
81
|
-
} else if (editModeValue) {
|
|
82
|
-
setReadModeValue(editModeValue);
|
|
83
|
-
setIsEditing(!isEditing);
|
|
84
|
-
} else {
|
|
85
|
-
// If there's no text, cancel the action, reset the input text, and return to readMode
|
|
86
|
-
cancelInlineEdit();
|
|
87
|
-
}
|
|
88
|
-
};
|
|
89
|
-
var editModeForm = ___EmotionJSX(EuiForm, {
|
|
90
|
-
fullWidth: true
|
|
91
|
-
}, ___EmotionJSX(EuiFlexGroup, {
|
|
92
|
-
gutterSize: "s"
|
|
93
|
-
}, ___EmotionJSX(EuiFlexItem, null, ___EmotionJSX(EuiFieldText, _extends({
|
|
94
|
-
id: inlineEditInputId,
|
|
95
|
-
value: editModeValue,
|
|
96
|
-
onChange: function onChange(e) {
|
|
97
|
-
setEditModeValue(e.target.value);
|
|
98
|
-
},
|
|
99
|
-
"aria-label": inputAriaLabel,
|
|
100
|
-
autoFocus: true,
|
|
101
|
-
compressed: sizes.compressed
|
|
102
|
-
}, editModeProps))), ___EmotionJSX(EuiFlexItem, {
|
|
103
|
-
grow: false,
|
|
104
|
-
className: classes
|
|
105
|
-
}, ___EmotionJSX(EuiFormRow, null, ___EmotionJSX(EuiButtonIcon, {
|
|
106
|
-
iconType: "check",
|
|
107
|
-
"aria-label": saveButtonAriaLabel || defaultSaveButtonAriaLabel,
|
|
108
|
-
onClick: saveInlineEditValue,
|
|
109
|
-
color: "success",
|
|
110
|
-
display: "base",
|
|
111
|
-
size: sizes.buttonSize,
|
|
112
|
-
iconSize: sizes.iconSize
|
|
113
|
-
}))), ___EmotionJSX(EuiFlexItem, {
|
|
114
|
-
grow: false
|
|
115
|
-
}, ___EmotionJSX(EuiFormRow, null, ___EmotionJSX(EuiButtonIcon, {
|
|
116
|
-
iconType: "cross",
|
|
117
|
-
"aria-label": cancelButtonAriaLabel || defaultCancelButtonAriaLabel,
|
|
118
|
-
onClick: cancelInlineEdit,
|
|
119
|
-
color: "danger",
|
|
120
|
-
display: "base",
|
|
121
|
-
size: sizes.buttonSize,
|
|
122
|
-
iconSize: sizes.iconSize
|
|
123
|
-
})))));
|
|
124
|
-
var readModeElement = ___EmotionJSX(EuiButtonEmpty, _extends({
|
|
125
|
-
color: "text",
|
|
126
|
-
iconType: "pencil",
|
|
127
|
-
iconSide: "right",
|
|
128
|
-
autoFocus: true,
|
|
129
|
-
flush: "both",
|
|
130
|
-
iconSize: sizes.iconSize,
|
|
131
|
-
size: sizes.buttonSize,
|
|
132
|
-
onClick: function onClick() {
|
|
133
|
-
setIsEditing(!isEditing);
|
|
134
|
-
}
|
|
135
|
-
}, readModeProps), children(readModeValue));
|
|
136
|
-
return ___EmotionJSX("div", {
|
|
137
|
-
className: classes
|
|
138
|
-
}, isEditing ? editModeForm : readModeElement);
|
|
139
|
-
};
|
|
140
|
-
EuiInlineEditForm.propTypes = {
|
|
141
|
-
className: PropTypes.string,
|
|
142
|
-
"aria-label": PropTypes.string,
|
|
143
|
-
"data-test-subj": PropTypes.string,
|
|
144
|
-
css: PropTypes.any,
|
|
145
|
-
defaultValue: PropTypes.string.isRequired,
|
|
146
|
-
/**
|
|
147
|
-
* Allow users to pass in a function that is called when the confirm button is clicked
|
|
148
|
-
* The function should return a boolean flag that will determine if the value will be saved.
|
|
149
|
-
* When the flag is true, the value will be saved. When the flag is false, the user will be
|
|
150
|
-
* returned to editMode.
|
|
151
|
-
*/
|
|
152
|
-
onConfirm: PropTypes.func,
|
|
153
|
-
/**
|
|
154
|
-
* Form label that appears above the form control
|
|
155
|
-
* This is required for accessibility because there is no visual label on the input
|
|
156
|
-
*/
|
|
157
|
-
inputAriaLabel: PropTypes.string.isRequired,
|
|
158
|
-
/**
|
|
159
|
-
* Aria-label for save button in editMode
|
|
160
|
-
*/
|
|
161
|
-
saveButtonAriaLabel: PropTypes.string,
|
|
162
|
-
/**
|
|
163
|
-
* Aria-label for cancel button in editMode
|
|
164
|
-
*/
|
|
165
|
-
cancelButtonAriaLabel: PropTypes.string,
|
|
166
|
-
/**
|
|
167
|
-
* Start in editMode
|
|
168
|
-
*/
|
|
169
|
-
startWithEditOpen: PropTypes.bool,
|
|
170
|
-
/**
|
|
171
|
-
* Props that will be applied directly to the EuiEmptyButton displayed in readMode
|
|
172
|
-
*/
|
|
173
|
-
readModeProps: PropTypes.any,
|
|
174
|
-
/**
|
|
175
|
-
* Props that will be applied directly to the EuiFieldText displayed in editMode
|
|
176
|
-
*/
|
|
177
|
-
editModeProps: PropTypes.any,
|
|
178
|
-
/**
|
|
179
|
-
* Form sizes
|
|
180
|
-
*/
|
|
181
|
-
sizes: PropTypes.shape({
|
|
182
|
-
compressed: PropTypes.bool.isRequired,
|
|
183
|
-
buttonSize: PropTypes.oneOf(["xs", "s", "m"]).isRequired,
|
|
184
|
-
iconSize: PropTypes.oneOf(["s", "m"]).isRequired
|
|
185
|
-
}).isRequired,
|
|
186
|
-
/**
|
|
187
|
-
* Render prop that returns the read mode value as an arg
|
|
188
|
-
*/
|
|
189
|
-
children: PropTypes.func.isRequired
|
|
190
|
-
};
|
|
@@ -1,97 +0,0 @@
|
|
|
1
|
-
var _excluded = ["children", "className", "size", "defaultValue", "onConfirm", "inputAriaLabel", "saveButtonAriaLabel", "cancelButtonAriaLabel", "startWithEditOpen", "readModeProps", "editModeProps"];
|
|
2
|
-
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
3
|
-
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
4
|
-
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
5
|
-
/*
|
|
6
|
-
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
|
7
|
-
* or more contributor license agreements. Licensed under the Elastic License
|
|
8
|
-
* 2.0 and the Server Side Public License, v 1; you may not use this file except
|
|
9
|
-
* in compliance with, at your election, the Elastic License 2.0 or the Server
|
|
10
|
-
* Side Public License, v 1.
|
|
11
|
-
*/
|
|
12
|
-
|
|
13
|
-
import React from 'react';
|
|
14
|
-
import PropTypes from "prop-types";
|
|
15
|
-
import classNames from 'classnames';
|
|
16
|
-
import { EuiText } from '../text';
|
|
17
|
-
import { EuiInlineEditForm, SMALL_SIZE_FORM, MEDIUM_SIZE_FORM } from './inline_edit_form';
|
|
18
|
-
import { jsx as ___EmotionJSX } from "@emotion/react";
|
|
19
|
-
export var EuiInlineEditText = function EuiInlineEditText(_ref) {
|
|
20
|
-
var children = _ref.children,
|
|
21
|
-
className = _ref.className,
|
|
22
|
-
_ref$size = _ref.size,
|
|
23
|
-
size = _ref$size === void 0 ? 'm' : _ref$size,
|
|
24
|
-
defaultValue = _ref.defaultValue,
|
|
25
|
-
onConfirm = _ref.onConfirm,
|
|
26
|
-
inputAriaLabel = _ref.inputAriaLabel,
|
|
27
|
-
saveButtonAriaLabel = _ref.saveButtonAriaLabel,
|
|
28
|
-
cancelButtonAriaLabel = _ref.cancelButtonAriaLabel,
|
|
29
|
-
startWithEditOpen = _ref.startWithEditOpen,
|
|
30
|
-
readModeProps = _ref.readModeProps,
|
|
31
|
-
editModeProps = _ref.editModeProps,
|
|
32
|
-
rest = _objectWithoutProperties(_ref, _excluded);
|
|
33
|
-
var classes = classNames('euiInlineEditText', className);
|
|
34
|
-
var isSmallSize = ['xs', 's'].includes(size);
|
|
35
|
-
var sizes = isSmallSize ? SMALL_SIZE_FORM : MEDIUM_SIZE_FORM;
|
|
36
|
-
var formProps = {
|
|
37
|
-
sizes: sizes,
|
|
38
|
-
defaultValue: defaultValue,
|
|
39
|
-
onConfirm: onConfirm,
|
|
40
|
-
inputAriaLabel: inputAriaLabel,
|
|
41
|
-
saveButtonAriaLabel: saveButtonAriaLabel,
|
|
42
|
-
cancelButtonAriaLabel: cancelButtonAriaLabel,
|
|
43
|
-
startWithEditOpen: startWithEditOpen,
|
|
44
|
-
readModeProps: readModeProps,
|
|
45
|
-
editModeProps: editModeProps
|
|
46
|
-
};
|
|
47
|
-
return ___EmotionJSX(EuiInlineEditForm, _extends({
|
|
48
|
-
className: classes
|
|
49
|
-
}, rest, formProps), function (textReadModeValue) {
|
|
50
|
-
return ___EmotionJSX(EuiText, {
|
|
51
|
-
size: size
|
|
52
|
-
}, textReadModeValue);
|
|
53
|
-
});
|
|
54
|
-
};
|
|
55
|
-
EuiInlineEditText.propTypes = {
|
|
56
|
-
className: PropTypes.string,
|
|
57
|
-
"aria-label": PropTypes.string,
|
|
58
|
-
"data-test-subj": PropTypes.string,
|
|
59
|
-
css: PropTypes.any,
|
|
60
|
-
defaultValue: PropTypes.string.isRequired,
|
|
61
|
-
/**
|
|
62
|
-
* Allow users to pass in a function that is called when the confirm button is clicked
|
|
63
|
-
* The function should return a boolean flag that will determine if the value will be saved.
|
|
64
|
-
* When the flag is true, the value will be saved. When the flag is false, the user will be
|
|
65
|
-
* returned to editMode.
|
|
66
|
-
*/
|
|
67
|
-
onConfirm: PropTypes.func,
|
|
68
|
-
/**
|
|
69
|
-
* Form label that appears above the form control
|
|
70
|
-
* This is required for accessibility because there is no visual label on the input
|
|
71
|
-
*/
|
|
72
|
-
inputAriaLabel: PropTypes.string.isRequired,
|
|
73
|
-
/**
|
|
74
|
-
* Aria-label for save button in editMode
|
|
75
|
-
*/
|
|
76
|
-
saveButtonAriaLabel: PropTypes.string,
|
|
77
|
-
/**
|
|
78
|
-
* Aria-label for cancel button in editMode
|
|
79
|
-
*/
|
|
80
|
-
cancelButtonAriaLabel: PropTypes.string,
|
|
81
|
-
/**
|
|
82
|
-
* Start in editMode
|
|
83
|
-
*/
|
|
84
|
-
startWithEditOpen: PropTypes.bool,
|
|
85
|
-
/**
|
|
86
|
-
* Props that will be applied directly to the EuiEmptyButton displayed in readMode
|
|
87
|
-
*/
|
|
88
|
-
readModeProps: PropTypes.any,
|
|
89
|
-
/**
|
|
90
|
-
* Props that will be applied directly to the EuiFieldText displayed in editMode
|
|
91
|
-
*/
|
|
92
|
-
editModeProps: PropTypes.any,
|
|
93
|
-
/**
|
|
94
|
-
* Text size level
|
|
95
|
-
*/
|
|
96
|
-
size: PropTypes.any
|
|
97
|
-
};
|
|
@@ -1,105 +0,0 @@
|
|
|
1
|
-
var _excluded = ["children", "className", "size", "heading", "defaultValue", "onConfirm", "inputAriaLabel", "saveButtonAriaLabel", "cancelButtonAriaLabel", "startWithEditOpen", "readModeProps", "editModeProps"];
|
|
2
|
-
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
3
|
-
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
4
|
-
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
5
|
-
/*
|
|
6
|
-
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
|
7
|
-
* or more contributor license agreements. Licensed under the Elastic License
|
|
8
|
-
* 2.0 and the Server Side Public License, v 1; you may not use this file except
|
|
9
|
-
* in compliance with, at your election, the Elastic License 2.0 or the Server
|
|
10
|
-
* Side Public License, v 1.
|
|
11
|
-
*/
|
|
12
|
-
|
|
13
|
-
import React from 'react';
|
|
14
|
-
import PropTypes from "prop-types";
|
|
15
|
-
import classNames from 'classnames';
|
|
16
|
-
import { EuiTitle } from '../title';
|
|
17
|
-
import { EuiInlineEditForm, SMALL_SIZE_FORM, MEDIUM_SIZE_FORM } from './inline_edit_form';
|
|
18
|
-
import { jsx as ___EmotionJSX } from "@emotion/react";
|
|
19
|
-
export var HEADINGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
|
|
20
|
-
export var EuiInlineEditTitle = function EuiInlineEditTitle(_ref) {
|
|
21
|
-
var children = _ref.children,
|
|
22
|
-
className = _ref.className,
|
|
23
|
-
_ref$size = _ref.size,
|
|
24
|
-
size = _ref$size === void 0 ? 'm' : _ref$size,
|
|
25
|
-
heading = _ref.heading,
|
|
26
|
-
defaultValue = _ref.defaultValue,
|
|
27
|
-
onConfirm = _ref.onConfirm,
|
|
28
|
-
inputAriaLabel = _ref.inputAriaLabel,
|
|
29
|
-
saveButtonAriaLabel = _ref.saveButtonAriaLabel,
|
|
30
|
-
cancelButtonAriaLabel = _ref.cancelButtonAriaLabel,
|
|
31
|
-
_ref$startWithEditOpe = _ref.startWithEditOpen,
|
|
32
|
-
startWithEditOpen = _ref$startWithEditOpe === void 0 ? false : _ref$startWithEditOpe,
|
|
33
|
-
readModeProps = _ref.readModeProps,
|
|
34
|
-
editModeProps = _ref.editModeProps,
|
|
35
|
-
rest = _objectWithoutProperties(_ref, _excluded);
|
|
36
|
-
var classes = classNames('euiInlineEditTitle', className);
|
|
37
|
-
var H = heading;
|
|
38
|
-
var isSmallSize = ['xxxs', 'xxs', 'xs', 's'].includes(size);
|
|
39
|
-
var sizes = isSmallSize ? SMALL_SIZE_FORM : MEDIUM_SIZE_FORM;
|
|
40
|
-
var formProps = {
|
|
41
|
-
sizes: sizes,
|
|
42
|
-
defaultValue: defaultValue,
|
|
43
|
-
onConfirm: onConfirm,
|
|
44
|
-
inputAriaLabel: inputAriaLabel,
|
|
45
|
-
saveButtonAriaLabel: saveButtonAriaLabel,
|
|
46
|
-
cancelButtonAriaLabel: cancelButtonAriaLabel,
|
|
47
|
-
startWithEditOpen: startWithEditOpen,
|
|
48
|
-
readModeProps: readModeProps,
|
|
49
|
-
editModeProps: editModeProps
|
|
50
|
-
};
|
|
51
|
-
return ___EmotionJSX(EuiInlineEditForm, _extends({
|
|
52
|
-
className: classes
|
|
53
|
-
}, rest, formProps), function (titleReadModeValue) {
|
|
54
|
-
return ___EmotionJSX(EuiTitle, {
|
|
55
|
-
size: size
|
|
56
|
-
}, ___EmotionJSX(H, null, titleReadModeValue));
|
|
57
|
-
});
|
|
58
|
-
};
|
|
59
|
-
EuiInlineEditTitle.propTypes = {
|
|
60
|
-
className: PropTypes.string,
|
|
61
|
-
"aria-label": PropTypes.string,
|
|
62
|
-
"data-test-subj": PropTypes.string,
|
|
63
|
-
css: PropTypes.any,
|
|
64
|
-
defaultValue: PropTypes.string.isRequired,
|
|
65
|
-
/**
|
|
66
|
-
* Allow users to pass in a function that is called when the confirm button is clicked
|
|
67
|
-
* The function should return a boolean flag that will determine if the value will be saved.
|
|
68
|
-
* When the flag is true, the value will be saved. When the flag is false, the user will be
|
|
69
|
-
* returned to editMode.
|
|
70
|
-
*/
|
|
71
|
-
onConfirm: PropTypes.func,
|
|
72
|
-
/**
|
|
73
|
-
* Form label that appears above the form control
|
|
74
|
-
* This is required for accessibility because there is no visual label on the input
|
|
75
|
-
*/
|
|
76
|
-
inputAriaLabel: PropTypes.string.isRequired,
|
|
77
|
-
/**
|
|
78
|
-
* Aria-label for save button in editMode
|
|
79
|
-
*/
|
|
80
|
-
saveButtonAriaLabel: PropTypes.string,
|
|
81
|
-
/**
|
|
82
|
-
* Aria-label for cancel button in editMode
|
|
83
|
-
*/
|
|
84
|
-
cancelButtonAriaLabel: PropTypes.string,
|
|
85
|
-
/**
|
|
86
|
-
* Start in editMode
|
|
87
|
-
*/
|
|
88
|
-
startWithEditOpen: PropTypes.bool,
|
|
89
|
-
/**
|
|
90
|
-
* Props that will be applied directly to the EuiEmptyButton displayed in readMode
|
|
91
|
-
*/
|
|
92
|
-
readModeProps: PropTypes.any,
|
|
93
|
-
/**
|
|
94
|
-
* Props that will be applied directly to the EuiFieldText displayed in editMode
|
|
95
|
-
*/
|
|
96
|
-
editModeProps: PropTypes.any,
|
|
97
|
-
/**
|
|
98
|
-
* Title size level
|
|
99
|
-
*/
|
|
100
|
-
size: PropTypes.any,
|
|
101
|
-
/**
|
|
102
|
-
* Level of heading to be used for the title
|
|
103
|
-
*/
|
|
104
|
-
heading: PropTypes.any.isRequired
|
|
105
|
-
};
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
Object.defineProperty(exports, "EuiInlineEditText", {
|
|
7
|
-
enumerable: true,
|
|
8
|
-
get: function get() {
|
|
9
|
-
return _inline_edit_text.EuiInlineEditText;
|
|
10
|
-
}
|
|
11
|
-
});
|
|
12
|
-
Object.defineProperty(exports, "EuiInlineEditTitle", {
|
|
13
|
-
enumerable: true,
|
|
14
|
-
get: function get() {
|
|
15
|
-
return _inline_edit_title.EuiInlineEditTitle;
|
|
16
|
-
}
|
|
17
|
-
});
|
|
18
|
-
var _inline_edit_text = require("./inline_edit_text");
|
|
19
|
-
var _inline_edit_title = require("./inline_edit_title");
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.euiInlineEditStyles = void 0;
|
|
7
|
-
var _react = require("@emotion/react");
|
|
8
|
-
/*
|
|
9
|
-
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
|
10
|
-
* or more contributor license agreements. Licensed under the Elastic License
|
|
11
|
-
* 2.0 and the Server Side Public License, v 1; you may not use this file except
|
|
12
|
-
* in compliance with, at your election, the Elastic License 2.0 or the Server
|
|
13
|
-
* Side Public License, v 1.
|
|
14
|
-
*/
|
|
15
|
-
|
|
16
|
-
var euiInlineEditStyles = function euiInlineEditStyles(_ref) {
|
|
17
|
-
var euiTheme = _ref.euiTheme;
|
|
18
|
-
return {
|
|
19
|
-
euiInlineEdit: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.primaryText, ";;label:euiInlineEdit;")
|
|
20
|
-
};
|
|
21
|
-
};
|
|
22
|
-
exports.euiInlineEditStyles = euiInlineEditStyles;
|
|
@@ -1,193 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports.SMALL_SIZE_FORM = exports.MEDIUM_SIZE_FORM = exports.EuiInlineEditForm = void 0;
|
|
8
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
10
|
-
var _classnames = _interopRequireDefault(require("classnames"));
|
|
11
|
-
var _form = require("../form");
|
|
12
|
-
var _button = require("../button");
|
|
13
|
-
var _flex = require("../flex");
|
|
14
|
-
var _i18n = require("../i18n");
|
|
15
|
-
var _accessibility = require("../../services/accessibility");
|
|
16
|
-
var _react2 = require("@emotion/react");
|
|
17
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
18
|
-
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); }
|
|
19
|
-
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; }
|
|
20
|
-
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
21
|
-
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
22
|
-
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
23
|
-
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
24
|
-
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
25
|
-
function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
|
|
26
|
-
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
27
|
-
var SMALL_SIZE_FORM = {
|
|
28
|
-
iconSize: 's',
|
|
29
|
-
compressed: true,
|
|
30
|
-
buttonSize: 's'
|
|
31
|
-
};
|
|
32
|
-
exports.SMALL_SIZE_FORM = SMALL_SIZE_FORM;
|
|
33
|
-
var MEDIUM_SIZE_FORM = {
|
|
34
|
-
iconSize: 'm',
|
|
35
|
-
compressed: false,
|
|
36
|
-
buttonSize: 'm'
|
|
37
|
-
};
|
|
38
|
-
exports.MEDIUM_SIZE_FORM = MEDIUM_SIZE_FORM;
|
|
39
|
-
var EuiInlineEditForm = function EuiInlineEditForm(_ref) {
|
|
40
|
-
var className = _ref.className,
|
|
41
|
-
children = _ref.children,
|
|
42
|
-
sizes = _ref.sizes,
|
|
43
|
-
defaultValue = _ref.defaultValue,
|
|
44
|
-
onConfirm = _ref.onConfirm,
|
|
45
|
-
inputAriaLabel = _ref.inputAriaLabel,
|
|
46
|
-
saveButtonAriaLabel = _ref.saveButtonAriaLabel,
|
|
47
|
-
cancelButtonAriaLabel = _ref.cancelButtonAriaLabel,
|
|
48
|
-
startWithEditOpen = _ref.startWithEditOpen,
|
|
49
|
-
readModeProps = _ref.readModeProps,
|
|
50
|
-
editModeProps = _ref.editModeProps;
|
|
51
|
-
var classes = (0, _classnames.default)('euiInlineEdit', className);
|
|
52
|
-
|
|
53
|
-
// Styles to come later! (Styling editMode text to match the size of its readMode counterpart)
|
|
54
|
-
/*const theme = useEuiTheme();
|
|
55
|
-
const styles = euiInlineEditStyles(theme);
|
|
56
|
-
const cssStyles = [styles.euiInlineEdit];*/
|
|
57
|
-
|
|
58
|
-
var defaultSaveButtonAriaLabel = (0, _i18n.useEuiI18n)('euiInlineEditForm.saveButtonAriaLabel', 'Save edit');
|
|
59
|
-
var defaultCancelButtonAriaLabel = (0, _i18n.useEuiI18n)('euiInlineEditForm.cancelButtonAriaLabel', 'Cancel edit');
|
|
60
|
-
var _useState = (0, _react.useState)(false || startWithEditOpen),
|
|
61
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
62
|
-
isEditing = _useState2[0],
|
|
63
|
-
setIsEditing = _useState2[1];
|
|
64
|
-
var inlineEditInputId = (0, _accessibility.useGeneratedHtmlId)({
|
|
65
|
-
prefix: '__inlineEditInput'
|
|
66
|
-
});
|
|
67
|
-
var _useState3 = (0, _react.useState)(defaultValue),
|
|
68
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
|
69
|
-
editModeValue = _useState4[0],
|
|
70
|
-
setEditModeValue = _useState4[1];
|
|
71
|
-
var _useState5 = (0, _react.useState)(defaultValue),
|
|
72
|
-
_useState6 = _slicedToArray(_useState5, 2),
|
|
73
|
-
readModeValue = _useState6[0],
|
|
74
|
-
setReadModeValue = _useState6[1];
|
|
75
|
-
var cancelInlineEdit = function cancelInlineEdit() {
|
|
76
|
-
setEditModeValue(readModeValue);
|
|
77
|
-
setIsEditing(!isEditing);
|
|
78
|
-
};
|
|
79
|
-
var saveInlineEditValue = function saveInlineEditValue() {
|
|
80
|
-
if (editModeValue && onConfirm && !onConfirm()) {
|
|
81
|
-
// If there is text, an onConfirm method is present, and it has returned false, cancel the action
|
|
82
|
-
return;
|
|
83
|
-
} else if (editModeValue) {
|
|
84
|
-
setReadModeValue(editModeValue);
|
|
85
|
-
setIsEditing(!isEditing);
|
|
86
|
-
} else {
|
|
87
|
-
// If there's no text, cancel the action, reset the input text, and return to readMode
|
|
88
|
-
cancelInlineEdit();
|
|
89
|
-
}
|
|
90
|
-
};
|
|
91
|
-
var editModeForm = (0, _react2.jsx)(_form.EuiForm, {
|
|
92
|
-
fullWidth: true
|
|
93
|
-
}, (0, _react2.jsx)(_flex.EuiFlexGroup, {
|
|
94
|
-
gutterSize: "s"
|
|
95
|
-
}, (0, _react2.jsx)(_flex.EuiFlexItem, null, (0, _react2.jsx)(_form.EuiFieldText, _extends({
|
|
96
|
-
id: inlineEditInputId,
|
|
97
|
-
value: editModeValue,
|
|
98
|
-
onChange: function onChange(e) {
|
|
99
|
-
setEditModeValue(e.target.value);
|
|
100
|
-
},
|
|
101
|
-
"aria-label": inputAriaLabel,
|
|
102
|
-
autoFocus: true,
|
|
103
|
-
compressed: sizes.compressed
|
|
104
|
-
}, editModeProps))), (0, _react2.jsx)(_flex.EuiFlexItem, {
|
|
105
|
-
grow: false,
|
|
106
|
-
className: classes
|
|
107
|
-
}, (0, _react2.jsx)(_form.EuiFormRow, null, (0, _react2.jsx)(_button.EuiButtonIcon, {
|
|
108
|
-
iconType: "check",
|
|
109
|
-
"aria-label": saveButtonAriaLabel || defaultSaveButtonAriaLabel,
|
|
110
|
-
onClick: saveInlineEditValue,
|
|
111
|
-
color: "success",
|
|
112
|
-
display: "base",
|
|
113
|
-
size: sizes.buttonSize,
|
|
114
|
-
iconSize: sizes.iconSize
|
|
115
|
-
}))), (0, _react2.jsx)(_flex.EuiFlexItem, {
|
|
116
|
-
grow: false
|
|
117
|
-
}, (0, _react2.jsx)(_form.EuiFormRow, null, (0, _react2.jsx)(_button.EuiButtonIcon, {
|
|
118
|
-
iconType: "cross",
|
|
119
|
-
"aria-label": cancelButtonAriaLabel || defaultCancelButtonAriaLabel,
|
|
120
|
-
onClick: cancelInlineEdit,
|
|
121
|
-
color: "danger",
|
|
122
|
-
display: "base",
|
|
123
|
-
size: sizes.buttonSize,
|
|
124
|
-
iconSize: sizes.iconSize
|
|
125
|
-
})))));
|
|
126
|
-
var readModeElement = (0, _react2.jsx)(_button.EuiButtonEmpty, _extends({
|
|
127
|
-
color: "text",
|
|
128
|
-
iconType: "pencil",
|
|
129
|
-
iconSide: "right",
|
|
130
|
-
autoFocus: true,
|
|
131
|
-
flush: "both",
|
|
132
|
-
iconSize: sizes.iconSize,
|
|
133
|
-
size: sizes.buttonSize,
|
|
134
|
-
onClick: function onClick() {
|
|
135
|
-
setIsEditing(!isEditing);
|
|
136
|
-
}
|
|
137
|
-
}, readModeProps), children(readModeValue));
|
|
138
|
-
return (0, _react2.jsx)("div", {
|
|
139
|
-
className: classes
|
|
140
|
-
}, isEditing ? editModeForm : readModeElement);
|
|
141
|
-
};
|
|
142
|
-
exports.EuiInlineEditForm = EuiInlineEditForm;
|
|
143
|
-
EuiInlineEditForm.propTypes = {
|
|
144
|
-
className: _propTypes.default.string,
|
|
145
|
-
"aria-label": _propTypes.default.string,
|
|
146
|
-
"data-test-subj": _propTypes.default.string,
|
|
147
|
-
css: _propTypes.default.any,
|
|
148
|
-
defaultValue: _propTypes.default.string.isRequired,
|
|
149
|
-
/**
|
|
150
|
-
* Allow users to pass in a function that is called when the confirm button is clicked
|
|
151
|
-
* The function should return a boolean flag that will determine if the value will be saved.
|
|
152
|
-
* When the flag is true, the value will be saved. When the flag is false, the user will be
|
|
153
|
-
* returned to editMode.
|
|
154
|
-
*/
|
|
155
|
-
onConfirm: _propTypes.default.func,
|
|
156
|
-
/**
|
|
157
|
-
* Form label that appears above the form control
|
|
158
|
-
* This is required for accessibility because there is no visual label on the input
|
|
159
|
-
*/
|
|
160
|
-
inputAriaLabel: _propTypes.default.string.isRequired,
|
|
161
|
-
/**
|
|
162
|
-
* Aria-label for save button in editMode
|
|
163
|
-
*/
|
|
164
|
-
saveButtonAriaLabel: _propTypes.default.string,
|
|
165
|
-
/**
|
|
166
|
-
* Aria-label for cancel button in editMode
|
|
167
|
-
*/
|
|
168
|
-
cancelButtonAriaLabel: _propTypes.default.string,
|
|
169
|
-
/**
|
|
170
|
-
* Start in editMode
|
|
171
|
-
*/
|
|
172
|
-
startWithEditOpen: _propTypes.default.bool,
|
|
173
|
-
/**
|
|
174
|
-
* Props that will be applied directly to the EuiEmptyButton displayed in readMode
|
|
175
|
-
*/
|
|
176
|
-
readModeProps: _propTypes.default.any,
|
|
177
|
-
/**
|
|
178
|
-
* Props that will be applied directly to the EuiFieldText displayed in editMode
|
|
179
|
-
*/
|
|
180
|
-
editModeProps: _propTypes.default.any,
|
|
181
|
-
/**
|
|
182
|
-
* Form sizes
|
|
183
|
-
*/
|
|
184
|
-
sizes: _propTypes.default.shape({
|
|
185
|
-
compressed: _propTypes.default.bool.isRequired,
|
|
186
|
-
buttonSize: _propTypes.default.oneOf(["xs", "s", "m"]).isRequired,
|
|
187
|
-
iconSize: _propTypes.default.oneOf(["s", "m"]).isRequired
|
|
188
|
-
}).isRequired,
|
|
189
|
-
/**
|
|
190
|
-
* Render prop that returns the read mode value as an arg
|
|
191
|
-
*/
|
|
192
|
-
children: _propTypes.default.func.isRequired
|
|
193
|
-
};
|