feat: slot

alibaba · Jan 12, 2025 · 51e911a · 51e911a
1 parent 5472532
commit 51e911a
Show file tree

Hide file tree

Showing 7 changed files with 477 additions and 104 deletions.
diff --git a/packages/json-schema/src/schema.ts b/packages/json-schema/src/schema.ts
@@ -179,6 +179,14 @@ export class Schema<
   ['x-read-pretty']?: boolean;
 
   ['x-compile-omitted']?: string[];
+  //Slot目标节点名称 必须在同级
+  ['x-slot']?: string;
+  //Slot目标prop名
+  ['x-slot-prop']?: string;
+  //Slot目标
+  ['x-slot-target']?: 'x-component-props' | 'x-decorator-props';
+  //Slot是否为render prop
+  ['x-slot-is-render-prop']?: boolean;
 
   [key: `x-${string | number}` | symbol]: any
 

diff --git a/packages/react/docs/api/components/SchemaField.md b/packages/react/docs/api/components/SchemaField.md
@@ -139,3 +139,111 @@ export default () => (
   </FormProvider>
 )
 ```
+
+## JSON Schema ReactNode Prop Use Case （x-slot & x-slot-prop）
+
+```tsx
+import React from 'react'
+import { createForm } from '@formily/core'
+import { FormProvider, createSchemaField } from '@formily/react'
+import { Input, Tag } from 'antd'
+import { CheckCircleTwoTone } from '@ant-design/icons'
+
+const form = createForm()
+
+const SchemaField = createSchemaField({
+  components: {
+    Input,
+    CheckCircleTwoTone,
+  },
+})
+
+export default () => (
+  <FormProvider form={form}>
+    <SchemaField
+      components={{
+        Tag,
+      }}
+      schema={{
+        type: 'object',
+        properties: {
+          tag: {
+            'x-slot': 'input',
+            'x-slot-prop': 'prefix',
+            'x-component': 'Tag',
+            'x-component-props': {
+              children: 'www.',
+            },
+          },
+          tag2: {
+            'x-slot': 'input',
+            'x-slot-prop': 'suffix',
+            'x-component': 'Tag',
+            'x-component-props': {
+              children: '.com',
+            },
+          },
+          icon: {
+            'x-slot': 'input',
+            'x-slot-prop': 'addonAfter',
+            'x-component': 'CheckCircleTwoTone',
+          },
+          input: {
+            type: 'string',
+            'x-component': 'Input',
+            'x-component-props': {},
+          },
+        },
+      }}
+    ></SchemaField>
+  </FormProvider>
+)
+```
+
+## JSON Schema Render Prop Use Case （x-slot & x-slot-prop & x-slot-is-render-prop）
+
+```tsx
+import React from 'react'
+import { createForm } from '@formily/core'
+import { FormProvider, createSchemaField } from '@formily/react'
+import { Rate } from 'antd'
+import { DollarOutlined } from '@ant-design/icons'
+
+const form = createForm()
+
+const SchemaField = createSchemaField({
+  components: {
+    DollarOutlined,
+  },
+})
+
+export default () => (
+  <FormProvider form={form}>
+    <SchemaField
+      components={{
+        Rate,
+      }}
+      schema={{
+        type: 'object',
+        properties: {
+          icon: {
+            'x-slot': 'rate',
+            'x-slot-prop': 'character',
+            'x-slot-is-render-prop': true,
+            'x-component': 'DollarOutlined',
+            'x-component-props': {
+              rotate: '{{$slotArgs[0].value * 45}}',
+              style: {
+                fontSize: '50px',
+              },
+            },
+          },
+          rate: {
+            'x-component': 'Rate',
+          },
+        },
+      }}
+    ></SchemaField>
+  </FormProvider>
+)
+```
diff --git a/packages/react/docs/api/components/SchemaField.zh-CN.md b/packages/react/docs/api/components/SchemaField.zh-CN.md
@@ -139,3 +139,115 @@ export default () => (
   </FormProvider>
 )
 ```
+
+## JSON Schema ReactNode Prop 用例 （x-slot & x-slot-prop）
+
+```tsx
+import React from 'react'
+import { createForm } from '@formily/core'
+import { FormProvider, createSchemaField } from '@formily/react'
+import { Input, Tag } from 'antd'
+import { CheckCircleTwoTone } from '@ant-design/icons'
+
+const form = createForm()
+
+const SchemaField = createSchemaField({
+  components: {
+    Input,
+    CheckCircleTwoTone,
+  },
+})
+
+export default () => (
+  <FormProvider form={form}>
+    <SchemaField
+      components={{
+        Tag,
+      }}
+      schema={{
+        type: 'object',
+        properties: {
+          tag: {
+            'x-slot': 'input',
+            'x-slot-prop': 'prefix',
+            'x-component': 'Tag',
+            'x-component-props': {
+              children: 'www.',
+            },
+          },
+          tag2: {
+            'x-slot': 'input',
+            'x-slot-prop': 'suffix',
+            'x-component': 'Tag',
+            'x-component-props': {
+              children: '.com',
+            },
+          },
+          icon: {
+            'x-slot': 'input',
+            'x-slot-prop': 'addonAfter',
+            'x-component': 'CheckCircleTwoTone',
+          },
+          input: {
+            type: 'string',
+            'x-component': 'Input',
+            'x-component-props': {},
+          },
+        },
+      }}
+    ></SchemaField>
+  </FormProvider>
+)
+```
+
+## JSON Schema Render Prop 用例 （x-slot & x-slot-prop & x-slot-is-render-prop）
+
+```tsx
+import React from 'react'
+import { createForm } from '@formily/core'
+import { FormProvider, createSchemaField } from '@formily/react'
+import { Rate } from 'antd'
+import { DollarOutlined } from '@ant-design/icons'
+
+const form = createForm()
+
+const SchemaField = createSchemaField({
+  components: {
+    DollarOutlined,
+  },
+})
+
+export default () => (
+  <FormProvider form={form}>
+    <SchemaField
+      components={{
+        Rate,
+      }}
+      schema={{
+        type: 'object',
+        properties: {
+          icon: {
+            'x-slot': 'rate',
+            'x-slot-prop': 'character',
+            'x-slot-is-render-prop': true,
+            'x-component': 'DollarOutlined',
+            'x-component-props': {
+              rotate: '{{$slotArgs[0].value * 45}}',
+              style: {
+                fontSize: '50px',
+              },
+            },
+          },
+          rate: {
+            'x-component': 'Rate',
+            'x-component-props': {
+              'data-testid': 'rate',
+              'data-12341234': '1234',
+            },
+          },
+        },
+      }}
+    ></SchemaField>
+  </FormProvider>
+)
+```