@deephaven/grid 0.5.2-beta.0 → 0.6.1-demo.8
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/CellInputField.js +40 -88
- package/dist/CellInputField.js.map +1 -1
- package/dist/Grid.js +1449 -1484
- package/dist/Grid.js.map +1 -1
- package/dist/GridColorUtils.js +18 -51
- package/dist/GridColorUtils.js.map +1 -1
- package/dist/GridMetricCalculator.d.ts +8 -1
- package/dist/GridMetricCalculator.d.ts.map +1 -1
- package/dist/GridMetricCalculator.js +1031 -994
- package/dist/GridMetricCalculator.js.map +1 -1
- package/dist/GridModel.d.ts +4 -1
- package/dist/GridModel.d.ts.map +1 -1
- package/dist/GridModel.js +175 -286
- package/dist/GridModel.js.map +1 -1
- package/dist/GridMouseHandler.js +39 -59
- package/dist/GridMouseHandler.js.map +1 -1
- package/dist/GridRange.js +572 -630
- package/dist/GridRange.js.map +1 -1
- package/dist/GridRenderer.js +1650 -1564
- package/dist/GridRenderer.js.map +1 -1
- package/dist/GridTestUtils.js +15 -29
- package/dist/GridTestUtils.js.map +1 -1
- package/dist/GridUtils.js +679 -717
- package/dist/GridUtils.js.map +1 -1
- package/dist/KeyHandler.js +6 -18
- package/dist/KeyHandler.js.map +1 -1
- package/dist/MockGridModel.js +105 -210
- package/dist/MockGridModel.js.map +1 -1
- package/dist/MockTreeGridModel.js +113 -183
- package/dist/MockTreeGridModel.js.map +1 -1
- package/dist/errors/PasteError.js +5 -44
- package/dist/errors/PasteError.js.map +1 -1
- package/dist/errors/index.js +1 -1
- package/dist/errors/index.js.map +1 -1
- package/dist/index.js +15 -15
- package/dist/index.js.map +1 -1
- package/dist/key-handlers/EditKeyHandler.js +42 -75
- package/dist/key-handlers/EditKeyHandler.js.map +1 -1
- package/dist/key-handlers/PasteKeyHandler.js +42 -78
- package/dist/key-handlers/PasteKeyHandler.js.map +1 -1
- package/dist/key-handlers/SelectionKeyHandler.d.ts.map +1 -1
- package/dist/key-handlers/SelectionKeyHandler.js +239 -229
- package/dist/key-handlers/SelectionKeyHandler.js.map +1 -1
- package/dist/key-handlers/TreeKeyHandler.js +42 -72
- package/dist/key-handlers/TreeKeyHandler.js.map +1 -1
- package/dist/key-handlers/index.js +4 -4
- package/dist/key-handlers/index.js.map +1 -1
- package/dist/memoizeClear.js +1 -1
- package/dist/memoizeClear.js.map +1 -1
- package/dist/mouse-handlers/EditMouseHandler.js +18 -50
- package/dist/mouse-handlers/EditMouseHandler.js.map +1 -1
- package/dist/mouse-handlers/GridColumnMoveMouseHandler.d.ts.map +1 -1
- package/dist/mouse-handlers/GridColumnMoveMouseHandler.js +141 -163
- package/dist/mouse-handlers/GridColumnMoveMouseHandler.js.map +1 -1
- package/dist/mouse-handlers/GridColumnSeparatorMouseHandler.js +47 -86
- package/dist/mouse-handlers/GridColumnSeparatorMouseHandler.js.map +1 -1
- package/dist/mouse-handlers/GridHorizontalScrollBarMouseHandler.js +145 -171
- package/dist/mouse-handlers/GridHorizontalScrollBarMouseHandler.js.map +1 -1
- package/dist/mouse-handlers/GridRowMoveMouseHandler.js +125 -147
- package/dist/mouse-handlers/GridRowMoveMouseHandler.js.map +1 -1
- package/dist/mouse-handlers/GridRowSeparatorMouseHandler.js +47 -86
- package/dist/mouse-handlers/GridRowSeparatorMouseHandler.js.map +1 -1
- package/dist/mouse-handlers/GridRowTreeMouseHandler.js +46 -76
- package/dist/mouse-handlers/GridRowTreeMouseHandler.js.map +1 -1
- package/dist/mouse-handlers/GridScrollBarCornerMouseHandler.js +31 -62
- package/dist/mouse-handlers/GridScrollBarCornerMouseHandler.js.map +1 -1
- package/dist/mouse-handlers/GridSelectionMouseHandler.js +200 -222
- package/dist/mouse-handlers/GridSelectionMouseHandler.js.map +1 -1
- package/dist/mouse-handlers/GridSeparatorMouseHandler.js +206 -253
- package/dist/mouse-handlers/GridSeparatorMouseHandler.js.map +1 -1
- package/dist/mouse-handlers/GridVerticalScrollBarMouseHandler.js +146 -172
- package/dist/mouse-handlers/GridVerticalScrollBarMouseHandler.js.map +1 -1
- package/dist/mouse-handlers/index.js +10 -10
- package/dist/mouse-handlers/index.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +6 -10
package/dist/CellInputField.js
CHANGED
|
@@ -1,22 +1,10 @@
|
|
|
1
|
-
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
2
|
-
|
|
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
|
-
|
|
5
|
-
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); }
|
|
6
|
-
|
|
7
|
-
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; }
|
|
8
|
-
|
|
9
|
-
function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
|
10
|
-
|
|
11
|
-
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
12
|
-
|
|
13
1
|
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
|
14
2
|
import PropTypes from 'prop-types';
|
|
15
3
|
import classNames from 'classnames';
|
|
16
|
-
import GridRange from
|
|
17
|
-
import GridUtils from
|
|
4
|
+
import GridRange from "./GridRange.js";
|
|
5
|
+
import GridUtils from "./GridUtils.js";
|
|
18
6
|
import "./CellInputField.css";
|
|
19
|
-
export var directionForKey =
|
|
7
|
+
export var directionForKey = key => {
|
|
20
8
|
switch (key) {
|
|
21
9
|
case 'ArrowDown':
|
|
22
10
|
return GridRange.SELECTION_DIRECTION.DOWN;
|
|
@@ -34,61 +22,31 @@ export var directionForKey = function directionForKey(key) {
|
|
|
34
22
|
return null;
|
|
35
23
|
}
|
|
36
24
|
};
|
|
37
|
-
export var CellInputField =
|
|
38
|
-
var
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
return undefined;
|
|
51
|
-
} : _ref$onChange,
|
|
52
|
-
_ref$onCancel = _ref.onCancel,
|
|
53
|
-
onCancel = _ref$onCancel === void 0 ? function () {
|
|
54
|
-
return undefined;
|
|
55
|
-
} : _ref$onCancel,
|
|
56
|
-
_ref$onDone = _ref.onDone,
|
|
57
|
-
onDone = _ref$onDone === void 0 ? function () {
|
|
58
|
-
return undefined;
|
|
59
|
-
} : _ref$onDone,
|
|
60
|
-
_ref$onContextMenu = _ref.onContextMenu,
|
|
61
|
-
onContextMenu = _ref$onContextMenu === void 0 ? function () {
|
|
62
|
-
return undefined;
|
|
63
|
-
} : _ref$onContextMenu,
|
|
64
|
-
_ref$style = _ref.style,
|
|
65
|
-
style = _ref$style === void 0 ? {} : _ref$style;
|
|
25
|
+
export var CellInputField = (_ref) => {
|
|
26
|
+
var {
|
|
27
|
+
selectionRange = undefined,
|
|
28
|
+
className = '',
|
|
29
|
+
disabled = false,
|
|
30
|
+
value: propsValue = '',
|
|
31
|
+
isQuickEdit: propsIsQuickEdit = true,
|
|
32
|
+
onChange = () => undefined,
|
|
33
|
+
onCancel = () => undefined,
|
|
34
|
+
onDone = () => undefined,
|
|
35
|
+
onContextMenu = () => undefined,
|
|
36
|
+
style = {}
|
|
37
|
+
} = _ref;
|
|
66
38
|
var inputField = useRef(null); // Use a ref for `isCancelled` as we need to know when it's cancelled after it's called by the event handlers as well
|
|
67
39
|
|
|
68
40
|
var isCancelled = useRef(false);
|
|
41
|
+
var [initialValue] = useState(propsValue);
|
|
42
|
+
var [isChanged, setIsChanged] = useState(false);
|
|
43
|
+
var [isQuickEdit, setIsQuickEdit] = useState(propsIsQuickEdit);
|
|
44
|
+
var [value, setValue] = useState(propsValue); // Init field selection
|
|
69
45
|
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
var _useState3 = useState(false),
|
|
75
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
|
76
|
-
isChanged = _useState4[0],
|
|
77
|
-
setIsChanged = _useState4[1];
|
|
78
|
-
|
|
79
|
-
var _useState5 = useState(propsIsQuickEdit),
|
|
80
|
-
_useState6 = _slicedToArray(_useState5, 2),
|
|
81
|
-
isQuickEdit = _useState6[0],
|
|
82
|
-
setIsQuickEdit = _useState6[1];
|
|
83
|
-
|
|
84
|
-
var _useState7 = useState(propsValue),
|
|
85
|
-
_useState8 = _slicedToArray(_useState7, 2),
|
|
86
|
-
value = _useState8[0],
|
|
87
|
-
setValue = _useState8[1]; // Init field selection
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
useEffect(function () {
|
|
91
|
-
var field = inputField.current;
|
|
46
|
+
useEffect(() => {
|
|
47
|
+
var {
|
|
48
|
+
current: field
|
|
49
|
+
} = inputField;
|
|
92
50
|
|
|
93
51
|
if (field == null) {
|
|
94
52
|
return;
|
|
@@ -102,16 +60,18 @@ export var CellInputField = function CellInputField(_ref) {
|
|
|
102
60
|
field.setSelectionRange(field.value.length, field.value.length);
|
|
103
61
|
}
|
|
104
62
|
}, [selectionRange]);
|
|
105
|
-
var sendUpdate = useCallback(
|
|
63
|
+
var sendUpdate = useCallback(newValue => {
|
|
106
64
|
onChange(newValue);
|
|
107
65
|
}, [onChange]);
|
|
108
|
-
var handleChange = useCallback(
|
|
109
|
-
var
|
|
66
|
+
var handleChange = useCallback(event => {
|
|
67
|
+
var {
|
|
68
|
+
value: newValue
|
|
69
|
+
} = event.target;
|
|
110
70
|
setValue(newValue);
|
|
111
71
|
setIsChanged(true);
|
|
112
72
|
sendUpdate(newValue);
|
|
113
73
|
}, [sendUpdate, setValue, setIsChanged]);
|
|
114
|
-
var handleCancel = useCallback(
|
|
74
|
+
var handleCancel = useCallback(() => {
|
|
115
75
|
isCancelled.current = true;
|
|
116
76
|
|
|
117
77
|
if (isChanged) {
|
|
@@ -121,25 +81,25 @@ export var CellInputField = function CellInputField(_ref) {
|
|
|
121
81
|
setIsChanged(false);
|
|
122
82
|
onCancel();
|
|
123
83
|
}, [initialValue, isChanged, onCancel, sendUpdate]);
|
|
124
|
-
var handleClick = useCallback(
|
|
84
|
+
var handleClick = useCallback(() => {
|
|
125
85
|
setIsQuickEdit(false);
|
|
126
86
|
}, [setIsQuickEdit]);
|
|
127
87
|
var handleCommit = useCallback(function () {
|
|
128
88
|
var direction = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : GridRange.SELECTION_DIRECTION.DOWN;
|
|
129
89
|
var fillRange = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
|
130
90
|
onDone(value, {
|
|
131
|
-
direction
|
|
132
|
-
fillRange
|
|
91
|
+
direction,
|
|
92
|
+
fillRange
|
|
133
93
|
});
|
|
134
94
|
}, [onDone, value]);
|
|
135
|
-
var handleBlur = useCallback(
|
|
95
|
+
var handleBlur = useCallback(() => {
|
|
136
96
|
if (isCancelled.current) {
|
|
137
97
|
return;
|
|
138
98
|
}
|
|
139
99
|
|
|
140
100
|
handleCommit(null);
|
|
141
101
|
}, [isCancelled, handleCommit]);
|
|
142
|
-
var handleKeyDown = useCallback(
|
|
102
|
+
var handleKeyDown = useCallback(event => {
|
|
143
103
|
event.stopPropagation();
|
|
144
104
|
|
|
145
105
|
switch (event.key) {
|
|
@@ -184,7 +144,7 @@ export var CellInputField = function CellInputField(_ref) {
|
|
|
184
144
|
break;
|
|
185
145
|
}
|
|
186
146
|
}, [handleCancel, handleCommit, isQuickEdit, setValue, setIsChanged, sendUpdate, value]);
|
|
187
|
-
var handleContextMenu = useCallback(
|
|
147
|
+
var handleContextMenu = useCallback(event => {
|
|
188
148
|
onContextMenu(event);
|
|
189
149
|
}, [onContextMenu]);
|
|
190
150
|
return /*#__PURE__*/React.createElement("textarea", {
|
|
@@ -222,18 +182,10 @@ CellInputField.defaultProps = {
|
|
|
222
182
|
disabled: false,
|
|
223
183
|
value: '',
|
|
224
184
|
isQuickEdit: true,
|
|
225
|
-
onChange:
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
return undefined;
|
|
230
|
-
},
|
|
231
|
-
onDone: function onDone() {
|
|
232
|
-
return undefined;
|
|
233
|
-
},
|
|
234
|
-
onContextMenu: function onContextMenu() {
|
|
235
|
-
return undefined;
|
|
236
|
-
},
|
|
185
|
+
onChange: () => undefined,
|
|
186
|
+
onCancel: () => undefined,
|
|
187
|
+
onDone: () => undefined,
|
|
188
|
+
onContextMenu: () => undefined,
|
|
237
189
|
style: {}
|
|
238
190
|
};
|
|
239
191
|
export default CellInputField;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/CellInputField.tsx"],"names":["React","useCallback","useEffect","useRef","useState","PropTypes","classNames","GridRange","GridUtils","directionForKey","key","SELECTION_DIRECTION","DOWN","UP","LEFT","RIGHT","CellInputField","selectionRange","undefined","className","disabled","value","propsValue","isQuickEdit","propsIsQuickEdit","onChange","onCancel","onDone","onContextMenu","style","inputField","isCancelled","initialValue","isChanged","setIsChanged","setIsQuickEdit","setValue","field","current","focus","setSelectionRange","length","sendUpdate","newValue","handleChange","event","target","handleCancel","handleClick","handleCommit","direction","fillRange","handleBlur","handleKeyDown","stopPropagation","preventDefault","isModifierKeyDown","altKey","shiftKey","handleContextMenu","propTypes","arrayOf","number","string","bool","func","shape","defaultProps"],"mappings":"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","sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport GridRange from './GridRange';\nimport GridUtils from './GridUtils';\nimport './CellInputField.scss';\n\nexport type GridRangeSelectionDirection = string;\n\nexport type CellInputFieldProps = {\n selectionRange?: number[];\n className?: string;\n disabled?: boolean;\n isQuickEdit?: boolean;\n value?: string;\n onChange?: (value: string) => void;\n onCancel?: () => void;\n onDone?: (\n value: string,\n options: {\n direction: GridRangeSelectionDirection | null;\n fillRange: boolean;\n }\n ) => void;\n onContextMenu?: React.MouseEventHandler<HTMLTextAreaElement>;\n style?: React.CSSProperties;\n};\n\nexport const directionForKey = (\n key: string\n): GridRangeSelectionDirection | null => {\n switch (key) {\n case 'ArrowDown':\n return GridRange.SELECTION_DIRECTION.DOWN;\n case 'ArrowUp':\n return GridRange.SELECTION_DIRECTION.UP;\n case 'ArrowLeft':\n return GridRange.SELECTION_DIRECTION.LEFT;\n case 'ArrowRight':\n return GridRange.SELECTION_DIRECTION.RIGHT;\n default:\n return null;\n }\n};\n\nexport const CellInputField = ({\n selectionRange = undefined,\n className = '',\n disabled = false,\n value: propsValue = '',\n isQuickEdit: propsIsQuickEdit = true,\n onChange = () => undefined,\n onCancel = () => undefined,\n onDone = () => undefined,\n onContextMenu = () => undefined,\n style = {},\n}: CellInputFieldProps): JSX.Element => {\n const inputField = useRef<HTMLTextAreaElement>(null);\n // Use a ref for `isCancelled` as we need to know when it's cancelled after it's called by the event handlers as well\n const isCancelled = useRef<boolean>(false);\n const [initialValue] = useState(propsValue);\n const [isChanged, setIsChanged] = useState(false);\n const [isQuickEdit, setIsQuickEdit] = useState(propsIsQuickEdit);\n const [value, setValue] = useState(propsValue);\n\n // Init field selection\n useEffect(() => {\n const { current: field } = inputField;\n if (field == null) {\n return;\n }\n\n field.focus();\n if (selectionRange) {\n field.setSelectionRange(selectionRange[0], selectionRange[1]);\n } else {\n field.setSelectionRange(field.value.length, field.value.length);\n }\n }, [selectionRange]);\n\n const sendUpdate = useCallback(\n (newValue: string) => {\n onChange(newValue);\n },\n [onChange]\n );\n\n const handleChange = useCallback(\n (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n const { value: newValue } = event.target;\n setValue(newValue);\n setIsChanged(true);\n sendUpdate(newValue);\n },\n [sendUpdate, setValue, setIsChanged]\n );\n\n const handleCancel = useCallback(() => {\n isCancelled.current = true;\n if (isChanged) {\n sendUpdate(initialValue);\n }\n\n setIsChanged(false);\n onCancel();\n }, [initialValue, isChanged, onCancel, sendUpdate]);\n\n const handleClick = useCallback(() => {\n setIsQuickEdit(false);\n }, [setIsQuickEdit]);\n\n const handleCommit = useCallback(\n (\n direction: GridRangeSelectionDirection | null = GridRange\n .SELECTION_DIRECTION.DOWN,\n fillRange = false\n ) => {\n onDone(value, { direction, fillRange });\n },\n [onDone, value]\n );\n\n const handleBlur = useCallback(() => {\n if (isCancelled.current) {\n return;\n }\n\n handleCommit(null);\n }, [isCancelled, handleCommit]);\n\n const handleKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLTextAreaElement>) => {\n event.stopPropagation();\n\n switch (event.key) {\n case 'Escape':\n event.preventDefault();\n handleCancel();\n break;\n case 'Enter':\n event.preventDefault();\n if (GridUtils.isModifierKeyDown(event)) {\n handleCommit(null, true);\n } else if (event.altKey) {\n const newValue = `${value}\\n`;\n setValue(newValue);\n setIsChanged(true);\n sendUpdate(newValue);\n } else {\n handleCommit(\n event.shiftKey\n ? GridRange.SELECTION_DIRECTION.UP\n : GridRange.SELECTION_DIRECTION.DOWN\n );\n }\n break;\n case 'Tab':\n event.preventDefault();\n handleCommit(\n event.shiftKey\n ? GridRange.SELECTION_DIRECTION.LEFT\n : GridRange.SELECTION_DIRECTION.RIGHT\n );\n break;\n case 'ArrowDown':\n case 'ArrowUp':\n case 'ArrowLeft':\n case 'ArrowRight':\n if (isQuickEdit) {\n event.preventDefault();\n handleCommit(directionForKey(event.key));\n }\n break;\n default:\n break;\n }\n },\n [\n handleCancel,\n handleCommit,\n isQuickEdit,\n setValue,\n setIsChanged,\n sendUpdate,\n value,\n ]\n );\n\n const handleContextMenu = useCallback(\n (event: React.MouseEvent<HTMLTextAreaElement, MouseEvent>) => {\n onContextMenu(event);\n },\n [onContextMenu]\n );\n\n return (\n <textarea\n ref={inputField}\n className={classNames('grid-cell-input-field', className)}\n value={value}\n onBlur={handleBlur}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n onContextMenu={handleContextMenu}\n onClick={handleClick}\n autoComplete=\"off\"\n autoCorrect=\"off\"\n autoCapitalize=\"off\"\n spellCheck=\"false\"\n disabled={disabled}\n style={style}\n />\n );\n};\n\nCellInputField.propTypes = {\n selectionRange: PropTypes.arrayOf(PropTypes.number),\n className: PropTypes.string,\n disabled: PropTypes.bool,\n isQuickEdit: PropTypes.bool,\n value: PropTypes.string,\n onChange: PropTypes.func,\n onCancel: PropTypes.func,\n onDone: PropTypes.func,\n onContextMenu: PropTypes.func,\n style: PropTypes.shape({}),\n};\n\nCellInputField.defaultProps = {\n selectionRange: null,\n className: '',\n disabled: false,\n value: '',\n isQuickEdit: true,\n onChange: () => undefined,\n onCancel: () => undefined,\n onDone: () => undefined,\n onContextMenu: () => undefined,\n style: {},\n};\n\nexport default CellInputField;\n"],"file":"CellInputField.js"}
|
|
1
|
+
{"version":3,"sources":["../src/CellInputField.tsx"],"names":["React","useCallback","useEffect","useRef","useState","PropTypes","classNames","GridRange","GridUtils","directionForKey","key","SELECTION_DIRECTION","DOWN","UP","LEFT","RIGHT","CellInputField","selectionRange","undefined","className","disabled","value","propsValue","isQuickEdit","propsIsQuickEdit","onChange","onCancel","onDone","onContextMenu","style","inputField","isCancelled","initialValue","isChanged","setIsChanged","setIsQuickEdit","setValue","current","field","focus","setSelectionRange","length","sendUpdate","newValue","handleChange","event","target","handleCancel","handleClick","handleCommit","direction","fillRange","handleBlur","handleKeyDown","stopPropagation","preventDefault","isModifierKeyDown","altKey","shiftKey","handleContextMenu","propTypes","arrayOf","number","string","bool","func","shape","defaultProps"],"mappings":"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","sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport GridRange from './GridRange';\nimport GridUtils from './GridUtils';\nimport './CellInputField.scss';\n\nexport type GridRangeSelectionDirection = string;\n\nexport type CellInputFieldProps = {\n selectionRange?: number[];\n className?: string;\n disabled?: boolean;\n isQuickEdit?: boolean;\n value?: string;\n onChange?: (value: string) => void;\n onCancel?: () => void;\n onDone?: (\n value: string,\n options: {\n direction: GridRangeSelectionDirection | null;\n fillRange: boolean;\n }\n ) => void;\n onContextMenu?: React.MouseEventHandler<HTMLTextAreaElement>;\n style?: React.CSSProperties;\n};\n\nexport const directionForKey = (\n key: string\n): GridRangeSelectionDirection | null => {\n switch (key) {\n case 'ArrowDown':\n return GridRange.SELECTION_DIRECTION.DOWN;\n case 'ArrowUp':\n return GridRange.SELECTION_DIRECTION.UP;\n case 'ArrowLeft':\n return GridRange.SELECTION_DIRECTION.LEFT;\n case 'ArrowRight':\n return GridRange.SELECTION_DIRECTION.RIGHT;\n default:\n return null;\n }\n};\n\nexport const CellInputField = ({\n selectionRange = undefined,\n className = '',\n disabled = false,\n value: propsValue = '',\n isQuickEdit: propsIsQuickEdit = true,\n onChange = () => undefined,\n onCancel = () => undefined,\n onDone = () => undefined,\n onContextMenu = () => undefined,\n style = {},\n}: CellInputFieldProps): JSX.Element => {\n const inputField = useRef<HTMLTextAreaElement>(null);\n // Use a ref for `isCancelled` as we need to know when it's cancelled after it's called by the event handlers as well\n const isCancelled = useRef<boolean>(false);\n const [initialValue] = useState(propsValue);\n const [isChanged, setIsChanged] = useState(false);\n const [isQuickEdit, setIsQuickEdit] = useState(propsIsQuickEdit);\n const [value, setValue] = useState(propsValue);\n\n // Init field selection\n useEffect(() => {\n const { current: field } = inputField;\n if (field == null) {\n return;\n }\n\n field.focus();\n if (selectionRange) {\n field.setSelectionRange(selectionRange[0], selectionRange[1]);\n } else {\n field.setSelectionRange(field.value.length, field.value.length);\n }\n }, [selectionRange]);\n\n const sendUpdate = useCallback(\n (newValue: string) => {\n onChange(newValue);\n },\n [onChange]\n );\n\n const handleChange = useCallback(\n (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n const { value: newValue } = event.target;\n setValue(newValue);\n setIsChanged(true);\n sendUpdate(newValue);\n },\n [sendUpdate, setValue, setIsChanged]\n );\n\n const handleCancel = useCallback(() => {\n isCancelled.current = true;\n if (isChanged) {\n sendUpdate(initialValue);\n }\n\n setIsChanged(false);\n onCancel();\n }, [initialValue, isChanged, onCancel, sendUpdate]);\n\n const handleClick = useCallback(() => {\n setIsQuickEdit(false);\n }, [setIsQuickEdit]);\n\n const handleCommit = useCallback(\n (\n direction: GridRangeSelectionDirection | null = GridRange\n .SELECTION_DIRECTION.DOWN,\n fillRange = false\n ) => {\n onDone(value, { direction, fillRange });\n },\n [onDone, value]\n );\n\n const handleBlur = useCallback(() => {\n if (isCancelled.current) {\n return;\n }\n\n handleCommit(null);\n }, [isCancelled, handleCommit]);\n\n const handleKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLTextAreaElement>) => {\n event.stopPropagation();\n\n switch (event.key) {\n case 'Escape':\n event.preventDefault();\n handleCancel();\n break;\n case 'Enter':\n event.preventDefault();\n if (GridUtils.isModifierKeyDown(event)) {\n handleCommit(null, true);\n } else if (event.altKey) {\n const newValue = `${value}\\n`;\n setValue(newValue);\n setIsChanged(true);\n sendUpdate(newValue);\n } else {\n handleCommit(\n event.shiftKey\n ? GridRange.SELECTION_DIRECTION.UP\n : GridRange.SELECTION_DIRECTION.DOWN\n );\n }\n break;\n case 'Tab':\n event.preventDefault();\n handleCommit(\n event.shiftKey\n ? GridRange.SELECTION_DIRECTION.LEFT\n : GridRange.SELECTION_DIRECTION.RIGHT\n );\n break;\n case 'ArrowDown':\n case 'ArrowUp':\n case 'ArrowLeft':\n case 'ArrowRight':\n if (isQuickEdit) {\n event.preventDefault();\n handleCommit(directionForKey(event.key));\n }\n break;\n default:\n break;\n }\n },\n [\n handleCancel,\n handleCommit,\n isQuickEdit,\n setValue,\n setIsChanged,\n sendUpdate,\n value,\n ]\n );\n\n const handleContextMenu = useCallback(\n (event: React.MouseEvent<HTMLTextAreaElement, MouseEvent>) => {\n onContextMenu(event);\n },\n [onContextMenu]\n );\n\n return (\n <textarea\n ref={inputField}\n className={classNames('grid-cell-input-field', className)}\n value={value}\n onBlur={handleBlur}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n onContextMenu={handleContextMenu}\n onClick={handleClick}\n autoComplete=\"off\"\n autoCorrect=\"off\"\n autoCapitalize=\"off\"\n spellCheck=\"false\"\n disabled={disabled}\n style={style}\n />\n );\n};\n\nCellInputField.propTypes = {\n selectionRange: PropTypes.arrayOf(PropTypes.number),\n className: PropTypes.string,\n disabled: PropTypes.bool,\n isQuickEdit: PropTypes.bool,\n value: PropTypes.string,\n onChange: PropTypes.func,\n onCancel: PropTypes.func,\n onDone: PropTypes.func,\n onContextMenu: PropTypes.func,\n style: PropTypes.shape({}),\n};\n\nCellInputField.defaultProps = {\n selectionRange: null,\n className: '',\n disabled: false,\n value: '',\n isQuickEdit: true,\n onChange: () => undefined,\n onCancel: () => undefined,\n onDone: () => undefined,\n onContextMenu: () => undefined,\n style: {},\n};\n\nexport default CellInputField;\n"],"file":"CellInputField.js"}
|