@oneblink/apps-react 6.9.0-beta.6 → 6.9.0-beta.7
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.
|
@@ -162,7 +162,7 @@ const ValidationErrorsCard = ({ formElementsValidation, currentPage, setPageId,
|
|
|
162
162
|
window.requestAnimationFrame(() => {
|
|
163
163
|
window.scrollTo({
|
|
164
164
|
top: element.getBoundingClientRect().top +
|
|
165
|
-
window.scrollY
|
|
165
|
+
window.scrollY -
|
|
166
166
|
// We allow an offset to cater for any headers
|
|
167
167
|
navigationTopOffset,
|
|
168
168
|
behavior: 'smooth',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ValidationErrorsCard.js","sourceRoot":"","sources":["../../src/components/ValidationErrorsCard.tsx"],"names":[],"mappings":"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","sourcesContent":["import { IconButton, Collapse, Tooltip } from '@mui/material'\nimport * as React from 'react'\nimport MaterialIcon from './MaterialIcon'\nimport { FormElementsValidation } from '../types/form'\nimport useBooleanState from '../hooks/useBooleanState'\nimport clsx from 'clsx'\nimport useFormDefinition from '../hooks/useFormDefinition'\nimport { FormTypes } from '@oneblink/types'\n\nconst NO_PAGE_KEY = 'NO_PAGE'\ntype ValidationErrorMetaData = {\n id: string\n label: string\n page?: {\n label: string\n id: string\n }\n errorMessage: string\n}\nconst getValidationErrors = ({\n formElementsValidation,\n elements,\n page,\n idPrefix,\n}: {\n formElementsValidation: FormElementsValidation\n elements: FormTypes.FormElement[]\n page?: ValidationErrorMetaData['page']\n idPrefix: string\n}) => {\n return elements.reduce<Array<ValidationErrorMetaData>>((memo, el) => {\n switch (el.type) {\n case 'page': {\n memo.push(\n ...getValidationErrors({\n formElementsValidation,\n elements: el.elements,\n page: el,\n idPrefix,\n }),\n )\n break\n }\n case 'section': {\n memo.push(\n ...getValidationErrors({\n formElementsValidation,\n elements: el.elements,\n page,\n idPrefix,\n }),\n )\n break\n }\n case 'repeatableSet': {\n const validationData = formElementsValidation[el.name]\n if (\n !!validationData &&\n typeof validationData !== 'string' &&\n validationData.type === 'repeatableSet'\n ) {\n if (validationData.set) {\n memo.push({\n id: `element-container__${idPrefix}${el.name}`,\n errorMessage: validationData.set,\n label: el.label,\n page,\n })\n }\n for (const [key, entry] of Object.entries(validationData.entries)) {\n if (!entry) continue\n memo.push(\n ...getValidationErrors({\n formElementsValidation: entry,\n elements: el.elements,\n page,\n idPrefix: `${idPrefix}${el.name}_entry-${key}_`,\n }),\n )\n }\n }\n break\n }\n case 'infoPage':\n case 'form': {\n const validationData = formElementsValidation[el.name]\n if (\n !!validationData &&\n typeof validationData !== 'string' &&\n validationData.type === 'formElements'\n ) {\n if (validationData.formElements && el.elements) {\n memo.push(\n ...getValidationErrors({\n formElementsValidation: validationData.formElements,\n elements: el.elements,\n page,\n idPrefix: `${idPrefix}${el.name}_`,\n }),\n )\n }\n }\n break\n }\n default: {\n const validationMessage = formElementsValidation[el.name]\n if (typeof validationMessage === 'string') {\n memo.push({\n id: `element-container__${idPrefix}${el.name}`,\n label: el.label,\n page,\n errorMessage: validationMessage,\n })\n }\n }\n }\n return memo\n }, [])\n}\n\nconst ValidationErrorsCard = ({\n formElementsValidation,\n currentPage,\n setPageId,\n navigationTopOffset,\n}: {\n formElementsValidation: FormElementsValidation | undefined\n currentPage: FormTypes.PageElement\n setPageId: (pageId: string) => void\n navigationTopOffset: number\n}) => {\n const [isExpanded, expand, contract] = useBooleanState(false)\n\n const form = useFormDefinition()\n\n const pagesWithValidationErrors = React.useMemo(() => {\n if (!formElementsValidation) return []\n const flatErrors = getValidationErrors({\n formElementsValidation,\n elements: form.elements,\n idPrefix: '',\n })\n\n // Organise into pages\n const pages = new Map<\n string,\n {\n page: ValidationErrorMetaData['page']\n errors: ValidationErrorMetaData[]\n }\n >()\n for (const error of flatErrors) {\n if (error.page) {\n // If error belongs to a page\n const existingSetEntry = pages.get(error.page.id)\n const errors = [...(existingSetEntry?.errors || []), error]\n const page = error.page\n\n pages.set(page.id, {\n page,\n errors,\n })\n } else {\n // No page associated with error\n const existingSetEntry = pages.get(NO_PAGE_KEY)\n const errors = [...(existingSetEntry?.errors || []), error]\n pages.set(NO_PAGE_KEY, {\n page: undefined,\n errors,\n })\n }\n }\n return Array.from(pages.values())\n }, [form.elements, formElementsValidation])\n\n return (\n <div className=\"ob-validation-notification-wrapper\">\n <div\n className={clsx(\n 'ob-validation-notification-card cypress-invalid-submit-attempt',\n {\n 'is-clickable': !isExpanded,\n 'is-contracted': !isExpanded,\n 'is-expanded': isExpanded,\n },\n )}\n onClick={!isExpanded ? expand : undefined}\n >\n <div className=\"ob-validation-notification-card-content\">\n <div className=\"ob-validation-notification-card-header-wrapper\">\n <div className=\"ob-validation-notification-card-header-title-wrapper\">\n <MaterialIcon\n className={clsx(\n 'ob-validation-notification-card-header-title-icon ob-validation-color-transition',\n {\n 'has-text-danger': isExpanded,\n 'has-text-white': !isExpanded,\n },\n )}\n >\n error\n </MaterialIcon>\n <p\n className={clsx(\n 'ob-validation-color-transition ob-validation-notification-card-header-title-text',\n {\n 'has-text-danger': isExpanded,\n 'has-text-white': !isExpanded,\n },\n )}\n >\n Validation Errors\n </p>\n </div>\n <div className=\"ob-validation-notification-card-header-collapse-icon-wrapper\">\n {isExpanded ? (\n <IconButton onClick={contract}>\n <MaterialIcon className=\"icon-small\">\n expand_more\n </MaterialIcon>\n </IconButton>\n ) : (\n <IconButton>\n <MaterialIcon className=\"icon-small has-text-white\">\n expand_less\n </MaterialIcon>\n </IconButton>\n )}\n </div>\n </div>\n <div className=\"ob-validation-notification-card-collapse-wrapper\">\n <Collapse in={isExpanded}>\n {pagesWithValidationErrors.map(({ page, errors }, pageIndex) => {\n const isNotFirstPage = pageIndex > 0\n return (\n <React.Fragment key={pageIndex}>\n {page && (\n <p\n className={clsx(\n 'ob-validation-notification-card-page-label ob-validation-color-transition',\n {\n 'is-not-first': isNotFirstPage,\n },\n )}\n >\n {page.label}\n </p>\n )}\n <div className=\"ob-list has-dividers has-borders ob-validation-notification-card-list ob-validation-color-transition\">\n {errors.map(\n ({ errorMessage, label, id }, index, list) => {\n const isFirst = index === 0\n const isLast = index === list.length - 1\n return (\n <div\n key={index}\n className={clsx(\n 'ob-list__item is-clickable ob-validation-notification-card-item',\n {\n 'is-first': isFirst,\n 'is-last': isLast,\n },\n )}\n onClick={() => {\n if (page && page.id !== currentPage.id) {\n setPageId(page.id)\n }\n const element = document.getElementById(id)\n if (element) {\n window.requestAnimationFrame(() => {\n window.scrollTo({\n top:\n element.getBoundingClientRect().top +\n window.scrollY +\n // We allow an offset to cater for any headers\n navigationTopOffset,\n behavior: 'smooth',\n })\n })\n }\n }}\n >\n <div className=\"ob-validation-notification-card-item-text\">\n <p>{label}</p>\n <Tooltip\n title={errorMessage}\n placement=\"left\"\n arrow\n >\n <p className=\"ob-validation-notification-card-item-text-error-message has-text-danger\">\n {errorMessage}\n </p>\n </Tooltip>\n </div>\n <MaterialIcon className=\"has-text-grey icon-small ob-validation-notification-card-item-icon\">\n chevron_right\n </MaterialIcon>\n </div>\n )\n },\n )}\n </div>\n </React.Fragment>\n )\n })}\n </Collapse>\n </div>\n </div>\n </div>\n </div>\n )\n}\n\nexport default React.memo(ValidationErrorsCard)\n"]}
|
|
1
|
+
{"version":3,"file":"ValidationErrorsCard.js","sourceRoot":"","sources":["../../src/components/ValidationErrorsCard.tsx"],"names":[],"mappings":"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","sourcesContent":["import { IconButton, Collapse, Tooltip } from '@mui/material'\nimport * as React from 'react'\nimport MaterialIcon from './MaterialIcon'\nimport { FormElementsValidation } from '../types/form'\nimport useBooleanState from '../hooks/useBooleanState'\nimport clsx from 'clsx'\nimport useFormDefinition from '../hooks/useFormDefinition'\nimport { FormTypes } from '@oneblink/types'\n\nconst NO_PAGE_KEY = 'NO_PAGE'\ntype ValidationErrorMetaData = {\n id: string\n label: string\n page?: {\n label: string\n id: string\n }\n errorMessage: string\n}\nconst getValidationErrors = ({\n formElementsValidation,\n elements,\n page,\n idPrefix,\n}: {\n formElementsValidation: FormElementsValidation\n elements: FormTypes.FormElement[]\n page?: ValidationErrorMetaData['page']\n idPrefix: string\n}) => {\n return elements.reduce<Array<ValidationErrorMetaData>>((memo, el) => {\n switch (el.type) {\n case 'page': {\n memo.push(\n ...getValidationErrors({\n formElementsValidation,\n elements: el.elements,\n page: el,\n idPrefix,\n }),\n )\n break\n }\n case 'section': {\n memo.push(\n ...getValidationErrors({\n formElementsValidation,\n elements: el.elements,\n page,\n idPrefix,\n }),\n )\n break\n }\n case 'repeatableSet': {\n const validationData = formElementsValidation[el.name]\n if (\n !!validationData &&\n typeof validationData !== 'string' &&\n validationData.type === 'repeatableSet'\n ) {\n if (validationData.set) {\n memo.push({\n id: `element-container__${idPrefix}${el.name}`,\n errorMessage: validationData.set,\n label: el.label,\n page,\n })\n }\n for (const [key, entry] of Object.entries(validationData.entries)) {\n if (!entry) continue\n memo.push(\n ...getValidationErrors({\n formElementsValidation: entry,\n elements: el.elements,\n page,\n idPrefix: `${idPrefix}${el.name}_entry-${key}_`,\n }),\n )\n }\n }\n break\n }\n case 'infoPage':\n case 'form': {\n const validationData = formElementsValidation[el.name]\n if (\n !!validationData &&\n typeof validationData !== 'string' &&\n validationData.type === 'formElements'\n ) {\n if (validationData.formElements && el.elements) {\n memo.push(\n ...getValidationErrors({\n formElementsValidation: validationData.formElements,\n elements: el.elements,\n page,\n idPrefix: `${idPrefix}${el.name}_`,\n }),\n )\n }\n }\n break\n }\n default: {\n const validationMessage = formElementsValidation[el.name]\n if (typeof validationMessage === 'string') {\n memo.push({\n id: `element-container__${idPrefix}${el.name}`,\n label: el.label,\n page,\n errorMessage: validationMessage,\n })\n }\n }\n }\n return memo\n }, [])\n}\n\nconst ValidationErrorsCard = ({\n formElementsValidation,\n currentPage,\n setPageId,\n navigationTopOffset,\n}: {\n formElementsValidation: FormElementsValidation | undefined\n currentPage: FormTypes.PageElement\n setPageId: (pageId: string) => void\n navigationTopOffset: number\n}) => {\n const [isExpanded, expand, contract] = useBooleanState(false)\n\n const form = useFormDefinition()\n\n const pagesWithValidationErrors = React.useMemo(() => {\n if (!formElementsValidation) return []\n const flatErrors = getValidationErrors({\n formElementsValidation,\n elements: form.elements,\n idPrefix: '',\n })\n\n // Organise into pages\n const pages = new Map<\n string,\n {\n page: ValidationErrorMetaData['page']\n errors: ValidationErrorMetaData[]\n }\n >()\n for (const error of flatErrors) {\n if (error.page) {\n // If error belongs to a page\n const existingSetEntry = pages.get(error.page.id)\n const errors = [...(existingSetEntry?.errors || []), error]\n const page = error.page\n\n pages.set(page.id, {\n page,\n errors,\n })\n } else {\n // No page associated with error\n const existingSetEntry = pages.get(NO_PAGE_KEY)\n const errors = [...(existingSetEntry?.errors || []), error]\n pages.set(NO_PAGE_KEY, {\n page: undefined,\n errors,\n })\n }\n }\n return Array.from(pages.values())\n }, [form.elements, formElementsValidation])\n\n return (\n <div className=\"ob-validation-notification-wrapper\">\n <div\n className={clsx(\n 'ob-validation-notification-card cypress-invalid-submit-attempt',\n {\n 'is-clickable': !isExpanded,\n 'is-contracted': !isExpanded,\n 'is-expanded': isExpanded,\n },\n )}\n onClick={!isExpanded ? expand : undefined}\n >\n <div className=\"ob-validation-notification-card-content\">\n <div className=\"ob-validation-notification-card-header-wrapper\">\n <div className=\"ob-validation-notification-card-header-title-wrapper\">\n <MaterialIcon\n className={clsx(\n 'ob-validation-notification-card-header-title-icon ob-validation-color-transition',\n {\n 'has-text-danger': isExpanded,\n 'has-text-white': !isExpanded,\n },\n )}\n >\n error\n </MaterialIcon>\n <p\n className={clsx(\n 'ob-validation-color-transition ob-validation-notification-card-header-title-text',\n {\n 'has-text-danger': isExpanded,\n 'has-text-white': !isExpanded,\n },\n )}\n >\n Validation Errors\n </p>\n </div>\n <div className=\"ob-validation-notification-card-header-collapse-icon-wrapper\">\n {isExpanded ? (\n <IconButton onClick={contract}>\n <MaterialIcon className=\"icon-small\">\n expand_more\n </MaterialIcon>\n </IconButton>\n ) : (\n <IconButton>\n <MaterialIcon className=\"icon-small has-text-white\">\n expand_less\n </MaterialIcon>\n </IconButton>\n )}\n </div>\n </div>\n <div className=\"ob-validation-notification-card-collapse-wrapper\">\n <Collapse in={isExpanded}>\n {pagesWithValidationErrors.map(({ page, errors }, pageIndex) => {\n const isNotFirstPage = pageIndex > 0\n return (\n <React.Fragment key={pageIndex}>\n {page && (\n <p\n className={clsx(\n 'ob-validation-notification-card-page-label ob-validation-color-transition',\n {\n 'is-not-first': isNotFirstPage,\n },\n )}\n >\n {page.label}\n </p>\n )}\n <div className=\"ob-list has-dividers has-borders ob-validation-notification-card-list ob-validation-color-transition\">\n {errors.map(\n ({ errorMessage, label, id }, index, list) => {\n const isFirst = index === 0\n const isLast = index === list.length - 1\n return (\n <div\n key={index}\n className={clsx(\n 'ob-list__item is-clickable ob-validation-notification-card-item',\n {\n 'is-first': isFirst,\n 'is-last': isLast,\n },\n )}\n onClick={() => {\n if (page && page.id !== currentPage.id) {\n setPageId(page.id)\n }\n const element = document.getElementById(id)\n if (element) {\n window.requestAnimationFrame(() => {\n window.scrollTo({\n top:\n element.getBoundingClientRect().top +\n window.scrollY -\n // We allow an offset to cater for any headers\n navigationTopOffset,\n behavior: 'smooth',\n })\n })\n }\n }}\n >\n <div className=\"ob-validation-notification-card-item-text\">\n <p>{label}</p>\n <Tooltip\n title={errorMessage}\n placement=\"left\"\n arrow\n >\n <p className=\"ob-validation-notification-card-item-text-error-message has-text-danger\">\n {errorMessage}\n </p>\n </Tooltip>\n </div>\n <MaterialIcon className=\"has-text-grey icon-small ob-validation-notification-card-item-icon\">\n chevron_right\n </MaterialIcon>\n </div>\n )\n },\n )}\n </div>\n </React.Fragment>\n )\n })}\n </Collapse>\n </div>\n </div>\n </div>\n </div>\n )\n}\n\nexport default React.memo(ValidationErrorsCard)\n"]}
|
package/dist/styles/ob-html.scss
CHANGED
package/dist/styles.css
CHANGED
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@oneblink/apps-react",
|
|
3
3
|
"description": "Helper functions for OneBlink apps in ReactJS.",
|
|
4
|
-
"version": "6.9.0-beta.
|
|
4
|
+
"version": "6.9.0-beta.7",
|
|
5
5
|
"author": "OneBlink <developers@oneblink.io> (https://oneblink.io)",
|
|
6
6
|
"bugs": {
|
|
7
7
|
"url": "https://github.com/oneblink/apps-react/issues"
|