feat(demo): remove formInputs readonly (#259)

apps/demo-fixed-layout/src/form-components/form-inputs/index.tsx

@@ -4,10 +4,10 @@ import { Field } from '@flowgram.ai/fixed-layout-editor';
 import { FormItem } from '../form-item';
 import { Feedback } from '../feedback';
 import { JsonSchema } from '../../typings';
-import { useIsSidebar } from '../../hooks';
+import { useNodeRenderContext } from '../../hooks';
 
 export function FormInputs() {
-  const readonly = !useIsSidebar();
+  const { readonly } = useNodeRenderContext();
   return (
     <Field<JsonSchema> name="inputs">
       {({ field: inputsField }) => {

apps/demo-fixed-layout/src/nodes/loop/loop-form-render.tsx

@@ -1,7 +1,7 @@
 import { BatchVariableSelector, IFlowRefValue } from '@flowgram.ai/form-materials';
 import { FormRenderProps, FlowNodeJSON, Field } from '@flowgram.ai/fixed-layout-editor';
 
-import { useIsSidebar } from '../../hooks';
+import { useIsSidebar, useNodeRenderContext } from '../../hooks';
 import { FormHeader, FormContent, FormOutputs, FormItem, Feedback } from '../../form-components';
 
 interface LoopNodeJSON extends FlowNodeJSON {
@@ -12,7 +12,7 @@ interface LoopNodeJSON extends FlowNodeJSON {
 
 export const LoopFormRender = ({ form }: FormRenderProps<LoopNodeJSON>) => {
   const isSidebar = useIsSidebar();
-  const readonly = !isSidebar;
+  const { readonly } = useNodeRenderContext();
 
   const batchFor = (
     <Field<IFlowRefValue> name={`batchFor`}>

apps/demo-free-layout/src/form-components/form-inputs/index.tsx

@@ -4,10 +4,10 @@ import { DynamicValueInput } from '@flowgram.ai/form-materials';
 import { FormItem } from '../form-item';
 import { Feedback } from '../feedback';
 import { JsonSchema } from '../../typings';
-import { useIsSidebar } from '../../hooks';
+import { useNodeRenderContext } from '../../hooks';
 
 export function FormInputs() {
-  const readonly = !useIsSidebar();
+  const { readonly } = useNodeRenderContext();
   return (
     <Field<JsonSchema> name="inputs">
       {({ field: inputsField }) => {

apps/demo-free-layout/src/nodes/condition/condition-inputs/index.tsx

@@ -4,7 +4,7 @@ import { IFlowValue, VariableSelector } from '@flowgram.ai/form-materials';
 import { Button } from '@douyinfe/semi-ui';
 import { IconPlus, IconCrossCircleStroked } from '@douyinfe/semi-icons';
 
-import { useIsSidebar } from '../../../hooks';
+import { useNodeRenderContext } from '../../../hooks';
 import { FormItem } from '../../../form-components';
 import { Feedback } from '../../../form-components';
 import { ConditionPort } from './styles';
@@ -15,7 +15,7 @@ interface ConditionValue {
 }
 
 export function ConditionInputs() {
-  const readonly = !useIsSidebar();
+  const { readonly } = useNodeRenderContext();
   return (
     <FieldArray name="conditions">
       {({ field }) => (

apps/demo-free-layout/src/nodes/loop/loop-form-render.tsx

@@ -2,7 +2,7 @@ import { FormRenderProps, FlowNodeJSON, Field } from '@flowgram.ai/free-layout-e
 import { SubCanvasRender } from '@flowgram.ai/free-container-plugin';
 import { BatchVariableSelector, IFlowRefValue } from '@flowgram.ai/form-materials';
 
-import { useIsSidebar } from '../../hooks';
+import { useIsSidebar, useNodeRenderContext } from '../../hooks';
 import { FormHeader, FormContent, FormOutputs, FormItem, Feedback } from '../../form-components';
 
 interface LoopNodeJSON extends FlowNodeJSON {
@@ -13,7 +13,7 @@ interface LoopNodeJSON extends FlowNodeJSON {
 
 export const LoopFormRender = ({ form }: FormRenderProps<LoopNodeJSON>) => {
   const isSidebar = useIsSidebar();
-  const readonly = !isSidebar;
+  const { readonly } = useNodeRenderContext();
 
   const batchFor = (
     <Field<IFlowRefValue> name={`batchFor`}>