@oneblink/apps-react 3.0.0-beta.1 → 3.0.0-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.
- package/dist/components/QuillHTML.js +3 -1
- package/dist/components/QuillHTML.js.map +1 -1
- package/dist/components/renderer/FormElementLabelContainer.js +3 -3
- package/dist/components/renderer/FormElementLabelContainer.js.map +1 -1
- package/dist/form-elements/FormElementCalculation.js +2 -3
- package/dist/form-elements/FormElementCalculation.js.map +1 -1
- package/dist/form-elements/FormElementHTML.js +2 -2
- package/dist/form-elements/FormElementHTML.js.map +1 -1
- package/dist/hooks/useReplaceableText.d.ts +1 -0
- package/dist/hooks/{useReplaceableHTML.js → useReplaceableText.js} +4 -6
- package/dist/hooks/useReplaceableText.js.map +1 -0
- package/package.json +1 -1
- package/dist/hooks/useReplaceableHTML.d.ts +0 -1
- package/dist/hooks/useReplaceableHTML.js.map +0 -1
@@ -1,10 +1,12 @@
|
|
1
1
|
import * as React from 'react';
|
2
2
|
import clsx from 'clsx';
|
3
|
+
import sanitizeHtml from '../services/sanitize-html';
|
3
4
|
export default function QuillHTML({ html, ...props }) {
|
5
|
+
const __html = React.useMemo(() => sanitizeHtml(html), [html]);
|
4
6
|
return (React.createElement("div", { ...props, className: clsx(props.className, 'ql-editor'),
|
5
7
|
// eslint-disable-next-line react/no-danger
|
6
8
|
dangerouslySetInnerHTML: {
|
7
|
-
__html
|
9
|
+
__html,
|
8
10
|
} }));
|
9
11
|
}
|
10
12
|
//# sourceMappingURL=QuillHTML.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"QuillHTML.js","sourceRoot":"","sources":["../../src/components/QuillHTML.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,IAAI,MAAM,MAAM,CAAA;
|
1
|
+
{"version":3,"file":"QuillHTML.js","sourceRoot":"","sources":["../../src/components/QuillHTML.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,YAAY,MAAM,2BAA2B,CAAA;AAEpD,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,IAAI,EACJ,GAAG,KAAK,EAGT;IACC,MAAM,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA;IAC9D,OAAO,CACL,gCACM,KAAK,EACT,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,WAAW,CAAC;QAC7C,2CAA2C;QAC3C,uBAAuB,EAAE;YACvB,MAAM;SACP,GACD,CACH,CAAA;AACH,CAAC","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport sanitizeHtml from '../services/sanitize-html'\n\nexport default function QuillHTML({\n html,\n ...props\n}: React.ComponentProps<'div'> & {\n html: string\n}) {\n const __html = React.useMemo(() => sanitizeHtml(html), [html])\n return (\n <div\n {...props}\n className={clsx(props.className, 'ql-editor')}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{\n __html,\n }}\n />\n )\n}\n"]}
|
@@ -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 useReplaceableText from '../../hooks/useReplaceableText';
|
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 = useReplaceableText(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 = useReplaceableText(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,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
|
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 useReplaceableText from '../../hooks/useReplaceableText'\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 = useReplaceableText(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 = useReplaceableText(hint)\n\n return <QuillHTML html={html} className=\"ob-hint-text\" />\n}\n\nexport default React.memo(FormElementLabelContainer)\n"]}
|
@@ -1,7 +1,6 @@
|
|
1
1
|
import * as React from 'react';
|
2
2
|
import ExpressionParser from 'morph-expressions';
|
3
3
|
import escapeString from 'escape-string-regexp';
|
4
|
-
import sanitizeHtmlStandard from '../services/sanitize-html';
|
5
4
|
import useFormSubmissionModel from '../hooks/useFormSubmissionModelContext';
|
6
5
|
import { Sentry } from '@oneblink/apps';
|
7
6
|
import { localisationService } from '@oneblink/apps';
|
@@ -25,9 +24,9 @@ function FormElementCalculation({ element, onChange, value }) {
|
|
25
24
|
htmlTemplate = element.preCalculationDisplay;
|
26
25
|
}
|
27
26
|
const numberValue = typeof value === 'number' ? value : 0;
|
28
|
-
return
|
27
|
+
return (htmlTemplate || '').replace(/{result}/gi, element.displayAsCurrency
|
29
28
|
? localisationService.formatCurrency(numberValue)
|
30
|
-
: localisationService.formatNumber(numberValue))
|
29
|
+
: localisationService.formatNumber(numberValue));
|
31
30
|
}, [element, value]);
|
32
31
|
const registerProperty = React.useCallback((exprParser, { replacement, nestedElementNames, }) => {
|
33
32
|
exprParser.registerProperty(replacement, (submission) => {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"FormElementCalculation.js","sourceRoot":"","sources":["../../src/form-elements/FormElementCalculation.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport ExpressionParser from 'morph-expressions'\nimport escapeString from 'escape-string-regexp'\nimport sanitizeHtmlStandard from '../services/sanitize-html'\nimport useFormSubmissionModel from '../hooks/useFormSubmissionModelContext'\nimport { FormTypes } from '@oneblink/types'\nimport { Sentry } from '@oneblink/apps'\nimport { localisationService } from '@oneblink/apps'\nimport {\n FormElementValueChangeHandler,\n FormSubmissionModel,\n} from '../types/form'\nimport { formElementsService } from '@oneblink/sdk-core'\nimport QuillHTML from '../components/QuillHTML'\ntype Props = {\n element: FormTypes.CalculationElement\n onChange: FormElementValueChangeHandler<number>\n value: unknown | undefined\n}\n\nconst isUnenteredValue = (value: unknown | undefined) => {\n return !value && value !== 0\n}\n\nconst isObjectWithValue = (obj: unknown): obj is { value: unknown } => {\n return typeof obj === 'object' && obj !== null && 'value' in obj\n}\n\nfunction FormElementCalculation({ element, onChange, value }: Props) {\n const { formSubmissionModel } = useFormSubmissionModel()\n\n const htmlValue = React.useMemo(() => {\n let htmlTemplate\n\n if (!isNaN(value as number)) {\n htmlTemplate = element.defaultValue\n } else {\n console.log(\n '[Calculation] Was not a number... setting pre-calculation display',\n )\n htmlTemplate = element.preCalculationDisplay\n }\n\n const numberValue = typeof value === 'number' ? value : 0\n return sanitizeHtmlStandard(\n (htmlTemplate || '').replace(\n /{result}/gi,\n element.displayAsCurrency\n ? localisationService.formatCurrency(numberValue)\n : localisationService.formatNumber(numberValue),\n ),\n )\n }, [element, value])\n\n const registerProperty = React.useCallback(\n (\n exprParser: typeof ExpressionParser,\n {\n replacement,\n nestedElementNames,\n }: {\n replacement: string\n nestedElementNames: string[]\n },\n ) => {\n exprParser.registerProperty(\n replacement,\n (submission: FormSubmissionModel) => {\n const defaultAccumulator = submission[nestedElementNames[0]]\n\n return nestedElementNames.reduce(\n (\n elementValue: unknown | undefined,\n elementName: string,\n index: number,\n ) => {\n // Numbers can just be returned as is\n if (typeof elementValue === 'number') {\n return elementValue\n }\n\n // attempt to get a number from the element value as a string.\n // NaN is accounted for is the calculation\n // so we can return that from here\n if (typeof elementValue === 'string') {\n return parseFloat(elementValue)\n }\n\n if (Array.isArray(elementValue)) {\n // If there are no entries, we can return null\n // to prevent the calculation from running.\n if (!elementValue.length) {\n return NaN\n }\n\n // An array could be an element that allows multiple\n // values e.g. checkboxes. If thats that case, we just\n // add them all together and move on\n const elementValues = elementValue.map((entry) =>\n parseFloat(entry),\n )\n if (elementValues.every((entry) => !Number.isNaN(entry))) {\n return elementValues.reduce(\n (number, entry) => number + entry,\n 0,\n )\n }\n\n // Other wise attempt to process it as a repeatable set\n // If we found another repeatable set to process,\n // pass it to the next element name to\n // iterate over the entries\n\n // If we are processing the entries in a repeatable set,\n // we can sum the numbers elements in the entries\n const nextElementName = nestedElementNames[index + 1]\n\n let isNestedRepeatableSet = false\n const nestedElementValues = elementValue.reduce(\n (nestedElementValues, entry) => {\n if (entry) {\n const nextElementValue = entry[nextElementName]\n if (Array.isArray(nextElementValue)) {\n if (nextElementValue.length) {\n nestedElementValues.push(...nextElementValue)\n isNestedRepeatableSet = true\n }\n } else {\n nestedElementValues.push(nextElementValue)\n }\n }\n return nestedElementValues\n },\n [],\n )\n\n // If the nested element values are all arrays, we can pass them on to the next iteration\n if (isNestedRepeatableSet) {\n return nestedElementValues\n }\n\n return nestedElementValues.reduce(\n (total: number, nestedElementValue: unknown | undefined) => {\n if (Number.isNaN(total)) {\n return NaN\n }\n const value = parseFloat(nestedElementValue as string)\n if (Number.isNaN(value)) {\n return NaN\n }\n return total + value\n },\n 0,\n )\n }\n\n // \"compliance\" form element has an object value with a \"value\" property.\n if (\n isObjectWithValue(elementValue) &&\n typeof elementValue.value === 'string'\n ) {\n return parseFloat(elementValue.value)\n }\n\n // We did not find a number value from the known elements,\n // we will assume we are at the end of the line.\n return NaN\n },\n defaultAccumulator,\n )\n },\n )\n },\n [],\n )\n\n const { calculation, hasError } = React.useMemo(() => {\n const exprParser = new ExpressionParser()\n exprParser.registerFunction('ROUND', (value: number, precision: number) => {\n if (!Number.isNaN(value) && Number.isFinite(value)) {\n return parseFloat(value.toFixed(precision))\n }\n return null\n })\n exprParser.registerFunction(\n 'ISNULL',\n (value: unknown | undefined, defaultValue: number) => {\n if (isUnenteredValue(value)) {\n return defaultValue || 0\n }\n return value\n },\n )\n\n try {\n if (!element.calculation) throw new Error('Element has no calculation.')\n const elementNames: string[] = []\n formElementsService.matchElementsTagRegex(\n element.calculation,\n ({ elementName }) => {\n elementNames.push(elementName)\n },\n )\n\n const code = elementNames.reduce((code, elementName, index) => {\n const regex = new RegExp(escapeString(`{ELEMENT:${elementName}}`), 'g')\n const replacement = `a${index}`\n registerProperty(exprParser, {\n replacement,\n nestedElementNames: elementName.split('|'),\n })\n return code.replace(regex, replacement)\n }, element.calculation || '')\n\n return {\n calculation: exprParser.parse(code.trim()),\n hasError: false,\n }\n } catch (e) {\n console.warn(\n 'Error while setting up parsing for calculation element',\n element,\n e,\n )\n Sentry.captureException(e)\n return {\n calculation: null,\n hasError: true,\n }\n }\n }, [element, registerProperty])\n\n // MODEL LISTENER\n React.useEffect(() => {\n if (!calculation) return\n const newValue = calculation.eval(formSubmissionModel)\n if (value === newValue || (value === undefined && isNaN(newValue))) {\n return\n }\n if (!isNaN(newValue)) {\n onChange(element, newValue)\n } else {\n onChange(element, undefined)\n }\n }, [calculation, element, formSubmissionModel, onChange, value])\n\n return (\n <div className=\"cypress-calculation-element\">\n <div className=\"ob-form__element ob-calculation\">\n <QuillHTML\n html={htmlValue}\n className=\"cypress-calculation-result ob-calculation__content\"\n />\n {hasError && (\n <div\n className=\"notification cypress-calculation-is-invalid\"\n role=\"alert\"\n >\n <div className=\"columns is-vcentered\">\n <div className=\"column is-narrow\">\n <i className=\"material-icons has-text-warning\">error</i>\n </div>\n <div className=\"column\">\n <p>There is an error in the calculation for this element.</p>\n </div>\n </div>\n </div>\n )}\n </div>\n </div>\n )\n}\n\nexport default React.memo(FormElementCalculation)\n"]}
|
1
|
+
{"version":3,"file":"FormElementCalculation.js","sourceRoot":"","sources":["../../src/form-elements/FormElementCalculation.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport ExpressionParser from 'morph-expressions'\nimport escapeString from 'escape-string-regexp'\nimport useFormSubmissionModel from '../hooks/useFormSubmissionModelContext'\nimport { FormTypes } from '@oneblink/types'\nimport { Sentry } from '@oneblink/apps'\nimport { localisationService } from '@oneblink/apps'\nimport {\n FormElementValueChangeHandler,\n FormSubmissionModel,\n} from '../types/form'\nimport { formElementsService } from '@oneblink/sdk-core'\nimport QuillHTML from '../components/QuillHTML'\ntype Props = {\n element: FormTypes.CalculationElement\n onChange: FormElementValueChangeHandler<number>\n value: unknown | undefined\n}\n\nconst isUnenteredValue = (value: unknown | undefined) => {\n return !value && value !== 0\n}\n\nconst isObjectWithValue = (obj: unknown): obj is { value: unknown } => {\n return typeof obj === 'object' && obj !== null && 'value' in obj\n}\n\nfunction FormElementCalculation({ element, onChange, value }: Props) {\n const { formSubmissionModel } = useFormSubmissionModel()\n\n const htmlValue = React.useMemo(() => {\n let htmlTemplate\n\n if (!isNaN(value as number)) {\n htmlTemplate = element.defaultValue\n } else {\n console.log(\n '[Calculation] Was not a number... setting pre-calculation display',\n )\n htmlTemplate = element.preCalculationDisplay\n }\n\n const numberValue = typeof value === 'number' ? value : 0\n return (htmlTemplate || '').replace(\n /{result}/gi,\n element.displayAsCurrency\n ? localisationService.formatCurrency(numberValue)\n : localisationService.formatNumber(numberValue),\n )\n }, [element, value])\n\n const registerProperty = React.useCallback(\n (\n exprParser: typeof ExpressionParser,\n {\n replacement,\n nestedElementNames,\n }: {\n replacement: string\n nestedElementNames: string[]\n },\n ) => {\n exprParser.registerProperty(\n replacement,\n (submission: FormSubmissionModel) => {\n const defaultAccumulator = submission[nestedElementNames[0]]\n\n return nestedElementNames.reduce(\n (\n elementValue: unknown | undefined,\n elementName: string,\n index: number,\n ) => {\n // Numbers can just be returned as is\n if (typeof elementValue === 'number') {\n return elementValue\n }\n\n // attempt to get a number from the element value as a string.\n // NaN is accounted for is the calculation\n // so we can return that from here\n if (typeof elementValue === 'string') {\n return parseFloat(elementValue)\n }\n\n if (Array.isArray(elementValue)) {\n // If there are no entries, we can return null\n // to prevent the calculation from running.\n if (!elementValue.length) {\n return NaN\n }\n\n // An array could be an element that allows multiple\n // values e.g. checkboxes. If thats that case, we just\n // add them all together and move on\n const elementValues = elementValue.map((entry) =>\n parseFloat(entry),\n )\n if (elementValues.every((entry) => !Number.isNaN(entry))) {\n return elementValues.reduce(\n (number, entry) => number + entry,\n 0,\n )\n }\n\n // Other wise attempt to process it as a repeatable set\n // If we found another repeatable set to process,\n // pass it to the next element name to\n // iterate over the entries\n\n // If we are processing the entries in a repeatable set,\n // we can sum the numbers elements in the entries\n const nextElementName = nestedElementNames[index + 1]\n\n let isNestedRepeatableSet = false\n const nestedElementValues = elementValue.reduce(\n (nestedElementValues, entry) => {\n if (entry) {\n const nextElementValue = entry[nextElementName]\n if (Array.isArray(nextElementValue)) {\n if (nextElementValue.length) {\n nestedElementValues.push(...nextElementValue)\n isNestedRepeatableSet = true\n }\n } else {\n nestedElementValues.push(nextElementValue)\n }\n }\n return nestedElementValues\n },\n [],\n )\n\n // If the nested element values are all arrays, we can pass them on to the next iteration\n if (isNestedRepeatableSet) {\n return nestedElementValues\n }\n\n return nestedElementValues.reduce(\n (total: number, nestedElementValue: unknown | undefined) => {\n if (Number.isNaN(total)) {\n return NaN\n }\n const value = parseFloat(nestedElementValue as string)\n if (Number.isNaN(value)) {\n return NaN\n }\n return total + value\n },\n 0,\n )\n }\n\n // \"compliance\" form element has an object value with a \"value\" property.\n if (\n isObjectWithValue(elementValue) &&\n typeof elementValue.value === 'string'\n ) {\n return parseFloat(elementValue.value)\n }\n\n // We did not find a number value from the known elements,\n // we will assume we are at the end of the line.\n return NaN\n },\n defaultAccumulator,\n )\n },\n )\n },\n [],\n )\n\n const { calculation, hasError } = React.useMemo(() => {\n const exprParser = new ExpressionParser()\n exprParser.registerFunction('ROUND', (value: number, precision: number) => {\n if (!Number.isNaN(value) && Number.isFinite(value)) {\n return parseFloat(value.toFixed(precision))\n }\n return null\n })\n exprParser.registerFunction(\n 'ISNULL',\n (value: unknown | undefined, defaultValue: number) => {\n if (isUnenteredValue(value)) {\n return defaultValue || 0\n }\n return value\n },\n )\n\n try {\n if (!element.calculation) throw new Error('Element has no calculation.')\n const elementNames: string[] = []\n formElementsService.matchElementsTagRegex(\n element.calculation,\n ({ elementName }) => {\n elementNames.push(elementName)\n },\n )\n\n const code = elementNames.reduce((code, elementName, index) => {\n const regex = new RegExp(escapeString(`{ELEMENT:${elementName}}`), 'g')\n const replacement = `a${index}`\n registerProperty(exprParser, {\n replacement,\n nestedElementNames: elementName.split('|'),\n })\n return code.replace(regex, replacement)\n }, element.calculation || '')\n\n return {\n calculation: exprParser.parse(code.trim()),\n hasError: false,\n }\n } catch (e) {\n console.warn(\n 'Error while setting up parsing for calculation element',\n element,\n e,\n )\n Sentry.captureException(e)\n return {\n calculation: null,\n hasError: true,\n }\n }\n }, [element, registerProperty])\n\n // MODEL LISTENER\n React.useEffect(() => {\n if (!calculation) return\n const newValue = calculation.eval(formSubmissionModel)\n if (value === newValue || (value === undefined && isNaN(newValue))) {\n return\n }\n if (!isNaN(newValue)) {\n onChange(element, newValue)\n } else {\n onChange(element, undefined)\n }\n }, [calculation, element, formSubmissionModel, onChange, value])\n\n return (\n <div className=\"cypress-calculation-element\">\n <div className=\"ob-form__element ob-calculation\">\n <QuillHTML\n html={htmlValue}\n className=\"cypress-calculation-result ob-calculation__content\"\n />\n {hasError && (\n <div\n className=\"notification cypress-calculation-is-invalid\"\n role=\"alert\"\n >\n <div className=\"columns is-vcentered\">\n <div className=\"column is-narrow\">\n <i className=\"material-icons has-text-warning\">error</i>\n </div>\n <div className=\"column\">\n <p>There is an error in the calculation for this element.</p>\n </div>\n </div>\n </div>\n )}\n </div>\n </div>\n )\n}\n\nexport default React.memo(FormElementCalculation)\n"]}
|
@@ -1,8 +1,8 @@
|
|
1
1
|
import * as React from 'react';
|
2
|
-
import
|
2
|
+
import useReplaceableText from '../hooks/useReplaceableText';
|
3
3
|
import QuillHTML from '../components/QuillHTML';
|
4
4
|
function FormElementHTML({ element }) {
|
5
|
-
const html =
|
5
|
+
const html = useReplaceableText(element.defaultValue);
|
6
6
|
return (React.createElement("div", { className: "cypress-html-element" },
|
7
7
|
React.createElement("div", { className: "ob-form__element ob-information cypress-html-element" },
|
8
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;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
|
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 useReplaceableText from '../hooks/useReplaceableText'\nimport QuillHTML from '../components/QuillHTML'\n\ntype Props = {\n element: FormTypes.HtmlElement\n}\n\nfunction FormElementHTML({ element }: Props) {\n const html = useReplaceableText(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"]}
|
@@ -0,0 +1 @@
|
|
1
|
+
export default function useReplaceableText(text: string): string;
|
@@ -2,16 +2,14 @@ import { localisationService } from '@oneblink/apps';
|
|
2
2
|
import * as React from 'react';
|
3
3
|
import useFormSubmissionModel from './useFormSubmissionModelContext';
|
4
4
|
import { useRepeatableSetIndexText } from '../form-elements/FormElementRepeatableSet';
|
5
|
-
|
6
|
-
export default function useReplaceableHTML(text) {
|
5
|
+
export default function useReplaceableText(text) {
|
7
6
|
const textWithIndex = useRepeatableSetIndexText(text);
|
8
|
-
const html = React.useMemo(() => sanitizeHtml(textWithIndex), [textWithIndex]);
|
9
7
|
const { formSubmissionModel, elements } = useFormSubmissionModel();
|
10
8
|
return React.useMemo(() => {
|
11
|
-
return localisationService.replaceInjectablesWithElementValues(
|
9
|
+
return localisationService.replaceInjectablesWithElementValues(textWithIndex, {
|
12
10
|
submission: formSubmissionModel,
|
13
11
|
formElements: elements,
|
14
12
|
});
|
15
|
-
}, [elements, formSubmissionModel,
|
13
|
+
}, [elements, formSubmissionModel, textWithIndex]);
|
16
14
|
}
|
17
|
-
//# sourceMappingURL=
|
15
|
+
//# sourceMappingURL=useReplaceableText.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"useReplaceableText.js","sourceRoot":"","sources":["../../src/hooks/useReplaceableText.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAA;AACpD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,sBAAsB,MAAM,iCAAiC,CAAA;AACpE,OAAO,EAAE,yBAAyB,EAAE,MAAM,2CAA2C,CAAA;AAErF,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,IAAY;IACrD,MAAM,aAAa,GAAG,yBAAyB,CAAC,IAAI,CAAC,CAAA;IACrD,MAAM,EAAE,mBAAmB,EAAE,QAAQ,EAAE,GAAG,sBAAsB,EAAE,CAAA;IAClE,OAAO,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACxB,OAAO,mBAAmB,CAAC,mCAAmC,CAC5D,aAAa,EACb;YACE,UAAU,EAAE,mBAAmB;YAC/B,YAAY,EAAE,QAAQ;SACvB,CACF,CAAA;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,mBAAmB,EAAE,aAAa,CAAC,CAAC,CAAA;AACpD,CAAC","sourcesContent":["import { localisationService } from '@oneblink/apps'\nimport * as React from 'react'\nimport useFormSubmissionModel from './useFormSubmissionModelContext'\nimport { useRepeatableSetIndexText } from '../form-elements/FormElementRepeatableSet'\n\nexport default function useReplaceableText(text: string) {\n const textWithIndex = useRepeatableSetIndexText(text)\n const { formSubmissionModel, elements } = useFormSubmissionModel()\n return React.useMemo(() => {\n return localisationService.replaceInjectablesWithElementValues(\n textWithIndex,\n {\n submission: formSubmissionModel,\n formElements: elements,\n },\n )\n }, [elements, formSubmissionModel, textWithIndex])\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": "3.0.0-beta.
|
4
|
+
"version": "3.0.0-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"
|
@@ -1 +0,0 @@
|
|
1
|
-
export default function useReplaceableHTML(text: string): string;
|
@@ -1 +0,0 @@
|
|
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,sBAAsB,MAAM,iCAAiC,CAAA;AACpE,OAAO,EAAE,yBAAyB,EAAE,MAAM,2CAA2C,CAAA;AACrF,OAAO,YAAY,MAAM,2BAA2B,CAAA;AAEpD,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,mBAAmB,CAAC,mCAAmC,CAAC,IAAI,EAAE;YACnE,UAAU,EAAE,mBAAmB;YAC/B,YAAY,EAAE,QAAQ;SACvB,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 useFormSubmissionModel from './useFormSubmissionModelContext'\nimport { useRepeatableSetIndexText } from '../form-elements/FormElementRepeatableSet'\nimport sanitizeHtml from '../services/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 localisationService.replaceInjectablesWithElementValues(html, {\n submission: formSubmissionModel,\n formElements: elements,\n })\n }, [elements, formSubmissionModel, html])\n}\n"]}
|