@hazelcast/ui 1.3.0 → 1.3.2-next.3
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/lib/AutocompleteField.d.ts +1 -0
- package/lib/AutocompleteField.js +6 -3
- package/lib/AutocompleteField.js.map +1 -1
- package/lib/Link.d.ts +2 -1
- package/lib/Link.js +3 -2
- package/lib/Link.js.map +1 -1
- package/lib/Link.module.scss +12 -2
- package/package.json +5 -5
- package/lib/Calendar/components/CalendarHeader.tsx +0 -45
- package/lib/Calendar/components/CalendarInput.tsx +0 -50
- package/lib/Calendar/components/CalendarTime.tsx +0 -117
- package/lib/Calendar/helpers/consts.ts +0 -99
package/lib/AutocompleteField.js
CHANGED
|
@@ -54,7 +54,7 @@ export const highlightOptionText = (labelText, inputValue) => {
|
|
|
54
54
|
}), key: val + `${i}` }, val)))
|
|
55
55
|
: labelText;
|
|
56
56
|
};
|
|
57
|
-
export const AutocompleteField = ({ 'data-test': dataTest, className, disabled, error, errorClassName, isClearable, label, labelClassName, helperText, menuPortalTarget = 'body', name, onChange, onFocus, onBlur, onInputChange, options, required, value, placeholder = 'Search...', renderOption, ...rest }) => {
|
|
57
|
+
export const AutocompleteField = ({ 'data-test': dataTest, className, disabled, error, errorClassName, isClearable, label, labelClassName, helperText, menuPortalTarget = 'body', name, onChange, onFocus, onBlur, onInputChange, options, required, value, placeholder = 'Search...', renderOption, openMenuOnClick = true, ...rest }) => {
|
|
58
58
|
// when the user clicks on an input with the value, the value should disappear,
|
|
59
59
|
// but then it should appear after the user selects something or blurs the input
|
|
60
60
|
const [isValueHidden, setValueHidden] = useState(false);
|
|
@@ -78,7 +78,9 @@ export const AutocompleteField = ({ 'data-test': dataTest, className, disabled,
|
|
|
78
78
|
if (onFocus) {
|
|
79
79
|
onFocus(e);
|
|
80
80
|
}
|
|
81
|
-
|
|
81
|
+
if (!openMenuOnClick) {
|
|
82
|
+
setValueHidden(true);
|
|
83
|
+
}
|
|
82
84
|
}, [onFocus]);
|
|
83
85
|
const onBlurFn = React.useCallback((e) => {
|
|
84
86
|
if (onBlur) {
|
|
@@ -130,6 +132,7 @@ export const AutocompleteField = ({ 'data-test': dataTest, className, disabled,
|
|
|
130
132
|
ClearIndicator,
|
|
131
133
|
Input,
|
|
132
134
|
},
|
|
135
|
+
openMenuOnClick,
|
|
133
136
|
...rest,
|
|
134
137
|
};
|
|
135
138
|
return (React.createElement("div", { "data-test": dataTest, className: cn(styles.container, {
|
|
@@ -144,7 +147,7 @@ export const AutocompleteField = ({ 'data-test': dataTest, className, disabled,
|
|
|
144
147
|
styles.menuContainer, className) },
|
|
145
148
|
React.createElement(Label, { id: id, label: label, className: cn(styles.label, labelClassName) }),
|
|
146
149
|
React.createElement("div", { className: styles.selectBlock },
|
|
147
|
-
React.createElement(ReactSelect, { onInputChange: onInputChange, formatOptionLabel: formatOptionLabelFn,
|
|
150
|
+
React.createElement(ReactSelect, { onInputChange: onInputChange, formatOptionLabel: formatOptionLabelFn, styles: {
|
|
148
151
|
...props.styles,
|
|
149
152
|
singleValue: (base) => {
|
|
150
153
|
var _a;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AutocompleteField.js","sourceRoot":"","sources":["../src/AutocompleteField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAwC,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACtF,OAAO,WAAW,EAAE,EAAc,UAAU,EAAa,MAAM,cAAc,CAAA;AAC7E,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,eAAe,CAAA;AACzC,OAAO,yBAAyB,MAAM,yCAAyC,CAAA;AAC/E,OAAO,MAAM,MAAM,iCAAiC,CAAA;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AACxC,OAAO,EAAE,IAAI,EAAa,MAAM,QAAQ,CAAA;AAExC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;
|
|
1
|
+
{"version":3,"file":"AutocompleteField.js","sourceRoot":"","sources":["../src/AutocompleteField.tsx"],"names":[],"mappings":"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"}
|
package/lib/Link.d.ts
CHANGED
|
@@ -4,6 +4,7 @@ export declare type LinkKind = 'primary' | 'secondary';
|
|
|
4
4
|
declare const sizes: {
|
|
5
5
|
normal: string;
|
|
6
6
|
small: string;
|
|
7
|
+
inherit: string;
|
|
7
8
|
};
|
|
8
9
|
declare type AnchorAttributes = AnchorHTMLAttributes<HTMLAnchorElement>;
|
|
9
10
|
declare type IconProps = {
|
|
@@ -43,7 +44,7 @@ export declare type LinkProps = IconProps & {
|
|
|
43
44
|
*
|
|
44
45
|
* ### General Info
|
|
45
46
|
* - There are 2 kinds (colors) of Link available - primary (default) and secondary.
|
|
46
|
-
* - There are
|
|
47
|
+
* - There are 3 sizes of Link available - normal (default), small and inherit.
|
|
47
48
|
* - The default state of all types of link is underlined and on hover it has no underline.
|
|
48
49
|
* - Link can be used as a stand-alone component with right chevron icon.
|
|
49
50
|
* - You can change underlying semantics with a component property. Typescript will guard you on providing other properties related to the component type.
|
package/lib/Link.js
CHANGED
|
@@ -5,6 +5,7 @@ import styles from './Link.module.scss';
|
|
|
5
5
|
const sizes = {
|
|
6
6
|
normal: styles.normal,
|
|
7
7
|
small: styles.small,
|
|
8
|
+
inherit: styles.inherit,
|
|
8
9
|
};
|
|
9
10
|
/**
|
|
10
11
|
* ### Purpose
|
|
@@ -13,7 +14,7 @@ const sizes = {
|
|
|
13
14
|
*
|
|
14
15
|
* ### General Info
|
|
15
16
|
* - There are 2 kinds (colors) of Link available - primary (default) and secondary.
|
|
16
|
-
* - There are
|
|
17
|
+
* - There are 3 sizes of Link available - normal (default), small and inherit.
|
|
17
18
|
* - The default state of all types of link is underlined and on hover it has no underline.
|
|
18
19
|
* - Link can be used as a stand-alone component with right chevron icon.
|
|
19
20
|
* - You can change underlying semantics with a component property. Typescript will guard you on providing other properties related to the component type.
|
|
@@ -21,7 +22,7 @@ const sizes = {
|
|
|
21
22
|
export const Link = forwardRef(({ component = 'a', kind = 'primary', size = 'normal', bold = false, icon, ariaLabel, iconClassName, href, rel = 'noopener', target = '_self', type = 'button', onClick, className, children, }, ref) => {
|
|
22
23
|
const relFinal = Array.isArray(rel) ? rel.join(' ') : rel;
|
|
23
24
|
const commonProps = {
|
|
24
|
-
className: cn(styles[size], {
|
|
25
|
+
className: cn(styles.link, styles[size], {
|
|
25
26
|
// kind
|
|
26
27
|
[styles.primary]: kind === 'primary',
|
|
27
28
|
[styles.secondary]: kind === 'secondary',
|
package/lib/Link.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Link.js","sourceRoot":"","sources":["../src/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA8C,UAAU,EAAkD,MAAM,OAAO,CAAA;AAErI,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,MAAM,MAAM,oBAAoB,CAAA;AAIvC,MAAM,KAAK,GAAG;IACZ,MAAM,EAAE,MAAM,CAAC,MAAM;IACrB,KAAK,EAAE,MAAM,CAAC,KAAK;
|
|
1
|
+
{"version":3,"file":"Link.js","sourceRoot":"","sources":["../src/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA8C,UAAU,EAAkD,MAAM,OAAO,CAAA;AAErI,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,MAAM,MAAM,oBAAoB,CAAA;AAIvC,MAAM,KAAK,GAAG;IACZ,MAAM,EAAE,MAAM,CAAC,MAAM;IACrB,KAAK,EAAE,MAAM,CAAC,KAAK;IACnB,OAAO,EAAE,MAAM,CAAC,OAAO;CACxB,CAAA;AA6DD;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAC5B,CACE,EACE,SAAS,GAAG,GAAG,EACf,IAAI,GAAG,SAAS,EAChB,IAAI,GAAG,QAAQ,EACf,IAAI,GAAG,KAAK,EACZ,IAAI,EACJ,SAAS,EACT,aAAa,EACb,IAAI,EACJ,GAAG,GAAG,UAAU,EAChB,MAAM,GAAG,OAAO,EAChB,IAAI,GAAG,QAAQ,EACf,OAAO,EACP,SAAS,EACT,QAAQ,GACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAA;IAEzD,MAAM,WAAW,GAAG;QAClB,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,IAAI,EACX,MAAM,CAAC,IAAI,CAAC,EACZ;YACE,OAAO;YACP,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,IAAI,KAAK,SAAS;YACpC,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,IAAI,KAAK,WAAW;YACxC,OAAO;YACP,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,IAAI;SACpB,EACD,SAAS,CACV;QACD,IAAI,EAAE,IAAI;QACV,OAAO,EAAE,OAAO;KACjB,CAAA;IAED,MAAM,aAAa,GACjB,IAAI,IAAI,SAAS,CAAC,CAAC,CAAC,CAClB,oBAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,EAAE,SAAS,EAAE,aAAa,GAAI,CAC/H,CAAC,CAAC,CAAC,SAAS,CAAA;IAEf,OAAO,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,CACzB,8BAAO,WAAW,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,GAA0C;QAC/F,QAAQ;QACR,aAAa,CACZ,CACL,CAAC,CAAC,CAAC,CACF,mCAAY,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,GAA0C;QACjF,QAAQ;QACR,aAAa,CACP,CACV,CAAA;AACH,CAAC,CACF,CAAA;AACD,IAAI,CAAC,WAAW,GAAG,MAAM,CAAA"}
|
package/lib/Link.module.scss
CHANGED
|
@@ -34,16 +34,26 @@
|
|
|
34
34
|
}
|
|
35
35
|
}
|
|
36
36
|
|
|
37
|
-
.
|
|
37
|
+
.link {
|
|
38
38
|
@include link;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.normal {
|
|
39
42
|
@include c.typographyBodyNormal;
|
|
40
43
|
}
|
|
41
44
|
|
|
42
45
|
.small {
|
|
43
|
-
@include link;
|
|
44
46
|
@include c.typographyBodySmall;
|
|
45
47
|
}
|
|
46
48
|
|
|
49
|
+
.inherit {
|
|
50
|
+
font-family: inherit;
|
|
51
|
+
font-size: inherit;
|
|
52
|
+
letter-spacing: inherit;
|
|
53
|
+
line-height: inherit;
|
|
54
|
+
font-weight: inherit;
|
|
55
|
+
}
|
|
56
|
+
|
|
47
57
|
.bold {
|
|
48
58
|
@include c.typographyBodyWeight('bold');
|
|
49
59
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hazelcast/ui",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.2-next.3+3250e1f",
|
|
4
4
|
"description": "Hazelcast design system components",
|
|
5
5
|
"author": "",
|
|
6
6
|
"homepage": "https://github.com/hazelcast/frontend-shared#readme",
|
|
@@ -49,8 +49,8 @@
|
|
|
49
49
|
"@codemirror/basic-setup": "^0.19.1",
|
|
50
50
|
"@codemirror/stream-parser": "^0.19.3",
|
|
51
51
|
"@codemirror/view": "^0.19.35",
|
|
52
|
-
"@hazelcast/helpers": "^1.3.
|
|
53
|
-
"@hazelcast/services": "^1.3.
|
|
52
|
+
"@hazelcast/helpers": "^1.3.1",
|
|
53
|
+
"@hazelcast/services": "^1.3.1",
|
|
54
54
|
"@headlessui/react": "^1.4.2",
|
|
55
55
|
"@icons-pack/react-simple-icons": "^4.6.1",
|
|
56
56
|
"@popperjs/core": "^2.11.0",
|
|
@@ -77,7 +77,7 @@
|
|
|
77
77
|
},
|
|
78
78
|
"devDependencies": {
|
|
79
79
|
"@codemirror/legacy-modes": "0.19.0",
|
|
80
|
-
"@hazelcast/test-helpers": "^1.3.
|
|
80
|
+
"@hazelcast/test-helpers": "^1.3.1",
|
|
81
81
|
"@storybook/addon-docs": "^6.4.9",
|
|
82
82
|
"@storybook/addons": "^6.4.9",
|
|
83
83
|
"@storybook/builder-webpack5": "^6.4.9",
|
|
@@ -113,5 +113,5 @@
|
|
|
113
113
|
"webpack": "^5.65.0",
|
|
114
114
|
"yup": "^0.32.11"
|
|
115
115
|
},
|
|
116
|
-
"gitHead": "
|
|
116
|
+
"gitHead": "3250e1f110b0def468a817bb28f19e4af1b3575a"
|
|
117
117
|
}
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
import React, { FC } from 'react'
|
|
2
|
-
import { ReactDatePickerProps } from 'react-datepicker'
|
|
3
|
-
import { ChevronLeft, ChevronRight } from 'react-feather'
|
|
4
|
-
import { format } from 'date-fns'
|
|
5
|
-
|
|
6
|
-
import { IconButton } from '../../IconButton'
|
|
7
|
-
|
|
8
|
-
import styles from '../Calendar.module.scss'
|
|
9
|
-
import styleConsts from '../../../styles/constants/export.module.scss'
|
|
10
|
-
|
|
11
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
12
|
-
type ExtractFnArgumentType<T> = T extends (arg: infer U) => any ? U : never
|
|
13
|
-
|
|
14
|
-
/*
|
|
15
|
-
* Note:
|
|
16
|
-
* react-datepicker does expose header props type as "renderCustomHeader", however the property is defined
|
|
17
|
-
* as a render-prop.
|
|
18
|
-
* This way we can pick the argument type from the render function and convert the property
|
|
19
|
-
* to use a regular component, rather than a render-prop.
|
|
20
|
-
*
|
|
21
|
-
* There is no significant benefit other than readability.
|
|
22
|
-
*/
|
|
23
|
-
export type CalendarHeaderProps = ExtractFnArgumentType<ReactDatePickerProps['renderCustomHeader']>
|
|
24
|
-
|
|
25
|
-
export const CalendarHeader: FC<CalendarHeaderProps> = ({ date, decreaseMonth, increaseMonth }) => {
|
|
26
|
-
return (
|
|
27
|
-
<div data-test="date-picker-header" className={styles.headerContainer}>
|
|
28
|
-
<IconButton
|
|
29
|
-
data-test="date-picker-header-icon-previous"
|
|
30
|
-
icon={ChevronLeft}
|
|
31
|
-
ariaLabel="Previous month"
|
|
32
|
-
iconColor={styleConsts.colorPrimary}
|
|
33
|
-
onClick={decreaseMonth}
|
|
34
|
-
/>
|
|
35
|
-
<div className={styles.headerMonthAndYear}>{format(date, 'MMMM y')}</div>
|
|
36
|
-
<IconButton
|
|
37
|
-
data-test="date-picker-header-icon-next"
|
|
38
|
-
icon={ChevronRight}
|
|
39
|
-
ariaLabel="Next month"
|
|
40
|
-
iconColor={styleConsts.colorPrimary}
|
|
41
|
-
onClick={increaseMonth}
|
|
42
|
-
/>
|
|
43
|
-
</div>
|
|
44
|
-
)
|
|
45
|
-
}
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
import React, { FC, ChangeEvent, InputHTMLAttributes, forwardRef } from 'react'
|
|
2
|
-
import { Calendar } from 'react-feather'
|
|
3
|
-
|
|
4
|
-
import { TextField } from '../../TextField'
|
|
5
|
-
import { CalendarSize } from '../Calendar'
|
|
6
|
-
|
|
7
|
-
export type CalendarInputInternalProps = {
|
|
8
|
-
onChange: (e: ChangeEvent<HTMLInputElement>) => void
|
|
9
|
-
} & CalendarInputExtraProps &
|
|
10
|
-
Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'>
|
|
11
|
-
|
|
12
|
-
export const CalendarInputInternal: FC<CalendarInputInternalProps> = ({ className, value, onChange, label, textFieldSize, ...props }) => (
|
|
13
|
-
<TextField<'text'>
|
|
14
|
-
{...props}
|
|
15
|
-
size={textFieldSize}
|
|
16
|
-
data-test="calendar-input"
|
|
17
|
-
value={value?.toString()}
|
|
18
|
-
onChange={onChange}
|
|
19
|
-
inputContainerClassName={className}
|
|
20
|
-
type="text"
|
|
21
|
-
name="calendar-input"
|
|
22
|
-
label={label}
|
|
23
|
-
inputTrailingIcon={Calendar}
|
|
24
|
-
inputTrailingIconLabel="Calendar Icon"
|
|
25
|
-
/>
|
|
26
|
-
)
|
|
27
|
-
|
|
28
|
-
export type CalendarInputExtraProps = {
|
|
29
|
-
label: string
|
|
30
|
-
textFieldSize?: CalendarSize
|
|
31
|
-
className?: string
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
/*
|
|
35
|
-
* Note:
|
|
36
|
-
* The types are not available, the element is internally instantiated via React.cloneElement
|
|
37
|
-
* We need to accept the props as unknown and cast them in place
|
|
38
|
-
* Otherwise "Calendar.customInput" would require us to pass them explicitly
|
|
39
|
-
*/
|
|
40
|
-
export type CalendarInputProps = unknown & CalendarInputExtraProps
|
|
41
|
-
|
|
42
|
-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
43
|
-
export const CalendarInput: FC<CalendarInputProps> = forwardRef((props, ref) => {
|
|
44
|
-
// Note: Cast the "unknown" props to the actual type
|
|
45
|
-
const propsTyped = props as CalendarInputInternalProps
|
|
46
|
-
|
|
47
|
-
return <CalendarInputInternal {...propsTyped} />
|
|
48
|
-
})
|
|
49
|
-
|
|
50
|
-
CalendarInput.displayName = 'CalendarInput'
|
|
@@ -1,117 +0,0 @@
|
|
|
1
|
-
import React, { ChangeEvent, FC, useCallback, useEffect, useState } from 'react'
|
|
2
|
-
import { format, parse } from 'date-fns'
|
|
3
|
-
|
|
4
|
-
import { Button } from '../../Button'
|
|
5
|
-
import { timePoints } from '../helpers/consts'
|
|
6
|
-
import { TimeField } from '../../TimeField'
|
|
7
|
-
|
|
8
|
-
import styles from './CalendarTime.module.scss'
|
|
9
|
-
|
|
10
|
-
// Note: AM/PM 1-12 hours time
|
|
11
|
-
const DATE_FORMAT = 'hh:mm a'
|
|
12
|
-
// Note: 0-23 hours time
|
|
13
|
-
const DATE_FORMAT_NO_MERIDIEM = 'HH:mm'
|
|
14
|
-
|
|
15
|
-
export type CalendarTimeInternalProps = {
|
|
16
|
-
date: Date
|
|
17
|
-
onChange: (timeString: string) => void
|
|
18
|
-
value: string
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
export const CalendarTimeInternal: FC<CalendarTimeInternalProps> = ({ date, value, onChange }) => {
|
|
22
|
-
const [time, setTime] = useState(value)
|
|
23
|
-
const [timeInputError, setTimeInputError] = useState<string | undefined>()
|
|
24
|
-
|
|
25
|
-
/*
|
|
26
|
-
* Note:
|
|
27
|
-
* We cannot override how react-datepicker handles time values.
|
|
28
|
-
* It always expects format of "xx:xx" to parse the hours and minutes from. (See Source 2. link below)
|
|
29
|
-
*
|
|
30
|
-
* This is not an issue for majority of browsers, however as for IE11, where <input type="time" />
|
|
31
|
-
* fall back to <input type="text" />, this becomes an issue.
|
|
32
|
-
*
|
|
33
|
-
* Furthermore, the package even does not handle potential thrown error by date-fns' parse.
|
|
34
|
-
* Even the live demos do crash on an input like "10:10q" (See source 1. link below).
|
|
35
|
-
*
|
|
36
|
-
* For this reasons we need to provide our own wrapper around the functionality to achieve 2 things:
|
|
37
|
-
* - Provide IE11 with a proper fallback
|
|
38
|
-
* - Prevent the invalid input value crash
|
|
39
|
-
* - Provide the user with an input error in case the value is invalid
|
|
40
|
-
*
|
|
41
|
-
* Source(1): https://reactdatepicker.com/#example-custom-time-input
|
|
42
|
-
* Source(2): https://github.com/Hacker0x01/react-datepicker/blob/master/src/inputTime.jsx#L32
|
|
43
|
-
*/
|
|
44
|
-
useEffect(() => {
|
|
45
|
-
setTime(value)
|
|
46
|
-
}, [value])
|
|
47
|
-
|
|
48
|
-
const handleTimeInputChange = useCallback(
|
|
49
|
-
({ target: { value } }: ChangeEvent<HTMLInputElement>) => {
|
|
50
|
-
setTime(value)
|
|
51
|
-
const parsedDate = parse(value, DATE_FORMAT_NO_MERIDIEM, date)
|
|
52
|
-
|
|
53
|
-
if (!isNaN(parsedDate.valueOf())) {
|
|
54
|
-
setTimeInputError(undefined)
|
|
55
|
-
onChange(value)
|
|
56
|
-
} else {
|
|
57
|
-
setTimeInputError('Invalid time')
|
|
58
|
-
}
|
|
59
|
-
},
|
|
60
|
-
[onChange, date],
|
|
61
|
-
)
|
|
62
|
-
|
|
63
|
-
const handleDateClick = useCallback(
|
|
64
|
-
(dp: string) => () => {
|
|
65
|
-
// Note: Input time (derived from timePoints) is in 'DATE_FORMAT'
|
|
66
|
-
const parsedDate = parse(dp, DATE_FORMAT, date)
|
|
67
|
-
// Note: Output time, that we feed back to 'react-datetime' is in 'DATE_FORMAT_NO_MERIDIEM' format
|
|
68
|
-
const timeStringWithoutAm = format(parsedDate, DATE_FORMAT_NO_MERIDIEM)
|
|
69
|
-
onChange(timeStringWithoutAm)
|
|
70
|
-
},
|
|
71
|
-
[onChange, date],
|
|
72
|
-
)
|
|
73
|
-
|
|
74
|
-
return (
|
|
75
|
-
<div data-test="calendar-time" className={styles.container}>
|
|
76
|
-
<div data-test="calendar-time-header" className={styles.header}>
|
|
77
|
-
<TimeField
|
|
78
|
-
showAriaLabel
|
|
79
|
-
label="Time Input"
|
|
80
|
-
error={timeInputError}
|
|
81
|
-
className={styles.input}
|
|
82
|
-
name="time"
|
|
83
|
-
value={time.toString()}
|
|
84
|
-
onChange={handleTimeInputChange}
|
|
85
|
-
/>
|
|
86
|
-
</div>
|
|
87
|
-
<div data-test="calendar-time-timePoints" className={styles.timePoints}>
|
|
88
|
-
{timePoints.map((tP) => (
|
|
89
|
-
<Button
|
|
90
|
-
className={styles.timePoint}
|
|
91
|
-
bodyClassName={styles.timePointBody}
|
|
92
|
-
key={tP}
|
|
93
|
-
kind="transparent"
|
|
94
|
-
onClick={handleDateClick(tP)}
|
|
95
|
-
>
|
|
96
|
-
{tP}
|
|
97
|
-
</Button>
|
|
98
|
-
))}
|
|
99
|
-
</div>
|
|
100
|
-
</div>
|
|
101
|
-
)
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
/*
|
|
105
|
-
* Note:
|
|
106
|
-
* The types are not available, the element is internally instantiated via React.cloneElement
|
|
107
|
-
* We need to accept the props as unknown and cast them in place
|
|
108
|
-
* Otherwise "Calendar.customTimeInput" would require us to pass them explicitly
|
|
109
|
-
*/
|
|
110
|
-
export type CalendarTimeProps = unknown
|
|
111
|
-
|
|
112
|
-
export const CalendarTime: FC<CalendarTimeProps> = (props) => {
|
|
113
|
-
// Note: Cast the "unknown" props to the actual type
|
|
114
|
-
const propsTyped = props as CalendarTimeInternalProps
|
|
115
|
-
|
|
116
|
-
return <CalendarTimeInternal {...propsTyped} />
|
|
117
|
-
}
|
|
@@ -1,99 +0,0 @@
|
|
|
1
|
-
export const timePoints = [
|
|
2
|
-
// Source: https://simple.wikipedia.org/wiki/12-hour_clock
|
|
3
|
-
'12:00 AM',
|
|
4
|
-
'12:15 AM',
|
|
5
|
-
'12:30 AM',
|
|
6
|
-
'12:45 AM',
|
|
7
|
-
'01:00 AM',
|
|
8
|
-
'01:15 AM',
|
|
9
|
-
'01:30 AM',
|
|
10
|
-
'01:45 AM',
|
|
11
|
-
'02:00 AM',
|
|
12
|
-
'02:15 AM',
|
|
13
|
-
'02:30 AM',
|
|
14
|
-
'02:45 AM',
|
|
15
|
-
'03:00 AM',
|
|
16
|
-
'03:15 AM',
|
|
17
|
-
'03:30 AM',
|
|
18
|
-
'03:45 AM',
|
|
19
|
-
'04:00 AM',
|
|
20
|
-
'04:15 AM',
|
|
21
|
-
'04:30 AM',
|
|
22
|
-
'04:45 AM',
|
|
23
|
-
'05:00 AM',
|
|
24
|
-
'05:15 AM',
|
|
25
|
-
'05:30 AM',
|
|
26
|
-
'05:45 AM',
|
|
27
|
-
'06:00 AM',
|
|
28
|
-
'06:15 AM',
|
|
29
|
-
'06:30 AM',
|
|
30
|
-
'06:45 AM',
|
|
31
|
-
'07:00 AM',
|
|
32
|
-
'07:15 AM',
|
|
33
|
-
'07:30 AM',
|
|
34
|
-
'07:45 AM',
|
|
35
|
-
'08:00 AM',
|
|
36
|
-
'08:15 AM',
|
|
37
|
-
'08:30 AM',
|
|
38
|
-
'08:45 AM',
|
|
39
|
-
'09:00 AM',
|
|
40
|
-
'09:15 AM',
|
|
41
|
-
'09:30 AM',
|
|
42
|
-
'09:45 AM',
|
|
43
|
-
'10:00 AM',
|
|
44
|
-
'10:15 AM',
|
|
45
|
-
'10:30 AM',
|
|
46
|
-
'10:45 AM',
|
|
47
|
-
'11:00 AM',
|
|
48
|
-
'11:15 AM',
|
|
49
|
-
'11:30 AM',
|
|
50
|
-
'11:45 AM',
|
|
51
|
-
'12:00 PM',
|
|
52
|
-
'12:15 PM',
|
|
53
|
-
'12:30 PM',
|
|
54
|
-
'12:45 PM',
|
|
55
|
-
'01:00 PM',
|
|
56
|
-
'01:15 PM',
|
|
57
|
-
'01:30 PM',
|
|
58
|
-
'01:45 PM',
|
|
59
|
-
'02:00 PM',
|
|
60
|
-
'02:15 PM',
|
|
61
|
-
'02:30 PM',
|
|
62
|
-
'02:45 PM',
|
|
63
|
-
'03:00 PM',
|
|
64
|
-
'03:15 PM',
|
|
65
|
-
'03:30 PM',
|
|
66
|
-
'03:45 PM',
|
|
67
|
-
'04:00 PM',
|
|
68
|
-
'04:15 PM',
|
|
69
|
-
'04:30 PM',
|
|
70
|
-
'04:45 PM',
|
|
71
|
-
'05:00 PM',
|
|
72
|
-
'05:15 PM',
|
|
73
|
-
'05:30 PM',
|
|
74
|
-
'05:45 PM',
|
|
75
|
-
'06:00 PM',
|
|
76
|
-
'06:15 PM',
|
|
77
|
-
'06:30 PM',
|
|
78
|
-
'06:45 PM',
|
|
79
|
-
'07:00 PM',
|
|
80
|
-
'07:15 PM',
|
|
81
|
-
'07:30 PM',
|
|
82
|
-
'07:45 PM',
|
|
83
|
-
'08:00 PM',
|
|
84
|
-
'08:15 PM',
|
|
85
|
-
'08:30 PM',
|
|
86
|
-
'08:45 PM',
|
|
87
|
-
'09:00 PM',
|
|
88
|
-
'09:15 PM',
|
|
89
|
-
'09:30 PM',
|
|
90
|
-
'09:45 PM',
|
|
91
|
-
'10:00 PM',
|
|
92
|
-
'10:15 PM',
|
|
93
|
-
'10:30 PM',
|
|
94
|
-
'10:45 PM',
|
|
95
|
-
'11:00 PM',
|
|
96
|
-
'11:15 PM',
|
|
97
|
-
'11:30 PM',
|
|
98
|
-
'11:45 PM',
|
|
99
|
-
]
|