Form

import { Form, Input } from '@yuntijs/ui';
import { VariableIcon } from 'lucide-react';

const FormCollapseList = Form.CollapseList;
interface FieldType {
  outputs?: {
    key: string;
    value: string;
  }[];
}

export default () => {
  const outputs = [
    {
      key: 'class',
      value: 'claas1',
    },
    {
      key: 'namespace',
      value: 'ns1',
    },
  ];
  return (
    <Form
      onValuesChange={(_, values) => console.log('values =>', values)}
      style={{ width: '100%' }}
      variant="filled"
    >
      <FormCollapseList
        columns={[
          {
            label: '变量名',
            name: 'key',
            render: () => <Input maxLength={30} placeholder="输入变量名" showCount />,
          },
          {
            label: '变量值',
            name: 'value',
            render: () => <Input placeholder="输入变量值" style={{ width: 360 }} />,
            rules: [{ required: true, message: '请输入变量值' }],
          },
        ]}
        icon={VariableIcon}
        initialValue={outputs}
        name="outputs"
        title="输出变量"
        variant="block"
      />
    </Form>
  );
};

export const TreeList = () => {
  // 推荐使用 useMemo 来定义 columns，减少组件渲染次数，提升性能
  const columns: FormCollapseListColumn[] = useMemo(
    () => [
      // ...
      {
        render: (fieldName, index, operation, fieldPath) => {
          return (
            <Space size="small">
              <Button
                icon={<PlusOutlined />}
                // 添加叶子节点
                onClick={() => operation.add()}
                type="text"
              />
              <Button
                icon={<DeleteOutlined />}
                // 删除当前节点
                onClick={() => operation.remove(fieldName)}
                type="text"
              />
            </Space>
          );
        },
      },
    ],
    []
  );

  return <FormCollapseList columns={columns} />;
};