@servicetitan/design-system 13.1.0 → 13.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Breadcrumb/Breadcrumb.js +8 -4
- package/dist/components/Breadcrumb/Breadcrumb.js.map +1 -1
- package/dist/components/FilterButton/FilterButton.css +2 -2
- package/dist/components/FilterButton/FilterButton.js.map +1 -1
- package/dist/components/FilterButton/index.css +2 -2
- package/dist/components/Form/Form.d.ts +2 -2
- package/dist/components/Form/Form.js +8 -4
- package/dist/components/Form/Form.js.map +1 -1
- package/dist/components/Sidebar/Sidebar.js +15 -13
- package/dist/components/Sidebar/Sidebar.js.map +1 -1
- package/dist/components/Snackbar/Snackbar.d.ts +11 -9
- package/dist/components/Snackbar/Snackbar.js +4 -6
- package/dist/components/Snackbar/Snackbar.js.map +1 -1
- package/dist/components/Stack/Stack.js +1 -1
- package/dist/components/Stack/Stack.js.map +1 -1
- package/dist/components/TimePicker/TimePicker.css +9 -0
- package/dist/components/TimePicker/TimePicker.css.map +1 -1
- package/dist/components/TimePicker/TimePicker.d.ts +16 -7
- package/dist/components/TimePicker/TimePicker.js +74 -54
- package/dist/components/TimePicker/TimePicker.js.map +1 -1
- package/dist/components/TimePicker/index.css +9 -0
- package/dist/components/TimePicker/index.css.map +1 -1
- package/dist/components/TimePicker/utils/TimePickerUtils.test.js +61 -3
- package/dist/components/TimePicker/utils/TimePickerUtils.test.js.map +1 -1
- package/dist/components/TimePicker/utils/generateOptions.js +10 -13
- package/dist/components/TimePicker/utils/generateOptions.js.map +1 -1
- package/dist/components/TimePicker/utils/getClosestOption.js +4 -6
- package/dist/components/TimePicker/utils/getClosestOption.js.map +1 -1
- package/dist/components/TimePicker/utils/getOptionByText.d.ts +4 -0
- package/dist/components/TimePicker/utils/getOptionByText.js +10 -0
- package/dist/components/TimePicker/utils/getOptionByText.js.map +1 -0
- package/dist/components/TimePicker/utils/index.d.ts +2 -1
- package/dist/components/TimePicker/utils/index.js +2 -1
- package/dist/components/TimePicker/utils/index.js.map +1 -1
- package/dist/components/TimePicker/utils/injectOption.js +4 -5
- package/dist/components/TimePicker/utils/injectOption.js.map +1 -1
- package/dist/components/TimePicker/utils/stringToDate.d.ts +0 -1
- package/dist/components/TimePicker/utils/stringToDate.js +2 -4
- package/dist/components/TimePicker/utils/stringToDate.js.map +1 -1
- package/dist/components/TimePicker/utils/timezoneUtils.d.ts +15 -0
- package/dist/components/TimePicker/utils/timezoneUtils.js +139 -0
- package/dist/components/TimePicker/utils/timezoneUtils.js.map +1 -0
- package/dist/components/TimePicker/utils/toTimeFormat.d.ts +1 -1
- package/dist/components/TimePicker/utils/toTimeFormat.js +1 -1
- package/dist/components/TimePicker/utils/toTimeFormat.js.map +1 -1
- package/dist/components/TimePicker/utils/utils.d.ts +2 -0
- package/dist/components/TimePicker/utils/utils.js +10 -0
- package/dist/components/TimePicker/utils/utils.js.map +1 -1
- package/dist/components/index.css +11 -2
- package/dist/components/index.css.map +1 -1
- package/dist/global/index.css +1 -1
- package/dist/global/version.css +1 -1
- package/dist/system-light.css +1 -1
- package/dist/system-light.min.css +1 -1
- package/dist/system.css +43 -301
- package/dist/system.css.map +1 -1
- package/dist/system.min.css +2 -2
- package/dist/utilities/TimezoneProvider/TimezoneProvider.js +14 -0
- package/dist/utilities/TimezoneProvider/TimezoneProvider.js.map +1 -1
- package/package.json +9 -9
- package/dist/components/TimePicker/utils/getOptionByValue.d.ts +0 -4
- package/dist/components/TimePicker/utils/getOptionByValue.js +0 -14
- package/dist/components/TimePicker/utils/getOptionByValue.js.map +0 -1
|
@@ -9,15 +9,19 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
9
9
|
}
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
|
-
import React from 'react';
|
|
12
|
+
import React, { Children, cloneElement } from 'react';
|
|
13
13
|
import classnames from 'classnames';
|
|
14
14
|
import { BreadcrumbLink } from './BreadcrumbLink';
|
|
15
15
|
export const Breadcrumb = (_a) => {
|
|
16
16
|
var { children, className } = _a, props = __rest(_a, ["children", "className"]);
|
|
17
17
|
const BreadcrumbClasses = classnames('Breadcrumb', className);
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
18
|
+
const links = Children.toArray(children).filter((child) => child);
|
|
19
|
+
return (React.createElement("ul", Object.assign({ "aria-label": "breadcrumbs", className: BreadcrumbClasses, "data-anvil-component": "Breadcrumb" }, props), links.map((child, i) => {
|
|
20
|
+
var _a;
|
|
21
|
+
return cloneElement(child, i === links.length - 1 && !((_a = child.props) === null || _a === void 0 ? void 0 : _a['aria-current'])
|
|
22
|
+
? { 'aria-current': 'location' }
|
|
23
|
+
: null);
|
|
24
|
+
})));
|
|
21
25
|
};
|
|
22
26
|
Breadcrumb.Link = BreadcrumbLink;
|
|
23
27
|
//# sourceMappingURL=Breadcrumb.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Breadcrumb.js","sourceRoot":"","sources":["../../../src/components/Breadcrumb/Breadcrumb.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"Breadcrumb.js","sourceRoot":"","sources":["../../../src/components/Breadcrumb/Breadcrumb.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAM,QAAQ,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAC1D,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,cAAc,EAAsB,MAAM,kBAAkB,CAAC;AAsBtE,MAAM,CAAC,MAAM,UAAU,GAAe,CAAC,EAAiC,EAAE,EAAE;QAArC,EAAE,QAAQ,EAAE,SAAS,OAAY,EAAP,KAAK,cAA/B,yBAAiC,CAAF;IACrE,MAAM,iBAAiB,GAAG,UAAU,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;IAC9D,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC;IAElE,OAAO,CACN,wDACY,aAAa,EACxB,SAAS,EAAE,iBAAiB,0BACP,YAAY,IAC7B,KAAK,GAER,KAAK,CAAC,GAAG,CAAC,CAAC,KAAU,EAAE,CAAC,EAAE,EAAE;;QAC5B,OAAA,YAAY,CACX,KAAK,EACL,CAAC,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,CAAA,MAAA,KAAK,CAAC,KAAK,0CAAG,cAAc,CAAC,CAAA;YACvD,CAAC,CAAC,EAAE,cAAc,EAAE,UAAU,EAAE;YAChC,CAAC,CAAC,IAAI,CACP,CAAA;KAAA,CACD,CACG,CACL,CAAC;AACH,CAAC,CAAC;AAEF,UAAU,CAAC,IAAI,GAAG,cAAc,CAAC"}
|
|
@@ -35,9 +35,9 @@
|
|
|
35
35
|
}
|
|
36
36
|
.FilterButton.FilterButton--active {
|
|
37
37
|
color: var(--colorsTextSecondary, #6954c0);
|
|
38
|
-
border:
|
|
38
|
+
border-color: transparent;
|
|
39
39
|
background-color: var(--colorsSurfaceSecondarySubdued, #f1edff);
|
|
40
|
-
padding:
|
|
40
|
+
padding: 4px 8px;
|
|
41
41
|
}
|
|
42
42
|
.FilterButton.FilterButton--active .FilterButton__Icon,
|
|
43
43
|
.FilterButton.FilterButton--active .FilterButton__ExpandIcon {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FilterButton.js","sourceRoot":"","sources":["../../../src/components/FilterButton/FilterButton.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAa,MAAM,OAAO,CAAC;AAClC,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAC9D,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,IAAI,EAAmB,MAAM,SAAS,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AA0B7B,MAAM,CAAC,MAAM,YAAY,GAA0B,KAAK,CAAC,UAAU,CAClE,CACC,EAAsE,EACtE,
|
|
1
|
+
{"version":3,"file":"FilterButton.js","sourceRoot":"","sources":["../../../src/components/FilterButton/FilterButton.tsx"],"names":[],"mappings":"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"}
|
|
@@ -35,9 +35,9 @@
|
|
|
35
35
|
}
|
|
36
36
|
.FilterButton.FilterButton--active {
|
|
37
37
|
color: var(--colorsTextSecondary, #6954c0);
|
|
38
|
-
border:
|
|
38
|
+
border-color: transparent;
|
|
39
39
|
background-color: var(--colorsSurfaceSecondarySubdued, #f1edff);
|
|
40
|
-
padding:
|
|
40
|
+
padding: 4px 8px;
|
|
41
41
|
}
|
|
42
42
|
.FilterButton.FilterButton--active .FilterButton__Icon,
|
|
43
43
|
.FilterButton.FilterButton--active .FilterButton__ExpandIcon {
|
|
@@ -13,8 +13,8 @@ export interface FormPropsStrict {
|
|
|
13
13
|
* @param {object} data - All props and the event value.
|
|
14
14
|
*/
|
|
15
15
|
onSubmit?: (event: React.SyntheticEvent, data: any) => void;
|
|
16
|
-
/**
|
|
17
|
-
size?:
|
|
16
|
+
/** @deprecated Semantic UI legacy code */
|
|
17
|
+
size?: string;
|
|
18
18
|
}
|
|
19
19
|
export interface FormProps extends FormPropsStrict {
|
|
20
20
|
/** Unstrict Props */
|
|
@@ -15,18 +15,22 @@ import { FormField } from '../FormField';
|
|
|
15
15
|
import { FormGroup } from '../FormGroup';
|
|
16
16
|
import { FormButton, FormButtonToggle, FormCheckbox, FormColorPicker, FormDatePicker, FormDateRangePicker, FormDropdown, FormInput, FormRadio, FormSelect, FormTextArea, FormTogglebox, FormToggleSwitch, FormAnvilSelect, FormTimePicker, } from '../FormControls';
|
|
17
17
|
export const Form = (_a) => {
|
|
18
|
-
var { action, children, className, el: Element = 'form', onSubmit, size
|
|
18
|
+
var { action, children, className, el: Element = 'form', onSubmit, size } = _a, rest = __rest(_a, ["action", "children", "className", "el", "onSubmit", "size"]);
|
|
19
|
+
React.useEffect(() => {
|
|
20
|
+
if (size)
|
|
21
|
+
console.warn('@servicetitan/design-system: The `size` prop of the Form component has been deprecated.');
|
|
22
|
+
}, [size]);
|
|
19
23
|
const handleSubmit = (e, ...args) => {
|
|
20
24
|
// Third party libs can pass own data as first argument, we need to check that it has preventDefault() method.
|
|
21
25
|
if (typeof action !== 'string') {
|
|
22
26
|
e.preventDefault();
|
|
23
27
|
}
|
|
24
28
|
if (onSubmit) {
|
|
25
|
-
onSubmit(e, Object.assign(Object.assign({},
|
|
29
|
+
onSubmit(e, Object.assign(Object.assign({}, rest), args));
|
|
26
30
|
}
|
|
27
31
|
};
|
|
28
|
-
const FormClasses = classnames('Form', className
|
|
29
|
-
return (React.createElement(Element, Object.assign({},
|
|
32
|
+
const FormClasses = classnames('Form', className);
|
|
33
|
+
return (React.createElement(Element, Object.assign({}, rest, { className: FormClasses, onSubmit: handleSubmit, "data-anvil-component": "Form" }), children));
|
|
30
34
|
};
|
|
31
35
|
Form.Checkbox = FormCheckbox;
|
|
32
36
|
Form.Radio = FormRadio;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Form.js","sourceRoot":"","sources":["../../../src/components/Form/Form.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAa,MAAM,OAAO,CAAC;AAClC,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EACN,UAAU,EACV,gBAAgB,EAChB,YAAY,EACZ,eAAe,EACf,cAAc,EACd,mBAAmB,EACnB,YAAY,EACZ,SAAS,EACT,SAAS,EACT,UAAU,EACV,YAAY,EACZ,aAAa,EACb,gBAAgB,EAChB,eAAe,EACf,cAAc,GACd,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"Form.js","sourceRoot":"","sources":["../../../src/components/Form/Form.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAa,MAAM,OAAO,CAAC;AAClC,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EACN,UAAU,EACV,gBAAgB,EAChB,YAAY,EACZ,eAAe,EACf,cAAc,EACd,mBAAmB,EACnB,YAAY,EACZ,SAAS,EACT,SAAS,EACT,UAAU,EACV,YAAY,EACZ,aAAa,EACb,gBAAgB,EAChB,eAAe,EACf,cAAc,GACd,MAAM,iBAAiB,CAAC;AA6CzB,MAAM,CAAC,MAAM,IAAI,GAAS,CAAC,EAQ1B,EAAE,EAAE;QARsB,EAC1B,MAAM,EACN,QAAQ,EACR,SAAS,EACT,EAAE,EAAE,OAAO,GAAG,MAAM,EACpB,QAAQ,EACR,IAAI,OAEJ,EADG,IAAI,cAPmB,6DAQ1B,CADO;IAEP,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACpB,IAAI,IAAI;YACP,OAAO,CAAC,IAAI,CACX,yFAAyF,CACzF,CAAC;IACJ,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,MAAM,YAAY,GAAG,CACpB,CAAqC,EACrC,GAAG,IAAS,EACX,EAAE;QACH,8GAA8G;QAC9G,IAAI,OAAO,MAAM,KAAK,QAAQ,EAAE;YAC/B,CAAC,CAAC,cAAc,EAAE,CAAC;SACnB;QAED,IAAI,QAAQ,EAAE;YACb,QAAQ,CAAC,CAAC,kCAAO,IAAI,GAAK,IAAI,EAAG,CAAC;SAClC;IACF,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,UAAU,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IAElD,OAAO,CACN,oBAAC,OAAO,oBACH,IAAI,IACR,SAAS,EAAE,WAAW,EACtB,QAAQ,EAAE,YAAY,0BACD,MAAM,KAE1B,QAAQ,CACA,CACV,CAAC;AACH,CAAC,CAAC;AAEF,IAAI,CAAC,QAAQ,GAAG,YAAY,CAAC;AAC7B,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;AACvB,IAAI,CAAC,QAAQ,GAAG,YAAY,CAAC;AAE7B,IAAI,CAAC,MAAM,GAAG,UAAU,CAAC;AACzB,IAAI,CAAC,YAAY,GAAG,gBAAgB,CAAC;AACrC,IAAI,CAAC,WAAW,GAAG,eAAe,CAAC;AACnC,IAAI,CAAC,UAAU,GAAG,cAAc,CAAC;AACjC,IAAI,CAAC,eAAe,GAAG,mBAAmB,CAAC;AAC3C,IAAI,CAAC,QAAQ,GAAG,YAAY,CAAC;AAC7B,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;AACvB,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;AACvB,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;AACvB,IAAI,CAAC,MAAM,GAAG,UAAU,CAAC;AACzB,IAAI,CAAC,SAAS,GAAG,aAAa,CAAC;AAC/B,IAAI,CAAC,YAAY,GAAG,gBAAgB,CAAC;AACrC,IAAI,CAAC,WAAW,GAAG,eAAe,CAAC;AACnC,IAAI,CAAC,UAAU,GAAG,cAAc,CAAC"}
|
|
@@ -24,7 +24,7 @@ export const Sidebar = (_a) => {
|
|
|
24
24
|
return wasPreviouslyOpen ? JSON.parse(wasPreviouslyOpen) : true;
|
|
25
25
|
};
|
|
26
26
|
const screensize = useScreenSize();
|
|
27
|
-
const
|
|
27
|
+
const isDisplaySmall = screensize.smallerThan.desktop;
|
|
28
28
|
const [isHover, setIsHover] = useState(false);
|
|
29
29
|
const [isTempOpen, setIsTempOpen] = useState(false);
|
|
30
30
|
const [isOpen, setIsOpen] = useState(getInitialOpen());
|
|
@@ -32,16 +32,16 @@ export const Sidebar = (_a) => {
|
|
|
32
32
|
const isTouchScreen = typeof window !== 'undefined' &&
|
|
33
33
|
window.matchMedia('(pointer:coarse)').matches;
|
|
34
34
|
const SidebarClasses = classnames('Sidebar', className, {
|
|
35
|
-
'Sidebar--collapsed': !isOpen ||
|
|
35
|
+
'Sidebar--collapsed': !isOpen || isDisplaySmall,
|
|
36
36
|
'Sidebar--temporary': isTempOpen,
|
|
37
37
|
'Sidebar--touch': isTouchScreen,
|
|
38
38
|
});
|
|
39
39
|
const toggleButtonClasses = classnames('Sidebar__toggle-button', {
|
|
40
|
-
'Sidebar__toggle-button-visible': isTouchScreen || !isOpen ||
|
|
40
|
+
'Sidebar__toggle-button-visible': isTouchScreen || !isOpen || isDisplaySmall,
|
|
41
41
|
});
|
|
42
|
-
const iconName =
|
|
42
|
+
const iconName = isDisplaySmall && isTempOpen
|
|
43
43
|
? 'keyboard_arrow_left'
|
|
44
|
-
:
|
|
44
|
+
: isDisplaySmall && !isTempOpen
|
|
45
45
|
? 'keyboard_arrow_right'
|
|
46
46
|
: isOpen
|
|
47
47
|
? 'keyboard_arrow_left'
|
|
@@ -50,19 +50,21 @@ export const Sidebar = (_a) => {
|
|
|
50
50
|
const [tooltipText, setTooltipText] = useState();
|
|
51
51
|
useEffect(() => {
|
|
52
52
|
const getTooltipText = () => {
|
|
53
|
-
if (isTempOpen
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
53
|
+
if (isTempOpen) {
|
|
54
|
+
if (!isDisplaySmall)
|
|
55
|
+
return 'Keep sidebar open';
|
|
56
|
+
if (isDisplaySmall)
|
|
57
|
+
return 'Close sidebar';
|
|
58
|
+
}
|
|
59
|
+
if (!isOpen || isDisplaySmall)
|
|
58
60
|
return 'Open sidebar';
|
|
59
61
|
return 'Close sidebar';
|
|
60
62
|
};
|
|
61
63
|
setTooltipText(getTooltipText());
|
|
62
|
-
}, [
|
|
64
|
+
}, [isDisplaySmall, isHover, isOpen, isTempOpen]);
|
|
63
65
|
const handleHover = (state, delay = 300) => {
|
|
64
66
|
clearTimeout(hoverTimeout.current);
|
|
65
|
-
if (!isOpen ||
|
|
67
|
+
if (!isOpen || isDisplaySmall) {
|
|
66
68
|
setIsHover(state);
|
|
67
69
|
hoverTimeout.current = setTimeout(() => {
|
|
68
70
|
setIsTempOpen(state);
|
|
@@ -70,7 +72,7 @@ export const Sidebar = (_a) => {
|
|
|
70
72
|
}
|
|
71
73
|
};
|
|
72
74
|
const open = () => {
|
|
73
|
-
if (
|
|
75
|
+
if (!isDisplaySmall) {
|
|
74
76
|
handleHover(false, 0);
|
|
75
77
|
setIsOpen(!isOpen);
|
|
76
78
|
return;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Sidebar.js","sourceRoot":"","sources":["../../../src/components/Sidebar/Sidebar.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAM,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC/D,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAsBlD,MAAM,CAAC,MAAM,OAAO,GAAY,CAAC,EAMhC,EAAE,EAAE;QAN4B,EAChC,EAAE,EAAE,OAAO,GAAG,KAAK,EACnB,SAAS,EACT,eAAe,EACf,QAAQ,OAER,EADG,IAAI,cALyB,kDAMhC,CADO;IAEP,MAAM,UAAU,GAAG,MAAM,EAAkB,CAAC;IAE5C,MAAM,cAAc,GAAG,GAAG,EAAE;QAC3B,MAAM,iBAAiB,GACtB,OAAO,MAAM,KAAK,WAAW;YAC7B,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;QAC9C,OAAO,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IACjE,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,aAAa,EAAE,CAAC;IACnC,MAAM,cAAc,GAAG,UAAU,CAAC,
|
|
1
|
+
{"version":3,"file":"Sidebar.js","sourceRoot":"","sources":["../../../src/components/Sidebar/Sidebar.tsx"],"names":[],"mappings":"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"}
|
|
@@ -3,23 +3,25 @@ import React, { FC } from 'react';
|
|
|
3
3
|
* Link properties
|
|
4
4
|
*/
|
|
5
5
|
export interface SnackbarPropsStrict {
|
|
6
|
-
/**
|
|
7
|
-
* @deprecated - use input.size
|
|
8
|
-
*/
|
|
6
|
+
/** Name of the action shown to users */
|
|
9
7
|
actionName?: string;
|
|
10
8
|
/** Adds one or more classnames for an element */
|
|
11
9
|
className?: string;
|
|
12
|
-
/**
|
|
10
|
+
/**
|
|
11
|
+
* How long the Snackbar stays on screen.
|
|
12
|
+
* Default is 5000.
|
|
13
|
+
*/
|
|
13
14
|
duration?: number;
|
|
14
|
-
/**
|
|
15
|
+
/** Fired when the user clicks on the action */
|
|
15
16
|
onActionClick?: (e: React.SyntheticEvent<HTMLElement>) => void;
|
|
16
|
-
/**
|
|
17
|
+
/** Fired when the user clicks the close icon */
|
|
17
18
|
onClose?: (e?: React.SyntheticEvent<HTMLElement>) => void;
|
|
18
|
-
/** Makes Snackbar open through ReactDOM.createPortal */
|
|
19
|
-
portal?: boolean;
|
|
20
19
|
/**
|
|
21
|
-
*
|
|
20
|
+
* Makes Snackbar open through ReactDOM.createPortal
|
|
21
|
+
* Default is true.
|
|
22
22
|
*/
|
|
23
|
+
portal?: boolean;
|
|
24
|
+
/** The message displayed to the user */
|
|
23
25
|
title: string;
|
|
24
26
|
}
|
|
25
27
|
export interface SnackbarProps extends SnackbarPropsStrict {
|
|
@@ -14,15 +14,13 @@ import classnames from 'classnames';
|
|
|
14
14
|
import { Button } from '../Button';
|
|
15
15
|
import { Portal } from '../../internal/Portal';
|
|
16
16
|
export const Snackbar = (_a) => {
|
|
17
|
-
var { actionName, className, duration = 5000, onActionClick, onClose, portal = true, title } = _a,
|
|
17
|
+
var { actionName, className, duration = 5000, onActionClick, onClose, portal = true, title } = _a, rest = __rest(_a, ["actionName", "className", "duration", "onActionClick", "onClose", "portal", "title"]);
|
|
18
18
|
const [visible, setVisible] = useState(true);
|
|
19
19
|
const snackbarRef = useRef(null);
|
|
20
20
|
const handleClose = React.useCallback((e) => {
|
|
21
21
|
setVisible(false);
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
if (snackbarRef.current != null)
|
|
25
|
-
clearTimeout(snackbarRef.current);
|
|
22
|
+
onClose === null || onClose === void 0 ? void 0 : onClose(e);
|
|
23
|
+
clearTimeout(snackbarRef === null || snackbarRef === void 0 ? void 0 : snackbarRef.current);
|
|
26
24
|
}, [onClose]);
|
|
27
25
|
useEffect(() => {
|
|
28
26
|
if (duration === null || duration === 0)
|
|
@@ -35,7 +33,7 @@ export const Snackbar = (_a) => {
|
|
|
35
33
|
const SnackbarClasses = classnames('Snackbar', className, {
|
|
36
34
|
'Snackbar--floating': portal,
|
|
37
35
|
});
|
|
38
|
-
const snackbar = (React.createElement("div", Object.assign({ className: SnackbarClasses, "data-anvil-component": "Snackbar" },
|
|
36
|
+
const snackbar = (React.createElement("div", Object.assign({ className: SnackbarClasses, "data-anvil-component": "Snackbar" }, rest),
|
|
39
37
|
title && React.createElement("div", { className: "Snackbar__title" }, title),
|
|
40
38
|
actionName && onActionClick && (React.createElement("div", { onClick: onActionClick, className: "Snackbar__action" }, actionName)),
|
|
41
39
|
onClose && (React.createElement(Button, { fill: "subtle", className: "Snackbar__close", iconName: "clear", size: "xsmall", onClick: handleClose }))));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Snackbar.js","sourceRoot":"","sources":["../../../src/components/Snackbar/Snackbar.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAM,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC/D,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"Snackbar.js","sourceRoot":"","sources":["../../../src/components/Snackbar/Snackbar.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAM,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC/D,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAsC/C,MAAM,CAAC,MAAM,QAAQ,GAAsB,CAAC,EAS3C,EAAE,EAAE;QATuC,EAC3C,UAAU,EACV,SAAS,EACT,QAAQ,GAAG,IAAI,EACf,aAAa,EACb,OAAO,EACP,MAAM,GAAG,IAAI,EACb,KAAK,OAEL,EADG,IAAI,cARoC,sFAS3C,CADO;IAEP,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC7C,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAEjC,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CACpC,CAAC,CAAqC,EAAE,EAAE;QACzC,UAAU,CAAC,KAAK,CAAC,CAAC;QAClB,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,CAAC,CAAC,CAAC;QACb,YAAY,CAAC,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,OAAO,CAAC,CAAC;IACpC,CAAC,EACD,CAAC,OAAO,CAAC,CACT,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACd,IAAI,QAAQ,KAAK,IAAI,IAAI,QAAQ,KAAK,CAAC;YAAE,OAAO;QAChD,WAAW,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,WAAW,EAAE,EAAE,QAAQ,CAAC,CAAC;QAChE,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IAChD,CAAC,EAAE,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC;IAE5B,IAAI,CAAC,OAAO;QAAE,OAAO,IAAI,CAAC;IAE1B,MAAM,eAAe,GAAG,UAAU,CAAC,UAAU,EAAE,SAAS,EAAE;QACzD,oBAAoB,EAAE,MAAM;KAC5B,CAAC,CAAC;IAEH,MAAM,QAAQ,GAAG,CAChB,2CACC,SAAS,EAAE,eAAe,0BACL,UAAU,IAC3B,IAAI;QAEP,KAAK,IAAI,6BAAK,SAAS,EAAC,iBAAiB,IAAE,KAAK,CAAO;QACvD,UAAU,IAAI,aAAa,IAAI,CAC/B,6BAAK,OAAO,EAAE,aAAa,EAAE,SAAS,EAAC,kBAAkB,IACvD,UAAU,CACN,CACN;QACA,OAAO,IAAI,CACX,oBAAC,MAAM,IACN,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,iBAAiB,EAC3B,QAAQ,EAAC,OAAO,EAChB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,WAAW,GACnB,CACF,CACI,CACN,CAAC;IAEF,OAAO,oBAAC,MAAM,IAAC,WAAW,EAAE,MAAM,IAAG,QAAQ,CAAU,CAAC;AACzD,CAAC,CAAC"}
|
|
@@ -27,7 +27,7 @@ export const Stack = React.forwardRef((_a, ref) => {
|
|
|
27
27
|
if (vertical) {
|
|
28
28
|
console.warn('@servicetitan/design-system: The `vertical` prop of the Stack component has been deprecated. Please use `direction` instead.');
|
|
29
29
|
}
|
|
30
|
-
});
|
|
30
|
+
}, [nowrap, alignment, distribution, vertical]);
|
|
31
31
|
const getFlexWrap = () => {
|
|
32
32
|
if (nowrap)
|
|
33
33
|
return 'wrap';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Stack.js","sourceRoot":"","sources":["../../../src/components/Stack/Stack.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAmExC,MAAM,CAAC,MAAM,KAAK,GAAU,KAAK,CAAC,UAAU,CAC3C,CACC,EAcC,EACD,GAAyB,EACxB,EAAE;QAhBH,EACC,QAAQ,EACR,SAAS,EACT,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,CAAC,EACX,YAAY,GAAG,SAAS,EACxB,SAAS,GAAG,MAAM,EAClB,MAAM,GAAG,KAAK,EACd,IAAI,GAAG,QAAQ,EACf,SAAS,GAAG,KAAK,EACjB,cAAc,GAAG,YAAY,EAC7B,UAAU,GAAG,SAAS,EACtB,YAAY,GAAG,SAAS,OAExB,EADG,IAAI,cAbR,4JAcC,CADO;IAIR,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACpB,IAAI,MAAM,EAAE;YACX,OAAO,CAAC,IAAI,CACX,uHAAuH,CACvH,CAAC;SACF;QAED,IAAI,SAAS,KAAK,MAAM,EAAE;YACzB,OAAO,CAAC,IAAI,CACX,gIAAgI,CAChI,CAAC;SACF;QAED,IAAI,YAAY,KAAK,SAAS,EAAE;YAC/B,OAAO,CAAC,IAAI,CACX,uIAAuI,CACvI,CAAC;SACF;QAED,IAAI,QAAQ,EAAE;YACb,OAAO,CAAC,IAAI,CACX,8HAA8H,CAC9H,CAAC;SACF;IACF,CAAC,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"Stack.js","sourceRoot":"","sources":["../../../src/components/Stack/Stack.tsx"],"names":[],"mappings":"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"}
|
|
@@ -188,4 +188,13 @@
|
|
|
188
188
|
scroll-margin: 8px;
|
|
189
189
|
}
|
|
190
190
|
|
|
191
|
+
.TimePicker--open .Input:not(:focus) > .Input__InnerWrapper {
|
|
192
|
+
background-color: var(--colorsSurfaceDefault, #ffffff);
|
|
193
|
+
border-color: var(--colorsBorderPrimary, #2270ee);
|
|
194
|
+
}
|
|
195
|
+
.TimePicker--open .Input.Input--error:not(:focus) > .Input__InnerWrapper {
|
|
196
|
+
background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
|
|
197
|
+
border-color: var(--colorsBorderCritical, #e13212);
|
|
198
|
+
}
|
|
199
|
+
|
|
191
200
|
/*# sourceMappingURL=TimePicker.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/OptionList/OptionList.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/core/tokens.scss","../../../src/components/TimePicker/TimePicker.scss"],"names":[],"mappings":"AAAA;ACQC;EACC;EACA;EACA;EACA;EACA;EACA;EACA,kBAXwB;;;AAe1B;AClBC;EACA;AAEA;EACA;;;ADkBD;AAEC;EACC;;;AAIF;AACA;EACC,eE+FW;EF9FX,eEZiB;EFajB;EACA;EACA;AAsBA;;AAfA;EACC,WE6FY;EF5FZ,aE+DoB;EF9DpB;;AAGA;EACC;EACA;EACA;;AAIF;EAAc;;AAGd;EACC;EACA;;AAED;EAAiB;;;AAGlB;EACC;EACA,gBE0DW;EFzDX,cE0DW;;;AFtDX;EAKC,kBA3EyB;;AAuEzB;EACC,OAtEkB;;AA6ElB;EAAY,kBA/EY;;;AAoF3B;AACA;EAAsC,cEuC1B;;;AFnCV;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AAKH;AACA;EACC;EACA;EACA;EACA,cE+Bc;;;AF5Bf;AACA;EACC;EACA;EACA;;;AAGD;AAEC;EAAwB;;AACxB;EAAiB;;;AAGlB;AACA;EACC;EACA;EACA;EACA;EACA,cECW;;;AFEZ;AAAA;AAAA;AAAA;AAKC;AAAA;EAGC;;AAEA;AAAA;EACC;;AAIF;EAAwB;;;AAGzB;AAAA;AAAA;AAAA;AAKC;EAAwB;;;
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/OptionList/OptionList.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/core/tokens.scss","../../../src/components/TimePicker/TimePicker.scss"],"names":[],"mappings":"AAAA;ACQC;EACC;EACA;EACA;EACA;EACA;EACA;EACA,kBAXwB;;;AAe1B;AClBC;EACA;AAEA;EACA;;;ADkBD;AAEC;EACC;;;AAIF;AACA;EACC,eE+FW;EF9FX,eEZiB;EFajB;EACA;EACA;AAsBA;;AAfA;EACC,WE6FY;EF5FZ,aE+DoB;EF9DpB;;AAGA;EACC;EACA;EACA;;AAIF;EAAc;;AAGd;EACC;EACA;;AAED;EAAiB;;;AAGlB;EACC;EACA,gBE0DW;EFzDX,cE0DW;;;AFtDX;EAKC,kBA3EyB;;AAuEzB;EACC,OAtEkB;;AA6ElB;EAAY,kBA/EY;;;AAoF3B;AACA;EAAsC,cEuC1B;;;AFnCV;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AAKH;AACA;EACC;EACA;EACA;EACA,cE+Bc;;;AF5Bf;AACA;EACC;EACA;EACA;;;AAGD;AAEC;EAAwB;;AACxB;EAAiB;;;AAGlB;AACA;EACC;EACA;EACA;EACA;EACA,cECW;;;AFEZ;AAAA;AAAA;AAAA;AAKC;AAAA;EAGC;;AAEA;AAAA;EACC;;AAIF;EAAwB;;;AAGzB;AAAA;AAAA;AAAA;AAKC;EAAwB;;;AG9IzB;AFRC;EACA;AAEA;EACA;EEOA;;AAEA;EACC;EACA;;;AAIF;EAAqB;;;AACrB;EAAgD;;;AAEhD;EACC;EACA;;AAEA;EAAoB;;;AAQrB;EAAuC,eD2F3B;;;ACtFV;EACC,kBArCkB;EAsClB,cApCe;;AAyChB;EACC,kBA3CgB;EA4ChB,cA1CY","file":"TimePicker.css"}
|
|
@@ -23,25 +23,34 @@ export interface TimePickerPropsStrict extends Omit<InputProps, 'value' | 'place
|
|
|
23
23
|
/**
|
|
24
24
|
* Specified in minutes, default is 30. Should not exceed 1440 (24 hours).
|
|
25
25
|
* Step used to:
|
|
26
|
-
* 1. hide intermediate values (these values are still possible to pick
|
|
26
|
+
* 1. hide intermediate values (these values are still possible to pick by typing)
|
|
27
27
|
* from TimePicker's dropdown if `autoRounding` is false, or
|
|
28
28
|
* 2. generate strict values for dropdown options if `autoRounding` is true.
|
|
29
29
|
*/
|
|
30
30
|
step?: number;
|
|
31
31
|
/**
|
|
32
|
-
* Time format
|
|
33
|
-
*
|
|
32
|
+
* Time format.
|
|
33
|
+
* Value of `hh:mm` stands for 24-hour format with leading zero.
|
|
34
|
+
* Default value is `hh:mm xm`.
|
|
34
35
|
*/
|
|
35
36
|
format?: 'hh:mm xm' | 'hh:mm';
|
|
36
|
-
/**
|
|
37
|
-
|
|
38
|
-
|
|
37
|
+
/**
|
|
38
|
+
* Minimum time allowed.
|
|
39
|
+
* String value must have `hh:mm xm` or `hh:mm` format.
|
|
40
|
+
* Default is `12:00 AM`.
|
|
41
|
+
*/
|
|
39
42
|
min?: Date | string;
|
|
43
|
+
/**
|
|
44
|
+
* Maximum time allowed.
|
|
45
|
+
* String value must have `hh:mm xm` or `hh:mm` format.
|
|
46
|
+
* Default is `23:59 PM`.
|
|
47
|
+
*/
|
|
48
|
+
max?: Date | string;
|
|
40
49
|
/** Called when the user changes the value */
|
|
41
50
|
onChange?: (value: TimePickerOptionProps['value']) => void;
|
|
42
51
|
/** Show a dropdown on render, if `disableDropdown` is unset */
|
|
43
52
|
open?: boolean;
|
|
44
|
-
/**
|
|
53
|
+
/** Date object, unrestricted by min and max props */
|
|
45
54
|
value?: TimePickerOptionProps['value'];
|
|
46
55
|
/** Passed as width prop into TimePicker's dropdown */
|
|
47
56
|
width?: PopoverProps['width'];
|
|
@@ -14,57 +14,86 @@ import classnames from 'classnames';
|
|
|
14
14
|
import { FocusScope } from '@react-aria/focus';
|
|
15
15
|
import { Input } from '../Input';
|
|
16
16
|
import { Popover } from '../Popover';
|
|
17
|
+
import { TimezoneContext } from '../../utilities/TimezoneProvider';
|
|
17
18
|
import { keys } from '../../utilities';
|
|
18
|
-
import {
|
|
19
|
+
import { dateToTime as dtt, timeToDate as ttd, localTimezone, consumeMinMax, getReturnDate, generateOptions, filterOptionsWithRounding, filterOptions, getClosestOption, getOptionByText, getClosestIndexes, stringToDate, highlightOption, injectOption, } from './utils';
|
|
19
20
|
import { TimePickerOptionList } from './components';
|
|
20
21
|
export const TimePicker = React.forwardRef((props, ref) => {
|
|
21
22
|
var _a;
|
|
22
|
-
const { autoRounding = false, className, defaultTimeSignifier = 'AM', disabled, disableDropdown = false, direction = 'br', error, fluid, format = 'hh:mm xm',
|
|
23
|
+
const { autoRounding = false, className, defaultTimeSignifier = 'AM', disabled, disableDropdown = false, direction = 'br', error, fluid, format = 'hh:mm xm', min = '12:00 AM', max = '23:59 PM', onChange, open, placeholder, step = 30, size, value, width = '100' } = props, rest = __rest(props, ["autoRounding", "className", "defaultTimeSignifier", "disabled", "disableDropdown", "direction", "error", "fluid", "format", "min", "max", "onChange", "open", "placeholder", "step", "size", "value", "width"]);
|
|
24
|
+
const timezone = React.useContext(TimezoneContext);
|
|
25
|
+
// Date (00:00 in timezone), based on which selected time to be returned
|
|
26
|
+
const returnDate = () => getReturnDate(min, max, value, timezone);
|
|
27
|
+
const dateToTime = (d, tz) => dtt(d, tz || timezone, format);
|
|
28
|
+
const timeToDate = (t) => ttd(t, timezone, returnDate());
|
|
29
|
+
/**
|
|
30
|
+
* In case min or max provided as strings, no timezone adjustment needed.
|
|
31
|
+
* In case of Date objects, their time should be adjusted to timezone provided.
|
|
32
|
+
*/
|
|
33
|
+
const mm = () => consumeMinMax(min, max, timezone);
|
|
23
34
|
const inputRef = React.useRef(null);
|
|
24
35
|
const dropdownRef = React.useRef(null);
|
|
25
|
-
const [opened, setOpened] = React.useState(
|
|
36
|
+
const [opened, setOpened] = React.useState(false); // Dropdown's visibility
|
|
26
37
|
const [dropdownFocused, setDropdownFocused] = React.useState(false); // Dropdown is in focus
|
|
27
38
|
const [input, setInput] = React.useState(''); // User's input string
|
|
28
39
|
const [filter, setFilter] = React.useState(''); // Dropdown's options filter string (differs from user's input)
|
|
29
|
-
|
|
30
|
-
const valueToText = useCallback((value) => {
|
|
31
|
-
if (typeof value === 'undefined')
|
|
32
|
-
return '';
|
|
33
|
-
return toTimeFormat(value, format) || '';
|
|
34
|
-
}, [format]);
|
|
40
|
+
// Effects
|
|
35
41
|
useEffect(() => {
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
42
|
+
if (disableDropdown || disabled) {
|
|
43
|
+
setOpened(false);
|
|
44
|
+
return;
|
|
45
|
+
}
|
|
46
|
+
setOpened(open);
|
|
47
|
+
}, [disableDropdown, disabled, open]);
|
|
48
|
+
useEffect(() => {
|
|
49
|
+
// Set input's text on each non-null value change or timezone change
|
|
50
|
+
const text = typeof value === 'string' ? value : dateToTime(value) || ''; // Try to parse value: string, if `value: Date` use TZ
|
|
51
|
+
if (text !== input)
|
|
52
|
+
setInput(text);
|
|
53
|
+
}, [value, timezone]); // eslint-disable-line
|
|
41
54
|
useEffect(() => {
|
|
42
55
|
// Perform autocomplete on first render to convert "value: string" into "value: Date"
|
|
43
56
|
autoComplete();
|
|
44
57
|
}, []); // eslint-disable-line
|
|
58
|
+
useEffect(() => {
|
|
59
|
+
// Scrolls closest value into view
|
|
60
|
+
if (!opened || input === '' || filter !== '')
|
|
61
|
+
return;
|
|
62
|
+
const timer = setTimeout(() => scrollOptionIntoView(input, options, dropdownRef), 10);
|
|
63
|
+
return () => clearTimeout(timer);
|
|
64
|
+
}, [opened, input, filter]); // eslint-disable-line
|
|
45
65
|
const handleInputFocus = () => {
|
|
46
66
|
if (disabled)
|
|
47
67
|
return;
|
|
48
|
-
|
|
49
|
-
if (input === valueToText(value))
|
|
68
|
+
if (input === dateToTime(value))
|
|
50
69
|
setFilter(''); // Don't filter options until typing
|
|
51
|
-
|
|
70
|
+
setDropdownFocused(false); // Dropdown unfocus
|
|
71
|
+
if (!disableDropdown && !opened)
|
|
52
72
|
setOpened(true);
|
|
53
73
|
};
|
|
74
|
+
let mouseDownOnDropdown = false; // To be false on each re-render
|
|
75
|
+
// Prevents onBlur event handling on input when clicked inside dropdown
|
|
76
|
+
const handleDropdownMouseDown = () => (mouseDownOnDropdown = true);
|
|
77
|
+
const handleClickOutside = () => {
|
|
78
|
+
if (!opened || disabled || disableDropdown)
|
|
79
|
+
return;
|
|
80
|
+
setOpened(false);
|
|
81
|
+
autoComplete();
|
|
82
|
+
};
|
|
54
83
|
const handleInputBlur = () => {
|
|
55
84
|
// User is choosing from dropdown'ed options
|
|
56
85
|
if (dropdownFocused && !disableDropdown)
|
|
57
86
|
return;
|
|
58
|
-
// User clicked inside
|
|
59
|
-
if (
|
|
87
|
+
// User clicked inside dropdown, prevent blur handling on input
|
|
88
|
+
if (mouseDownOnDropdown)
|
|
60
89
|
return;
|
|
61
90
|
// Fake blur detection, case if active element not changed (alt+tab, etc)
|
|
62
91
|
if (document.activeElement === getNode(inputRef))
|
|
63
92
|
return;
|
|
64
93
|
autoComplete();
|
|
65
94
|
};
|
|
66
|
-
// Initial list of options to be generated based on min, max
|
|
67
|
-
const optionsArgs = [min, max, step, format];
|
|
95
|
+
// Initial list of options to be generated based on min, max, step
|
|
96
|
+
const optionsArgs = [mm().min, mm().max, step, format];
|
|
68
97
|
const options = useCallback(generateOptions, optionsArgs)(...optionsArgs);
|
|
69
98
|
// Getting most expected option based on user's input
|
|
70
99
|
const getClosestOptionArgs = [
|
|
@@ -72,8 +101,8 @@ export const TimePicker = React.forwardRef((props, ref) => {
|
|
|
72
101
|
input,
|
|
73
102
|
defaultTimeSignifier,
|
|
74
103
|
autoRounding,
|
|
75
|
-
min,
|
|
76
|
-
max,
|
|
104
|
+
mm().min,
|
|
105
|
+
mm().max,
|
|
77
106
|
format,
|
|
78
107
|
];
|
|
79
108
|
const closestOption = useCallback(getClosestOption, getClosestOptionArgs)(...getClosestOptionArgs);
|
|
@@ -100,8 +129,10 @@ export const TimePicker = React.forwardRef((props, ref) => {
|
|
|
100
129
|
if (input === '')
|
|
101
130
|
return;
|
|
102
131
|
if (closestOption) {
|
|
132
|
+
if (closestOption.text === dateToTime(value))
|
|
133
|
+
return; // It is nothing to change out there
|
|
103
134
|
// Accept user input
|
|
104
|
-
onChange(closestOption.
|
|
135
|
+
onChange(timeToDate(closestOption.text));
|
|
105
136
|
}
|
|
106
137
|
else {
|
|
107
138
|
// Reject user input, if input !== ''
|
|
@@ -119,18 +150,13 @@ export const TimePicker = React.forwardRef((props, ref) => {
|
|
|
119
150
|
if (!opened && !disableDropdown)
|
|
120
151
|
setOpened(true);
|
|
121
152
|
};
|
|
122
|
-
const handleClickOutside = () => {
|
|
123
|
-
if (!opened || disabled || disableDropdown)
|
|
124
|
-
return;
|
|
125
|
-
setOpened(false);
|
|
126
|
-
autoComplete();
|
|
127
|
-
};
|
|
128
153
|
const handleIconClick = () => {
|
|
129
154
|
if (disabled)
|
|
130
155
|
return;
|
|
131
|
-
|
|
132
|
-
if (
|
|
133
|
-
|
|
156
|
+
focus(inputRef);
|
|
157
|
+
if (opened || disableDropdown)
|
|
158
|
+
return;
|
|
159
|
+
setOpened(true);
|
|
134
160
|
};
|
|
135
161
|
const handleInputKeyDown = (e) => {
|
|
136
162
|
const { key } = e;
|
|
@@ -156,31 +182,20 @@ export const TimePicker = React.forwardRef((props, ref) => {
|
|
|
156
182
|
};
|
|
157
183
|
const dropdownFocusValue = () => {
|
|
158
184
|
const focusValue = closestOption
|
|
159
|
-
?
|
|
185
|
+
? getOptionByText(dropdownOptions, closestOption.text)
|
|
160
186
|
: dropdownOptions[0];
|
|
161
187
|
return dropdownFocused ? focusValue : null;
|
|
162
188
|
};
|
|
163
|
-
const
|
|
164
|
-
|
|
165
|
-
|
|
189
|
+
const handleDropdownChange = (val) => {
|
|
190
|
+
const time = dateToTime(val, localTimezone); // Dropdown is using local
|
|
191
|
+
const date = timeToDate(time); // get date based on timezone and returnDate
|
|
192
|
+
onChange(date);
|
|
193
|
+
setInput(time);
|
|
166
194
|
setFilter('');
|
|
167
|
-
|
|
195
|
+
focus(inputRef); // Move focus back to the field
|
|
168
196
|
if (opened)
|
|
169
197
|
setOpened(false);
|
|
170
198
|
};
|
|
171
|
-
// Needed to prevent onBlur event handling on input when clicked inside hint
|
|
172
|
-
const handleMouseDownHint = () => (isMouseDownOnHint = true);
|
|
173
|
-
useEffect(() => {
|
|
174
|
-
// Scrolls closest value into view
|
|
175
|
-
if (!opened || input === '' || filter !== '')
|
|
176
|
-
return;
|
|
177
|
-
const timer = setTimeout(() => scrollOptionIntoView(input, options, dropdownRef), 10);
|
|
178
|
-
return () => clearTimeout(timer);
|
|
179
|
-
}, [opened, input, filter]); // eslint-disable-line
|
|
180
|
-
const TimePickerClasses = classnames(className, 'TimePicker', {
|
|
181
|
-
'TimePicker--disabled': disabled,
|
|
182
|
-
[`TimePicker--${size}`]: size,
|
|
183
|
-
});
|
|
184
199
|
const inputProps = {
|
|
185
200
|
fluid,
|
|
186
201
|
disabled,
|
|
@@ -200,7 +215,7 @@ export const TimePicker = React.forwardRef((props, ref) => {
|
|
|
200
215
|
}),
|
|
201
216
|
focusValue: dropdownFocusValue(),
|
|
202
217
|
options: dropdownOptions,
|
|
203
|
-
onChange:
|
|
218
|
+
onChange: handleDropdownChange,
|
|
204
219
|
inputRef: ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.inputRef) || inputRef,
|
|
205
220
|
dropdownRef,
|
|
206
221
|
handleInputKeyDown,
|
|
@@ -211,10 +226,15 @@ export const TimePicker = React.forwardRef((props, ref) => {
|
|
|
211
226
|
name: 'access_time',
|
|
212
227
|
onClick: handleIconClick,
|
|
213
228
|
}, iconPosition: "left", onKeyDown: handleInputKeyDown, ref: inputRef })));
|
|
229
|
+
const TimePickerClasses = classnames(className, 'TimePicker', {
|
|
230
|
+
'TimePicker--open': opened,
|
|
231
|
+
'TimePicker--disabled': disabled,
|
|
232
|
+
[`TimePicker--${size}`]: size,
|
|
233
|
+
});
|
|
214
234
|
return (React.createElement(Popover, Object.assign({ autoFlipVertically: true, className: classnames('TimePicker__dropdown', 'a-Select'), direction: direction, onClickOutside: handleClickOutside, open: !disabled &&
|
|
215
235
|
!disableDropdown &&
|
|
216
236
|
opened &&
|
|
217
|
-
dropdownOptions.length !== 0, padding: null, portal: true, ref: ref, scrollHeight: props.scrollHeight || '192px', trigger: Field, width: width, wrapperClassName: TimePickerClasses, onMouseDown:
|
|
237
|
+
dropdownOptions.length !== 0, padding: null, portal: true, ref: ref, scrollHeight: props.scrollHeight || '192px', trigger: Field, width: width, wrapperClassName: TimePickerClasses, onMouseDown: handleDropdownMouseDown }, rest),
|
|
218
238
|
React.createElement(FocusScope, null,
|
|
219
239
|
React.createElement(TimePickerOptionList, Object.assign({}, dropdownProps)))));
|
|
220
240
|
});
|
|
@@ -226,7 +246,7 @@ const getNode = (ref) => {
|
|
|
226
246
|
}
|
|
227
247
|
return ref.current; // Something else
|
|
228
248
|
};
|
|
229
|
-
const
|
|
249
|
+
const focus = (ref) => getNode(ref).focus();
|
|
230
250
|
const scrollOptionIntoView = (userInput, options, dropdownRef) => {
|
|
231
251
|
var _a;
|
|
232
252
|
if (!(dropdownRef === null || dropdownRef === void 0 ? void 0 : dropdownRef.current))
|