@oneblink/apps-react 8.0.0-beta.5 → 8.0.0-beta.7
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 +5 -6
- package/dist/form-elements/FormElementDate.js.map +1 -1
- package/dist/form-elements/FormElementDateTime.js +7 -6
- package/dist/form-elements/FormElementDateTime.js.map +1 -1
- package/dist/form-elements/FormElementTime.js +7 -9
- package/dist/form-elements/FormElementTime.js.map +1 -1
- package/dist/hooks/form-date-picker/useFormDatePickerProps.d.ts +10 -3
- package/dist/hooks/form-date-picker/useFormDatePickerProps.js +36 -13
- package/dist/hooks/form-date-picker/useFormDatePickerProps.js.map +1 -1
- package/package.json +3 -3
|
@@ -38,6 +38,10 @@ function FormElementDate({ id, element, value, onChange, validationMessage, disp
|
|
|
38
38
|
autocompleteAttributes,
|
|
39
39
|
placeholder: element.placeholderValue,
|
|
40
40
|
className: 'cypress-date-control',
|
|
41
|
+
onBlur: setIsDirty,
|
|
42
|
+
onChange: (newDate) => onChange(element, {
|
|
43
|
+
value: newDate ? format(newDate, 'yyyy-MM-dd') : undefined,
|
|
44
|
+
}),
|
|
41
45
|
});
|
|
42
46
|
const text = React.useMemo(() => {
|
|
43
47
|
if (typeof value === 'string') {
|
|
@@ -57,12 +61,7 @@ function FormElementDate({ id, element, value, onChange, validationMessage, disp
|
|
|
57
61
|
React.createElement(FormElementLabelContainer, { className: "ob-date", id: id, element: element, required: element.required },
|
|
58
62
|
React.createElement("div", { className: "field has-addons" },
|
|
59
63
|
React.createElement("div", { className: "control is-expanded has-icons-right" },
|
|
60
|
-
React.createElement(DatePicker, { label: element.label, format: shortDateFormat, ...commonProps,
|
|
61
|
-
onChange(element, {
|
|
62
|
-
value: newDate ? format(newDate, 'yyyy-MM-dd') : undefined,
|
|
63
|
-
});
|
|
64
|
-
setIsDirty();
|
|
65
|
-
}, disabled: element.readOnly, onClose: setIsDirty })),
|
|
64
|
+
React.createElement(DatePicker, { label: element.label, format: shortDateFormat, ...commonProps, disabled: element.readOnly })),
|
|
66
65
|
!!element.readOnly && !!text && (React.createElement("div", { className: "control" },
|
|
67
66
|
React.createElement(CopyToClipboardButton, { className: "button is-input-addon copy-button cypress-copy-to-clipboard-button", text: text }))),
|
|
68
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,MAAM,kDAAkD,CAAA;AAErF,MAAM,eAAe,GAAG,mBAAmB,CAAC,iBAAiB,EAAE,CAAC,SAAS,CAAA;AAYzE,SAAS,eAAe,CAAC,EACvB,EAAE,EACF,OAAO,EACP,KAAK,EACL,QAAQ,EACR,iBAAiB,EACjB,wBAAwB,EACxB,OAAO,EACP,UAAU,EACV,sBAAsB,GAChB;IACN,MAAM,eAAe,GAAG,yBAAyB,CAAC,EAAE,EAAE,OAAO,CAAC,CAAA;IAE9D,MAAM,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,EAAE,YAAY,EAAE,GACtD,wBAAwB,CAAC,OAAO,CAAC,CAAA;IAEnC,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACjC,OAAO,cAAc,CAAC;YACpB,QAAQ,EAAE,IAAI;YACd,UAAU,EAAE,YAAY;YACxB,KAAK,EAAE,MAAM;SACd,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC,CAAA;IAE1B,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACjC,OAAO,cAAc,CAAC;YACpB,QAAQ,EAAE,IAAI;YACd,UAAU,EAAE,cAAc;YAC1B,KAAK,EAAE,QAAQ;SAChB,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC,CAAA;IAE9B,MAAM,WAAW,GAAG,sBAAsB,CAAC;QACzC,EAAE;QACF,KAAK,EAAE,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS;QACpD,OAAO;QACP,OAAO;QACP,IAAI,EAAE,OAAO;QACb,eAAe;QACf,sBAAsB;QACtB,WAAW,EAAE,OAAO,CAAC,gBAAgB;QACrC,SAAS,EAAE,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 from '../hooks/form-date-picker/useFormDatePickerProps'\n\nconst shortDateFormat = localisationService.getDateFnsFormats().shortDate\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 autocompleteAttributes?: string\n} & IsDirtyProps\n\nfunction FormElementDate({\n id,\n element,\n value,\n onChange,\n validationMessage,\n displayValidationMessage,\n isDirty,\n setIsDirty,\n autocompleteAttributes,\n}: Props) {\n const ariaDescribedby = useElementAriaDescribedby(id, element)\n\n const { fromDate, fromDaysOffset, toDate, toDaysOffset } =\n useFormElementDateFromTo(element)\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 = useFormDatePickerProps({\n id,\n value: typeof value === 'string' ? value : undefined,\n maxDate,\n minDate,\n icon: 'event',\n ariaDescribedby,\n autocompleteAttributes,\n placeholder: element.placeholderValue,\n className: 'cypress-date-control',\n onBlur: setIsDirty,\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 <div className=\"control is-expanded has-icons-right\">\n <DatePicker\n label={element.label}\n format={shortDateFormat}\n {...commonProps}\n disabled={element.readOnly}\n />\n </div>\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"]}
|
|
@@ -37,6 +37,12 @@ function FormElementDateTime({ id, element, value, onChange, validationMessage,
|
|
|
37
37
|
autocompleteAttributes,
|
|
38
38
|
placeholder: element.placeholderValue,
|
|
39
39
|
className: 'cypress-date-time-control',
|
|
40
|
+
onBlur: setIsDirty,
|
|
41
|
+
onChange: (newDate) => {
|
|
42
|
+
onChange(element, {
|
|
43
|
+
value: newDate === null || newDate === void 0 ? void 0 : newDate.toISOString(),
|
|
44
|
+
});
|
|
45
|
+
},
|
|
40
46
|
});
|
|
41
47
|
const text = React.useMemo(() => {
|
|
42
48
|
if (typeof value !== 'string') {
|
|
@@ -50,12 +56,7 @@ function FormElementDateTime({ id, element, value, onChange, validationMessage,
|
|
|
50
56
|
React.createElement(FormElementLabelContainer, { className: "ob-datetime", id: id, element: element, required: element.required },
|
|
51
57
|
React.createElement("div", { className: "field has-addons" },
|
|
52
58
|
React.createElement("div", { className: "control is-expanded has-icons-right" },
|
|
53
|
-
React.createElement(DateTimePicker, { label: element.label, format: shortDateTimeFormat, ...commonProps,
|
|
54
|
-
onChange(element, {
|
|
55
|
-
value: newDate === null || newDate === void 0 ? void 0 : newDate.toISOString(),
|
|
56
|
-
});
|
|
57
|
-
setIsDirty();
|
|
58
|
-
}, disabled: element.readOnly, timeSteps: { minutes: 1 }, onClose: setIsDirty })),
|
|
59
|
+
React.createElement(DateTimePicker, { label: element.label, format: shortDateTimeFormat, ...commonProps, disabled: element.readOnly, timeSteps: { minutes: 1 } })),
|
|
59
60
|
!!element.readOnly && !!text && (React.createElement("div", { className: "control" },
|
|
60
61
|
React.createElement(CopyToClipboardButton, { className: "button is-input-addon copy-button cypress-copy-to-clipboard-button", text: text }))),
|
|
61
62
|
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,MAAM,kDAAkD,CAAA;AAErF,MAAM,mBAAmB,GACvB,mBAAmB,CAAC,iBAAiB,EAAE,CAAC,aAAa,CAAA;AAYvD,SAAS,mBAAmB,CAAC,EAC3B,EAAE,EACF,OAAO,EACP,KAAK,EACL,QAAQ,EACR,iBAAiB,EACjB,wBAAwB,EACxB,OAAO,EACP,UAAU,EACV,sBAAsB,GAChB;IACN,MAAM,eAAe,GAAG,yBAAyB,CAAC,EAAE,EAAE,OAAO,CAAC,CAAA;IAE9D,MAAM,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,EAAE,YAAY,EAAE,GACtD,wBAAwB,CAAC,OAAO,CAAC,CAAA;IAEnC,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACjC,OAAO,cAAc,CAAC;YACpB,QAAQ,EAAE,IAAI;YACd,UAAU,EAAE,YAAY;YACxB,KAAK,EAAE,MAAM;SACd,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC,CAAA;IAE1B,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACjC,OAAO,cAAc,CAAC;YACpB,QAAQ,EAAE,IAAI;YACd,UAAU,EAAE,cAAc;YAC1B,KAAK,EAAE,QAAQ;SAChB,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC,CAAA;IAE9B,MAAM,WAAW,GAAG,sBAAsB,CAAC;QACzC,EAAE;QACF,KAAK,EAAE,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS;QACpD,OAAO;QACP,OAAO;QACP,IAAI,EAAE,YAAY;QAClB,eAAe;QACf,sBAAsB;QACtB,WAAW,EAAE,OAAO,CAAC,gBAAgB;QACrC,SAAS,EAAE,2BAA2B;
|
|
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 from '../hooks/form-date-picker/useFormDatePickerProps'\n\nconst shortDateTimeFormat =\n localisationService.getDateFnsFormats().shortDateTime\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 autocompleteAttributes?: string\n} & IsDirtyProps\n\nfunction FormElementDateTime({\n id,\n element,\n value,\n onChange,\n validationMessage,\n displayValidationMessage,\n isDirty,\n setIsDirty,\n autocompleteAttributes,\n}: Props) {\n const ariaDescribedby = useElementAriaDescribedby(id, element)\n\n const { fromDate, fromDaysOffset, toDate, toDaysOffset } =\n useFormElementDateFromTo(element)\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 = useFormDatePickerProps({\n id,\n value: typeof value === 'string' ? value : undefined,\n maxDate,\n minDate,\n icon: 'date_range',\n ariaDescribedby,\n autocompleteAttributes,\n placeholder: element.placeholderValue,\n className: 'cypress-date-time-control',\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 <div className=\"control is-expanded has-icons-right\">\n <DateTimePicker\n label={element.label}\n format={shortDateTimeFormat}\n {...commonProps}\n disabled={element.readOnly}\n timeSteps={{ minutes: 1 }}\n />\n </div>\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"]}
|
|
@@ -10,12 +10,6 @@ import useFormDatePickerProps from '../hooks/form-date-picker/useFormDatePickerP
|
|
|
10
10
|
const timeFormat = localisationService.getDateFnsFormats().time;
|
|
11
11
|
function FormElementTime({ id, element, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, autocompleteAttributes, }) {
|
|
12
12
|
const ariaDescribedby = useElementAriaDescribedby(id, element);
|
|
13
|
-
const handleChange = React.useCallback((newValue) => {
|
|
14
|
-
onChange(element, {
|
|
15
|
-
value: newValue,
|
|
16
|
-
});
|
|
17
|
-
setIsDirty();
|
|
18
|
-
}, [element, onChange, setIsDirty]);
|
|
19
13
|
const commonProps = useFormDatePickerProps({
|
|
20
14
|
id,
|
|
21
15
|
value: typeof value === 'string' ? value : undefined,
|
|
@@ -26,6 +20,12 @@ function FormElementTime({ id, element, value, onChange, validationMessage, disp
|
|
|
26
20
|
autocompleteAttributes,
|
|
27
21
|
placeholder: element.placeholderValue,
|
|
28
22
|
className: 'cypress-time-control',
|
|
23
|
+
onBlur: setIsDirty,
|
|
24
|
+
onChange: (newDate) => {
|
|
25
|
+
onChange(element, {
|
|
26
|
+
value: newDate === null || newDate === void 0 ? void 0 : newDate.toISOString(),
|
|
27
|
+
});
|
|
28
|
+
},
|
|
29
29
|
});
|
|
30
30
|
const timeProps = React.useMemo(() => {
|
|
31
31
|
// maxDate and minDate not applicable to a timepicker
|
|
@@ -45,9 +45,7 @@ function FormElementTime({ id, element, value, onChange, validationMessage, disp
|
|
|
45
45
|
React.createElement(FormElementLabelContainer, { className: "ob-time", id: id, element: element, required: element.required },
|
|
46
46
|
React.createElement("div", { className: "field has-addons" },
|
|
47
47
|
React.createElement("div", { className: "control is-expanded has-icons-right" },
|
|
48
|
-
React.createElement(TimePicker, { label: element.label, format: timeFormat, ...timeProps,
|
|
49
|
-
handleChange(newDate === null || newDate === void 0 ? void 0 : newDate.toISOString());
|
|
50
|
-
}, disabled: element.readOnly, timeSteps: { minutes: 1 }, onClose: setIsDirty })),
|
|
48
|
+
React.createElement(TimePicker, { label: element.label, format: timeFormat, ...timeProps, disabled: element.readOnly, timeSteps: { minutes: 1 } })),
|
|
51
49
|
!!element.readOnly && !!text && (React.createElement("div", { className: "control" },
|
|
52
50
|
React.createElement(CopyToClipboardButton, { className: "button is-input-addon copy-button cypress-copy-to-clipboard-button", text: text }))),
|
|
53
51
|
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;AAYrF,MAAM,UAAU,GAAG,mBAAmB,CAAC,iBAAiB,EAAE,CAAC,IAAI,CAAA;AAE/D,SAAS,eAAe,CAAC,EACvB,EAAE,EACF,OAAO,EACP,KAAK,EACL,QAAQ,EACR,iBAAiB,EACjB,wBAAwB,EACxB,OAAO,EACP,UAAU,EACV,sBAAsB,GAChB;IACN,MAAM,eAAe,GAAG,yBAAyB,CAAC,EAAE,EAAE,OAAO,CAAC,CAAA;IAE9D,MAAM,
|
|
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 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 autocompleteAttributes?: string\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 autocompleteAttributes,\n}: Props) {\n const ariaDescribedby = useElementAriaDescribedby(id, element)\n\n const commonProps = useFormDatePickerProps({\n id,\n value: typeof value === 'string' ? value : undefined,\n maxDate: undefined,\n minDate: undefined,\n icon: 'schedule',\n ariaDescribedby,\n autocompleteAttributes,\n placeholder: element.placeholderValue,\n className: 'cypress-time-control',\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 <div className=\"control is-expanded has-icons-right\">\n <TimePicker\n label={element.label}\n format={timeFormat}\n {...timeProps}\n disabled={element.readOnly}\n timeSteps={{ minutes: 1 }}\n />\n </div>\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,7 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { TextFieldProps } from '@mui/material';
|
|
3
3
|
import { PickersActionBarAction } from '@mui/x-date-pickers';
|
|
4
|
-
export default function useFormDatePickerProps({ id, value, maxDate, minDate, icon, ariaDescribedby, autocompleteAttributes, placeholder, className, }: {
|
|
4
|
+
export default function useFormDatePickerProps({ id, value, maxDate, minDate, icon, ariaDescribedby, autocompleteAttributes, placeholder, className, onBlur, onChange, }: {
|
|
5
5
|
id: string;
|
|
6
6
|
value: string | undefined;
|
|
7
7
|
maxDate: string | undefined;
|
|
@@ -11,6 +11,8 @@ export default function useFormDatePickerProps({ id, value, maxDate, minDate, ic
|
|
|
11
11
|
autocompleteAttributes: string | undefined;
|
|
12
12
|
placeholder: string | undefined;
|
|
13
13
|
className: string;
|
|
14
|
+
onBlur: () => void;
|
|
15
|
+
onChange: (newDate: Date | undefined) => void;
|
|
14
16
|
}): {
|
|
15
17
|
slots: {
|
|
16
18
|
textField: (params: React.PropsWithChildren<TextFieldProps>) => React.JSX.Element;
|
|
@@ -20,8 +22,13 @@ export default function useFormDatePickerProps({ id, value, maxDate, minDate, ic
|
|
|
20
22
|
actionBar: {
|
|
21
23
|
actions: PickersActionBarAction[];
|
|
22
24
|
};
|
|
25
|
+
popper: {
|
|
26
|
+
disablePortal: boolean;
|
|
27
|
+
};
|
|
23
28
|
};
|
|
24
|
-
|
|
25
|
-
|
|
29
|
+
onClose: () => void;
|
|
30
|
+
onChange: (newDate: Date | null) => void;
|
|
31
|
+
maxDate: Date | undefined;
|
|
32
|
+
minDate: Date | undefined;
|
|
26
33
|
value: Date | null;
|
|
27
34
|
};
|
|
@@ -17,25 +17,38 @@ const StyledTextField = styled(TextField)(() => ({
|
|
|
17
17
|
},
|
|
18
18
|
},
|
|
19
19
|
}));
|
|
20
|
-
export default function useFormDatePickerProps({ id, value, maxDate, minDate, icon, ariaDescribedby, autocompleteAttributes, placeholder, className, }) {
|
|
20
|
+
export default function useFormDatePickerProps({ id, value, maxDate, minDate, icon, ariaDescribedby, autocompleteAttributes, placeholder, className, onBlur, onChange, }) {
|
|
21
21
|
const valueMemo = React.useMemo(() => {
|
|
22
22
|
return value ? new Date(value) : null;
|
|
23
23
|
}, [value]);
|
|
24
|
-
const maxDateMemo = React.useMemo(() => (maxDate ? new Date(maxDate) :
|
|
25
|
-
const minDateMemo = React.useMemo(() => (minDate ? new Date(minDate) :
|
|
26
|
-
//must be a
|
|
24
|
+
const maxDateMemo = React.useMemo(() => (maxDate ? new Date(maxDate) : undefined), [maxDate]);
|
|
25
|
+
const minDateMemo = React.useMemo(() => (minDate ? new Date(minDate) : undefined), [minDate]);
|
|
26
|
+
//must be a function
|
|
27
27
|
const openPickerIcon = React.useCallback(() => React.createElement(MaterialIcon, { className: "is-size-5" }, icon), [icon]);
|
|
28
|
+
const textField = React.useCallback((params) => {
|
|
29
|
+
var _a;
|
|
30
|
+
return (React.createElement(StyledTextField, { ...params, id: id, variant: "outlined", margin: "dense", size: "small", label: undefined, placeholder: placeholder, autoComplete: autocompleteAttributes, "aria-describedby": ariaDescribedby, inputProps: {
|
|
31
|
+
...params.inputProps,
|
|
32
|
+
className: clsx((_a = params.inputProps) === null || _a === void 0 ? void 0 : _a.className, 'input ob-input', className),
|
|
33
|
+
}, fullWidth: true, onBlur: (e) => {
|
|
34
|
+
var _a;
|
|
35
|
+
//need to run the blur function being passed from the picker
|
|
36
|
+
(_a = params === null || params === void 0 ? void 0 : params.onBlur) === null || _a === void 0 ? void 0 : _a.call(params, e);
|
|
37
|
+
onBlur();
|
|
38
|
+
},
|
|
39
|
+
//we have our own error and helper text state
|
|
40
|
+
error: undefined }));
|
|
41
|
+
}, [
|
|
42
|
+
ariaDescribedby,
|
|
43
|
+
autocompleteAttributes,
|
|
44
|
+
className,
|
|
45
|
+
id,
|
|
46
|
+
onBlur,
|
|
47
|
+
placeholder,
|
|
48
|
+
]);
|
|
28
49
|
return {
|
|
29
50
|
slots: {
|
|
30
|
-
textField
|
|
31
|
-
var _a;
|
|
32
|
-
return (React.createElement(StyledTextField, { ...params, id: id, variant: "outlined", margin: "dense", size: "small", label: undefined, placeholder: placeholder, autoComplete: autocompleteAttributes, "aria-describedby": ariaDescribedby, inputProps: {
|
|
33
|
-
...params.inputProps,
|
|
34
|
-
className: clsx((_a = params.inputProps) === null || _a === void 0 ? void 0 : _a.className, 'input ob-input', className),
|
|
35
|
-
}, fullWidth: true,
|
|
36
|
-
//we have our own error and helper text state
|
|
37
|
-
error: undefined }));
|
|
38
|
-
},
|
|
51
|
+
textField,
|
|
39
52
|
openPickerIcon,
|
|
40
53
|
},
|
|
41
54
|
slotProps: {
|
|
@@ -47,6 +60,16 @@ export default function useFormDatePickerProps({ id, value, maxDate, minDate, ic
|
|
|
47
60
|
'accept',
|
|
48
61
|
],
|
|
49
62
|
},
|
|
63
|
+
popper: { disablePortal: true },
|
|
64
|
+
},
|
|
65
|
+
onClose: onBlur,
|
|
66
|
+
onChange: (newDate) => {
|
|
67
|
+
if (!(newDate instanceof Date) || isNaN(newDate.valueOf())) {
|
|
68
|
+
onChange(undefined);
|
|
69
|
+
}
|
|
70
|
+
else {
|
|
71
|
+
onChange(newDate);
|
|
72
|
+
}
|
|
50
73
|
},
|
|
51
74
|
maxDate: maxDateMemo,
|
|
52
75
|
minDate: minDateMemo,
|
|
@@ -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;AAC9B,OAAO,EAAE,SAAS,EAAkB,MAAM,EAAE,MAAM,eAAe,CAAA;AAEjE,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,YAAY,MAAM,+BAA+B,CAAA;AAExD,MAAM,eAAe,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC;IAC/C,0BAA0B,EAAE;QAC1B,UAAU,EAAE,SAAS;QACrB,YAAY,EAAE;YACZ,WAAW,EAAE,SAAS;SACvB;QACD,kBAAkB,EAAE;YAClB,WAAW,EAAE,SAAS;SACvB;QACD,wBAAwB,EAAE;YACxB,WAAW,EAAE,SAAS;YACtB,WAAW,EAAE,KAAK;SACnB;KACF;CACF,CAAC,CAAC,CAAA;AAEH,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAAC,EAC7C,EAAE,EACF,KAAK,EACL,OAAO,EACP,OAAO,EACP,IAAI,EACJ,eAAe,EACf,sBAAsB,EACtB,WAAW,EACX,SAAS,
|
|
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 { TextField, TextFieldProps, styled } from '@mui/material'\nimport { PickersActionBarAction } from '@mui/x-date-pickers'\nimport clsx from 'clsx'\nimport MaterialIcon from '../../components/MaterialIcon'\n\nconst StyledTextField = styled(TextField)(() => ({\n '& .MuiOutlinedInput-root': {\n fontFamily: 'inherit',\n '& fieldset': {\n borderColor: '#dbdbdb',\n },\n '&:hover fieldset': {\n borderColor: '#b5b5b5',\n },\n '&.Mui-focused fieldset': {\n borderColor: '#485fc7',\n borderWidth: '1px',\n },\n },\n}))\n\nexport default function useFormDatePickerProps({\n id,\n value,\n maxDate,\n minDate,\n icon,\n ariaDescribedby,\n autocompleteAttributes,\n placeholder,\n className,\n onBlur,\n onChange,\n}: {\n id: string\n value: string | undefined\n maxDate: string | undefined\n minDate: string | undefined\n icon: 'event' | 'date_range' | 'schedule'\n ariaDescribedby: string | undefined\n autocompleteAttributes: string | undefined\n placeholder: string | undefined\n className: string\n onBlur: () => void\n onChange: (newDate: Date | undefined) => void\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\n //must be a function\n const openPickerIcon = React.useCallback(\n () => <MaterialIcon className=\"is-size-5\">{icon}</MaterialIcon>,\n [icon],\n )\n\n const textField = React.useCallback(\n (params: React.PropsWithChildren<TextFieldProps>) => (\n <StyledTextField\n {...params}\n id={id}\n variant=\"outlined\"\n margin=\"dense\"\n size=\"small\"\n label={undefined}\n placeholder={placeholder}\n autoComplete={autocompleteAttributes}\n aria-describedby={ariaDescribedby}\n inputProps={{\n ...params.inputProps,\n className: clsx(\n params.inputProps?.className,\n 'input ob-input',\n className,\n ),\n }}\n fullWidth\n onBlur={(e) => {\n //need to run the blur function being passed from the picker\n params?.onBlur?.(e)\n onBlur()\n }}\n //we have our own error and helper text state\n error={undefined}\n />\n ),\n [\n ariaDescribedby,\n autocompleteAttributes,\n className,\n id,\n onBlur,\n placeholder,\n ],\n )\n\n return {\n slots: {\n textField,\n openPickerIcon,\n },\n slotProps: {\n actionBar: {\n actions: [\n 'clear',\n 'today',\n 'cancel',\n 'accept',\n ] as PickersActionBarAction[],\n },\n popper: { disablePortal: true },\n },\n onClose: onBlur,\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 }\n}\n"]}
|
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-beta.
|
|
4
|
+
"version": "8.0.0-beta.7",
|
|
5
5
|
"author": "OneBlink <developers@oneblink.io> (https://oneblink.io)",
|
|
6
6
|
"bugs": {
|
|
7
7
|
"url": "https://github.com/oneblink/apps-react/issues"
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
"@microsoft/eslint-plugin-sdl": "^0.2.2",
|
|
47
47
|
"@mui/lab": "^5.0.0-alpha.152",
|
|
48
48
|
"@mui/material": "^5.15.6",
|
|
49
|
-
"@mui/x-date-pickers": "^6.
|
|
49
|
+
"@mui/x-date-pickers": "^6.20.2",
|
|
50
50
|
"@oneblink/apps": "^21.0.0-beta.1",
|
|
51
51
|
"@oneblink/release-cli": "^3.3.0",
|
|
52
52
|
"@oneblink/types": "github:oneblink/types",
|
|
@@ -107,7 +107,7 @@
|
|
|
107
107
|
"peerDependencies": {
|
|
108
108
|
"@mui/lab": "^5.0.0 || ^5.0.0-alpha.152",
|
|
109
109
|
"@mui/material": "^5.6.1",
|
|
110
|
-
"@mui/x-date-pickers": "^6.
|
|
110
|
+
"@mui/x-date-pickers": "^6.20.2",
|
|
111
111
|
"@oneblink/apps": "*",
|
|
112
112
|
"react": "^17.0.0",
|
|
113
113
|
"react-dom": "^17.0.0",
|