@oneblink/apps-react 5.5.0-beta.1 → 5.5.0-beta.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/form-elements/FormElementDateTime.js +1 -0
- package/dist/form-elements/FormElementDateTime.js.map +1 -1
- package/dist/form-elements/FormElementTime.js +1 -0
- package/dist/form-elements/FormElementTime.js.map +1 -1
- package/dist/hooks/useFlatpickr.d.ts +2 -1
- package/dist/hooks/useFlatpickr.js +7 -2
- package/dist/hooks/useFlatpickr.js.map +1 -1
- package/dist/styles/list.scss +1 -1
- package/package.json +1 -1
|
@@ -41,6 +41,7 @@ function FormElementDateTime({ id, element, value, onChange, validationMessage,
|
|
|
41
41
|
id,
|
|
42
42
|
value,
|
|
43
43
|
onChange: handleChange,
|
|
44
|
+
label: element.label,
|
|
44
45
|
}, flatpickrOptions, htmlDivElementRef);
|
|
45
46
|
const text = React.useMemo(() => {
|
|
46
47
|
if (typeof value !== 'string') {
|
|
@@ -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;AACxE,OAAO,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAA;AAW1E,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,cAAc,EAAE,MAAM,EAAE,YAAY,EAAE,GACtD,wBAAwB,CAAC,OAAO,CAAC,CAAA;IAEnC,MAAM,gBAAgB,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC1C,MAAM,IAAI,GAAqB;YAC7B,QAAQ,EAAE,IAAI;YACd,UAAU,EAAE,aAAa;YACzB,SAAS,EAAE,mBAAmB,CAAC,mBAAmB,EAAE,CAAC,aAAa;YAClE,UAAU,EAAE,KAAK;YACjB,aAAa,EAAE,0CAA0C;YACzD,OAAO,EAAE,cAAc,CAAC;gBACtB,QAAQ,EAAE,KAAK;gBACf,UAAU,EAAE,cAAc;gBAC1B,KAAK,EAAE,QAAQ;aAChB,CAAC;YACF,OAAO,EAAE,cAAc,CAAC;gBACtB,QAAQ,EAAE,KAAK;gBACf,UAAU,EAAE,YAAY;gBACxB,KAAK,EAAE,MAAM;aACd,CAAC;YACF,WAAW,EAAE,SAAS;YACtB,UAAU,EAAE,IAAI;YAChB,mBAAmB,EAAE,IAAI;YACzB,OAAO,EAAE,UAAU;SACpB,CAAA;QAED,OAAO,IAAI,CAAA;IACb,CAAC,EAAE,CAAC,QAAQ,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,EAAE,YAAY,CAAC,CAAC,CAAA;IAEhE,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CACpC,CAAC,QAA4B,EAAE,EAAE,CAC/B,QAAQ,CAAC,OAAO,EAAE;QAChB,KAAK,EAAE,QAAQ;KAChB,CAAC,EACJ,CAAC,OAAO,EAAE,QAAQ,CAAC,CACpB,CAAA;IAED,YAAY,CACV;QACE,EAAE;QACF,KAAK;QACL,QAAQ,EAAE,YAAY;
|
|
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'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\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) =>\n onChange(element, {\n value: newValue,\n }),\n [element, onChange],\n )\n\n useFlatpickr(\n {\n id,\n value,\n onChange: handleChange,\n label: element.label,\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 const { isLookingUp } = React.useContext(LookupNotificationContext)\n const isDisplayingValidationMessage =\n (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp\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 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"]}
|
|
@@ -31,6 +31,7 @@ function FormElementTime({ id, element, value, onChange, validationMessage, disp
|
|
|
31
31
|
id,
|
|
32
32
|
value,
|
|
33
33
|
onChange: handleChange,
|
|
34
|
+
label: element.label,
|
|
34
35
|
}, flatpickrOptions, htmlDivElementRef);
|
|
35
36
|
const text = React.useMemo(() => {
|
|
36
37
|
if (typeof value !== 'string') {
|
|
@@ -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,qBAAqB,MAAM,8CAA8C,CAAA;AAChF,OAAO,YAAkC,MAAM,uBAAuB,CAAA;AACtE,OAAO,YAAY,MAAM,qCAAqC,CAAA;AAE9D,OAAO,yBAAyB,MAAM,kDAAkD,CAAA;AAExF,OAAO,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAA;AAW1E,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,gBAAgB,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC1C,MAAM,IAAI,GAAqB;YAC7B,QAAQ,EAAE,IAAI;YACd,UAAU,EAAE,KAAK;YACjB,SAAS,EAAE,mBAAmB,CAAC,mBAAmB,EAAE,CAAC,IAAI;YACzD,UAAU,EAAE,KAAK;YACjB,aAAa,EAAE,qCAAqC;YACpD,OAAO,EAAE,SAAS;YAClB,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,SAAS;YACtB,UAAU,EAAE,IAAI;YAChB,UAAU,EAAE,IAAI;YAChB,SAAS,EAAE,KAAK;YAChB,OAAO,EAAE,UAAU;SACpB,CAAA;QAED,OAAO,IAAI,CAAA;IACb,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAA;IAEhB,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CACpC,CAAC,QAA4B,EAAE,EAAE,CAC/B,QAAQ,CAAC,OAAO,EAAE;QAChB,KAAK,EAAE,QAAQ;KAChB,CAAC,EACJ,CAAC,OAAO,EAAE,QAAQ,CAAC,CACpB,CAAA;IAED,YAAY,CACV;QACE,EAAE;QACF,KAAK;QACL,QAAQ,EAAE,YAAY;
|
|
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'\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 { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\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\nfunction FormElementTime({\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 flatpickrOptions = React.useMemo(() => {\n const opts: FlatpickrOptions = {\n altInput: true,\n dateFormat: 'H:i',\n altFormat: localisationService.getFlatpickrFormats().time,\n allowInput: false,\n altInputClass: 'input ob-input cypress-time-control',\n minDate: undefined,\n maxDate: undefined,\n defaultDate: undefined,\n enableTime: true,\n noCalendar: true,\n time_24hr: false,\n onClose: setIsDirty,\n }\n\n return opts\n }, [setIsDirty])\n\n const handleChange = React.useCallback(\n (newValue: string | undefined) =>\n onChange(element, {\n value: newValue,\n }),\n [element, onChange],\n )\n\n useFlatpickr(\n {\n id,\n value,\n onChange: handleChange,\n label: element.label,\n },\n flatpickrOptions,\n htmlDivElementRef,\n )\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 return (\n <div className=\"cypress-time-element\" ref={htmlDivElementRef}>\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 <input\n type=\"time\"\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\">schedule</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 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,11 +1,12 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { Options as FlatpickrOptions } from 'flatpickr/dist/types/options';
|
|
3
3
|
export { FlatpickrOptions };
|
|
4
|
-
export default function useFlatpickr({ id, value, onChange, dateOnly, }: {
|
|
4
|
+
export default function useFlatpickr({ id, value, onChange, dateOnly, label, }: {
|
|
5
5
|
id: string;
|
|
6
6
|
value: unknown | undefined;
|
|
7
7
|
onChange: (value: string | undefined) => void;
|
|
8
8
|
dateOnly?: boolean;
|
|
9
|
+
label?: string;
|
|
9
10
|
}, fpOpts: FlatpickrOptions, htmlElement: {
|
|
10
11
|
current: HTMLElement | null;
|
|
11
12
|
}): {
|
|
@@ -10,7 +10,7 @@ const getDateValue = (date, dateOnly) => {
|
|
|
10
10
|
}
|
|
11
11
|
return date.toISOString();
|
|
12
12
|
};
|
|
13
|
-
export default function useFlatpickr({ id, value, onChange, dateOnly, }, fpOpts, htmlElement) {
|
|
13
|
+
export default function useFlatpickr({ id, value, onChange, dateOnly, label, }, fpOpts, htmlElement) {
|
|
14
14
|
const flatpickrGuid = useFlatpickrGuid();
|
|
15
15
|
const vpRef = React.useRef(null);
|
|
16
16
|
React.useEffect(() => {
|
|
@@ -18,6 +18,11 @@ export default function useFlatpickr({ id, value, onChange, dateOnly, }, fpOpts,
|
|
|
18
18
|
...fpOpts,
|
|
19
19
|
static: true,
|
|
20
20
|
appendTo: htmlElement.current || undefined,
|
|
21
|
+
onReady: (a, b, fp) => {
|
|
22
|
+
if (label) {
|
|
23
|
+
fp.altInput.setAttribute('aria-label', label);
|
|
24
|
+
}
|
|
25
|
+
},
|
|
21
26
|
formatDate: (date, format) => {
|
|
22
27
|
if (date) {
|
|
23
28
|
return Flatpickr.formatDate(date, format);
|
|
@@ -47,7 +52,7 @@ export default function useFlatpickr({ id, value, onChange, dateOnly, }, fpOpts,
|
|
|
47
52
|
newVp.destroy();
|
|
48
53
|
}
|
|
49
54
|
};
|
|
50
|
-
}, [dateOnly, flatpickrGuid, fpOpts, htmlElement, id, onChange]);
|
|
55
|
+
}, [dateOnly, flatpickrGuid, fpOpts, htmlElement, id, label, onChange]);
|
|
51
56
|
// Sync value with flatpickr when value is changed outside of component
|
|
52
57
|
React.useEffect(() => {
|
|
53
58
|
const vp = vpRef.current;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFlatpickr.js","sourceRoot":"","sources":["../../src/hooks/useFlatpickr.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,SAAS,MAAM,WAAW,CAAA;AAGjC,OAAO,EAAE,MAAM,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAA;AAC5D,OAAO,gBAAgB,MAAM,2BAA2B,CAAA;AAIxD,MAAM,YAAY,GAAG,CACnB,IAAsB,EACtB,QAA6B,EAC7B,EAAE;IACF,IAAI,CAAC,IAAI;QAAE,OAAM;IACjB,IAAI,QAAQ,EAAE;QACZ,OAAO,SAAS,CAAC,UAAU,CAAC,IAAI,EAAE,OAAO,CAAC,CAAA;KAC3C;IACD,OAAO,IAAI,CAAC,WAAW,EAAE,CAAA;AAC3B,CAAC,CAAA;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAClC,EACE,EAAE,EACF,KAAK,EACL,QAAQ,EACR,QAAQ,
|
|
1
|
+
{"version":3,"file":"useFlatpickr.js","sourceRoot":"","sources":["../../src/hooks/useFlatpickr.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport Flatpickr from 'flatpickr'\nimport { Options as FlatpickrOptions } from 'flatpickr/dist/types/options'\nimport { Instance as FlatpickrInstance } from 'flatpickr/dist/types/instance'\nimport { Sentry, localisationService } from '@oneblink/apps'\nimport useFlatpickrGuid from '../hooks/useFlatpickrGuid'\n\nexport { FlatpickrOptions }\n\nconst getDateValue = (\n date: Date | undefined,\n dateOnly: boolean | undefined,\n) => {\n if (!date) return\n if (dateOnly) {\n return Flatpickr.formatDate(date, 'Y-m-d')\n }\n return date.toISOString()\n}\n\nexport default function useFlatpickr(\n {\n id,\n value,\n onChange,\n dateOnly,\n label,\n }: {\n id: string\n value: unknown | undefined\n onChange: (value: string | undefined) => void\n dateOnly?: boolean\n label?: string\n },\n fpOpts: FlatpickrOptions,\n htmlElement: { current: HTMLElement | null },\n) {\n const flatpickrGuid = useFlatpickrGuid()\n const vpRef = React.useRef<FlatpickrInstance | null>(null)\n\n React.useEffect(() => {\n const options: FlatpickrOptions = {\n ...fpOpts,\n static: true,\n appendTo: htmlElement.current || undefined,\n onReady: (a, b, fp) => {\n if (label) {\n fp.altInput!.setAttribute('aria-label', label)\n }\n },\n formatDate: (date: Date | undefined, format: string) => {\n if (date) {\n return Flatpickr.formatDate(date, format)\n }\n return ''\n },\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const newVp: FlatpickrInstance = new (Flatpickr as any)(\n `[id=\"${flatpickrGuid}\"] [id=\"${id}\"]`,\n options,\n )\n newVp.set('onChange', (selectedDates: Date[]) => {\n onChange(getDateValue(selectedDates?.[0], dateOnly))\n })\n // Have to update the value in an onClose event if time is\n // enabled as changing the AM/PM via keyboard does not\n // trigger the onChange event:\n // https://github.com/flatpickr/flatpickr/issues/1957\n if (fpOpts.enableTime) {\n newVp.set('onClose', (selectedDates: Date[]) => {\n onChange(getDateValue(selectedDates?.[0], dateOnly))\n })\n }\n vpRef.current = newVp\n return () => {\n // destroy the flatpickr instance when the dom element is removed\n vpRef.current = null\n if (newVp.destroy) {\n newVp.destroy()\n }\n }\n }, [dateOnly, flatpickrGuid, fpOpts, htmlElement, id, label, onChange])\n\n // Sync value with flatpickr when value is changed outside of component\n React.useEffect(() => {\n const vp = vpRef.current\n\n if (vp && vp.selectedDates) {\n const selectedDate = vp.selectedDates[0]\n if (!value && selectedDate) {\n try {\n vp.clear(false)\n } catch (error) {\n Sentry.captureException(new Error('Error clearing value'))\n }\n } else if (\n value &&\n typeof value === 'string' &&\n (!selectedDate || getDateValue(selectedDate, dateOnly) !== value)\n ) {\n try {\n const date = localisationService.generateDate({\n daysOffset: undefined,\n value,\n dateOnly: !!dateOnly,\n })\n if (date) {\n vp.setDate(date, false)\n }\n } catch (error) {\n Sentry.captureException(new Error(`Error setting date: ${value}`))\n }\n }\n }\n }, [dateOnly, value])\n\n const onBlur = React.useCallback(\n (e: React.FocusEvent<HTMLInputElement, Element>) => {\n if (e.target.value) {\n try {\n const date = Flatpickr.parseDate(e.target.value, fpOpts.dateFormat)\n if (date) {\n const newValue = getDateValue(date, dateOnly)\n onChange(newValue)\n return\n }\n } catch (e) {\n console.warn('Could not parse date on blur event', id, e)\n }\n }\n onChange(undefined)\n },\n [dateOnly, fpOpts.dateFormat, id, onChange],\n )\n\n return {\n onBlur,\n }\n}\n"]}
|
package/dist/styles/list.scss
CHANGED
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": "5.5.0-beta.
|
|
4
|
+
"version": "5.5.0-beta.3",
|
|
5
5
|
"author": "OneBlink <developers@oneblink.io> (https://oneblink.io)",
|
|
6
6
|
"bugs": {
|
|
7
7
|
"url": "https://github.com/oneblink/apps-react/issues"
|