From bac203727e60d98415efe290bbfca754b4335852 Mon Sep 17 00:00:00 2001 From: jasquat Date: Tue, 10 Jan 2023 15:15:21 -0500 Subject: [PATCH] updated rjsf to beta.16 and updated validations from v6 to v8 w/ burnettk --- spiffworkflow-frontend/package-lock.json | 101 ++++++++++----- spiffworkflow-frontend/package.json | 2 +- .../src/routes/TaskShow.tsx | 9 +- .../ArrayFieldItemTemplate.tsx | 101 ++++++++------- .../ArrayFieldTemplate/ArrayFieldTemplate.tsx | 117 +++++++++--------- .../src/themes/carbon/FieldTemplate/Label.tsx | 29 +++++ .../ObjectFieldTemplate.tsx | 112 ++++++++--------- .../WrapIfAdditionalTemplate.tsx | 115 ++++++++--------- 8 files changed, 328 insertions(+), 258 deletions(-) create mode 100644 spiffworkflow-frontend/src/themes/carbon/FieldTemplate/Label.tsx diff --git a/spiffworkflow-frontend/package-lock.json b/spiffworkflow-frontend/package-lock.json index 54cf2c89..0d174daf 100644 --- a/spiffworkflow-frontend/package-lock.json +++ b/spiffworkflow-frontend/package-lock.json @@ -23,7 +23,7 @@ "@rjsf/core": "*", "@rjsf/mui": "^5.0.0-beta.13", "@rjsf/utils": "^5.0.0-beta.13", - "@rjsf/validator-ajv6": "^5.0.0-beta.13", + "@rjsf/validator-ajv8": "^5.0.0-beta.16", "@tanstack/react-table": "^8.2.2", "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "^13.3.0", @@ -4863,9 +4863,9 @@ } }, "node_modules/@rjsf/core": { - "version": "5.0.0-beta.13", - "resolved": "https://registry.npmjs.org/@rjsf/core/-/core-5.0.0-beta.13.tgz", - "integrity": "sha512-uQ3A9aJhMJsz9ct5tV3ogZkSFEkKUxrM9SJ9Hc8ijxmuaW7Jv8tNv5jiWZZsLvNXlIONX83s6JqkiOJf6IOAvg==", + "version": "5.0.0-beta.16", + "resolved": "https://registry.npmjs.org/@rjsf/core/-/core-5.0.0-beta.16.tgz", + "integrity": "sha512-TqOd3CKptWAswX9PU8pLSoAe5zI03J6Kk/aWAFbMj+xW/6hR5PXHbs5X5kxwpQx7IVXiJZZZpP5n1oDsu4GwNg==", "dependencies": { "lodash": "^4.17.15", "lodash-es": "^4.17.15", @@ -4881,9 +4881,9 @@ } }, "node_modules/@rjsf/mui": { - "version": "5.0.0-beta.13", - "resolved": "https://registry.npmjs.org/@rjsf/mui/-/mui-5.0.0-beta.13.tgz", - "integrity": "sha512-hwCtADpjNssq/CsT3Wj1FDVJfdCN3gptKedGjbusLUEwQqXoVzkzl25e/IRfN8y/JxYu4lMXDU89bN9nJSKWLA==", + "version": "5.0.0-beta.16", + "resolved": "https://registry.npmjs.org/@rjsf/mui/-/mui-5.0.0-beta.16.tgz", + "integrity": "sha512-QskaSc2Zcwqz+nKoACstvn5LhrAx4EmicYc/6kNoj3jKH6MlfVCA7FYumu5g6TIqMrDEvZuZqBKtjL64Tv52PQ==", "engines": { "node": ">=14" }, @@ -4898,9 +4898,9 @@ } }, "node_modules/@rjsf/utils": { - "version": "5.0.0-beta.13", - "resolved": "https://registry.npmjs.org/@rjsf/utils/-/utils-5.0.0-beta.13.tgz", - "integrity": "sha512-hWWWFD2ifjSOhqWueML4OHrZe2HW5pE2nfKGhCObFbwtggHoQlj64xDBsJ1qfUG8DGvCHztJQ/sKIaOvXnpt7w==", + "version": "5.0.0-beta.16", + "resolved": "https://registry.npmjs.org/@rjsf/utils/-/utils-5.0.0-beta.16.tgz", + "integrity": "sha512-dNQ620Q6a9cB28sjjRgJkxIuD9TFd03sNMlcZVdZOuZC6wjfGc4rKG0Lc7+xgLFvSPFKwXJprzfKSM3yuy9jXg==", "dependencies": { "json-schema-merge-allof": "^0.8.1", "jsonpointer": "^5.0.1", @@ -4933,12 +4933,13 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==" }, - "node_modules/@rjsf/validator-ajv6": { - "version": "5.0.0-beta.13", - "resolved": "https://registry.npmjs.org/@rjsf/validator-ajv6/-/validator-ajv6-5.0.0-beta.13.tgz", - "integrity": "sha512-X9N3/HJYV23MjUN/VJHIdBhUdBuMTUsh4HAZm50eUvUAhWK95wIqjjhAs24rzeLajrjFeH7kFr89zAqDgIFhVQ==", + "node_modules/@rjsf/validator-ajv8": { + "version": "5.0.0-beta.16", + "resolved": "https://registry.npmjs.org/@rjsf/validator-ajv8/-/validator-ajv8-5.0.0-beta.16.tgz", + "integrity": "sha512-VrQzR9HEH/1BF2TW/lRJuV+kILzR4geS+iW5Th1OlPeNp1NNWZuSO1kCU9O0JA17t2WHOEl/SFZXZBnN1/zwzQ==", "dependencies": { - "ajv": "^6.7.0", + "ajv-formats": "^2.1.1", + "ajv8": "npm:ajv@^8.11.0", "lodash": "^4.17.15", "lodash-es": "^4.17.15" }, @@ -4946,7 +4947,7 @@ "node": ">=14" }, "peerDependencies": { - "@rjsf/utils": "^5.0.0-beta.1" + "@rjsf/utils": "^5.0.0-beta.12" } }, "node_modules/@rollup/plugin-babel": { @@ -6822,6 +6823,27 @@ "ajv": "^6.9.1" } }, + "node_modules/ajv8": { + "name": "ajv", + "version": "8.12.0", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz", + "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==", + "dependencies": { + "fast-deep-equal": "^3.1.1", + "json-schema-traverse": "^1.0.0", + "require-from-string": "^2.0.2", + "uri-js": "^4.2.2" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/epoberezkin" + } + }, + "node_modules/ajv8/node_modules/json-schema-traverse": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz", + "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==" + }, "node_modules/ansi-align": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.1.tgz", @@ -34767,9 +34789,9 @@ } }, "@rjsf/core": { - "version": "5.0.0-beta.13", - "resolved": "https://registry.npmjs.org/@rjsf/core/-/core-5.0.0-beta.13.tgz", - "integrity": "sha512-uQ3A9aJhMJsz9ct5tV3ogZkSFEkKUxrM9SJ9Hc8ijxmuaW7Jv8tNv5jiWZZsLvNXlIONX83s6JqkiOJf6IOAvg==", + "version": "5.0.0-beta.16", + "resolved": "https://registry.npmjs.org/@rjsf/core/-/core-5.0.0-beta.16.tgz", + "integrity": "sha512-TqOd3CKptWAswX9PU8pLSoAe5zI03J6Kk/aWAFbMj+xW/6hR5PXHbs5X5kxwpQx7IVXiJZZZpP5n1oDsu4GwNg==", "requires": { "lodash": "^4.17.15", "lodash-es": "^4.17.15", @@ -34778,15 +34800,15 @@ } }, "@rjsf/mui": { - "version": "5.0.0-beta.13", - "resolved": "https://registry.npmjs.org/@rjsf/mui/-/mui-5.0.0-beta.13.tgz", - "integrity": "sha512-hwCtADpjNssq/CsT3Wj1FDVJfdCN3gptKedGjbusLUEwQqXoVzkzl25e/IRfN8y/JxYu4lMXDU89bN9nJSKWLA==", + "version": "5.0.0-beta.16", + "resolved": "https://registry.npmjs.org/@rjsf/mui/-/mui-5.0.0-beta.16.tgz", + "integrity": "sha512-QskaSc2Zcwqz+nKoACstvn5LhrAx4EmicYc/6kNoj3jKH6MlfVCA7FYumu5g6TIqMrDEvZuZqBKtjL64Tv52PQ==", "requires": {} }, "@rjsf/utils": { - "version": "5.0.0-beta.13", - "resolved": "https://registry.npmjs.org/@rjsf/utils/-/utils-5.0.0-beta.13.tgz", - "integrity": "sha512-hWWWFD2ifjSOhqWueML4OHrZe2HW5pE2nfKGhCObFbwtggHoQlj64xDBsJ1qfUG8DGvCHztJQ/sKIaOvXnpt7w==", + "version": "5.0.0-beta.16", + "resolved": "https://registry.npmjs.org/@rjsf/utils/-/utils-5.0.0-beta.16.tgz", + "integrity": "sha512-dNQ620Q6a9cB28sjjRgJkxIuD9TFd03sNMlcZVdZOuZC6wjfGc4rKG0Lc7+xgLFvSPFKwXJprzfKSM3yuy9jXg==", "requires": { "json-schema-merge-allof": "^0.8.1", "jsonpointer": "^5.0.1", @@ -34812,12 +34834,13 @@ } } }, - "@rjsf/validator-ajv6": { - "version": "5.0.0-beta.13", - "resolved": "https://registry.npmjs.org/@rjsf/validator-ajv6/-/validator-ajv6-5.0.0-beta.13.tgz", - "integrity": "sha512-X9N3/HJYV23MjUN/VJHIdBhUdBuMTUsh4HAZm50eUvUAhWK95wIqjjhAs24rzeLajrjFeH7kFr89zAqDgIFhVQ==", + "@rjsf/validator-ajv8": { + "version": "5.0.0-beta.16", + "resolved": "https://registry.npmjs.org/@rjsf/validator-ajv8/-/validator-ajv8-5.0.0-beta.16.tgz", + "integrity": "sha512-VrQzR9HEH/1BF2TW/lRJuV+kILzR4geS+iW5Th1OlPeNp1NNWZuSO1kCU9O0JA17t2WHOEl/SFZXZBnN1/zwzQ==", "requires": { - "ajv": "^6.7.0", + "ajv-formats": "^2.1.1", + "ajv8": "npm:ajv@^8.11.0", "lodash": "^4.17.15", "lodash-es": "^4.17.15" } @@ -36295,6 +36318,24 @@ "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==", "requires": {} }, + "ajv8": { + "version": "npm:ajv@8.12.0", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz", + "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==", + "requires": { + "fast-deep-equal": "^3.1.1", + "json-schema-traverse": "^1.0.0", + "require-from-string": "^2.0.2", + "uri-js": "^4.2.2" + }, + "dependencies": { + "json-schema-traverse": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz", + "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==" + } + } + }, "ansi-align": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.1.tgz", diff --git a/spiffworkflow-frontend/package.json b/spiffworkflow-frontend/package.json index 6a84cea9..8b65b945 100644 --- a/spiffworkflow-frontend/package.json +++ b/spiffworkflow-frontend/package.json @@ -18,7 +18,7 @@ "@rjsf/core": "*", "@rjsf/mui": "^5.0.0-beta.13", "@rjsf/utils": "^5.0.0-beta.13", - "@rjsf/validator-ajv6": "^5.0.0-beta.13", + "@rjsf/validator-ajv8": "^5.0.0-beta.16", "@tanstack/react-table": "^8.2.2", "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "^13.3.0", diff --git a/spiffworkflow-frontend/src/routes/TaskShow.tsx b/spiffworkflow-frontend/src/routes/TaskShow.tsx index b6068568..0841da1b 100644 --- a/spiffworkflow-frontend/src/routes/TaskShow.tsx +++ b/spiffworkflow-frontend/src/routes/TaskShow.tsx @@ -1,13 +1,6 @@ import { useContext, useEffect, useState } from 'react'; import { useNavigate, useParams } from 'react-router-dom'; - -// FIXME: npm install @rjsf/validator-ajv8 and use it as soon as -// rawErrors is fixed. -// https://react-jsonschema-form.readthedocs.io/en/latest/usage/validation/ -// https://github.com/rjsf-team/react-jsonschema-form/issues/2309 links to a codesandbox that might be useful to fork -// if we wanted to file a defect against rjsf to show the difference between validator-ajv6 and validator-ajv8. -// https://github.com/rjsf-team/react-jsonschema-form/blob/main/docs/api-reference/uiSchema.md talks about rawErrors -import validator from '@rjsf/validator-ajv6'; +import validator from '@rjsf/validator-ajv8'; import { TabList, diff --git a/spiffworkflow-frontend/src/themes/carbon/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx b/spiffworkflow-frontend/src/themes/carbon/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx index b09acfb9..cf596f98 100644 --- a/spiffworkflow-frontend/src/themes/carbon/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx +++ b/spiffworkflow-frontend/src/themes/carbon/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx @@ -1,12 +1,23 @@ import React, { CSSProperties } from 'react'; -import Box from '@mui/material/Box'; -import Grid from '@mui/material/Grid'; -import Paper from '@mui/material/Paper'; -import { ArrayFieldTemplateItemType } from '@rjsf/utils'; +import { + ArrayFieldTemplateItemType, + FormContextType, + RJSFSchema, + StrictRJSFSchema, +} from '@rjsf/utils'; -function ArrayFieldItemTemplate(props: ArrayFieldTemplateItemType) { +/** The `ArrayFieldItemTemplate` component is the template used to render an items of an array. + * + * @param props - The `ArrayFieldTemplateItemType` props for the component + */ +export default function ArrayFieldItemTemplate< + T = any, + S extends StrictRJSFSchema = RJSFSchema, + F extends FormContextType = any +>(props: ArrayFieldTemplateItemType) { const { children, + className, disabled, hasToolbar, hasMoveDown, @@ -16,8 +27,8 @@ function ArrayFieldItemTemplate(props: ArrayFieldTemplateItemType) { onDropIndexClick, onReorderClick, readonly, - uiSchema, registry, + uiSchema, } = props; const { MoveDownButton, MoveUpButton, RemoveButton } = registry.templates.ButtonTemplates; @@ -26,47 +37,49 @@ function ArrayFieldItemTemplate(props: ArrayFieldTemplateItemType) { paddingLeft: 6, paddingRight: 6, fontWeight: 'bold', - minWidth: 0, }; return ( - - - - - {children} - - - +
+
{children}
{hasToolbar && ( - - {(hasMoveUp || hasMoveDown) && ( - - )} - {(hasMoveUp || hasMoveDown) && ( - - )} - {hasRemove && ( - - )} - +
+
+ {(hasMoveUp || hasMoveDown) && ( + + )} + {(hasMoveUp || hasMoveDown) && ( + + )} + {hasRemove && ( + + )} +
+
)} - +
); } - -export default ArrayFieldItemTemplate; diff --git a/spiffworkflow-frontend/src/themes/carbon/ArrayFieldTemplate/ArrayFieldTemplate.tsx b/spiffworkflow-frontend/src/themes/carbon/ArrayFieldTemplate/ArrayFieldTemplate.tsx index 03c88951..0c588813 100644 --- a/spiffworkflow-frontend/src/themes/carbon/ArrayFieldTemplate/ArrayFieldTemplate.tsx +++ b/spiffworkflow-frontend/src/themes/carbon/ArrayFieldTemplate/ArrayFieldTemplate.tsx @@ -1,17 +1,26 @@ import React from 'react'; -import Box from '@mui/material/Box'; -import Grid from '@mui/material/Grid'; -import Paper from '@mui/material/Paper'; import { - ArrayFieldTemplateItemType, - ArrayFieldTemplateProps, getTemplate, getUiOptions, + ArrayFieldTemplateProps, + ArrayFieldTemplateItemType, + FormContextType, + RJSFSchema, + StrictRJSFSchema, } from '@rjsf/utils'; -function ArrayFieldTemplate(props: ArrayFieldTemplateProps) { +/** The `ArrayFieldTemplate` component is the template used to render all items in an array. + * + * @param props - The `ArrayFieldTemplateItemType` props for the component + */ +export default function ArrayFieldTemplate< + T = any, + S extends StrictRJSFSchema = RJSFSchema, + F extends FormContextType = any +>(props: ArrayFieldTemplateProps) { const { canAdd, + className, disabled, idSchema, uiSchema, @@ -23,68 +32,62 @@ function ArrayFieldTemplate(props: ArrayFieldTemplateProps) { schema, title, } = props; - const uiOptions = getUiOptions(uiSchema); - const ArrayFieldDescriptionTemplate = - getTemplate<'ArrayFieldDescriptionTemplate'>( - 'ArrayFieldDescriptionTemplate', - registry, - uiOptions - ); - const ArrayFieldItemTemplate = getTemplate<'ArrayFieldItemTemplate'>( + const uiOptions = getUiOptions(uiSchema); + const ArrayFieldDescriptionTemplate = getTemplate< + 'ArrayFieldDescriptionTemplate', + T, + S, + F + >('ArrayFieldDescriptionTemplate', registry, uiOptions); + const ArrayFieldItemTemplate = getTemplate<'ArrayFieldItemTemplate', T, S, F>( 'ArrayFieldItemTemplate', registry, uiOptions ); - const ArrayFieldTitleTemplate = getTemplate<'ArrayFieldTitleTemplate'>( + const ArrayFieldTitleTemplate = getTemplate< 'ArrayFieldTitleTemplate', - registry, - uiOptions - ); + T, + S, + F + >('ArrayFieldTitleTemplate', registry, uiOptions); // Button templates are not overridden in the uiSchema const { ButtonTemplates: { AddButton }, } = registry.templates; return ( - - - - - - {items && - items.map(({ key, ...itemProps }: ArrayFieldTemplateItemType) => ( +
+ + +
+ {items && + items.map( + ({ key, ...itemProps }: ArrayFieldTemplateItemType) => ( - ))} - {canAdd && ( - - - - - - - + ) )} - - - +
+ {canAdd && ( + + )} +
); } - -export default ArrayFieldTemplate; diff --git a/spiffworkflow-frontend/src/themes/carbon/FieldTemplate/Label.tsx b/spiffworkflow-frontend/src/themes/carbon/FieldTemplate/Label.tsx new file mode 100644 index 00000000..4a936e97 --- /dev/null +++ b/spiffworkflow-frontend/src/themes/carbon/FieldTemplate/Label.tsx @@ -0,0 +1,29 @@ +import React from "react"; + +const REQUIRED_FIELD_SYMBOL = "*"; + +export type LabelProps = { + /** The label for the field */ + label?: string; + /** A boolean value stating if the field is required */ + required?: boolean; + /** The id of the input field being labeled */ + id?: string; +}; + +/** Renders a label for a field + * + * @param props - The `LabelProps` for this component + */ +export default function Label(props: LabelProps) { + const { label, required, id } = props; + if (!label) { + return null; + } + return ( + + ); +} diff --git a/spiffworkflow-frontend/src/themes/carbon/ObjectFieldTemplate/ObjectFieldTemplate.tsx b/spiffworkflow-frontend/src/themes/carbon/ObjectFieldTemplate/ObjectFieldTemplate.tsx index 7d9557e8..e7564f1a 100644 --- a/spiffworkflow-frontend/src/themes/carbon/ObjectFieldTemplate/ObjectFieldTemplate.tsx +++ b/spiffworkflow-frontend/src/themes/carbon/ObjectFieldTemplate/ObjectFieldTemplate.tsx @@ -1,89 +1,87 @@ import React from 'react'; -import Grid from '@mui/material/Grid'; import { + FormContextType, + ObjectFieldTemplatePropertyType, ObjectFieldTemplateProps, + RJSFSchema, + StrictRJSFSchema, canExpand, getTemplate, getUiOptions, } from '@rjsf/utils'; -function ObjectFieldTemplate({ - description, - title, - properties, - required, - disabled, - readonly, - uiSchema, - idSchema, - schema, - formData, - onAddClick, - registry, -}: ObjectFieldTemplateProps) { - const uiOptions = getUiOptions(uiSchema); - const TitleFieldTemplate = getTemplate<'TitleFieldTemplate'>( +/** The `ObjectFieldTemplate` is the template to use to render all the inner properties of an object along with the + * title and description if available. If the object is expandable, then an `AddButton` is also rendered after all + * the properties. + * + * @param props - The `ObjectFieldTemplateProps` for this component + */ +export default function ObjectFieldTemplate< + T = any, + S extends StrictRJSFSchema = RJSFSchema, + F extends FormContextType = any +>(props: ObjectFieldTemplateProps) { + const { + description, + disabled, + formData, + idSchema, + onAddClick, + properties, + readonly, + registry, + required, + schema, + title, + uiSchema, + } = props; + const options = getUiOptions(uiSchema); + const TitleFieldTemplate = getTemplate<'TitleFieldTemplate', T, S, F>( 'TitleFieldTemplate', registry, - uiOptions + options ); - const DescriptionFieldTemplate = getTemplate<'DescriptionFieldTemplate'>( + const DescriptionFieldTemplate = getTemplate< 'DescriptionFieldTemplate', - registry, - uiOptions - ); + T, + S, + F + >('DescriptionFieldTemplate', registry, options); // Button templates are not overridden in the uiSchema const { ButtonTemplates: { AddButton }, } = registry.templates; return ( - <> - {(uiOptions.title || title) && ( +
+ {(options.title || title) && ( )} - {(uiOptions.description || description) && ( + {(options.description || description) && ( )} - - {properties.map((element, index) => - // Remove the if the inner element is hidden as the - // itself would otherwise still take up space. - element.hidden ? ( - element.content - ) : ( - - {element.content} - - ) - )} - {canExpand(schema, uiSchema, formData) && ( - - - - - - )} - - + {properties.map((prop: ObjectFieldTemplatePropertyType) => prop.content)} + {canExpand(schema, uiSchema, formData) && ( + + )} +
); } - -export default ObjectFieldTemplate; diff --git a/spiffworkflow-frontend/src/themes/carbon/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx b/spiffworkflow-frontend/src/themes/carbon/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx index 954d82c4..ef15f9dc 100644 --- a/spiffworkflow-frontend/src/themes/carbon/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx +++ b/spiffworkflow-frontend/src/themes/carbon/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx @@ -1,80 +1,73 @@ -import React, { CSSProperties } from 'react'; -import FormControl from '@mui/material/FormControl'; -import Grid from '@mui/material/Grid'; -import InputLabel from '@mui/material/InputLabel'; -import Input from '@mui/material/OutlinedInput'; import { ADDITIONAL_PROPERTY_FLAG, + FormContextType, + RJSFSchema, + StrictRJSFSchema, WrapIfAdditionalTemplateProps, } from '@rjsf/utils'; -function WrapIfAdditionalTemplate({ - children, - classNames, - disabled, - id, - label, - onDropPropertyClick, - onKeyChange, - readonly, - required, - schema, - uiSchema, - registry, -}: WrapIfAdditionalTemplateProps) { +import Label from '../FieldTemplate/Label'; + +/** The `WrapIfAdditional` component is used by the `FieldTemplate` to rename, or remove properties that are + * part of an `additionalProperties` part of a schema. + * + * @param props - The `WrapIfAdditionalProps` for this component + */ +export default function WrapIfAdditionalTemplate< + T = any, + S extends StrictRJSFSchema = RJSFSchema, + F extends FormContextType = any +>(props: WrapIfAdditionalTemplateProps) { + const { + id, + classNames, + disabled, + label, + onKeyChange, + onDropPropertyClick, + readonly, + required, + schema, + children, + uiSchema, + registry, + } = props; // Button templates are not overridden in the uiSchema const { RemoveButton } = registry.templates.ButtonTemplates; const keyLabel = `${label} Key`; // i18n ? const additional = ADDITIONAL_PROPERTY_FLAG in schema; - const btnStyle: CSSProperties = { - flex: 1, - paddingLeft: 6, - paddingRight: 6, - fontWeight: 'bold', - }; if (!additional) { return
{children}
; } - const handleBlur = ({ target }: React.FocusEvent) => - onKeyChange(target.value); - return ( - - - - {keyLabel} - +
+
+
+
+
+
{children}
+
+ - - - - {children} - - - - - +
+
+ ); } - -export default WrapIfAdditionalTemplate;