Просмотр исходного кода

feat(metadata): add configParam Component

Lind 4 лет назад
Родитель
Сommit
d5998f1d7f

+ 65 - 0
src/components/Metadata/ConfigParam/index.tsx

@@ -0,0 +1,65 @@
+import { Editable, FormItem, FormLayout, Input, Select } from '@formily/antd';
+import type { ISchema } from '@formily/react';
+import { createSchemaField } from '@formily/react';
+
+interface Props {
+  config: MetadataConfig[];
+}
+
+const ConfigParam = (props: Props) => {
+  const SchemaField = createSchemaField({
+    components: {
+      FormItem,
+      Input,
+      Select,
+      Editable,
+      FormLayout,
+    },
+  });
+
+  const formatConfig = (config: MetadataConfig[]) => {
+    if (!config) return {};
+    return config.reduce((acc, t) => {
+      const { properties } = t;
+      const configSchema = properties.reduce((cur, i) => {
+        return {
+          ...cur,
+          [i.property]: {
+            title: i.name,
+            'x-decorator': 'FormItem',
+            // 判断type 类型
+            'x-component': 'Select',
+            enum: i.type.elements.map((e) => ({
+              label: e.text,
+              value: e.value,
+            })),
+          },
+        };
+      }, {});
+      return {
+        ...acc,
+        [t.name]: {
+          type: 'void',
+          title: t.name,
+          'x-component': 'FormLayout',
+          'x-component-props': {
+            layout: 'vertical',
+          },
+          'x-decorator': 'Editable.Popover',
+          'x-decorator-props': {
+            className: 'config-array',
+            placement: 'left',
+          },
+          properties: configSchema,
+        },
+      };
+    }, {});
+  };
+
+  const schema: ISchema = {
+    type: 'object',
+    properties: formatConfig(props.config),
+  };
+  return <SchemaField schema={schema} />;
+};
+export default ConfigParam;

+ 21 - 0
src/components/Metadata/ConfigParam/typing.d.ts

@@ -0,0 +1,21 @@
+type MetadataConfig = {
+  name: string;
+  description: string;
+  scopes: string[];
+  properties: {
+    property: string;
+    name: string;
+    scopes: [];
+    type: {
+      elements: {
+        value: string;
+        text: string;
+        description: string;
+      }[];
+      multi: boolean;
+      name: string;
+      id: string;
+      type: string;
+    };
+  }[];
+};