feat(react): update mapProps

alibaba · Feb 18, 2021 · 7940cab · 7940cab
1 parent eb05cac
commit 7940cab
Show file tree

Hide file tree

Showing 22 changed files with 155 additions and 208 deletions.
diff --git a/packages/antd/src/cascader/index.tsx b/packages/antd/src/cascader/index.tsx
@@ -5,8 +5,7 @@ import { PreviewText } from '../preview-text'
 export const Cascader = connect(
   AntdCascader,
   mapProps({
-    extract: 'dataSource',
-    to: 'options'
+    dataSource: 'options',
   }),
   mapReadPretty(PreviewText.Cascader)
 )

diff --git a/packages/antd/src/checkbox/index.tsx b/packages/antd/src/checkbox/index.tsx
@@ -10,25 +10,18 @@ type ComposedCheckbox = React.FC<CheckboxProps> & {
 
 export const Checkbox: ComposedCheckbox = connect(
   AntdCheckbox,
-  mapProps(
-    {
-      extract: 'value',
-      to: 'checked'
-    },
-    {
-      extract: 'onInput',
-      to: 'onChange'
-    }
-  )
+  mapProps({
+    value: 'checked',
+    onInput: 'onChange',
+  })
 )
 
 Checkbox.__ANT_CHECKBOX = true
 
 Checkbox.Group = connect(
   AntdCheckbox.Group,
   mapProps({
-    extract: 'dataSource',
-    to: 'options'
+    dataSource: 'options',
   }),
   mapReadPretty(PreviewText.Select)
 )

diff --git a/packages/antd/src/form-item/index.tsx b/packages/antd/src/form-item/index.tsx
@@ -113,20 +113,24 @@ export const BaseItem: React.FC<IFormItemProps> = (props) => {
     enableCol = true
   }
 
-  const formatChildren = (feedbackLayout === 'popover' && feedbackText) ? (<Popover
-    content={feedbackText}
-    visible={true}
-    >
-      {children}
-  </Popover>) : children;
+  const formatChildren =
+    feedbackLayout === 'popover' && feedbackText ? (
+      <Popover content={feedbackText} visible={true}>
+        {children}
+      </Popover>
+    ) : (
+      children
+    )
 
   const prefixCls = usePrefixCls('formily-form-item', props)
   return (
     <div
       className={cls({
         [`${prefixCls}`]: true,
         [`${prefixCls}-${feedbackStatus}`]: !!feedbackStatus,
-        [`${prefixCls}-feedback-status-${!!feedbackStatus ? 'valid' : 'invalid'}`]: true,
+        [`${prefixCls}-feedback-status-${
+          !!feedbackStatus ? 'valid' : 'invalid'
+        }`]: true,
         [`${prefixCls}-size-${size}`]: !!size,
         [`${prefixCls}-feedback-layout-${feedbackLayout}`]: !!feedbackLayout,
         [`${prefixCls}-fullness`]: !!fullness || !!inset || !!feedbackIcon,
@@ -140,24 +144,30 @@ export const BaseItem: React.FC<IFormItemProps> = (props) => {
         [props.className]: !!props.className,
       })}
     >
-      { label !== undefined && <div
-        className={cls({
-          [`${prefixCls}-label`]: true,
-          [`${prefixCls}-item-col-${labelCol}`]: enableCol && !!labelCol,
-        })}
-        style={labelStyle}
-      >
-        {asterisk && (
-          <span className={cls(`${prefixCls}-asterisk`)}>{'*'}</span>
-        )}
-        <label>{label}</label>
-        {tooltip && (
-          <Tooltip placement="bottom" title={tooltip}>
-            <QuestionCircleOutlined className={cls(`${prefixCls}-tooltip`)} />
-          </Tooltip>
-        )}
-        { label && <span className={cls(`${prefixCls}-colon`)}>{colon ? ':' : ''}</span>}
-      </div> }
+      {label !== undefined && (
+        <div
+          className={cls({
+            [`${prefixCls}-label`]: true,
+            [`${prefixCls}-item-col-${labelCol}`]: enableCol && !!labelCol,
+          })}
+          style={labelStyle}
+        >
+          {asterisk && (
+            <span className={cls(`${prefixCls}-asterisk`)}>{'*'}</span>
+          )}
+          <label>{label}</label>
+          {tooltip && (
+            <Tooltip placement="bottom" title={tooltip}>
+              <QuestionCircleOutlined className={cls(`${prefixCls}-tooltip`)} />
+            </Tooltip>
+          )}
+          {label && (
+            <span className={cls(`${prefixCls}-colon`)}>
+              {colon ? ':' : ''}
+            </span>
+          )}
+        </div>
+      )}
 
       <div
         className={cls({
@@ -189,7 +199,7 @@ export const BaseItem: React.FC<IFormItemProps> = (props) => {
             <div className={cls(`${prefixCls}-addon-after`)}>{addonAfter}</div>
           )}
         </div>
-        {(!!feedbackText && feedbackLayout !== 'popover') && (
+        {!!feedbackText && feedbackLayout !== 'popover' && (
           <div className={cls(`${prefixCls}-help`)}>{feedbackText}</div>
         )}
         {extra && <div className={cls(`${prefixCls}-extra`)}>{extra}</div>}
@@ -202,12 +212,10 @@ export const BaseItem: React.FC<IFormItemProps> = (props) => {
 export const FormItem: ComposeFormItem = connect(
   BaseItem,
   mapProps(
-    { extract: 'validateStatus' },
-    { extract: 'title', to: 'label' },
-    { extract: 'required' },
+    { validateStatus: true, title: 'label', required: true },
     (props, field) => {
       if (isVoidField(field)) return props
-      if(!field) return props
+      if (!field) return props
       const takeMessage = () => {
         if (props.feedbackText) return props.feedbackText
         if (field.errors.length) return field.errors
@@ -222,7 +230,7 @@ export const FormItem: ComposeFormItem = connect(
     },
     (props, field) => {
       if (isVoidField(field)) return props
-      if(!field) return props
+      if (!field) return props
       return {
         feedbackStatus:
           field.validateStatus === 'validating'
@@ -232,7 +240,7 @@ export const FormItem: ComposeFormItem = connect(
     },
     (props, field) => {
       if (isVoidField(field)) return props
-      if(!field) return props
+      if (!field) return props
       let asterisk = false
       if (field.required) {
         asterisk = true
@@ -243,7 +251,7 @@ export const FormItem: ComposeFormItem = connect(
       return {
         asterisk,
       }
-    },
+    }
   )
 )
 

diff --git a/packages/antd/src/radio/index.tsx b/packages/antd/src/radio/index.tsx
@@ -10,25 +10,18 @@ type ComposedRadio = React.FC<RadioProps> & {
 
 export const Radio: ComposedRadio = connect(
   AntdRadio,
-  mapProps(
-    {
-      extract: 'value',
-      to: 'checked',
-    },
-    {
-      extract: 'onInput',
-      to: 'onChange',
-    }
-  )
+  mapProps({
+    value: 'checked',
+    onInput: 'onChange',
+  })
 )
 
 Radio.__ANT_RADIO = true
 
 Radio.Group = connect(
   AntdRadio.Group,
   mapProps({
-    extract: 'dataSource',
-    to: 'options',
+    dataSource: 'options',
   }),
   mapReadPretty(PreviewText.Select)
 )

diff --git a/packages/antd/src/select/index.tsx b/packages/antd/src/select/index.tsx
@@ -6,11 +6,8 @@ export const Select = connect(
   AntdSelect,
   mapProps(
     {
-      extract: 'dataSource',
-      to: 'options'
-    },
-    {
-      extract: 'loading'
+      dataSource: 'options',
+      loading: true,
     }
   ),
   mapReadPretty(PreviewText.Select)

diff --git a/packages/antd/src/switch/index.tsx b/packages/antd/src/switch/index.tsx
@@ -5,8 +5,7 @@ export const Switch = connect(
   AntdSwitch,
   mapProps(
     {
-      extract: 'value',
-      to: 'checked',
+      value: 'checked',
     },
     (props) => {
       const onChange = props.onChange

diff --git a/packages/antd/src/transfer/index.tsx b/packages/antd/src/transfer/index.tsx
@@ -3,15 +3,10 @@ import { Transfer as AntdTransfer } from 'antd'
 
 export const Transfer = connect(
   AntdTransfer,
-  mapProps(
-    {
-      extract: 'value',
-      to: 'targetKeys'
-    },
-    {
-      extract: 'dataSource'
-    }
-  )
+  mapProps({
+    value: 'targetKeys',
+    dataSource: true,
+  })
 )
 
 export default Transfer
diff --git a/packages/antd/src/tree-select/index.tsx b/packages/antd/src/tree-select/index.tsx
@@ -5,8 +5,7 @@ import { PreviewText } from '../preview-text'
 export const TreeSelect = connect(
   AntdTreeSelect,
   mapProps({
-    extract: 'dataSource',
-    to: 'treeData'
+    dataSource: 'treeData',
   }),
   mapReadPretty(PreviewText.TreeSelect)
 )

diff --git a/packages/antd/src/upload/index.tsx b/packages/antd/src/upload/index.tsx
@@ -161,8 +161,7 @@ export const Upload: ComposedUpload = connect(
     return <AntdUpload {...useUploadProps(props)} />
   },
   mapProps({
-    extract: 'value',
-    to: 'fileList',
+    value: 'fileList',
   })
 )
 
@@ -171,8 +170,7 @@ const Dragger = connect(
     return <AntdUpload.Dragger {...useUploadProps(props)} />
   },
   mapProps({
-    extract: 'value',
-    to: 'fileList',
+    value: 'fileList',
   })
 )
 

diff --git a/packages/next/src/cascader/index.tsx b/packages/next/src/cascader/index.tsx
@@ -5,7 +5,7 @@ import { PreviewText } from '../preview-text'
 export const Cascader = connect(
   CascaderSelect,
   mapProps({
-    extract: 'dataSource',
+    dataSource: true,
   }),
   mapReadPretty(PreviewText.Cascader)
 )

diff --git a/packages/next/src/checkbox/index.tsx b/packages/next/src/checkbox/index.tsx
@@ -12,22 +12,16 @@ type ComposedCheckbox = React.FC<CheckboxProps> & {
 
 export const Checkbox: ComposedCheckbox = connect(
   NextCheckbox,
-  mapProps(
-    {
-      extract: 'value',
-      to: 'checked',
-    },
-    {
-      extract: 'onInput',
-      to: 'onChange',
-    }
-  )
+  mapProps({
+    value: 'checked',
+    onInput: 'onChange',
+  })
 )
 
 Checkbox.Group = connect(
   NextCheckbox.Group,
   mapProps({
-    extract: 'dataSource',
+    dataSource: true,
   }),
   mapReadPretty(PreviewText.Select)
 )

diff --git a/packages/next/src/form-item/index.tsx b/packages/next/src/form-item/index.tsx
@@ -5,9 +5,7 @@ import { connect, mapProps } from '@formily/react'
 export const FormItem = connect(
   Form.Item,
   mapProps(
-    { extract: 'validateStatus', to: 'validateState' },
-    { extract: 'title', to: 'label' },
-    { extract: 'required' },
+    { validateStatus: 'validateState', title: 'label', required: true },
     (props, field) => {
       if (!field) return props
       if (isVoidField(field)) return props

diff --git a/packages/next/src/radio/index.tsx b/packages/next/src/radio/index.tsx
@@ -13,15 +13,14 @@ type ComposedRadio = React.FC<RadioProps> & {
 export const Radio: ComposedRadio = connect(
   NextRadio,
   mapProps({
-    extract: 'value',
-    to: 'checked',
+    value: 'checked',
   })
 )
 
 Radio.Group = connect(
   NextRadio.Group,
   mapProps({
-    extract: 'dataSource',
+    dataSource: true,
   }),
   mapReadPretty(PreviewText.Select)
 )

diff --git a/packages/next/src/select/index.tsx b/packages/next/src/select/index.tsx
@@ -5,7 +5,7 @@ import { PreviewText } from '../preview-text'
 export const Select = connect(
   NextSelect,
   mapProps({
-    extract: 'dataSource',
+    dataSource: true,
   }),
   mapReadPretty(PreviewText.Select)
 )

diff --git a/packages/next/src/switch/index.tsx b/packages/next/src/switch/index.tsx
@@ -4,8 +4,7 @@ import { connect, mapProps } from '@formily/react'
 export const Switch = connect(
   NextSwitch,
   mapProps({
-    extract: 'value',
-    to: 'checked',
+    value: 'checked',
   })
 )
 

diff --git a/packages/next/src/transfer/index.tsx b/packages/next/src/transfer/index.tsx
@@ -4,7 +4,7 @@ import { Transfer as NextTransfer } from '@alifd/next'
 export const Transfer = connect(
   NextTransfer,
   mapProps({
-    extract: 'dataSource',
+    dataSource: true,
   })
 )
 

diff --git a/packages/next/src/tree-select/index.tsx b/packages/next/src/tree-select/index.tsx
@@ -5,7 +5,7 @@ import { PreviewText } from '../preview-text'
 export const TreeSelect = connect(
   NextTreeSelect,
   mapProps({
-    extract: 'dataSource',
+    dataSource: true,
   }),
   mapReadPretty(PreviewText.TreeSelect)
 )