@oneblink/apps-react 2.14.0-beta.1 → 2.14.1-beta.1
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/components/renderer/FormElementLabelContainer.js +3 -3
- package/dist/components/renderer/FormElementLabelContainer.js.map +1 -1
- package/dist/form-elements/FormElementHTML.js +2 -20
- package/dist/form-elements/FormElementHTML.js.map +1 -1
- package/dist/form-elements/FormElementRepeatableSet.d.ts +1 -1
- package/dist/form-elements/FormElementRepeatableSet.js +5 -1
- package/dist/form-elements/FormElementRepeatableSet.js.map +1 -1
- package/dist/hooks/useFlatpickr.js +9 -1
- package/dist/hooks/useFlatpickr.js.map +1 -1
- package/dist/hooks/useReplaceableHTML.d.ts +1 -0
- package/dist/hooks/useReplaceableHTML.js +33 -0
- package/dist/hooks/useReplaceableHTML.js.map +1 -0
- package/dist/hooks/useSanitizedHTML.d.ts +1 -0
- package/dist/hooks/useSanitizedHTML.js +6 -0
- package/dist/hooks/useSanitizedHTML.js.map +1 -0
- package/package.json +1 -1
- package/dist/hooks/useHint.d.ts +0 -2
- package/dist/hooks/useHint.js +0 -25
- package/dist/hooks/useHint.js.map +0 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { Tooltip } from '@mui/material';
|
|
3
3
|
import clsx from 'clsx';
|
|
4
|
-
import
|
|
4
|
+
import useReplaceableHTML from '../../hooks/useReplaceableHTML';
|
|
5
5
|
import QuillHTML from '../QuillHTML';
|
|
6
6
|
function FormElementLabelContainer({ className, element, id, required, children, leading, }) {
|
|
7
7
|
return (React.createElement("div", { className: clsx('ob-form__element', className) },
|
|
@@ -17,12 +17,12 @@ function FormElementLabelContainer({ className, element, id, required, children,
|
|
|
17
17
|
children));
|
|
18
18
|
}
|
|
19
19
|
export function HintTooltip({ hint }) {
|
|
20
|
-
const html =
|
|
20
|
+
const html = useReplaceableHTML(hint);
|
|
21
21
|
return (React.createElement(Tooltip, { title: React.createElement(QuillHTML, { html: html, className: "ob-hint-tooltip" }), arrow: true, enterTouchDelay: 0, leaveTouchDelay: 10000 },
|
|
22
22
|
React.createElement("i", { className: "material-icons has-text-grey-light ob-label__hint" }, "info")));
|
|
23
23
|
}
|
|
24
24
|
export function HintBelowLabel({ hint }) {
|
|
25
|
-
const html =
|
|
25
|
+
const html = useReplaceableHTML(hint);
|
|
26
26
|
return React.createElement(QuillHTML, { html: html, className: "ob-hint-text" });
|
|
27
27
|
}
|
|
28
28
|
export default React.memo(FormElementLabelContainer);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormElementLabelContainer.js","sourceRoot":"","sources":["../../../src/components/renderer/FormElementLabelContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,IAAI,MAAM,MAAM,CAAA;AAEvB,OAAO,
|
|
1
|
+
{"version":3,"file":"FormElementLabelContainer.js","sourceRoot":"","sources":["../../../src/components/renderer/FormElementLabelContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,IAAI,MAAM,MAAM,CAAA;AAEvB,OAAO,kBAAkB,MAAM,gCAAgC,CAAA;AAC/D,OAAO,SAAS,MAAM,cAAc,CAAA;AAEpC,SAAS,yBAAyB,CAAC,EACjC,SAAS,EACT,OAAO,EACP,EAAE,EACF,QAAQ,EACR,QAAQ,EACR,OAAO,GAQR;IACC,OAAO,CACL,6BAAK,SAAS,EAAE,IAAI,CAAC,kBAAkB,EAAE,SAAS,CAAC;QACjD,6BAAK,SAAS,EAAC,2BAA2B;YACvC,OAAO;YACR,+BACE,SAAS,EAAE,IAAI,CAAC,UAAU,EAAE;oBAC1B,gCAAgC,EAAE,QAAQ;iBAC3C,CAAC,EACF,OAAO,EAAE,EAAE,IAEV,OAAO,CAAC,KAAK,CACR;YACP,OAAO,CAAC,IAAI;gBACX,CAAC,OAAO,CAAC,YAAY,KAAK,SAAS,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,IAAI,CAC/D,oBAAC,WAAW,IAAC,IAAI,EAAE,OAAO,CAAC,IAAI,GAAI,CACpC,CACC;QACL,OAAO,CAAC,IAAI,IAAI,OAAO,CAAC,YAAY,KAAK,aAAa,IAAI,CACzD,6BAAK,SAAS,EAAC,yBAAyB;YACtC,oBAAC,cAAc,IAAC,IAAI,EAAE,OAAO,CAAC,IAAI,GAAI,CAClC,CACP;QACA,QAAQ,CACL,CACP,CAAA;AACH,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,EAAE,IAAI,EAAoB;IACpD,MAAM,IAAI,GAAG,kBAAkB,CAAC,IAAI,CAAC,CAAA;IAErC,OAAO,CACL,oBAAC,OAAO,IACN,KAAK,EAAE,oBAAC,SAAS,IAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAC,iBAAiB,GAAG,EAC5D,KAAK,QACL,eAAe,EAAE,CAAC,EAClB,eAAe,EAAE,KAAK;QAEtB,2BAAG,SAAS,EAAC,mDAAmD,WAAS,CACjE,CACX,CAAA;AACH,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,EAAE,IAAI,EAAoB;IACvD,MAAM,IAAI,GAAG,kBAAkB,CAAC,IAAI,CAAC,CAAA;IAErC,OAAO,oBAAC,SAAS,IAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAC,cAAc,GAAG,CAAA;AAC3D,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport { Tooltip } from '@mui/material'\nimport clsx from 'clsx'\nimport { FormTypes } from '@oneblink/types'\nimport useReplaceableHTML from '../../hooks/useReplaceableHTML'\nimport QuillHTML from '../QuillHTML'\n\nfunction FormElementLabelContainer({\n className,\n element,\n id,\n required,\n children,\n leading,\n}: {\n className: string\n element: FormTypes.FormElementBase\n id: string\n required: boolean\n children: React.ReactNode\n leading?: React.ReactNode\n}) {\n return (\n <div className={clsx('ob-form__element', className)}>\n <div className=\"label ob-label__container\">\n {leading}\n <label\n className={clsx('ob-label', {\n 'ob-label__required is-required': required,\n })}\n htmlFor={id}\n >\n {element.label}\n </label>\n {element.hint &&\n (element.hintPosition === 'TOOLTIP' || !element.hintPosition) && (\n <HintTooltip hint={element.hint} />\n )}\n </div>\n {element.hint && element.hintPosition === 'BELOW_LABEL' && (\n <div className=\"ob-hint-text__container\">\n <HintBelowLabel hint={element.hint} />\n </div>\n )}\n {children}\n </div>\n )\n}\n\nexport function HintTooltip({ hint }: { hint: string }) {\n const html = useReplaceableHTML(hint)\n\n return (\n <Tooltip\n title={<QuillHTML html={html} className=\"ob-hint-tooltip\" />}\n arrow\n enterTouchDelay={0}\n leaveTouchDelay={10000}\n >\n <i className=\"material-icons has-text-grey-light ob-label__hint\">info</i>\n </Tooltip>\n )\n}\n\nexport function HintBelowLabel({ hint }: { hint: string }) {\n const html = useReplaceableHTML(hint)\n\n return <QuillHTML html={html} className=\"ob-hint-text\" />\n}\n\nexport default React.memo(FormElementLabelContainer)\n"]}
|
|
@@ -1,26 +1,8 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import
|
|
3
|
-
import { RepeatableSetIndexContext } from './FormElementRepeatableSet';
|
|
4
|
-
import useFormSubmissionModel from '../hooks/useFormSubmissionModelContext';
|
|
5
|
-
import { submissionService } from '@oneblink/sdk-core';
|
|
6
|
-
import { localisationService } from '@oneblink/apps';
|
|
2
|
+
import useReplaceableHTML from '../hooks/useReplaceableHTML';
|
|
7
3
|
import QuillHTML from '../components/QuillHTML';
|
|
8
4
|
function FormElementHTML({ element }) {
|
|
9
|
-
const
|
|
10
|
-
const index = React.useContext(RepeatableSetIndexContext);
|
|
11
|
-
const html = React.useMemo(() => {
|
|
12
|
-
let html = element.defaultValue;
|
|
13
|
-
html = html.replace('{INDEX}', (index + 1).toString());
|
|
14
|
-
html = submissionService.replaceElementValues(html, {
|
|
15
|
-
submission: formSubmissionModel,
|
|
16
|
-
formElements: elements,
|
|
17
|
-
formatCurrency: localisationService.formatCurrency,
|
|
18
|
-
formatDate: (v) => localisationService.formatDate(new Date(v)),
|
|
19
|
-
formatNumber: localisationService.formatNumber,
|
|
20
|
-
formatTime: (v) => localisationService.formatTime(new Date(v)),
|
|
21
|
-
});
|
|
22
|
-
return sanitizeHtml(html);
|
|
23
|
-
}, [element.defaultValue, elements, formSubmissionModel, index]);
|
|
5
|
+
const html = useReplaceableHTML(element.defaultValue);
|
|
24
6
|
return (React.createElement("div", { className: "cypress-html-element" },
|
|
25
7
|
React.createElement("div", { className: "ob-form__element ob-information cypress-html-element" },
|
|
26
8
|
React.createElement(QuillHTML, { html: html, className: "cypress-html-element-content ob-information__content" }))));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormElementHTML.js","sourceRoot":"","sources":["../../src/form-elements/FormElementHTML.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"FormElementHTML.js","sourceRoot":"","sources":["../../src/form-elements/FormElementHTML.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,kBAAkB,MAAM,6BAA6B,CAAA;AAC5D,OAAO,SAAS,MAAM,yBAAyB,CAAA;AAM/C,SAAS,eAAe,CAAC,EAAE,OAAO,EAAS;IACzC,MAAM,IAAI,GAAG,kBAAkB,CAAC,OAAO,CAAC,YAAY,CAAC,CAAA;IAErD,OAAO,CACL,6BAAK,SAAS,EAAC,sBAAsB;QACnC,6BAAK,SAAS,EAAC,sDAAsD;YACnE,oBAAC,SAAS,IACR,IAAI,EAAE,IAAI,EACV,SAAS,EAAC,sDAAsD,GAChE,CACE,CACF,CACP,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport { FormTypes } from '@oneblink/types'\nimport useReplaceableHTML from '../hooks/useReplaceableHTML'\nimport QuillHTML from '../components/QuillHTML'\n\ntype Props = {\n element: FormTypes.HtmlElement\n}\n\nfunction FormElementHTML({ element }: Props) {\n const html = useReplaceableHTML(element.defaultValue)\n\n return (\n <div className=\"cypress-html-element\">\n <div className=\"ob-form__element ob-information cypress-html-element\">\n <QuillHTML\n html={html}\n className=\"cypress-html-element-content ob-information__content\"\n />\n </div>\n </div>\n )\n}\n\nexport default React.memo(FormElementHTML)\n"]}
|
|
@@ -13,7 +13,7 @@ type Props = {
|
|
|
13
13
|
formElementValidation: FormElementValidation | undefined;
|
|
14
14
|
displayValidationMessage: boolean;
|
|
15
15
|
} & IsDirtyProps;
|
|
16
|
-
export declare
|
|
16
|
+
export declare function useRepeatableSetIndexText(text: string): string;
|
|
17
17
|
declare function FormElementRepeatableSet({ formId, element, value, formElementValidation, id, isEven, displayValidationMessage, formElementConditionallyShown, onChange, onLookup, isDirty, setIsDirty, }: Props): JSX.Element;
|
|
18
18
|
declare const _default: React.MemoExoticComponent<typeof FormElementRepeatableSet>;
|
|
19
19
|
export default _default;
|
|
@@ -7,7 +7,11 @@ import Modal from '../components/renderer/Modal';
|
|
|
7
7
|
import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer';
|
|
8
8
|
import useValidationClass from '../hooks/useValidationClass';
|
|
9
9
|
import useFormElementRepeatableSetEntries from '../hooks/useFormElementRepeatableSetEntries';
|
|
10
|
-
|
|
10
|
+
const RepeatableSetIndexContext = React.createContext(0);
|
|
11
|
+
export function useRepeatableSetIndexText(text) {
|
|
12
|
+
const index = React.useContext(RepeatableSetIndexContext);
|
|
13
|
+
return React.useMemo(() => text.replace('{INDEX}', (index + 1).toString()), [index, text]);
|
|
14
|
+
}
|
|
11
15
|
function FormElementRepeatableSet({ formId, element, value, formElementValidation, id, isEven, displayValidationMessage, formElementConditionallyShown, onChange, onLookup, isDirty, setIsDirty, }) {
|
|
12
16
|
const entries = React.useMemo(() => (Array.isArray(value) ? value : []), [value]);
|
|
13
17
|
const handleAddEntry = React.useCallback(() => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormElementRepeatableSet.js","sourceRoot":"","sources":["../../src/form-elements/FormElementRepeatableSet.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport useBooleanState from '../hooks/useBooleanState'\nimport generateDefaultData from '../services/generate-default-data'\nimport OneBlinkFormElements from '../components/renderer/OneBlinkFormElements'\nimport Modal from '../components/renderer/Modal'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport useValidationClass from '../hooks/useValidationClass'\nimport {\n FormElementConditionallyShown,\n FormElementLookupHandler,\n FormElementsConditionallyShown,\n FormElementsValidation,\n FormElementValidation,\n FormElementValueChangeHandler,\n FormSubmissionModel,\n IsDirtyProps,\n} from '../types/form'\nimport useFormElementRepeatableSetEntries from '../hooks/useFormElementRepeatableSetEntries'\n\ntype Props = {\n formId: number\n id: string\n isEven: boolean\n element: FormTypes.RepeatableSetElement\n value: Array<FormSubmissionModel> | undefined\n onChange: FormElementValueChangeHandler<FormSubmissionModel[]>\n onLookup: FormElementLookupHandler\n formElementConditionallyShown: FormElementConditionallyShown | undefined\n formElementValidation: FormElementValidation | undefined\n displayValidationMessage: boolean\n} & IsDirtyProps\n\nexport const RepeatableSetIndexContext = React.createContext<number>(0)\n\nfunction FormElementRepeatableSet({\n formId,\n element,\n value,\n formElementValidation,\n id,\n isEven,\n displayValidationMessage,\n formElementConditionallyShown,\n onChange,\n onLookup,\n isDirty,\n setIsDirty,\n}: Props) {\n const entries = React.useMemo(\n () => (Array.isArray(value) ? value : []),\n [value],\n )\n\n const handleAddEntry = React.useCallback(() => {\n onChange(element, (existingEntries) => {\n const newEntries = [...(existingEntries || [])]\n const entry = generateDefaultData(element.elements, {})\n newEntries.push(entry)\n return newEntries\n })\n setIsDirty()\n }, [element, onChange, setIsDirty])\n\n const handleRemoveEntry = React.useCallback(\n (index: number) => {\n onChange(element, (existingEntries) => {\n const newEntries = [...(existingEntries || [])]\n newEntries.splice(index, 1)\n return newEntries\n })\n setIsDirty()\n },\n [element, onChange, setIsDirty],\n )\n\n const handleNestedChange = React.useCallback(\n (index: number, nestedElement: FormTypes.FormElement, value: unknown) => {\n if (!('name' in nestedElement)) {\n return\n }\n onChange(element, (existingEntries) => {\n const newEntries = (existingEntries || []).map((entry, i) => {\n if (i === index) {\n return {\n ...entry,\n [nestedElement.name]:\n typeof value === 'function'\n ? value(entry[nestedElement.name])\n : value,\n }\n } else {\n return entry\n }\n })\n return newEntries\n })\n },\n [element, onChange],\n )\n\n const { minSetEntries, maxSetEntries } =\n useFormElementRepeatableSetEntries(element)\n\n const repeatableSetValidation = React.useMemo(\n () =>\n !formElementValidation ||\n typeof formElementValidation === 'string' ||\n formElementValidation.type !== 'repeatableSet'\n ? undefined\n : formElementValidation,\n [formElementValidation],\n )\n\n const repeatableSetEntriesConditionallyShown =\n formElementConditionallyShown &&\n formElementConditionallyShown.type === 'repeatableSet'\n ? formElementConditionallyShown.entries\n : {}\n\n const { validationClassName } = useValidationClass({\n formElementsValid: !repeatableSetValidation,\n displayInvalidClassName: isDirty || displayValidationMessage,\n validClassName: 'ob-repeatable-set-element__valid',\n invalidClassName: 'ob-repeatable-set-element__invalid',\n })\n\n return (\n <div\n className={clsx('cypress-repeatable-set-element', validationClassName)}\n >\n <FormElementLabelContainer\n className={`ob-repeatable-set ${isEven ? 'even' : 'odd'}`}\n element={element}\n id={id}\n required={!!minSetEntries && minSetEntries > 0}\n >\n {entries.map((entry, index) => {\n return (\n <RepeatableSetEntry\n key={index}\n formId={formId}\n index={index}\n id={id}\n isEven={isEven}\n entry={entry}\n element={element}\n onChange={handleNestedChange}\n onLookup={onLookup}\n onRemove={handleRemoveEntry}\n formElementsConditionallyShown={\n repeatableSetEntriesConditionallyShown[index.toString()]\n }\n formElementsValidation={\n repeatableSetValidation &&\n repeatableSetValidation.entries[index.toString()]\n }\n displayValidationMessages={displayValidationMessage}\n />\n )\n })}\n {(!maxSetEntries || entries.length < maxSetEntries) && (\n <button\n type=\"button\"\n className=\"button ob-button ob-button__add is-primary cypress-add-repeatable-set\"\n onClick={handleAddEntry}\n disabled={element.readOnly}\n >\n <span className=\"icon\">\n <i className=\"material-icons\">add</i>\n </span>\n {!!element.addSetEntryLabel && (\n <span>{element.addSetEntryLabel}</span>\n )}\n </button>\n )}\n {(isDirty || displayValidationMessage) &&\n !!repeatableSetValidation &&\n !!repeatableSetValidation.set && (\n <div role=\"alert\" className=\"has-margin-top-8\">\n <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n {repeatableSetValidation.set}\n </div>\n </div>\n )}\n </FormElementLabelContainer>\n </div>\n )\n}\n\nexport default React.memo(FormElementRepeatableSet)\n\ntype RepeatableSetEntryProps = {\n formId: number\n id: string\n index: number\n isEven: boolean\n entry: FormSubmissionModel\n element: FormTypes.RepeatableSetElement\n formElementsConditionallyShown: FormElementsConditionallyShown | undefined\n formElementsValidation: FormElementsValidation | undefined\n displayValidationMessages: boolean\n onChange: (\n index: number,\n formElement: FormTypes.FormElement,\n value: unknown,\n ) => unknown\n onLookup: FormElementLookupHandler\n onRemove: (index: number) => unknown\n}\n\nconst RepeatableSetEntry = React.memo<RepeatableSetEntryProps>(\n function RepeatableSetEntry({\n formId,\n id,\n index,\n isEven,\n entry,\n element,\n formElementsConditionallyShown,\n displayValidationMessages,\n formElementsValidation,\n onChange,\n onLookup,\n onRemove,\n }: RepeatableSetEntryProps) {\n const [isConfirmingRemove, confirmRemove, cancelRemove] =\n useBooleanState(false)\n\n const handleChange = React.useCallback(\n (element: FormTypes.FormElement, value: unknown) => {\n onChange(index, element, value)\n },\n [index, onChange],\n )\n\n const handleLookup = React.useCallback<FormElementLookupHandler>(\n (mergeLookupResults) => {\n onLookup((currentFormSubmission) => {\n let newEntry = {}\n const entries = currentFormSubmission.submission[\n element.name\n ] as Array<FormSubmissionModel>\n const elements = currentFormSubmission.elements.map((formElement) => {\n if (\n formElement.type === 'repeatableSet' &&\n formElement.name === element.name\n ) {\n const { elements, submission } = mergeLookupResults({\n elements: formElement.elements,\n submission: entries[index],\n lastElementUpdated: currentFormSubmission.lastElementUpdated,\n })\n newEntry = submission\n return {\n ...formElement,\n elements,\n }\n }\n return formElement\n })\n\n const submission = {\n ...currentFormSubmission.submission,\n [element.name]: entries.map((entry, i) => {\n if (i === index) {\n return newEntry\n }\n return entry\n }),\n }\n\n return {\n elements,\n submission,\n }\n })\n },\n [element.name, index, onLookup],\n )\n\n const { validationClassName } = useValidationClass({\n formElementsValid: !formElementsValidation,\n displayInvalidClassName: displayValidationMessages,\n validClassName: 'ob-repeatable-set__valid',\n invalidClassName: 'ob-repeatable-set__invalid',\n })\n\n return (\n <RepeatableSetIndexContext.Provider value={index}>\n <Modal\n isOpen={isConfirmingRemove}\n className=\"cypress-repeatable-set-prompt\"\n titleClassName=\"cypress-repeatable-set-remove-entry-header\"\n title={element.removeSetEntryLabel || 'Remove Entry'}\n actions={\n <>\n <button\n type=\"button\"\n className=\"button ob-button is-light cypress-cancel-repeatable-set\"\n onClick={cancelRemove}\n >\n Cancel\n </button>\n <button\n type=\"button\"\n className=\"button ob-button is-primary cypress-confirm-repeatable-set\"\n onClick={() => {\n cancelRemove()\n onRemove(index)\n }}\n >\n Yes\n </button>\n </>\n }\n >\n Are you sure you want to remove this entry?\n </Modal>\n\n <div\n key={index}\n className={clsx(\n 'ob-repeatable-set__container cypress-repeatable-set-container',\n validationClassName,\n )}\n >\n <button\n type=\"button\"\n className=\"button ob-button ob-button_remove is-light cypress-remove-repeatable-set-entry\"\n onClick={confirmRemove}\n disabled={element.readOnly}\n >\n <span className=\"icon\">\n <i className=\"material-icons\">delete_outline</i>\n </span>\n {!!element.removeSetEntryLabel && (\n <span>{element.removeSetEntryLabel}</span>\n )}\n </button>\n\n <OneBlinkFormElements\n formId={formId}\n idPrefix={`${id}_entry-${index}_`}\n isEven={isEven}\n formElementsValidation={formElementsValidation}\n displayValidationMessages={displayValidationMessages}\n elements={element.elements}\n onChange={handleChange}\n onLookup={handleLookup}\n model={entry}\n parentElement={element}\n formElementsConditionallyShown={formElementsConditionallyShown}\n />\n </div>\n </RepeatableSetIndexContext.Provider>\n )\n },\n)\n"]}
|
|
1
|
+
{"version":3,"file":"FormElementRepeatableSet.js","sourceRoot":"","sources":["../../src/form-elements/FormElementRepeatableSet.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport useBooleanState from '../hooks/useBooleanState'\nimport generateDefaultData from '../services/generate-default-data'\nimport OneBlinkFormElements from '../components/renderer/OneBlinkFormElements'\nimport Modal from '../components/renderer/Modal'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport useValidationClass from '../hooks/useValidationClass'\nimport {\n FormElementConditionallyShown,\n FormElementLookupHandler,\n FormElementsConditionallyShown,\n FormElementsValidation,\n FormElementValidation,\n FormElementValueChangeHandler,\n FormSubmissionModel,\n IsDirtyProps,\n} from '../types/form'\nimport useFormElementRepeatableSetEntries from '../hooks/useFormElementRepeatableSetEntries'\n\ntype Props = {\n formId: number\n id: string\n isEven: boolean\n element: FormTypes.RepeatableSetElement\n value: Array<FormSubmissionModel> | undefined\n onChange: FormElementValueChangeHandler<FormSubmissionModel[]>\n onLookup: FormElementLookupHandler\n formElementConditionallyShown: FormElementConditionallyShown | undefined\n formElementValidation: FormElementValidation | undefined\n displayValidationMessage: boolean\n} & IsDirtyProps\n\nconst RepeatableSetIndexContext = React.createContext<number>(0)\n\nexport function useRepeatableSetIndexText(text: string) {\n const index = React.useContext(RepeatableSetIndexContext)\n return React.useMemo(\n () => text.replace('{INDEX}', (index + 1).toString()),\n [index, text],\n )\n}\n\nfunction FormElementRepeatableSet({\n formId,\n element,\n value,\n formElementValidation,\n id,\n isEven,\n displayValidationMessage,\n formElementConditionallyShown,\n onChange,\n onLookup,\n isDirty,\n setIsDirty,\n}: Props) {\n const entries = React.useMemo(\n () => (Array.isArray(value) ? value : []),\n [value],\n )\n\n const handleAddEntry = React.useCallback(() => {\n onChange(element, (existingEntries) => {\n const newEntries = [...(existingEntries || [])]\n const entry = generateDefaultData(element.elements, {})\n newEntries.push(entry)\n return newEntries\n })\n setIsDirty()\n }, [element, onChange, setIsDirty])\n\n const handleRemoveEntry = React.useCallback(\n (index: number) => {\n onChange(element, (existingEntries) => {\n const newEntries = [...(existingEntries || [])]\n newEntries.splice(index, 1)\n return newEntries\n })\n setIsDirty()\n },\n [element, onChange, setIsDirty],\n )\n\n const handleNestedChange = React.useCallback(\n (index: number, nestedElement: FormTypes.FormElement, value: unknown) => {\n if (!('name' in nestedElement)) {\n return\n }\n onChange(element, (existingEntries) => {\n const newEntries = (existingEntries || []).map((entry, i) => {\n if (i === index) {\n return {\n ...entry,\n [nestedElement.name]:\n typeof value === 'function'\n ? value(entry[nestedElement.name])\n : value,\n }\n } else {\n return entry\n }\n })\n return newEntries\n })\n },\n [element, onChange],\n )\n\n const { minSetEntries, maxSetEntries } =\n useFormElementRepeatableSetEntries(element)\n\n const repeatableSetValidation = React.useMemo(\n () =>\n !formElementValidation ||\n typeof formElementValidation === 'string' ||\n formElementValidation.type !== 'repeatableSet'\n ? undefined\n : formElementValidation,\n [formElementValidation],\n )\n\n const repeatableSetEntriesConditionallyShown =\n formElementConditionallyShown &&\n formElementConditionallyShown.type === 'repeatableSet'\n ? formElementConditionallyShown.entries\n : {}\n\n const { validationClassName } = useValidationClass({\n formElementsValid: !repeatableSetValidation,\n displayInvalidClassName: isDirty || displayValidationMessage,\n validClassName: 'ob-repeatable-set-element__valid',\n invalidClassName: 'ob-repeatable-set-element__invalid',\n })\n\n return (\n <div\n className={clsx('cypress-repeatable-set-element', validationClassName)}\n >\n <FormElementLabelContainer\n className={`ob-repeatable-set ${isEven ? 'even' : 'odd'}`}\n element={element}\n id={id}\n required={!!minSetEntries && minSetEntries > 0}\n >\n {entries.map((entry, index) => {\n return (\n <RepeatableSetEntry\n key={index}\n formId={formId}\n index={index}\n id={id}\n isEven={isEven}\n entry={entry}\n element={element}\n onChange={handleNestedChange}\n onLookup={onLookup}\n onRemove={handleRemoveEntry}\n formElementsConditionallyShown={\n repeatableSetEntriesConditionallyShown[index.toString()]\n }\n formElementsValidation={\n repeatableSetValidation &&\n repeatableSetValidation.entries[index.toString()]\n }\n displayValidationMessages={displayValidationMessage}\n />\n )\n })}\n {(!maxSetEntries || entries.length < maxSetEntries) && (\n <button\n type=\"button\"\n className=\"button ob-button ob-button__add is-primary cypress-add-repeatable-set\"\n onClick={handleAddEntry}\n disabled={element.readOnly}\n >\n <span className=\"icon\">\n <i className=\"material-icons\">add</i>\n </span>\n {!!element.addSetEntryLabel && (\n <span>{element.addSetEntryLabel}</span>\n )}\n </button>\n )}\n {(isDirty || displayValidationMessage) &&\n !!repeatableSetValidation &&\n !!repeatableSetValidation.set && (\n <div role=\"alert\" className=\"has-margin-top-8\">\n <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n {repeatableSetValidation.set}\n </div>\n </div>\n )}\n </FormElementLabelContainer>\n </div>\n )\n}\n\nexport default React.memo(FormElementRepeatableSet)\n\ntype RepeatableSetEntryProps = {\n formId: number\n id: string\n index: number\n isEven: boolean\n entry: FormSubmissionModel\n element: FormTypes.RepeatableSetElement\n formElementsConditionallyShown: FormElementsConditionallyShown | undefined\n formElementsValidation: FormElementsValidation | undefined\n displayValidationMessages: boolean\n onChange: (\n index: number,\n formElement: FormTypes.FormElement,\n value: unknown,\n ) => unknown\n onLookup: FormElementLookupHandler\n onRemove: (index: number) => unknown\n}\n\nconst RepeatableSetEntry = React.memo<RepeatableSetEntryProps>(\n function RepeatableSetEntry({\n formId,\n id,\n index,\n isEven,\n entry,\n element,\n formElementsConditionallyShown,\n displayValidationMessages,\n formElementsValidation,\n onChange,\n onLookup,\n onRemove,\n }: RepeatableSetEntryProps) {\n const [isConfirmingRemove, confirmRemove, cancelRemove] =\n useBooleanState(false)\n\n const handleChange = React.useCallback(\n (element: FormTypes.FormElement, value: unknown) => {\n onChange(index, element, value)\n },\n [index, onChange],\n )\n\n const handleLookup = React.useCallback<FormElementLookupHandler>(\n (mergeLookupResults) => {\n onLookup((currentFormSubmission) => {\n let newEntry = {}\n const entries = currentFormSubmission.submission[\n element.name\n ] as Array<FormSubmissionModel>\n const elements = currentFormSubmission.elements.map((formElement) => {\n if (\n formElement.type === 'repeatableSet' &&\n formElement.name === element.name\n ) {\n const { elements, submission } = mergeLookupResults({\n elements: formElement.elements,\n submission: entries[index],\n lastElementUpdated: currentFormSubmission.lastElementUpdated,\n })\n newEntry = submission\n return {\n ...formElement,\n elements,\n }\n }\n return formElement\n })\n\n const submission = {\n ...currentFormSubmission.submission,\n [element.name]: entries.map((entry, i) => {\n if (i === index) {\n return newEntry\n }\n return entry\n }),\n }\n\n return {\n elements,\n submission,\n }\n })\n },\n [element.name, index, onLookup],\n )\n\n const { validationClassName } = useValidationClass({\n formElementsValid: !formElementsValidation,\n displayInvalidClassName: displayValidationMessages,\n validClassName: 'ob-repeatable-set__valid',\n invalidClassName: 'ob-repeatable-set__invalid',\n })\n\n return (\n <RepeatableSetIndexContext.Provider value={index}>\n <Modal\n isOpen={isConfirmingRemove}\n className=\"cypress-repeatable-set-prompt\"\n titleClassName=\"cypress-repeatable-set-remove-entry-header\"\n title={element.removeSetEntryLabel || 'Remove Entry'}\n actions={\n <>\n <button\n type=\"button\"\n className=\"button ob-button is-light cypress-cancel-repeatable-set\"\n onClick={cancelRemove}\n >\n Cancel\n </button>\n <button\n type=\"button\"\n className=\"button ob-button is-primary cypress-confirm-repeatable-set\"\n onClick={() => {\n cancelRemove()\n onRemove(index)\n }}\n >\n Yes\n </button>\n </>\n }\n >\n Are you sure you want to remove this entry?\n </Modal>\n\n <div\n key={index}\n className={clsx(\n 'ob-repeatable-set__container cypress-repeatable-set-container',\n validationClassName,\n )}\n >\n <button\n type=\"button\"\n className=\"button ob-button ob-button_remove is-light cypress-remove-repeatable-set-entry\"\n onClick={confirmRemove}\n disabled={element.readOnly}\n >\n <span className=\"icon\">\n <i className=\"material-icons\">delete_outline</i>\n </span>\n {!!element.removeSetEntryLabel && (\n <span>{element.removeSetEntryLabel}</span>\n )}\n </button>\n\n <OneBlinkFormElements\n formId={formId}\n idPrefix={`${id}_entry-${index}_`}\n isEven={isEven}\n formElementsValidation={formElementsValidation}\n displayValidationMessages={displayValidationMessages}\n elements={element.elements}\n onChange={handleChange}\n onLookup={handleLookup}\n model={entry}\n parentElement={element}\n formElementsConditionallyShown={formElementsConditionallyShown}\n />\n </div>\n </RepeatableSetIndexContext.Provider>\n )\n },\n)\n"]}
|
|
@@ -2,6 +2,7 @@ import * as React from 'react';
|
|
|
2
2
|
import Flatpickr from 'flatpickr';
|
|
3
3
|
import { Sentry } from '@oneblink/apps';
|
|
4
4
|
import useFlatpickrGuid from '../hooks/useFlatpickrGuid';
|
|
5
|
+
import { generateDate } from '../services/generate-default-data';
|
|
5
6
|
const getDateValue = (date, dateOnly) => {
|
|
6
7
|
if (!date)
|
|
7
8
|
return;
|
|
@@ -56,7 +57,14 @@ export default function useFlatpickr({ id, value, onChange, dateOnly, }, fpOpts,
|
|
|
56
57
|
typeof value === 'string' &&
|
|
57
58
|
(!selectedDate || getDateValue(selectedDate, dateOnly) !== value)) {
|
|
58
59
|
try {
|
|
59
|
-
|
|
60
|
+
const date = generateDate({
|
|
61
|
+
daysOffset: undefined,
|
|
62
|
+
value,
|
|
63
|
+
dateOnly: !!dateOnly,
|
|
64
|
+
});
|
|
65
|
+
if (date) {
|
|
66
|
+
vp.setDate(date, false);
|
|
67
|
+
}
|
|
60
68
|
}
|
|
61
69
|
catch (error) {
|
|
62
70
|
Sentry.captureException(new Error(`Error setting date: ${value}`));
|
|
@@ -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,MAAM,gBAAgB,CAAA;AACvC,OAAO,gBAAgB,MAAM,2BAA2B,CAAA;
|
|
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'\nimport useFlatpickrGuid from '../hooks/useFlatpickrGuid'\nimport { generateDate } from '../services/generate-default-data'\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 }: {\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 React.useEffect(() => {\n const options: FlatpickrOptions = {\n ...fpOpts,\n static: true,\n appendTo: htmlElement.current || undefined,\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 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, 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 = 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"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export default function useReplaceableHTML(text: string): string;
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { localisationService } from '@oneblink/apps';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { generateDate } from '../services/generate-default-data';
|
|
4
|
+
import { submissionService } from '@oneblink/sdk-core';
|
|
5
|
+
import useFormSubmissionModel from './useFormSubmissionModelContext';
|
|
6
|
+
import { useRepeatableSetIndexText } from '../form-elements/FormElementRepeatableSet';
|
|
7
|
+
import sanitizeHtml from 'sanitize-html';
|
|
8
|
+
export default function useReplaceableHTML(text) {
|
|
9
|
+
const textWithIndex = useRepeatableSetIndexText(text);
|
|
10
|
+
const html = React.useMemo(() => sanitizeHtml(textWithIndex), [textWithIndex]);
|
|
11
|
+
const { formSubmissionModel, elements } = useFormSubmissionModel();
|
|
12
|
+
return React.useMemo(() => {
|
|
13
|
+
return submissionService.replaceElementValues(html, {
|
|
14
|
+
submission: formSubmissionModel,
|
|
15
|
+
formElements: elements,
|
|
16
|
+
formatCurrency: localisationService.formatCurrency,
|
|
17
|
+
formatDate: (v) => {
|
|
18
|
+
const date = generateDate({
|
|
19
|
+
value: v,
|
|
20
|
+
dateOnly: true,
|
|
21
|
+
daysOffset: undefined,
|
|
22
|
+
});
|
|
23
|
+
if (date) {
|
|
24
|
+
return localisationService.formatDate(date);
|
|
25
|
+
}
|
|
26
|
+
return '';
|
|
27
|
+
},
|
|
28
|
+
formatNumber: localisationService.formatNumber,
|
|
29
|
+
formatTime: (v) => localisationService.formatTime(new Date(v)),
|
|
30
|
+
});
|
|
31
|
+
}, [elements, formSubmissionModel, html]);
|
|
32
|
+
}
|
|
33
|
+
//# sourceMappingURL=useReplaceableHTML.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useReplaceableHTML.js","sourceRoot":"","sources":["../../src/hooks/useReplaceableHTML.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAA;AACpD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAA;AAChE,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAA;AACtD,OAAO,sBAAsB,MAAM,iCAAiC,CAAA;AACpE,OAAO,EAAE,yBAAyB,EAAE,MAAM,2CAA2C,CAAA;AACrF,OAAO,YAAY,MAAM,eAAe,CAAA;AAExC,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,IAAY;IACrD,MAAM,aAAa,GAAG,yBAAyB,CAAC,IAAI,CAAC,CAAA;IACrD,MAAM,IAAI,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAA;IAC9E,MAAM,EAAE,mBAAmB,EAAE,QAAQ,EAAE,GAAG,sBAAsB,EAAE,CAAA;IAClE,OAAO,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACxB,OAAO,iBAAiB,CAAC,oBAAoB,CAAC,IAAI,EAAE;YAClD,UAAU,EAAE,mBAAmB;YAC/B,YAAY,EAAE,QAAQ;YACtB,cAAc,EAAE,mBAAmB,CAAC,cAAc;YAClD,UAAU,EAAE,CAAC,CAAC,EAAE,EAAE;gBAChB,MAAM,IAAI,GAAG,YAAY,CAAC;oBACxB,KAAK,EAAE,CAAC;oBACR,QAAQ,EAAE,IAAI;oBACd,UAAU,EAAE,SAAS;iBACtB,CAAC,CAAA;gBACF,IAAI,IAAI,EAAE;oBACR,OAAO,mBAAmB,CAAC,UAAU,CAAC,IAAI,CAAC,CAAA;iBAC5C;gBACD,OAAO,EAAE,CAAA;YACX,CAAC;YACD,YAAY,EAAE,mBAAmB,CAAC,YAAY;YAC9C,UAAU,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,mBAAmB,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC;SAC/D,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,QAAQ,EAAE,mBAAmB,EAAE,IAAI,CAAC,CAAC,CAAA;AAC3C,CAAC","sourcesContent":["import { localisationService } from '@oneblink/apps'\nimport * as React from 'react'\nimport { generateDate } from '../services/generate-default-data'\nimport { submissionService } from '@oneblink/sdk-core'\nimport useFormSubmissionModel from './useFormSubmissionModelContext'\nimport { useRepeatableSetIndexText } from '../form-elements/FormElementRepeatableSet'\nimport sanitizeHtml from 'sanitize-html'\n\nexport default function useReplaceableHTML(text: string) {\n const textWithIndex = useRepeatableSetIndexText(text)\n const html = React.useMemo(() => sanitizeHtml(textWithIndex), [textWithIndex])\n const { formSubmissionModel, elements } = useFormSubmissionModel()\n return React.useMemo(() => {\n return submissionService.replaceElementValues(html, {\n submission: formSubmissionModel,\n formElements: elements,\n formatCurrency: localisationService.formatCurrency,\n formatDate: (v) => {\n const date = generateDate({\n value: v,\n dateOnly: true,\n daysOffset: undefined,\n })\n if (date) {\n return localisationService.formatDate(date)\n }\n return ''\n },\n formatNumber: localisationService.formatNumber,\n formatTime: (v) => localisationService.formatTime(new Date(v)),\n })\n }, [elements, formSubmissionModel, html])\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export default function useSanitizedHTML(text: string): string;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useSanitizedHTML.js","sourceRoot":"","sources":["../../src/hooks/useSanitizedHTML.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,YAAY,MAAM,eAAe,CAAA;AAExC,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,IAAY;IACnD,OAAO,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA;AACxD,CAAC","sourcesContent":["import * as React from 'react'\nimport sanitizeHtml from 'sanitize-html'\n\nexport default function useSanitizedHTML(text: string) {\n return React.useMemo(() => sanitizeHtml(text), [text])\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.14.
|
|
4
|
+
"version": "2.14.1-beta.1",
|
|
5
5
|
"author": "OneBlink <developers@oneblink.io> (https://oneblink.io)",
|
|
6
6
|
"bugs": {
|
|
7
7
|
"url": "https://github.com/oneblink/apps-react/issues"
|
package/dist/hooks/useHint.d.ts
DELETED
package/dist/hooks/useHint.js
DELETED
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import sanitizeHtml from '../services/sanitize-html';
|
|
3
|
-
import { RepeatableSetIndexContext } from '../form-elements/FormElementRepeatableSet';
|
|
4
|
-
import useFormSubmissionModel from './useFormSubmissionModelContext';
|
|
5
|
-
import { submissionService } from '@oneblink/sdk-core';
|
|
6
|
-
import { localisationService } from '@oneblink/apps';
|
|
7
|
-
const useHint = (elementHint) => {
|
|
8
|
-
const { formSubmissionModel, elements } = useFormSubmissionModel();
|
|
9
|
-
const index = React.useContext(RepeatableSetIndexContext);
|
|
10
|
-
return React.useMemo(() => {
|
|
11
|
-
let html = elementHint;
|
|
12
|
-
html = html.replace('{INDEX}', (index + 1).toString());
|
|
13
|
-
html = submissionService.replaceElementValues(html, {
|
|
14
|
-
submission: formSubmissionModel,
|
|
15
|
-
formElements: elements,
|
|
16
|
-
formatCurrency: localisationService.formatCurrency,
|
|
17
|
-
formatDate: (v) => localisationService.formatDate(new Date(v)),
|
|
18
|
-
formatNumber: localisationService.formatNumber,
|
|
19
|
-
formatTime: (v) => localisationService.formatTime(new Date(v)),
|
|
20
|
-
});
|
|
21
|
-
return sanitizeHtml(html);
|
|
22
|
-
}, [elementHint, elements, formSubmissionModel, index]);
|
|
23
|
-
};
|
|
24
|
-
export default useHint;
|
|
25
|
-
//# sourceMappingURL=useHint.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useHint.js","sourceRoot":"","sources":["../../src/hooks/useHint.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,YAAY,MAAM,2BAA2B,CAAA;AACpD,OAAO,EAAE,yBAAyB,EAAE,MAAM,2CAA2C,CAAA;AACrF,OAAO,sBAAsB,MAAM,iCAAiC,CAAA;AACpE,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAA;AACtD,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAA;AAEpD,MAAM,OAAO,GAAG,CAAC,WAAmB,EAAE,EAAE;IACtC,MAAM,EAAE,mBAAmB,EAAE,QAAQ,EAAE,GAAG,sBAAsB,EAAE,CAAA;IAClE,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,yBAAyB,CAAC,CAAA;IACzD,OAAO,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACxB,IAAI,IAAI,GAAG,WAAW,CAAA;QACtB,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAA;QAEtD,IAAI,GAAG,iBAAiB,CAAC,oBAAoB,CAAC,IAAI,EAAE;YAClD,UAAU,EAAE,mBAAmB;YAC/B,YAAY,EAAE,QAAQ;YACtB,cAAc,EAAE,mBAAmB,CAAC,cAAc;YAClD,UAAU,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,mBAAmB,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC;YAC9D,YAAY,EAAE,mBAAmB,CAAC,YAAY;YAC9C,UAAU,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,mBAAmB,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC;SAC/D,CAAC,CAAA;QAEF,OAAO,YAAY,CAAC,IAAI,CAAC,CAAA;IAC3B,CAAC,EAAE,CAAC,WAAW,EAAE,QAAQ,EAAE,mBAAmB,EAAE,KAAK,CAAC,CAAC,CAAA;AACzD,CAAC,CAAA;AAED,eAAe,OAAO,CAAA","sourcesContent":["import * as React from 'react'\nimport sanitizeHtml from '../services/sanitize-html'\nimport { RepeatableSetIndexContext } from '../form-elements/FormElementRepeatableSet'\nimport useFormSubmissionModel from './useFormSubmissionModelContext'\nimport { submissionService } from '@oneblink/sdk-core'\nimport { localisationService } from '@oneblink/apps'\n\nconst useHint = (elementHint: string) => {\n const { formSubmissionModel, elements } = useFormSubmissionModel()\n const index = React.useContext(RepeatableSetIndexContext)\n return React.useMemo(() => {\n let html = elementHint\n html = html.replace('{INDEX}', (index + 1).toString())\n\n html = submissionService.replaceElementValues(html, {\n submission: formSubmissionModel,\n formElements: elements,\n formatCurrency: localisationService.formatCurrency,\n formatDate: (v) => localisationService.formatDate(new Date(v)),\n formatNumber: localisationService.formatNumber,\n formatTime: (v) => localisationService.formatTime(new Date(v)),\n })\n\n return sanitizeHtml(html)\n }, [elementHint, elements, formSubmissionModel, index])\n}\n\nexport default useHint\n"]}
|