@deephaven/components 0.43.0 → 0.44.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/AutoCompleteInput.css +35 -0
- package/dist/AutoCompleteInput.css.map +1 -0
- package/dist/AutoCompleteInput.js +496 -0
- package/dist/AutoCompleteInput.js.map +1 -0
- package/dist/AutoResizeTextarea.css +11 -0
- package/dist/AutoResizeTextarea.css.map +1 -0
- package/dist/AutoResizeTextarea.js +128 -0
- package/dist/AutoResizeTextarea.js.map +1 -0
- package/dist/BasicModal.js +112 -0
- package/dist/BasicModal.js.map +1 -0
- package/dist/Button.d.ts +1 -1
- package/dist/Button.js +193 -0
- package/dist/Button.js.map +1 -0
- package/dist/ButtonGroup.js +31 -0
- package/dist/ButtonGroup.js.map +1 -0
- package/dist/ButtonOld.js +41 -0
- package/dist/ButtonOld.js.map +1 -0
- package/dist/CardFlip.css +36 -0
- package/dist/CardFlip.css.map +1 -0
- package/dist/CardFlip.js +61 -0
- package/dist/CardFlip.js.map +1 -0
- package/dist/Checkbox.js +104 -0
- package/dist/Checkbox.js.map +1 -0
- package/dist/Collapse.js +89 -0
- package/dist/Collapse.js.map +1 -0
- package/dist/ComboBox.css +50 -0
- package/dist/ComboBox.css.map +1 -0
- package/dist/ComboBox.js +487 -0
- package/dist/ComboBox.js.map +1 -0
- package/dist/CopyButton.js +30 -0
- package/dist/CopyButton.js.map +1 -0
- package/dist/CustomTimeSelect.css +65 -0
- package/dist/CustomTimeSelect.css.map +1 -0
- package/dist/CustomTimeSelect.js +516 -0
- package/dist/CustomTimeSelect.js.map +1 -0
- package/dist/DateInput.js +54 -0
- package/dist/DateInput.js.map +1 -0
- package/dist/DateInputUtils.js +33 -0
- package/dist/DateInputUtils.js.map +1 -0
- package/dist/DateTimeInput.js +84 -0
- package/dist/DateTimeInput.js.map +1 -0
- package/dist/DateTimeInputUtils.js +8 -0
- package/dist/DateTimeInputUtils.js.map +1 -0
- package/dist/DebouncedSearchInput.js +79 -0
- package/dist/DebouncedSearchInput.js.map +1 -0
- package/dist/DragUtils.js +68 -0
- package/dist/DragUtils.js.map +1 -0
- package/dist/DraggableItemList.css +118 -0
- package/dist/DraggableItemList.css.map +1 -0
- package/dist/DraggableItemList.js +268 -0
- package/dist/DraggableItemList.js.map +1 -0
- package/dist/EditableItemList.js +105 -0
- package/dist/EditableItemList.js.map +1 -0
- package/dist/HierarchicalCheckboxMenu.css +30 -0
- package/dist/HierarchicalCheckboxMenu.css.map +1 -0
- package/dist/HierarchicalCheckboxMenu.js +218 -0
- package/dist/HierarchicalCheckboxMenu.js.map +1 -0
- package/dist/ItemList.css +13 -0
- package/dist/ItemList.css.map +1 -0
- package/dist/ItemList.js +686 -0
- package/dist/ItemList.js.map +1 -0
- package/dist/ItemListItem.css +48 -0
- package/dist/ItemListItem.css.map +1 -0
- package/dist/ItemListItem.js +214 -0
- package/dist/ItemListItem.js.map +1 -0
- package/dist/LoadingOverlay.css +24 -0
- package/dist/LoadingOverlay.css.map +1 -0
- package/dist/LoadingOverlay.js +48 -0
- package/dist/LoadingOverlay.js.map +1 -0
- package/dist/LoadingSpinner.css +8 -0
- package/dist/LoadingSpinner.css.map +1 -0
- package/dist/LoadingSpinner.js +24 -0
- package/dist/LoadingSpinner.js.map +1 -0
- package/dist/MaskedInput.css +7 -0
- package/dist/MaskedInput.css.map +1 -0
- package/dist/MaskedInput.js +394 -0
- package/dist/MaskedInput.js.map +1 -0
- package/dist/MaskedInputUtils.js +36 -0
- package/dist/MaskedInputUtils.js.map +1 -0
- package/dist/Option.js +16 -0
- package/dist/Option.js.map +1 -0
- package/dist/RadioGroup.js +34 -0
- package/dist/RadioGroup.js.map +1 -0
- package/dist/RadioItem.js +55 -0
- package/dist/RadioItem.js.map +1 -0
- package/dist/RandomAreaPlotAnimation.css +18 -0
- package/dist/RandomAreaPlotAnimation.css.map +1 -0
- package/dist/RandomAreaPlotAnimation.js +290 -0
- package/dist/RandomAreaPlotAnimation.js.map +1 -0
- package/dist/SearchInput.css +43 -0
- package/dist/SearchInput.css.map +1 -0
- package/dist/SearchInput.js +66 -0
- package/dist/SearchInput.js.map +1 -0
- package/dist/Select.js +30 -0
- package/dist/Select.js.map +1 -0
- package/dist/SelectValueList.css +38 -0
- package/dist/SelectValueList.css.map +1 -0
- package/dist/SelectValueList.js +175 -0
- package/dist/SelectValueList.js.map +1 -0
- package/dist/SocketedButton.css +123 -0
- package/dist/SocketedButton.css.map +1 -0
- package/dist/SocketedButton.js +63 -0
- package/dist/SocketedButton.js.map +1 -0
- package/dist/SpectrumThemeDark.module.css +9 -0
- package/dist/SpectrumThemeDark.module.css.map +1 -0
- package/dist/SpectrumThemeLight.module.css +9 -0
- package/dist/SpectrumThemeLight.module.css.map +1 -0
- package/dist/SpectrumUtils.js +59 -0
- package/dist/SpectrumUtils.js.map +1 -0
- package/dist/ThemeExport.js +15 -0
- package/dist/ThemeExport.js.map +1 -0
- package/dist/ThemeExport.module.css +40 -0
- package/dist/ThemeExport.module.css.map +1 -0
- package/dist/TimeInput.js +101 -0
- package/dist/TimeInput.js.map +1 -0
- package/dist/TimeSlider.css +178 -0
- package/dist/TimeSlider.css.map +1 -0
- package/dist/TimeSlider.js +314 -0
- package/dist/TimeSlider.js.map +1 -0
- package/dist/TimeSlider.module.css +185 -0
- package/dist/TimeSlider.module.css.map +1 -0
- package/dist/ToastNotification.css +62 -0
- package/dist/ToastNotification.css.map +1 -0
- package/dist/ToastNotification.js +56 -0
- package/dist/ToastNotification.js.map +1 -0
- package/dist/UISwitch.css +94 -0
- package/dist/UISwitch.css.map +1 -0
- package/dist/UISwitch.js +30 -0
- package/dist/UISwitch.js.map +1 -0
- package/dist/ValidateLabelInput.css +9 -0
- package/dist/ValidateLabelInput.css.map +1 -0
- package/dist/ValidateLabelInput.js +50 -0
- package/dist/ValidateLabelInput.js.map +1 -0
- package/dist/context-actions/ContextActionUtils.js +142 -0
- package/dist/context-actions/ContextActionUtils.js.map +1 -0
- package/dist/context-actions/ContextActions.css +157 -0
- package/dist/context-actions/ContextActions.css.map +1 -0
- package/dist/context-actions/ContextActions.js +182 -0
- package/dist/context-actions/ContextActions.js.map +1 -0
- package/dist/context-actions/ContextMenu.js +559 -0
- package/dist/context-actions/ContextMenu.js.map +1 -0
- package/dist/context-actions/ContextMenuItem.js +139 -0
- package/dist/context-actions/ContextMenuItem.js.map +1 -0
- package/dist/context-actions/ContextMenuRoot.js +135 -0
- package/dist/context-actions/ContextMenuRoot.js.map +1 -0
- package/dist/context-actions/GlobalContextAction.js +53 -0
- package/dist/context-actions/GlobalContextAction.js.map +1 -0
- package/dist/context-actions/GlobalContextActions.js +28 -0
- package/dist/context-actions/GlobalContextActions.js.map +1 -0
- package/dist/context-actions/index.js +5 -0
- package/dist/context-actions/index.js.map +1 -0
- package/dist/declaration.d.js +2 -0
- package/dist/declaration.d.js.map +1 -0
- package/dist/index.js +52 -0
- package/dist/index.js.map +1 -0
- package/dist/menu-actions/DropdownMenu.css +39 -0
- package/dist/menu-actions/DropdownMenu.css.map +1 -0
- package/dist/menu-actions/DropdownMenu.js +174 -0
- package/dist/menu-actions/DropdownMenu.js.map +1 -0
- package/dist/menu-actions/Menu.js +244 -0
- package/dist/menu-actions/Menu.js.map +1 -0
- package/dist/menu-actions/index.js +4 -0
- package/dist/menu-actions/index.js.map +1 -0
- package/dist/modal/DebouncedModal.js +26 -0
- package/dist/modal/DebouncedModal.js.map +1 -0
- package/dist/modal/InfoModal.css +24 -0
- package/dist/modal/InfoModal.css.map +1 -0
- package/dist/modal/InfoModal.js +34 -0
- package/dist/modal/InfoModal.js.map +1 -0
- package/dist/modal/Modal.js +122 -0
- package/dist/modal/Modal.js.map +1 -0
- package/dist/modal/ModalBody.js +16 -0
- package/dist/modal/ModalBody.js.map +1 -0
- package/dist/modal/ModalFooter.js +14 -0
- package/dist/modal/ModalFooter.js.map +1 -0
- package/dist/modal/ModalHeader.js +27 -0
- package/dist/modal/ModalHeader.js.map +1 -0
- package/dist/modal/index.js +7 -0
- package/dist/modal/index.js.map +1 -0
- package/dist/navigation/Menu.css +13 -0
- package/dist/navigation/Menu.css.map +1 -0
- package/dist/navigation/Menu.js +25 -0
- package/dist/navigation/Menu.js.map +1 -0
- package/dist/navigation/MenuItem.css +46 -0
- package/dist/navigation/MenuItem.css.map +1 -0
- package/dist/navigation/MenuItem.js +65 -0
- package/dist/navigation/MenuItem.js.map +1 -0
- package/dist/navigation/Page.css +34 -0
- package/dist/navigation/Page.css.map +1 -0
- package/dist/navigation/Page.js +46 -0
- package/dist/navigation/Page.js.map +1 -0
- package/dist/navigation/Stack.css +24 -0
- package/dist/navigation/Stack.css.map +1 -0
- package/dist/navigation/Stack.js +82 -0
- package/dist/navigation/Stack.js.map +1 -0
- package/dist/navigation/index.js +5 -0
- package/dist/navigation/index.js.map +1 -0
- package/dist/popper/Popper.css +127 -0
- package/dist/popper/Popper.css.map +1 -0
- package/dist/popper/Popper.js +283 -0
- package/dist/popper/Popper.js.map +1 -0
- package/dist/popper/Tooltip.js +283 -0
- package/dist/popper/Tooltip.js.map +1 -0
- package/dist/popper/index.js +3 -0
- package/dist/popper/index.js.map +1 -0
- package/dist/shortcuts/GlobalShortcuts.js +47 -0
- package/dist/shortcuts/GlobalShortcuts.js.map +1 -0
- package/dist/shortcuts/Shortcut.js +393 -0
- package/dist/shortcuts/Shortcut.js.map +1 -0
- package/dist/shortcuts/ShortcutRegistry.js +78 -0
- package/dist/shortcuts/ShortcutRegistry.js.map +1 -0
- package/dist/shortcuts/index.js +5 -0
- package/dist/shortcuts/index.js.map +1 -0
- package/package.json +7 -7
|
@@ -0,0 +1,394 @@
|
|
|
1
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
2
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
3
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
4
|
+
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
|
|
5
|
+
function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
6
|
+
import React, { useMemo, useEffect, useCallback } from 'react';
|
|
7
|
+
import classNames from 'classnames';
|
|
8
|
+
import Log from '@deephaven/log';
|
|
9
|
+
import { useForwardedRef } from '@deephaven/react-hooks';
|
|
10
|
+
import { DEFAULT_GET_PREFERRED_REPLACEMENT_STRING, fillToLength, trimTrailingMask } from "./MaskedInputUtils.js";
|
|
11
|
+
import "./MaskedInput.css";
|
|
12
|
+
var log = Log.module('MaskedInput');
|
|
13
|
+
var SELECTION_DIRECTION = {
|
|
14
|
+
FORWARD: 'forward',
|
|
15
|
+
BACKWARD: 'backward',
|
|
16
|
+
NONE: 'none'
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
/**
|
|
20
|
+
* Special space character that's the same size as tabular numbers
|
|
21
|
+
* https://www.fileformat.info/info/unicode/char/2007/index.htm
|
|
22
|
+
*/
|
|
23
|
+
var FIXED_WIDTH_SPACE = '\u2007';
|
|
24
|
+
/**
|
|
25
|
+
* A masked input for entering data from a template.
|
|
26
|
+
* Won't work by itself, must use within another component and handle updating the value/selection.
|
|
27
|
+
*/
|
|
28
|
+
// Forward ref causes a false positive for display-name in eslint:
|
|
29
|
+
// https://github.com/yannickcr/eslint-plugin-react/issues/2269
|
|
30
|
+
// eslint-disable-next-line react/display-name
|
|
31
|
+
var MaskedInput = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
32
|
+
var {
|
|
33
|
+
className,
|
|
34
|
+
example,
|
|
35
|
+
getNextSegmentValue = (range, delta, segmentValue) => segmentValue,
|
|
36
|
+
getPreferredReplacementString = DEFAULT_GET_PREFERRED_REPLACEMENT_STRING,
|
|
37
|
+
onChange = () => false,
|
|
38
|
+
onSelect = () => false,
|
|
39
|
+
onSubmit,
|
|
40
|
+
pattern,
|
|
41
|
+
placeholder,
|
|
42
|
+
selection,
|
|
43
|
+
value,
|
|
44
|
+
onFocus = () => false,
|
|
45
|
+
onBlur = () => false,
|
|
46
|
+
'data-testid': dataTestId
|
|
47
|
+
} = props;
|
|
48
|
+
var input = useForwardedRef(ref);
|
|
49
|
+
var examples = useMemo(() => Array.isArray(example) ? example : [example], [example]);
|
|
50
|
+
var emptyMask = useMemo(() => examples[0].replace(/[a-zA-Z0-9]/g, FIXED_WIDTH_SPACE), [examples]);
|
|
51
|
+
useEffect(function setSelectedSegment() {
|
|
52
|
+
if (selection != null) {
|
|
53
|
+
var _input$current;
|
|
54
|
+
log.debug('setting selection...', selection);
|
|
55
|
+
var {
|
|
56
|
+
selectionStart: _selectionStart,
|
|
57
|
+
selectionEnd: _selectionEnd,
|
|
58
|
+
selectionDirection
|
|
59
|
+
} = selection;
|
|
60
|
+
(_input$current = input.current) === null || _input$current === void 0 ? void 0 : _input$current.setSelectionRange(_selectionStart, _selectionEnd, selectionDirection);
|
|
61
|
+
log.debug('selection set!');
|
|
62
|
+
}
|
|
63
|
+
}, [selection, input]);
|
|
64
|
+
|
|
65
|
+
/**
|
|
66
|
+
* Returns the selection range for the segment at the given cursor position
|
|
67
|
+
* @param cursorPosition The current position of the cursor
|
|
68
|
+
*/
|
|
69
|
+
var getSegment = useCallback(cursorPosition => {
|
|
70
|
+
var selectionStart = cursorPosition;
|
|
71
|
+
var selectionEnd = cursorPosition;
|
|
72
|
+
var testValue = examples.length > 0 ? examples[0] : value;
|
|
73
|
+
for (var i = selectionStart - 1; i >= 0; i -= 1) {
|
|
74
|
+
if (!/[a-zA-Z0-9]/g.test(testValue.charAt(i))) {
|
|
75
|
+
break;
|
|
76
|
+
}
|
|
77
|
+
selectionStart = i;
|
|
78
|
+
}
|
|
79
|
+
for (var _i = selectionEnd; _i < testValue.length; _i += 1) {
|
|
80
|
+
if (!/[a-zA-Z0-9]/g.test(testValue.charAt(_i))) {
|
|
81
|
+
break;
|
|
82
|
+
}
|
|
83
|
+
selectionEnd = _i + 1;
|
|
84
|
+
}
|
|
85
|
+
var selectionDirection = selectionStart === selectionEnd ? SELECTION_DIRECTION.NONE : SELECTION_DIRECTION.BACKWARD;
|
|
86
|
+
return {
|
|
87
|
+
selectionStart,
|
|
88
|
+
selectionEnd,
|
|
89
|
+
selectionDirection
|
|
90
|
+
};
|
|
91
|
+
}, [examples, value]);
|
|
92
|
+
|
|
93
|
+
/**
|
|
94
|
+
* Replaces all blank spaces and everything after the current cursor position with the example value
|
|
95
|
+
* @param checkValue The value to check/fill in
|
|
96
|
+
* @param exampleValue The example to fill in the value from
|
|
97
|
+
* @param cursorPosition The cursor position
|
|
98
|
+
* @returns The filled in value
|
|
99
|
+
*/
|
|
100
|
+
function fillValue(checkValue, exampleValue) {
|
|
101
|
+
var cursorPosition = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : checkValue.length;
|
|
102
|
+
var filledValue = '';
|
|
103
|
+
for (var i = 0; i < cursorPosition; i += 1) {
|
|
104
|
+
if (checkValue.charAt(i) !== FIXED_WIDTH_SPACE) {
|
|
105
|
+
filledValue = filledValue.concat(checkValue[i]);
|
|
106
|
+
} else {
|
|
107
|
+
filledValue = filledValue.concat(exampleValue[i]);
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
filledValue = filledValue.concat(exampleValue.substring(cursorPosition));
|
|
111
|
+
return filledValue;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
/**
|
|
115
|
+
* Checks if a given `value` is valid up until the `cursorPosition`.
|
|
116
|
+
* Uses the examples to build the rest of the string
|
|
117
|
+
* @param checkValue The value to check validity of
|
|
118
|
+
* @param cursorPosition The position of the cursor to check up to
|
|
119
|
+
*/
|
|
120
|
+
function isValid(checkValue) {
|
|
121
|
+
var cursorPosition = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : checkValue.length;
|
|
122
|
+
var patternRegex = new RegExp("^".concat(pattern, "$"));
|
|
123
|
+
if (patternRegex.test(checkValue)) {
|
|
124
|
+
return true;
|
|
125
|
+
}
|
|
126
|
+
for (var i = 0; i < examples.length; i += 1) {
|
|
127
|
+
var filledValue = fillValue(checkValue, examples[i], cursorPosition);
|
|
128
|
+
if (patternRegex.test(filledValue)) {
|
|
129
|
+
return true;
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
return false;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
/**
|
|
136
|
+
* Returns the next segment after the given position
|
|
137
|
+
* @param position The cursor position to start at
|
|
138
|
+
* @returns The new selection range
|
|
139
|
+
*/
|
|
140
|
+
function nextSegment(position) {
|
|
141
|
+
var currentSegment = getSegment(position);
|
|
142
|
+
var nextPosition = currentSegment.selectionEnd + 1;
|
|
143
|
+
if (nextPosition >= value.length) {
|
|
144
|
+
return currentSegment;
|
|
145
|
+
}
|
|
146
|
+
return getSegment(nextPosition);
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
/**
|
|
150
|
+
* Returns the previous segment before the given position
|
|
151
|
+
* @param position The cursor position to start at
|
|
152
|
+
* @returns The new selection range
|
|
153
|
+
*/
|
|
154
|
+
function previousSegment(position) {
|
|
155
|
+
var currentSegment = getSegment(position);
|
|
156
|
+
var previousPosition = currentSegment.selectionStart - 1;
|
|
157
|
+
if (previousPosition <= 0) {
|
|
158
|
+
return currentSegment;
|
|
159
|
+
}
|
|
160
|
+
return getSegment(previousPosition);
|
|
161
|
+
}
|
|
162
|
+
function nextSegmentValue(position, delta) {
|
|
163
|
+
var segment = getSegment(position);
|
|
164
|
+
var segmentValue = value.substring(segment.selectionStart, segment.selectionEnd);
|
|
165
|
+
var newSegmentValue = getNextSegmentValue(segment, delta, segmentValue, value);
|
|
166
|
+
var newValue = value.substring(0, segment.selectionStart) + newSegmentValue + value.substring(segment.selectionEnd);
|
|
167
|
+
if (isValid(newValue, segment.selectionEnd)) {
|
|
168
|
+
onChange(newValue);
|
|
169
|
+
onSelect(segment);
|
|
170
|
+
}
|
|
171
|
+
}
|
|
172
|
+
var handleSelect = useCallback(event => {
|
|
173
|
+
var {
|
|
174
|
+
selectionStart = 0,
|
|
175
|
+
selectionEnd = 0,
|
|
176
|
+
selectionDirection = 'none'
|
|
177
|
+
} = event.target;
|
|
178
|
+
if (selectionStart === null || selectionEnd === null || selectionDirection === null) {
|
|
179
|
+
log.error('Selection attempted on non-text input element', event.target);
|
|
180
|
+
return;
|
|
181
|
+
}
|
|
182
|
+
log.debug2('handleSelect', selectionStart, selectionEnd, selectionDirection);
|
|
183
|
+
if (selection != null && selectionStart === selection.selectionStart && selectionEnd === selection.selectionEnd) {
|
|
184
|
+
return;
|
|
185
|
+
}
|
|
186
|
+
if (selection != null && selectionStart === value.length && selectionEnd === value.length && event.nativeEvent.type !== 'mouseup') {
|
|
187
|
+
// React triggers onSelect event with the cursor at the end of the input content
|
|
188
|
+
// when the component is rendered at a different location in the DOM,
|
|
189
|
+
// i.e. when start/end times switch places in the TimeSlider.
|
|
190
|
+
// Ignore this event and reset the selection to its previous state.
|
|
191
|
+
onSelect(_objectSpread({}, selection));
|
|
192
|
+
return;
|
|
193
|
+
}
|
|
194
|
+
if (selectionStart === selectionEnd) {
|
|
195
|
+
var newSelection = getSegment(selectionStart);
|
|
196
|
+
log.debug('Selection segment from ', selectionStart, selectionEnd, '=>', newSelection);
|
|
197
|
+
onSelect(newSelection);
|
|
198
|
+
} else {
|
|
199
|
+
onSelect({
|
|
200
|
+
selectionStart,
|
|
201
|
+
selectionEnd,
|
|
202
|
+
selectionDirection
|
|
203
|
+
});
|
|
204
|
+
}
|
|
205
|
+
}, [getSegment, onSelect, selection, value]);
|
|
206
|
+
var handleSelectCapture = useCallback(event => {
|
|
207
|
+
var _input$current$select;
|
|
208
|
+
if (!input.current) {
|
|
209
|
+
return;
|
|
210
|
+
}
|
|
211
|
+
log.debug('handleSelectCapture', event);
|
|
212
|
+
var selectionStart = (_input$current$select = input.current.selectionStart) !== null && _input$current$select !== void 0 ? _input$current$select : 0;
|
|
213
|
+
if (selectionStart === value.length && selection != null && selectionStart !== selection.selectionStart) {
|
|
214
|
+
event.preventDefault();
|
|
215
|
+
event.stopPropagation();
|
|
216
|
+
}
|
|
217
|
+
}, [input, selection, value]);
|
|
218
|
+
function handleArrowKey(event) {
|
|
219
|
+
event.preventDefault();
|
|
220
|
+
event.stopPropagation();
|
|
221
|
+
if (!input.current) {
|
|
222
|
+
return;
|
|
223
|
+
}
|
|
224
|
+
var {
|
|
225
|
+
key
|
|
226
|
+
} = event;
|
|
227
|
+
var {
|
|
228
|
+
selectionStart = 0,
|
|
229
|
+
selectionEnd = 0
|
|
230
|
+
} = input.current;
|
|
231
|
+
if (selectionStart === null || selectionEnd === null) {
|
|
232
|
+
log.error('Selection arrow nvaigation attempted on non-text input element', event.target);
|
|
233
|
+
return;
|
|
234
|
+
}
|
|
235
|
+
if (key === 'ArrowLeft') {
|
|
236
|
+
onSelect(previousSegment(selectionStart));
|
|
237
|
+
} else if (key === 'ArrowRight') {
|
|
238
|
+
onSelect(nextSegment(selectionEnd));
|
|
239
|
+
} else if (key === 'ArrowUp') {
|
|
240
|
+
nextSegmentValue(selectionStart, -1);
|
|
241
|
+
} else if (key === 'ArrowDown') {
|
|
242
|
+
nextSegmentValue(selectionStart, 1);
|
|
243
|
+
}
|
|
244
|
+
}
|
|
245
|
+
function handleKeyDown(event) {
|
|
246
|
+
if (!input.current) {
|
|
247
|
+
return;
|
|
248
|
+
}
|
|
249
|
+
log.debug('handleKeyDown', event);
|
|
250
|
+
var {
|
|
251
|
+
key
|
|
252
|
+
} = event;
|
|
253
|
+
var {
|
|
254
|
+
selectionStart = 0,
|
|
255
|
+
selectionEnd = 0
|
|
256
|
+
} = input.current;
|
|
257
|
+
if (selectionStart === null || selectionEnd === null) {
|
|
258
|
+
log.error('Selection key event on non-text input element', event.target);
|
|
259
|
+
return;
|
|
260
|
+
}
|
|
261
|
+
if (key === 'Enter') {
|
|
262
|
+
onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(event);
|
|
263
|
+
return;
|
|
264
|
+
}
|
|
265
|
+
if (key.startsWith('Arrow')) {
|
|
266
|
+
handleArrowKey(event);
|
|
267
|
+
return;
|
|
268
|
+
}
|
|
269
|
+
if (key === 'Delete' || key === 'Backspace') {
|
|
270
|
+
event.preventDefault();
|
|
271
|
+
event.stopPropagation();
|
|
272
|
+
|
|
273
|
+
// Deleting at the end of the value
|
|
274
|
+
if (selectionEnd >= trimTrailingMask(value, emptyMask).length) {
|
|
275
|
+
var newValue = value.substring(0,
|
|
276
|
+
// Delete whole selection or just the char before the cursor
|
|
277
|
+
selectionStart === selectionEnd ? selectionStart - 1 : selectionStart);
|
|
278
|
+
var trimmedValue = trimTrailingMask(newValue, emptyMask);
|
|
279
|
+
if (trimmedValue !== value) {
|
|
280
|
+
onChange(trimmedValue);
|
|
281
|
+
onSelect({
|
|
282
|
+
selectionStart: trimmedValue.length,
|
|
283
|
+
selectionEnd: trimmedValue.length,
|
|
284
|
+
selectionDirection: SELECTION_DIRECTION.NONE
|
|
285
|
+
});
|
|
286
|
+
}
|
|
287
|
+
return;
|
|
288
|
+
}
|
|
289
|
+
if (selectionStart !== selectionEnd) {
|
|
290
|
+
// Replace all non-masked characters with blanks, set selection to start
|
|
291
|
+
var _newValue = value.substring(0, selectionStart) + value.substring(selectionStart, selectionEnd).replace(/[a-zA-Z0-9]/g, FIXED_WIDTH_SPACE) + value.substring(selectionEnd);
|
|
292
|
+
log.debug('Range ', selectionStart, selectionEnd, 'deleted, setting value', _newValue);
|
|
293
|
+
onChange(_newValue);
|
|
294
|
+
onSelect({
|
|
295
|
+
selectionStart,
|
|
296
|
+
selectionEnd: selectionStart,
|
|
297
|
+
selectionDirection: SELECTION_DIRECTION.NONE
|
|
298
|
+
});
|
|
299
|
+
} else if (selectionStart > 0) {
|
|
300
|
+
for (var i = selectionStart - 1; i >= 0; i -= 1) {
|
|
301
|
+
// Only replace non placeholder text
|
|
302
|
+
var _newValue2 = value.substring(0, i) + value.substring(i, selectionStart).replace(/[a-zA-Z0-9]/g, FIXED_WIDTH_SPACE) + value.substring(selectionStart);
|
|
303
|
+
if (_newValue2 !== value) {
|
|
304
|
+
onChange(_newValue2);
|
|
305
|
+
onSelect({
|
|
306
|
+
selectionStart: i,
|
|
307
|
+
selectionEnd: i,
|
|
308
|
+
selectionDirection: SELECTION_DIRECTION.NONE
|
|
309
|
+
});
|
|
310
|
+
return;
|
|
311
|
+
}
|
|
312
|
+
}
|
|
313
|
+
}
|
|
314
|
+
return;
|
|
315
|
+
}
|
|
316
|
+
if (event.altKey || event.metaKey || event.ctrlKey || key.length > 1) {
|
|
317
|
+
return;
|
|
318
|
+
}
|
|
319
|
+
event.preventDefault();
|
|
320
|
+
event.stopPropagation();
|
|
321
|
+
|
|
322
|
+
// Get the different permutations of the character they entered, remove duplicates
|
|
323
|
+
var newChars = Array.from(new Set([key, key.toUpperCase(), key.toLowerCase()]));
|
|
324
|
+
for (var _i2 = 0; _i2 < newChars.length; _i2 += 1) {
|
|
325
|
+
var newChar = newChars[_i2];
|
|
326
|
+
|
|
327
|
+
// If they're typing an alphanumeric character, be smart and allow it to jump ahead
|
|
328
|
+
var maxReplaceIndex = /[a-zA-Z0-9]/g.test(newChar) ? examples[0].length - 1 : selectionStart;
|
|
329
|
+
for (var _replaceIndex = selectionStart; _replaceIndex <= maxReplaceIndex; _replaceIndex += 1) {
|
|
330
|
+
// Fill with the example chars if necessary
|
|
331
|
+
var filledValue = fillToLength(value, examples[0], _replaceIndex + 1);
|
|
332
|
+
var _newValue3 = getPreferredReplacementString(filledValue, _replaceIndex, newChar, selectionStart, selectionEnd);
|
|
333
|
+
if (isValid(_newValue3, _replaceIndex + 1)) {
|
|
334
|
+
var currentSegment = getSegment(_replaceIndex);
|
|
335
|
+
var newSelectionStart = _replaceIndex + 1;
|
|
336
|
+
var newSelection = {
|
|
337
|
+
selectionStart: newSelectionStart,
|
|
338
|
+
selectionEnd: newSelectionStart,
|
|
339
|
+
selectionDirection: SELECTION_DIRECTION.NONE
|
|
340
|
+
};
|
|
341
|
+
if (newSelectionStart >= currentSegment.selectionEnd) {
|
|
342
|
+
var nextSegmentSelection = nextSegment(_replaceIndex);
|
|
343
|
+
if (nextSegmentSelection.selectionStart !== currentSegment.selectionStart) {
|
|
344
|
+
newSelection = nextSegmentSelection;
|
|
345
|
+
}
|
|
346
|
+
}
|
|
347
|
+
log.debug('handleKeyDown', key, '=>', _newValue3, newSelection);
|
|
348
|
+
onChange(_newValue3);
|
|
349
|
+
onSelect(newSelection);
|
|
350
|
+
return;
|
|
351
|
+
}
|
|
352
|
+
}
|
|
353
|
+
}
|
|
354
|
+
}
|
|
355
|
+
|
|
356
|
+
// Need to use "text" type so we can apply a pattern and make selection properly
|
|
357
|
+
return /*#__PURE__*/React.createElement("input", {
|
|
358
|
+
ref: input,
|
|
359
|
+
className: classNames('form-control masked-input', className),
|
|
360
|
+
type: "text",
|
|
361
|
+
pattern: pattern,
|
|
362
|
+
placeholder: placeholder,
|
|
363
|
+
value: value,
|
|
364
|
+
onChange: () => undefined,
|
|
365
|
+
onKeyDown: handleKeyDown,
|
|
366
|
+
onSelect: handleSelect,
|
|
367
|
+
onSelectCapture: handleSelectCapture,
|
|
368
|
+
onFocus: onFocus,
|
|
369
|
+
onBlur: onBlur,
|
|
370
|
+
"data-testid": dataTestId
|
|
371
|
+
});
|
|
372
|
+
});
|
|
373
|
+
MaskedInput.defaultProps = {
|
|
374
|
+
className: '',
|
|
375
|
+
placeholder: undefined,
|
|
376
|
+
onChange() {
|
|
377
|
+
// no-op
|
|
378
|
+
},
|
|
379
|
+
onSelect() {
|
|
380
|
+
// no-op
|
|
381
|
+
},
|
|
382
|
+
getNextSegmentValue: (range, delta, segmentValue) => segmentValue,
|
|
383
|
+
getPreferredReplacementString: DEFAULT_GET_PREFERRED_REPLACEMENT_STRING,
|
|
384
|
+
selection: undefined,
|
|
385
|
+
onFocus() {
|
|
386
|
+
// no-op
|
|
387
|
+
},
|
|
388
|
+
onBlur() {
|
|
389
|
+
// no-op
|
|
390
|
+
},
|
|
391
|
+
'data-testid': undefined
|
|
392
|
+
};
|
|
393
|
+
export default MaskedInput;
|
|
394
|
+
//# sourceMappingURL=MaskedInput.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MaskedInput.js","names":["React","useMemo","useEffect","useCallback","classNames","Log","useForwardedRef","DEFAULT_GET_PREFERRED_REPLACEMENT_STRING","fillToLength","trimTrailingMask","log","module","SELECTION_DIRECTION","FORWARD","BACKWARD","NONE","FIXED_WIDTH_SPACE","MaskedInput","forwardRef","props","ref","className","example","getNextSegmentValue","range","delta","segmentValue","getPreferredReplacementString","onChange","onSelect","onSubmit","pattern","placeholder","selection","value","onFocus","onBlur","dataTestId","input","examples","Array","isArray","emptyMask","replace","setSelectedSegment","debug","selectionStart","selectionEnd","selectionDirection","current","setSelectionRange","getSegment","cursorPosition","testValue","length","i","test","charAt","fillValue","checkValue","exampleValue","filledValue","concat","substring","isValid","patternRegex","RegExp","nextSegment","position","currentSegment","nextPosition","previousSegment","previousPosition","nextSegmentValue","segment","newSegmentValue","newValue","handleSelect","event","target","error","debug2","nativeEvent","type","newSelection","handleSelectCapture","preventDefault","stopPropagation","handleArrowKey","key","handleKeyDown","startsWith","trimmedValue","altKey","metaKey","ctrlKey","newChars","from","Set","toUpperCase","toLowerCase","newChar","maxReplaceIndex","replaceIndex","newSelectionStart","nextSegmentSelection","undefined","defaultProps"],"sources":["../src/MaskedInput.tsx"],"sourcesContent":["import React, { useMemo, useEffect, useCallback, KeyboardEvent } from 'react';\nimport classNames from 'classnames';\nimport Log from '@deephaven/log';\nimport { useForwardedRef } from '@deephaven/react-hooks';\nimport {\n DEFAULT_GET_PREFERRED_REPLACEMENT_STRING,\n fillToLength,\n trimTrailingMask,\n} from './MaskedInputUtils';\nimport './MaskedInput.scss';\n\nconst log = Log.module('MaskedInput');\n\nconst SELECTION_DIRECTION = {\n FORWARD: 'forward',\n BACKWARD: 'backward',\n NONE: 'none',\n} as const;\n\n/**\n * Special space character that's the same size as tabular numbers\n * https://www.fileformat.info/info/unicode/char/2007/index.htm\n */\nconst FIXED_WIDTH_SPACE = '\\u2007';\n\nexport type SelectionSegment = {\n selectionStart: number;\n selectionEnd: number;\n selectionDirection?: typeof SELECTION_DIRECTION[keyof typeof SELECTION_DIRECTION];\n};\n\ntype MaskedInputProps = {\n /** An extra class name to add to the component */\n className?: string;\n /** The regex pattern this masked input must match */\n pattern: string;\n /** Input placeholder */\n placeholder?: string;\n /** The current value to display */\n value: string;\n /** One or more examples of valid values. Used when deciding if next keystroke is valid (as rest of the current value may be incomplete) */\n example: string | string[];\n /** The current selection to use for the input */\n selection?: SelectionSegment;\n /** Called when the value changes. Note the value may still be incomplete. */\n onChange?(value: string): void;\n /** Called when selection changes */\n onSelect?(segment: SelectionSegment): void;\n /** Called when enter is pressed */\n onSubmit?(event?: KeyboardEvent<HTMLInputElement>): void;\n /** Retrieve the next value for a provided segment */\n getNextSegmentValue?(\n segment: SelectionSegment,\n delta: number,\n segmentValue: string,\n value: string\n ): string;\n getPreferredReplacementString?(\n value: string,\n replaceIndex: number,\n replaceChar: string,\n selectionStart: number,\n selectionEnd: number\n ): string;\n onFocus?: React.FocusEventHandler;\n onBlur?: React.FocusEventHandler;\n\n 'data-testid'?: string;\n};\n\n/**\n * A masked input for entering data from a template.\n * Won't work by itself, must use within another component and handle updating the value/selection.\n */\n// Forward ref causes a false positive for display-name in eslint:\n// https://github.com/yannickcr/eslint-plugin-react/issues/2269\n// eslint-disable-next-line react/display-name\nconst MaskedInput = React.forwardRef<HTMLInputElement, MaskedInputProps>(\n (props: MaskedInputProps, ref) => {\n const {\n className,\n example,\n getNextSegmentValue = (range, delta, segmentValue) => segmentValue,\n getPreferredReplacementString = DEFAULT_GET_PREFERRED_REPLACEMENT_STRING,\n onChange = () => false,\n onSelect = () => false,\n onSubmit,\n pattern,\n placeholder,\n selection,\n value,\n onFocus = () => false,\n onBlur = () => false,\n 'data-testid': dataTestId,\n } = props;\n const input = useForwardedRef(ref);\n const examples = useMemo(\n () => (Array.isArray(example) ? example : [example]),\n [example]\n );\n const emptyMask = useMemo(\n () => examples[0].replace(/[a-zA-Z0-9]/g, FIXED_WIDTH_SPACE),\n [examples]\n );\n\n useEffect(\n function setSelectedSegment() {\n if (selection != null) {\n log.debug('setting selection...', selection);\n const {\n selectionStart,\n selectionEnd,\n selectionDirection,\n } = selection;\n input.current?.setSelectionRange(\n selectionStart,\n selectionEnd,\n selectionDirection\n );\n log.debug('selection set!');\n }\n },\n [selection, input]\n );\n\n /**\n * Returns the selection range for the segment at the given cursor position\n * @param cursorPosition The current position of the cursor\n */\n const getSegment = useCallback(\n (cursorPosition: number) => {\n let selectionStart = cursorPosition;\n let selectionEnd = cursorPosition;\n const testValue = examples.length > 0 ? examples[0] : value;\n\n for (let i = selectionStart - 1; i >= 0; i -= 1) {\n if (!/[a-zA-Z0-9]/g.test(testValue.charAt(i))) {\n break;\n }\n\n selectionStart = i;\n }\n\n for (let i = selectionEnd; i < testValue.length; i += 1) {\n if (!/[a-zA-Z0-9]/g.test(testValue.charAt(i))) {\n break;\n }\n\n selectionEnd = i + 1;\n }\n\n const selectionDirection =\n selectionStart === selectionEnd\n ? SELECTION_DIRECTION.NONE\n : SELECTION_DIRECTION.BACKWARD;\n\n return {\n selectionStart,\n selectionEnd,\n selectionDirection,\n };\n },\n [examples, value]\n );\n\n /**\n * Replaces all blank spaces and everything after the current cursor position with the example value\n * @param checkValue The value to check/fill in\n * @param exampleValue The example to fill in the value from\n * @param cursorPosition The cursor position\n * @returns The filled in value\n */\n function fillValue(\n checkValue: string,\n exampleValue: string,\n cursorPosition = checkValue.length\n ): string {\n let filledValue = '';\n for (let i = 0; i < cursorPosition; i += 1) {\n if (checkValue.charAt(i) !== FIXED_WIDTH_SPACE) {\n filledValue = filledValue.concat(checkValue[i]);\n } else {\n filledValue = filledValue.concat(exampleValue[i]);\n }\n }\n filledValue = filledValue.concat(exampleValue.substring(cursorPosition));\n\n return filledValue;\n }\n\n /**\n * Checks if a given `value` is valid up until the `cursorPosition`.\n * Uses the examples to build the rest of the string\n * @param checkValue The value to check validity of\n * @param cursorPosition The position of the cursor to check up to\n */\n function isValid(\n checkValue: string,\n cursorPosition = checkValue.length\n ): boolean {\n const patternRegex = new RegExp(`^${pattern}$`);\n if (patternRegex.test(checkValue)) {\n return true;\n }\n\n for (let i = 0; i < examples.length; i += 1) {\n const filledValue = fillValue(checkValue, examples[i], cursorPosition);\n if (patternRegex.test(filledValue)) {\n return true;\n }\n }\n return false;\n }\n\n /**\n * Returns the next segment after the given position\n * @param position The cursor position to start at\n * @returns The new selection range\n */\n function nextSegment(position: number): SelectionSegment {\n const currentSegment = getSegment(position);\n const nextPosition = currentSegment.selectionEnd + 1;\n if (nextPosition >= value.length) {\n return currentSegment;\n }\n\n return getSegment(nextPosition);\n }\n\n /**\n * Returns the previous segment before the given position\n * @param position The cursor position to start at\n * @returns The new selection range\n */\n function previousSegment(position: number): SelectionSegment {\n const currentSegment = getSegment(position);\n const previousPosition = currentSegment.selectionStart - 1;\n if (previousPosition <= 0) {\n return currentSegment;\n }\n\n return getSegment(previousPosition);\n }\n\n function nextSegmentValue(position: number, delta: number): void {\n const segment = getSegment(position);\n const segmentValue = value.substring(\n segment.selectionStart,\n segment.selectionEnd\n );\n const newSegmentValue = getNextSegmentValue(\n segment,\n delta,\n segmentValue,\n value\n );\n const newValue =\n value.substring(0, segment.selectionStart) +\n newSegmentValue +\n value.substring(segment.selectionEnd);\n if (isValid(newValue, segment.selectionEnd)) {\n onChange(newValue);\n onSelect(segment);\n }\n }\n\n const handleSelect = useCallback(\n (event: React.UIEvent<HTMLInputElement>) => {\n const {\n selectionStart = 0,\n selectionEnd = 0,\n selectionDirection = 'none',\n } = event.target as HTMLInputElement;\n\n if (\n selectionStart === null ||\n selectionEnd === null ||\n selectionDirection === null\n ) {\n log.error(\n 'Selection attempted on non-text input element',\n event.target\n );\n return;\n }\n\n log.debug2(\n 'handleSelect',\n selectionStart,\n selectionEnd,\n selectionDirection\n );\n if (\n selection != null &&\n selectionStart === selection.selectionStart &&\n selectionEnd === selection.selectionEnd\n ) {\n return;\n }\n if (\n selection != null &&\n selectionStart === value.length &&\n selectionEnd === value.length &&\n event.nativeEvent.type !== 'mouseup'\n ) {\n // React triggers onSelect event with the cursor at the end of the input content\n // when the component is rendered at a different location in the DOM,\n // i.e. when start/end times switch places in the TimeSlider.\n // Ignore this event and reset the selection to its previous state.\n onSelect({ ...selection });\n return;\n }\n if (selectionStart === selectionEnd) {\n const newSelection = getSegment(selectionStart);\n log.debug(\n 'Selection segment from ',\n selectionStart,\n selectionEnd,\n '=>',\n newSelection\n );\n onSelect(newSelection);\n } else {\n onSelect({ selectionStart, selectionEnd, selectionDirection });\n }\n },\n [getSegment, onSelect, selection, value]\n );\n\n const handleSelectCapture = useCallback(\n (event: React.UIEvent<HTMLInputElement>) => {\n if (!input.current) {\n return;\n }\n log.debug('handleSelectCapture', event);\n const selectionStart = input.current.selectionStart ?? 0;\n if (\n selectionStart === value.length &&\n selection != null &&\n selectionStart !== selection.selectionStart\n ) {\n event.preventDefault();\n event.stopPropagation();\n }\n },\n [input, selection, value]\n );\n\n function handleArrowKey(event: React.KeyboardEvent<HTMLInputElement>) {\n event.preventDefault();\n event.stopPropagation();\n\n if (!input.current) {\n return;\n }\n\n const { key } = event;\n const { selectionStart = 0, selectionEnd = 0 } = input.current;\n if (selectionStart === null || selectionEnd === null) {\n log.error(\n 'Selection arrow nvaigation attempted on non-text input element',\n event.target\n );\n return;\n }\n\n if (key === 'ArrowLeft') {\n onSelect(previousSegment(selectionStart));\n } else if (key === 'ArrowRight') {\n onSelect(nextSegment(selectionEnd));\n } else if (key === 'ArrowUp') {\n nextSegmentValue(selectionStart, -1);\n } else if (key === 'ArrowDown') {\n nextSegmentValue(selectionStart, 1);\n }\n }\n\n function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {\n if (!input.current) {\n return;\n }\n log.debug('handleKeyDown', event);\n const { key } = event;\n const { selectionStart = 0, selectionEnd = 0 } = input.current;\n if (selectionStart === null || selectionEnd === null) {\n log.error(\n 'Selection key event on non-text input element',\n event.target\n );\n return;\n }\n if (key === 'Enter') {\n onSubmit?.(event);\n return;\n }\n if (key.startsWith('Arrow')) {\n handleArrowKey(event);\n return;\n }\n\n if (key === 'Delete' || key === 'Backspace') {\n event.preventDefault();\n event.stopPropagation();\n\n // Deleting at the end of the value\n if (selectionEnd >= trimTrailingMask(value, emptyMask).length) {\n const newValue = value.substring(\n 0,\n // Delete whole selection or just the char before the cursor\n selectionStart === selectionEnd\n ? selectionStart - 1\n : selectionStart\n );\n const trimmedValue = trimTrailingMask(newValue, emptyMask);\n if (trimmedValue !== value) {\n onChange(trimmedValue);\n onSelect({\n selectionStart: trimmedValue.length,\n selectionEnd: trimmedValue.length,\n selectionDirection: SELECTION_DIRECTION.NONE,\n });\n }\n return;\n }\n\n if (selectionStart !== selectionEnd) {\n // Replace all non-masked characters with blanks, set selection to start\n const newValue =\n value.substring(0, selectionStart) +\n value\n .substring(selectionStart, selectionEnd)\n .replace(/[a-zA-Z0-9]/g, FIXED_WIDTH_SPACE) +\n value.substring(selectionEnd);\n log.debug(\n 'Range ',\n selectionStart,\n selectionEnd,\n 'deleted, setting value',\n newValue\n );\n\n onChange(newValue);\n onSelect({\n selectionStart,\n selectionEnd: selectionStart,\n selectionDirection: SELECTION_DIRECTION.NONE,\n });\n } else if (selectionStart > 0) {\n for (let i = selectionStart - 1; i >= 0; i -= 1) {\n // Only replace non placeholder text\n const newValue =\n value.substring(0, i) +\n value\n .substring(i, selectionStart)\n .replace(/[a-zA-Z0-9]/g, FIXED_WIDTH_SPACE) +\n value.substring(selectionStart);\n\n if (newValue !== value) {\n onChange(newValue);\n onSelect({\n selectionStart: i,\n selectionEnd: i,\n selectionDirection: SELECTION_DIRECTION.NONE,\n });\n return;\n }\n }\n }\n\n return;\n }\n\n if (event.altKey || event.metaKey || event.ctrlKey || key.length > 1) {\n return;\n }\n\n event.preventDefault();\n event.stopPropagation();\n\n // Get the different permutations of the character they entered, remove duplicates\n const newChars = Array.from(\n new Set([key, key.toUpperCase(), key.toLowerCase()])\n );\n for (let i = 0; i < newChars.length; i += 1) {\n const newChar = newChars[i];\n\n // If they're typing an alphanumeric character, be smart and allow it to jump ahead\n const maxReplaceIndex = /[a-zA-Z0-9]/g.test(newChar)\n ? examples[0].length - 1\n : selectionStart;\n for (\n let replaceIndex = selectionStart;\n replaceIndex <= maxReplaceIndex;\n replaceIndex += 1\n ) {\n // Fill with the example chars if necessary\n const filledValue = fillToLength(\n value,\n examples[0],\n replaceIndex + 1\n );\n const newValue = getPreferredReplacementString(\n filledValue,\n replaceIndex,\n newChar,\n selectionStart,\n selectionEnd\n );\n if (isValid(newValue, replaceIndex + 1)) {\n const currentSegment = getSegment(replaceIndex);\n const newSelectionStart = replaceIndex + 1;\n let newSelection: SelectionSegment = {\n selectionStart: newSelectionStart,\n selectionEnd: newSelectionStart,\n selectionDirection: SELECTION_DIRECTION.NONE,\n };\n if (newSelectionStart >= currentSegment.selectionEnd) {\n const nextSegmentSelection = nextSegment(replaceIndex);\n if (\n nextSegmentSelection.selectionStart !==\n currentSegment.selectionStart\n ) {\n newSelection = nextSegmentSelection;\n }\n }\n log.debug('handleKeyDown', key, '=>', newValue, newSelection);\n onChange(newValue);\n onSelect(newSelection);\n return;\n }\n }\n }\n }\n\n // Need to use \"text\" type so we can apply a pattern and make selection properly\n return (\n <input\n ref={input}\n className={classNames('form-control masked-input', className)}\n type=\"text\"\n pattern={pattern}\n placeholder={placeholder}\n value={value}\n onChange={() => undefined}\n onKeyDown={handleKeyDown}\n onSelect={handleSelect}\n onSelectCapture={handleSelectCapture}\n onFocus={onFocus}\n onBlur={onBlur}\n data-testid={dataTestId}\n />\n );\n }\n);\n\nMaskedInput.defaultProps = {\n className: '',\n placeholder: undefined,\n onChange(): void {\n // no-op\n },\n onSelect(): void {\n // no-op\n },\n getNextSegmentValue: (range, delta, segmentValue) => segmentValue,\n getPreferredReplacementString: DEFAULT_GET_PREFERRED_REPLACEMENT_STRING,\n selection: undefined,\n onFocus(): void {\n // no-op\n },\n onBlur(): void {\n // no-op\n },\n 'data-testid': undefined,\n};\n\nexport default MaskedInput;\n"],"mappings":"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"}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
/* eslint-disable import/prefer-default-export */
|
|
2
|
+
export function DEFAULT_GET_PREFERRED_REPLACEMENT_STRING(value, replaceIndex, newChar) {
|
|
3
|
+
return value.substring(0, replaceIndex) + newChar + value.substring(replaceIndex + 1);
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* Fill the string on the right side with the example value to the given length
|
|
8
|
+
* @param checkValue Initial string to pad
|
|
9
|
+
* @param exampleValue Example value
|
|
10
|
+
* @param length Target length
|
|
11
|
+
* @returns String padded with the given example value
|
|
12
|
+
*/
|
|
13
|
+
export function fillToLength(checkValue, exampleValue, length) {
|
|
14
|
+
return checkValue.length < length ? "".concat(checkValue).concat(exampleValue.substring(checkValue.length, length)) : checkValue;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
/**
|
|
18
|
+
* Trim all characters matching the empty mask on the right side of the given value
|
|
19
|
+
* @param value String to trim
|
|
20
|
+
* @param emptyMask Empty mask
|
|
21
|
+
* @returns Trimmed string
|
|
22
|
+
*/
|
|
23
|
+
export function trimTrailingMask(value, emptyMask) {
|
|
24
|
+
var {
|
|
25
|
+
length
|
|
26
|
+
} = value;
|
|
27
|
+
for (var i = value.length - 1; i >= 0; i -= 1) {
|
|
28
|
+
if (emptyMask[i] === value[i]) {
|
|
29
|
+
length = i;
|
|
30
|
+
} else {
|
|
31
|
+
break;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
return value.substring(0, length);
|
|
35
|
+
}
|
|
36
|
+
//# sourceMappingURL=MaskedInputUtils.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MaskedInputUtils.js","names":["DEFAULT_GET_PREFERRED_REPLACEMENT_STRING","value","replaceIndex","newChar","substring","fillToLength","checkValue","exampleValue","length","trimTrailingMask","emptyMask","i"],"sources":["../src/MaskedInputUtils.ts"],"sourcesContent":["/* eslint-disable import/prefer-default-export */\nexport function DEFAULT_GET_PREFERRED_REPLACEMENT_STRING(\n value: string,\n replaceIndex: number,\n newChar: string\n): string {\n return (\n value.substring(0, replaceIndex) +\n newChar +\n value.substring(replaceIndex + 1)\n );\n}\n\n/**\n * Fill the string on the right side with the example value to the given length\n * @param checkValue Initial string to pad\n * @param exampleValue Example value\n * @param length Target length\n * @returns String padded with the given example value\n */\nexport function fillToLength(\n checkValue: string,\n exampleValue: string,\n length: number\n): string {\n return checkValue.length < length\n ? `${checkValue}${exampleValue.substring(checkValue.length, length)}`\n : checkValue;\n}\n\n/**\n * Trim all characters matching the empty mask on the right side of the given value\n * @param value String to trim\n * @param emptyMask Empty mask\n * @returns Trimmed string\n */\nexport function trimTrailingMask(value: string, emptyMask: string): string {\n let { length } = value;\n for (let i = value.length - 1; i >= 0; i -= 1) {\n if (emptyMask[i] === value[i]) {\n length = i;\n } else {\n break;\n }\n }\n return value.substring(0, length);\n}\n"],"mappings":"AAAA;AACA,OAAO,SAASA,wCAAwC,CACtDC,KAAa,EACbC,YAAoB,EACpBC,OAAe,EACP;EACR,OACEF,KAAK,CAACG,SAAS,CAAC,CAAC,EAAEF,YAAY,CAAC,GAChCC,OAAO,GACPF,KAAK,CAACG,SAAS,CAACF,YAAY,GAAG,CAAC,CAAC;AAErC;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASG,YAAY,CAC1BC,UAAkB,EAClBC,YAAoB,EACpBC,MAAc,EACN;EACR,OAAOF,UAAU,CAACE,MAAM,GAAGA,MAAM,aAC1BF,UAAU,SAAGC,YAAY,CAACH,SAAS,CAACE,UAAU,CAACE,MAAM,EAAEA,MAAM,CAAC,IACjEF,UAAU;AAChB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASG,gBAAgB,CAACR,KAAa,EAAES,SAAiB,EAAU;EACzE,IAAI;IAAEF;EAAO,CAAC,GAAGP,KAAK;EACtB,KAAK,IAAIU,CAAC,GAAGV,KAAK,CAACO,MAAM,GAAG,CAAC,EAAEG,CAAC,IAAI,CAAC,EAAEA,CAAC,IAAI,CAAC,EAAE;IAC7C,IAAID,SAAS,CAACC,CAAC,CAAC,KAAKV,KAAK,CAACU,CAAC,CAAC,EAAE;MAC7BH,MAAM,GAAGG,CAAC;IACZ,CAAC,MAAM;MACL;IACF;EACF;EACA,OAAOV,KAAK,CAACG,SAAS,CAAC,CAAC,EAAEI,MAAM,CAAC;AACnC"}
|
package/dist/Option.js
ADDED
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
function Option(_ref) {
|
|
3
|
+
var {
|
|
4
|
+
children,
|
|
5
|
+
disabled,
|
|
6
|
+
value,
|
|
7
|
+
'data-testid': dataTestId
|
|
8
|
+
} = _ref;
|
|
9
|
+
return /*#__PURE__*/React.createElement("option", {
|
|
10
|
+
value: value,
|
|
11
|
+
disabled: disabled,
|
|
12
|
+
"data-testid": dataTestId
|
|
13
|
+
}, children);
|
|
14
|
+
}
|
|
15
|
+
export default Option;
|
|
16
|
+
//# sourceMappingURL=Option.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Option.js","names":["React","Option","children","disabled","value","dataTestId"],"sources":["../src/Option.tsx"],"sourcesContent":["import React from 'react';\n\nexport type OptionProps = {\n children: React.ReactNode;\n disabled?: boolean;\n value: string;\n 'data-testid'?: string;\n};\n\nfunction Option({\n children,\n disabled,\n value,\n 'data-testid': dataTestId,\n}: OptionProps): JSX.Element {\n return (\n <option value={value} disabled={disabled} data-testid={dataTestId}>\n {children}\n </option>\n );\n}\n\nexport default Option;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AASzB,SAASC,MAAM,OAKc;EAAA,IALb;IACdC,QAAQ;IACRC,QAAQ;IACRC,KAAK;IACL,aAAa,EAAEC;EACJ,CAAC;EACZ,oBACE;IAAQ,KAAK,EAAED,KAAM;IAAC,QAAQ,EAAED,QAAS;IAAC,eAAaE;EAAW,GAC/DH,QAAQ,CACF;AAEb;AAEA,eAAeD,MAAM"}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import React, { useState } from 'react';
|
|
2
|
+
import shortid from 'shortid';
|
|
3
|
+
/**
|
|
4
|
+
* A group of radio buttons. Use with RadioItems to populate, eg.
|
|
5
|
+
* <RadioGroup>
|
|
6
|
+
* <RadioItem .../>
|
|
7
|
+
* <RadioItem .../>
|
|
8
|
+
* </RadioGroup>
|
|
9
|
+
*/
|
|
10
|
+
function RadioGroup(props) {
|
|
11
|
+
var {
|
|
12
|
+
children,
|
|
13
|
+
disabled = false,
|
|
14
|
+
name: propsName,
|
|
15
|
+
onChange,
|
|
16
|
+
value = '',
|
|
17
|
+
'data-testid': dataTestId
|
|
18
|
+
} = props;
|
|
19
|
+
var [name] = useState(propsName !== null && propsName !== void 0 ? propsName : shortid());
|
|
20
|
+
|
|
21
|
+
// Need to use "text" type so we can apply a pattern and make selection properly
|
|
22
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, React.Children.map(children, child => {
|
|
23
|
+
var _child$props$onChange, _child$props$disabled;
|
|
24
|
+
return child ? /*#__PURE__*/React.cloneElement(child, {
|
|
25
|
+
name,
|
|
26
|
+
onChange: (_child$props$onChange = child.props.onChange) !== null && _child$props$onChange !== void 0 ? _child$props$onChange : onChange,
|
|
27
|
+
checked: value === child.props.value,
|
|
28
|
+
disabled: (_child$props$disabled = child.props.disabled) !== null && _child$props$disabled !== void 0 ? _child$props$disabled : disabled,
|
|
29
|
+
'data-testid': dataTestId
|
|
30
|
+
}) : null;
|
|
31
|
+
}));
|
|
32
|
+
}
|
|
33
|
+
export default RadioGroup;
|
|
34
|
+
//# sourceMappingURL=RadioGroup.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"RadioGroup.js","names":["React","useState","shortid","RadioGroup","props","children","disabled","name","propsName","onChange","value","dataTestId","Children","map","child","cloneElement","checked"],"sources":["../src/RadioGroup.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport shortid from 'shortid';\n\ntype RadioGroupProps = {\n /** The radio items to populate this radio. Should be of type RadioItem. */\n children?: React.ReactElement | React.ReactElement[];\n\n /** The name to use for the radio items. If not specified, a name is automatically generated */\n name?: string;\n\n /** Triggered when a radio button is changed */\n onChange: React.ChangeEventHandler<HTMLInputElement>;\n\n /** The currently selected value. Will automatically set the `checked` attribute of the RadioItem. */\n value?: string;\n\n disabled?: boolean;\n 'data-testid'?: string;\n};\n\n/**\n * A group of radio buttons. Use with RadioItems to populate, eg.\n * <RadioGroup>\n * <RadioItem .../>\n * <RadioItem .../>\n * </RadioGroup>\n */\nfunction RadioGroup(props: RadioGroupProps): JSX.Element {\n const {\n children,\n disabled = false,\n name: propsName,\n onChange,\n value = '',\n 'data-testid': dataTestId,\n } = props;\n const [name] = useState(propsName ?? shortid());\n\n // Need to use \"text\" type so we can apply a pattern and make selection properly\n return (\n <>\n {React.Children.map(children, child =>\n child\n ? React.cloneElement(child, {\n name,\n onChange: child.props.onChange ?? onChange,\n checked: value === child.props.value,\n disabled: child.props.disabled ?? disabled,\n 'data-testid': dataTestId,\n })\n : null\n )}\n </>\n );\n}\n\nexport default RadioGroup;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,OAAOC,OAAO,MAAM,SAAS;AAmB7B;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,UAAU,CAACC,KAAsB,EAAe;EACvD,IAAM;IACJC,QAAQ;IACRC,QAAQ,GAAG,KAAK;IAChBC,IAAI,EAAEC,SAAS;IACfC,QAAQ;IACRC,KAAK,GAAG,EAAE;IACV,aAAa,EAAEC;EACjB,CAAC,GAAGP,KAAK;EACT,IAAM,CAACG,IAAI,CAAC,GAAGN,QAAQ,CAACO,SAAS,aAATA,SAAS,cAATA,SAAS,GAAIN,OAAO,EAAE,CAAC;;EAE/C;EACA,oBACE,0CACGF,KAAK,CAACY,QAAQ,CAACC,GAAG,CAACR,QAAQ,EAAES,KAAK;IAAA;IAAA,OACjCA,KAAK,gBACDd,KAAK,CAACe,YAAY,CAACD,KAAK,EAAE;MACxBP,IAAI;MACJE,QAAQ,2BAAEK,KAAK,CAACV,KAAK,CAACK,QAAQ,yEAAIA,QAAQ;MAC1CO,OAAO,EAAEN,KAAK,KAAKI,KAAK,CAACV,KAAK,CAACM,KAAK;MACpCJ,QAAQ,2BAAEQ,KAAK,CAACV,KAAK,CAACE,QAAQ,yEAAIA,QAAQ;MAC1C,aAAa,EAAEK;IACjB,CAAC,CAAC,GACF,IAAI;EAAA,EACT,CACA;AAEP;AAEA,eAAeR,UAAU"}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import React, { useState } from 'react';
|
|
2
|
+
import classNames from 'classnames';
|
|
3
|
+
import shortid from 'shortid';
|
|
4
|
+
/**
|
|
5
|
+
* A RadioItem to be used within the Radio component.
|
|
6
|
+
*/
|
|
7
|
+
var RadioItem = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
8
|
+
var {
|
|
9
|
+
checked,
|
|
10
|
+
children,
|
|
11
|
+
className = '',
|
|
12
|
+
disabled = false,
|
|
13
|
+
inputClassName = '',
|
|
14
|
+
isInvalid = false,
|
|
15
|
+
labelClassName = '',
|
|
16
|
+
name,
|
|
17
|
+
onChange,
|
|
18
|
+
value,
|
|
19
|
+
'data-testid': dataTestId
|
|
20
|
+
} = props;
|
|
21
|
+
var [id] = useState(shortid());
|
|
22
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
23
|
+
className: classNames('custom-control custom-radio', className)
|
|
24
|
+
}, /*#__PURE__*/React.createElement("input", {
|
|
25
|
+
type: "radio",
|
|
26
|
+
id: id,
|
|
27
|
+
"data-testid": dataTestId,
|
|
28
|
+
name: name,
|
|
29
|
+
ref: ref,
|
|
30
|
+
className: classNames('custom-control-input', inputClassName, {
|
|
31
|
+
'is-invalid': isInvalid
|
|
32
|
+
}),
|
|
33
|
+
checked: checked,
|
|
34
|
+
disabled: disabled,
|
|
35
|
+
value: value,
|
|
36
|
+
onChange: onChange
|
|
37
|
+
}), /*#__PURE__*/React.createElement("label", {
|
|
38
|
+
className: classNames('custom-control-label', labelClassName),
|
|
39
|
+
htmlFor: id
|
|
40
|
+
}, children));
|
|
41
|
+
});
|
|
42
|
+
RadioItem.displayName = 'RadioItem';
|
|
43
|
+
RadioItem.defaultProps = {
|
|
44
|
+
checked: undefined,
|
|
45
|
+
className: '',
|
|
46
|
+
disabled: false,
|
|
47
|
+
inputClassName: '',
|
|
48
|
+
isInvalid: false,
|
|
49
|
+
labelClassName: '',
|
|
50
|
+
name: undefined,
|
|
51
|
+
onChange: undefined,
|
|
52
|
+
'data-testid': undefined
|
|
53
|
+
};
|
|
54
|
+
export default RadioItem;
|
|
55
|
+
//# sourceMappingURL=RadioItem.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"RadioItem.js","names":["React","useState","classNames","shortid","RadioItem","forwardRef","props","ref","checked","children","className","disabled","inputClassName","isInvalid","labelClassName","name","onChange","value","dataTestId","id","displayName","defaultProps","undefined"],"sources":["../src/RadioItem.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport classNames from 'classnames';\nimport shortid from 'shortid';\n\ntype RadioItemProps = {\n /** Whether this value is currently checked or not */\n checked?: boolean;\n\n /** The node/text to put in the label of this radio item */\n children: React.ReactNode;\n\n /** An extra class name to add to the outer div component */\n className?: string;\n\n /** An extra class for disabling the radio button component */\n disabled?: boolean;\n\n /** An extra class name for the input component */\n inputClassName?: string;\n\n /** The value is invalid, style to show it's invalid */\n isInvalid?: boolean;\n\n /** An extra class name for the label component */\n labelClassName?: string;\n\n /** The name for this RadioItem. Should be specified by the parent Radio component */\n name?: string;\n\n /** Triggered when the input is checked/unchecked. Provided by the parent Radio component. */\n onChange?: React.ChangeEventHandler<HTMLInputElement>;\n\n /** The value to associate with this radio item */\n value: string;\n\n /** An id used for test */\n 'data-testid'?: string;\n};\n\n/**\n * A RadioItem to be used within the Radio component.\n */\nconst RadioItem = React.forwardRef<HTMLInputElement, RadioItemProps>(\n (props: RadioItemProps, ref) => {\n const {\n checked,\n children,\n className = '',\n disabled = false,\n inputClassName = '',\n isInvalid = false,\n labelClassName = '',\n name,\n onChange,\n value,\n 'data-testid': dataTestId,\n } = props;\n\n const [id] = useState(shortid());\n\n return (\n <div className={classNames('custom-control custom-radio', className)}>\n <input\n type=\"radio\"\n id={id}\n data-testid={dataTestId}\n name={name}\n ref={ref}\n className={classNames('custom-control-input', inputClassName, {\n 'is-invalid': isInvalid,\n })}\n checked={checked}\n disabled={disabled}\n value={value}\n onChange={onChange}\n />\n <label\n className={classNames('custom-control-label', labelClassName)}\n htmlFor={id}\n >\n {children}\n </label>\n </div>\n );\n }\n);\n\nRadioItem.displayName = 'RadioItem';\n\nRadioItem.defaultProps = {\n checked: undefined,\n className: '',\n disabled: false,\n inputClassName: '',\n isInvalid: false,\n labelClassName: '',\n name: undefined,\n onChange: undefined,\n 'data-testid': undefined,\n};\n\nexport default RadioItem;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,OAAO,MAAM,SAAS;AAqC7B;AACA;AACA;AACA,IAAMC,SAAS,gBAAGJ,KAAK,CAACK,UAAU,CAChC,CAACC,KAAqB,EAAEC,GAAG,KAAK;EAC9B,IAAM;IACJC,OAAO;IACPC,QAAQ;IACRC,SAAS,GAAG,EAAE;IACdC,QAAQ,GAAG,KAAK;IAChBC,cAAc,GAAG,EAAE;IACnBC,SAAS,GAAG,KAAK;IACjBC,cAAc,GAAG,EAAE;IACnBC,IAAI;IACJC,QAAQ;IACRC,KAAK;IACL,aAAa,EAAEC;EACjB,CAAC,GAAGZ,KAAK;EAET,IAAM,CAACa,EAAE,CAAC,GAAGlB,QAAQ,CAACE,OAAO,EAAE,CAAC;EAEhC,oBACE;IAAK,SAAS,EAAED,UAAU,CAAC,6BAA6B,EAAEQ,SAAS;EAAE,gBACnE;IACE,IAAI,EAAC,OAAO;IACZ,EAAE,EAAES,EAAG;IACP,eAAaD,UAAW;IACxB,IAAI,EAAEH,IAAK;IACX,GAAG,EAAER,GAAI;IACT,SAAS,EAAEL,UAAU,CAAC,sBAAsB,EAAEU,cAAc,EAAE;MAC5D,YAAY,EAAEC;IAChB,CAAC,CAAE;IACH,OAAO,EAAEL,OAAQ;IACjB,QAAQ,EAAEG,QAAS;IACnB,KAAK,EAAEM,KAAM;IACb,QAAQ,EAAED;EAAS,EACnB,eACF;IACE,SAAS,EAAEd,UAAU,CAAC,sBAAsB,EAAEY,cAAc,CAAE;IAC9D,OAAO,EAAEK;EAAG,GAEXV,QAAQ,CACH,CACJ;AAEV,CAAC,CACF;AAEDL,SAAS,CAACgB,WAAW,GAAG,WAAW;AAEnChB,SAAS,CAACiB,YAAY,GAAG;EACvBb,OAAO,EAAEc,SAAS;EAClBZ,SAAS,EAAE,EAAE;EACbC,QAAQ,EAAE,KAAK;EACfC,cAAc,EAAE,EAAE;EAClBC,SAAS,EAAE,KAAK;EAChBC,cAAc,EAAE,EAAE;EAClBC,IAAI,EAAEO,SAAS;EACfN,QAAQ,EAAEM,SAAS;EACnB,aAAa,EAAEA;AACjB,CAAC;AAED,eAAelB,SAAS"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
/* stylelint-disable scss/at-import-no-partial-leading-underscore */
|
|
2
|
+
.random-area-plot-animation-container {
|
|
3
|
+
position: absolute;
|
|
4
|
+
top: 0;
|
|
5
|
+
bottom: 0;
|
|
6
|
+
height: 100%;
|
|
7
|
+
width: 100%;
|
|
8
|
+
overflow: hidden;
|
|
9
|
+
}
|
|
10
|
+
.random-area-plot-animation-container canvas {
|
|
11
|
+
transition: all 0.15s;
|
|
12
|
+
display: block;
|
|
13
|
+
}
|
|
14
|
+
.random-area-plot-animation-container canvas.shade {
|
|
15
|
+
filter: grayscale(100%) brightness(90%);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
/*# sourceMappingURL=RandomAreaPlotAnimation.css.map */
|