@deephaven/components 0.5.2-beta.0 → 0.6.1-demo.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/AutoCompleteInput.js +410 -448
- package/dist/AutoCompleteInput.js.map +1 -1
- package/dist/AutoResizeTextarea.js +17 -46
- package/dist/AutoResizeTextarea.js.map +1 -1
- package/dist/BasicModal.js +18 -19
- package/dist/BasicModal.js.map +1 -1
- package/dist/Button.js +30 -21
- package/dist/Button.js.map +1 -1
- package/dist/ButtonGroup.js +6 -4
- package/dist/ButtonGroup.js.map +1 -1
- package/dist/ButtonOld.js +10 -8
- package/dist/ButtonOld.js.map +1 -1
- package/dist/CardFlip.js +10 -8
- package/dist/CardFlip.js.map +1 -1
- package/dist/Checkbox.js +18 -31
- package/dist/Checkbox.js.map +1 -1
- package/dist/Collapse.js +65 -105
- package/dist/Collapse.js.map +1 -1
- package/dist/ComboBox.js +432 -460
- package/dist/ComboBox.js.map +1 -1
- package/dist/CustomTimeSelect.js +485 -517
- package/dist/CustomTimeSelect.js.map +1 -1
- package/dist/DebouncedSearchInput.js +61 -91
- package/dist/DebouncedSearchInput.js.map +1 -1
- package/dist/DeephavenSpinner.js +6 -6
- package/dist/DeephavenSpinner.js.map +1 -1
- package/dist/DragUtils.js +65 -113
- package/dist/DragUtils.js.map +1 -1
- package/dist/DraggableItemList.d.ts +1 -0
- package/dist/DraggableItemList.d.ts.map +1 -1
- package/dist/DraggableItemList.js +219 -257
- package/dist/DraggableItemList.js.map +1 -1
- package/dist/HierarchicalCheckboxMenu.js +160 -227
- package/dist/HierarchicalCheckboxMenu.js.map +1 -1
- package/dist/ItemList.d.ts +4 -2
- package/dist/ItemList.d.ts.map +1 -1
- package/dist/ItemList.js +595 -598
- package/dist/ItemList.js.map +1 -1
- package/dist/ItemListItem.js +194 -215
- package/dist/ItemListItem.js.map +1 -1
- package/dist/LoadingOverlay.js +9 -10
- package/dist/LoadingOverlay.js.map +1 -1
- package/dist/LoadingSpinner.js +4 -3
- package/dist/LoadingSpinner.js.map +1 -1
- package/dist/MaskedInput.js +59 -70
- package/dist/MaskedInput.js.map +1 -1
- package/dist/Option.js +5 -3
- package/dist/Option.js.map +1 -1
- package/dist/RadioGroup.js +16 -34
- package/dist/RadioGroup.js.map +1 -1
- package/dist/RadioItem.js +14 -33
- package/dist/RadioItem.js.map +1 -1
- package/dist/SearchInput.js +42 -75
- package/dist/SearchInput.js.map +1 -1
- package/dist/Select.js +10 -8
- package/dist/Select.js.map +1 -1
- package/dist/SelectValueList.js +97 -134
- package/dist/SelectValueList.js.map +1 -1
- package/dist/SocketedButton.js +13 -11
- package/dist/SocketedButton.js.map +1 -1
- package/dist/ThemeExport.js.map +1 -1
- package/dist/TimeInput.js +16 -53
- package/dist/TimeInput.js.map +1 -1
- package/dist/TimeSlider.js +62 -88
- package/dist/TimeSlider.js.map +1 -1
- package/dist/ToastNotification.js +14 -13
- package/dist/ToastNotification.js.map +1 -1
- package/dist/UISwitch.js +9 -8
- package/dist/UISwitch.js.map +1 -1
- package/dist/context-actions/ContextActionUtils.js +173 -231
- package/dist/context-actions/ContextActionUtils.js.map +1 -1
- package/dist/context-actions/ContextActions.js +135 -177
- package/dist/context-actions/ContextActions.js.map +1 -1
- package/dist/context-actions/ContextMenu.js +509 -543
- package/dist/context-actions/ContextMenu.js.map +1 -1
- package/dist/context-actions/ContextMenuItem.js +32 -22
- package/dist/context-actions/ContextMenuItem.js.map +1 -1
- package/dist/context-actions/ContextMenuRoot.js +112 -152
- package/dist/context-actions/ContextMenuRoot.js.map +1 -1
- package/dist/context-actions/GlobalContextAction.js +49 -84
- package/dist/context-actions/GlobalContextAction.js.map +1 -1
- package/dist/context-actions/GlobalContextActions.js +25 -57
- package/dist/context-actions/GlobalContextActions.js.map +1 -1
- package/dist/context-actions/index.js +4 -4
- package/dist/context-actions/index.js.map +1 -1
- package/dist/index.js +39 -39
- package/dist/index.js.map +1 -1
- package/dist/menu-actions/DropdownMenu.js +126 -159
- package/dist/menu-actions/DropdownMenu.js.map +1 -1
- package/dist/menu-actions/Menu.js +215 -245
- package/dist/menu-actions/Menu.js.map +1 -1
- package/dist/menu-actions/index.js +1 -1
- package/dist/menu-actions/index.js.map +1 -1
- package/dist/navigation/Menu.js +14 -18
- package/dist/navigation/Menu.js.map +1 -1
- package/dist/navigation/MenuItem.js +15 -14
- package/dist/navigation/MenuItem.js.map +1 -1
- package/dist/navigation/Page.js +7 -5
- package/dist/navigation/Page.js.map +1 -1
- package/dist/navigation/Stack.js +14 -39
- package/dist/navigation/Stack.js.map +1 -1
- package/dist/navigation/index.js +4 -4
- package/dist/navigation/index.js.map +1 -1
- package/dist/popper/Popper.js +209 -235
- package/dist/popper/Popper.js.map +1 -1
- package/dist/popper/Tooltip.js +227 -257
- package/dist/popper/Tooltip.js.map +1 -1
- package/dist/popper/index.js +2 -2
- package/dist/popper/index.js.map +1 -1
- package/dist/shortcuts/GlobalShortcuts.js +2 -2
- package/dist/shortcuts/GlobalShortcuts.js.map +1 -1
- package/dist/shortcuts/Shortcut.js +263 -291
- package/dist/shortcuts/Shortcut.js.map +1 -1
- package/dist/shortcuts/ShortcutRegistry.js +48 -71
- package/dist/shortcuts/ShortcutRegistry.js.map +1 -1
- package/dist/shortcuts/index.js +4 -4
- package/dist/shortcuts/index.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +30 -54
package/dist/TimeInput.js
CHANGED
|
@@ -1,56 +1,25 @@
|
|
|
1
|
-
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
2
|
-
|
|
3
|
-
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
4
|
-
|
|
5
|
-
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
6
|
-
|
|
7
|
-
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
8
|
-
|
|
9
|
-
function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
|
10
|
-
|
|
11
|
-
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
12
|
-
|
|
13
1
|
import React, { useEffect, useState } from 'react';
|
|
14
2
|
import Log from '@deephaven/log';
|
|
15
3
|
import { TimeUtils } from '@deephaven/utils';
|
|
16
|
-
import MaskedInput from
|
|
4
|
+
import MaskedInput from "./MaskedInput.js";
|
|
17
5
|
var log = Log.module('TimeInput');
|
|
18
6
|
var TIME_PATTERN = '([01][0-9]|2[0-3]):[0-5][0-9]:[0-5][0-9]';
|
|
19
7
|
var EXAMPLES = ['00:00:00', '12:34:56', '23:59:59'];
|
|
20
8
|
// Forward ref causes a false positive for display-name in eslint:
|
|
21
9
|
// https://github.com/yannickcr/eslint-plugin-react/issues/2269
|
|
22
10
|
// eslint-disable-next-line react/display-name
|
|
23
|
-
var TimeInput = /*#__PURE__*/React.forwardRef(
|
|
24
|
-
var
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
onFocus = _props$onFocus === void 0 ? function () {
|
|
36
|
-
return false;
|
|
37
|
-
} : _props$onFocus,
|
|
38
|
-
_props$onBlur = props.onBlur,
|
|
39
|
-
onBlur = _props$onBlur === void 0 ? function () {
|
|
40
|
-
return false;
|
|
41
|
-
} : _props$onBlur;
|
|
42
|
-
|
|
43
|
-
var _useState = useState(TimeUtils.formatTime(propsValue)),
|
|
44
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
45
|
-
value = _useState2[0],
|
|
46
|
-
setValue = _useState2[1];
|
|
47
|
-
|
|
48
|
-
var _useState3 = useState(),
|
|
49
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
|
50
|
-
selection = _useState4[0],
|
|
51
|
-
setSelection = _useState4[1];
|
|
52
|
-
|
|
53
|
-
useEffect(function () {
|
|
11
|
+
var TimeInput = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
12
|
+
var {
|
|
13
|
+
allowValueWrapping = true,
|
|
14
|
+
className = '',
|
|
15
|
+
onChange = () => false,
|
|
16
|
+
value: propsValue = 0,
|
|
17
|
+
onFocus = () => false,
|
|
18
|
+
onBlur = () => false
|
|
19
|
+
} = props;
|
|
20
|
+
var [value, setValue] = useState(TimeUtils.formatTime(propsValue));
|
|
21
|
+
var [selection, setSelection] = useState();
|
|
22
|
+
useEffect(() => {
|
|
54
23
|
setValue(TimeUtils.formatTime(propsValue));
|
|
55
24
|
}, [propsValue]);
|
|
56
25
|
|
|
@@ -101,16 +70,10 @@ var TimeInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
101
70
|
TimeInput.defaultProps = {
|
|
102
71
|
allowValueWrapping: true,
|
|
103
72
|
className: '',
|
|
104
|
-
onChange:
|
|
105
|
-
return false;
|
|
106
|
-
},
|
|
73
|
+
onChange: () => false,
|
|
107
74
|
value: 0,
|
|
108
|
-
onFocus:
|
|
109
|
-
|
|
110
|
-
},
|
|
111
|
-
onBlur: function onBlur() {
|
|
112
|
-
return false;
|
|
113
|
-
}
|
|
75
|
+
onFocus: () => false,
|
|
76
|
+
onBlur: () => false
|
|
114
77
|
};
|
|
115
78
|
export default TimeInput;
|
|
116
79
|
//# sourceMappingURL=TimeInput.js.map
|
package/dist/TimeInput.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/TimeInput.tsx"],"names":["React","useEffect","useState","Log","TimeUtils","MaskedInput","log","module","TIME_PATTERN","EXAMPLES","TimeInput","forwardRef","props","ref","allowValueWrapping","className","onChange","value","propsValue","onFocus","onBlur","
|
|
1
|
+
{"version":3,"sources":["../src/TimeInput.tsx"],"names":["React","useEffect","useState","Log","TimeUtils","MaskedInput","log","module","TIME_PATTERN","EXAMPLES","TimeInput","forwardRef","props","ref","allowValueWrapping","className","onChange","value","propsValue","onFocus","onBlur","setValue","formatTime","selection","setSelection","getNextSegmentValue","range","delta","segmentValue","maxValue","selectionStart","newSegmentValue","parseInt","Number","isNaN","Math","min","max","padStart","handleChange","newValue","debug","isTimeString","parseTime","handleSelect","newSelection","defaultProps"],"mappings":"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","sourcesContent":["import React, { useEffect, useState } from 'react';\nimport Log from '@deephaven/log';\nimport { TimeUtils } from '@deephaven/utils';\nimport MaskedInput, { SelectionSegment } from './MaskedInput';\n\nconst log = Log.module('TimeInput');\n\nconst TIME_PATTERN = '([01][0-9]|2[0-3]):[0-5][0-9]:[0-5][0-9]';\nconst EXAMPLES = ['00:00:00', '12:34:56', '23:59:59'];\n\ntype TimeInputProps = {\n allowValueWrapping?: boolean;\n className?: string;\n onChange?(timeInSec: number): void;\n value?: number;\n onFocus?(): void;\n onBlur?(): void;\n};\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 TimeInput = React.forwardRef<HTMLInputElement, TimeInputProps>(\n (props: TimeInputProps, ref) => {\n const {\n allowValueWrapping = true,\n className = '',\n onChange = () => false,\n value: propsValue = 0,\n onFocus = () => false,\n onBlur = () => false,\n } = props;\n const [value, setValue] = useState(TimeUtils.formatTime(propsValue));\n const [selection, setSelection] = useState<SelectionSegment>();\n useEffect(() => {\n setValue(TimeUtils.formatTime(propsValue));\n }, [propsValue]);\n\n function getNextSegmentValue(\n range: SelectionSegment,\n delta: number,\n segmentValue: string\n ): string {\n // Delta is backward because negative Y is up\n const maxValue = range.selectionStart === 0 ? 24 : 60;\n let newSegmentValue = parseInt(segmentValue, 10) - delta;\n if (Number.isNaN(newSegmentValue)) {\n newSegmentValue = 0;\n } else if (allowValueWrapping) {\n // Add max value and re-mod so we don't get negative values after mod\n newSegmentValue = ((newSegmentValue % maxValue) + maxValue) % maxValue;\n } else {\n newSegmentValue = Math.min(Math.max(0, newSegmentValue), maxValue - 1);\n }\n return `${newSegmentValue}`.padStart(2, '0');\n }\n\n function handleChange(newValue: string): void {\n log.debug('handleChange', newValue);\n setValue(newValue);\n\n // Only send a change if the value is actually valid\n if (TimeUtils.isTimeString(newValue)) {\n onChange(TimeUtils.parseTime(newValue));\n }\n }\n\n function handleSelect(newSelection: SelectionSegment) {\n setSelection(newSelection);\n }\n\n return (\n <MaskedInput\n ref={ref}\n className={className}\n example={EXAMPLES}\n getNextSegmentValue={getNextSegmentValue}\n onChange={handleChange}\n onSelect={handleSelect}\n pattern={TIME_PATTERN}\n selection={selection}\n value={value}\n onFocus={onFocus}\n onBlur={onBlur}\n />\n );\n }\n);\n\nTimeInput.defaultProps = {\n allowValueWrapping: true,\n className: '',\n onChange: () => false,\n value: 0,\n onFocus: () => false,\n onBlur: () => false,\n};\n\nexport default TimeInput;\n"],"file":"TimeInput.js"}
|
package/dist/TimeSlider.js
CHANGED
|
@@ -1,20 +1,8 @@
|
|
|
1
|
-
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
2
|
-
|
|
3
|
-
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
4
|
-
|
|
5
|
-
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
6
|
-
|
|
7
|
-
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
8
|
-
|
|
9
|
-
function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
|
10
|
-
|
|
11
|
-
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
12
|
-
|
|
13
1
|
/* eslint-disable react/no-array-index-key */
|
|
14
2
|
// array maps being used are static, this is fine.
|
|
15
3
|
import React, { useCallback, useMemo, useRef, useState, useEffect } from 'react';
|
|
16
4
|
import classNames from 'classnames';
|
|
17
|
-
import TimeInput from
|
|
5
|
+
import TimeInput from "./TimeInput.js";
|
|
18
6
|
import StyleExports from "./TimeSlider.module.css";
|
|
19
7
|
import "./TimeSlider.css";
|
|
20
8
|
var HANDLE_SIZE = parseInt(StyleExports['handle-size'], 10);
|
|
@@ -27,33 +15,24 @@ var SNAP_NEAREST_MINUTES = 5 * 60; // rounds in 5 minute intervals
|
|
|
27
15
|
* Creates a time slider for setting a start and end time, that can also run overnight
|
|
28
16
|
* @param {startTime, endTime, onChange} props takes times in seconds 0 - 86399 and a callback
|
|
29
17
|
*/
|
|
30
|
-
var TimeSlider =
|
|
31
|
-
var
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
var
|
|
40
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
41
|
-
startTime = _useState2[0],
|
|
42
|
-
setStartTime = _useState2[1];
|
|
43
|
-
|
|
44
|
-
var _useState3 = useState(propEndTime),
|
|
45
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
|
46
|
-
endTime = _useState4[0],
|
|
47
|
-
setEndTime = _useState4[1];
|
|
48
|
-
|
|
18
|
+
var TimeSlider = (_ref) => {
|
|
19
|
+
var {
|
|
20
|
+
startTime: propStartTime,
|
|
21
|
+
endTime: propEndTime,
|
|
22
|
+
onChange,
|
|
23
|
+
isStartModified = false,
|
|
24
|
+
isEndModified = false
|
|
25
|
+
} = _ref;
|
|
26
|
+
var [startTime, setStartTime] = useState(propStartTime);
|
|
27
|
+
var [endTime, setEndTime] = useState(propEndTime);
|
|
49
28
|
var track = useRef(null); // we need the track width while calulculating time from handle drag
|
|
50
29
|
// updates state if props change
|
|
51
30
|
|
|
52
|
-
useEffect(
|
|
31
|
+
useEffect(() => {
|
|
53
32
|
setStartTime(propStartTime);
|
|
54
33
|
setEndTime(propEndTime);
|
|
55
34
|
}, [propStartTime, propEndTime]);
|
|
56
|
-
var updateTime = useCallback(
|
|
35
|
+
var updateTime = useCallback((newStartTime, newEndTime) => {
|
|
57
36
|
var start = newStartTime;
|
|
58
37
|
var end = newEndTime;
|
|
59
38
|
|
|
@@ -72,10 +51,10 @@ var TimeSlider = function TimeSlider(_ref) {
|
|
|
72
51
|
endTime: end
|
|
73
52
|
});
|
|
74
53
|
}, [setStartTime, setEndTime, onChange]);
|
|
75
|
-
var handleStartTimeChange = useCallback(
|
|
54
|
+
var handleStartTimeChange = useCallback(newStartTime => {
|
|
76
55
|
updateTime(newStartTime, endTime);
|
|
77
56
|
}, [updateTime, endTime]);
|
|
78
|
-
var handleEndTimeChange = useCallback(
|
|
57
|
+
var handleEndTimeChange = useCallback(newEndTime => {
|
|
79
58
|
updateTime(startTime, newEndTime);
|
|
80
59
|
}, [updateTime, startTime]);
|
|
81
60
|
return /*#__PURE__*/React.createElement("div", {
|
|
@@ -95,12 +74,10 @@ var TimeSlider = function TimeSlider(_ref) {
|
|
|
95
74
|
endTime: endTime
|
|
96
75
|
}), /*#__PURE__*/React.createElement("div", {
|
|
97
76
|
className: "ticks"
|
|
98
|
-
}, Array(24).fill(null).map(
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
});
|
|
103
|
-
})), /*#__PURE__*/React.createElement(Handle, {
|
|
77
|
+
}, Array(24).fill(null).map((value, index) => /*#__PURE__*/React.createElement("div", {
|
|
78
|
+
className: "tick",
|
|
79
|
+
key: index
|
|
80
|
+
}))), /*#__PURE__*/React.createElement(Handle, {
|
|
104
81
|
track: track,
|
|
105
82
|
time: startTime,
|
|
106
83
|
setTime: handleStartTimeChange
|
|
@@ -114,33 +91,24 @@ var TimeSlider = function TimeSlider(_ref) {
|
|
|
114
91
|
className: "tick-label"
|
|
115
92
|
}, "0:00"), /*#__PURE__*/React.createElement("div", {
|
|
116
93
|
className: "tick-label-wrapper"
|
|
117
|
-
}, Array(24).fill(null).map(
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
}, "".concat(index + 1, ":00"));
|
|
122
|
-
}))));
|
|
94
|
+
}, Array(24).fill(null).map((value, index) => /*#__PURE__*/React.createElement("div", {
|
|
95
|
+
className: "tick-label",
|
|
96
|
+
key: index
|
|
97
|
+
}, "".concat(index + 1, ":00"))))));
|
|
123
98
|
};
|
|
124
99
|
|
|
125
|
-
var PopOvers =
|
|
126
|
-
var
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
var _useState7 = useState(startTime > endTime ? startTime : endTime),
|
|
139
|
-
_useState8 = _slicedToArray(_useState7, 2),
|
|
140
|
-
secondTime = _useState8[0],
|
|
141
|
-
setSecondTime = _useState8[1];
|
|
142
|
-
|
|
143
|
-
useEffect(function () {
|
|
100
|
+
var PopOvers = props => {
|
|
101
|
+
var {
|
|
102
|
+
startTime,
|
|
103
|
+
endTime,
|
|
104
|
+
onStartTimeChange,
|
|
105
|
+
onEndTimeChange,
|
|
106
|
+
isStartModified,
|
|
107
|
+
isEndModified
|
|
108
|
+
} = props;
|
|
109
|
+
var [firstTime, setFirstTime] = useState(startTime > endTime ? endTime : startTime);
|
|
110
|
+
var [secondTime, setSecondTime] = useState(startTime > endTime ? startTime : endTime);
|
|
111
|
+
useEffect(() => {
|
|
144
112
|
setFirstTime(startTime > endTime ? endTime : startTime);
|
|
145
113
|
setSecondTime(startTime > endTime ? startTime : endTime);
|
|
146
114
|
}, [startTime, endTime]);
|
|
@@ -201,9 +169,11 @@ var PopOvers = function PopOvers(props) {
|
|
|
201
169
|
/**
|
|
202
170
|
* Shades the area between or outside of handles according to if start or endtime is greater.
|
|
203
171
|
*/
|
|
204
|
-
var TrackFills =
|
|
205
|
-
var
|
|
206
|
-
|
|
172
|
+
var TrackFills = props => {
|
|
173
|
+
var {
|
|
174
|
+
startTime,
|
|
175
|
+
endTime
|
|
176
|
+
} = props;
|
|
207
177
|
return /*#__PURE__*/React.createElement("div", {
|
|
208
178
|
className: "track-fills"
|
|
209
179
|
}, startTime > endTime && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
@@ -227,10 +197,12 @@ var TrackFills = function TrackFills(props) {
|
|
|
227
197
|
/**
|
|
228
198
|
* Creates a draggable handle the sets the time
|
|
229
199
|
*/
|
|
230
|
-
var Handle =
|
|
231
|
-
var
|
|
232
|
-
|
|
233
|
-
|
|
200
|
+
var Handle = props => {
|
|
201
|
+
var {
|
|
202
|
+
track,
|
|
203
|
+
time,
|
|
204
|
+
setTime
|
|
205
|
+
} = props;
|
|
234
206
|
/**
|
|
235
207
|
* Takes the time and generate our translation string taking into account handle offset.
|
|
236
208
|
* The handle offset changes for the first and last tick range dynmaically. Normally,
|
|
@@ -239,7 +211,7 @@ var Handle = function Handle(props) {
|
|
|
239
211
|
* @param {number} t time in seconds
|
|
240
212
|
*/
|
|
241
213
|
|
|
242
|
-
var transform = useMemo(
|
|
214
|
+
var transform = useMemo(() => {
|
|
243
215
|
var ONE_HOUR = 60 * 60;
|
|
244
216
|
var handleOffset = HANDLE_SIZE / 2;
|
|
245
217
|
|
|
@@ -251,7 +223,7 @@ var Handle = function Handle(props) {
|
|
|
251
223
|
|
|
252
224
|
return "translateX(calc(".concat(time / SECONDS_IN_DAY * 100, "% - ").concat(handleOffset, "px))");
|
|
253
225
|
}, [time]);
|
|
254
|
-
var calculatePositionAsTime = useCallback(
|
|
226
|
+
var calculatePositionAsTime = useCallback(clientX => {
|
|
255
227
|
if (!track.current) {
|
|
256
228
|
return 0;
|
|
257
229
|
}
|
|
@@ -266,39 +238,41 @@ var Handle = function Handle(props) {
|
|
|
266
238
|
var limitMax = Math.min(SECONDS_IN_DAY, roundedTime);
|
|
267
239
|
return limitMax;
|
|
268
240
|
}, [track]);
|
|
269
|
-
var handleMouseMove = useCallback(
|
|
270
|
-
var
|
|
241
|
+
var handleMouseMove = useCallback((_ref2) => {
|
|
242
|
+
var {
|
|
243
|
+
clientX
|
|
244
|
+
} = _ref2;
|
|
271
245
|
setTime(calculatePositionAsTime(clientX));
|
|
272
246
|
}, [setTime, calculatePositionAsTime]);
|
|
273
|
-
var handleMouseUp = useCallback(
|
|
274
|
-
var
|
|
247
|
+
var handleMouseUp = useCallback((_ref3) => {
|
|
248
|
+
var {
|
|
249
|
+
clientX
|
|
250
|
+
} = _ref3;
|
|
275
251
|
setTime(calculatePositionAsTime(clientX));
|
|
276
252
|
window.removeEventListener('mousemove', handleMouseMove);
|
|
277
253
|
window.removeEventListener('mouseup', handleMouseUp);
|
|
278
254
|
document.documentElement.classList.remove('drag-pointer-events-none');
|
|
279
255
|
}, [setTime, calculatePositionAsTime, handleMouseMove]);
|
|
280
|
-
var startDragListening = useCallback(
|
|
256
|
+
var startDragListening = useCallback(() => {
|
|
281
257
|
window.addEventListener('mousemove', handleMouseMove);
|
|
282
258
|
window.addEventListener('mouseup', handleMouseUp);
|
|
283
259
|
document.documentElement.classList.add('drag-pointer-events-none');
|
|
284
260
|
}, [handleMouseMove, handleMouseUp]);
|
|
285
|
-
var stopDragListening = useCallback(
|
|
261
|
+
var stopDragListening = useCallback(() => {
|
|
286
262
|
window.removeEventListener('mousemove', handleMouseMove);
|
|
287
263
|
window.removeEventListener('mouseup', handleMouseUp);
|
|
288
264
|
document.documentElement.classList.remove('drag-pointer-events-none');
|
|
289
265
|
}, [handleMouseMove, handleMouseUp]);
|
|
290
|
-
var handleMouseDown = useCallback(
|
|
266
|
+
var handleMouseDown = useCallback(() => {
|
|
291
267
|
startDragListening();
|
|
292
268
|
}, [startDragListening]);
|
|
293
|
-
useEffect(
|
|
294
|
-
|
|
295
|
-
stopDragListening();
|
|
296
|
-
};
|
|
269
|
+
useEffect(() => () => {
|
|
270
|
+
stopDragListening();
|
|
297
271
|
}, [stopDragListening]);
|
|
298
272
|
return /*#__PURE__*/React.createElement("div", {
|
|
299
273
|
className: "handle-track",
|
|
300
274
|
style: {
|
|
301
|
-
transform
|
|
275
|
+
transform
|
|
302
276
|
}
|
|
303
277
|
}, /*#__PURE__*/React.createElement("button", {
|
|
304
278
|
className: "handle",
|
package/dist/TimeSlider.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/TimeSlider.tsx"],"names":["React","useCallback","useMemo","useRef","useState","useEffect","classNames","TimeInput","StyleExports","HANDLE_SIZE","parseInt","POPOVER_WIDTH","SECONDS_IN_DAY","SNAP_NEAREST_MINUTES","TimeSlider","propStartTime","startTime","propEndTime","endTime","onChange","isStartModified","isEndModified","setStartTime","setEndTime","track","updateTime","newStartTime","newEndTime","start","end","handleStartTimeChange","handleEndTimeChange","Array","fill","map","value","index","PopOvers","props","onStartTimeChange","onEndTimeChange","firstTime","setFirstTime","secondTime","setSecondTime","onFirstTimeChange","onSecondTimeChange","flexBasis","modified","TrackFills","transform","Handle","time","setTime","ONE_HOUR","handleOffset","calculatePositionAsTime","clientX","current","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"],"mappings":"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","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 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};\n\n/**\n * Creates a time slider for setting a start and end time, that can also run overnight\n * @param {startTime, endTime, onChange} 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}: 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 setStartTime(propStartTime);\n setEndTime(propEndTime);\n }, [propStartTime, propEndTime]);\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\">\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};\n\nconst PopOvers = (props: PopOversProps): JSX.Element => {\n const {\n startTime,\n endTime,\n onStartTimeChange,\n onEndTimeChange,\n isStartModified,\n isEndModified,\n } = props;\n\n const [firstTime, setFirstTime] = useState(\n startTime > endTime ? endTime : startTime\n );\n const [secondTime, setSecondTime] = useState(\n startTime > endTime ? startTime : endTime\n );\n\n useEffect(() => {\n setFirstTime(startTime > endTime ? endTime : startTime);\n setSecondTime(startTime > endTime ? startTime : endTime);\n }, [startTime, endTime]);\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 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: startTime < endTime ? isStartModified : isEndModified,\n })}\n >\n {startTime <= endTime ? 'Start Time' : 'End Time'}\n </label>\n <TimeInput\n allowValueWrapping={false}\n value={firstTime}\n onChange={onFirstTimeChange}\n />\n </div>\n <div className=\"flex-spacer\" />\n <div className=\"handle-popper\">\n <label\n className={classNames({\n modified: startTime > endTime ? isStartModified : isEndModified,\n })}\n >\n {startTime > endTime ? 'Start Time' : 'End Time'}\n </label>\n <TimeInput\n allowValueWrapping={false}\n value={secondTime}\n onChange={onSecondTimeChange}\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};\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 } = props;\n return (\n <div className=\"track-fills\">\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};\n\n/**\n * Creates a draggable handle the sets the time\n */\nconst Handle = (props: HandleProps): JSX.Element => {\n const { track, time, setTime } = 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 {number} 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 () => () => {\n stopDragListening();\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 />\n </div>\n );\n};\n\nexport default TimeSlider;\n"],"file":"TimeSlider.js"}
|
|
1
|
+
{"version":3,"sources":["../src/TimeSlider.tsx"],"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","setStartTime","setEndTime","track","updateTime","newStartTime","newEndTime","start","end","handleStartTimeChange","handleEndTimeChange","Array","fill","map","value","index","PopOvers","props","onStartTimeChange","onEndTimeChange","firstTime","setFirstTime","secondTime","setSecondTime","onFirstTimeChange","onSecondTimeChange","flexBasis","modified","TrackFills","transform","Handle","time","setTime","ONE_HOUR","handleOffset","calculatePositionAsTime","clientX","current","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"],"mappings":"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","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 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};\n\n/**\n * Creates a time slider for setting a start and end time, that can also run overnight\n * @param {startTime, endTime, onChange} 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}: 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 setStartTime(propStartTime);\n setEndTime(propEndTime);\n }, [propStartTime, propEndTime]);\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\">\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};\n\nconst PopOvers = (props: PopOversProps): JSX.Element => {\n const {\n startTime,\n endTime,\n onStartTimeChange,\n onEndTimeChange,\n isStartModified,\n isEndModified,\n } = props;\n\n const [firstTime, setFirstTime] = useState(\n startTime > endTime ? endTime : startTime\n );\n const [secondTime, setSecondTime] = useState(\n startTime > endTime ? startTime : endTime\n );\n\n useEffect(() => {\n setFirstTime(startTime > endTime ? endTime : startTime);\n setSecondTime(startTime > endTime ? startTime : endTime);\n }, [startTime, endTime]);\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 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: startTime < endTime ? isStartModified : isEndModified,\n })}\n >\n {startTime <= endTime ? 'Start Time' : 'End Time'}\n </label>\n <TimeInput\n allowValueWrapping={false}\n value={firstTime}\n onChange={onFirstTimeChange}\n />\n </div>\n <div className=\"flex-spacer\" />\n <div className=\"handle-popper\">\n <label\n className={classNames({\n modified: startTime > endTime ? isStartModified : isEndModified,\n })}\n >\n {startTime > endTime ? 'Start Time' : 'End Time'}\n </label>\n <TimeInput\n allowValueWrapping={false}\n value={secondTime}\n onChange={onSecondTimeChange}\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};\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 } = props;\n return (\n <div className=\"track-fills\">\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};\n\n/**\n * Creates a draggable handle the sets the time\n */\nconst Handle = (props: HandleProps): JSX.Element => {\n const { track, time, setTime } = 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 {number} 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 () => () => {\n stopDragListening();\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 />\n </div>\n );\n};\n\nexport default TimeSlider;\n"],"file":"TimeSlider.js"}
|
|
@@ -2,22 +2,23 @@ import React from 'react';
|
|
|
2
2
|
import classNames from 'classnames';
|
|
3
3
|
import { CSSTransition } from 'react-transition-group';
|
|
4
4
|
import { vsClose } from '@deephaven/icons';
|
|
5
|
-
import Button from
|
|
6
|
-
import ThemeExport from
|
|
5
|
+
import Button from "./Button.js";
|
|
6
|
+
import ThemeExport from "./ThemeExport.js";
|
|
7
7
|
import "./ToastNotification.css";
|
|
8
8
|
|
|
9
|
-
var ToastNotification =
|
|
10
|
-
var
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
9
|
+
var ToastNotification = (_ref) => {
|
|
10
|
+
var {
|
|
11
|
+
buttons,
|
|
12
|
+
isShown = false,
|
|
13
|
+
classNames: classNamesProp,
|
|
14
|
+
message,
|
|
15
|
+
type,
|
|
16
|
+
onClick,
|
|
17
|
+
onDismiss
|
|
18
|
+
} = _ref;
|
|
18
19
|
var hasButtons = buttons && buttons.length !== 0;
|
|
19
20
|
return /*#__PURE__*/React.createElement(CSSTransition, {
|
|
20
|
-
|
|
21
|
+
in: isShown,
|
|
21
22
|
timeout: ThemeExport.transitionMs,
|
|
22
23
|
classNames: "toast-notification-slide-up",
|
|
23
24
|
mountOnEnter: true,
|
|
@@ -32,7 +33,7 @@ var ToastNotification = function ToastNotification(_ref) {
|
|
|
32
33
|
}, /*#__PURE__*/React.createElement("span", {
|
|
33
34
|
className: "message"
|
|
34
35
|
}, message)), /*#__PURE__*/React.createElement(CSSTransition, {
|
|
35
|
-
|
|
36
|
+
in: hasButtons,
|
|
36
37
|
timeout: ThemeExport.transitionSlowMs,
|
|
37
38
|
classNames: "fade",
|
|
38
39
|
mountOnEnter: true,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/ToastNotification.tsx"],"names":["React","classNames","CSSTransition","vsClose","Button","ThemeExport","ToastNotification","buttons","isShown","classNamesProp","message","type","onClick","onDismiss","hasButtons","length","transitionMs","transitionSlowMs","TYPE","Object","freeze","ERROR"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,SAASC,aAAT,QAA8B,wBAA9B;AACA,SAASC,OAAT,QAAwB,kBAAxB;
|
|
1
|
+
{"version":3,"sources":["../src/ToastNotification.tsx"],"names":["React","classNames","CSSTransition","vsClose","Button","ThemeExport","ToastNotification","buttons","isShown","classNamesProp","message","type","onClick","onDismiss","hasButtons","length","transitionMs","transitionSlowMs","TYPE","Object","freeze","ERROR"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,SAASC,aAAT,QAA8B,wBAA9B;AACA,SAASC,OAAT,QAAwB,kBAAxB;OACOC,M;OACAC,W;;;AAgBP,IAAMC,iBAAiB,GAAG,UAQiB;AAAA,MARhB;AACzBC,IAAAA,OADyB;AAEzBC,IAAAA,OAAO,GAAG,KAFe;AAGzBP,IAAAA,UAAU,EAAEQ,cAHa;AAIzBC,IAAAA,OAJyB;AAKzBC,IAAAA,IALyB;AAMzBC,IAAAA,OANyB;AAOzBC,IAAAA;AAPyB,GAQgB;AACzC,MAAMC,UAAU,GAAGP,OAAO,IAAIA,OAAO,CAACQ,MAAR,KAAmB,CAAjD;AAEA,sBACE,oBAAC,aAAD;AACE,IAAA,EAAE,EAAEP,OADN;AAEE,IAAA,OAAO,EAAEH,WAAW,CAACW,YAFvB;AAGE,IAAA,UAAU,EAAC,6BAHb;AAIE,IAAA,YAAY,MAJd;AAKE,IAAA,aAAa;AALf,kBAOE;AACE,IAAA,SAAS,EAAEf,UAAU,CAAC,oBAAD,EAAuBQ,cAAvB,EAAuCE,IAAvC,CADvB;AAEE,IAAA,IAAI,EAAC,cAFP;AAGE,IAAA,OAAO,EAAEC,OAHX;AAIE,IAAA,UAAU,EAAEA;AAJd,kBAME;AAAK,IAAA,SAAS,EAAC;AAAf,kBACE;AAAM,IAAA,SAAS,EAAC;AAAhB,KAA2BF,OAA3B,CADF,CANF,eASE,oBAAC,aAAD;AACE,IAAA,EAAE,EAAEI,UADN;AAEE,IAAA,OAAO,EAAET,WAAW,CAACY,gBAFvB;AAGE,IAAA,UAAU,EAAC,MAHb;AAIE,IAAA,YAAY,MAJd;AAKE,IAAA,aAAa;AALf,kBAOE;AAAK,IAAA,SAAS,EAAC;AAAf,KAAoCV,OAApC,CAPF,CATF,EAkBGM,SAAS,iBACR,oBAAC,MAAD;AACE,IAAA,IAAI,EAAC,OADP;AAEE,IAAA,IAAI,EAAEV,OAFR;AAGE,IAAA,OAAO,EAAC,oBAHV;AAIE,IAAA,SAAS,EAAC,MAJZ;AAKE,IAAA,OAAO,EAAEU;AALX,IAnBJ,CAPF,CADF;AAsCD,CAjDD;;AAmDAP,iBAAiB,CAACY,IAAlB,GAAyBC,MAAM,CAACC,MAAP,CAAc;AACrCC,EAAAA,KAAK,EAAE;AAD8B,CAAd,CAAzB;AAIA,eAAef,iBAAf","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\n onClick?: React.EventHandler<\n React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>\n >;\n onDismiss?: React.MouseEventHandler<HTMLButtonElement>;\n};\n\nconst ToastNotification = ({\n buttons,\n isShown = false,\n classNames: classNamesProp,\n message,\n type,\n onClick,\n onDismiss,\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 >\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"],"file":"ToastNotification.js"}
|
package/dist/UISwitch.js
CHANGED
|
@@ -2,14 +2,15 @@ import React from 'react';
|
|
|
2
2
|
import classNames from 'classnames';
|
|
3
3
|
import "./UISwitch.css";
|
|
4
4
|
|
|
5
|
-
var UISwitch =
|
|
6
|
-
var
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
5
|
+
var UISwitch = (_ref) => {
|
|
6
|
+
var {
|
|
7
|
+
on,
|
|
8
|
+
id,
|
|
9
|
+
className,
|
|
10
|
+
isInvalid,
|
|
11
|
+
disabled = false,
|
|
12
|
+
onClick
|
|
13
|
+
} = _ref;
|
|
13
14
|
return /*#__PURE__*/React.createElement("button", {
|
|
14
15
|
type: "button",
|
|
15
16
|
className: classNames('btn', 'btn-switch', className, {
|
package/dist/UISwitch.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/UISwitch.tsx"],"names":["React","classNames","UISwitch","on","id","className","isInvalid","disabled","onClick","active"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,UAAP,MAAuB,YAAvB
|
|
1
|
+
{"version":3,"sources":["../src/UISwitch.tsx"],"names":["React","classNames","UISwitch","on","id","className","isInvalid","disabled","onClick","active"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,UAAP,MAAuB,YAAvB;;;AAYA,IAAMC,QAAQ,GAAG;AAAA,MAAC;AAChBC,IAAAA,EADgB;AAEhBC,IAAAA,EAFgB;AAGhBC,IAAAA,SAHgB;AAIhBC,IAAAA,SAJgB;AAKhBC,IAAAA,QAAQ,GAAG,KALK;AAMhBC,IAAAA;AANgB,GAAD;AAAA,sBAQf;AACE,IAAA,IAAI,EAAC,QADP;AAEE,IAAA,SAAS,EAAEP,UAAU,CACnB,KADmB,EAEnB,YAFmB,EAGnBI,SAHmB,EAInB;AAAEI,MAAAA,MAAM,EAAEN;AAAV,KAJmB,EAKnB;AAAE,oBAAcG;AAAhB,KALmB,CAFvB;AASE,IAAA,EAAE,EAAEF,EATN;AAUE,IAAA,OAAO,EAAEI,OAVX;AAWE,IAAA,QAAQ,EAAED;AAXZ,kBAaE;AAAK,IAAA,SAAS,EAAC;AAAf,IAbF,CARe;AAAA,CAAjB;;AAyBA,eAAeL,QAAf","sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport './UISwitch.scss';\n\ntype UISwitchProps = {\n on: boolean;\n onClick: React.MouseEventHandler<HTMLButtonElement>;\n id?: string;\n className?: string;\n isInvalid?: boolean;\n disabled?: boolean;\n};\n\nconst UISwitch = ({\n on,\n id,\n className,\n isInvalid,\n disabled = false,\n onClick,\n}: UISwitchProps): JSX.Element => (\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 >\n <div className=\"handle\" />\n </button>\n);\n\nexport default UISwitch;\n"],"file":"UISwitch.js"}
|