From e1b9ae894af1a5836ffb0b37ebe4be884671f547 Mon Sep 17 00:00:00 2001 From: dcshzj <27919917+dcshzj@users.noreply.github.com> Date: Mon, 15 Jul 2024 18:31:31 +0800 Subject: [PATCH] feat: don't set the first item as default for anyOf --- apps/studio/src/constants/formBuilder.ts | 1 + .../components/form-builder/FormBuilder.tsx | 3 ++ .../controls/JsonFormsAnyOfControl.tsx | 14 ++++++--- .../controls/JsonFormsConstControl.tsx | 29 +++++++++++++++++++ .../controls/JsonFormsDropdownControl.tsx | 7 ++++- .../form-builder/renderers/controls/index.ts | 4 +++ 6 files changed, 53 insertions(+), 5 deletions(-) create mode 100644 apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/JsonFormsConstControl.tsx diff --git a/apps/studio/src/constants/formBuilder.ts b/apps/studio/src/constants/formBuilder.ts index b38aaa31a1..3bd988e69d 100644 --- a/apps/studio/src/constants/formBuilder.ts +++ b/apps/studio/src/constants/formBuilder.ts @@ -2,6 +2,7 @@ export const JSON_FORMS_RANKING = { ArrayControl: 4, BooleanControl: 2, + ConstControl: 3, DropdownControl: 2, IntegerControl: 4, TextControl: 1, diff --git a/apps/studio/src/features/editing-experience/components/form-builder/FormBuilder.tsx b/apps/studio/src/features/editing-experience/components/form-builder/FormBuilder.tsx index f4aebb1908..9b8a7309c9 100644 --- a/apps/studio/src/features/editing-experience/components/form-builder/FormBuilder.tsx +++ b/apps/studio/src/features/editing-experience/components/form-builder/FormBuilder.tsx @@ -14,6 +14,8 @@ import { jsonFormsArrayControlTester, JsonFormsBooleanControl, jsonFormsBooleanControlTester, + JsonFormsConstControl, + jsonFormsConstControlTester, JsonFormsDropdownControl, jsonFormsDropdownControlTester, jsonFormsGroupLayoutRenderer, @@ -36,6 +38,7 @@ const renderers: JsonFormsRendererRegistryEntry[] = [ { tester: jsonFormsObjectControlTester, renderer: JsonFormsObjectControl }, { tester: jsonFormsArrayControlTester, renderer: JsonFormsArrayControl }, { tester: jsonFormsBooleanControlTester, renderer: JsonFormsBooleanControl }, + { tester: jsonFormsConstControlTester, renderer: JsonFormsConstControl }, { tester: jsonFormsDropdownControlTester, renderer: JsonFormsDropdownControl, diff --git a/apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/JsonFormsAnyOfControl.tsx b/apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/JsonFormsAnyOfControl.tsx index c65f236775..2553b5f334 100644 --- a/apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/JsonFormsAnyOfControl.tsx +++ b/apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/JsonFormsAnyOfControl.tsx @@ -25,6 +25,7 @@ export function JsonFormsAnyOfControl({ uischema, uischemas, label, + handleChange, }: CombinatorRendererProps) { const anyOfRenderInfos = createCombinatorRenderInfos( schema.anyOf ?? [], @@ -35,7 +36,7 @@ export function JsonFormsAnyOfControl({ uischemas, ) - const variants = anyOfRenderInfos.map((anyOfRenderInfo) => { + const options = anyOfRenderInfos.map((anyOfRenderInfo) => { const option = String(anyOfRenderInfo.schema.const || anyOfRenderInfo.label) return { @@ -44,7 +45,12 @@ export function JsonFormsAnyOfControl({ } }) - const [variant, setVariant] = useState(anyOfRenderInfos[0]?.label || "") + const [variant, setVariant] = useState("") + + const onChange = (value: string) => { + setVariant(value) + handleChange(path, value) + } return ( <> @@ -54,9 +60,9 @@ export function JsonFormsAnyOfControl({ diff --git a/apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/JsonFormsConstControl.tsx b/apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/JsonFormsConstControl.tsx new file mode 100644 index 0000000000..6de23e136e --- /dev/null +++ b/apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/JsonFormsConstControl.tsx @@ -0,0 +1,29 @@ +import type { ControlProps, RankedTester } from "@jsonforms/core" +import { useEffect } from "react" +import { and, isStringControl, rankWith, schemaMatches } from "@jsonforms/core" +import { withJsonFormsControlProps } from "@jsonforms/react" + +import { JSON_FORMS_RANKING } from "~/constants/formBuilder" + +export const jsonFormsConstControlTester: RankedTester = rankWith( + JSON_FORMS_RANKING.ConstControl, + and( + isStringControl, + schemaMatches((schema) => schema.const !== undefined), + ), +) + +export function JsonFormsConstControl({ + handleChange, + path, + schema, +}: ControlProps) { + // TODO: Make the default value persist inside JSONForms + useEffect(() => { + handleChange(path, schema.const) + }, [handleChange, path, schema]) + + return null +} + +export default withJsonFormsControlProps(JsonFormsConstControl) diff --git a/apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/JsonFormsDropdownControl.tsx b/apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/JsonFormsDropdownControl.tsx index 66ff7debd1..dab2f3805d 100644 --- a/apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/JsonFormsDropdownControl.tsx +++ b/apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/JsonFormsDropdownControl.tsx @@ -3,7 +3,7 @@ import type { OwnPropsOfEnum, RankedTester, } from "@jsonforms/core" -import { useState } from "react" +import { useEffect, useState } from "react" import { Box, FormControl } from "@chakra-ui/react" import { isEnumControl, rankWith } from "@jsonforms/core" import { withJsonFormsEnumProps } from "@jsonforms/react" @@ -28,6 +28,11 @@ export function JsonFormsDropdownControl({ }: ControlProps & OwnPropsOfEnum) { const [dropdownValue, setDropdownValue] = useState(data || "") + // Use the default value if it exists + useEffect(() => { + handleChange(path, schema.default || schema.const) + }, [path, schema.default, schema.const, handleChange]) + if (!options || (options.length === 1 && !!schema.const)) { return null } diff --git a/apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/index.ts b/apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/index.ts index b01b7fb55a..b6661f6a1b 100644 --- a/apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/index.ts +++ b/apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/index.ts @@ -6,6 +6,10 @@ export { default as JsonFormsBooleanControl, jsonFormsBooleanControlTester, } from "./JsonFormsBooleanControl" +export { + default as JsonFormsConstControl, + jsonFormsConstControlTester, +} from "./JsonFormsConstControl" export { default as JsonFormsDropdownControl, jsonFormsDropdownControlTester,