diff --git a/src/common/AntDJsonForm.tsx b/src/common/AntDJsonForm.tsx index e9d6c49..a6cbebb 100644 --- a/src/common/AntDJsonForm.tsx +++ b/src/common/AntDJsonForm.tsx @@ -8,7 +8,7 @@ import { UISchema } from "../ui-schema" import { rendererRegistryEntries as _rendererRegistryEntries, cellRegistryEntries, -} from "../renderers" +} from "../renderer-registry-entries" type Props = { data: Record diff --git a/src/common/FormStateWrapper.tsx b/src/common/FormStateWrapper.tsx index e055fc9..4c3d76a 100644 --- a/src/common/FormStateWrapper.tsx +++ b/src/common/FormStateWrapper.tsx @@ -4,7 +4,10 @@ import { Form } from "antd" import { JsonSchema7 } from "@jsonforms/core" import { UISchema } from "../ui-schema" -import { cellRegistryEntries, rendererRegistryEntries } from "../renderers" +import { + cellRegistryEntries, + rendererRegistryEntries, +} from "../renderer-registry-entries" import { useState } from "react" type RenderProps> = { diff --git a/src/controls/BooleanControl.tsx b/src/controls/BooleanControl.tsx index 14233f8..932f9c7 100644 --- a/src/controls/BooleanControl.tsx +++ b/src/controls/BooleanControl.tsx @@ -3,6 +3,7 @@ import { ControlProps, isDescriptionHidden } from "@jsonforms/core" import { Form } from "antd" import { Checkbox } from "../antd/Checkbox" import { QuestionCircleOutlined } from "@ant-design/icons" +import { withJsonFormsControlProps } from "@jsonforms/react" export function BooleanControl({ data, @@ -72,3 +73,5 @@ export function BooleanControl({ ) } + +export const BooleanRenderer = withJsonFormsControlProps(BooleanControl) diff --git a/src/controls/NumericControl.tsx b/src/controls/NumericControl.tsx index 932489a..dbf1ed7 100644 --- a/src/controls/NumericControl.tsx +++ b/src/controls/NumericControl.tsx @@ -2,6 +2,7 @@ import type { ControlProps, RendererProps } from "@jsonforms/core" import { Col, Form } from "antd" import type { Rule } from "antd/es/form" import { InputNumber } from "../antd/InputNumber" +import { withJsonFormsControlProps } from "@jsonforms/react" export const NumericControl = (props: ControlProps & RendererProps) => { if (!props.visible) return null @@ -27,3 +28,5 @@ export const NumericControl = (props: ControlProps & RendererProps) => { ) } + +export const NumericRenderer = withJsonFormsControlProps(NumericControl) diff --git a/src/controls/NumericSliderControl.tsx b/src/controls/NumericSliderControl.tsx index 9d44cf0..da2bc24 100644 --- a/src/controls/NumericSliderControl.tsx +++ b/src/controls/NumericSliderControl.tsx @@ -3,6 +3,7 @@ import { Col, Form, Row } from "antd" import type { Rule } from "antd/es/form" import { InputNumber } from "../antd/InputNumber" import { Slider } from "../antd/Slider" +import { withJsonFormsControlProps } from "@jsonforms/react" export const NumericSliderControl = (props: ControlProps & RendererProps) => { if (!props.visible) return null @@ -33,3 +34,6 @@ export const NumericSliderControl = (props: ControlProps & RendererProps) => { ) } + +export const NumericSliderRenderer = + withJsonFormsControlProps(NumericSliderControl) diff --git a/src/controls/ObjectControl.tsx b/src/controls/ObjectControl.tsx index 369d8af..82343e3 100644 --- a/src/controls/ObjectControl.tsx +++ b/src/controls/ObjectControl.tsx @@ -4,7 +4,7 @@ import { Generate, StatePropsOfControlWithDetail, } from "@jsonforms/core" -import { JsonFormsDispatch } from "@jsonforms/react" +import { JsonFormsDispatch, withJsonFormsDetailProps } from "@jsonforms/react" import isEmpty from "lodash.isempty" export function ObjectControl({ @@ -53,3 +53,5 @@ export function ObjectControl({ /> ) } + +export const ObjectRenderer = withJsonFormsDetailProps(ObjectControl) diff --git a/src/controls/TextControl.tsx b/src/controls/TextControl.tsx index c4c3a13..d54a652 100644 --- a/src/controls/TextControl.tsx +++ b/src/controls/TextControl.tsx @@ -9,6 +9,7 @@ import type { ControlProps } from "@jsonforms/core" import type { TextControlOptions, TextControlType } from "../ui-schema" import { assertNever } from "../common/assert-never" +import { withJsonFormsControlProps } from "@jsonforms/react" interface TextControlProps extends ControlProps { data: string handleChange(path: string, value: string): void @@ -113,3 +114,5 @@ function TextControlInput({ type, ...rest }: TextControlInputProps) { function coerceToString(value: number) { return value.toString() } + +export const TextRenderer = withJsonFormsControlProps(TextControl) diff --git a/src/controls/UnknownControl.tsx b/src/controls/UnknownControl.tsx index 8242185..ef2d832 100644 --- a/src/controls/UnknownControl.tsx +++ b/src/controls/UnknownControl.tsx @@ -1,4 +1,5 @@ import { CellProps, ControlProps } from "@jsonforms/core" +import { withJsonFormsControlProps } from "@jsonforms/react" export function UnknownControl(props: ControlProps | CellProps) { // console.log({ schema: props.schema, path: props.path, schemaPath: props.schemaPath, props }) @@ -9,3 +10,5 @@ export function UnknownControl(props: ControlProps | CellProps) { ) } + +export const UnknownRenderer = withJsonFormsControlProps(UnknownControl) diff --git a/src/index.ts b/src/index.ts index b6f12a6..f20d842 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,13 +1,16 @@ -export { rendererRegistryEntries, cellRegistryEntries } from "./renderers" +export { + rendererRegistryEntries, + cellRegistryEntries, +} from "./renderer-registry-entries" export type * from "./ui-schema" export { AlertLayout } from "./layouts/AlertLayout" export { BooleanControl } from "./controls/BooleanControl" -export { TextControl } from "./controls/TextControl" -export { UnknownControl } from "./controls/UnknownControl" -export { HorizontalLayout } from "./layouts/HorizontalLayout" -export { VerticalLayout } from "./layouts/VerticalLayout" -export { ObjectControl } from "./controls/ObjectControl" export { GroupLayout } from "./layouts/GroupLayout" +export { HorizontalLayout } from "./layouts/HorizontalLayout" export { NumericControl } from "./controls/NumericControl" export { NumericSliderControl } from "./controls/NumericSliderControl" +export { ObjectControl } from "./controls/ObjectControl" +export { TextControl } from "./controls/TextControl" +export { UnknownControl } from "./controls/UnknownControl" +export { VerticalLayout } from "./layouts/VerticalLayout" diff --git a/src/layouts/AlertLayout.tsx b/src/layouts/AlertLayout.tsx index f32137b..73dcba0 100644 --- a/src/layouts/AlertLayout.tsx +++ b/src/layouts/AlertLayout.tsx @@ -1,6 +1,7 @@ import { LabelProps, RendererProps } from "@jsonforms/core" import { Alert } from "antd" import { AlertLayoutOptions } from "../ui-schema" +import { withJsonFormsLabelProps } from "@jsonforms/react" export function AlertLayout({ text, uischema }: LabelProps & RendererProps) { const options = uischema.options as AlertLayoutOptions @@ -13,3 +14,5 @@ export function AlertLayout({ text, uischema }: LabelProps & RendererProps) { /> ) } + +export const AlertLayoutRenderer = withJsonFormsLabelProps(AlertLayout) diff --git a/src/layouts/GroupLayout.tsx b/src/layouts/GroupLayout.tsx index 1f86e58..2eba0a4 100644 --- a/src/layouts/GroupLayout.tsx +++ b/src/layouts/GroupLayout.tsx @@ -5,6 +5,7 @@ import { import { UISchema } from "../ui-schema" import { Divider } from "antd" import { AntDLayout } from "./LayoutRenderer" +import React from "react" export type LayoutRendererProps = OwnPropsOfRenderer & { elements: UISchema[] @@ -31,3 +32,5 @@ export function GroupLayout({ ) } + +export const GroupLayoutRenderer = React.memo(GroupLayout) diff --git a/src/layouts/HorizontalLayout.tsx b/src/layouts/HorizontalLayout.tsx index 3860111..1d45bdd 100644 --- a/src/layouts/HorizontalLayout.tsx +++ b/src/layouts/HorizontalLayout.tsx @@ -3,6 +3,7 @@ import isEmpty from "lodash.isempty" import { AntDLayout, AntDLayoutProps } from "./LayoutRenderer" import { HorizontalLayout as HorizontalLayoutUISchema } from "../ui-schema" import { Form, Row } from "antd" +import { withJsonFormsLayoutProps } from "@jsonforms/react" export function HorizontalLayout({ uischema, @@ -37,3 +38,6 @@ export function HorizontalLayout({ ) } + +export const HorizontalLayoutRenderer = + withJsonFormsLayoutProps(HorizontalLayout) diff --git a/src/layouts/VerticalLayout.tsx b/src/layouts/VerticalLayout.tsx index 5e3f9b3..58fbe3f 100644 --- a/src/layouts/VerticalLayout.tsx +++ b/src/layouts/VerticalLayout.tsx @@ -2,6 +2,7 @@ import { LayoutProps, GroupLayout } from "@jsonforms/core" import { AntDLayout, AntDLayoutProps } from "./LayoutRenderer" import { Form, FormInstance, FormProps } from "antd" import { VerticalLayout as VerticalLayoutUISchema } from "../ui-schema" +import { withJsonFormsLayoutProps } from "@jsonforms/react" export function VerticalLayout({ uischema, @@ -38,3 +39,5 @@ function getFormLayoutOptions(form: FormInstance): Partial { component: form ? "div" : "form", } } + +export const VerticalLayoutRenderer = withJsonFormsLayoutProps(VerticalLayout) diff --git a/src/renderers.ts b/src/renderer-registry-entries.ts similarity index 51% rename from src/renderers.ts rename to src/renderer-registry-entries.ts index 947dca3..0c1c95e 100644 --- a/src/renderers.ts +++ b/src/renderer-registry-entries.ts @@ -15,59 +15,52 @@ import { and, or, } from "@jsonforms/core" -import { - withJsonFormsControlProps, - withJsonFormsLabelProps, - withJsonFormsCellProps, - withJsonFormsLayoutProps, - withJsonFormsDetailProps, -} from "@jsonforms/react" +import { withJsonFormsCellProps } from "@jsonforms/react" -import { BooleanControl } from "./controls/BooleanControl" -import { AlertLayout } from "./layouts/AlertLayout" -import { TextControl } from "./controls/TextControl" -import { UnknownControl } from "./controls/UnknownControl" -import { HorizontalLayout } from "./layouts/HorizontalLayout" -import { VerticalLayout } from "./layouts/VerticalLayout" -import { ObjectControl } from "./controls/ObjectControl" -import { GroupLayout } from "./layouts/GroupLayout" -import { NumericControl } from "./controls/NumericControl" -import { NumericSliderControl } from "./controls/NumericSliderControl" -import React from "react" +import { BooleanRenderer } from "./controls/BooleanControl" +import { AlertLayoutRenderer } from "./layouts/AlertLayout" +import { TextRenderer } from "./controls/TextControl" +import { UnknownControl, UnknownRenderer } from "./controls/UnknownControl" +import { HorizontalLayoutRenderer } from "./layouts/HorizontalLayout" +import { VerticalLayoutRenderer } from "./layouts/VerticalLayout" +import { ObjectRenderer } from "./controls/ObjectControl" +import { GroupLayoutRenderer } from "./layouts/GroupLayout" +import { NumericRenderer } from "./controls/NumericControl" +import { NumericSliderRenderer } from "./controls/NumericSliderControl" // Ordered from lowest rank to highest rank. Higher rank renderers will be preferred over lower rank renderers. export const rendererRegistryEntries: JsonFormsRendererRegistryEntry[] = [ { tester: rankWith(1, () => true), - renderer: withJsonFormsControlProps(UnknownControl), + renderer: UnknownRenderer, }, { tester: rankWith(1, uiTypeIs("Group")), - renderer: React.memo(GroupLayout), + renderer: GroupLayoutRenderer, }, { tester: rankWith(2, uiTypeIs("HorizontalLayout")), - renderer: withJsonFormsLayoutProps(HorizontalLayout), + renderer: HorizontalLayoutRenderer, }, { tester: rankWith(2, uiTypeIs("VerticalLayout")), - renderer: withJsonFormsLayoutProps(VerticalLayout), + renderer: VerticalLayoutRenderer, }, { tester: rankWith(2, isBooleanControl), - renderer: withJsonFormsControlProps(BooleanControl), + renderer: BooleanRenderer, }, { tester: rankWith(2, isStringControl), - renderer: withJsonFormsControlProps(TextControl), + renderer: TextRenderer, }, { tester: rankWith(2, uiTypeIs("Label")), - renderer: withJsonFormsLabelProps(AlertLayout), + renderer: AlertLayoutRenderer, }, { tester: rankWith(2, or(isNumberControl, isIntegerControl)), - renderer: withJsonFormsControlProps(NumericControl), + renderer: NumericRenderer, }, { tester: rankWith( @@ -79,11 +72,11 @@ export const rendererRegistryEntries: JsonFormsRendererRegistryEntry[] = [ }), ), ), - renderer: withJsonFormsControlProps(NumericSliderControl), + renderer: NumericSliderRenderer, }, { tester: rankWith(10, and(isObjectControl, not(isLayout))), - renderer: withJsonFormsDetailProps(ObjectControl), + renderer: ObjectRenderer, }, ] diff --git a/src/stories/controls/BooleanControl.stories.tsx b/src/stories/controls/BooleanControl.stories.tsx index 9386b2a..af4a0e2 100644 --- a/src/stories/controls/BooleanControl.stories.tsx +++ b/src/stories/controls/BooleanControl.stories.tsx @@ -1,5 +1,5 @@ import { Meta, StoryObj } from "@storybook/react" -import { rendererRegistryEntries } from "../../renderers" +import { rendererRegistryEntries } from "../../renderer-registry-entries" import { UISchema } from "../../ui-schema" import { StorybookAntDJsonForm } from "../../common/StorybookAntDJsonForm" diff --git a/src/stories/controls/ObjectControl.stories.tsx b/src/stories/controls/ObjectControl.stories.tsx index 4024951..44b93b8 100644 --- a/src/stories/controls/ObjectControl.stories.tsx +++ b/src/stories/controls/ObjectControl.stories.tsx @@ -1,5 +1,5 @@ import { Meta, StoryObj } from "@storybook/react" -import { rendererRegistryEntries } from "../../renderers" +import { rendererRegistryEntries } from "../../renderer-registry-entries" import { StorybookAntDJsonForm } from "../../common/StorybookAntDJsonForm" import { objectSchema, diff --git a/src/stories/controls/TextControl.stories.tsx b/src/stories/controls/TextControl.stories.tsx index d99a32b..57388c9 100644 --- a/src/stories/controls/TextControl.stories.tsx +++ b/src/stories/controls/TextControl.stories.tsx @@ -1,5 +1,5 @@ import { Meta, StoryObj } from "@storybook/react" -import { rendererRegistryEntries } from "../../renderers" +import { rendererRegistryEntries } from "../../renderer-registry-entries" import { TextControlOptions, UISchema } from "../../ui-schema" import { StorybookAntDJsonForm } from "../../common/StorybookAntDJsonForm" diff --git a/src/stories/layouts/AlertLayout.stories.tsx b/src/stories/layouts/AlertLayout.stories.tsx index ab1f888..23340f0 100644 --- a/src/stories/layouts/AlertLayout.stories.tsx +++ b/src/stories/layouts/AlertLayout.stories.tsx @@ -1,5 +1,5 @@ import { Meta, StoryObj } from "@storybook/react" -import { rendererRegistryEntries } from "../../renderers" +import { rendererRegistryEntries } from "../../renderer-registry-entries" import { UISchema } from "../../ui-schema" import { StorybookAntDJsonForm } from "../../common/StorybookAntDJsonForm"