@oneblink/apps-react 8.0.0-beta.9 → 8.0.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/form-elements/FormElementDate.js +8 -7
- package/dist/form-elements/FormElementDate.js.map +1 -1
- package/dist/form-elements/FormElementDateTime.js +6 -6
- package/dist/form-elements/FormElementDateTime.js.map +1 -1
- package/dist/form-elements/FormElementTime.js +5 -5
- package/dist/form-elements/FormElementTime.js.map +1 -1
- package/dist/hooks/form-date-picker/useFormDatePickerProps.d.ts +32 -31
- package/dist/hooks/form-date-picker/useFormDatePickerProps.js +82 -41
- package/dist/hooks/form-date-picker/useFormDatePickerProps.js.map +1 -1
- package/dist/styles.css +0 -22
- package/dist/styles.scss +0 -1
- package/package.json +1 -1
- package/dist/styles/date.scss +0 -18
|
@@ -9,11 +9,11 @@ import { parseDateValue } from '../services/generate-default-data';
|
|
|
9
9
|
import useFormElementDateFromTo from '../hooks/useFormElementDateFromTo';
|
|
10
10
|
import { LookupNotificationContext } from '../hooks/useLookupNotification';
|
|
11
11
|
import useElementAriaDescribedby from '../hooks/useElementAriaDescribedby';
|
|
12
|
-
import useFormDatePickerProps from '../hooks/form-date-picker/useFormDatePickerProps';
|
|
13
|
-
const shortDateFormat = localisationService.getDateFnsFormats().shortDate;
|
|
12
|
+
import useFormDatePickerProps, { PickerInputButton, } from '../hooks/form-date-picker/useFormDatePickerProps';
|
|
14
13
|
function FormElementDate({ id, element, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, }) {
|
|
15
14
|
const ariaDescribedby = useElementAriaDescribedby(id, element);
|
|
16
15
|
const { fromDate, fromDaysOffset, toDate, toDaysOffset } = useFormElementDateFromTo(element);
|
|
16
|
+
const shortDateFormat = localisationService.getDateFnsFormats().shortDate;
|
|
17
17
|
const maxDate = React.useMemo(() => {
|
|
18
18
|
return parseDateValue({
|
|
19
19
|
dateOnly: true,
|
|
@@ -28,16 +28,17 @@ function FormElementDate({ id, element, value, onChange, validationMessage, disp
|
|
|
28
28
|
value: fromDate,
|
|
29
29
|
});
|
|
30
30
|
}, [fromDate, fromDaysOffset]);
|
|
31
|
-
const
|
|
31
|
+
const isoValue = React.useMemo(() => parseDateValue({ dateOnly: false, daysOffset: 0, value }), [value]);
|
|
32
|
+
const [commonProps, openDatePicker] = useFormDatePickerProps({
|
|
32
33
|
id,
|
|
33
|
-
value:
|
|
34
|
+
value: isoValue,
|
|
34
35
|
maxDate,
|
|
35
36
|
minDate,
|
|
36
|
-
icon: 'event',
|
|
37
37
|
ariaDescribedby,
|
|
38
38
|
placeholder: element.placeholderValue,
|
|
39
39
|
className: 'cypress-date-control',
|
|
40
40
|
onBlur: setIsDirty,
|
|
41
|
+
disabled: element.readOnly,
|
|
41
42
|
onChange: (newDate) => onChange(element, {
|
|
42
43
|
value: newDate ? format(newDate, 'yyyy-MM-dd') : undefined,
|
|
43
44
|
}),
|
|
@@ -59,8 +60,8 @@ function FormElementDate({ id, element, value, onChange, validationMessage, disp
|
|
|
59
60
|
return (React.createElement("div", { className: "cypress-date-element" },
|
|
60
61
|
React.createElement(FormElementLabelContainer, { className: "ob-date", id: id, element: element, required: element.required },
|
|
61
62
|
React.createElement("div", { className: "field has-addons" },
|
|
62
|
-
React.createElement(
|
|
63
|
-
|
|
63
|
+
React.createElement(DatePicker, { label: element.label, format: shortDateFormat, ...commonProps }),
|
|
64
|
+
!element.readOnly && (React.createElement(PickerInputButton, { tooltip: "Select date", onClick: openDatePicker, icon: "event" })),
|
|
64
65
|
!!element.readOnly && !!text && (React.createElement("div", { className: "control" },
|
|
65
66
|
React.createElement(CopyToClipboardButton, { className: "button is-input-addon copy-button cypress-copy-to-clipboard-button", text: text }))),
|
|
66
67
|
React.createElement(LookupButton, { isInputButton: true, value: value, validationMessage: validationMessage, lookupButtonConfig: element.lookupButton })),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormElementDate.js","sourceRoot":"","sources":["../../src/form-elements/FormElementDate.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAA;AAEpD,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAEjC,OAAO,qBAAqB,MAAM,8CAA8C,CAAA;AAChF,OAAO,YAAY,MAAM,qCAAqC,CAAA;AAE9D,OAAO,yBAAyB,MAAM,kDAAkD,CAAA;AACxF,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAA;AAElE,OAAO,wBAAwB,MAAM,mCAAmC,CAAA;AACxE,OAAO,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAA;AAC1E,OAAO,yBAAyB,MAAM,oCAAoC,CAAA;AAC1E,OAAO,sBAAsB,
|
|
1
|
+
{"version":3,"file":"FormElementDate.js","sourceRoot":"","sources":["../../src/form-elements/FormElementDate.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { localisationService } from '@oneblink/apps'\nimport { FormTypes } from '@oneblink/types'\nimport { DatePicker } from '@mui/x-date-pickers'\nimport { format } from 'date-fns'\n\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport LookupButton from '../components/renderer/LookupButton'\n\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { parseDateValue } from '../services/generate-default-data'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport useFormElementDateFromTo from '../hooks/useFormElementDateFromTo'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport useFormDatePickerProps, {\n PickerInputButton,\n} from '../hooks/form-date-picker/useFormDatePickerProps'\n\ntype Props = {\n id: string\n element: FormTypes.DateElement\n value: unknown | undefined\n onChange: FormElementValueChangeHandler<string>\n displayValidationMessage: boolean\n validationMessage: string | undefined\n} & IsDirtyProps\n\nfunction FormElementDate({\n id,\n element,\n value,\n onChange,\n validationMessage,\n displayValidationMessage,\n isDirty,\n setIsDirty,\n}: Props) {\n const ariaDescribedby = useElementAriaDescribedby(id, element)\n\n const { fromDate, fromDaysOffset, toDate, toDaysOffset } =\n useFormElementDateFromTo(element)\n\n const shortDateFormat = localisationService.getDateFnsFormats().shortDate\n\n const maxDate = React.useMemo(() => {\n return parseDateValue({\n dateOnly: true,\n daysOffset: toDaysOffset,\n value: toDate,\n })\n }, [toDate, toDaysOffset])\n\n const minDate = React.useMemo(() => {\n return parseDateValue({\n dateOnly: true,\n daysOffset: fromDaysOffset,\n value: fromDate,\n })\n }, [fromDate, fromDaysOffset])\n\n const isoValue = React.useMemo(\n () => parseDateValue({ dateOnly: false, daysOffset: 0, value }),\n [value],\n )\n\n const [commonProps, openDatePicker] = useFormDatePickerProps({\n id,\n value: isoValue,\n maxDate,\n minDate,\n ariaDescribedby,\n placeholder: element.placeholderValue,\n className: 'cypress-date-control',\n onBlur: setIsDirty,\n disabled: element.readOnly,\n onChange: (newDate) =>\n onChange(element, {\n value: newDate ? format(newDate, 'yyyy-MM-dd') : undefined,\n }),\n })\n\n const text = React.useMemo(() => {\n if (typeof value === 'string') {\n const date = localisationService.generateDate({\n daysOffset: undefined,\n value,\n })\n if (date) {\n return localisationService.formatDate(date)\n }\n }\n return null\n }, [value])\n\n const { isLookingUp } = React.useContext(LookupNotificationContext)\n const isDisplayingValidationMessage =\n (displayValidationMessage || isDirty) && !!validationMessage && !isLookingUp\n\n return (\n <div className=\"cypress-date-element\">\n <FormElementLabelContainer\n className=\"ob-date\"\n id={id}\n element={element}\n required={element.required}\n >\n <div className=\"field has-addons\">\n <DatePicker\n label={element.label}\n format={shortDateFormat}\n {...commonProps}\n />\n {!element.readOnly && (\n <PickerInputButton\n tooltip=\"Select date\"\n onClick={openDatePicker}\n icon=\"event\"\n />\n )}\n {!!element.readOnly && !!text && (\n <div className=\"control\">\n <CopyToClipboardButton\n className=\"button is-input-addon copy-button cypress-copy-to-clipboard-button\"\n text={text}\n />\n </div>\n )}\n <LookupButton\n isInputButton\n value={value}\n validationMessage={validationMessage}\n lookupButtonConfig={element.lookupButton}\n />\n </div>\n\n {isDisplayingValidationMessage && (\n <div role=\"alert\" className=\"has-margin-top-8\">\n <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n {validationMessage}\n </div>\n </div>\n )}\n </FormElementLabelContainer>\n </div>\n )\n}\n\nexport default React.memo(FormElementDate)\n"]}
|
|
@@ -8,11 +8,11 @@ import { parseDateValue } from '../services/generate-default-data';
|
|
|
8
8
|
import useFormElementDateFromTo from '../hooks/useFormElementDateFromTo';
|
|
9
9
|
import { LookupNotificationContext } from '../hooks/useLookupNotification';
|
|
10
10
|
import useElementAriaDescribedby from '../hooks/useElementAriaDescribedby';
|
|
11
|
-
import useFormDatePickerProps from '../hooks/form-date-picker/useFormDatePickerProps';
|
|
12
|
-
const shortDateTimeFormat = localisationService.getDateFnsFormats().shortDateTime;
|
|
11
|
+
import useFormDatePickerProps, { PickerInputButton, } from '../hooks/form-date-picker/useFormDatePickerProps';
|
|
13
12
|
function FormElementDateTime({ id, element, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, }) {
|
|
14
13
|
const ariaDescribedby = useElementAriaDescribedby(id, element);
|
|
15
14
|
const { fromDate, fromDaysOffset, toDate, toDaysOffset } = useFormElementDateFromTo(element);
|
|
15
|
+
const shortDateTimeFormat = localisationService.getDateFnsFormats().shortDateTime;
|
|
16
16
|
const maxDate = React.useMemo(() => {
|
|
17
17
|
return parseDateValue({
|
|
18
18
|
dateOnly: true,
|
|
@@ -27,15 +27,15 @@ function FormElementDateTime({ id, element, value, onChange, validationMessage,
|
|
|
27
27
|
value: fromDate,
|
|
28
28
|
});
|
|
29
29
|
}, [fromDate, fromDaysOffset]);
|
|
30
|
-
const commonProps = useFormDatePickerProps({
|
|
30
|
+
const [commonProps, openDateTimePicker] = useFormDatePickerProps({
|
|
31
31
|
id,
|
|
32
32
|
value: typeof value === 'string' ? value : undefined,
|
|
33
33
|
maxDate,
|
|
34
34
|
minDate,
|
|
35
|
-
icon: 'date_range',
|
|
36
35
|
ariaDescribedby,
|
|
37
36
|
placeholder: element.placeholderValue,
|
|
38
37
|
className: 'cypress-date-time-control',
|
|
38
|
+
disabled: element.readOnly,
|
|
39
39
|
onBlur: setIsDirty,
|
|
40
40
|
onChange: (newDate) => {
|
|
41
41
|
onChange(element, {
|
|
@@ -54,8 +54,8 @@ function FormElementDateTime({ id, element, value, onChange, validationMessage,
|
|
|
54
54
|
return (React.createElement("div", { className: "cypress-datetime-element" },
|
|
55
55
|
React.createElement(FormElementLabelContainer, { className: "ob-datetime", id: id, element: element, required: element.required },
|
|
56
56
|
React.createElement("div", { className: "field has-addons" },
|
|
57
|
-
React.createElement(
|
|
58
|
-
|
|
57
|
+
React.createElement(DateTimePicker, { label: element.label, format: shortDateTimeFormat, ...commonProps, timeSteps: { minutes: 1 } }),
|
|
58
|
+
!element.readOnly && (React.createElement(PickerInputButton, { tooltip: "Select date and time", onClick: openDateTimePicker, icon: "date_range" })),
|
|
59
59
|
!!element.readOnly && !!text && (React.createElement("div", { className: "control" },
|
|
60
60
|
React.createElement(CopyToClipboardButton, { className: "button is-input-addon copy-button cypress-copy-to-clipboard-button", text: text }))),
|
|
61
61
|
React.createElement(LookupButton, { isInputButton: true, value: value, validationMessage: validationMessage, lookupButtonConfig: element.lookupButton })),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormElementDateTime.js","sourceRoot":"","sources":["../../src/form-elements/FormElementDateTime.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAA;AAEpD,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAEpD,OAAO,qBAAqB,MAAM,8CAA8C,CAAA;AAChF,OAAO,YAAY,MAAM,qCAAqC,CAAA;AAE9D,OAAO,yBAAyB,MAAM,kDAAkD,CAAA;AACxF,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAA;AAElE,OAAO,wBAAwB,MAAM,mCAAmC,CAAA;AACxE,OAAO,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAA;AAC1E,OAAO,yBAAyB,MAAM,oCAAoC,CAAA;AAC1E,OAAO,sBAAsB,
|
|
1
|
+
{"version":3,"file":"FormElementDateTime.js","sourceRoot":"","sources":["../../src/form-elements/FormElementDateTime.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { localisationService } from '@oneblink/apps'\nimport { FormTypes } from '@oneblink/types'\nimport { DateTimePicker } from '@mui/x-date-pickers'\n\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport LookupButton from '../components/renderer/LookupButton'\n\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { parseDateValue } from '../services/generate-default-data'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport useFormElementDateFromTo from '../hooks/useFormElementDateFromTo'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport useFormDatePickerProps, {\n PickerInputButton,\n} from '../hooks/form-date-picker/useFormDatePickerProps'\n\ntype Props = {\n id: string\n element: FormTypes.DateTimeElement\n value: unknown | undefined\n onChange: FormElementValueChangeHandler<string>\n displayValidationMessage: boolean\n validationMessage: string | undefined\n} & IsDirtyProps\n\nfunction FormElementDateTime({\n id,\n element,\n value,\n onChange,\n validationMessage,\n displayValidationMessage,\n isDirty,\n setIsDirty,\n}: Props) {\n const ariaDescribedby = useElementAriaDescribedby(id, element)\n\n const { fromDate, fromDaysOffset, toDate, toDaysOffset } =\n useFormElementDateFromTo(element)\n\n const shortDateTimeFormat =\n localisationService.getDateFnsFormats().shortDateTime\n\n const maxDate = React.useMemo(() => {\n return parseDateValue({\n dateOnly: true,\n daysOffset: toDaysOffset,\n value: toDate,\n })\n }, [toDate, toDaysOffset])\n\n const minDate = React.useMemo(() => {\n return parseDateValue({\n dateOnly: true,\n daysOffset: fromDaysOffset,\n value: fromDate,\n })\n }, [fromDate, fromDaysOffset])\n\n const [commonProps, openDateTimePicker] = useFormDatePickerProps({\n id,\n value: typeof value === 'string' ? value : undefined,\n maxDate,\n minDate,\n ariaDescribedby,\n placeholder: element.placeholderValue,\n className: 'cypress-date-time-control',\n disabled: element.readOnly,\n onBlur: setIsDirty,\n onChange: (newDate) => {\n onChange(element, {\n value: newDate?.toISOString(),\n })\n },\n })\n\n const text = React.useMemo(() => {\n if (typeof value !== 'string') {\n return null\n }\n return localisationService.formatDatetime(new Date(value))\n }, [value])\n\n const { isLookingUp } = React.useContext(LookupNotificationContext)\n const isDisplayingValidationMessage =\n (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp\n\n return (\n <div className=\"cypress-datetime-element\">\n <FormElementLabelContainer\n className=\"ob-datetime\"\n id={id}\n element={element}\n required={element.required}\n >\n <div className=\"field has-addons\">\n <DateTimePicker\n label={element.label}\n format={shortDateTimeFormat}\n {...commonProps}\n timeSteps={{ minutes: 1 }}\n />\n {!element.readOnly && (\n <PickerInputButton\n tooltip=\"Select date and time\"\n onClick={openDateTimePicker}\n icon=\"date_range\"\n />\n )}\n {!!element.readOnly && !!text && (\n <div className=\"control\">\n <CopyToClipboardButton\n className=\"button is-input-addon copy-button cypress-copy-to-clipboard-button\"\n text={text}\n />\n </div>\n )}\n <LookupButton\n isInputButton\n value={value}\n validationMessage={validationMessage}\n lookupButtonConfig={element.lookupButton}\n />\n </div>\n\n {isDisplayingValidationMessage && (\n <div role=\"alert\" className=\"has-margin-top-8\">\n <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n {validationMessage}\n </div>\n </div>\n )}\n </FormElementLabelContainer>\n </div>\n )\n}\n\nexport default React.memo(FormElementDateTime)\n"]}
|
|
@@ -6,19 +6,19 @@ import LookupButton from '../components/renderer/LookupButton';
|
|
|
6
6
|
import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer';
|
|
7
7
|
import { LookupNotificationContext } from '../hooks/useLookupNotification';
|
|
8
8
|
import useElementAriaDescribedby from '../hooks/useElementAriaDescribedby';
|
|
9
|
-
import useFormDatePickerProps from '../hooks/form-date-picker/useFormDatePickerProps';
|
|
9
|
+
import useFormDatePickerProps, { PickerInputButton, } from '../hooks/form-date-picker/useFormDatePickerProps';
|
|
10
10
|
const timeFormat = localisationService.getDateFnsFormats().time;
|
|
11
11
|
function FormElementTime({ id, element, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, }) {
|
|
12
12
|
const ariaDescribedby = useElementAriaDescribedby(id, element);
|
|
13
|
-
const commonProps = useFormDatePickerProps({
|
|
13
|
+
const [commonProps, openTimePicker] = useFormDatePickerProps({
|
|
14
14
|
id,
|
|
15
15
|
value: typeof value === 'string' ? value : undefined,
|
|
16
16
|
maxDate: undefined,
|
|
17
17
|
minDate: undefined,
|
|
18
|
-
icon: 'schedule',
|
|
19
18
|
ariaDescribedby,
|
|
20
19
|
placeholder: element.placeholderValue,
|
|
21
20
|
className: 'cypress-time-control',
|
|
21
|
+
disabled: element.readOnly,
|
|
22
22
|
onBlur: setIsDirty,
|
|
23
23
|
onChange: (newDate) => {
|
|
24
24
|
onChange(element, {
|
|
@@ -43,8 +43,8 @@ function FormElementTime({ id, element, value, onChange, validationMessage, disp
|
|
|
43
43
|
return (React.createElement("div", { className: "cypress-time-element" },
|
|
44
44
|
React.createElement(FormElementLabelContainer, { className: "ob-time", id: id, element: element, required: element.required },
|
|
45
45
|
React.createElement("div", { className: "field has-addons" },
|
|
46
|
-
React.createElement(
|
|
47
|
-
|
|
46
|
+
React.createElement(TimePicker, { label: element.label, format: timeFormat, ...timeProps, timeSteps: { minutes: 1 } }),
|
|
47
|
+
!element.readOnly && (React.createElement(PickerInputButton, { tooltip: "Select time", onClick: openTimePicker, icon: "schedule" })),
|
|
48
48
|
!!element.readOnly && !!text && (React.createElement("div", { className: "control" },
|
|
49
49
|
React.createElement(CopyToClipboardButton, { className: "button is-input-addon copy-button cypress-copy-to-clipboard-button", text: text }))),
|
|
50
50
|
React.createElement(LookupButton, { isInputButton: true, value: value, validationMessage: validationMessage, lookupButtonConfig: element.lookupButton })),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormElementTime.js","sourceRoot":"","sources":["../../src/form-elements/FormElementTime.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAA;AAEpD,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AAEhD,OAAO,qBAAqB,MAAM,8CAA8C,CAAA;AAChF,OAAO,YAAY,MAAM,qCAAqC,CAAA;AAE9D,OAAO,yBAAyB,MAAM,kDAAkD,CAAA;AAExF,OAAO,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAA;AAC1E,OAAO,yBAAyB,MAAM,oCAAoC,CAAA;AAC1E,OAAO,sBAAsB,MAAM,kDAAkD,CAAA;
|
|
1
|
+
{"version":3,"file":"FormElementTime.js","sourceRoot":"","sources":["../../src/form-elements/FormElementTime.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { localisationService } from '@oneblink/apps'\nimport { FormTypes } from '@oneblink/types'\nimport { TimePicker } from '@mui/x-date-pickers'\n\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport LookupButton from '../components/renderer/LookupButton'\n\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport useFormDatePickerProps, {\n PickerInputButton,\n} from '../hooks/form-date-picker/useFormDatePickerProps'\n\ntype Props = {\n id: string\n element: FormTypes.TimeElement\n value: unknown | undefined\n onChange: FormElementValueChangeHandler<string>\n displayValidationMessage: boolean\n validationMessage: string | undefined\n} & IsDirtyProps\n\nconst timeFormat = localisationService.getDateFnsFormats().time\n\nfunction FormElementTime({\n id,\n element,\n value,\n onChange,\n validationMessage,\n displayValidationMessage,\n isDirty,\n setIsDirty,\n}: Props) {\n const ariaDescribedby = useElementAriaDescribedby(id, element)\n\n const [commonProps, openTimePicker] = useFormDatePickerProps({\n id,\n value: typeof value === 'string' ? value : undefined,\n maxDate: undefined,\n minDate: undefined,\n ariaDescribedby,\n placeholder: element.placeholderValue,\n className: 'cypress-time-control',\n disabled: element.readOnly,\n onBlur: setIsDirty,\n onChange: (newDate) => {\n onChange(element, {\n value: newDate?.toISOString(),\n })\n },\n })\n\n const timeProps = React.useMemo(() => {\n // maxDate and minDate not applicable to a timepicker\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const { maxDate, minDate, ...rest } = commonProps\n return rest\n }, [commonProps])\n\n const text = React.useMemo(() => {\n if (typeof value !== 'string') {\n return null\n }\n return localisationService.formatTime(new Date(value))\n }, [value])\n\n const { isLookingUp } = React.useContext(LookupNotificationContext)\n const isDisplayingValidationMessage =\n (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp\n\n return (\n <div className=\"cypress-time-element\">\n <FormElementLabelContainer\n className=\"ob-time\"\n id={id}\n element={element}\n required={element.required}\n >\n <div className=\"field has-addons\">\n <TimePicker\n label={element.label}\n format={timeFormat}\n {...timeProps}\n timeSteps={{ minutes: 1 }}\n />\n {!element.readOnly && (\n <PickerInputButton\n tooltip=\"Select time\"\n onClick={openTimePicker}\n icon=\"schedule\"\n />\n )}\n {!!element.readOnly && !!text && (\n <div className=\"control\">\n <CopyToClipboardButton\n className=\"button is-input-addon copy-button cypress-copy-to-clipboard-button\"\n text={text}\n />\n </div>\n )}\n <LookupButton\n isInputButton\n value={value}\n validationMessage={validationMessage}\n lookupButtonConfig={element.lookupButton}\n />\n </div>\n\n {isDisplayingValidationMessage && (\n <div role=\"alert\" className=\"has-margin-top-8\">\n <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n {validationMessage}\n </div>\n </div>\n )}\n </FormElementLabelContainer>\n </div>\n )\n}\n\nexport default React.memo(FormElementTime)\n"]}
|
|
@@ -1,45 +1,46 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { PickersActionBarAction } from '@mui/x-date-pickers';
|
|
3
|
-
|
|
3
|
+
import { PopperProps, TextFieldProps } from '@mui/material';
|
|
4
|
+
export declare const PickerInputButton: React.NamedExoticComponent<{
|
|
5
|
+
icon: string;
|
|
6
|
+
tooltip: string;
|
|
7
|
+
onClick: () => void;
|
|
8
|
+
}>;
|
|
9
|
+
export default function useFormDatePickerProps({ id, value, maxDate, minDate, ariaDescribedby, placeholder, disabled, className, onBlur, onChange, }: {
|
|
4
10
|
id: string;
|
|
5
11
|
value: string | undefined;
|
|
6
12
|
maxDate: string | undefined;
|
|
7
13
|
minDate: string | undefined;
|
|
8
|
-
icon: 'event' | 'date_range' | 'schedule';
|
|
9
14
|
ariaDescribedby: string | undefined;
|
|
10
15
|
placeholder: string | undefined;
|
|
16
|
+
disabled: boolean | undefined;
|
|
11
17
|
className: string;
|
|
12
18
|
onBlur: () => void;
|
|
13
19
|
onChange: (newDate: Date | undefined) => void;
|
|
14
|
-
}): {
|
|
15
|
-
slots: {
|
|
16
|
-
|
|
20
|
+
}): readonly [{
|
|
21
|
+
readonly slots: {
|
|
22
|
+
readonly textField: React.ForwardRefExoticComponent<(Omit<import("@mui/material").OutlinedTextFieldProps & {
|
|
23
|
+
ownerState?: unknown;
|
|
24
|
+
}, "ref"> | Omit<import("@mui/material").FilledTextFieldProps & {
|
|
25
|
+
ownerState?: unknown;
|
|
26
|
+
}, "ref"> | Omit<import("@mui/material").StandardTextFieldProps & {
|
|
27
|
+
ownerState?: unknown;
|
|
28
|
+
}, "ref">) & React.RefAttributes<HTMLDivElement>>;
|
|
17
29
|
};
|
|
18
|
-
slotProps: {
|
|
19
|
-
actionBar: {
|
|
20
|
-
actions: PickersActionBarAction[];
|
|
21
|
-
};
|
|
22
|
-
popper: {
|
|
23
|
-
disablePortal: boolean;
|
|
24
|
-
};
|
|
25
|
-
textField: {
|
|
26
|
-
id: string;
|
|
27
|
-
fullWidth: boolean;
|
|
28
|
-
label: undefined;
|
|
29
|
-
margin: "dense";
|
|
30
|
-
size: "small";
|
|
31
|
-
placeholder: string | undefined;
|
|
32
|
-
'aria-describedby': string | undefined;
|
|
33
|
-
onBlur: () => void;
|
|
34
|
-
error: boolean;
|
|
35
|
-
inputProps: {
|
|
36
|
-
className: string;
|
|
37
|
-
};
|
|
30
|
+
readonly slotProps: {
|
|
31
|
+
readonly actionBar: {
|
|
32
|
+
readonly actions: PickersActionBarAction[];
|
|
38
33
|
};
|
|
34
|
+
readonly popper: Partial<PopperProps>;
|
|
35
|
+
readonly textField: TextFieldProps;
|
|
39
36
|
};
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
37
|
+
readonly ref: React.RefObject<HTMLDivElement>;
|
|
38
|
+
readonly open: boolean;
|
|
39
|
+
readonly onClose: () => void;
|
|
40
|
+
readonly onChange: (newDate: Date | null) => void;
|
|
41
|
+
readonly maxDate: Date | undefined;
|
|
42
|
+
readonly minDate: Date | undefined;
|
|
43
|
+
readonly value: Date | null;
|
|
44
|
+
readonly disabled: boolean | undefined;
|
|
45
|
+
readonly desktopMediaQuery: "@media (pointer: fine)";
|
|
46
|
+
}, () => void];
|
|
@@ -1,56 +1,97 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import clsx from 'clsx';
|
|
3
|
+
import useBooleanState from '../useBooleanState';
|
|
4
|
+
import { useMediaQuery } from '@mui/material';
|
|
5
|
+
import Tooltip from '../../components/renderer/Tooltip';
|
|
3
6
|
import MaterialIcon from '../../components/MaterialIcon';
|
|
4
|
-
export
|
|
7
|
+
export const PickerInputButton = React.memo(function PickerInputButton({ icon, tooltip, onClick, }) {
|
|
8
|
+
return (React.createElement("div", { className: "control" },
|
|
9
|
+
React.createElement(Tooltip, { title: tooltip },
|
|
10
|
+
React.createElement("button", { onClick: onClick, className: "button is-input-addon cypress-date-picker-button", type: "button" },
|
|
11
|
+
React.createElement("span", { className: "icon" },
|
|
12
|
+
React.createElement(MaterialIcon, null, icon))))));
|
|
13
|
+
});
|
|
14
|
+
const Input = React.forwardRef(function Input({
|
|
15
|
+
/* eslint-disable @typescript-eslint/no-unused-vars */
|
|
16
|
+
focused, sx, label, size, ownerState, defaultValue, InputProps, error,
|
|
17
|
+
/* eslint-enable @typescript-eslint/no-unused-vars */
|
|
18
|
+
inputProps, inputRef, value, ...props }, ref) {
|
|
19
|
+
return (React.createElement("div", { className: "control is-expanded has-icons-right", ref: ref },
|
|
20
|
+
React.createElement("input", { ref: inputRef, value: value, ...props, ...inputProps })));
|
|
21
|
+
});
|
|
22
|
+
export default function useFormDatePickerProps({ id, value, maxDate, minDate, ariaDescribedby, placeholder, disabled, className, onBlur, onChange, }) {
|
|
23
|
+
const ref = React.useRef(null);
|
|
24
|
+
const [isPickerOpen, openPicker, closePicker] = useBooleanState(false);
|
|
5
25
|
const valueMemo = React.useMemo(() => {
|
|
6
26
|
return value ? new Date(value) : null;
|
|
7
27
|
}, [value]);
|
|
8
28
|
const maxDateMemo = React.useMemo(() => (maxDate ? new Date(maxDate) : undefined), [maxDate]);
|
|
9
29
|
const minDateMemo = React.useMemo(() => (minDate ? new Date(minDate) : undefined), [minDate]);
|
|
10
|
-
//
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
],
|
|
30
|
+
// default used by mui to determine when the mobile picker is used
|
|
31
|
+
// https://mui.com/x/react-date-pickers/date-picker/#available-components
|
|
32
|
+
const desktopMediaQuery = '@media (pointer: fine)';
|
|
33
|
+
const isDesktop = useMediaQuery(desktopMediaQuery);
|
|
34
|
+
const openPickerOnMobile = React.useCallback(() => {
|
|
35
|
+
if (!isDesktop) {
|
|
36
|
+
openPicker();
|
|
37
|
+
}
|
|
38
|
+
}, [isDesktop, openPicker]);
|
|
39
|
+
return [
|
|
40
|
+
{
|
|
41
|
+
slots: {
|
|
42
|
+
textField: Input,
|
|
24
43
|
},
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
44
|
+
slotProps: {
|
|
45
|
+
actionBar: {
|
|
46
|
+
actions: [
|
|
47
|
+
'clear',
|
|
48
|
+
'today',
|
|
49
|
+
'cancel',
|
|
50
|
+
'accept',
|
|
51
|
+
],
|
|
52
|
+
},
|
|
53
|
+
popper: {
|
|
54
|
+
container: ref.current,
|
|
55
|
+
anchorEl: ref.current,
|
|
56
|
+
modifiers: [
|
|
57
|
+
{
|
|
58
|
+
name: 'preventOverflow',
|
|
59
|
+
options: {
|
|
60
|
+
altAxis: false,
|
|
61
|
+
},
|
|
62
|
+
},
|
|
63
|
+
],
|
|
64
|
+
},
|
|
65
|
+
textField: {
|
|
66
|
+
id,
|
|
67
|
+
placeholder: placeholder,
|
|
68
|
+
'aria-describedby': ariaDescribedby,
|
|
69
|
+
onBlur,
|
|
38
70
|
className: clsx('input ob-input', className),
|
|
71
|
+
onClick: openPickerOnMobile,
|
|
39
72
|
},
|
|
40
73
|
},
|
|
74
|
+
ref,
|
|
75
|
+
open: isPickerOpen,
|
|
76
|
+
onClose: () => {
|
|
77
|
+
onBlur();
|
|
78
|
+
closePicker();
|
|
79
|
+
},
|
|
80
|
+
onChange: (newDate) => {
|
|
81
|
+
if (!(newDate instanceof Date) || isNaN(newDate.valueOf())) {
|
|
82
|
+
onChange(undefined);
|
|
83
|
+
}
|
|
84
|
+
else {
|
|
85
|
+
onChange(newDate);
|
|
86
|
+
}
|
|
87
|
+
},
|
|
88
|
+
maxDate: maxDateMemo,
|
|
89
|
+
minDate: minDateMemo,
|
|
90
|
+
value: valueMemo,
|
|
91
|
+
disabled,
|
|
92
|
+
desktopMediaQuery,
|
|
41
93
|
},
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
if (!(newDate instanceof Date) || isNaN(newDate.valueOf())) {
|
|
45
|
-
onChange(undefined);
|
|
46
|
-
}
|
|
47
|
-
else {
|
|
48
|
-
onChange(newDate);
|
|
49
|
-
}
|
|
50
|
-
},
|
|
51
|
-
maxDate: maxDateMemo,
|
|
52
|
-
minDate: minDateMemo,
|
|
53
|
-
value: valueMemo,
|
|
54
|
-
};
|
|
94
|
+
openPicker,
|
|
95
|
+
];
|
|
55
96
|
}
|
|
56
97
|
//# sourceMappingURL=useFormDatePickerProps.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFormDatePickerProps.js","sourceRoot":"","sources":["../../../src/hooks/form-date-picker/useFormDatePickerProps.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,YAAY,MAAM,+BAA+B,CAAA;AAExD,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAAC,EAC7C,EAAE,EACF,KAAK,EACL,OAAO,EACP,OAAO,EACP,
|
|
1
|
+
{"version":3,"file":"useFormDatePickerProps.js","sourceRoot":"","sources":["../../../src/hooks/form-date-picker/useFormDatePickerProps.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { PickersActionBarAction } from '@mui/x-date-pickers'\nimport clsx from 'clsx'\nimport useBooleanState from '../useBooleanState'\nimport { PopperProps, TextFieldProps, useMediaQuery } from '@mui/material'\nimport Tooltip from '../../components/renderer/Tooltip'\nimport MaterialIcon from '../../components/MaterialIcon'\n\nexport const PickerInputButton = React.memo(function PickerInputButton({\n icon,\n tooltip,\n onClick,\n}: {\n icon: string\n tooltip: string\n onClick: () => void\n}) {\n return (\n <div className=\"control\">\n <Tooltip title={tooltip}>\n <button\n onClick={onClick}\n className=\"button is-input-addon cypress-date-picker-button\"\n type=\"button\"\n >\n <span className=\"icon\">\n <MaterialIcon>{icon}</MaterialIcon>\n </span>\n </button>\n </Tooltip>\n </div>\n )\n})\n\nconst Input = React.forwardRef<\n HTMLDivElement,\n TextFieldProps & {\n ownerState?: unknown\n }\n>(function Input(\n {\n /* eslint-disable @typescript-eslint/no-unused-vars */\n focused,\n sx,\n label,\n size,\n ownerState,\n defaultValue,\n InputProps,\n error,\n /* eslint-enable @typescript-eslint/no-unused-vars */\n inputProps,\n inputRef,\n value,\n ...props\n },\n ref,\n) {\n return (\n <div className=\"control is-expanded has-icons-right\" ref={ref}>\n <input\n ref={inputRef}\n value={value as string}\n {...props}\n {...inputProps}\n />\n </div>\n )\n})\n\nexport default function useFormDatePickerProps({\n id,\n value,\n maxDate,\n minDate,\n ariaDescribedby,\n placeholder,\n disabled,\n className,\n onBlur,\n onChange,\n}: {\n id: string\n value: string | undefined\n maxDate: string | undefined\n minDate: string | undefined\n ariaDescribedby: string | undefined\n placeholder: string | undefined\n disabled: boolean | undefined\n className: string\n onBlur: () => void\n onChange: (newDate: Date | undefined) => void\n}) {\n const ref = React.useRef<HTMLDivElement>(null)\n const [isPickerOpen, openPicker, closePicker] = useBooleanState(false)\n\n const valueMemo = React.useMemo(() => {\n return value ? new Date(value) : null\n }, [value])\n\n const maxDateMemo = React.useMemo(\n () => (maxDate ? new Date(maxDate) : undefined),\n [maxDate],\n )\n const minDateMemo = React.useMemo(\n () => (minDate ? new Date(minDate) : undefined),\n [minDate],\n )\n // default used by mui to determine when the mobile picker is used\n // https://mui.com/x/react-date-pickers/date-picker/#available-components\n const desktopMediaQuery = '@media (pointer: fine)'\n\n const isDesktop = useMediaQuery(desktopMediaQuery)\n\n const openPickerOnMobile = React.useCallback(() => {\n if (!isDesktop) {\n openPicker()\n }\n }, [isDesktop, openPicker])\n\n return [\n {\n slots: {\n textField: Input,\n },\n slotProps: {\n actionBar: {\n actions: [\n 'clear',\n 'today',\n 'cancel',\n 'accept',\n ] as PickersActionBarAction[],\n },\n popper: {\n container: ref.current,\n anchorEl: ref.current,\n modifiers: [\n {\n name: 'preventOverflow',\n options: {\n altAxis: false,\n },\n },\n ],\n } as Partial<PopperProps>,\n textField: {\n id,\n placeholder: placeholder,\n 'aria-describedby': ariaDescribedby,\n onBlur,\n className: clsx('input ob-input', className),\n onClick: openPickerOnMobile,\n } as TextFieldProps,\n },\n ref,\n open: isPickerOpen,\n onClose: () => {\n onBlur()\n closePicker()\n },\n onChange: (newDate: Date | null) => {\n if (!(newDate instanceof Date) || isNaN(newDate.valueOf())) {\n onChange(undefined)\n } else {\n onChange(newDate)\n }\n },\n maxDate: maxDateMemo,\n minDate: minDateMemo,\n value: valueMemo,\n disabled,\n desktopMediaQuery,\n },\n openPicker,\n ] as const\n}\n"]}
|
package/dist/styles.css
CHANGED
|
@@ -8790,28 +8790,6 @@ button on-loading {
|
|
|
8790
8790
|
width: 25%;
|
|
8791
8791
|
}
|
|
8792
8792
|
}
|
|
8793
|
-
.ob-date .MuiInputBase-root,
|
|
8794
|
-
.ob-datetime .MuiInputBase-root,
|
|
8795
|
-
.ob-time .MuiInputBase-root {
|
|
8796
|
-
font-family: inherit;
|
|
8797
|
-
}
|
|
8798
|
-
.ob-date .MuiInputBase-root fieldset,
|
|
8799
|
-
.ob-datetime .MuiInputBase-root fieldset,
|
|
8800
|
-
.ob-time .MuiInputBase-root fieldset {
|
|
8801
|
-
border-color: hsl(0, 0%, 86%);
|
|
8802
|
-
}
|
|
8803
|
-
.ob-date .MuiInputBase-root:hover fieldset,
|
|
8804
|
-
.ob-datetime .MuiInputBase-root:hover fieldset,
|
|
8805
|
-
.ob-time .MuiInputBase-root:hover fieldset {
|
|
8806
|
-
border-color: hsl(0, 0%, 71%);
|
|
8807
|
-
}
|
|
8808
|
-
.ob-date .MuiInputBase-root.Mui-focused fieldset,
|
|
8809
|
-
.ob-datetime .MuiInputBase-root.Mui-focused fieldset,
|
|
8810
|
-
.ob-time .MuiInputBase-root.Mui-focused fieldset {
|
|
8811
|
-
border-color: hsl(229, 53%, 53%);
|
|
8812
|
-
border-width: 1px;
|
|
8813
|
-
}
|
|
8814
|
-
|
|
8815
8793
|
.ob-number__output {
|
|
8816
8794
|
background-color: #757575;
|
|
8817
8795
|
color: hsl(0, 0%, 100%);
|
package/dist/styles.scss
CHANGED
|
@@ -117,7 +117,6 @@ $section-padding-mobile: $section-padding-mobile-y $section-padding-mobile-x;
|
|
|
117
117
|
@import './styles/repeatable-set.scss';
|
|
118
118
|
@import './styles/ob-image.scss';
|
|
119
119
|
@import './styles/ob-files.scss';
|
|
120
|
-
@import './styles/date.scss';
|
|
121
120
|
@import './styles/number.scss';
|
|
122
121
|
@import './styles/autocomplete.scss';
|
|
123
122
|
@import './styles/lookup.scss';
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@oneblink/apps-react",
|
|
3
3
|
"description": "Helper functions for OneBlink apps in ReactJS.",
|
|
4
|
-
"version": "8.0.0
|
|
4
|
+
"version": "8.0.0",
|
|
5
5
|
"author": "OneBlink <developers@oneblink.io> (https://oneblink.io)",
|
|
6
6
|
"bugs": {
|
|
7
7
|
"url": "https://github.com/oneblink/apps-react/issues"
|
package/dist/styles/date.scss
DELETED
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
.ob-date,
|
|
2
|
-
.ob-datetime,
|
|
3
|
-
.ob-time {
|
|
4
|
-
& .MuiInputBase-root {
|
|
5
|
-
font-family: inherit;
|
|
6
|
-
|
|
7
|
-
& fieldset {
|
|
8
|
-
border-color: $input-border-color;
|
|
9
|
-
}
|
|
10
|
-
&:hover fieldset {
|
|
11
|
-
border-color: $input-hover-border-color;
|
|
12
|
-
}
|
|
13
|
-
&.Mui-focused fieldset {
|
|
14
|
-
border-color: $input-focus-border-color;
|
|
15
|
-
border-width: $control-border-width;
|
|
16
|
-
}
|
|
17
|
-
}
|
|
18
|
-
}
|