@oneblink/apps-react 8.6.0-beta.2 → 8.6.0-beta.3
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.
|
@@ -9,7 +9,7 @@ import { HintBelowLabel, HintTooltip, } from '../components/renderer/FormElement
|
|
|
9
9
|
import useValidationClass from '../hooks/useValidationClass';
|
|
10
10
|
import MaterialIcon from '../components/MaterialIcon';
|
|
11
11
|
function FormElementSection({ element, onLookup, displayValidationMessages, onUpdateFormElements, sectionHeaderId, collapsedSectionIds = [], ...props }) {
|
|
12
|
-
const isCollapsedFromState = collapsedSectionIds.includes(element.id);
|
|
12
|
+
const isCollapsedFromState = collapsedSectionIds.includes(element.id) || element.isCollapsed;
|
|
13
13
|
const [isCollapsed, , , toggle] = useBooleanState(isCollapsedFromState);
|
|
14
14
|
const handleToggle = React.useCallback(() => {
|
|
15
15
|
// trigger onChange to update the collapsedSectionIds
|
|
@@ -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/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 collapsedSectionIds = [],\n ...props\n}: Omit<Props<T>, 'elements'> & {\n element: FormTypes.SectionElement\n sectionHeaderId: string\n collapsedSectionIds?: string[]\n}) {\n const isCollapsedFromState = collapsedSectionIds.includes(element.id)\n const [isCollapsed, , , toggle] = useBooleanState(isCollapsedFromState)\n\n const handleToggle = React.useCallback(() => {\n // trigger onChange to update the collapsedSectionIds\n props.onChange(element, {\n executedLookups: undefined,\n })\n toggle()\n }, [element, props, toggle])\n\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 collapsedSectionIds: currentFormSubmission.collapsedSectionIds,\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 collapsedSectionIds: currentFormSubmission.collapsedSectionIds,\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 handleToggle()\n headerRef.current?.scrollIntoView({\n behavior: 'smooth',\n block: 'center',\n inline: 'nearest',\n })\n }, [handleToggle])\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={handleToggle}\n tabIndex={0}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n handleToggle()\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 collapsedSectionIds = [],\n ...props\n}: Omit<Props<T>, 'elements'> & {\n element: FormTypes.SectionElement\n sectionHeaderId: string\n collapsedSectionIds?: string[]\n}) {\n const isCollapsedFromState =\n collapsedSectionIds.includes(element.id) || element.isCollapsed\n const [isCollapsed, , , toggle] = useBooleanState(isCollapsedFromState)\n\n const handleToggle = React.useCallback(() => {\n // trigger onChange to update the collapsedSectionIds\n props.onChange(element, {\n executedLookups: undefined,\n })\n toggle()\n }, [element, props, toggle])\n\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 collapsedSectionIds: currentFormSubmission.collapsedSectionIds,\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 collapsedSectionIds: currentFormSubmission.collapsedSectionIds,\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 handleToggle()\n headerRef.current?.scrollIntoView({\n behavior: 'smooth',\n block: 'center',\n inline: 'nearest',\n })\n }, [handleToggle])\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={handleToggle}\n tabIndex={0}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n handleToggle()\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"]}
|
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": "8.6.0-beta.
|
|
4
|
+
"version": "8.6.0-beta.3",
|
|
5
5
|
"author": "OneBlink <developers@oneblink.io> (https://oneblink.io)",
|
|
6
6
|
"bugs": {
|
|
7
7
|
"url": "https://github.com/oneblink/apps-react/issues"
|