@deephaven/components 0.22.3-beta.18 → 0.22.3-beta.21
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.js +12 -85
- package/dist/AutoCompleteInput.js.map +1 -1
- package/dist/AutoResizeTextarea.d.ts +5 -5
- package/dist/AutoResizeTextarea.d.ts.map +1 -1
- package/dist/AutoResizeTextarea.js +8 -23
- package/dist/AutoResizeTextarea.js.map +1 -1
- package/dist/BasicModal.d.ts +28 -1
- package/dist/BasicModal.d.ts.map +1 -1
- package/dist/BasicModal.js +2 -8
- package/dist/BasicModal.js.map +1 -1
- package/dist/Button.js +8 -34
- package/dist/Button.js.map +1 -1
- package/dist/ButtonGroup.d.ts +6 -6
- package/dist/ButtonGroup.d.ts.map +1 -1
- package/dist/ButtonGroup.js +2 -4
- package/dist/ButtonGroup.js.map +1 -1
- package/dist/ButtonOld.js.map +1 -1
- package/dist/CardFlip.d.ts +1 -1
- package/dist/CardFlip.d.ts.map +1 -1
- package/dist/CardFlip.js +2 -7
- package/dist/CardFlip.js.map +1 -1
- package/dist/Checkbox.js +3 -14
- package/dist/Checkbox.js.map +1 -1
- package/dist/Collapse.js +0 -15
- package/dist/Collapse.js.map +1 -1
- package/dist/ComboBox.js +4 -83
- package/dist/ComboBox.js.map +1 -1
- package/dist/CopyButton.d.ts +1 -1
- package/dist/CopyButton.d.ts.map +1 -1
- package/dist/CopyButton.js +2 -4
- package/dist/CopyButton.js.map +1 -1
- package/dist/CustomTimeSelect.js +2 -86
- package/dist/CustomTimeSelect.js.map +1 -1
- package/dist/DateInput.js.map +1 -1
- package/dist/DateInputUtils.js +0 -7
- package/dist/DateInputUtils.js.map +1 -1
- package/dist/DateTimeInput.js +7 -10
- package/dist/DateTimeInput.js.map +1 -1
- package/dist/DebouncedSearchInput.js +0 -14
- package/dist/DebouncedSearchInput.js.map +1 -1
- package/dist/DragUtils.js +4 -16
- package/dist/DragUtils.js.map +1 -1
- package/dist/DraggableItemList.d.ts.map +1 -1
- package/dist/DraggableItemList.js +22 -44
- package/dist/DraggableItemList.js.map +1 -1
- package/dist/EditableItemList.d.ts +1 -1
- package/dist/EditableItemList.d.ts.map +1 -1
- package/dist/EditableItemList.js +2 -6
- package/dist/EditableItemList.js.map +1 -1
- package/dist/HierarchicalCheckboxMenu.js +6 -28
- package/dist/HierarchicalCheckboxMenu.js.map +1 -1
- package/dist/ItemList.d.ts.map +1 -1
- package/dist/ItemList.js +22 -115
- package/dist/ItemList.js.map +1 -1
- package/dist/ItemListItem.d.ts +0 -1
- package/dist/ItemListItem.d.ts.map +1 -1
- package/dist/ItemListItem.js +26 -50
- package/dist/ItemListItem.js.map +1 -1
- package/dist/LoadingOverlay.d.ts +1 -1
- package/dist/LoadingOverlay.d.ts.map +1 -1
- package/dist/LoadingOverlay.js +3 -5
- package/dist/LoadingOverlay.js.map +1 -1
- package/dist/LoadingSpinner.d.ts +1 -1
- package/dist/LoadingSpinner.d.ts.map +1 -1
- package/dist/LoadingSpinner.js +2 -4
- package/dist/LoadingSpinner.js.map +1 -1
- package/dist/MaskedInput.js +26 -85
- package/dist/MaskedInput.js.map +1 -1
- package/dist/Option.d.ts +1 -1
- package/dist/Option.d.ts.map +1 -1
- package/dist/Option.js +2 -4
- package/dist/Option.js.map +1 -1
- package/dist/RadioGroup.d.ts +1 -1
- package/dist/RadioGroup.d.ts.map +1 -1
- package/dist/RadioGroup.js +4 -6
- package/dist/RadioGroup.js.map +1 -1
- package/dist/RadioItem.js +0 -1
- package/dist/RadioItem.js.map +1 -1
- package/dist/SearchInput.js +2 -13
- package/dist/SearchInput.js.map +1 -1
- package/dist/Select.d.ts +1 -1
- package/dist/Select.d.ts.map +1 -1
- package/dist/Select.js +2 -4
- package/dist/Select.js.map +1 -1
- package/dist/SelectValueList.js +0 -28
- package/dist/SelectValueList.js.map +1 -1
- package/dist/SocketedButton.js.map +1 -1
- package/dist/ThemeExport.js +0 -4
- package/dist/ThemeExport.js.map +1 -1
- package/dist/TimeInput.js +2 -12
- package/dist/TimeInput.js.map +1 -1
- package/dist/TimeSlider.d.ts +1 -1
- package/dist/TimeSlider.d.ts.map +1 -1
- package/dist/TimeSlider.js +19 -33
- package/dist/TimeSlider.js.map +1 -1
- package/dist/ToastNotification.d.ts +4 -4
- package/dist/ToastNotification.d.ts.map +1 -1
- package/dist/ToastNotification.js +2 -4
- package/dist/ToastNotification.js.map +1 -1
- package/dist/UISwitch.d.ts +1 -1
- package/dist/UISwitch.d.ts.map +1 -1
- package/dist/UISwitch.js +2 -4
- package/dist/UISwitch.js.map +1 -1
- package/dist/ValidateLabelInput.d.ts.map +1 -1
- package/dist/ValidateLabelInput.js +3 -3
- package/dist/ValidateLabelInput.js.map +1 -1
- package/dist/context-actions/ContextActionUtils.js +9 -40
- package/dist/context-actions/ContextActionUtils.js.map +1 -1
- package/dist/context-actions/ContextActions.js +1 -34
- package/dist/context-actions/ContextActions.js.map +1 -1
- package/dist/context-actions/ContextMenu.js +29 -110
- package/dist/context-actions/ContextMenu.js.map +1 -1
- package/dist/context-actions/ContextMenuItem.d.ts.map +1 -1
- package/dist/context-actions/ContextMenuItem.js +3 -19
- package/dist/context-actions/ContextMenuItem.js.map +1 -1
- package/dist/context-actions/ContextMenuRoot.js +7 -26
- package/dist/context-actions/ContextMenuRoot.js.map +1 -1
- package/dist/context-actions/GlobalContextAction.js +0 -15
- package/dist/context-actions/GlobalContextAction.js.map +1 -1
- package/dist/context-actions/GlobalContextActions.js +0 -6
- package/dist/context-actions/GlobalContextActions.js.map +1 -1
- package/dist/context-actions/index.js.map +1 -1
- package/dist/index.js.map +1 -1
- package/dist/menu-actions/DropdownMenu.js +4 -32
- package/dist/menu-actions/DropdownMenu.js.map +1 -1
- package/dist/menu-actions/Menu.js +7 -52
- package/dist/menu-actions/Menu.js.map +1 -1
- package/dist/menu-actions/index.d.ts +2 -1
- package/dist/menu-actions/index.d.ts.map +1 -1
- package/dist/menu-actions/index.js +2 -2
- package/dist/menu-actions/index.js.map +1 -1
- package/dist/modal/Modal.d.ts +2 -2
- package/dist/modal/Modal.d.ts.map +1 -1
- package/dist/modal/Modal.js +3 -9
- package/dist/modal/Modal.js.map +1 -1
- package/dist/modal/ModalBody.d.ts +1 -1
- package/dist/modal/ModalBody.d.ts.map +1 -1
- package/dist/modal/ModalBody.js +2 -4
- package/dist/modal/ModalBody.js.map +1 -1
- package/dist/modal/ModalFooter.d.ts +1 -1
- package/dist/modal/ModalFooter.d.ts.map +1 -1
- package/dist/modal/ModalFooter.js +2 -4
- package/dist/modal/ModalFooter.js.map +1 -1
- package/dist/modal/ModalHeader.d.ts +1 -1
- package/dist/modal/ModalHeader.d.ts.map +1 -1
- package/dist/modal/ModalHeader.js +2 -4
- package/dist/modal/ModalHeader.js.map +1 -1
- package/dist/modal/index.js.map +1 -1
- package/dist/navigation/Menu.d.ts +1 -1
- package/dist/navigation/Menu.d.ts.map +1 -1
- package/dist/navigation/Menu.js +2 -2
- package/dist/navigation/Menu.js.map +1 -1
- package/dist/navigation/MenuItem.d.ts +1 -1
- package/dist/navigation/MenuItem.d.ts.map +1 -1
- package/dist/navigation/MenuItem.js +4 -7
- package/dist/navigation/MenuItem.js.map +1 -1
- package/dist/navigation/Page.d.ts +1 -1
- package/dist/navigation/Page.d.ts.map +1 -1
- package/dist/navigation/Page.js +2 -3
- package/dist/navigation/Page.js.map +1 -1
- package/dist/navigation/Stack.d.ts +1 -1
- package/dist/navigation/Stack.d.ts.map +1 -1
- package/dist/navigation/Stack.js +3 -6
- package/dist/navigation/Stack.js.map +1 -1
- package/dist/navigation/index.js.map +1 -1
- package/dist/popper/Popper.d.ts.map +1 -1
- package/dist/popper/Popper.js +13 -46
- package/dist/popper/Popper.js.map +1 -1
- package/dist/popper/Tooltip.js +0 -56
- package/dist/popper/Tooltip.js.map +1 -1
- package/dist/popper/index.js.map +1 -1
- package/dist/shortcuts/GlobalShortcuts.js.map +1 -1
- package/dist/shortcuts/Shortcut.js +19 -76
- package/dist/shortcuts/Shortcut.js.map +1 -1
- package/dist/shortcuts/ShortcutRegistry.js +3 -18
- package/dist/shortcuts/ShortcutRegistry.js.map +1 -1
- package/dist/shortcuts/index.js.map +1 -1
- package/package.json +8 -8
package/dist/TimeSlider.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TimeSlider.d.ts","sourceRoot":"","sources":["../src/TimeSlider.tsx"],"names":[],"mappings":";AAaA,OAAO,mBAAmB,CAAC;AAO3B,aAAK,eAAe,GAAG;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,KAAK,EAAE;QAAE,SAAS,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IAC9D,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF;;;GAGG;AACH,
|
|
1
|
+
{"version":3,"file":"TimeSlider.d.ts","sourceRoot":"","sources":["../src/TimeSlider.tsx"],"names":[],"mappings":";AAaA,OAAO,mBAAmB,CAAC;AAO3B,aAAK,eAAe,GAAG;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,KAAK,EAAE;QAAE,SAAS,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IAC9D,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF;;;GAGG;AACH,iBAAS,UAAU,CAAC,EAClB,SAAS,EAAE,aAAa,EACxB,OAAO,EAAE,WAAW,EACpB,QAAQ,EACR,eAAuB,EACvB,aAAqB,EACrB,aAAa,EAAE,UAAU,GAC1B,EAAE,eAAe,GAAG,GAAG,CAAC,OAAO,CAuF/B;AAwSD,eAAe,UAAU,CAAC"}
|
package/dist/TimeSlider.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
/* eslint-disable react/no-array-index-key */
|
|
2
2
|
// array maps being used are static, this is fine.
|
|
3
|
+
|
|
3
4
|
import React, { useCallback, useMemo, useRef, useState, useEffect } from 'react';
|
|
4
5
|
import classNames from 'classnames';
|
|
5
6
|
import TimeInput from "./TimeInput.js";
|
|
@@ -8,14 +9,13 @@ import "./TimeSlider.css";
|
|
|
8
9
|
var HANDLE_SIZE = parseInt(StyleExports['handle-size'], 10);
|
|
9
10
|
var POPOVER_WIDTH = parseInt(StyleExports['popover-width'], 10);
|
|
10
11
|
var SECONDS_IN_DAY = 24 * 60 * 60 - 1; // Max is actually 23:59:59
|
|
11
|
-
|
|
12
12
|
var SNAP_NEAREST_MINUTES = 5 * 60; // rounds in 5 minute intervals
|
|
13
13
|
|
|
14
14
|
/**
|
|
15
15
|
* Creates a time slider for setting a start and end time, that can also run overnight
|
|
16
16
|
* @param props takes times in seconds 0 - 86399 and a callback
|
|
17
17
|
*/
|
|
18
|
-
|
|
18
|
+
function TimeSlider(_ref) {
|
|
19
19
|
var {
|
|
20
20
|
startTime: propStartTime,
|
|
21
21
|
endTime: propEndTime,
|
|
@@ -27,8 +27,8 @@ var TimeSlider = _ref => {
|
|
|
27
27
|
var [startTime, setStartTime] = useState(propStartTime);
|
|
28
28
|
var [endTime, setEndTime] = useState(propEndTime);
|
|
29
29
|
var track = useRef(null); // we need the track width while calulculating time from handle drag
|
|
30
|
-
// updates state if props change
|
|
31
30
|
|
|
31
|
+
// updates state if props change
|
|
32
32
|
useEffect(function setTimeOnPropTimeChange() {
|
|
33
33
|
setStartTime(propStartTime);
|
|
34
34
|
setEndTime(propEndTime);
|
|
@@ -36,7 +36,6 @@ var TimeSlider = _ref => {
|
|
|
36
36
|
var updateTime = useCallback((newStartTime, newEndTime) => {
|
|
37
37
|
var start = newStartTime;
|
|
38
38
|
var end = newEndTime;
|
|
39
|
-
|
|
40
39
|
if (start === end) {
|
|
41
40
|
if (end < SECONDS_IN_DAY) {
|
|
42
41
|
end += 1;
|
|
@@ -44,7 +43,6 @@ var TimeSlider = _ref => {
|
|
|
44
43
|
start -= 1;
|
|
45
44
|
}
|
|
46
45
|
}
|
|
47
|
-
|
|
48
46
|
setStartTime(start);
|
|
49
47
|
setEndTime(end);
|
|
50
48
|
onChange({
|
|
@@ -97,9 +95,8 @@ var TimeSlider = _ref => {
|
|
|
97
95
|
className: "tick-label",
|
|
98
96
|
key: index
|
|
99
97
|
}, "".concat(index + 1, ":00"))))));
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
var PopOvers = props => {
|
|
98
|
+
}
|
|
99
|
+
function PopOvers(props) {
|
|
103
100
|
var {
|
|
104
101
|
startTime,
|
|
105
102
|
endTime,
|
|
@@ -113,8 +110,8 @@ var PopOvers = props => {
|
|
|
113
110
|
var [firstTime, setFirstTime] = useState(swapTimes ? endTime : startTime);
|
|
114
111
|
var [secondTime, setSecondTime] = useState(swapTimes ? startTime : endTime);
|
|
115
112
|
var firstTimeRef = useRef(null);
|
|
116
|
-
var secondTimeRef = useRef(null);
|
|
117
|
-
|
|
113
|
+
var secondTimeRef = useRef(null);
|
|
114
|
+
// Keep track of selection in both time inputs
|
|
118
115
|
var firstTimeSelectionRef = useRef(null);
|
|
119
116
|
var secondTimeSelectionRef = useRef(null);
|
|
120
117
|
useEffect(function setTimeOnPropTimeChange() {
|
|
@@ -124,17 +121,13 @@ var PopOvers = props => {
|
|
|
124
121
|
useEffect(function setFocusOnSwapTimesChange() {
|
|
125
122
|
if (firstTimeSelectionRef.current !== null) {
|
|
126
123
|
var _secondTimeRef$curren;
|
|
127
|
-
|
|
128
124
|
(_secondTimeRef$curren = secondTimeRef.current) === null || _secondTimeRef$curren === void 0 ? void 0 : _secondTimeRef$curren.setSelection(firstTimeSelectionRef.current);
|
|
129
125
|
}
|
|
130
|
-
|
|
131
126
|
if (secondTimeSelectionRef.current !== null) {
|
|
132
127
|
var _firstTimeRef$current;
|
|
133
|
-
|
|
134
128
|
(_firstTimeRef$current = firstTimeRef.current) === null || _firstTimeRef$current === void 0 ? void 0 : _firstTimeRef$current.setSelection(secondTimeSelectionRef.current);
|
|
135
129
|
}
|
|
136
130
|
}, [swapTimes]);
|
|
137
|
-
|
|
138
131
|
function onFirstTimeChange(value) {
|
|
139
132
|
if (startTime <= endTime) {
|
|
140
133
|
onStartTimeChange(value);
|
|
@@ -142,7 +135,6 @@ var PopOvers = props => {
|
|
|
142
135
|
onEndTimeChange(value);
|
|
143
136
|
}
|
|
144
137
|
}
|
|
145
|
-
|
|
146
138
|
function onSecondTimeChange(value) {
|
|
147
139
|
if (startTime <= endTime) {
|
|
148
140
|
onEndTimeChange(value);
|
|
@@ -150,7 +142,6 @@ var PopOvers = props => {
|
|
|
150
142
|
onStartTimeChange(value);
|
|
151
143
|
}
|
|
152
144
|
}
|
|
153
|
-
|
|
154
145
|
var onFirstTimeSelect = useCallback(selection => {
|
|
155
146
|
firstTimeSelectionRef.current = selection;
|
|
156
147
|
secondTimeSelectionRef.current = null;
|
|
@@ -200,12 +191,11 @@ var PopOvers = props => {
|
|
|
200
191
|
flexBasis: "calc(".concat((SECONDS_IN_DAY - secondTime) / SECONDS_IN_DAY * 100, "% - ").concat(POPOVER_WIDTH / 2, "px)")
|
|
201
192
|
}
|
|
202
193
|
}));
|
|
203
|
-
}
|
|
204
|
-
|
|
194
|
+
}
|
|
205
195
|
/**
|
|
206
196
|
* Shades the area between or outside of handles according to if start or endtime is greater.
|
|
207
197
|
*/
|
|
208
|
-
|
|
198
|
+
function TrackFills(props) {
|
|
209
199
|
var {
|
|
210
200
|
startTime,
|
|
211
201
|
endTime,
|
|
@@ -230,18 +220,18 @@ var TrackFills = props => {
|
|
|
230
220
|
transform: "translateX(".concat(startTime / SECONDS_IN_DAY * 100, "%) scaleX(").concat((endTime - startTime) / SECONDS_IN_DAY, ")")
|
|
231
221
|
}
|
|
232
222
|
}));
|
|
233
|
-
}
|
|
234
|
-
|
|
223
|
+
}
|
|
235
224
|
/**
|
|
236
225
|
* Creates a draggable handle the sets the time
|
|
237
226
|
*/
|
|
238
|
-
|
|
227
|
+
function Handle(props) {
|
|
239
228
|
var {
|
|
240
229
|
track,
|
|
241
230
|
time,
|
|
242
231
|
setTime,
|
|
243
232
|
'data-testid': dataTestId
|
|
244
233
|
} = props;
|
|
234
|
+
|
|
245
235
|
/**
|
|
246
236
|
* Takes the time and generate our translation string taking into account handle offset.
|
|
247
237
|
* The handle offset changes for the first and last tick range dynmaically. Normally,
|
|
@@ -249,11 +239,9 @@ var Handle = props => {
|
|
|
249
239
|
* end of the handle, requireing a relative offset range of 0 - 0.5, and 0.5 - 1 of handle size.
|
|
250
240
|
* @param t time in seconds
|
|
251
241
|
*/
|
|
252
|
-
|
|
253
242
|
var transform = useMemo(() => {
|
|
254
243
|
var ONE_HOUR = 60 * 60;
|
|
255
244
|
var handleOffset = HANDLE_SIZE / 2;
|
|
256
|
-
|
|
257
245
|
if (time < ONE_HOUR) {
|
|
258
246
|
handleOffset = time / ONE_HOUR * (HANDLE_SIZE / 2); // 0 - 0.5 Handle size
|
|
259
247
|
} else if (time > 23 * ONE_HOUR) {
|
|
@@ -266,14 +254,13 @@ var Handle = props => {
|
|
|
266
254
|
if (!track.current) {
|
|
267
255
|
return 0;
|
|
268
256
|
}
|
|
269
|
-
|
|
270
257
|
var trackRect = track.current.getBoundingClientRect();
|
|
271
|
-
var leftEdge = Math.max(clientX - trackRect.left, 0);
|
|
272
|
-
|
|
273
|
-
var preciseTime = SECONDS_IN_DAY * Math.min(1, leftEdge / trackRect.width);
|
|
274
|
-
|
|
275
|
-
var roundedTime = SNAP_NEAREST_MINUTES * Math.round(preciseTime / SNAP_NEAREST_MINUTES);
|
|
276
|
-
|
|
258
|
+
var leftEdge = Math.max(clientX - trackRect.left, 0);
|
|
259
|
+
// get position as 0-1 on slider and mulitply by seconds in a day to convert to time
|
|
260
|
+
var preciseTime = SECONDS_IN_DAY * Math.min(1, leftEdge / trackRect.width);
|
|
261
|
+
// snap to nearest N(5) minute interval
|
|
262
|
+
var roundedTime = SNAP_NEAREST_MINUTES * Math.round(preciseTime / SNAP_NEAREST_MINUTES);
|
|
263
|
+
// prevent over-rounding to 24:00:00
|
|
277
264
|
var limitMax = Math.min(SECONDS_IN_DAY, roundedTime);
|
|
278
265
|
return limitMax;
|
|
279
266
|
}, [track]);
|
|
@@ -322,7 +309,6 @@ var Handle = props => {
|
|
|
322
309
|
onMouseDown: handleMouseDown,
|
|
323
310
|
"data-testid": dataTestId
|
|
324
311
|
}));
|
|
325
|
-
}
|
|
326
|
-
|
|
312
|
+
}
|
|
327
313
|
export default TimeSlider;
|
|
328
314
|
//# sourceMappingURL=TimeSlider.js.map
|
package/dist/TimeSlider.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TimeSlider.js","names":["React","useCallback","useMemo","useRef","useState","useEffect","classNames","TimeInput","StyleExports","HANDLE_SIZE","parseInt","POPOVER_WIDTH","SECONDS_IN_DAY","SNAP_NEAREST_MINUTES","TimeSlider","startTime","propStartTime","endTime","propEndTime","onChange","isStartModified","isEndModified","dataTestId","setStartTime","setEndTime","track","setTimeOnPropTimeChange","updateTime","newStartTime","newEndTime","start","end","handleStartTimeChange","handleEndTimeChange","Array","fill","map","value","index","PopOvers","props","onStartTimeChange","onEndTimeChange","swapTimes","firstTime","setFirstTime","secondTime","setSecondTime","firstTimeRef","secondTimeRef","firstTimeSelectionRef","secondTimeSelectionRef","setFocusOnSwapTimesChange","current","setSelection","onFirstTimeChange","onSecondTimeChange","onFirstTimeSelect","selection","onSecondTimeSelect","flexBasis","modified","undefined","TrackFills","transform","Handle","time","setTime","ONE_HOUR","handleOffset","calculatePositionAsTime","clientX","trackRect","getBoundingClientRect","leftEdge","Math","max","left","preciseTime","min","width","roundedTime","round","limitMax","handleMouseMove","handleMouseUp","window","removeEventListener","document","documentElement","classList","remove","startDragListening","addEventListener","add","stopDragListening","handleMouseDown","removeListenersOnUnmount"],"sources":["../src/TimeSlider.tsx"],"sourcesContent":["/* eslint-disable react/no-array-index-key */\n// array maps being used are static, this is fine.\n\nimport React, {\n useCallback,\n useMemo,\n useRef,\n useState,\n useEffect,\n} from 'react';\nimport classNames from 'classnames';\nimport TimeInput, { SelectionSegment, TimeInputElement } from './TimeInput';\nimport StyleExports from './TimeSlider.module.scss';\nimport './TimeSlider.scss';\n\nconst HANDLE_SIZE = parseInt(StyleExports['handle-size'], 10);\nconst POPOVER_WIDTH = parseInt(StyleExports['popover-width'], 10);\nconst SECONDS_IN_DAY = 24 * 60 * 60 - 1; // Max is actually 23:59:59\nconst SNAP_NEAREST_MINUTES = 5 * 60; // rounds in 5 minute intervals\n\ntype TimeSliderProps = {\n startTime: number;\n endTime: number;\n onChange(value: { startTime: number; endTime: number }): void;\n isStartModified?: boolean;\n isEndModified?: boolean;\n 'data-testid'?: string;\n};\n\n/**\n * Creates a time slider for setting a start and end time, that can also run overnight\n * @param props takes times in seconds 0 - 86399 and a callback\n */\nconst TimeSlider = ({\n startTime: propStartTime,\n endTime: propEndTime,\n onChange,\n isStartModified = false,\n isEndModified = false,\n 'data-testid': dataTestId,\n}: TimeSliderProps): JSX.Element => {\n const [startTime, setStartTime] = useState(propStartTime);\n const [endTime, setEndTime] = useState(propEndTime);\n\n const track = useRef<HTMLDivElement>(null); // we need the track width while calulculating time from handle drag\n\n // updates state if props change\n useEffect(\n function setTimeOnPropTimeChange() {\n setStartTime(propStartTime);\n setEndTime(propEndTime);\n },\n [propStartTime, propEndTime]\n );\n\n const updateTime = useCallback(\n (newStartTime: number, newEndTime: number) => {\n let start = newStartTime;\n let end = newEndTime;\n if (start === end) {\n if (end < SECONDS_IN_DAY) {\n end += 1;\n } else {\n start -= 1;\n }\n }\n\n setStartTime(start);\n setEndTime(end);\n onChange({ startTime: start, endTime: end });\n },\n [setStartTime, setEndTime, onChange]\n );\n\n const handleStartTimeChange = useCallback(\n (newStartTime: number) => {\n updateTime(newStartTime, endTime);\n },\n [updateTime, endTime]\n );\n\n const handleEndTimeChange = useCallback(\n (newEndTime: number) => {\n updateTime(startTime, newEndTime);\n },\n [updateTime, startTime]\n );\n\n return (\n <div className=\"time-slider\" data-testid={dataTestId}>\n <PopOvers\n startTime={startTime}\n endTime={endTime}\n onStartTimeChange={handleStartTimeChange}\n onEndTimeChange={handleEndTimeChange}\n isStartModified={isStartModified}\n isEndModified={isEndModified}\n />\n <div className=\"track\" ref={track}>\n <TrackFills startTime={startTime} endTime={endTime} />\n <div className=\"ticks\">\n {Array(24)\n .fill(null)\n .map((value, index) => (\n <div className=\"tick\" key={index} />\n ))}\n </div>\n <Handle\n track={track}\n time={startTime}\n setTime={handleStartTimeChange}\n />\n <Handle track={track} time={endTime} setTime={handleEndTimeChange} />\n </div>\n\n <div className=\"tick-labels\">\n <div className=\"tick-label\">0:00</div>\n <div className=\"tick-label-wrapper\">\n {Array(24)\n .fill(null)\n .map((value, index) => (\n <div className=\"tick-label\" key={index}>{`${index + 1}:00`}</div>\n ))}\n </div>\n </div>\n </div>\n );\n};\n\ntype PopOversProps = {\n startTime: number;\n endTime: number;\n onStartTimeChange(time: number): void;\n onEndTimeChange(time: number): void;\n isStartModified: boolean;\n isEndModified: boolean;\n 'data-testid'?: string;\n};\n\nconst PopOvers = (props: PopOversProps): JSX.Element => {\n const {\n startTime,\n endTime,\n onStartTimeChange,\n onEndTimeChange,\n isStartModified,\n isEndModified,\n 'data-testid': dataTestId,\n } = props;\n\n const swapTimes = startTime > endTime;\n\n const [firstTime, setFirstTime] = useState(swapTimes ? endTime : startTime);\n const [secondTime, setSecondTime] = useState(swapTimes ? startTime : endTime);\n const firstTimeRef = useRef<TimeInputElement>(null);\n const secondTimeRef = useRef<TimeInputElement>(null);\n // Keep track of selection in both time inputs\n const firstTimeSelectionRef = useRef<SelectionSegment | null>(null);\n const secondTimeSelectionRef = useRef<SelectionSegment | null>(null);\n\n useEffect(\n function setTimeOnPropTimeChange() {\n setFirstTime(startTime > endTime ? endTime : startTime);\n setSecondTime(startTime > endTime ? startTime : endTime);\n },\n [startTime, endTime]\n );\n\n useEffect(\n function setFocusOnSwapTimesChange() {\n if (firstTimeSelectionRef.current !== null) {\n secondTimeRef.current?.setSelection(firstTimeSelectionRef.current);\n }\n if (secondTimeSelectionRef.current !== null) {\n firstTimeRef.current?.setSelection(secondTimeSelectionRef.current);\n }\n },\n [swapTimes]\n );\n\n function onFirstTimeChange(value: number) {\n if (startTime <= endTime) {\n onStartTimeChange(value);\n } else {\n onEndTimeChange(value);\n }\n }\n\n function onSecondTimeChange(value: number) {\n if (startTime <= endTime) {\n onEndTimeChange(value);\n } else {\n onStartTimeChange(value);\n }\n }\n\n const onFirstTimeSelect = useCallback(selection => {\n firstTimeSelectionRef.current = selection;\n secondTimeSelectionRef.current = null;\n }, []);\n\n const onSecondTimeSelect = useCallback(selection => {\n firstTimeSelectionRef.current = null;\n secondTimeSelectionRef.current = selection;\n }, []);\n\n return (\n <div className=\"time-slider-popovers\">\n <div\n className=\"flex\"\n style={{\n flexBasis: `calc(${(firstTime / SECONDS_IN_DAY) * 100}% - ${\n POPOVER_WIDTH / 2\n }px)`,\n }}\n />\n <div className=\"handle-popper\">\n <label\n className={classNames({\n modified: swapTimes ? isEndModified : isStartModified,\n })}\n >\n {swapTimes ? 'End Time' : 'Start Time'}\n </label>\n <TimeInput\n ref={firstTimeRef}\n allowValueWrapping={false}\n value={firstTime}\n onChange={onFirstTimeChange}\n onSelect={onFirstTimeSelect}\n data-testid={\n dataTestId !== undefined ? `${dataTestId}-input-1` : undefined\n }\n />\n </div>\n <div className=\"flex-spacer\" />\n <div className=\"handle-popper\">\n <label\n className={classNames({\n modified: swapTimes ? isStartModified : isEndModified,\n })}\n >\n {swapTimes ? 'Start Time' : 'End Time'}\n </label>\n <TimeInput\n ref={secondTimeRef}\n allowValueWrapping={false}\n value={secondTime}\n onChange={onSecondTimeChange}\n onSelect={onSecondTimeSelect}\n data-testid={\n dataTestId !== undefined ? `${dataTestId}-input-2` : undefined\n }\n />\n </div>\n <div\n className=\"flex\"\n style={{\n flexBasis: `calc(${\n ((SECONDS_IN_DAY - secondTime) / SECONDS_IN_DAY) * 100\n }% - ${POPOVER_WIDTH / 2}px)`,\n }}\n />\n </div>\n );\n};\n\ntype TrackFillsProps = {\n startTime: number;\n endTime: number;\n 'data-testid'?: string;\n};\n\n/**\n * Shades the area between or outside of handles according to if start or endtime is greater.\n */\nconst TrackFills = (props: TrackFillsProps): JSX.Element => {\n const { startTime, endTime, 'data-testid': dataTestId } = props;\n return (\n <div className=\"track-fills\" data-testid={dataTestId}>\n {startTime > endTime && (\n <>\n <div\n className=\"track-fill track-fill-start\"\n style={{ transform: `scaleX(${endTime / SECONDS_IN_DAY})` }}\n />\n <div\n className=\"track-fill track-fill-end\"\n style={{\n transform: `scaleX(${\n (SECONDS_IN_DAY - startTime) / SECONDS_IN_DAY\n })`,\n }}\n />\n </>\n )}\n {startTime < endTime && (\n <div\n className=\"track-fill track-fill-middle\"\n style={{\n transform: `translateX(${\n (startTime / SECONDS_IN_DAY) * 100\n }%) scaleX(${(endTime - startTime) / SECONDS_IN_DAY})`,\n }}\n />\n )}\n </div>\n );\n};\n\ntype HandleProps = {\n track: React.RefObject<HTMLDivElement>;\n time: number;\n setTime(time: number): void;\n 'data-testid'?: string;\n};\n\n/**\n * Creates a draggable handle the sets the time\n */\nconst Handle = (props: HandleProps): JSX.Element => {\n const { track, time, setTime, 'data-testid': dataTestId } = props;\n\n /**\n * Takes the time and generate our translation string taking into account handle offset.\n * The handle offset changes for the first and last tick range dynmaically. Normally,\n * the center of the handle (size/2) is the selection origin, but at edges, it becomes either\n * end of the handle, requireing a relative offset range of 0 - 0.5, and 0.5 - 1 of handle size.\n * @param t time in seconds\n */\n const transform = useMemo(() => {\n const ONE_HOUR = 60 * 60;\n let handleOffset = HANDLE_SIZE / 2;\n if (time < ONE_HOUR) {\n handleOffset = (time / ONE_HOUR) * (HANDLE_SIZE / 2); // 0 - 0.5 Handle size\n } else if (time > 23 * ONE_HOUR) {\n handleOffset =\n HANDLE_SIZE / 2 +\n (1 / (SECONDS_IN_DAY - 23 * ONE_HOUR)) *\n (time - 23 * ONE_HOUR) *\n (HANDLE_SIZE / 2); // 0.5 - 1 Handle size\n }\n return `translateX(calc(${\n (time / SECONDS_IN_DAY) * 100\n }% - ${handleOffset}px))`;\n }, [time]);\n\n const calculatePositionAsTime = useCallback(\n (clientX: number) => {\n if (!track.current) {\n return 0;\n }\n const trackRect = track.current.getBoundingClientRect();\n const leftEdge = Math.max(clientX - trackRect.left, 0);\n // get position as 0-1 on slider and mulitply by seconds in a day to convert to time\n const preciseTime =\n SECONDS_IN_DAY * Math.min(1, leftEdge / trackRect.width);\n // snap to nearest N(5) minute interval\n const roundedTime =\n SNAP_NEAREST_MINUTES * Math.round(preciseTime / SNAP_NEAREST_MINUTES);\n // prevent over-rounding to 24:00:00\n const limitMax = Math.min(SECONDS_IN_DAY, roundedTime);\n return limitMax;\n },\n [track]\n );\n\n const handleMouseMove = useCallback(\n ({ clientX }: MouseEvent) => {\n setTime(calculatePositionAsTime(clientX));\n },\n [setTime, calculatePositionAsTime]\n );\n\n const handleMouseUp = useCallback(\n ({ clientX }: MouseEvent) => {\n setTime(calculatePositionAsTime(clientX));\n\n window.removeEventListener('mousemove', handleMouseMove);\n window.removeEventListener('mouseup', handleMouseUp);\n document.documentElement.classList.remove('drag-pointer-events-none');\n },\n [setTime, calculatePositionAsTime, handleMouseMove]\n );\n\n const startDragListening = useCallback(() => {\n window.addEventListener('mousemove', handleMouseMove);\n window.addEventListener('mouseup', handleMouseUp);\n document.documentElement.classList.add('drag-pointer-events-none');\n }, [handleMouseMove, handleMouseUp]);\n\n const stopDragListening = useCallback(() => {\n window.removeEventListener('mousemove', handleMouseMove);\n window.removeEventListener('mouseup', handleMouseUp);\n document.documentElement.classList.remove('drag-pointer-events-none');\n }, [handleMouseMove, handleMouseUp]);\n\n const handleMouseDown = useCallback(() => {\n startDragListening();\n }, [startDragListening]);\n\n useEffect(\n function removeListenersOnUnmount() {\n return () => {\n stopDragListening();\n };\n },\n [stopDragListening]\n );\n\n return (\n <div className=\"handle-track\" style={{ transform }}>\n <button\n className=\"handle\"\n type=\"button\"\n aria-label=\"Change time\"\n onMouseDown={handleMouseDown}\n data-testid={dataTestId}\n />\n </div>\n );\n};\n\nexport default TimeSlider;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"TimeSlider.js","names":["React","useCallback","useMemo","useRef","useState","useEffect","classNames","TimeInput","StyleExports","HANDLE_SIZE","parseInt","POPOVER_WIDTH","SECONDS_IN_DAY","SNAP_NEAREST_MINUTES","TimeSlider","startTime","propStartTime","endTime","propEndTime","onChange","isStartModified","isEndModified","dataTestId","setStartTime","setEndTime","track","setTimeOnPropTimeChange","updateTime","newStartTime","newEndTime","start","end","handleStartTimeChange","handleEndTimeChange","Array","fill","map","value","index","PopOvers","props","onStartTimeChange","onEndTimeChange","swapTimes","firstTime","setFirstTime","secondTime","setSecondTime","firstTimeRef","secondTimeRef","firstTimeSelectionRef","secondTimeSelectionRef","setFocusOnSwapTimesChange","current","setSelection","onFirstTimeChange","onSecondTimeChange","onFirstTimeSelect","selection","onSecondTimeSelect","flexBasis","modified","undefined","TrackFills","transform","Handle","time","setTime","ONE_HOUR","handleOffset","calculatePositionAsTime","clientX","trackRect","getBoundingClientRect","leftEdge","Math","max","left","preciseTime","min","width","roundedTime","round","limitMax","handleMouseMove","handleMouseUp","window","removeEventListener","document","documentElement","classList","remove","startDragListening","addEventListener","add","stopDragListening","handleMouseDown","removeListenersOnUnmount"],"sources":["../src/TimeSlider.tsx"],"sourcesContent":["/* eslint-disable react/no-array-index-key */\n// array maps being used are static, this is fine.\n\nimport React, {\n useCallback,\n useMemo,\n useRef,\n useState,\n useEffect,\n} from 'react';\nimport classNames from 'classnames';\nimport TimeInput, { SelectionSegment, TimeInputElement } from './TimeInput';\nimport StyleExports from './TimeSlider.module.scss';\nimport './TimeSlider.scss';\n\nconst HANDLE_SIZE = parseInt(StyleExports['handle-size'], 10);\nconst POPOVER_WIDTH = parseInt(StyleExports['popover-width'], 10);\nconst SECONDS_IN_DAY = 24 * 60 * 60 - 1; // Max is actually 23:59:59\nconst SNAP_NEAREST_MINUTES = 5 * 60; // rounds in 5 minute intervals\n\ntype TimeSliderProps = {\n startTime: number;\n endTime: number;\n onChange(value: { startTime: number; endTime: number }): void;\n isStartModified?: boolean;\n isEndModified?: boolean;\n 'data-testid'?: string;\n};\n\n/**\n * Creates a time slider for setting a start and end time, that can also run overnight\n * @param props takes times in seconds 0 - 86399 and a callback\n */\nfunction TimeSlider({\n startTime: propStartTime,\n endTime: propEndTime,\n onChange,\n isStartModified = false,\n isEndModified = false,\n 'data-testid': dataTestId,\n}: TimeSliderProps): JSX.Element {\n const [startTime, setStartTime] = useState(propStartTime);\n const [endTime, setEndTime] = useState(propEndTime);\n\n const track = useRef<HTMLDivElement>(null); // we need the track width while calulculating time from handle drag\n\n // updates state if props change\n useEffect(\n function setTimeOnPropTimeChange() {\n setStartTime(propStartTime);\n setEndTime(propEndTime);\n },\n [propStartTime, propEndTime]\n );\n\n const updateTime = useCallback(\n (newStartTime: number, newEndTime: number) => {\n let start = newStartTime;\n let end = newEndTime;\n if (start === end) {\n if (end < SECONDS_IN_DAY) {\n end += 1;\n } else {\n start -= 1;\n }\n }\n\n setStartTime(start);\n setEndTime(end);\n onChange({ startTime: start, endTime: end });\n },\n [setStartTime, setEndTime, onChange]\n );\n\n const handleStartTimeChange = useCallback(\n (newStartTime: number) => {\n updateTime(newStartTime, endTime);\n },\n [updateTime, endTime]\n );\n\n const handleEndTimeChange = useCallback(\n (newEndTime: number) => {\n updateTime(startTime, newEndTime);\n },\n [updateTime, startTime]\n );\n\n return (\n <div className=\"time-slider\" data-testid={dataTestId}>\n <PopOvers\n startTime={startTime}\n endTime={endTime}\n onStartTimeChange={handleStartTimeChange}\n onEndTimeChange={handleEndTimeChange}\n isStartModified={isStartModified}\n isEndModified={isEndModified}\n />\n <div className=\"track\" ref={track}>\n <TrackFills startTime={startTime} endTime={endTime} />\n <div className=\"ticks\">\n {Array(24)\n .fill(null)\n .map((value, index) => (\n <div className=\"tick\" key={index} />\n ))}\n </div>\n <Handle\n track={track}\n time={startTime}\n setTime={handleStartTimeChange}\n />\n <Handle track={track} time={endTime} setTime={handleEndTimeChange} />\n </div>\n\n <div className=\"tick-labels\">\n <div className=\"tick-label\">0:00</div>\n <div className=\"tick-label-wrapper\">\n {Array(24)\n .fill(null)\n .map((value, index) => (\n <div className=\"tick-label\" key={index}>{`${index + 1}:00`}</div>\n ))}\n </div>\n </div>\n </div>\n );\n}\n\ntype PopOversProps = {\n startTime: number;\n endTime: number;\n onStartTimeChange(time: number): void;\n onEndTimeChange(time: number): void;\n isStartModified: boolean;\n isEndModified: boolean;\n 'data-testid'?: string;\n};\n\nfunction PopOvers(props: PopOversProps): JSX.Element {\n const {\n startTime,\n endTime,\n onStartTimeChange,\n onEndTimeChange,\n isStartModified,\n isEndModified,\n 'data-testid': dataTestId,\n } = props;\n\n const swapTimes = startTime > endTime;\n\n const [firstTime, setFirstTime] = useState(swapTimes ? endTime : startTime);\n const [secondTime, setSecondTime] = useState(swapTimes ? startTime : endTime);\n const firstTimeRef = useRef<TimeInputElement>(null);\n const secondTimeRef = useRef<TimeInputElement>(null);\n // Keep track of selection in both time inputs\n const firstTimeSelectionRef = useRef<SelectionSegment | null>(null);\n const secondTimeSelectionRef = useRef<SelectionSegment | null>(null);\n\n useEffect(\n function setTimeOnPropTimeChange() {\n setFirstTime(startTime > endTime ? endTime : startTime);\n setSecondTime(startTime > endTime ? startTime : endTime);\n },\n [startTime, endTime]\n );\n\n useEffect(\n function setFocusOnSwapTimesChange() {\n if (firstTimeSelectionRef.current !== null) {\n secondTimeRef.current?.setSelection(firstTimeSelectionRef.current);\n }\n if (secondTimeSelectionRef.current !== null) {\n firstTimeRef.current?.setSelection(secondTimeSelectionRef.current);\n }\n },\n [swapTimes]\n );\n\n function onFirstTimeChange(value: number) {\n if (startTime <= endTime) {\n onStartTimeChange(value);\n } else {\n onEndTimeChange(value);\n }\n }\n\n function onSecondTimeChange(value: number) {\n if (startTime <= endTime) {\n onEndTimeChange(value);\n } else {\n onStartTimeChange(value);\n }\n }\n\n const onFirstTimeSelect = useCallback(selection => {\n firstTimeSelectionRef.current = selection;\n secondTimeSelectionRef.current = null;\n }, []);\n\n const onSecondTimeSelect = useCallback(selection => {\n firstTimeSelectionRef.current = null;\n secondTimeSelectionRef.current = selection;\n }, []);\n\n return (\n <div className=\"time-slider-popovers\">\n <div\n className=\"flex\"\n style={{\n flexBasis: `calc(${(firstTime / SECONDS_IN_DAY) * 100}% - ${\n POPOVER_WIDTH / 2\n }px)`,\n }}\n />\n <div className=\"handle-popper\">\n <label\n className={classNames({\n modified: swapTimes ? isEndModified : isStartModified,\n })}\n >\n {swapTimes ? 'End Time' : 'Start Time'}\n </label>\n <TimeInput\n ref={firstTimeRef}\n allowValueWrapping={false}\n value={firstTime}\n onChange={onFirstTimeChange}\n onSelect={onFirstTimeSelect}\n data-testid={\n dataTestId !== undefined ? `${dataTestId}-input-1` : undefined\n }\n />\n </div>\n <div className=\"flex-spacer\" />\n <div className=\"handle-popper\">\n <label\n className={classNames({\n modified: swapTimes ? isStartModified : isEndModified,\n })}\n >\n {swapTimes ? 'Start Time' : 'End Time'}\n </label>\n <TimeInput\n ref={secondTimeRef}\n allowValueWrapping={false}\n value={secondTime}\n onChange={onSecondTimeChange}\n onSelect={onSecondTimeSelect}\n data-testid={\n dataTestId !== undefined ? `${dataTestId}-input-2` : undefined\n }\n />\n </div>\n <div\n className=\"flex\"\n style={{\n flexBasis: `calc(${\n ((SECONDS_IN_DAY - secondTime) / SECONDS_IN_DAY) * 100\n }% - ${POPOVER_WIDTH / 2}px)`,\n }}\n />\n </div>\n );\n}\n\ntype TrackFillsProps = {\n startTime: number;\n endTime: number;\n 'data-testid'?: string;\n};\n\n/**\n * Shades the area between or outside of handles according to if start or endtime is greater.\n */\nfunction TrackFills(props: TrackFillsProps): JSX.Element {\n const { startTime, endTime, 'data-testid': dataTestId } = props;\n return (\n <div className=\"track-fills\" data-testid={dataTestId}>\n {startTime > endTime && (\n <>\n <div\n className=\"track-fill track-fill-start\"\n style={{ transform: `scaleX(${endTime / SECONDS_IN_DAY})` }}\n />\n <div\n className=\"track-fill track-fill-end\"\n style={{\n transform: `scaleX(${\n (SECONDS_IN_DAY - startTime) / SECONDS_IN_DAY\n })`,\n }}\n />\n </>\n )}\n {startTime < endTime && (\n <div\n className=\"track-fill track-fill-middle\"\n style={{\n transform: `translateX(${\n (startTime / SECONDS_IN_DAY) * 100\n }%) scaleX(${(endTime - startTime) / SECONDS_IN_DAY})`,\n }}\n />\n )}\n </div>\n );\n}\n\ntype HandleProps = {\n track: React.RefObject<HTMLDivElement>;\n time: number;\n setTime(time: number): void;\n 'data-testid'?: string;\n};\n\n/**\n * Creates a draggable handle the sets the time\n */\nfunction Handle(props: HandleProps): JSX.Element {\n const { track, time, setTime, 'data-testid': dataTestId } = props;\n\n /**\n * Takes the time and generate our translation string taking into account handle offset.\n * The handle offset changes for the first and last tick range dynmaically. Normally,\n * the center of the handle (size/2) is the selection origin, but at edges, it becomes either\n * end of the handle, requireing a relative offset range of 0 - 0.5, and 0.5 - 1 of handle size.\n * @param t time in seconds\n */\n const transform = useMemo(() => {\n const ONE_HOUR = 60 * 60;\n let handleOffset = HANDLE_SIZE / 2;\n if (time < ONE_HOUR) {\n handleOffset = (time / ONE_HOUR) * (HANDLE_SIZE / 2); // 0 - 0.5 Handle size\n } else if (time > 23 * ONE_HOUR) {\n handleOffset =\n HANDLE_SIZE / 2 +\n (1 / (SECONDS_IN_DAY - 23 * ONE_HOUR)) *\n (time - 23 * ONE_HOUR) *\n (HANDLE_SIZE / 2); // 0.5 - 1 Handle size\n }\n return `translateX(calc(${\n (time / SECONDS_IN_DAY) * 100\n }% - ${handleOffset}px))`;\n }, [time]);\n\n const calculatePositionAsTime = useCallback(\n (clientX: number) => {\n if (!track.current) {\n return 0;\n }\n const trackRect = track.current.getBoundingClientRect();\n const leftEdge = Math.max(clientX - trackRect.left, 0);\n // get position as 0-1 on slider and mulitply by seconds in a day to convert to time\n const preciseTime =\n SECONDS_IN_DAY * Math.min(1, leftEdge / trackRect.width);\n // snap to nearest N(5) minute interval\n const roundedTime =\n SNAP_NEAREST_MINUTES * Math.round(preciseTime / SNAP_NEAREST_MINUTES);\n // prevent over-rounding to 24:00:00\n const limitMax = Math.min(SECONDS_IN_DAY, roundedTime);\n return limitMax;\n },\n [track]\n );\n\n const handleMouseMove = useCallback(\n ({ clientX }: MouseEvent) => {\n setTime(calculatePositionAsTime(clientX));\n },\n [setTime, calculatePositionAsTime]\n );\n\n const handleMouseUp = useCallback(\n ({ clientX }: MouseEvent) => {\n setTime(calculatePositionAsTime(clientX));\n\n window.removeEventListener('mousemove', handleMouseMove);\n window.removeEventListener('mouseup', handleMouseUp);\n document.documentElement.classList.remove('drag-pointer-events-none');\n },\n [setTime, calculatePositionAsTime, handleMouseMove]\n );\n\n const startDragListening = useCallback(() => {\n window.addEventListener('mousemove', handleMouseMove);\n window.addEventListener('mouseup', handleMouseUp);\n document.documentElement.classList.add('drag-pointer-events-none');\n }, [handleMouseMove, handleMouseUp]);\n\n const stopDragListening = useCallback(() => {\n window.removeEventListener('mousemove', handleMouseMove);\n window.removeEventListener('mouseup', handleMouseUp);\n document.documentElement.classList.remove('drag-pointer-events-none');\n }, [handleMouseMove, handleMouseUp]);\n\n const handleMouseDown = useCallback(() => {\n startDragListening();\n }, [startDragListening]);\n\n useEffect(\n function removeListenersOnUnmount() {\n return () => {\n stopDragListening();\n };\n },\n [stopDragListening]\n );\n\n return (\n <div className=\"handle-track\" style={{ transform }}>\n <button\n className=\"handle\"\n type=\"button\"\n aria-label=\"Change time\"\n onMouseDown={handleMouseDown}\n data-testid={dataTestId}\n />\n </div>\n );\n}\n\nexport default TimeSlider;\n"],"mappings":"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"}
|
|
@@ -11,11 +11,11 @@ declare type ToastNotificationProps = {
|
|
|
11
11
|
onClick?: React.EventHandler<React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>>;
|
|
12
12
|
onDismiss?: React.MouseEventHandler<HTMLButtonElement>;
|
|
13
13
|
};
|
|
14
|
-
declare
|
|
15
|
-
|
|
16
|
-
TYPE: Readonly<{
|
|
14
|
+
declare function ToastNotification({ buttons, isShown, classNames: classNamesProp, message, type, onClick, onDismiss, 'data-testid': dataTestId, }: ToastNotificationProps): JSX.Element;
|
|
15
|
+
declare namespace ToastNotification {
|
|
16
|
+
var TYPE: Readonly<{
|
|
17
17
|
ERROR: string;
|
|
18
18
|
}>;
|
|
19
|
-
}
|
|
19
|
+
}
|
|
20
20
|
export default ToastNotification;
|
|
21
21
|
//# sourceMappingURL=ToastNotification.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToastNotification.d.ts","sourceRoot":"","sources":["../src/ToastNotification.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,MAAM,MAAM,UAAU,CAAC;AAE9B,OAAO,0BAA0B,CAAC;AAElC,aAAK,sBAAsB,GAAG;IAC5B,OAAO,CAAC,EAAE,OAAO,MAAM,EAAE,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,OAAO,CAAC,EAAE,KAAK,CAAC,YAAY,CAC1B,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,CACvE,CAAC;IACF,SAAS,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;CACxD,CAAC;AAEF,
|
|
1
|
+
{"version":3,"file":"ToastNotification.d.ts","sourceRoot":"","sources":["../src/ToastNotification.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,MAAM,MAAM,UAAU,CAAC;AAE9B,OAAO,0BAA0B,CAAC;AAElC,aAAK,sBAAsB,GAAG;IAC5B,OAAO,CAAC,EAAE,OAAO,MAAM,EAAE,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,OAAO,CAAC,EAAE,KAAK,CAAC,YAAY,CAC1B,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,CACvE,CAAC;IACF,SAAS,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;CACxD,CAAC;AAEF,iBAAS,iBAAiB,CAAC,EACzB,OAAO,EACP,OAAe,EACf,UAAU,EAAE,cAAc,EAC1B,OAAO,EACP,IAAI,EACJ,OAAO,EACP,SAAS,EACT,aAAa,EAAE,UAAU,GAC1B,EAAE,sBAAsB,GAAG,GAAG,CAAC,OAAO,CA0CtC;kBAnDQ,iBAAiB;;;;;AAyD1B,eAAe,iBAAiB,CAAC"}
|
|
@@ -5,8 +5,7 @@ import { vsClose } from '@deephaven/icons';
|
|
|
5
5
|
import Button from "./Button.js";
|
|
6
6
|
import ThemeExport from "./ThemeExport.js";
|
|
7
7
|
import "./ToastNotification.css";
|
|
8
|
-
|
|
9
|
-
var ToastNotification = _ref => {
|
|
8
|
+
function ToastNotification(_ref) {
|
|
10
9
|
var {
|
|
11
10
|
buttons,
|
|
12
11
|
isShown = false,
|
|
@@ -49,8 +48,7 @@ var ToastNotification = _ref => {
|
|
|
49
48
|
className: "my-2",
|
|
50
49
|
onClick: onDismiss
|
|
51
50
|
})));
|
|
52
|
-
}
|
|
53
|
-
|
|
51
|
+
}
|
|
54
52
|
ToastNotification.TYPE = Object.freeze({
|
|
55
53
|
ERROR: 'error'
|
|
56
54
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToastNotification.js","names":["React","classNames","CSSTransition","vsClose","Button","ThemeExport","ToastNotification","buttons","isShown","classNamesProp","message","type","onClick","onDismiss","dataTestId","hasButtons","length","transitionMs","transitionSlowMs","TYPE","Object","freeze","ERROR"],"sources":["../src/ToastNotification.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport { CSSTransition } from 'react-transition-group';\nimport { vsClose } from '@deephaven/icons';\nimport Button from './Button';\nimport ThemeExport from './ThemeExport';\nimport './ToastNotification.scss';\n\ntype ToastNotificationProps = {\n buttons?: typeof Button[];\n classNames?: string;\n isShown?: boolean;\n message?: string;\n type?: string;\n 'data-testid'?: string;\n\n onClick?: React.EventHandler<\n React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>\n >;\n onDismiss?: React.MouseEventHandler<HTMLButtonElement>;\n};\n\
|
|
1
|
+
{"version":3,"file":"ToastNotification.js","names":["React","classNames","CSSTransition","vsClose","Button","ThemeExport","ToastNotification","buttons","isShown","classNamesProp","message","type","onClick","onDismiss","dataTestId","hasButtons","length","transitionMs","transitionSlowMs","TYPE","Object","freeze","ERROR"],"sources":["../src/ToastNotification.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport { CSSTransition } from 'react-transition-group';\nimport { vsClose } from '@deephaven/icons';\nimport Button from './Button';\nimport ThemeExport from './ThemeExport';\nimport './ToastNotification.scss';\n\ntype ToastNotificationProps = {\n buttons?: typeof Button[];\n classNames?: string;\n isShown?: boolean;\n message?: string;\n type?: string;\n 'data-testid'?: string;\n\n onClick?: React.EventHandler<\n React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>\n >;\n onDismiss?: React.MouseEventHandler<HTMLButtonElement>;\n};\n\nfunction ToastNotification({\n buttons,\n isShown = false,\n classNames: classNamesProp,\n message,\n type,\n onClick,\n onDismiss,\n 'data-testid': dataTestId,\n}: ToastNotificationProps): JSX.Element {\n const hasButtons = buttons && buttons.length !== 0;\n\n return (\n <CSSTransition\n in={isShown}\n timeout={ThemeExport.transitionMs}\n classNames=\"toast-notification-slide-up\"\n mountOnEnter\n unmountOnExit\n >\n <div\n className={classNames('toast-notification', classNamesProp, type)}\n role=\"presentation\"\n onClick={onClick}\n onKeyPress={onClick}\n data-testid={dataTestId}\n >\n <div className=\"message-container\">\n <span className=\"message\">{message}</span>\n </div>\n <CSSTransition\n in={hasButtons}\n timeout={ThemeExport.transitionSlowMs}\n classNames=\"fade\"\n mountOnEnter\n unmountOnExit\n >\n <div className=\"buttons-container\">{buttons}</div>\n </CSSTransition>\n {onDismiss && (\n <Button\n kind=\"ghost\"\n icon={vsClose}\n tooltip=\"Close notification\"\n className=\"my-2\"\n onClick={onDismiss}\n />\n )}\n </div>\n </CSSTransition>\n );\n}\n\nToastNotification.TYPE = Object.freeze({\n ERROR: 'error',\n});\n\nexport default ToastNotification;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,aAAa,QAAQ,wBAAwB;AACtD,SAASC,OAAO,QAAQ,kBAAkB;AAAC,OACpCC,MAAM;AAAA,OACNC,WAAW;AAAA;AAiBlB,SAASC,iBAAiB,OASc;EAAA,IATb;IACzBC,OAAO;IACPC,OAAO,GAAG,KAAK;IACfP,UAAU,EAAEQ,cAAc;IAC1BC,OAAO;IACPC,IAAI;IACJC,OAAO;IACPC,SAAS;IACT,aAAa,EAAEC;EACO,CAAC;EACvB,IAAMC,UAAU,GAAGR,OAAO,IAAIA,OAAO,CAACS,MAAM,KAAK,CAAC;EAElD,oBACE,oBAAC,aAAa;IACZ,EAAE,EAAER,OAAQ;IACZ,OAAO,EAAEH,WAAW,CAACY,YAAa;IAClC,UAAU,EAAC,6BAA6B;IACxC,YAAY;IACZ,aAAa;EAAA,gBAEb;IACE,SAAS,EAAEhB,UAAU,CAAC,oBAAoB,EAAEQ,cAAc,EAAEE,IAAI,CAAE;IAClE,IAAI,EAAC,cAAc;IACnB,OAAO,EAAEC,OAAQ;IACjB,UAAU,EAAEA,OAAQ;IACpB,eAAaE;EAAW,gBAExB;IAAK,SAAS,EAAC;EAAmB,gBAChC;IAAM,SAAS,EAAC;EAAS,GAAEJ,OAAO,CAAQ,CACtC,eACN,oBAAC,aAAa;IACZ,EAAE,EAAEK,UAAW;IACf,OAAO,EAAEV,WAAW,CAACa,gBAAiB;IACtC,UAAU,EAAC,MAAM;IACjB,YAAY;IACZ,aAAa;EAAA,gBAEb;IAAK,SAAS,EAAC;EAAmB,GAAEX,OAAO,CAAO,CACpC,EACfM,SAAS,iBACR,oBAAC,MAAM;IACL,IAAI,EAAC,OAAO;IACZ,IAAI,EAAEV,OAAQ;IACd,OAAO,EAAC,oBAAoB;IAC5B,SAAS,EAAC,MAAM;IAChB,OAAO,EAAEU;EAAU,EAEtB,CACG,CACQ;AAEpB;AAEAP,iBAAiB,CAACa,IAAI,GAAGC,MAAM,CAACC,MAAM,CAAC;EACrCC,KAAK,EAAE;AACT,CAAC,CAAC;AAEF,eAAehB,iBAAiB"}
|
package/dist/UISwitch.d.ts
CHANGED
|
@@ -9,6 +9,6 @@ export declare type UISwitchProps = {
|
|
|
9
9
|
disabled?: boolean;
|
|
10
10
|
'data-testid'?: string;
|
|
11
11
|
};
|
|
12
|
-
declare
|
|
12
|
+
declare function UISwitch({ on, id, className, isInvalid, disabled, onClick, 'data-testid': dataTestId, }: UISwitchProps): JSX.Element;
|
|
13
13
|
export default UISwitch;
|
|
14
14
|
//# sourceMappingURL=UISwitch.d.ts.map
|
package/dist/UISwitch.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UISwitch.d.ts","sourceRoot":"","sources":["../src/UISwitch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,iBAAiB,CAAC;AAEzB,oBAAY,aAAa,GAAG;IAC1B,EAAE,EAAE,OAAO,CAAC;IACZ,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACpD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,
|
|
1
|
+
{"version":3,"file":"UISwitch.d.ts","sourceRoot":"","sources":["../src/UISwitch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,iBAAiB,CAAC;AAEzB,oBAAY,aAAa,GAAG;IAC1B,EAAE,EAAE,OAAO,CAAC;IACZ,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACpD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,iBAAS,QAAQ,CAAC,EAChB,EAAE,EACF,EAAE,EACF,SAAS,EACT,SAAS,EACT,QAAgB,EAChB,OAAO,EACP,aAAa,EAAE,UAAU,GAC1B,EAAE,aAAa,GAAG,GAAG,CAAC,OAAO,CAmB7B;AAED,eAAe,QAAQ,CAAC"}
|
package/dist/UISwitch.js
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import classNames from 'classnames';
|
|
3
3
|
import "./UISwitch.css";
|
|
4
|
-
|
|
5
|
-
var UISwitch = _ref => {
|
|
4
|
+
function UISwitch(_ref) {
|
|
6
5
|
var {
|
|
7
6
|
on,
|
|
8
7
|
id,
|
|
@@ -26,7 +25,6 @@ var UISwitch = _ref => {
|
|
|
26
25
|
}, /*#__PURE__*/React.createElement("div", {
|
|
27
26
|
className: "handle"
|
|
28
27
|
}));
|
|
29
|
-
}
|
|
30
|
-
|
|
28
|
+
}
|
|
31
29
|
export default UISwitch;
|
|
32
30
|
//# sourceMappingURL=UISwitch.js.map
|
package/dist/UISwitch.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UISwitch.js","names":["React","classNames","UISwitch","on","id","className","isInvalid","disabled","onClick","dataTestId","active"],"sources":["../src/UISwitch.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport './UISwitch.scss';\n\nexport type UISwitchProps = {\n on: boolean;\n onClick: React.MouseEventHandler<HTMLButtonElement>;\n id?: string;\n className?: string;\n isInvalid?: boolean;\n disabled?: boolean;\n 'data-testid'?: string;\n};\n\
|
|
1
|
+
{"version":3,"file":"UISwitch.js","names":["React","classNames","UISwitch","on","id","className","isInvalid","disabled","onClick","dataTestId","active"],"sources":["../src/UISwitch.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport './UISwitch.scss';\n\nexport type UISwitchProps = {\n on: boolean;\n onClick: React.MouseEventHandler<HTMLButtonElement>;\n id?: string;\n className?: string;\n isInvalid?: boolean;\n disabled?: boolean;\n 'data-testid'?: string;\n};\n\nfunction UISwitch({\n on,\n id,\n className,\n isInvalid,\n disabled = false,\n onClick,\n 'data-testid': dataTestId,\n}: UISwitchProps): JSX.Element {\n return (\n <button\n type=\"button\"\n className={classNames(\n 'btn',\n 'btn-switch',\n className,\n { active: on },\n { 'is-invalid': isInvalid }\n )}\n id={id}\n onClick={onClick}\n disabled={disabled}\n data-testid={dataTestId}\n >\n <div className=\"handle\" />\n </button>\n );\n}\n\nexport default UISwitch;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AAAC;AAapC,SAASC,QAAQ,OAQc;EAAA,IARb;IAChBC,EAAE;IACFC,EAAE;IACFC,SAAS;IACTC,SAAS;IACTC,QAAQ,GAAG,KAAK;IAChBC,OAAO;IACP,aAAa,EAAEC;EACF,CAAC;EACd,oBACE;IACE,IAAI,EAAC,QAAQ;IACb,SAAS,EAAER,UAAU,CACnB,KAAK,EACL,YAAY,EACZI,SAAS,EACT;MAAEK,MAAM,EAAEP;IAAG,CAAC,EACd;MAAE,YAAY,EAAEG;IAAU,CAAC,CAC3B;IACF,EAAE,EAAEF,EAAG;IACP,OAAO,EAAEI,OAAQ;IACjB,QAAQ,EAAED,QAAS;IACnB,eAAaE;EAAW,gBAExB;IAAK,SAAS,EAAC;EAAQ,EAAG,CACnB;AAEb;AAEA,eAAeP,QAAQ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ValidateLabelInput.d.ts","sourceRoot":"","sources":["../src/ValidateLabelInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAGtC,OAAO,2BAA2B,CAAC;AAEnC,oBAAY,uBAAuB,GAAG;IACpC,8BAA8B;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAE9B,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,gDAAgD;IAChD,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,yCAAyC;IACzC,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,+DAA+D;IAC/D,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B,gDAAgD;IAChD,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ,wCAAwC;IACxC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF;;GAEG;AACH,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,uBAAuB,GAC7B,KAAK,CAAC,YAAY,
|
|
1
|
+
{"version":3,"file":"ValidateLabelInput.d.ts","sourceRoot":"","sources":["../src/ValidateLabelInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAGtC,OAAO,2BAA2B,CAAC;AAEnC,oBAAY,uBAAuB,GAAG;IACpC,8BAA8B;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAE9B,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,gDAAgD;IAChD,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,yCAAyC;IACzC,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,+DAA+D;IAC/D,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B,gDAAgD;IAChD,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ,wCAAwC;IACxC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF;;GAEG;AACH,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,uBAAuB,GAC7B,KAAK,CAAC,YAAY,CA+CpB;AAED,eAAe,kBAAkB,CAAC"}
|
|
@@ -2,7 +2,6 @@ import React, { useRef } from 'react';
|
|
|
2
2
|
import classNames from 'classnames';
|
|
3
3
|
import shortid from 'shortid';
|
|
4
4
|
import "./ValidateLabelInput.css";
|
|
5
|
-
|
|
6
5
|
/**
|
|
7
6
|
* Takes a child and add a label and validaton error
|
|
8
7
|
*/
|
|
@@ -29,12 +28,13 @@ export function ValidateLabelInput(props) {
|
|
|
29
28
|
"data-testid": dataTestId
|
|
30
29
|
}, labelText), React.Children.toArray(children).map(child => {
|
|
31
30
|
if (! /*#__PURE__*/React.isValidElement(child)) {
|
|
31
|
+
// eslint-disable-next-line react/jsx-key
|
|
32
32
|
return /*#__PURE__*/React.createElement("div", {
|
|
33
33
|
className: classNames(className)
|
|
34
34
|
}, child);
|
|
35
|
-
}
|
|
36
|
-
|
|
35
|
+
}
|
|
37
36
|
|
|
37
|
+
// toArray strips null children
|
|
38
38
|
return /*#__PURE__*/React.cloneElement(child, {
|
|
39
39
|
className: classNames(child.props.className, {
|
|
40
40
|
'is-invalid': validationError
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ValidateLabelInput.js","names":["React","useRef","classNames","shortid","ValidateLabelInput","props","children","className","labelText","hintText","isModified","validationError","showValidationError","dataTestId","id","idProp","current","modified","Children","toArray","map","child","isValidElement","cloneElement","undefined"],"sources":["../src/ValidateLabelInput.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport classNames from 'classnames';\nimport shortid from 'shortid';\nimport './ValidateLabelInput.scss';\n\nexport type ValidateLabelInputProps = {\n /** Element to add label to */\n children: React.ReactNode;\n\n /** Any classnames to add */\n className?: string | string[];\n\n /** Text for this validation label */\n labelText?: string;\n\n /** Small hint text next to the main label */\n hintText?: string;\n\n /** Show a modified state. Defaults to false. */\n isModified?: boolean;\n\n /** Validation error that has occurred */\n validationError?: string;\n\n /** Show the validation error if it exists. Default to true. */\n showValidationError?: boolean;\n\n /** ID to use. Auto-generates if not provided */\n id?: string;\n\n /** data-testid to apply to the label */\n 'data-testid'?: string;\n};\n\n/**\n * Takes a child and add a label and validaton error\n */\nexport function ValidateLabelInput(\n props: ValidateLabelInputProps\n): React.ReactElement {\n const {\n children,\n className,\n labelText,\n hintText,\n isModified,\n validationError,\n showValidationError = true,\n 'data-testid': dataTestId,\n id: idProp,\n } = props;\n\n const { current: id } = useRef(idProp ?? shortid());\n\n return (\n <>\n <label\n className={classNames('validate-label', className, {\n modified: isModified,\n })}\n htmlFor={id}\n data-testid={dataTestId}\n >\n {labelText}\n </label>\n {React.Children.toArray(children).map(child => {\n if (!React.isValidElement(child)) {\n return <div className={classNames(className)}>{child}</div>;\n }\n\n // toArray strips null children\n return React.cloneElement(child, {\n className: classNames(child.props.className, {\n 'is-invalid': validationError,\n }),\n });\n })}\n {hintText !== undefined && (\n <small className=\"form-text text-muted\">{hintText}</small>\n )}\n {validationError !== undefined && showValidationError && (\n <p className=\"validate-label-error text-danger\">{validationError}</p>\n )}\n </>\n );\n}\n\nexport default ValidateLabelInput;\n"],"mappings":"AAAA,OAAOA,
|
|
1
|
+
{"version":3,"file":"ValidateLabelInput.js","names":["React","useRef","classNames","shortid","ValidateLabelInput","props","children","className","labelText","hintText","isModified","validationError","showValidationError","dataTestId","id","idProp","current","modified","Children","toArray","map","child","isValidElement","cloneElement","undefined"],"sources":["../src/ValidateLabelInput.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport classNames from 'classnames';\nimport shortid from 'shortid';\nimport './ValidateLabelInput.scss';\n\nexport type ValidateLabelInputProps = {\n /** Element to add label to */\n children: React.ReactNode;\n\n /** Any classnames to add */\n className?: string | string[];\n\n /** Text for this validation label */\n labelText?: string;\n\n /** Small hint text next to the main label */\n hintText?: string;\n\n /** Show a modified state. Defaults to false. */\n isModified?: boolean;\n\n /** Validation error that has occurred */\n validationError?: string;\n\n /** Show the validation error if it exists. Default to true. */\n showValidationError?: boolean;\n\n /** ID to use. Auto-generates if not provided */\n id?: string;\n\n /** data-testid to apply to the label */\n 'data-testid'?: string;\n};\n\n/**\n * Takes a child and add a label and validaton error\n */\nexport function ValidateLabelInput(\n props: ValidateLabelInputProps\n): React.ReactElement {\n const {\n children,\n className,\n labelText,\n hintText,\n isModified,\n validationError,\n showValidationError = true,\n 'data-testid': dataTestId,\n id: idProp,\n } = props;\n\n const { current: id } = useRef(idProp ?? shortid());\n\n return (\n <>\n <label\n className={classNames('validate-label', className, {\n modified: isModified,\n })}\n htmlFor={id}\n data-testid={dataTestId}\n >\n {labelText}\n </label>\n {React.Children.toArray(children).map(child => {\n if (!React.isValidElement(child)) {\n // eslint-disable-next-line react/jsx-key\n return <div className={classNames(className)}>{child}</div>;\n }\n\n // toArray strips null children\n return React.cloneElement(child, {\n className: classNames(child.props.className, {\n 'is-invalid': validationError,\n }),\n });\n })}\n {hintText !== undefined && (\n <small className=\"form-text text-muted\">{hintText}</small>\n )}\n {validationError !== undefined && showValidationError && (\n <p className=\"validate-label-error text-danger\">{validationError}</p>\n )}\n </>\n );\n}\n\nexport default ValidateLabelInput;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,MAAM,QAAQ,OAAO;AACrC,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,OAAO,MAAM,SAAS;AAAC;AAgC9B;AACA;AACA;AACA,OAAO,SAASC,kBAAkB,CAChCC,KAA8B,EACV;EACpB,IAAM;IACJC,QAAQ;IACRC,SAAS;IACTC,SAAS;IACTC,QAAQ;IACRC,UAAU;IACVC,eAAe;IACfC,mBAAmB,GAAG,IAAI;IAC1B,aAAa,EAAEC,UAAU;IACzBC,EAAE,EAAEC;EACN,CAAC,GAAGV,KAAK;EAET,IAAM;IAAEW,OAAO,EAAEF;EAAG,CAAC,GAAGb,MAAM,CAACc,MAAM,aAANA,MAAM,cAANA,MAAM,GAAIZ,OAAO,EAAE,CAAC;EAEnD,oBACE,uDACE;IACE,SAAS,EAAED,UAAU,CAAC,gBAAgB,EAAEK,SAAS,EAAE;MACjDU,QAAQ,EAAEP;IACZ,CAAC,CAAE;IACH,OAAO,EAAEI,EAAG;IACZ,eAAaD;EAAW,GAEvBL,SAAS,CACJ,EACPR,KAAK,CAACkB,QAAQ,CAACC,OAAO,CAACb,QAAQ,CAAC,CAACc,GAAG,CAACC,KAAK,IAAI;IAC7C,IAAI,eAACrB,KAAK,CAACsB,cAAc,CAACD,KAAK,CAAC,EAAE;MAChC;MACA,oBAAO;QAAK,SAAS,EAAEnB,UAAU,CAACK,SAAS;MAAE,GAAEc,KAAK,CAAO;IAC7D;;IAEA;IACA,oBAAOrB,KAAK,CAACuB,YAAY,CAACF,KAAK,EAAE;MAC/Bd,SAAS,EAAEL,UAAU,CAACmB,KAAK,CAAChB,KAAK,CAACE,SAAS,EAAE;QAC3C,YAAY,EAAEI;MAChB,CAAC;IACH,CAAC,CAAC;EACJ,CAAC,CAAC,EACDF,QAAQ,KAAKe,SAAS,iBACrB;IAAO,SAAS,EAAC;EAAsB,GAAEf,QAAQ,CAClD,EACAE,eAAe,KAAKa,SAAS,IAAIZ,mBAAmB,iBACnD;IAAG,SAAS,EAAC;EAAkC,GAAED,eAAe,CACjE,CACA;AAEP;AAEA,eAAeP,kBAAkB"}
|