@oneblink/apps-react 8.0.0-beta.13 → 8.0.0-beta.14
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.
|
@@ -10,10 +10,10 @@ import useFormElementDateFromTo from '../hooks/useFormElementDateFromTo';
|
|
|
10
10
|
import { LookupNotificationContext } from '../hooks/useLookupNotification';
|
|
11
11
|
import useElementAriaDescribedby from '../hooks/useElementAriaDescribedby';
|
|
12
12
|
import useFormDatePickerProps, { PickerInputButton, } from '../hooks/form-date-picker/useFormDatePickerProps';
|
|
13
|
-
const shortDateFormat = localisationService.getDateFnsFormats().shortDate;
|
|
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,
|
|
@@ -30,7 +30,7 @@ function FormElementDate({ id, element, value, onChange, validationMessage, disp
|
|
|
30
30
|
}, [fromDate, fromDaysOffset]);
|
|
31
31
|
const [commonProps, openDatePicker] = useFormDatePickerProps({
|
|
32
32
|
id,
|
|
33
|
-
value:
|
|
33
|
+
value: parseDateValue({ dateOnly: false, daysOffset: 0, value }),
|
|
34
34
|
maxDate,
|
|
35
35
|
minDate,
|
|
36
36
|
ariaDescribedby,
|
|
@@ -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,EAAE,EAC7B,iBAAiB,GAClB,MAAM,kDAAkD,CAAA;
|
|
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 [commonProps, openDatePicker] = useFormDatePickerProps({\n id,\n value: parseDateValue({ dateOnly: false, daysOffset: 0, value }),\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"]}
|
|
@@ -9,10 +9,10 @@ import useFormElementDateFromTo from '../hooks/useFormElementDateFromTo';
|
|
|
9
9
|
import { LookupNotificationContext } from '../hooks/useLookupNotification';
|
|
10
10
|
import useElementAriaDescribedby from '../hooks/useElementAriaDescribedby';
|
|
11
11
|
import useFormDatePickerProps, { PickerInputButton, } from '../hooks/form-date-picker/useFormDatePickerProps';
|
|
12
|
-
const shortDateTimeFormat = localisationService.getDateFnsFormats().shortDateTime;
|
|
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,
|
|
@@ -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,EAAE,EAC7B,iBAAiB,GAClB,MAAM,kDAAkD,CAAA;
|
|
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"]}
|
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.14",
|
|
5
5
|
"author": "OneBlink <developers@oneblink.io> (https://oneblink.io)",
|
|
6
6
|
"bugs": {
|
|
7
7
|
"url": "https://github.com/oneblink/apps-react/issues"
|