feat(antd): drawer support extra (#3213)

alibaba · Jun 20, 2022 · ef218b9 · ef218b9
1 parent 6eed89b
commit ef218b9
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 12 deletions.
diff --git a/packages/antd/docs/components/FormDrawer.md b/packages/antd/docs/components/FormDrawer.md
@@ -62,7 +62,7 @@ export default () => {
                   x-component="Input"
                 />
               </SchemaField>
-              <FormDrawer.Footer>
+              <FormDrawer.Extra>
                 <FormButtonGroup align="right">
                   <Submit
                     onSubmit={() => {
@@ -75,7 +75,7 @@ export default () => {
                   </Submit>
                   <Reset>Reset</Reset>
                 </FormButtonGroup>
-              </FormDrawer.Footer>
+              </FormDrawer.Extra>
             </FormLayout>
           )
         })
@@ -163,7 +163,7 @@ export default () => {
           return (
             <FormLayout labelCol={6} wrapperCol={10}>
               <SchemaField schema={schema} />
-              <FormDrawer.Footer>
+              <FormDrawer.Extra>
                 <FormButtonGroup align="right">
                   <Submit
                     onSubmit={() => {
@@ -176,7 +176,7 @@ export default () => {
                   </Submit>
                   <Reset>Reset</Reset>
                 </FormButtonGroup>
-              </FormDrawer.Footer>
+              </FormDrawer.Extra>
             </FormLayout>
           )
         })
@@ -245,7 +245,7 @@ export default () => {
                 decorator={[FormItem]}
                 component={[Input]}
               />
-              <FormDrawer.Footer>
+              <FormDrawer.Extra>
                 <FormButtonGroup align="right">
                   <Submit
                     onSubmit={() => {
@@ -258,7 +258,7 @@ export default () => {
                   </Submit>
                   <Reset>Reset</Reset>
                 </FormButtonGroup>
-              </FormDrawer.Footer>
+              </FormDrawer.Extra>
             </FormLayout>
           )
         })
@@ -315,6 +315,10 @@ interface FormDrawer {
 
 `DrawerProps` type definition reference ant design [Drawer API](https://ant.design/components/drawer-cn/#API)
 
+### FormDrawer.Extra
+
+No attributes, only child nodes are received
+
 ### FormDrawer.Footer
 
 No attributes, only child nodes are received

diff --git a/packages/antd/docs/components/FormDrawer.zh-CN.md b/packages/antd/docs/components/FormDrawer.zh-CN.md
@@ -62,7 +62,7 @@ export default () => {
                   x-component="Input"
                 />
               </SchemaField>
-              <FormDrawer.Footer>
+              <FormDrawer.Extra>
                 <FormButtonGroup align="right">
                   <Submit
                     onSubmit={() => {
@@ -75,7 +75,7 @@ export default () => {
                   </Submit>
                   <Reset>重置</Reset>
                 </FormButtonGroup>
-              </FormDrawer.Footer>
+              </FormDrawer.Extra>
             </FormLayout>
           )
         })
@@ -163,7 +163,7 @@ export default () => {
           return (
             <FormLayout labelCol={6} wrapperCol={10}>
               <SchemaField schema={schema} />
-              <FormDrawer.Footer>
+              <FormDrawer.Extra>
                 <FormButtonGroup align="right">
                   <Submit
                     onSubmit={() => {
@@ -176,7 +176,7 @@ export default () => {
                   </Submit>
                   <Reset>重置</Reset>
                 </FormButtonGroup>
-              </FormDrawer.Footer>
+              </FormDrawer.Extra>
             </FormLayout>
           )
         })
@@ -245,7 +245,7 @@ export default () => {
                 decorator={[FormItem]}
                 component={[Input]}
               />
-              <FormDrawer.Footer>
+              <FormDrawer.Extra>
                 <FormButtonGroup align="right">
                   <Submit
                     onSubmit={() => {
@@ -258,7 +258,7 @@ export default () => {
                   </Submit>
                   <Reset>重置</Reset>
                 </FormButtonGroup>
-              </FormDrawer.Footer>
+              </FormDrawer.Extra>
             </FormLayout>
           )
         })
@@ -315,6 +315,10 @@ interface FormDrawer {
 
 `DrawerProps`类型定义参考 ant design [Drawer API](https://ant.design/components/drawer-cn/#API)
 
+### FormDrawer.Extra
+
+无属性，只接收子节点
+
 ### FormDrawer.Footer
 
 无属性，只接收子节点

diff --git a/packages/antd/src/form-drawer/index.tsx b/packages/antd/src/form-drawer/index.tsx
@@ -164,6 +164,37 @@ export function FormDrawer(title: any, id: any, renderer?: any): IFormDrawer {
   return formDrawer
 }
 
+const DrawerExtra: ReactFC = (props) => {
+  const ref = useRef<HTMLDivElement>()
+  const [extra, setExtra] = useState<HTMLDivElement>()
+  const extraRef = useRef<HTMLDivElement>()
+  const prefixCls = usePrefixCls('drawer')
+  useLayoutEffect(() => {
+    const content = ref.current
+      ?.closest(`.${prefixCls}-wrapper-body`)
+      ?.querySelector(`.${prefixCls}-header`)
+    if (content) {
+      if (!extraRef.current) {
+        extraRef.current = content.querySelector(`.${prefixCls}-extra`)
+        if (!extraRef.current) {
+          extraRef.current = document.createElement('div')
+          extraRef.current.classList.add(`${prefixCls}-extra`)
+          content.appendChild(extraRef.current)
+        }
+      }
+      setExtra(extraRef.current)
+    }
+  })
+
+  extraRef.current = extra
+
+  return (
+    <div ref={ref} style={{ display: 'none' }}>
+      {extra && createPortal(props.children, extra)}
+    </div>
+  )
+}
+
 const DrawerFooter: ReactFC = (props) => {
   const ref = useRef<HTMLDivElement>()
   const [footer, setFooter] = useState<HTMLDivElement>()
@@ -193,6 +224,8 @@ const DrawerFooter: ReactFC = (props) => {
   )
 }
 
+FormDrawer.Extra = DrawerExtra
+
 FormDrawer.Footer = DrawerFooter
 
 FormDrawer.Portal = createPortalProvider('form-drawer')