From 48e1cd882a12b74648b17f26bc97d4d625ab2d3b Mon Sep 17 00:00:00 2001 From: Elio Struyf Date: Thu, 16 Mar 2023 15:18:46 +0100 Subject: [PATCH] Added an unknown field for uniforms --- package-lock.json | 22 +++++---- package.json | 2 +- .../uniforms-frontmatter/AutoField.tsx | 3 ++ .../uniforms-frontmatter/UnknownField.tsx | 37 +++++++++++++++ .../components/DataView/DataForm.tsx | 45 +++++++++++++++---- src/dashboardWebView/styles.css | 2 +- 6 files changed, 92 insertions(+), 19 deletions(-) create mode 100644 src/components/uniforms-frontmatter/UnknownField.tsx diff --git a/package-lock.json b/package-lock.json index 55c53366..e6d6a781 100644 --- a/package-lock.json +++ b/package-lock.json @@ -42,7 +42,7 @@ "@vscode/codicons": "0.0.20", "@vscode/webview-ui-toolkit": "^0.9.1", "@webpack-cli/serve": "^1.6.0", - "ajv": "^8.8.2", + "ajv": "^8.12.0", "array-move": "^4.0.0", "assert": "^2.0.0", "autoprefixer": "^10.4.13", @@ -1835,9 +1835,10 @@ } }, "node_modules/ajv": { - "version": "8.8.2", + "version": "8.12.0", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz", + "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==", "dev": true, - "license": "MIT", "dependencies": { "fast-deep-equal": "^3.1.1", "json-schema-traverse": "^1.0.0", @@ -11641,9 +11642,10 @@ } }, "node_modules/uniforms": { - "version": "3.7.0", + "version": "3.10.2", + "resolved": "https://registry.npmjs.org/uniforms/-/uniforms-3.10.2.tgz", + "integrity": "sha512-5FIqpAqyWDmDhaNkmXOxuz8dJ09jPg0gTpn13O6WiqtCY+nmVtHK4yGSpFU1UIjwBt9KfbRPFFmCAbYlCyV4bw==", "dev": true, - "license": "MIT", "dependencies": { "invariant": "^2.0.0", "lodash": "^4.0.0", @@ -11653,7 +11655,7 @@ "url": "https://github.com/vazco/uniforms?sponsor=1" }, "peerDependencies": { - "react": "^17.0.0 || ^16.8.0" + "react": "^18.0.0 || ^17.0.0 || ^16.8.0" } }, "node_modules/uniforms-antd": { @@ -14180,7 +14182,9 @@ } }, "ajv": { - "version": "8.8.2", + "version": "8.12.0", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz", + "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==", "dev": true, "requires": { "fast-deep-equal": "^3.1.1", @@ -20722,7 +20726,9 @@ } }, "uniforms": { - "version": "3.7.0", + "version": "3.10.2", + "resolved": "https://registry.npmjs.org/uniforms/-/uniforms-3.10.2.tgz", + "integrity": "sha512-5FIqpAqyWDmDhaNkmXOxuz8dJ09jPg0gTpn13O6WiqtCY+nmVtHK4yGSpFU1UIjwBt9KfbRPFFmCAbYlCyV4bw==", "dev": true, "requires": { "invariant": "^2.0.0", diff --git a/package.json b/package.json index 92e6769a..df9d36db 100644 --- a/package.json +++ b/package.json @@ -2316,7 +2316,7 @@ "@vscode/codicons": "0.0.20", "@vscode/webview-ui-toolkit": "^0.9.1", "@webpack-cli/serve": "^1.6.0", - "ajv": "^8.8.2", + "ajv": "^8.12.0", "array-move": "^4.0.0", "assert": "^2.0.0", "autoprefixer": "^10.4.13", diff --git a/src/components/uniforms-frontmatter/AutoField.tsx b/src/components/uniforms-frontmatter/AutoField.tsx index c04ff6e9..8958e699 100644 --- a/src/components/uniforms-frontmatter/AutoField.tsx +++ b/src/components/uniforms-frontmatter/AutoField.tsx @@ -11,6 +11,7 @@ import NumField from './NumField'; import RadioField from './RadioField'; import SelectField from './SelectField'; import TextField from './TextField'; +import UnknownField from './UnknownField'; const AutoField = createAutoField((props) => { if (props.allowedValues) { @@ -33,6 +34,8 @@ const AutoField = createAutoField((props) => { return LongTextField; } return TextField; + default: + return UnknownField; } return invariant(false, 'Unsupported field type: %s', props.fieldType); diff --git a/src/components/uniforms-frontmatter/UnknownField.tsx b/src/components/uniforms-frontmatter/UnknownField.tsx new file mode 100644 index 00000000..0a19633b --- /dev/null +++ b/src/components/uniforms-frontmatter/UnknownField.tsx @@ -0,0 +1,37 @@ +import { Ref } from 'react'; +import * as React from 'react'; +import { HTMLFieldProps, connectField, filterDOMProps } from 'uniforms'; +import { LabelField } from './LabelField'; + +export type UnknownFieldProps = HTMLFieldProps< + string, + HTMLDivElement, + { inputRef?: Ref } +>; + +function UnknownField({ + autoComplete, + disabled, + id, + inputRef, + label, + name, + onChange, + placeholder, + readOnly, + type, + value, + ...props +}: UnknownFieldProps) { + return ( +
+ + +
Unknown field
+
+ ); +} + +UnknownField.defaultProps = { type: 'text' }; + +export default connectField(UnknownField, { kind: 'leaf' }); diff --git a/src/dashboardWebView/components/DataView/DataForm.tsx b/src/dashboardWebView/components/DataView/DataForm.tsx index 8db8cfbc..fb87fe87 100644 --- a/src/dashboardWebView/components/DataView/DataForm.tsx +++ b/src/dashboardWebView/components/DataView/DataForm.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Ajv from 'ajv'; +import Ajv, { FormatDefinition } from 'ajv'; import { useEffect, useState } from 'react'; import { JSONSchemaBridge } from 'uniforms-bridge-json-schema'; import { AutoFields, AutoForm, ErrorsField } from '../../../components/uniforms-frontmatter'; @@ -21,21 +21,41 @@ export const DataForm: React.FunctionComponent = ({ onClear }: React.PropsWithChildren) => { const [bridge, setBridge] = useState(null); + const [error, setError] = useState(undefined); const { getColors } = useThemeColors(); const ajv = new Ajv({ allErrors: true, useDefaults: true, + validateSchema: false, strict: false, + strictTypes: false + }); + + // Added the multiline keyword for the textarea field + ajv.addKeyword({ + keyword: 'multiline', + type: 'boolean', + schemaType: 'boolean' }); const jsonValidator = (schema: object) => { - const validator = ajv.compile(schema); + try { + setError(undefined); + const validator = ajv.compile(schema); - return (crntModel: object) => { - validator(crntModel); - return validator.errors?.length ? { details: validator.errors } : null; - }; + return (crntModel: object) => { + if (validator(crntModel)) { + return null; + } else { + console.log(validator.errors) + return { details: validator.errors } + } + }; + } catch (error) { + setError((error as Error).message); + return () => { }; + } }; useEffect(() => { @@ -48,13 +68,21 @@ export const DataForm: React.FunctionComponent = ({ return null; } + if (error) { + return ( +
+ {error} +
+ ) + } + return (
{model ? ( -

Modify the data

+

Modify the data

) : ( -

Add new data

+

Add new data

)} = ({
-
diff --git a/src/dashboardWebView/styles.css b/src/dashboardWebView/styles.css index ee65cd7e..772fea8e 100644 --- a/src/dashboardWebView/styles.css +++ b/src/dashboardWebView/styles.css @@ -333,7 +333,7 @@ } } -.experimental { +.experimental form { [type='text'], [type='email'], [type='url'],