@oneblink/apps-react 6.11.0-beta.1 → 6.11.0-beta.10
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/OneBlinkFormBase.js +4 -3
- package/dist/OneBlinkFormBase.js.map +1 -1
- package/dist/components/renderer/LookupButton.js +1 -1
- package/dist/components/renderer/LookupButton.js.map +1 -1
- package/dist/components/renderer/attachments/FileCard.js +1 -1
- package/dist/components/renderer/attachments/FileCard.js.map +1 -1
- package/dist/form-elements/FormElementCaptcha.d.ts +1 -1
- package/dist/form-elements/FormElementCaptcha.js +9 -5
- package/dist/form-elements/FormElementCaptcha.js.map +1 -1
- package/dist/form-elements/FormElementFiles.js +1 -1
- package/dist/form-elements/FormElementFiles.js.map +1 -1
- package/dist/form-elements/FormElementSection.js +1 -1
- package/dist/form-elements/FormElementSection.js.map +1 -1
- package/dist/form-elements/OptionButton.js +10 -2
- package/dist/form-elements/OptionButton.js.map +1 -1
- package/dist/hooks/useFormValidation.d.ts +1 -1
- package/dist/hooks/useFormValidation.js +10 -6
- package/dist/hooks/useFormValidation.js.map +1 -1
- package/dist/hooks/usePages.js +1 -1
- package/dist/hooks/usePages.js.map +1 -1
- package/dist/services/form-validation/extensions.d.ts +28 -0
- package/dist/services/form-validation/extensions.js +97 -0
- package/dist/services/form-validation/extensions.js.map +1 -0
- package/dist/services/form-validation/validate-dot-js.d.ts +63 -0
- package/dist/services/form-validation/validate-dot-js.js +328 -0
- package/dist/services/form-validation/validate-dot-js.js.map +1 -0
- package/dist/services/form-validation/validateSubmission.d.ts +11 -0
- package/dist/services/form-validation/validateSubmission.js +503 -0
- package/dist/services/form-validation/validateSubmission.js.map +1 -0
- package/dist/services/form-validation/validators.d.ts +13 -0
- package/dist/services/form-validation/validators.js +70 -0
- package/dist/services/form-validation/validators.js.map +1 -0
- package/dist/services/generateCivicaNameRecordElements.d.ts +1 -1
- package/dist/services/generateCivicaNameRecordElements.js.map +1 -1
- package/dist/styles/option-buttons.scss +5 -0
- package/dist/styles.css +6 -0
- package/dist/styles.scss +1 -0
- package/package.json +3 -3
- package/dist/services/form-validation.d.ts +0 -10
- package/dist/services/form-validation.js +0 -604
- package/dist/services/form-validation.js.map +0 -1
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"FormElementFiles.js","sourceRoot":"","sources":["../../src/form-elements/FormElementFiles.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,yBAAyB,MAAM,kDAAkD,CAAA;AACxF,OAAO,eAAe,MAAM,mBAAmB,CAAA;AAC/C,OAAO,cAAc,MAAM,qCAAqC,CAAA;AAChE,OAAO,EACL,oBAAoB,EACpB,6BAA6B,GAC9B,MAAM,
|
1
|
+
{"version":3,"file":"FormElementFiles.js","sourceRoot":"","sources":["../../src/form-elements/FormElementFiles.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport FormElementFile from './FormElementFile'\nimport useAttachments from '../hooks/attachments/useAttachments'\nimport {\n checkFileNameIsValid,\n checkFileNameExtensionIsValid,\n} from '../services/form-validation/validators'\nimport { attachmentsService } from '@oneblink/apps'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport MaterialIcon from '../components/MaterialIcon'\n\nexport function stringifyAttachments(\n value: attachmentsService.Attachment[] | undefined,\n): string {\n if (value?.every((attachment) => !attachment.type)) {\n return JSON.stringify(value)\n }\n return ''\n}\n\nfunction FormElementFiles({\n id,\n element,\n value,\n onChange,\n validationMessage,\n displayValidationMessage,\n isDirty,\n setIsDirty,\n}: {\n id: string\n element: FormTypes.FilesElement\n value?: attachmentsService.Attachment[]\n onChange: FormElementValueChangeHandler<attachmentsService.Attachment[]>\n displayValidationMessage: boolean\n validationMessage: string | undefined\n} & IsDirtyProps) {\n const ariaDescribedby = useElementAriaDescribedby(id, element)\n const { addAttachments, removeAttachment, changeAttachment } = useAttachments(\n element,\n onChange,\n setIsDirty,\n )\n\n const inputRef = React.useRef<HTMLInputElement>(null)\n\n const handleAdd = React.useCallback(() => {\n if (!inputRef.current) return\n // RESET HTML FILE INPUT VALUE SO FILES PREVIOUSLY ADDED AND REMOVED ARE RECOGNISED\n inputRef.current.value = ''\n inputRef.current.click()\n }, [])\n\n const attachments = value || []\n\n const { isLookingUp } = React.useContext(LookupNotificationContext)\n const isDisplayingValidationMessage =\n (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp\n\n return (\n <div className=\"cypress-files-element\">\n <FormElementLabelContainer\n className=\"ob-files\"\n element={element}\n id={id}\n required={!!element.minEntries}\n >\n <input\n ref={inputRef}\n type=\"file\"\n name={element.name}\n id={id}\n className=\"file-input ob-input\"\n multiple={element.maxEntries !== 1}\n disabled={element.readOnly}\n onChange={(event) =>\n addAttachments(\n event.target.files ? Array.from(event.target.files) : [],\n )\n }\n />\n <div className=\"control cypress-files-control\">\n <div className=\"columns is-multiline ob-columns-container\">\n {attachments.map((attachment, index) => {\n return (\n <FormElementFile\n key={attachment.type ? attachment._id : attachment.id}\n element={element}\n onRemove={removeAttachment}\n file={attachment}\n onChange={changeAttachment}\n disableUpload={\n (!!element.maxEntries &&\n attachments.length > element.maxEntries) ||\n !checkFileNameIsValid(element, attachment.fileName) ||\n !checkFileNameExtensionIsValid(element, attachment.fileName)\n }\n index={index}\n />\n )\n })}\n {!element.readOnly &&\n (!element.maxEntries ||\n attachments.length < element.maxEntries) && (\n <div className=\"column is-one-quarter-ob\">\n <button\n type=\"button\"\n className=\"button ob-files__add-new-button\"\n onClick={handleAdd}\n aria-describedby={ariaDescribedby}\n onBlur={setIsDirty}\n >\n <MaterialIcon className=\"icon-x-large\">add</MaterialIcon>\n </button>\n </div>\n )}\n </div>\n </div>\n\n {isDisplayingValidationMessage && (\n <div role=\"alert\" className=\"has-margin-top-8\">\n <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n {validationMessage}\n </div>\n </div>\n )}\n </FormElementLabelContainer>\n </div>\n )\n}\n\nexport default React.memo(FormElementFiles)\n"]}
|
@@ -4,7 +4,7 @@ import { Collapse } from '@mui/material';
|
|
4
4
|
import Tooltip from '../components/renderer/Tooltip';
|
5
5
|
import useBooleanState from '../hooks/useBooleanState';
|
6
6
|
import OneBlinkFormElements from '../components/renderer/OneBlinkFormElements';
|
7
|
-
import { checkSectionValidity } from '../services/form-validation';
|
7
|
+
import { checkSectionValidity } from '../services/form-validation/validators';
|
8
8
|
import { HintBelowLabel, HintTooltip, } from '../components/renderer/FormElementLabelContainer';
|
9
9
|
import useValidationClass from '../hooks/useValidationClass';
|
10
10
|
import MaterialIcon from '../components/MaterialIcon';
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"FormElementSection.js","sourceRoot":"","sources":["../../src/form-elements/FormElementSection.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport { Collapse } from '@mui/material'\nimport Tooltip from '../components/renderer/Tooltip'\nimport { FormTypes } from '@oneblink/types'\nimport useBooleanState from '../hooks/useBooleanState'\nimport OneBlinkFormElements, {\n Props,\n} from '../components/renderer/OneBlinkFormElements'\nimport { checkSectionValidity } from '../services/form-validation'\nimport {\n FormElementLookupHandler,\n UpdateFormElementsHandler,\n ExecutedLookups,\n} from '../types/form'\nimport {\n HintBelowLabel,\n HintTooltip,\n} from '../components/renderer/FormElementLabelContainer'\nimport useValidationClass from '../hooks/useValidationClass'\nimport MaterialIcon from '../components/MaterialIcon'\n\nfunction FormElementSection<T extends FormTypes._NestedElementsElement>({\n element,\n onLookup,\n displayValidationMessages,\n onUpdateFormElements,\n sectionHeaderId,\n ...props\n}: Omit<Props<T>, 'elements'> & {\n element: FormTypes.SectionElement\n sectionHeaderId: string\n}) {\n const [isCollapsed, , , toggle] = useBooleanState(element.isCollapsed)\n const [isDisplayingError, setIsDisplayingError] = React.useState(isCollapsed)\n const headerRef = React.useRef<HTMLDivElement>(null)\n const id = `${props['idPrefix']}${element.id}`\n\n React.useEffect(() => {\n if (isCollapsed && !isDisplayingError) {\n setIsDisplayingError(true)\n }\n }, [isCollapsed, isDisplayingError])\n\n const displayValidationMessage =\n displayValidationMessages || isDisplayingError\n\n const isValid = React.useMemo(\n () => !checkSectionValidity(element, props.formElementsValidation),\n [element, props.formElementsValidation],\n )\n\n const { validationClassName, valid } = useValidationClass({\n formElementsValid: isValid,\n displayInvalidClassName: displayValidationMessage,\n validClassName: 'ob-section__valid',\n invalidClassName: 'ob-section__invalid',\n })\n\n const handleLookup = React.useCallback<FormElementLookupHandler>(\n (mergeLookupResults) => {\n onLookup((currentFormSubmission) => {\n let model = currentFormSubmission.submission\n let newExecutedLookups: ExecutedLookups = {}\n const elements = currentFormSubmission.elements.map((formElement) => {\n if (formElement.type === 'section' && formElement.id === element.id) {\n const { elements, submission, executedLookups } =\n mergeLookupResults({\n elements: formElement.elements,\n submission: currentFormSubmission.submission,\n lastElementUpdated: currentFormSubmission.lastElementUpdated,\n executedLookups: currentFormSubmission.executedLookups,\n })\n model = submission\n newExecutedLookups = executedLookups\n return {\n ...formElement,\n elements,\n }\n }\n return formElement\n })\n\n return {\n elements,\n submission: model,\n lastElementUpdated: currentFormSubmission.lastElementUpdated,\n executedLookups: newExecutedLookups,\n }\n })\n },\n [element.id, onLookup],\n )\n\n const handleUpdateNestedFormElements =\n React.useCallback<UpdateFormElementsHandler>(\n (setter) => {\n onUpdateFormElements((formElements) => {\n return formElements.map((formElement) => {\n if (\n formElement.id === element.id &&\n formElement.type === 'section'\n ) {\n return {\n ...formElement,\n elements: setter(formElement.elements),\n }\n }\n return formElement\n })\n })\n },\n [element.id, onUpdateFormElements],\n )\n\n const handleClickBottomCollapseButton = React.useCallback(() => {\n toggle()\n headerRef.current?.scrollIntoView({\n behavior: 'smooth',\n block: 'center',\n inline: 'nearest',\n })\n }, [toggle])\n\n return (\n <div className={clsx('ob-section', validationClassName)}>\n <div\n className={clsx('ob-section__header cypress-section-header', {\n 'ob-section__header-filled': element.canCollapseFromBottom,\n })}\n onClick={toggle}\n tabIndex={0}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n toggle()\n }\n }}\n ref={headerRef}\n >\n <h3 className=\"ob-section__header-text title is-3\" id={sectionHeaderId}>\n {element.label}\n {element.hint &&\n (element.hintPosition === 'TOOLTIP' || !element.hintPosition) && (\n <HintTooltip hint={element.hint} inputId={id} />\n )}\n </h3>\n <div className=\"ob-section__header-icon-container\">\n {!valid && displayValidationMessage && (\n <Tooltip title=\"Section has errors\">\n <MaterialIcon className=\"has-text-danger cypress-section-invalid-icon section-invalid-icon fade-in\">\n warning\n </MaterialIcon>\n </Tooltip>\n )}\n <MaterialIcon\n className={clsx('ob-section__header-icon', {\n 'is-rotated': !isCollapsed,\n })}\n >\n expand_more\n </MaterialIcon>\n </div>\n {element.hint && element.hintPosition === 'BELOW_LABEL' && (\n <div className=\"ob-section__hint-text-container\">\n <HintBelowLabel hint={element.hint} inputId={id} />\n </div>\n )}\n </div>\n {!element.canCollapseFromBottom && <hr className=\"ob-section__divider\" />}\n <Collapse\n in={!isCollapsed}\n classes={{\n root: 'ob-section__content',\n entered: 'ob-section__expanded',\n hidden: 'ob-section__collapsed',\n }}\n >\n <SectionElementsWrapper\n element={element}\n onCollapse={handleClickBottomCollapseButton}\n >\n <OneBlinkFormElements\n {...props}\n displayValidationMessages={displayValidationMessage}\n onLookup={handleLookup}\n elements={element.elements}\n onUpdateFormElements={handleUpdateNestedFormElements}\n />\n </SectionElementsWrapper>\n </Collapse>\n </div>\n )\n}\n\nexport default React.memo(FormElementSection)\n\nconst SectionElementsWrapper = ({\n children,\n element,\n onCollapse,\n}: {\n children: React.ReactNode\n element: FormTypes.SectionElement\n onCollapse: () => void\n}) => {\n return element.canCollapseFromBottom ? (\n <div className=\"ob-section__collapsible-content-container\">\n {children}\n\n <button\n type=\"button\"\n className=\"button is-rounded is-light ob-section__bottom-collapse-button\"\n onClick={onCollapse}\n >\n <span className=\"icon\">\n <MaterialIcon>expand_less</MaterialIcon>\n </span>\n <span>Collapse</span>\n </button>\n </div>\n ) : (\n <>{children}</>\n )\n}\n"]}
|
1
|
+
{"version":3,"file":"FormElementSection.js","sourceRoot":"","sources":["../../src/form-elements/FormElementSection.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport { Collapse } from '@mui/material'\nimport Tooltip from '../components/renderer/Tooltip'\nimport { FormTypes } from '@oneblink/types'\nimport useBooleanState from '../hooks/useBooleanState'\nimport OneBlinkFormElements, {\n Props,\n} from '../components/renderer/OneBlinkFormElements'\nimport { checkSectionValidity } from '../services/form-validation/validators'\nimport {\n FormElementLookupHandler,\n UpdateFormElementsHandler,\n ExecutedLookups,\n} from '../types/form'\nimport {\n HintBelowLabel,\n HintTooltip,\n} from '../components/renderer/FormElementLabelContainer'\nimport useValidationClass from '../hooks/useValidationClass'\nimport MaterialIcon from '../components/MaterialIcon'\n\nfunction FormElementSection<T extends FormTypes._NestedElementsElement>({\n element,\n onLookup,\n displayValidationMessages,\n onUpdateFormElements,\n sectionHeaderId,\n ...props\n}: Omit<Props<T>, 'elements'> & {\n element: FormTypes.SectionElement\n sectionHeaderId: string\n}) {\n const [isCollapsed, , , toggle] = useBooleanState(element.isCollapsed)\n const [isDisplayingError, setIsDisplayingError] = React.useState(isCollapsed)\n const headerRef = React.useRef<HTMLDivElement>(null)\n const id = `${props['idPrefix']}${element.id}`\n\n React.useEffect(() => {\n if (isCollapsed && !isDisplayingError) {\n setIsDisplayingError(true)\n }\n }, [isCollapsed, isDisplayingError])\n\n const displayValidationMessage =\n displayValidationMessages || isDisplayingError\n\n const isValid = React.useMemo(\n () => !checkSectionValidity(element, props.formElementsValidation),\n [element, props.formElementsValidation],\n )\n\n const { validationClassName, valid } = useValidationClass({\n formElementsValid: isValid,\n displayInvalidClassName: displayValidationMessage,\n validClassName: 'ob-section__valid',\n invalidClassName: 'ob-section__invalid',\n })\n\n const handleLookup = React.useCallback<FormElementLookupHandler>(\n (mergeLookupResults) => {\n onLookup((currentFormSubmission) => {\n let model = currentFormSubmission.submission\n let newExecutedLookups: ExecutedLookups = {}\n const elements = currentFormSubmission.elements.map((formElement) => {\n if (formElement.type === 'section' && formElement.id === element.id) {\n const { elements, submission, executedLookups } =\n mergeLookupResults({\n elements: formElement.elements,\n submission: currentFormSubmission.submission,\n lastElementUpdated: currentFormSubmission.lastElementUpdated,\n executedLookups: currentFormSubmission.executedLookups,\n })\n model = submission\n newExecutedLookups = executedLookups\n return {\n ...formElement,\n elements,\n }\n }\n return formElement\n })\n\n return {\n elements,\n submission: model,\n lastElementUpdated: currentFormSubmission.lastElementUpdated,\n executedLookups: newExecutedLookups,\n }\n })\n },\n [element.id, onLookup],\n )\n\n const handleUpdateNestedFormElements =\n React.useCallback<UpdateFormElementsHandler>(\n (setter) => {\n onUpdateFormElements((formElements) => {\n return formElements.map((formElement) => {\n if (\n formElement.id === element.id &&\n formElement.type === 'section'\n ) {\n return {\n ...formElement,\n elements: setter(formElement.elements),\n }\n }\n return formElement\n })\n })\n },\n [element.id, onUpdateFormElements],\n )\n\n const handleClickBottomCollapseButton = React.useCallback(() => {\n toggle()\n headerRef.current?.scrollIntoView({\n behavior: 'smooth',\n block: 'center',\n inline: 'nearest',\n })\n }, [toggle])\n\n return (\n <div className={clsx('ob-section', validationClassName)}>\n <div\n className={clsx('ob-section__header cypress-section-header', {\n 'ob-section__header-filled': element.canCollapseFromBottom,\n })}\n onClick={toggle}\n tabIndex={0}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n toggle()\n }\n }}\n ref={headerRef}\n >\n <h3 className=\"ob-section__header-text title is-3\" id={sectionHeaderId}>\n {element.label}\n {element.hint &&\n (element.hintPosition === 'TOOLTIP' || !element.hintPosition) && (\n <HintTooltip hint={element.hint} inputId={id} />\n )}\n </h3>\n <div className=\"ob-section__header-icon-container\">\n {!valid && displayValidationMessage && (\n <Tooltip title=\"Section has errors\">\n <MaterialIcon className=\"has-text-danger cypress-section-invalid-icon section-invalid-icon fade-in\">\n warning\n </MaterialIcon>\n </Tooltip>\n )}\n <MaterialIcon\n className={clsx('ob-section__header-icon', {\n 'is-rotated': !isCollapsed,\n })}\n >\n expand_more\n </MaterialIcon>\n </div>\n {element.hint && element.hintPosition === 'BELOW_LABEL' && (\n <div className=\"ob-section__hint-text-container\">\n <HintBelowLabel hint={element.hint} inputId={id} />\n </div>\n )}\n </div>\n {!element.canCollapseFromBottom && <hr className=\"ob-section__divider\" />}\n <Collapse\n in={!isCollapsed}\n classes={{\n root: 'ob-section__content',\n entered: 'ob-section__expanded',\n hidden: 'ob-section__collapsed',\n }}\n >\n <SectionElementsWrapper\n element={element}\n onCollapse={handleClickBottomCollapseButton}\n >\n <OneBlinkFormElements\n {...props}\n displayValidationMessages={displayValidationMessage}\n onLookup={handleLookup}\n elements={element.elements}\n onUpdateFormElements={handleUpdateNestedFormElements}\n />\n </SectionElementsWrapper>\n </Collapse>\n </div>\n )\n}\n\nexport default React.memo(FormElementSection)\n\nconst SectionElementsWrapper = ({\n children,\n element,\n onCollapse,\n}: {\n children: React.ReactNode\n element: FormTypes.SectionElement\n onCollapse: () => void\n}) => {\n return element.canCollapseFromBottom ? (\n <div className=\"ob-section__collapsible-content-container\">\n {children}\n\n <button\n type=\"button\"\n className=\"button is-rounded is-light ob-section__bottom-collapse-button\"\n onClick={onCollapse}\n >\n <span className=\"icon\">\n <MaterialIcon>expand_less</MaterialIcon>\n </span>\n <span>Collapse</span>\n </button>\n </div>\n ) : (\n <>{children}</>\n )\n}\n"]}
|
@@ -1,10 +1,18 @@
|
|
1
1
|
import * as React from 'react';
|
2
2
|
import useContrastColor from '../hooks/useContrastColor';
|
3
|
+
import { Box } from '@mui/material';
|
3
4
|
const OptionButton = ({ element, option, isSelected, onClick, className, onBlur, ...props }) => {
|
4
5
|
const buttonContrastColor = useContrastColor(option.colour);
|
5
6
|
return (React.createElement("button", { type: "button", className: className, style: option.colour && isSelected
|
6
|
-
? {
|
7
|
-
|
7
|
+
? {
|
8
|
+
backgroundColor: option.colour,
|
9
|
+
color: buttonContrastColor,
|
10
|
+
height: 'auto',
|
11
|
+
}
|
12
|
+
: { height: 'auto' }, disabled: element.readOnly, onClick: onClick, "aria-describedby": props['aria-describedby'], onBlur: onBlur },
|
13
|
+
React.createElement(Box, { display: "flex", flexDirection: "column", className: "ob-options__box" },
|
14
|
+
option.imageUrl && (React.createElement("img", { className: "ob-options__image", src: option.imageUrl, alt: option.label })),
|
15
|
+
option.label)));
|
8
16
|
};
|
9
17
|
export default React.memo(OptionButton);
|
10
18
|
//# sourceMappingURL=OptionButton.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"OptionButton.js","sourceRoot":"","sources":["../../src/form-elements/OptionButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,gBAAgB,MAAM,2BAA2B,CAAA;
|
1
|
+
{"version":3,"file":"OptionButton.js","sourceRoot":"","sources":["../../src/form-elements/OptionButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,gBAAgB,MAAM,2BAA2B,CAAA;AAExD,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAA;AAcnC,MAAM,YAAY,GAAG,CAAC,EACpB,OAAO,EACP,MAAM,EACN,UAAU,EACV,OAAO,EACP,SAAS,EACT,MAAM,EACN,GAAG,KAAK,EACF,EAAE,EAAE;IACV,MAAM,mBAAmB,GAAG,gBAAgB,CAAC,MAAM,CAAC,MAAM,CAAC,CAAA;IAE3D,OAAO,CACL,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,SAAS,EACpB,KAAK,EACH,MAAM,CAAC,MAAM,IAAI,UAAU;YACzB,CAAC,CAAC;gBACE,eAAe,EAAE,MAAM,CAAC,MAAM;gBAC9B,KAAK,EAAE,mBAAmB;gBAC1B,MAAM,EAAE,MAAM;aACf;YACH,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,EAExB,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,OAAO,EAAE,OAAO,sBACE,KAAK,CAAC,kBAAkB,CAAC,EAC3C,MAAM,EAAE,MAAM;QAEd,oBAAC,GAAG,IAAC,OAAO,EAAC,MAAM,EAAC,aAAa,EAAC,QAAQ,EAAC,SAAS,EAAC,iBAAiB;YACnE,MAAM,CAAC,QAAQ,IAAI,CAClB,6BACE,SAAS,EAAC,mBAAmB,EAC7B,GAAG,EAAE,MAAM,CAAC,QAAQ,EACpB,GAAG,EAAE,MAAM,CAAC,KAAK,GACjB,CACH;YACA,MAAM,CAAC,KAAK,CACT,CACC,CACV,CAAA;AACH,CAAC,CAAA;AAED,eAAe,KAAK,CAAC,IAAI,CAAQ,YAAY,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport useContrastColor from '../hooks/useContrastColor'\nimport { FormTypes } from '@oneblink/types'\nimport { Box } from '@mui/material'\n\ntype Props = {\n element:\n | FormTypes.RadioButtonElement\n | FormTypes.CheckboxElement\n | FormTypes.ComplianceElement\n option: FormTypes.ChoiceElementOption\n isSelected: boolean\n onClick: () => void\n className: string\n onBlur?: () => void\n 'aria-describedby'?: string\n}\nconst OptionButton = ({\n element,\n option,\n isSelected,\n onClick,\n className,\n onBlur,\n ...props\n}: Props) => {\n const buttonContrastColor = useContrastColor(option.colour)\n\n return (\n <button\n type=\"button\"\n className={className}\n style={\n option.colour && isSelected\n ? {\n backgroundColor: option.colour,\n color: buttonContrastColor,\n height: 'auto',\n }\n : { height: 'auto' }\n }\n disabled={element.readOnly}\n onClick={onClick}\n aria-describedby={props['aria-describedby']}\n onBlur={onBlur}\n >\n <Box display=\"flex\" flexDirection=\"column\" className=\"ob-options__box\">\n {option.imageUrl && (\n <img\n className=\"ob-options__image\"\n src={option.imageUrl}\n alt={option.label}\n />\n )}\n {option.label}\n </Box>\n </button>\n )\n}\n\nexport default React.memo<Props>(OptionButton)\n"]}
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import { FormTypes, SubmissionTypes } from '@oneblink/types';
|
2
2
|
import { CaptchaType, ExecutedLookups, FormElementsConditionallyShown } from '../types/form';
|
3
3
|
export default function useFormValidation(pages: FormTypes.PageElement[]): {
|
4
|
-
validate: (submission: SubmissionTypes.S3SubmissionData["submission"], formElementsConditionallyShown: FormElementsConditionallyShown, executedLookups: ExecutedLookups, captchaType: CaptchaType) => import("../types/form").FormElementsValidation | undefined;
|
4
|
+
validate: (submission: SubmissionTypes.S3SubmissionData["submission"], formElementsConditionallyShown: FormElementsConditionallyShown, executedLookups: ExecutedLookups, captchaType: CaptchaType, isOffline: boolean) => import("../types/form").FormElementsValidation | undefined;
|
5
5
|
};
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import * as React from 'react';
|
2
|
-
import
|
2
|
+
import validateSubmission from '../services/form-validation/validateSubmission';
|
3
3
|
function stripFormElementsWithoutName(formElements) {
|
4
4
|
return formElements.reduce((memo, formElement) => {
|
5
5
|
switch (formElement.type) {
|
@@ -31,12 +31,16 @@ export default function useFormValidation(pages) {
|
|
31
31
|
const formElementsWithoutName = React.useMemo(() => {
|
32
32
|
return stripFormElementsWithoutName(pages);
|
33
33
|
}, [pages]);
|
34
|
-
const
|
35
|
-
return
|
34
|
+
const handleValidate = React.useCallback((submission, formElementsConditionallyShown, executedLookups, captchaType, isOffline) => {
|
35
|
+
return validateSubmission({
|
36
|
+
elements: formElementsWithoutName,
|
37
|
+
submission,
|
38
|
+
formElementsConditionallyShown,
|
39
|
+
executedLookups,
|
40
|
+
captchaType,
|
41
|
+
isOffline,
|
42
|
+
});
|
36
43
|
}, [formElementsWithoutName]);
|
37
|
-
const handleValidate = React.useCallback((submission, formElementsConditionallyShown, executedLookups, captchaType) => {
|
38
|
-
return validateSubmission(validationSchema, submission, formElementsConditionallyShown, executedLookups, captchaType);
|
39
|
-
}, [validationSchema]);
|
40
44
|
return {
|
41
45
|
validate: handleValidate,
|
42
46
|
};
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"useFormValidation.js","sourceRoot":"","sources":["../../src/hooks/useFormValidation.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,
|
1
|
+
{"version":3,"file":"useFormValidation.js","sourceRoot":"","sources":["../../src/hooks/useFormValidation.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,kBAAkB,MAAM,gDAAgD,CAAA;AAO/E,SAAS,4BAA4B,CACnC,YAAqC;IAErC,OAAO,YAAY,CAAC,MAAM,CACxB,CAAC,IAAI,EAAE,WAAW,EAAE,EAAE;QACpB,QAAQ,WAAW,CAAC,IAAI,EAAE,CAAC;YACzB,KAAK,MAAM,CAAC;YACZ,KAAK,SAAS,CAAC,CAAC,CAAC;gBACf,OAAO;oBACL,GAAG,IAAI;oBACP,GAAG,4BAA4B,CAAC,WAAW,CAAC,QAAQ,CAAC;iBACtD,CAAA;YACH,CAAC;YACD,KAAK,UAAU,CAAC;YAChB,KAAK,MAAM,CAAC;YACZ,KAAK,eAAe,CAAC,CAAC,CAAC;gBACrB,OAAO;oBACL,GAAG,IAAI;oBACP;wBACE,GAAG,WAAW;wBACd,QAAQ,EAAE,4BAA4B,CACpC,WAAW,CAAC,QAAQ,IAAI,EAAE,CAC3B;qBACF;iBACF,CAAA;YACH,CAAC;YACD,OAAO,CAAC,CAAC,CAAC;gBACR,OAAO,CAAC,GAAG,IAAI,EAAE,WAAW,CAAC,CAAA;YAC/B,CAAC;QACH,CAAC;IACH,CAAC,EACD,EAAE,CACH,CAAA;AACH,CAAC;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,KAA8B;IACtE,MAAM,uBAAuB,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACjD,OAAO,4BAA4B,CAAC,KAAK,CAAC,CAAA;IAC5C,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CACtC,CACE,UAA0D,EAC1D,8BAA8D,EAC9D,eAAgC,EAChC,WAAwB,EACxB,SAAkB,EAClB,EAAE;QACF,OAAO,kBAAkB,CAAC;YACxB,QAAQ,EAAE,uBAAuB;YACjC,UAAU;YACV,8BAA8B;YAC9B,eAAe;YACf,WAAW;YACX,SAAS;SACV,CAAC,CAAA;IACJ,CAAC,EACD,CAAC,uBAAuB,CAAC,CAC1B,CAAA;IAED,OAAO;QACL,QAAQ,EAAE,cAAc;KACzB,CAAA;AACH,CAAC","sourcesContent":["import { FormTypes, SubmissionTypes } from '@oneblink/types'\nimport * as React from 'react'\n\nimport validateSubmission from '../services/form-validation/validateSubmission'\nimport {\n CaptchaType,\n ExecutedLookups,\n FormElementsConditionallyShown,\n} from '../types/form'\n\nfunction stripFormElementsWithoutName(\n formElements: FormTypes.FormElement[],\n): FormTypes.FormElementWithName[] {\n return formElements.reduce<FormTypes.FormElementWithName[]>(\n (memo, formElement) => {\n switch (formElement.type) {\n case 'page':\n case 'section': {\n return [\n ...memo,\n ...stripFormElementsWithoutName(formElement.elements),\n ]\n }\n case 'infoPage':\n case 'form':\n case 'repeatableSet': {\n return [\n ...memo,\n {\n ...formElement,\n elements: stripFormElementsWithoutName(\n formElement.elements || [],\n ),\n },\n ]\n }\n default: {\n return [...memo, formElement]\n }\n }\n },\n [],\n )\n}\n\nexport default function useFormValidation(pages: FormTypes.PageElement[]) {\n const formElementsWithoutName = React.useMemo(() => {\n return stripFormElementsWithoutName(pages)\n }, [pages])\n\n const handleValidate = React.useCallback(\n (\n submission: SubmissionTypes.S3SubmissionData['submission'],\n formElementsConditionallyShown: FormElementsConditionallyShown,\n executedLookups: ExecutedLookups,\n captchaType: CaptchaType,\n isOffline: boolean,\n ) => {\n return validateSubmission({\n elements: formElementsWithoutName,\n submission,\n formElementsConditionallyShown,\n executedLookups,\n captchaType,\n isOffline,\n })\n },\n [formElementsWithoutName],\n )\n\n return {\n validate: handleValidate,\n }\n}\n"]}
|
package/dist/hooks/usePages.js
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
import * as React from 'react';
|
2
2
|
import useBooleanState from '../hooks/useBooleanState';
|
3
|
-
import { checkSectionValidity } from '../services/form-validation';
|
3
|
+
import { checkSectionValidity } from '../services/form-validation/validators';
|
4
4
|
import scrollingService from '../services/scrolling-service';
|
5
5
|
export default function usePages({ pages, formElementsValidation, formElementsConditionallyShown, hasAttemptedSubmit, }) {
|
6
6
|
const scrollToTopOfPageHTMLElementRef = React.useRef(null);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"usePages.js","sourceRoot":"","sources":["../../src/hooks/usePages.ts"],"names":[],"mappings":"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","sourcesContent":["import { FormTypes } from '@oneblink/types'\nimport * as React from 'react'\n\nimport useBooleanState from '../hooks/useBooleanState'\nimport { checkSectionValidity } from '../services/form-validation'\nimport scrollingService from '../services/scrolling-service'\nimport {\n FormElementsConditionallyShown,\n FormElementsValidation,\n} from '../types/form'\n\nexport default function usePages({\n pages,\n formElementsValidation,\n formElementsConditionallyShown,\n hasAttemptedSubmit,\n}: {\n pages: FormTypes.PageElement[]\n formElementsValidation: FormElementsValidation | undefined\n formElementsConditionallyShown: FormElementsConditionallyShown\n hasAttemptedSubmit: boolean\n}) {\n const scrollToTopOfPageHTMLElementRef = React.useRef<HTMLDivElement>(null)\n const [visitedPageIds, setVisitedPageIds] = React.useState<string[]>([])\n\n const [isStepsHeaderActive, , closeStepsNavigation, toggleStepsNavigation] =\n useBooleanState(false)\n\n const visiblePages = React.useMemo<FormTypes.PageElement[]>(() => {\n return pages.filter((pageElement) => {\n return !formElementsConditionallyShown?.[pageElement.id]?.isHidden\n })\n }, [formElementsConditionallyShown, pages])\n\n const [currentPageId, setCurrentPageId] = React.useState(visiblePages[0].id)\n\n const currentPage = React.useMemo(() => {\n const currentPageById = visiblePages.find((pageElement) => {\n return pageElement.id === currentPageId\n })\n if (currentPageById) {\n return currentPageById\n } else {\n return visiblePages[0]\n }\n }, [currentPageId, visiblePages])\n\n const currentPageIndex = React.useMemo(\n () => visiblePages.indexOf(currentPage),\n [currentPage, visiblePages],\n )\n\n const currentPageNumber = React.useMemo(() => {\n if (currentPage) {\n return visiblePages.indexOf(currentPage) + 1\n }\n }, [currentPage, visiblePages])\n\n const isShowingMultiplePages = visiblePages.length > 1\n\n const setPageId = React.useCallback(\n (pageId: string) => {\n setVisitedPageIds((currentVisitedPageIds) => {\n if (currentVisitedPageIds.includes(currentPageId)) {\n return currentVisitedPageIds\n } else {\n return [...currentVisitedPageIds, currentPageId]\n }\n })\n setCurrentPageId(pageId)\n closeStepsNavigation()\n\n const scrollToTopOfPageHTMLElement =\n scrollToTopOfPageHTMLElementRef.current\n if (isShowingMultiplePages && scrollToTopOfPageHTMLElement) {\n if (scrollToTopOfPageHTMLElement) {\n window.requestAnimationFrame(() => {\n scrollToTopOfPageHTMLElement.scrollIntoView({\n block: 'start',\n behavior: 'smooth',\n })\n })\n }\n const stepItemHTMLElement = document.getElementById(\n `steps-navigation-step-${pageId}`,\n )\n if (stepItemHTMLElement) {\n window.requestAnimationFrame(() => {\n stepItemHTMLElement.scrollIntoView({\n block: 'start',\n behavior: 'smooth',\n })\n })\n }\n //blur prev/next buttons after they've been clicked\n const activeElement = document?.activeElement as HTMLElement\n activeElement.blur()\n }\n },\n [closeStepsNavigation, currentPageId, isShowingMultiplePages],\n )\n\n const goToNextPage = React.useCallback(() => {\n for (let i = 0; i < visiblePages.length; i++) {\n const page = visiblePages[i]\n if (page.id === currentPageId) {\n const nextVisiblePage = visiblePages[i + 1]\n if (nextVisiblePage) {\n setPageId(nextVisiblePage.id)\n }\n break\n }\n }\n }, [currentPageId, setPageId, visiblePages])\n\n const goToPreviousPage = React.useCallback(() => {\n for (let i = visiblePages.length - 1; i > -1; i--) {\n const page = visiblePages[i]\n if (page && page.id === currentPageId) {\n const previousVisiblePage = visiblePages[i - 1]\n if (previousVisiblePage) {\n setPageId(previousVisiblePage.id)\n }\n break\n }\n }\n }, [currentPageId, setPageId, visiblePages])\n\n const checkDisplayPageError = React.useCallback(\n (page: FormTypes.PageElement) => {\n // If we have not visited the page yet, we will not display errors\n if (!visitedPageIds.includes(page.id) && !hasAttemptedSubmit) {\n return false\n }\n\n return checkSectionValidity(page, formElementsValidation)\n },\n [formElementsValidation, visitedPageIds, hasAttemptedSubmit],\n )\n\n React.useEffect(() => {\n if (isStepsHeaderActive) {\n scrollingService.disableScrolling()\n\n const activeStepElement = document.getElementById(\n `steps-navigation-step-${currentPageId}`,\n )\n\n if (activeStepElement) {\n activeStepElement.scrollIntoView({\n behavior: 'smooth',\n block: 'start',\n })\n }\n } else {\n // Re-enable scroll on body when inactive\n scrollingService.enableScrolling()\n }\n }, [currentPageId, isStepsHeaderActive])\n\n const firstVisiblePage = visiblePages[0]\n const lastVisiblePage = visiblePages[visiblePages.length - 1]\n const isLastVisiblePage =\n lastVisiblePage && lastVisiblePage.id === currentPageId\n const isFirstVisiblePage =\n firstVisiblePage && firstVisiblePage.id === currentPageId\n const isDisplayingCurrentPageError = checkDisplayPageError(currentPage)\n\n // Clean up when form is navigated away\n React.useEffect(() => {\n return () => {\n scrollingService.enableScrolling()\n }\n }, [])\n\n return {\n visiblePages,\n isFirstVisiblePage,\n isLastVisiblePage,\n isDisplayingCurrentPageError,\n isShowingMultiplePages,\n isStepsHeaderActive,\n toggleStepsNavigation,\n currentPageIndex,\n currentPage,\n currentPageNumber,\n checkDisplayPageError,\n setPageId,\n goToPreviousPage,\n goToNextPage,\n scrollToTopOfPageHTMLElementRef,\n }\n}\n"]}
|
1
|
+
{"version":3,"file":"usePages.js","sourceRoot":"","sources":["../../src/hooks/usePages.ts"],"names":[],"mappings":"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","sourcesContent":["import { FormTypes } from '@oneblink/types'\nimport * as React from 'react'\n\nimport useBooleanState from '../hooks/useBooleanState'\nimport { checkSectionValidity } from '../services/form-validation/validators'\nimport scrollingService from '../services/scrolling-service'\nimport {\n FormElementsConditionallyShown,\n FormElementsValidation,\n} from '../types/form'\n\nexport default function usePages({\n pages,\n formElementsValidation,\n formElementsConditionallyShown,\n hasAttemptedSubmit,\n}: {\n pages: FormTypes.PageElement[]\n formElementsValidation: FormElementsValidation | undefined\n formElementsConditionallyShown: FormElementsConditionallyShown\n hasAttemptedSubmit: boolean\n}) {\n const scrollToTopOfPageHTMLElementRef = React.useRef<HTMLDivElement>(null)\n const [visitedPageIds, setVisitedPageIds] = React.useState<string[]>([])\n\n const [isStepsHeaderActive, , closeStepsNavigation, toggleStepsNavigation] =\n useBooleanState(false)\n\n const visiblePages = React.useMemo<FormTypes.PageElement[]>(() => {\n return pages.filter((pageElement) => {\n return !formElementsConditionallyShown?.[pageElement.id]?.isHidden\n })\n }, [formElementsConditionallyShown, pages])\n\n const [currentPageId, setCurrentPageId] = React.useState(visiblePages[0].id)\n\n const currentPage = React.useMemo(() => {\n const currentPageById = visiblePages.find((pageElement) => {\n return pageElement.id === currentPageId\n })\n if (currentPageById) {\n return currentPageById\n } else {\n return visiblePages[0]\n }\n }, [currentPageId, visiblePages])\n\n const currentPageIndex = React.useMemo(\n () => visiblePages.indexOf(currentPage),\n [currentPage, visiblePages],\n )\n\n const currentPageNumber = React.useMemo(() => {\n if (currentPage) {\n return visiblePages.indexOf(currentPage) + 1\n }\n }, [currentPage, visiblePages])\n\n const isShowingMultiplePages = visiblePages.length > 1\n\n const setPageId = React.useCallback(\n (pageId: string) => {\n setVisitedPageIds((currentVisitedPageIds) => {\n if (currentVisitedPageIds.includes(currentPageId)) {\n return currentVisitedPageIds\n } else {\n return [...currentVisitedPageIds, currentPageId]\n }\n })\n setCurrentPageId(pageId)\n closeStepsNavigation()\n\n const scrollToTopOfPageHTMLElement =\n scrollToTopOfPageHTMLElementRef.current\n if (isShowingMultiplePages && scrollToTopOfPageHTMLElement) {\n if (scrollToTopOfPageHTMLElement) {\n window.requestAnimationFrame(() => {\n scrollToTopOfPageHTMLElement.scrollIntoView({\n block: 'start',\n behavior: 'smooth',\n })\n })\n }\n const stepItemHTMLElement = document.getElementById(\n `steps-navigation-step-${pageId}`,\n )\n if (stepItemHTMLElement) {\n window.requestAnimationFrame(() => {\n stepItemHTMLElement.scrollIntoView({\n block: 'start',\n behavior: 'smooth',\n })\n })\n }\n //blur prev/next buttons after they've been clicked\n const activeElement = document?.activeElement as HTMLElement\n activeElement.blur()\n }\n },\n [closeStepsNavigation, currentPageId, isShowingMultiplePages],\n )\n\n const goToNextPage = React.useCallback(() => {\n for (let i = 0; i < visiblePages.length; i++) {\n const page = visiblePages[i]\n if (page.id === currentPageId) {\n const nextVisiblePage = visiblePages[i + 1]\n if (nextVisiblePage) {\n setPageId(nextVisiblePage.id)\n }\n break\n }\n }\n }, [currentPageId, setPageId, visiblePages])\n\n const goToPreviousPage = React.useCallback(() => {\n for (let i = visiblePages.length - 1; i > -1; i--) {\n const page = visiblePages[i]\n if (page && page.id === currentPageId) {\n const previousVisiblePage = visiblePages[i - 1]\n if (previousVisiblePage) {\n setPageId(previousVisiblePage.id)\n }\n break\n }\n }\n }, [currentPageId, setPageId, visiblePages])\n\n const checkDisplayPageError = React.useCallback(\n (page: FormTypes.PageElement) => {\n // If we have not visited the page yet, we will not display errors\n if (!visitedPageIds.includes(page.id) && !hasAttemptedSubmit) {\n return false\n }\n\n return checkSectionValidity(page, formElementsValidation)\n },\n [formElementsValidation, visitedPageIds, hasAttemptedSubmit],\n )\n\n React.useEffect(() => {\n if (isStepsHeaderActive) {\n scrollingService.disableScrolling()\n\n const activeStepElement = document.getElementById(\n `steps-navigation-step-${currentPageId}`,\n )\n\n if (activeStepElement) {\n activeStepElement.scrollIntoView({\n behavior: 'smooth',\n block: 'start',\n })\n }\n } else {\n // Re-enable scroll on body when inactive\n scrollingService.enableScrolling()\n }\n }, [currentPageId, isStepsHeaderActive])\n\n const firstVisiblePage = visiblePages[0]\n const lastVisiblePage = visiblePages[visiblePages.length - 1]\n const isLastVisiblePage =\n lastVisiblePage && lastVisiblePage.id === currentPageId\n const isFirstVisiblePage =\n firstVisiblePage && firstVisiblePage.id === currentPageId\n const isDisplayingCurrentPageError = checkDisplayPageError(currentPage)\n\n // Clean up when form is navigated away\n React.useEffect(() => {\n return () => {\n scrollingService.enableScrolling()\n }\n }, [])\n\n return {\n visiblePages,\n isFirstVisiblePage,\n isLastVisiblePage,\n isDisplayingCurrentPageError,\n isShowingMultiplePages,\n isStepsHeaderActive,\n toggleStepsNavigation,\n currentPageIndex,\n currentPage,\n currentPageNumber,\n checkDisplayPageError,\n setPageId,\n goToPreviousPage,\n goToNextPage,\n scrollToTopOfPageHTMLElementRef,\n }\n}\n"]}
|
@@ -0,0 +1,28 @@
|
|
1
|
+
import { FormTypes } from '@oneblink/types';
|
2
|
+
import { FormElementBinaryStorageValue } from '../../types/attachments';
|
3
|
+
import { CaptchaType, ExecutedLookups, FormElementsConditionallyShown } from '../../types/form';
|
4
|
+
import { Value as FormElementComplianceValue } from '../../form-elements/FormElementCompliance';
|
5
|
+
declare const validationExtensions: {
|
6
|
+
lookups({ executedLookups, formElement, }: {
|
7
|
+
formElement: FormTypes.LookupFormElement & FormTypes.FormElementRequired;
|
8
|
+
executedLookups: ExecutedLookups;
|
9
|
+
}): string[];
|
10
|
+
presence(value: unknown, { required, requiredMessage }: FormTypes.FormElementRequired, message: string): string[];
|
11
|
+
regex<DefaultValue>(value: unknown, formElement: FormTypes.FormElementWithInput<DefaultValue>): string[];
|
12
|
+
attachment(value: unknown): string[];
|
13
|
+
attachments(value: FormElementBinaryStorageValue[] | FormElementComplianceValue | undefined): string[];
|
14
|
+
numberRegex(value: unknown, formElement: FormTypes.NumberElement): string[];
|
15
|
+
nestedElements(value: unknown, { formElement, formElements, formElementsConditionallyShown, executedLookups, captchaType, isOffline, }: {
|
16
|
+
formElement: FormTypes.FormElementWithName;
|
17
|
+
formElements: FormTypes.FormElementWithName[] | undefined;
|
18
|
+
formElementsConditionallyShown: FormElementsConditionallyShown | undefined;
|
19
|
+
executedLookups: ExecutedLookups;
|
20
|
+
captchaType: CaptchaType;
|
21
|
+
isOffline: boolean;
|
22
|
+
}): {
|
23
|
+
type: "formElements";
|
24
|
+
formElements: import("../../types/form").FormElementsValidation;
|
25
|
+
} | undefined;
|
26
|
+
offline(isOffline: boolean, message: string): string[];
|
27
|
+
};
|
28
|
+
export default validationExtensions;
|
@@ -0,0 +1,97 @@
|
|
1
|
+
import validateSubmission from './validateSubmission';
|
2
|
+
import { generateLookupValidationMessage, getInvalidAttachment, validateAttachments, } from './validators';
|
3
|
+
import { validators } from './validate-dot-js';
|
4
|
+
const validationExtensions = {
|
5
|
+
lookups({ executedLookups, formElement, }) {
|
6
|
+
if (!formElement.isDataLookup && !formElement.isElementLookup) {
|
7
|
+
return [];
|
8
|
+
}
|
9
|
+
// Lookups must only be executed on required form elements
|
10
|
+
if (formElement && !formElement.required) {
|
11
|
+
return [];
|
12
|
+
}
|
13
|
+
const elementExecutedLookups = executedLookups === null || executedLookups === void 0 ? void 0 : executedLookups[formElement.name];
|
14
|
+
if (elementExecutedLookups === true) {
|
15
|
+
return [];
|
16
|
+
}
|
17
|
+
return [generateLookupValidationMessage(formElement.lookupButton)];
|
18
|
+
},
|
19
|
+
presence(value, { required, requiredMessage }, message) {
|
20
|
+
if (required) {
|
21
|
+
return validators.presence(value, {
|
22
|
+
message: requiredMessage || message,
|
23
|
+
});
|
24
|
+
}
|
25
|
+
return [];
|
26
|
+
},
|
27
|
+
regex(value, formElement) {
|
28
|
+
if (formElement.regexPattern) {
|
29
|
+
return validators.regexValidation(value, {
|
30
|
+
pattern: formElement.regexPattern,
|
31
|
+
flags: formElement.regexFlags,
|
32
|
+
message: formElement.regexMessage,
|
33
|
+
});
|
34
|
+
}
|
35
|
+
return [];
|
36
|
+
},
|
37
|
+
attachment(value) {
|
38
|
+
const attachmentError = getInvalidAttachment(value);
|
39
|
+
if (attachmentError) {
|
40
|
+
return [attachmentError.errorMessage];
|
41
|
+
}
|
42
|
+
return [];
|
43
|
+
},
|
44
|
+
attachments(value) {
|
45
|
+
if (Array.isArray(value)) {
|
46
|
+
return validateAttachments(value);
|
47
|
+
}
|
48
|
+
return validateAttachments(value === null || value === void 0 ? void 0 : value.files);
|
49
|
+
},
|
50
|
+
numberRegex(value, formElement) {
|
51
|
+
if (formElement.regexPattern &&
|
52
|
+
typeof value === 'number' &&
|
53
|
+
!Number.isNaN(value)) {
|
54
|
+
return validationExtensions.regex(value.toString(), formElement);
|
55
|
+
}
|
56
|
+
return [];
|
57
|
+
},
|
58
|
+
nestedElements(value, { formElement, formElements, formElementsConditionallyShown, executedLookups, captchaType, isOffline, }) {
|
59
|
+
if (formElements) {
|
60
|
+
const executedLookupsValue = executedLookups !== undefined &&
|
61
|
+
typeof executedLookups !== 'boolean' &&
|
62
|
+
!Array.isArray(executedLookups)
|
63
|
+
? executedLookups[formElement.name]
|
64
|
+
: {};
|
65
|
+
const nestedExecutedLookups = executedLookupsValue !== undefined &&
|
66
|
+
typeof executedLookupsValue !== 'boolean' &&
|
67
|
+
!Array.isArray(executedLookupsValue)
|
68
|
+
? executedLookupsValue[formElement.name]
|
69
|
+
: {};
|
70
|
+
const formElementConditionallyShown = formElementsConditionallyShown === null || formElementsConditionallyShown === void 0 ? void 0 : formElementsConditionallyShown[formElement.name];
|
71
|
+
const errors = validateSubmission({
|
72
|
+
elements: formElements,
|
73
|
+
submission: value,
|
74
|
+
formElementsConditionallyShown: (formElementConditionallyShown === null || formElementConditionallyShown === void 0 ? void 0 : formElementConditionallyShown.type) === 'formElements'
|
75
|
+
? formElementConditionallyShown.formElements
|
76
|
+
: undefined,
|
77
|
+
executedLookups: typeof nestedExecutedLookups !== 'boolean' &&
|
78
|
+
!Array.isArray(nestedExecutedLookups)
|
79
|
+
? nestedExecutedLookups
|
80
|
+
: {},
|
81
|
+
captchaType,
|
82
|
+
isOffline,
|
83
|
+
});
|
84
|
+
if (errors) {
|
85
|
+
return {
|
86
|
+
type: 'formElements',
|
87
|
+
formElements: errors,
|
88
|
+
};
|
89
|
+
}
|
90
|
+
}
|
91
|
+
},
|
92
|
+
offline(isOffline, message) {
|
93
|
+
return isOffline ? [message] : [];
|
94
|
+
},
|
95
|
+
};
|
96
|
+
export default validationExtensions;
|
97
|
+
//# sourceMappingURL=extensions.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"extensions.js","sourceRoot":"","sources":["../../../src/services/form-validation/extensions.ts"],"names":[],"mappings":"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","sourcesContent":["import { FormTypes, SubmissionTypes } from '@oneblink/types'\nimport { FormElementBinaryStorageValue } from '../../types/attachments'\nimport {\n CaptchaType,\n ExecutedLookups,\n FormElementsConditionallyShown,\n} from '../../types/form'\nimport validateSubmission from './validateSubmission'\nimport {\n generateLookupValidationMessage,\n getInvalidAttachment,\n validateAttachments,\n} from './validators'\nimport { validators } from './validate-dot-js'\nimport { Value as FormElementComplianceValue } from '../../form-elements/FormElementCompliance'\n\nconst validationExtensions = {\n lookups({\n executedLookups,\n formElement,\n }: {\n formElement: FormTypes.LookupFormElement & FormTypes.FormElementRequired\n executedLookups: ExecutedLookups\n }): string[] {\n if (!formElement.isDataLookup && !formElement.isElementLookup) {\n return []\n }\n\n // Lookups must only be executed on required form elements\n if (formElement && !formElement.required) {\n return []\n }\n\n const elementExecutedLookups = executedLookups?.[formElement.name]\n if (elementExecutedLookups === true) {\n return []\n }\n\n return [generateLookupValidationMessage(formElement.lookupButton)]\n },\n\n presence(\n value: unknown,\n { required, requiredMessage }: FormTypes.FormElementRequired,\n message: string,\n ) {\n if (required) {\n return validators.presence(value, {\n message: requiredMessage || message,\n })\n }\n return []\n },\n\n regex<DefaultValue>(\n value: unknown,\n formElement: FormTypes.FormElementWithInput<DefaultValue>,\n ) {\n if (formElement.regexPattern) {\n return validators.regexValidation(value, {\n pattern: formElement.regexPattern,\n flags: formElement.regexFlags,\n message: formElement.regexMessage,\n })\n }\n return []\n },\n\n attachment(value: unknown): string[] {\n const attachmentError = getInvalidAttachment(value)\n if (attachmentError) {\n return [attachmentError.errorMessage]\n }\n return []\n },\n\n attachments(\n value:\n | FormElementBinaryStorageValue[]\n | FormElementComplianceValue\n | undefined,\n ) {\n if (Array.isArray(value)) {\n return validateAttachments(value)\n }\n return validateAttachments(\n value?.files as FormElementBinaryStorageValue[] | undefined,\n )\n },\n\n numberRegex(value: unknown, formElement: FormTypes.NumberElement) {\n if (\n formElement.regexPattern &&\n typeof value === 'number' &&\n !Number.isNaN(value)\n ) {\n return validationExtensions.regex(value.toString(), formElement)\n }\n return []\n },\n\n nestedElements(\n value: unknown,\n {\n formElement,\n formElements,\n formElementsConditionallyShown,\n executedLookups,\n captchaType,\n isOffline,\n }: {\n formElement: FormTypes.FormElementWithName\n formElements: FormTypes.FormElementWithName[] | undefined\n formElementsConditionallyShown: FormElementsConditionallyShown | undefined\n executedLookups: ExecutedLookups\n captchaType: CaptchaType\n isOffline: boolean\n },\n ) {\n if (formElements) {\n const executedLookupsValue =\n executedLookups !== undefined &&\n typeof executedLookups !== 'boolean' &&\n !Array.isArray(executedLookups)\n ? executedLookups[formElement.name]\n : {}\n const nestedExecutedLookups =\n executedLookupsValue !== undefined &&\n typeof executedLookupsValue !== 'boolean' &&\n !Array.isArray(executedLookupsValue)\n ? executedLookupsValue[formElement.name]\n : {}\n const formElementConditionallyShown =\n formElementsConditionallyShown?.[formElement.name]\n const errors = validateSubmission({\n elements: formElements as FormTypes.FormElementWithName[],\n submission: value as SubmissionTypes.S3SubmissionData['submission'],\n formElementsConditionallyShown:\n formElementConditionallyShown?.type === 'formElements'\n ? formElementConditionallyShown.formElements\n : undefined,\n executedLookups:\n typeof nestedExecutedLookups !== 'boolean' &&\n !Array.isArray(nestedExecutedLookups)\n ? nestedExecutedLookups\n : {},\n captchaType,\n isOffline,\n })\n if (errors) {\n return {\n type: 'formElements' as const,\n formElements: errors,\n }\n }\n }\n },\n\n offline(isOffline: boolean, message: string) {\n return isOffline ? [message] : []\n },\n}\n\nexport default validationExtensions\n"]}
|
@@ -0,0 +1,63 @@
|
|
1
|
+
export declare function isEmpty(value: unknown): boolean;
|
2
|
+
export declare const validators: {
|
3
|
+
/**
|
4
|
+
* Presence validates that the value isn't empty
|
5
|
+
*
|
6
|
+
* @param value
|
7
|
+
* @param options
|
8
|
+
* @returns
|
9
|
+
*/
|
10
|
+
presence(value: unknown, options?: {
|
11
|
+
allowEmpty?: boolean;
|
12
|
+
message?: string;
|
13
|
+
}): string[];
|
14
|
+
length(value: unknown, options?: {
|
15
|
+
message?: string;
|
16
|
+
is?: number;
|
17
|
+
minimum?: number;
|
18
|
+
maximum?: number;
|
19
|
+
tooShort?: string;
|
20
|
+
tooLong?: string;
|
21
|
+
wrongLength?: string;
|
22
|
+
}): string[];
|
23
|
+
numericality(value: unknown, options?: {
|
24
|
+
message?: string;
|
25
|
+
notValid?: string;
|
26
|
+
onlyInteger?: boolean;
|
27
|
+
notInteger?: string;
|
28
|
+
greaterThan?: number;
|
29
|
+
notGreaterThan?: string;
|
30
|
+
greaterThanOrEqualTo?: number;
|
31
|
+
notGreaterThanOrEqualTo?: string;
|
32
|
+
lessThanOrEqualTo?: number;
|
33
|
+
notLessThanOrEqualTo?: string;
|
34
|
+
equalTo?: number;
|
35
|
+
notEqualTo?: string;
|
36
|
+
lessThan?: number;
|
37
|
+
notLessThan?: string;
|
38
|
+
divisibleBy?: number;
|
39
|
+
notDivisibleBy?: string;
|
40
|
+
odd?: boolean;
|
41
|
+
notOdd?: string;
|
42
|
+
even?: boolean;
|
43
|
+
notEven?: string;
|
44
|
+
}): string[];
|
45
|
+
datetime(value: unknown, { format, ...options }: {
|
46
|
+
format: (date: Date) => string;
|
47
|
+
earliest?: string;
|
48
|
+
latest?: string;
|
49
|
+
tooEarly?: string;
|
50
|
+
tooLate?: string;
|
51
|
+
dateOnly?: boolean;
|
52
|
+
notValid?: string;
|
53
|
+
message?: string;
|
54
|
+
}): string[];
|
55
|
+
regexValidation(value: unknown, options: {
|
56
|
+
pattern: RegExp | string;
|
57
|
+
message?: string;
|
58
|
+
flags?: string;
|
59
|
+
} | RegExp | string): string[];
|
60
|
+
email(value: unknown, options?: {
|
61
|
+
message?: string;
|
62
|
+
}): string[];
|
63
|
+
};
|