fix(materials): condition-row readonly support (#604)

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

@@ -46,11 +46,14 @@ export function ConditionInputs() {
                       onChange={(v) => childField.onChange({ value: v, key: childField.value.key })}
                     />
 
-                    <Button
-                      theme="borderless"
-                      icon={<IconCrossCircleStroked />}
-                      onClick={() => field.delete(index)}
-                    />
+                    {!readonly && (
+                      <Button
+                        theme="borderless"
+                        disabled={readonly}
+                        icon={<IconCrossCircleStroked />}
+                        onClick={() => field.delete(index)}
+                      />
+                    )}
                   </div>
 
                   <Feedback errors={childState?.errors} invalid={childState?.invalid} />

apps/demo-nextjs-antd/src/editor/nodes/condition/condition-inputs/index.tsx

@@ -48,11 +48,13 @@ export function ConditionInputs() {
                       }
                     />
 
-                    <Button
-                      type="text"
-                      icon={<CloseCircleOutlined />}
-                      onClick={() => field.delete(index)}
-                    />
+                    {!readonly && (
+                      <Button
+                        type="text"
+                        icon={<CloseCircleOutlined />}
+                        onClick={() => field.delete(index)}
+                      />
+                    )}
                   </div>
 
                   <Feedback errors={childState?.errors} invalid={childState?.invalid} />

packages/materials/form-antd-materials/src/components/condition-row/hooks/useOp.tsx

@@ -18,9 +18,10 @@ interface HookParams {
   rule?: IRule;
   op?: Op;
   onChange: (op: Op) => void;
+  readonly?: boolean;
 }
 
-export function useOp({ rule, op, onChange }: HookParams) {
+export function useOp({ rule, op, onChange, readonly }: HookParams) {
   const options = useMemo(
     () =>
       Object.keys(rule || {}).map((_op) => ({
@@ -40,6 +41,7 @@ export function useOp({ rule, op, onChange }: HookParams) {
         styles={{
           popup: { root: { maxHeight: 400, minWidth: 230, overflow: 'auto' } },
         }}
+        disabled={readonly}
         className="op-select"
         size="small"
         value={op}

packages/materials/form-antd-materials/src/components/condition-row/index.tsx

@@ -30,6 +30,7 @@ export function ConditionRow({ style, value, onChange, readonly }: PropTypes) {
     rule,
     op: operator,
     onChange: (v) => onChange({ ...value, operator: v }),
+    readonly,
   });
 
   const targetSchema = useMemo(() => {

packages/materials/form-materials/src/components/condition-row/hooks/useOp.tsx

@@ -15,9 +15,10 @@ interface HookParams {
   rule?: IRule;
   op?: Op;
   onChange: (op: Op) => void;
+  readonly?: boolean;
 }
 
-export function useOp({ rule, op, onChange }: HookParams) {
+export function useOp({ rule, op, onChange, readonly }: HookParams) {
   const options = useMemo(
     () =>
       Object.keys(rule || {}).map((_op) => ({
@@ -32,6 +33,7 @@ export function useOp({ rule, op, onChange }: HookParams) {
   const renderOpSelect = () => (
     <Select
       style={{ height: 22 }}
+      disabled={readonly}
       size="small"
       value={op}
       optionList={options}

packages/materials/form-materials/src/components/condition-row/index.tsx

@@ -29,6 +29,7 @@ export function ConditionRow({ style, value, onChange, readonly }: PropTypes) {
     rule,
     op: operator,
     onChange: (v) => onChange({ ...value, operator: v }),
+    readonly,
   });
 
   const targetSchema = useMemo(() => {