fix(demo): fixed-layout demo block validate (#159)

apps/demo-fixed-layout/src/hooks/use-editor-props.ts

@@ -17,7 +17,6 @@ import { shortcutGetter } from '../shortcuts';
 import { CustomService } from '../services';
 import { GroupBoxHeader, GroupNode } from '../plugins/group-plugin';
 import { createSyncVariablePlugin, createClipboardPlugin } from '../plugins';
-import { defaultFormMeta } from '../nodes';
 import { SelectorBoxPopover } from '../components/selector-box-popover';
 import NodeAdder from '../components/node-adder';
 import BranchAdder from '../components/branch-adder';
@@ -62,11 +61,6 @@ export function useEditorProps(
              */
             defaultExpanded: true,
           },
-          /**
-           * Default FormMeta
-           * 默认的表单配置
-           */
-          formMeta: defaultFormMeta,
         };
       },
       /**

apps/demo-fixed-layout/src/initial-data.ts

@@ -76,6 +76,9 @@ export const initialData: FlowDocumentJSON = {
               type: 'block',
               data: {
                 title: 'If_0',
+                inputsValues: {
+                  condition: '',
+                },
                 inputs: {
                   type: 'object',
                   required: ['condition'],
@@ -93,6 +96,9 @@ export const initialData: FlowDocumentJSON = {
               type: 'block',
               data: {
                 title: 'If_1',
+                inputsValues: {
+                  condition: '',
+                },
                 inputs: {
                   type: 'object',
                   required: ['condition'],
@@ -127,6 +133,9 @@ export const initialData: FlowDocumentJSON = {
           type: 'catchBlock',
           data: {
             title: 'Catch Block 1',
+            inputsValues: {
+              condition: '',
+            },
             inputs: {
               type: 'object',
               required: ['condition'],
@@ -144,6 +153,9 @@ export const initialData: FlowDocumentJSON = {
           type: 'catchBlock',
           data: {
             title: 'Catch Block 2',
+            inputsValues: {
+              condition: '',
+            },
             inputs: {
               type: 'object',
               required: ['condition'],

apps/demo-fixed-layout/src/nodes/block/form-meta.tsx

@@ -0,0 +1,29 @@
+import { FormRenderProps, FormMeta, ValidateTrigger } from '@flowgram.ai/fixed-layout-editor';
+
+import { FlowNodeJSON } from '../../typings';
+import { FormHeader, FormContent, FormInputs, FormOutputs } from '../../form-components';
+
+export const renderForm = ({ form }: FormRenderProps<FlowNodeJSON['data']>) => (
+  <>
+    <FormHeader />
+    <FormContent>
+      <FormInputs />
+      <FormOutputs />
+    </FormContent>
+  </>
+);
+
+export const formMeta: FormMeta<FlowNodeJSON['data']> = {
+  render: renderForm,
+  validateTrigger: ValidateTrigger.onChange,
+  validate: {
+    'inputsValues.*': ({ value, context, formValues, name }) => {
+      const valuePropetyKey = name.replace(/^inputsValues\./, '');
+      const required = formValues.inputs?.required || [];
+      if (required.includes(valuePropetyKey) && (value === '' || value === undefined)) {
+        return `${valuePropetyKey} is required`;
+      }
+      return undefined;
+    },
+  },
+};

apps/demo-fixed-layout/src/nodes/block/index.ts

@@ -2,6 +2,7 @@ import { nanoid } from 'nanoid';
 
 import { FlowNodeRegistry } from '../../typings';
 import iconIf from '../../assets/icon-if.png';
+import { formMeta } from './form-meta';
 
 let id = 2;
 export const BlockNodeRegistry: FlowNodeRegistry = {
@@ -24,6 +25,9 @@ export const BlockNodeRegistry: FlowNodeRegistry = {
         inputs: {
           type: 'object',
           required: ['condition'],
+          inputsValues: {
+            condition: '',
+          },
           properties: {
             condition: {
               type: 'string',
@@ -33,4 +37,5 @@ export const BlockNodeRegistry: FlowNodeRegistry = {
       },
     };
   },
+  formMeta,
 };

apps/demo-fixed-layout/src/nodes/condition/index.ts

@@ -1,6 +1,7 @@
 import { nanoid } from 'nanoid';
 import { FlowNodeSplitType } from '@flowgram.ai/fixed-layout-editor';
 
+import { defaultFormMeta } from '../default-form-meta';
 import { FlowNodeRegistry } from '../../typings';
 import iconCondition from '../../assets/icon-condition.svg';
 
@@ -15,6 +16,7 @@ export const ConditionNodeRegistry: FlowNodeRegistry = {
   meta: {
     expandable: false, // disable expanded
   },
+  formMeta: defaultFormMeta,
   onAdd() {
     return {
       id: `condition_${nanoid(5)}`,
@@ -28,6 +30,9 @@ export const ConditionNodeRegistry: FlowNodeRegistry = {
           type: 'block',
           data: {
             title: 'If_0',
+            inputsValues: {
+              condition: '',
+            },
             inputs: {
               type: 'object',
               required: ['condition'],
@@ -44,6 +49,9 @@ export const ConditionNodeRegistry: FlowNodeRegistry = {
           type: 'block',
           data: {
             title: 'If_1',
+            inputsValues: {
+              condition: '',
+            },
             inputs: {
               type: 'object',
               required: ['condition'],

apps/demo-fixed-layout/src/nodes/index.ts

@@ -16,5 +16,3 @@ export const FlowNodeRegistries: FlowNodeRegistry[] = [
   BlockNodeRegistry,
   TryCatchNodeRegistry,
 ];
-
-export { defaultFormMeta } from './default-form-meta';

apps/demo-fixed-layout/src/nodes/llm/index.ts

@@ -1,5 +1,6 @@
 import { nanoid } from 'nanoid';
 
+import { defaultFormMeta } from '../default-form-meta';
 import { FlowNodeRegistry } from '../../typings';
 import iconLLM from '../../assets/icon-llm.jpg';
 
@@ -11,6 +12,7 @@ export const LLMNodeRegistry: FlowNodeRegistry = {
     description:
       'Call the large language model and use variables and prompt words to generate responses.',
   },
+  formMeta: defaultFormMeta,
   onAdd() {
     return {
       id: `llm_${nanoid(5)}`,

apps/demo-fixed-layout/src/nodes/loop/index.ts

@@ -1,5 +1,6 @@
 import { nanoid } from 'nanoid';
 
+import { defaultFormMeta } from '../default-form-meta';
 import { FlowNodeRegistry } from '../../typings';
 import iconLoop from '../../assets/icon-loop.svg';
 
@@ -13,6 +14,7 @@ export const LoopNodeRegistry: FlowNodeRegistry = {
   meta: {
     expandable: false, // disable expanded
   },
+  formMeta: defaultFormMeta,
   onAdd() {
     return {
       id: `loop_${nanoid(5)}`,

apps/demo-fixed-layout/src/nodes/trycatch/form-meta.tsx

@@ -0,0 +1,21 @@
+import { FormRenderProps, FormMeta, ValidateTrigger } from '@flowgram.ai/fixed-layout-editor';
+
+import { FlowNodeJSON } from '../../typings';
+import { FormHeader, FormContent, FormOutputs } from '../../form-components';
+
+export const renderForm = ({ form }: FormRenderProps<FlowNodeJSON['data']>) => (
+  <>
+    <FormHeader />
+    <FormContent>
+      <FormOutputs />
+    </FormContent>
+  </>
+);
+
+export const formMeta: FormMeta<FlowNodeJSON['data']> = {
+  render: renderForm,
+  validateTrigger: ValidateTrigger.onChange,
+  validate: {
+    title: ({ value }: { value: string }) => (value ? undefined : 'Title is required'),
+  },
+};

apps/demo-fixed-layout/src/nodes/trycatch/index.ts

@@ -2,6 +2,7 @@ import { nanoid } from 'nanoid';
 
 import { FlowNodeRegistry } from '../../typings';
 import iconTryCatch from '../../assets/icon-trycatch.svg';
+import { formMeta } from './form-meta';
 
 export const TryCatchNodeRegistry: FlowNodeRegistry = {
   type: 'tryCatch',
@@ -12,6 +13,7 @@ export const TryCatchNodeRegistry: FlowNodeRegistry = {
   meta: {
     expandable: false, // disable expanded
   },
+  formMeta,
   onAdd() {
     return {
       id: `tryCatch${nanoid(5)}`,