@oneblink/apps-react 6.11.0-beta.10 → 6.11.0-beta.11
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.
|
@@ -70,18 +70,18 @@ function FormElementCheckboxes({ id, element, value, onChange, validationMessage
|
|
|
70
70
|
React.createElement(FormElementLabelContainer, { className: "ob-checkbox", id: id, element: element, required: element.required || !!element.requiredAll },
|
|
71
71
|
React.createElement(FormElementOptions, { options: element.options, conditionallyShownOptionsElement: conditionallyShownOptionsElement },
|
|
72
72
|
element.canToggleAll && (React.createElement(ToggleAllCheckbox, { id: id, element: element, options: filteredOptions, selected: selectedValues, disabled: element.readOnly, onChange: onChange })),
|
|
73
|
-
element.buttons ? (React.createElement("div", { className: "ob-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
73
|
+
element.buttons ? (React.createElement("div", { className: "buttons ob-buttons ob-buttons-radio", role: "group", "aria-labelledby": `${id}-label`, "aria-describedby": ariaDescribedby }, filteredOptions.map((option, index) => {
|
|
74
|
+
const isSelected = selectedValues.includes(option.value);
|
|
75
|
+
return (React.createElement("div", { className: "ob-button-radio-container", key: option.value },
|
|
76
|
+
React.createElement(OptionButton, { element: element, option: option, isSelected: isSelected, onClick: () => changeValues(option.value, isSelected), className: clsx('button ob-button ob-button__input ob-checkbox__button cypress-checkbox-button-control', {
|
|
77
77
|
'is-primary': isSelected,
|
|
78
78
|
'is-light': !isSelected,
|
|
79
79
|
}), "aria-describedby": ariaDescribedby, onBlur: () => {
|
|
80
80
|
if (index === filteredOptions.length - 1) {
|
|
81
81
|
setIsDirty();
|
|
82
82
|
}
|
|
83
|
-
} }));
|
|
84
|
-
|
|
83
|
+
} })));
|
|
84
|
+
}))) : (React.createElement("div", { role: "group", className: "ob-checkbox-container", "aria-labelledby": `${id}-label`, "aria-describedby": ariaDescribedby }, filteredOptions.map((option, index) => {
|
|
85
85
|
const isSelected = selectedValues.includes(option.value);
|
|
86
86
|
return (React.createElement("div", { className: "control", key: index },
|
|
87
87
|
React.createElement("label", { className: "checkbox ob-checkbox__input-label cypress-checkbox-label", htmlFor: `${id}_${option.value}` },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormElementCheckBoxes.js","sourceRoot":"","sources":["../../src/form-elements/FormElementCheckBoxes.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport { Checkbox } from '@mui/material'\n\nimport FormElementOptions from '../components/renderer/FormElementOptions'\nimport useFormElementOptions from '../hooks/useFormElementOptions'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport OptionButton from './OptionButton'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport ToggleAllCheckbox from '../components/renderer/ToggleAllCheckbox'\nimport {\n FormElementValueChangeHandler,\n FormElementConditionallyShownElement,\n IsDirtyProps,\n UpdateFormElementsHandler,\n} from '../types/form'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\n\ntype Props = {\n id: string\n element: FormTypes.CheckboxElement\n value: unknown\n onChange: FormElementValueChangeHandler<string[]>\n displayValidationMessage: boolean\n validationMessage: string | undefined\n conditionallyShownOptionsElement:\n | FormElementConditionallyShownElement\n | undefined\n onUpdateFormElements: UpdateFormElementsHandler\n} & IsDirtyProps\n\nfunction FormElementCheckboxes({\n id,\n element,\n value,\n onChange,\n validationMessage,\n displayValidationMessage,\n conditionallyShownOptionsElement,\n onUpdateFormElements,\n isDirty,\n setIsDirty,\n}: Props) {\n const ariaDescribedby = useElementAriaDescribedby(id, element)\n const selectedValues = React.useMemo(() => {\n if (!Array.isArray(value)) return []\n return value\n }, [value])\n\n // Need to use a `useEffect` to update the `isDirty` state, because it cannot be done from\n // inside the below `setState` callback function since it runs from inside another component\n React.useEffect(() => {\n if (isDirty) return\n\n if (\n // If the element requires a single selection and has a value\n (element.required && !!selectedValues.length) ||\n // or all options are selected and requiredAll is true\n (element.requiredAll && selectedValues.length === element.options?.length)\n ) {\n setIsDirty()\n }\n }, [\n element.options?.length,\n element.required,\n element.requiredAll,\n isDirty,\n selectedValues.length,\n setIsDirty,\n ])\n\n const changeValues = React.useCallback(\n (toggledValue: string, hasSelectedValue: boolean) => {\n onChange(element, {\n value: (existingValue) => {\n if (hasSelectedValue) {\n const newValue = (existingValue || []).filter(\n (existingValue) => existingValue !== toggledValue,\n )\n if (newValue.length) {\n return newValue\n }\n } else {\n const newValue = Array.isArray(existingValue)\n ? [...existingValue]\n : []\n newValue.push(toggledValue)\n return newValue\n }\n },\n })\n },\n [element, onChange],\n )\n\n const filteredOptions = useFormElementOptions({\n element,\n value,\n onChange,\n conditionallyShownOptionsElement,\n onUpdateFormElements,\n })\n\n const { isLookingUp } = React.useContext(LookupNotificationContext)\n const isDisplayingValidationMessage =\n (displayValidationMessage || isDirty) && !!validationMessage && !isLookingUp\n\n return (\n <div className=\"cypress-checkbox-element\">\n <FormElementLabelContainer\n className=\"ob-checkbox\"\n id={id}\n element={element}\n required={element.required || !!element.requiredAll}\n >\n <FormElementOptions\n options={element.options}\n conditionallyShownOptionsElement={conditionallyShownOptionsElement}\n >\n {element.canToggleAll && (\n <ToggleAllCheckbox\n id={id}\n element={element}\n options={filteredOptions}\n selected={selectedValues}\n disabled={element.readOnly}\n onChange={onChange}\n />\n )}\n {element.buttons ? (\n <div className=\"ob-button-radio-container\">\n <div\n className=\"buttons ob-buttons ob-buttons-radio\"\n role=\"group\"\n aria-labelledby={`${id}-label`}\n aria-describedby={ariaDescribedby}\n >\n {filteredOptions.map((option, index) => {\n const isSelected = selectedValues.includes(option.value)\n return (\n <OptionButton\n key={index}\n element={element}\n option={option}\n isSelected={isSelected}\n onClick={() => changeValues(option.value, isSelected)}\n className={clsx(\n 'button ob-button ob-button__input ob-checkbox__button cypress-checkbox-button-control',\n {\n 'is-primary': isSelected,\n 'is-light': !isSelected,\n },\n )}\n aria-describedby={ariaDescribedby}\n onBlur={() => {\n if (index === filteredOptions.length - 1) {\n setIsDirty()\n }\n }}\n />\n )\n })}\n </div>\n </div>\n ) : (\n <div\n role=\"group\"\n className=\"ob-checkbox-container\"\n aria-labelledby={`${id}-label`}\n aria-describedby={ariaDescribedby}\n >\n {filteredOptions.map((option, index) => {\n const isSelected = selectedValues.includes(option.value)\n return (\n <div className=\"control\" key={index}>\n <label\n className=\"checkbox ob-checkbox__input-label cypress-checkbox-label\"\n htmlFor={`${id}_${option.value}`}\n >\n <Checkbox\n color=\"primary\"\n className=\"ob-checkbox__input cypress-checkbox-control\"\n classes={{\n checked: 'ob-checkbox__input-checked',\n }}\n value={option.value}\n id={`${id}_${option.value}`}\n checked={isSelected}\n onChange={() => changeValues(option.value, isSelected)}\n disabled={element.readOnly}\n edge=\"start\"\n inputProps={{\n 'aria-describedby': ariaDescribedby,\n }}\n onBlur={() => {\n if (index === filteredOptions.length - 1) {\n setIsDirty()\n }\n }}\n />{' '}\n {option.label}\n </label>\n </div>\n )\n })}\n </div>\n )}\n\n <LookupButton\n hasMarginTop\n value={value}\n validationMessage={validationMessage}\n lookupButtonConfig={element.lookupButton}\n />\n </FormElementOptions>\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(FormElementCheckboxes)\n"]}
|
|
1
|
+
{"version":3,"file":"FormElementCheckBoxes.js","sourceRoot":"","sources":["../../src/form-elements/FormElementCheckBoxes.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport { Checkbox } from '@mui/material'\n\nimport FormElementOptions from '../components/renderer/FormElementOptions'\nimport useFormElementOptions from '../hooks/useFormElementOptions'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport OptionButton from './OptionButton'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport ToggleAllCheckbox from '../components/renderer/ToggleAllCheckbox'\nimport {\n FormElementValueChangeHandler,\n FormElementConditionallyShownElement,\n IsDirtyProps,\n UpdateFormElementsHandler,\n} from '../types/form'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\n\ntype Props = {\n id: string\n element: FormTypes.CheckboxElement\n value: unknown\n onChange: FormElementValueChangeHandler<string[]>\n displayValidationMessage: boolean\n validationMessage: string | undefined\n conditionallyShownOptionsElement:\n | FormElementConditionallyShownElement\n | undefined\n onUpdateFormElements: UpdateFormElementsHandler\n} & IsDirtyProps\n\nfunction FormElementCheckboxes({\n id,\n element,\n value,\n onChange,\n validationMessage,\n displayValidationMessage,\n conditionallyShownOptionsElement,\n onUpdateFormElements,\n isDirty,\n setIsDirty,\n}: Props) {\n const ariaDescribedby = useElementAriaDescribedby(id, element)\n const selectedValues = React.useMemo(() => {\n if (!Array.isArray(value)) return []\n return value\n }, [value])\n\n // Need to use a `useEffect` to update the `isDirty` state, because it cannot be done from\n // inside the below `setState` callback function since it runs from inside another component\n React.useEffect(() => {\n if (isDirty) return\n\n if (\n // If the element requires a single selection and has a value\n (element.required && !!selectedValues.length) ||\n // or all options are selected and requiredAll is true\n (element.requiredAll && selectedValues.length === element.options?.length)\n ) {\n setIsDirty()\n }\n }, [\n element.options?.length,\n element.required,\n element.requiredAll,\n isDirty,\n selectedValues.length,\n setIsDirty,\n ])\n\n const changeValues = React.useCallback(\n (toggledValue: string, hasSelectedValue: boolean) => {\n onChange(element, {\n value: (existingValue) => {\n if (hasSelectedValue) {\n const newValue = (existingValue || []).filter(\n (existingValue) => existingValue !== toggledValue,\n )\n if (newValue.length) {\n return newValue\n }\n } else {\n const newValue = Array.isArray(existingValue)\n ? [...existingValue]\n : []\n newValue.push(toggledValue)\n return newValue\n }\n },\n })\n },\n [element, onChange],\n )\n\n const filteredOptions = useFormElementOptions({\n element,\n value,\n onChange,\n conditionallyShownOptionsElement,\n onUpdateFormElements,\n })\n\n const { isLookingUp } = React.useContext(LookupNotificationContext)\n const isDisplayingValidationMessage =\n (displayValidationMessage || isDirty) && !!validationMessage && !isLookingUp\n\n return (\n <div className=\"cypress-checkbox-element\">\n <FormElementLabelContainer\n className=\"ob-checkbox\"\n id={id}\n element={element}\n required={element.required || !!element.requiredAll}\n >\n <FormElementOptions\n options={element.options}\n conditionallyShownOptionsElement={conditionallyShownOptionsElement}\n >\n {element.canToggleAll && (\n <ToggleAllCheckbox\n id={id}\n element={element}\n options={filteredOptions}\n selected={selectedValues}\n disabled={element.readOnly}\n onChange={onChange}\n />\n )}\n {element.buttons ? (\n <div\n className=\"buttons ob-buttons ob-buttons-radio\"\n role=\"group\"\n aria-labelledby={`${id}-label`}\n aria-describedby={ariaDescribedby}\n >\n {filteredOptions.map((option, index) => {\n const isSelected = selectedValues.includes(option.value)\n return (\n <div className=\"ob-button-radio-container\" key={option.value}>\n <OptionButton\n element={element}\n option={option}\n isSelected={isSelected}\n onClick={() => changeValues(option.value, isSelected)}\n className={clsx(\n 'button ob-button ob-button__input ob-checkbox__button cypress-checkbox-button-control',\n {\n 'is-primary': isSelected,\n 'is-light': !isSelected,\n },\n )}\n aria-describedby={ariaDescribedby}\n onBlur={() => {\n if (index === filteredOptions.length - 1) {\n setIsDirty()\n }\n }}\n />\n </div>\n )\n })}\n </div>\n ) : (\n <div\n role=\"group\"\n className=\"ob-checkbox-container\"\n aria-labelledby={`${id}-label`}\n aria-describedby={ariaDescribedby}\n >\n {filteredOptions.map((option, index) => {\n const isSelected = selectedValues.includes(option.value)\n return (\n <div className=\"control\" key={index}>\n <label\n className=\"checkbox ob-checkbox__input-label cypress-checkbox-label\"\n htmlFor={`${id}_${option.value}`}\n >\n <Checkbox\n color=\"primary\"\n className=\"ob-checkbox__input cypress-checkbox-control\"\n classes={{\n checked: 'ob-checkbox__input-checked',\n }}\n value={option.value}\n id={`${id}_${option.value}`}\n checked={isSelected}\n onChange={() => changeValues(option.value, isSelected)}\n disabled={element.readOnly}\n edge=\"start\"\n inputProps={{\n 'aria-describedby': ariaDescribedby,\n }}\n onBlur={() => {\n if (index === filteredOptions.length - 1) {\n setIsDirty()\n }\n }}\n />{' '}\n {option.label}\n </label>\n </div>\n )\n })}\n </div>\n )}\n\n <LookupButton\n hasMarginTop\n value={value}\n validationMessage={validationMessage}\n lookupButtonConfig={element.lookupButton}\n />\n </FormElementOptions>\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(FormElementCheckboxes)\n"]}
|
|
@@ -10,7 +10,7 @@ const OptionButton = ({ element, option, isSelected, onClick, className, onBlur,
|
|
|
10
10
|
height: 'auto',
|
|
11
11
|
}
|
|
12
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" },
|
|
13
|
+
React.createElement(Box, { display: "flex", flexDirection: "column", className: "ob-options__box", maxWidth: 256 },
|
|
14
14
|
option.imageUrl && (React.createElement("img", { className: "ob-options__image", src: option.imageUrl, alt: option.label })),
|
|
15
15
|
option.label)));
|
|
16
16
|
};
|
|
@@ -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;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,
|
|
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,IACF,OAAO,EAAC,MAAM,EACd,aAAa,EAAC,QAAQ,EACtB,SAAS,EAAC,iBAAiB,EAC3B,QAAQ,EAAE,GAAG;YAEZ,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\n display=\"flex\"\n flexDirection=\"column\"\n className=\"ob-options__box\"\n maxWidth={256}\n >\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"]}
|
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.11.0-beta.
|
|
4
|
+
"version": "6.11.0-beta.11",
|
|
5
5
|
"author": "OneBlink <developers@oneblink.io> (https://oneblink.io)",
|
|
6
6
|
"bugs": {
|
|
7
7
|
"url": "https://github.com/oneblink/apps-react/issues"
|