@oneblink/apps-react 2.11.0-beta.4 → 2.11.0-beta.5
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 +4 -10
- package/dist/form-elements/FormElementDate.js.map +1 -1
- package/dist/form-elements/FormElementDateTime.js +4 -10
- package/dist/form-elements/FormElementDateTime.js.map +1 -1
- package/dist/hooks/useFormElementDateFromTo.d.ts +4 -2
- package/dist/hooks/useFormElementDateFromTo.js +25 -13
- package/dist/hooks/useFormElementDateFromTo.js.map +1 -1
- package/package.json +1 -1
|
@@ -8,7 +8,7 @@ import { generateDate, parseDateValue } from '../services/generate-default-data'
|
|
|
8
8
|
import useFormElementDateFromTo from '../hooks/useFormElementDateFromTo';
|
|
9
9
|
function FormElementDate({ id, element, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, }) {
|
|
10
10
|
const htmlDivElementRef = React.useRef(null);
|
|
11
|
-
const { fromDate, toDate } = useFormElementDateFromTo(element);
|
|
11
|
+
const { fromDate, fromDaysOffset, toDate, toDaysOffset } = useFormElementDateFromTo(element);
|
|
12
12
|
const flatpickrOptions = React.useMemo(() => {
|
|
13
13
|
const opts = {
|
|
14
14
|
altInput: true,
|
|
@@ -18,12 +18,12 @@ function FormElementDate({ id, element, value, onChange, validationMessage, disp
|
|
|
18
18
|
altInputClass: 'input ob-input cypress-date-control',
|
|
19
19
|
minDate: parseDateValue({
|
|
20
20
|
dateOnly: false,
|
|
21
|
-
daysOffset:
|
|
21
|
+
daysOffset: fromDaysOffset,
|
|
22
22
|
value: fromDate,
|
|
23
23
|
}),
|
|
24
24
|
maxDate: parseDateValue({
|
|
25
25
|
dateOnly: false,
|
|
26
|
-
daysOffset:
|
|
26
|
+
daysOffset: toDaysOffset,
|
|
27
27
|
value: toDate,
|
|
28
28
|
}),
|
|
29
29
|
defaultDate: undefined,
|
|
@@ -31,13 +31,7 @@ function FormElementDate({ id, element, value, onChange, validationMessage, disp
|
|
|
31
31
|
onClose: setIsDirty,
|
|
32
32
|
};
|
|
33
33
|
return opts;
|
|
34
|
-
}, [
|
|
35
|
-
element.fromDateDaysOffset,
|
|
36
|
-
element.toDateDaysOffset,
|
|
37
|
-
fromDate,
|
|
38
|
-
setIsDirty,
|
|
39
|
-
toDate,
|
|
40
|
-
]);
|
|
34
|
+
}, [fromDate, fromDaysOffset, setIsDirty, toDate, toDaysOffset]);
|
|
41
35
|
const handleChange = React.useCallback((newValue) => onChange(element, newValue), [element, onChange]);
|
|
42
36
|
useFlatpickr({
|
|
43
37
|
id,
|
|
@@ -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,qBAAqB,MAAM,8CAA8C,CAAA;AAChF,OAAO,YAAkC,MAAM,uBAAuB,CAAA;AACtE,OAAO,YAAY,MAAM,qCAAqC,CAAA;AAE9D,OAAO,yBAAyB,MAAM,kDAAkD,CAAA;AACxF,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAA;AAEhF,OAAO,wBAAwB,MAAM,mCAAmC,CAAA;AAWxE,SAAS,eAAe,CAAC,EACvB,EAAE,EACF,OAAO,EACP,KAAK,EACL,QAAQ,EACR,iBAAiB,EACjB,wBAAwB,EACxB,OAAO,EACP,UAAU,GACJ;IACN,MAAM,iBAAiB,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAA;IAE5D,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,
|
|
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'\n\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport useFlatpickr, { FlatpickrOptions } from '../hooks/useFlatpickr'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { generateDate, parseDateValue } from '../services/generate-default-data'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport useFormElementDateFromTo from '../hooks/useFormElementDateFromTo'\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 htmlDivElementRef = React.useRef<HTMLDivElement>(null)\n\n const { fromDate, fromDaysOffset, toDate, toDaysOffset } =\n useFormElementDateFromTo(element)\n\n const flatpickrOptions = React.useMemo(() => {\n const opts: FlatpickrOptions = {\n altInput: true,\n dateFormat: 'Y-m-d',\n altFormat: localisationService.getFlatpickrFormats().shortDate,\n allowInput: true,\n altInputClass: 'input ob-input cypress-date-control',\n minDate: parseDateValue({\n dateOnly: false,\n daysOffset: fromDaysOffset,\n value: fromDate,\n }),\n maxDate: parseDateValue({\n dateOnly: false,\n daysOffset: toDaysOffset,\n value: toDate,\n }),\n defaultDate: undefined,\n allowInvalidPreload: true,\n onClose: setIsDirty,\n }\n\n return opts\n }, [fromDate, fromDaysOffset, setIsDirty, toDate, toDaysOffset])\n\n const handleChange = React.useCallback(\n (newValue: string | undefined) => onChange(element, newValue),\n [element, onChange],\n )\n\n useFlatpickr(\n {\n id,\n value,\n onChange: handleChange,\n dateOnly: true,\n },\n flatpickrOptions,\n htmlDivElementRef,\n )\n\n const text = React.useMemo(() => {\n if (typeof value === 'string') {\n const date = generateDate({\n daysOffset: undefined,\n value,\n dateOnly: true,\n })\n if (date) {\n return localisationService.formatDate(date)\n }\n }\n return null\n }, [value])\n\n return (\n <div className=\"cypress-date-element\" ref={htmlDivElementRef}>\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 <input\n type=\"date\"\n id={id}\n name={element.name}\n placeholder={element.placeholderValue}\n disabled={element.readOnly}\n className=\"input ob-input\"\n />\n <span className=\"ob-input-icon icon is-small is-right\">\n <i className=\"material-icons is-size-5\">event</i>\n </span>\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 />\n </div>\n\n {(isDirty || displayValidationMessage) && !!validationMessage && (\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,7 +8,7 @@ import { parseDateValue } from '../services/generate-default-data';
|
|
|
8
8
|
import useFormElementDateFromTo from '../hooks/useFormElementDateFromTo';
|
|
9
9
|
function FormElementDateTime({ id, element, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, }) {
|
|
10
10
|
const htmlDivElementRef = React.useRef(null);
|
|
11
|
-
const { fromDate, toDate } = useFormElementDateFromTo(element);
|
|
11
|
+
const { fromDate, fromDaysOffset, toDate, toDaysOffset } = useFormElementDateFromTo(element);
|
|
12
12
|
const flatpickrOptions = React.useMemo(() => {
|
|
13
13
|
const opts = {
|
|
14
14
|
altInput: true,
|
|
@@ -18,12 +18,12 @@ function FormElementDateTime({ id, element, value, onChange, validationMessage,
|
|
|
18
18
|
altInputClass: 'input ob-input cypress-date-time-control',
|
|
19
19
|
minDate: parseDateValue({
|
|
20
20
|
dateOnly: false,
|
|
21
|
-
daysOffset:
|
|
21
|
+
daysOffset: fromDaysOffset,
|
|
22
22
|
value: fromDate,
|
|
23
23
|
}),
|
|
24
24
|
maxDate: parseDateValue({
|
|
25
25
|
dateOnly: false,
|
|
26
|
-
daysOffset:
|
|
26
|
+
daysOffset: toDaysOffset,
|
|
27
27
|
value: toDate,
|
|
28
28
|
}),
|
|
29
29
|
defaultDate: undefined,
|
|
@@ -32,13 +32,7 @@ function FormElementDateTime({ id, element, value, onChange, validationMessage,
|
|
|
32
32
|
onClose: setIsDirty,
|
|
33
33
|
};
|
|
34
34
|
return opts;
|
|
35
|
-
}, [
|
|
36
|
-
element.fromDateDaysOffset,
|
|
37
|
-
element.toDateDaysOffset,
|
|
38
|
-
fromDate,
|
|
39
|
-
setIsDirty,
|
|
40
|
-
toDate,
|
|
41
|
-
]);
|
|
35
|
+
}, [fromDate, fromDaysOffset, setIsDirty, toDate, toDaysOffset]);
|
|
42
36
|
const handleChange = React.useCallback((newValue) => onChange(element, newValue), [element, onChange]);
|
|
43
37
|
useFlatpickr({
|
|
44
38
|
id,
|
|
@@ -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,qBAAqB,MAAM,8CAA8C,CAAA;AAChF,OAAO,YAAkC,MAAM,uBAAuB,CAAA;AACtE,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;AAWxE,SAAS,mBAAmB,CAAC,EAC3B,EAAE,EACF,OAAO,EACP,KAAK,EACL,QAAQ,EACR,iBAAiB,EACjB,wBAAwB,EACxB,OAAO,EACP,UAAU,GACJ;IACN,MAAM,iBAAiB,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAA;IAE5D,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,
|
|
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'\n\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport useFlatpickr, { FlatpickrOptions } from '../hooks/useFlatpickr'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { parseDateValue } from '../services/generate-default-data'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport useFormElementDateFromTo from '../hooks/useFormElementDateFromTo'\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 htmlDivElementRef = React.useRef<HTMLDivElement>(null)\n\n const { fromDate, fromDaysOffset, toDate, toDaysOffset } =\n useFormElementDateFromTo(element)\n\n const flatpickrOptions = React.useMemo(() => {\n const opts: FlatpickrOptions = {\n altInput: true,\n dateFormat: 'Y-m-dTH:i:S',\n altFormat: localisationService.getFlatpickrFormats().shortDateTime,\n allowInput: false,\n altInputClass: 'input ob-input cypress-date-time-control',\n minDate: parseDateValue({\n dateOnly: false,\n daysOffset: fromDaysOffset,\n value: fromDate,\n }),\n maxDate: parseDateValue({\n dateOnly: false,\n daysOffset: toDaysOffset,\n value: toDate,\n }),\n defaultDate: undefined,\n enableTime: true,\n allowInvalidPreload: true,\n onClose: setIsDirty,\n }\n\n return opts\n }, [fromDate, fromDaysOffset, setIsDirty, toDate, toDaysOffset])\n\n const handleChange = React.useCallback(\n (newValue: string | undefined) => onChange(element, newValue),\n [element, onChange],\n )\n\n useFlatpickr(\n {\n id,\n value,\n onChange: handleChange,\n },\n flatpickrOptions,\n htmlDivElementRef,\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 return (\n <div className=\"cypress-datetime-element\" ref={htmlDivElementRef}>\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 <input\n type=\"datetime-local\"\n id={id}\n name={element.name}\n placeholder={element.placeholderValue}\n disabled={element.readOnly}\n className=\"input ob-input\"\n />\n <span className=\"ob-input-icon icon is-small is-right\">\n <i className=\"material-icons is-size-5\">date_range</i>\n </span>\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 />\n </div>\n\n {(isDirty || displayValidationMessage) && !!validationMessage && (\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"]}
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import { FormTypes } from '@oneblink/types';
|
|
2
2
|
export default function useFormElementDateFromTo(element: FormTypes.FormElementWithDate): {
|
|
3
|
-
fromDate: {} | undefined;
|
|
4
|
-
|
|
3
|
+
fromDate: string | {} | undefined;
|
|
4
|
+
fromDaysOffset: number | undefined;
|
|
5
|
+
toDate: string | {} | undefined;
|
|
6
|
+
toDaysOffset: number | undefined;
|
|
5
7
|
};
|
|
@@ -3,32 +3,44 @@ import { submissionService } from '@oneblink/sdk-core';
|
|
|
3
3
|
import useFormSubmissionModel from './useFormSubmissionModelContext';
|
|
4
4
|
export default function useFormElementDateFromTo(element) {
|
|
5
5
|
const { formSubmissionModel, elements } = useFormSubmissionModel();
|
|
6
|
-
const fromDate = React.useMemo(() => {
|
|
6
|
+
const { fromDate, fromDaysOffset } = React.useMemo(() => {
|
|
7
7
|
if (element.fromDateElementId) {
|
|
8
8
|
const fromDateValue = submissionService.getRootElementValueById(element.fromDateElementId, elements, formSubmissionModel);
|
|
9
9
|
if (fromDateValue) {
|
|
10
|
-
return
|
|
10
|
+
return {
|
|
11
|
+
fromDate: fromDateValue,
|
|
12
|
+
fromDaysOffset: element.fromDateDaysOffset,
|
|
13
|
+
};
|
|
11
14
|
}
|
|
12
15
|
}
|
|
13
|
-
return
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
]);
|
|
20
|
-
const toDate = React.useMemo(() => {
|
|
16
|
+
return {
|
|
17
|
+
fromDate: element.fromDate,
|
|
18
|
+
fromDaysOffset: element.fromDate === 'NOW' ? element.fromDateDaysOffset : undefined,
|
|
19
|
+
};
|
|
20
|
+
}, [element, elements, formSubmissionModel]);
|
|
21
|
+
const { toDate, toDaysOffset } = React.useMemo(() => {
|
|
21
22
|
if (element.toDateElementId) {
|
|
22
23
|
const toDateValue = submissionService.getRootElementValueById(element.toDateElementId, elements, formSubmissionModel);
|
|
23
24
|
if (toDateValue) {
|
|
24
|
-
return toDateValue;
|
|
25
|
+
return { toDate: toDateValue, toDaysOffset: element.toDateDaysOffset };
|
|
25
26
|
}
|
|
26
27
|
}
|
|
27
|
-
return
|
|
28
|
-
|
|
28
|
+
return {
|
|
29
|
+
toDate: element.toDate,
|
|
30
|
+
toDaysOffset: element.toDate === 'NOW' ? element.toDateDaysOffset : undefined,
|
|
31
|
+
};
|
|
32
|
+
}, [
|
|
33
|
+
element.toDate,
|
|
34
|
+
element.toDateDaysOffset,
|
|
35
|
+
element.toDateElementId,
|
|
36
|
+
elements,
|
|
37
|
+
formSubmissionModel,
|
|
38
|
+
]);
|
|
29
39
|
return {
|
|
30
40
|
fromDate,
|
|
41
|
+
fromDaysOffset,
|
|
31
42
|
toDate,
|
|
43
|
+
toDaysOffset,
|
|
32
44
|
};
|
|
33
45
|
}
|
|
34
46
|
//# sourceMappingURL=useFormElementDateFromTo.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFormElementDateFromTo.js","sourceRoot":"","sources":["../../src/hooks/useFormElementDateFromTo.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAA;AACtD,OAAO,sBAAsB,MAAM,iCAAiC,CAAA;AAGpE,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAC9C,OAAsC;IAEtC,MAAM,EAAE,mBAAmB,EAAE,QAAQ,EAAE,GAAG,sBAAsB,EAAE,CAAA;IAElE,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;
|
|
1
|
+
{"version":3,"file":"useFormElementDateFromTo.js","sourceRoot":"","sources":["../../src/hooks/useFormElementDateFromTo.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAA;AACtD,OAAO,sBAAsB,MAAM,iCAAiC,CAAA;AAGpE,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAC9C,OAAsC;IAEtC,MAAM,EAAE,mBAAmB,EAAE,QAAQ,EAAE,GAAG,sBAAsB,EAAE,CAAA;IAElE,MAAM,EAAE,QAAQ,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACtD,IAAI,OAAO,CAAC,iBAAiB,EAAE;YAC7B,MAAM,aAAa,GAAG,iBAAiB,CAAC,uBAAuB,CAC7D,OAAO,CAAC,iBAAiB,EACzB,QAAQ,EACR,mBAAmB,CACpB,CAAA;YACD,IAAI,aAAa,EAAE;gBACjB,OAAO;oBACL,QAAQ,EAAE,aAAa;oBACvB,cAAc,EAAE,OAAO,CAAC,kBAAkB;iBAC3C,CAAA;aACF;SACF;QACD,OAAO;YACL,QAAQ,EAAE,OAAO,CAAC,QAAQ;YAC1B,cAAc,EACZ,OAAO,CAAC,QAAQ,KAAK,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC,CAAC,SAAS;SACtE,CAAA;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,mBAAmB,CAAC,CAAC,CAAA;IAE5C,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAClD,IAAI,OAAO,CAAC,eAAe,EAAE;YAC3B,MAAM,WAAW,GAAG,iBAAiB,CAAC,uBAAuB,CAC3D,OAAO,CAAC,eAAe,EACvB,QAAQ,EACR,mBAAmB,CACpB,CAAA;YACD,IAAI,WAAW,EAAE;gBACf,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,YAAY,EAAE,OAAO,CAAC,gBAAgB,EAAE,CAAA;aACvE;SACF;QACD,OAAO;YACL,MAAM,EAAE,OAAO,CAAC,MAAM;YACtB,YAAY,EACV,OAAO,CAAC,MAAM,KAAK,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS;SAClE,CAAA;IACH,CAAC,EAAE;QACD,OAAO,CAAC,MAAM;QACd,OAAO,CAAC,gBAAgB;QACxB,OAAO,CAAC,eAAe;QACvB,QAAQ;QACR,mBAAmB;KACpB,CAAC,CAAA;IAEF,OAAO;QACL,QAAQ;QACR,cAAc;QACd,MAAM;QACN,YAAY;KACb,CAAA;AACH,CAAC","sourcesContent":["import * as React from 'react'\nimport { submissionService } from '@oneblink/sdk-core'\nimport useFormSubmissionModel from './useFormSubmissionModelContext'\nimport { FormTypes } from '@oneblink/types'\n\nexport default function useFormElementDateFromTo(\n element: FormTypes.FormElementWithDate,\n) {\n const { formSubmissionModel, elements } = useFormSubmissionModel()\n\n const { fromDate, fromDaysOffset } = React.useMemo(() => {\n if (element.fromDateElementId) {\n const fromDateValue = submissionService.getRootElementValueById(\n element.fromDateElementId,\n elements,\n formSubmissionModel,\n )\n if (fromDateValue) {\n return {\n fromDate: fromDateValue,\n fromDaysOffset: element.fromDateDaysOffset,\n }\n }\n }\n return {\n fromDate: element.fromDate,\n fromDaysOffset:\n element.fromDate === 'NOW' ? element.fromDateDaysOffset : undefined,\n }\n }, [element, elements, formSubmissionModel])\n\n const { toDate, toDaysOffset } = React.useMemo(() => {\n if (element.toDateElementId) {\n const toDateValue = submissionService.getRootElementValueById(\n element.toDateElementId,\n elements,\n formSubmissionModel,\n )\n if (toDateValue) {\n return { toDate: toDateValue, toDaysOffset: element.toDateDaysOffset }\n }\n }\n return {\n toDate: element.toDate,\n toDaysOffset:\n element.toDate === 'NOW' ? element.toDateDaysOffset : undefined,\n }\n }, [\n element.toDate,\n element.toDateDaysOffset,\n element.toDateElementId,\n elements,\n formSubmissionModel,\n ])\n\n return {\n fromDate,\n fromDaysOffset,\n toDate,\n toDaysOffset,\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": "2.11.0-beta.
|
|
4
|
+
"version": "2.11.0-beta.5",
|
|
5
5
|
"author": "OneBlink <developers@oneblink.io> (https://oneblink.io)",
|
|
6
6
|
"bugs": {
|
|
7
7
|
"url": "https://github.com/oneblink/apps-react/issues"
|