feat(layout): add ts type desc of MegaLayout and fix array-inc doc (#905

) * feat: add style entry and docs * feat: add mega props and docs
alibaba · Jun 19, 2020 · f37a093 · f37a093
1 parent 944891f
commit f37a093
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 9 deletions.
diff --git a/docs/zh-cn/schema-develop/complext-self-inc-component.md b/docs/zh-cn/schema-develop/complext-self-inc-component.md
@@ -132,11 +132,16 @@ const App = () => {
           renderMoveUp: () => null,
           renderAddition: () => '+add',
           renderRemove: idx => {
+            const mutators = actions.createMutators('userList')
             return (
               <FormSpy
                 selector={[['onFieldValueChange', `userList.${idx}.username`]]}
               >
-                {({ state }) => (state.value === 'morally' ? null : 'remove')}
+                {({ state }) => {
+                  return (state.value === 'morally' ? null : <Button onClick={() => {
+                    mutators.remove(idx)
+                  }}>remove</Button> )
+                }}
               </FormSpy>
             )
           }

diff --git a/packages/antd-components/src/form-mega-layout/style.ts b/packages/antd-components/src/form-mega-layout/style.ts
diff --git a/packages/antd/src/components/FormMegaLayout/index.tsx b/packages/antd/src/components/FormMegaLayout/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { Form } from 'antd'
-import { Layout, LayoutItem } from '@formily/react'
+import { Layout, LayoutItem, ILayoutProps } from '@formily/react'
 import { createVirtualBox } from '@formily/react-schema-renderer'
 import styled from 'styled-components'
 import { useDeepFormItem } from '../../context'
@@ -69,7 +69,7 @@ const StyledLayoutNestWrapper = styled(props => {
   return <div style={style} className={classnames('mega-layout-nest-container', className)}>{children}</div>
 })`${props => computeStyle(props, true)}`
 
-const MegaLayout = (props => {
+const MegaLayout = (props: ILayoutProps) => {
     const { children, addonBefore, addonAfter, description, ...others } = props
     const layoutProps = props.layoutProps || {}
     const { size } = useDeepFormItem()
@@ -147,7 +147,7 @@ const MegaLayout = (props => {
             return ele
         }}
     />
-});
+};
 
 const MegaLayoutItem = (props) => {
   const { children, schemaChildren, itemProps, ...others } = props
@@ -210,7 +210,7 @@ const MegaLayoutItem = (props) => {
   })
 }
 
-const FormMegaLayout = createVirtualBox('mega-layout', MegaLayout)
+const FormMegaLayout = createVirtualBox<ILayoutProps>('mega-layout', MegaLayout)
 
 export {
     MegaLayout,

diff --git a/packages/next-components/src/form-mega-layout/style.ts b/packages/next-components/src/form-mega-layout/style.ts
diff --git a/packages/next/src/components/FormMegaLayout/index.tsx b/packages/next/src/components/FormMegaLayout/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { Form } from '@alifd/next'
-import { Layout, LayoutItem } from '@formily/react'
+import { Layout, LayoutItem, ILayoutProps } from '@formily/react'
 import { createVirtualBox } from '@formily/react-schema-renderer'
 import styled from 'styled-components'
 import { useDeepFormItem } from '../../context'
@@ -69,7 +69,7 @@ const StyledLayoutNestWrapper = styled(props => {
 return <div style={style} className={classnames('mega-layout-nest-container', className)}>{children}</div>
 })`${props => computeStyle(props)}`
 
-const MegaLayout = (props => {
+const MegaLayout = (props: ILayoutProps) => {
     const { children, addonBefore, addonAfter, description, ...others } = props
     const layoutProps = props.layoutProps || {}
     const { size } = useDeepFormItem()
@@ -147,7 +147,7 @@ const MegaLayout = (props => {
             return ele
         }}
     />
-});
+};
 
 const MegaLayoutItem = (props) => {
   const { children, schemaChildren, itemProps, ...others } = props
@@ -210,7 +210,7 @@ const MegaLayoutItem = (props) => {
   })
 }
 
-const FormMegaLayout = createVirtualBox('mega-layout', MegaLayout)
+const FormMegaLayout = createVirtualBox<ILayoutProps>('mega-layout', MegaLayout)
 
 export {
     MegaLayout,