@oneblink/apps-react 0.5.6-beta.1 → 0.5.6-beta.2

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.
@@ -3,6 +3,7 @@ import clsx from 'clsx';
3
3
  import OneBlinkFormElements from './OneBlinkFormElements';
4
4
  import useFormDefinition from '../hooks/useFormDefinition';
5
5
  import { IsPageVisibleProvider } from '../hooks/useIsPageVisible';
6
+ import { FlatpickrGuidProvider } from '../hooks/useFlatpickrGuid';
6
7
  function PageFormElements({ formId, isActive, pageElement, model, displayValidationMessages, formElementsConditionallyShown, formElementsValidation, onChange, setFormSubmission, }) {
7
8
  const handleLookup = React.useCallback((mergeLookupResults) => {
8
9
  setFormSubmission((currentFormSubmission) => {
@@ -38,10 +39,11 @@ function PageFormElements({ formId, isActive, pageElement, model, displayValidat
38
39
  }, [formId, pageElement.elements, pageElement.id, setFormSubmission]);
39
40
  const form = useFormDefinition();
40
41
  return (React.createElement(IsPageVisibleProvider, { isPageVisible: isActive },
41
- React.createElement("div", { key: pageElement.id, className: clsx('ob-page step-content is-active cypress-page', {
42
- 'is-invisible': !isActive,
43
- }) },
44
- React.createElement(OneBlinkFormElements, { formId: formId, model: model, parentElement: form, formElementsConditionallyShown: formElementsConditionallyShown, formElementsValidation: formElementsValidation, displayValidationMessages: displayValidationMessages, elements: pageElement.elements, onChange: onChange, onLookup: handleLookup, idPrefix: "" }))));
42
+ React.createElement(FlatpickrGuidProvider, null,
43
+ React.createElement("div", { key: pageElement.id, className: clsx('ob-page step-content is-active cypress-page', {
44
+ 'is-invisible': !isActive,
45
+ }) },
46
+ React.createElement(OneBlinkFormElements, { formId: formId, model: model, parentElement: form, formElementsConditionallyShown: formElementsConditionallyShown, formElementsValidation: formElementsValidation, displayValidationMessages: displayValidationMessages, elements: pageElement.elements, onChange: onChange, onLookup: handleLookup, idPrefix: "" })))));
45
47
  }
46
48
  export default React.memo(PageFormElements);
47
49
  //# sourceMappingURL=PageFormElements.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"PageFormElements.js","sourceRoot":"","sources":["../../src/components/PageFormElements.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,IAAI,MAAM,MAAM,CAAA;AAEvB,OAAO,oBAAoB,MAAM,wBAAwB,CAAA;AACzD,OAAO,iBAAiB,MAAM,4BAA4B,CAAA;AAS1D,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAA;AAcjE,SAAS,gBAAgB,CAAC,EACxB,MAAM,EACN,QAAQ,EACR,WAAW,EACX,KAAK,EACL,yBAAyB,EACzB,8BAA8B,EAC9B,sBAAsB,EACtB,QAAQ,EACR,iBAAiB,GACX;IACN,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CACpC,CAAC,kBAAkB,EAAE,EAAE;QACrB,iBAAiB,CAAC,CAAC,qBAAqB,EAAE,EAAE;YAC1C,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,kBAAkB,CAAC;gBAClD,QAAQ,EAAE,WAAW,CAAC,QAAQ;gBAC9B,UAAU,EAAE,qBAAqB,CAAC,UAAU;aAC7C,CAAC,CAAA;YAEF,MAAM,UAAU,GAAG;gBACjB,GAAG,qBAAqB,CAAC,UAAU;aACpC,CAAA;YACD,IAAI,WAAW,CAAC,EAAE,KAAK,MAAM,CAAC,QAAQ,EAAE,EAAE;gBACxC,UAAU,CAAC,QAAQ,GAAG,QAAQ,CAAA;aAC/B;iBAAM;gBACL,UAAU,CAAC,QAAQ,GAAG,qBAAqB,CAAC,UAAU,CAAC,QAAQ,CAAC,GAAG,CACjE,CAAC,WAAW,EAAE,EAAE;oBACd,IACE,WAAW,CAAC,EAAE,KAAK,WAAW,CAAC,EAAE;wBACjC,WAAW,CAAC,IAAI,KAAK,MAAM,EAC3B;wBACA,OAAO;4BACL,GAAG,WAAW;4BACd,QAAQ;yBACT,CAAA;qBACF;yBAAM;wBACL,OAAO,WAAW,CAAA;qBACnB;gBACH,CAAC,CACF,CAAA;aACF;YAED,OAAO;gBACL,UAAU;gBACV,UAAU;aACX,CAAA;QACH,CAAC,CAAC,CAAA;IACJ,CAAC,EACD,CAAC,MAAM,EAAE,WAAW,CAAC,QAAQ,EAAE,WAAW,CAAC,EAAE,EAAE,iBAAiB,CAAC,CAClE,CAAA;IAED,MAAM,IAAI,GAAG,iBAAiB,EAAE,CAAA;IAEhC,OAAO,CACL,oBAAC,qBAAqB,IAAC,aAAa,EAAE,QAAQ;QAC5C,6BACE,GAAG,EAAE,WAAW,CAAC,EAAE,EACnB,SAAS,EAAE,IAAI,CAAC,6CAA6C,EAAE;gBAC7D,cAAc,EAAE,CAAC,QAAQ;aAC1B,CAAC;YAEF,oBAAC,oBAAoB,IACnB,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,IAAI,EACnB,8BAA8B,EAAE,8BAA8B,EAC9D,sBAAsB,EAAE,sBAAsB,EAC9C,yBAAyB,EAAE,yBAAyB,EACpD,QAAQ,EAAE,WAAW,CAAC,QAAQ,EAC9B,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAC,EAAE,GACX,CACE,CACgB,CACzB,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport { FormTypes } from '@oneblink/types'\nimport OneBlinkFormElements from './OneBlinkFormElements'\nimport useFormDefinition from '../hooks/useFormDefinition'\nimport {\n FormElementLookupHandler,\n FormElementsConditionallyShown,\n FormElementsValidation,\n FormElementValueChangeHandler,\n FormSubmissionModel,\n SetFormSubmission,\n} from '../types/form'\nimport { IsPageVisibleProvider } from '../hooks/useIsPageVisible'\n\nexport type Props = {\n formId: number\n isActive: boolean\n pageElement: FormTypes.PageElement\n displayValidationMessages: boolean\n model: FormSubmissionModel\n formElementsConditionallyShown: FormElementsConditionallyShown | undefined\n formElementsValidation: FormElementsValidation | undefined\n onChange: FormElementValueChangeHandler\n setFormSubmission: SetFormSubmission\n}\n\nfunction PageFormElements({\n formId,\n isActive,\n pageElement,\n model,\n displayValidationMessages,\n formElementsConditionallyShown,\n formElementsValidation,\n onChange,\n setFormSubmission,\n}: Props) {\n const handleLookup = React.useCallback<FormElementLookupHandler>(\n (mergeLookupResults) => {\n setFormSubmission((currentFormSubmission) => {\n const { submission, elements } = mergeLookupResults({\n elements: pageElement.elements,\n submission: currentFormSubmission.submission,\n })\n\n const definition = {\n ...currentFormSubmission.definition,\n }\n if (pageElement.id === formId.toString()) {\n definition.elements = elements\n } else {\n definition.elements = currentFormSubmission.definition.elements.map(\n (formElement) => {\n if (\n formElement.id === pageElement.id &&\n formElement.type === 'page'\n ) {\n return {\n ...formElement,\n elements,\n }\n } else {\n return formElement\n }\n },\n )\n }\n\n return {\n submission,\n definition,\n }\n })\n },\n [formId, pageElement.elements, pageElement.id, setFormSubmission],\n )\n\n const form = useFormDefinition()\n\n return (\n <IsPageVisibleProvider isPageVisible={isActive}>\n <div\n key={pageElement.id}\n className={clsx('ob-page step-content is-active cypress-page', {\n 'is-invisible': !isActive,\n })}\n >\n <OneBlinkFormElements\n formId={formId}\n model={model}\n parentElement={form}\n formElementsConditionallyShown={formElementsConditionallyShown}\n formElementsValidation={formElementsValidation}\n displayValidationMessages={displayValidationMessages}\n elements={pageElement.elements}\n onChange={onChange}\n onLookup={handleLookup}\n idPrefix=\"\"\n />\n </div>\n </IsPageVisibleProvider>\n )\n}\n\nexport default React.memo(PageFormElements)\n"]}
1
+ {"version":3,"file":"PageFormElements.js","sourceRoot":"","sources":["../../src/components/PageFormElements.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,IAAI,MAAM,MAAM,CAAA;AAEvB,OAAO,oBAAoB,MAAM,wBAAwB,CAAA;AACzD,OAAO,iBAAiB,MAAM,4BAA4B,CAAA;AAS1D,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAA;AACjE,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAA;AAcjE,SAAS,gBAAgB,CAAC,EACxB,MAAM,EACN,QAAQ,EACR,WAAW,EACX,KAAK,EACL,yBAAyB,EACzB,8BAA8B,EAC9B,sBAAsB,EACtB,QAAQ,EACR,iBAAiB,GACX;IACN,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CACpC,CAAC,kBAAkB,EAAE,EAAE;QACrB,iBAAiB,CAAC,CAAC,qBAAqB,EAAE,EAAE;YAC1C,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,kBAAkB,CAAC;gBAClD,QAAQ,EAAE,WAAW,CAAC,QAAQ;gBAC9B,UAAU,EAAE,qBAAqB,CAAC,UAAU;aAC7C,CAAC,CAAA;YAEF,MAAM,UAAU,GAAG;gBACjB,GAAG,qBAAqB,CAAC,UAAU;aACpC,CAAA;YACD,IAAI,WAAW,CAAC,EAAE,KAAK,MAAM,CAAC,QAAQ,EAAE,EAAE;gBACxC,UAAU,CAAC,QAAQ,GAAG,QAAQ,CAAA;aAC/B;iBAAM;gBACL,UAAU,CAAC,QAAQ,GAAG,qBAAqB,CAAC,UAAU,CAAC,QAAQ,CAAC,GAAG,CACjE,CAAC,WAAW,EAAE,EAAE;oBACd,IACE,WAAW,CAAC,EAAE,KAAK,WAAW,CAAC,EAAE;wBACjC,WAAW,CAAC,IAAI,KAAK,MAAM,EAC3B;wBACA,OAAO;4BACL,GAAG,WAAW;4BACd,QAAQ;yBACT,CAAA;qBACF;yBAAM;wBACL,OAAO,WAAW,CAAA;qBACnB;gBACH,CAAC,CACF,CAAA;aACF;YAED,OAAO;gBACL,UAAU;gBACV,UAAU;aACX,CAAA;QACH,CAAC,CAAC,CAAA;IACJ,CAAC,EACD,CAAC,MAAM,EAAE,WAAW,CAAC,QAAQ,EAAE,WAAW,CAAC,EAAE,EAAE,iBAAiB,CAAC,CAClE,CAAA;IAED,MAAM,IAAI,GAAG,iBAAiB,EAAE,CAAA;IAEhC,OAAO,CACL,oBAAC,qBAAqB,IAAC,aAAa,EAAE,QAAQ;QAC5C,oBAAC,qBAAqB;YACpB,6BACE,GAAG,EAAE,WAAW,CAAC,EAAE,EACnB,SAAS,EAAE,IAAI,CAAC,6CAA6C,EAAE;oBAC7D,cAAc,EAAE,CAAC,QAAQ;iBAC1B,CAAC;gBAEF,oBAAC,oBAAoB,IACnB,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,IAAI,EACnB,8BAA8B,EAAE,8BAA8B,EAC9D,sBAAsB,EAAE,sBAAsB,EAC9C,yBAAyB,EAAE,yBAAyB,EACpD,QAAQ,EAAE,WAAW,CAAC,QAAQ,EAC9B,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAC,EAAE,GACX,CACE,CACgB,CACF,CACzB,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport { FormTypes } from '@oneblink/types'\nimport OneBlinkFormElements from './OneBlinkFormElements'\nimport useFormDefinition from '../hooks/useFormDefinition'\nimport {\n FormElementLookupHandler,\n FormElementsConditionallyShown,\n FormElementsValidation,\n FormElementValueChangeHandler,\n FormSubmissionModel,\n SetFormSubmission,\n} from '../types/form'\nimport { IsPageVisibleProvider } from '../hooks/useIsPageVisible'\nimport { FlatpickrGuidProvider } from '../hooks/useFlatpickrGuid'\n\nexport type Props = {\n formId: number\n isActive: boolean\n pageElement: FormTypes.PageElement\n displayValidationMessages: boolean\n model: FormSubmissionModel\n formElementsConditionallyShown: FormElementsConditionallyShown | undefined\n formElementsValidation: FormElementsValidation | undefined\n onChange: FormElementValueChangeHandler\n setFormSubmission: SetFormSubmission\n}\n\nfunction PageFormElements({\n formId,\n isActive,\n pageElement,\n model,\n displayValidationMessages,\n formElementsConditionallyShown,\n formElementsValidation,\n onChange,\n setFormSubmission,\n}: Props) {\n const handleLookup = React.useCallback<FormElementLookupHandler>(\n (mergeLookupResults) => {\n setFormSubmission((currentFormSubmission) => {\n const { submission, elements } = mergeLookupResults({\n elements: pageElement.elements,\n submission: currentFormSubmission.submission,\n })\n\n const definition = {\n ...currentFormSubmission.definition,\n }\n if (pageElement.id === formId.toString()) {\n definition.elements = elements\n } else {\n definition.elements = currentFormSubmission.definition.elements.map(\n (formElement) => {\n if (\n formElement.id === pageElement.id &&\n formElement.type === 'page'\n ) {\n return {\n ...formElement,\n elements,\n }\n } else {\n return formElement\n }\n },\n )\n }\n\n return {\n submission,\n definition,\n }\n })\n },\n [formId, pageElement.elements, pageElement.id, setFormSubmission],\n )\n\n const form = useFormDefinition()\n\n return (\n <IsPageVisibleProvider isPageVisible={isActive}>\n <FlatpickrGuidProvider>\n <div\n key={pageElement.id}\n className={clsx('ob-page step-content is-active cypress-page', {\n 'is-invisible': !isActive,\n })}\n >\n <OneBlinkFormElements\n formId={formId}\n model={model}\n parentElement={form}\n formElementsConditionallyShown={formElementsConditionallyShown}\n formElementsValidation={formElementsValidation}\n displayValidationMessages={displayValidationMessages}\n elements={pageElement.elements}\n onChange={onChange}\n onLookup={handleLookup}\n idPrefix=\"\"\n />\n </div>\n </FlatpickrGuidProvider>\n </IsPageVisibleProvider>\n )\n}\n\nexport default React.memo(PageFormElements)\n"]}
@@ -1,7 +1,9 @@
1
1
  import * as React from 'react';
2
2
  import Flatpickr from 'flatpickr';
3
3
  import { Sentry } from '@oneblink/apps';
4
+ import useFlatpickrGuid from '../hooks/useFlatpickrGuid';
4
5
  export default function useFlatpickr({ id, value, onChange, dateOnly, }, fpOpts, htmlElement) {
6
+ const flatpickrGuid = useFlatpickrGuid();
5
7
  const vpRef = React.useRef(null);
6
8
  const getDateValue = React.useCallback((date) => {
7
9
  var _a;
@@ -18,7 +20,7 @@ export default function useFlatpickr({ id, value, onChange, dateOnly, }, fpOpts,
18
20
  static: true,
19
21
  appendTo: htmlElement.current || undefined,
20
22
  };
21
- const newVp = new Flatpickr(`[id="${id}"]`, options);
23
+ const newVp = new Flatpickr(`[id="${flatpickrGuid}"] [id="${id}"]`, options);
22
24
  vpRef.current = newVp;
23
25
  return () => {
24
26
  // destroy the flatpickr instance when the dom element is removed
@@ -27,7 +29,7 @@ export default function useFlatpickr({ id, value, onChange, dateOnly, }, fpOpts,
27
29
  newVp.destroy();
28
30
  }
29
31
  };
30
- }, [fpOpts, htmlElement, id, vpRef]);
32
+ }, [flatpickrGuid, fpOpts, htmlElement, id, vpRef]);
31
33
  React.useEffect(() => {
32
34
  if (vpRef.current && vpRef.current.config) {
33
35
  vpRef.current.set('onChange', (selectedDates) => {
@@ -1 +1 @@
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 } from '@oneblink/apps'\n\nexport { FlatpickrOptions }\n\nexport default function useFlatpickr(\n {\n id,\n value,\n onChange,\n dateOnly,\n }: {\n id: string\n value: unknown | undefined\n onChange: (value: string | undefined) => void\n dateOnly?: boolean\n },\n fpOpts: FlatpickrOptions,\n htmlElement: { current: HTMLElement | null },\n) {\n const vpRef = React.useRef<FlatpickrInstance | null>(null)\n\n const getDateValue = React.useCallback(\n (date: Date | undefined) => {\n if (!date) return\n if (dateOnly) {\n return vpRef.current?.formatDate(date, 'Y-m-d')\n }\n return date.toISOString()\n },\n [dateOnly],\n )\n\n React.useEffect(() => {\n const options: FlatpickrOptions = {\n ...fpOpts,\n static: true,\n appendTo: htmlElement.current || undefined,\n }\n const newVp: FlatpickrInstance = new (Flatpickr as any)(\n `[id=\"${id}\"]`,\n options,\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 }, [fpOpts, htmlElement, id, vpRef])\n\n React.useEffect(() => {\n if (vpRef.current && vpRef.current.config) {\n vpRef.current.set('onChange', (selectedDates: Date[]) => {\n onChange(getDateValue(selectedDates[0]))\n })\n }\n }, [getDateValue, onChange, vpRef])\n\n // Sync value with flatpickr when value is changed outside of component\n React.useEffect(() => {\n // try {\n const vp = vpRef.current\n\n if (vp && vp.selectedDates) {\n const selectedDate = vp.selectedDates[0]\n // Sentry.captureException(\n // new Error(`selectedDate: ${selectedDate} value: ${value}`),\n // )\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) !== value)\n ) {\n try {\n vp.setDate(value, false)\n // vp.setDate('2021-10-07', false)\n } catch (error) {\n Sentry.captureException(new Error(`Error setting date: ${value}`))\n }\n }\n }\n // } catch (error) {\n // Sentry.captureException(error)\n // }\n }, [getDateValue, value, vpRef])\n}\n"]}
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,MAAM,gBAAgB,CAAA;AACvC,OAAO,gBAAgB,MAAM,2BAA2B,CAAA;AAIxD,MAAM,CAAC,OAAO,UAAU,YAAY,CAClC,EACE,EAAE,EACF,KAAK,EACL,QAAQ,EACR,QAAQ,GAMT,EACD,MAAwB,EACxB,WAA4C;IAE5C,MAAM,aAAa,GAAG,gBAAgB,EAAE,CAAA;IACxC,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAA2B,IAAI,CAAC,CAAA;IAE1D,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CACpC,CAAC,IAAsB,EAAE,EAAE;;QACzB,IAAI,CAAC,IAAI;YAAE,OAAM;QACjB,IAAI,QAAQ,EAAE;YACZ,OAAO,MAAA,KAAK,CAAC,OAAO,0CAAE,UAAU,CAAC,IAAI,EAAE,OAAO,CAAC,CAAA;SAChD;QACD,OAAO,IAAI,CAAC,WAAW,EAAE,CAAA;IAC3B,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAA;IAED,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,OAAO,GAAqB;YAChC,GAAG,MAAM;YACT,MAAM,EAAE,IAAI;YACZ,QAAQ,EAAE,WAAW,CAAC,OAAO,IAAI,SAAS;SAC3C,CAAA;QACD,MAAM,KAAK,GAAsB,IAAK,SAAiB,CACrD,QAAQ,aAAa,WAAW,EAAE,IAAI,EACtC,OAAO,CACR,CAAA;QACD,KAAK,CAAC,OAAO,GAAG,KAAK,CAAA;QACrB,OAAO,GAAG,EAAE;YACV,iEAAiE;YACjE,KAAK,CAAC,OAAO,GAAG,IAAI,CAAA;YACpB,IAAI,KAAK,CAAC,OAAO,EAAE;gBACjB,KAAK,CAAC,OAAO,EAAE,CAAA;aAChB;QACH,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,EAAE,WAAW,EAAE,EAAE,EAAE,KAAK,CAAC,CAAC,CAAA;IAEnD,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,CAAC,MAAM,EAAE;YACzC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,UAAU,EAAE,CAAC,aAAqB,EAAE,EAAE;gBACtD,QAAQ,CAAC,YAAY,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;YAC1C,CAAC,CAAC,CAAA;SACH;IACH,CAAC,EAAE,CAAC,YAAY,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAA;IAEnC,uEAAuE;IACvE,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,QAAQ;QACR,MAAM,EAAE,GAAG,KAAK,CAAC,OAAO,CAAA;QAExB,IAAI,EAAE,IAAI,EAAE,CAAC,aAAa,EAAE;YAC1B,MAAM,YAAY,GAAG,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC,CAAA;YACxC,2BAA2B;YAC3B,gEAAgE;YAChE,IAAI;YACJ,IAAI,CAAC,KAAK,IAAI,YAAY,EAAE;gBAC1B,IAAI;oBACF,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;iBAChB;gBAAC,OAAO,KAAK,EAAE;oBACd,MAAM,CAAC,gBAAgB,CAAC,IAAI,KAAK,CAAC,sBAAsB,CAAC,CAAC,CAAA;iBAC3D;aACF;iBAAM,IACL,KAAK;gBACL,OAAO,KAAK,KAAK,QAAQ;gBACzB,CAAC,CAAC,YAAY,IAAI,YAAY,CAAC,YAAY,CAAC,KAAK,KAAK,CAAC,EACvD;gBACA,IAAI;oBACF,EAAE,CAAC,OAAO,CAAC,KAAK,EAAE,KAAK,CAAC,CAAA;oBACxB,kCAAkC;iBACnC;gBAAC,OAAO,KAAK,EAAE;oBACd,MAAM,CAAC,gBAAgB,CAAC,IAAI,KAAK,CAAC,uBAAuB,KAAK,EAAE,CAAC,CAAC,CAAA;iBACnE;aACF;SACF;QACD,oBAAoB;QACpB,mCAAmC;QACnC,IAAI;IACN,CAAC,EAAE,CAAC,YAAY,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAA;AAClC,CAAC","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 } from '@oneblink/apps'\nimport useFlatpickrGuid from '../hooks/useFlatpickrGuid'\n\nexport { FlatpickrOptions }\n\nexport default function useFlatpickr(\n {\n id,\n value,\n onChange,\n dateOnly,\n }: {\n id: string\n value: unknown | undefined\n onChange: (value: string | undefined) => void\n dateOnly?: boolean\n },\n fpOpts: FlatpickrOptions,\n htmlElement: { current: HTMLElement | null },\n) {\n const flatpickrGuid = useFlatpickrGuid()\n const vpRef = React.useRef<FlatpickrInstance | null>(null)\n\n const getDateValue = React.useCallback(\n (date: Date | undefined) => {\n if (!date) return\n if (dateOnly) {\n return vpRef.current?.formatDate(date, 'Y-m-d')\n }\n return date.toISOString()\n },\n [dateOnly],\n )\n\n React.useEffect(() => {\n const options: FlatpickrOptions = {\n ...fpOpts,\n static: true,\n appendTo: htmlElement.current || undefined,\n }\n const newVp: FlatpickrInstance = new (Flatpickr as any)(\n `[id=\"${flatpickrGuid}\"] [id=\"${id}\"]`,\n options,\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 }, [flatpickrGuid, fpOpts, htmlElement, id, vpRef])\n\n React.useEffect(() => {\n if (vpRef.current && vpRef.current.config) {\n vpRef.current.set('onChange', (selectedDates: Date[]) => {\n onChange(getDateValue(selectedDates[0]))\n })\n }\n }, [getDateValue, onChange, vpRef])\n\n // Sync value with flatpickr when value is changed outside of component\n React.useEffect(() => {\n // try {\n const vp = vpRef.current\n\n if (vp && vp.selectedDates) {\n const selectedDate = vp.selectedDates[0]\n // Sentry.captureException(\n // new Error(`selectedDate: ${selectedDate} value: ${value}`),\n // )\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) !== value)\n ) {\n try {\n vp.setDate(value, false)\n // vp.setDate('2021-10-07', false)\n } catch (error) {\n Sentry.captureException(new Error(`Error setting date: ${value}`))\n }\n }\n }\n // } catch (error) {\n // Sentry.captureException(error)\n // }\n }, [getDateValue, value, vpRef])\n}\n"]}
@@ -0,0 +1,7 @@
1
+ import * as React from 'react';
2
+ declare type Props = {
3
+ children: React.ReactNode;
4
+ };
5
+ export declare const FlatpickrGuidProvider: ({ children }: Props) => JSX.Element;
6
+ export default function useFlatpickrGuidCallback(): string;
7
+ export {};
@@ -0,0 +1,12 @@
1
+ import { v4 as guid } from 'uuid';
2
+ import * as React from 'react';
3
+ const FlatpickrGuidContext = React.createContext('');
4
+ export const FlatpickrGuidProvider = ({ children }) => {
5
+ const value = React.useMemo(() => guid(), []);
6
+ return (React.createElement(FlatpickrGuidContext.Provider, { value: value },
7
+ React.createElement("div", { id: value }, children)));
8
+ };
9
+ export default function useFlatpickrGuidCallback() {
10
+ return React.useContext(FlatpickrGuidContext);
11
+ }
12
+ //# sourceMappingURL=useFlatpickrGuid.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useFlatpickrGuid.js","sourceRoot":"","sources":["../../src/hooks/useFlatpickrGuid.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,IAAI,IAAI,EAAE,MAAM,MAAM,CAAA;AACjC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,MAAM,oBAAoB,GAAG,KAAK,CAAC,aAAa,CAAS,EAAE,CAAC,CAAA;AAK5D,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,EAAE,QAAQ,EAAS,EAAE,EAAE;IAC3D,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE,EAAE,CAAC,CAAA;IAC7C,OAAO,CACL,oBAAC,oBAAoB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK;QACzC,6BAAK,EAAE,EAAE,KAAK,IAAG,QAAQ,CAAO,CACF,CACjC,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,OAAO,UAAU,wBAAwB;IAC9C,OAAO,KAAK,CAAC,UAAU,CAAC,oBAAoB,CAAC,CAAA;AAC/C,CAAC","sourcesContent":["import { v4 as guid } from 'uuid'\nimport * as React from 'react'\n\nconst FlatpickrGuidContext = React.createContext<string>('')\n\ntype Props = {\n children: React.ReactNode\n}\nexport const FlatpickrGuidProvider = ({ children }: Props) => {\n const value = React.useMemo(() => guid(), [])\n return (\n <FlatpickrGuidContext.Provider value={value}>\n <div id={value}>{children}</div>\n </FlatpickrGuidContext.Provider>\n )\n}\n\nexport default function useFlatpickrGuidCallback() {\n return React.useContext(FlatpickrGuidContext)\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": "0.5.6-beta.1",
4
+ "version": "0.5.6-beta.2",
5
5
  "author": "OneBlink <developers@oneblink.io> (https://oneblink.io)",
6
6
  "bugs": {
7
7
  "url": "https://github.com/oneblink/apps-react/issues"