feat: update 'feedbackText'

alibaba · Feb 15, 2021 · 9e71f0c · 9e71f0c
1 parent 210c7b5
commit 9e71f0c
Show file tree

Hide file tree

Showing 3 changed files with 160 additions and 7 deletions.
diff --git a/packages/antd/docs/components/FormItem.md b/packages/antd/docs/components/FormItem.md
@@ -284,18 +284,20 @@ export default () => {
       />
 
       <SchemaField.String
-        title="帮助信息description"
+        title="帮助信息feedbackText"
         x-decorator="FormItem"
         x-component="Input"
-        description="description"
+        x-decorator-props={{
+          feedbackText: 'feedbackText'
+        }}
       />
 
       <SchemaField.String
         title="额外信息extra"
         x-decorator="FormItem"
         x-component="Input"
-        description="description"
         x-decorator-props={{
+          feedbackText: 'feedbackText',
           extra: 'extra',
         }}
       />
@@ -306,6 +308,122 @@ export default () => {
 }
 ```
 
+## inset
+
+```tsx
+import React, { useState } from 'react'
+import { Input, Radio, TreeSelect, Cascader, Select, DatePicker, FormItem, InputNumber, Switch, FormButtonGroup, Submit } from '@formily/antd'
+import { createForm, onFieldChange } from '@formily/core'
+import { FormProvider, createSchemaField } from '@formily/react'
+
+const Title = props => <h3>{props.text}</h3>
+
+const SchemaField = createSchemaField({
+  components: {
+    Input,
+    Select,
+    Cascader,
+    TreeSelect,
+    DatePicker,
+    InputNumber,
+    Switch,
+    Radio,
+    FormItem,
+    Title,
+  },
+})
+
+const form = createForm()
+
+export default () => {
+  return <FormProvider form={form}>
+    <SchemaField>
+
+      <SchemaField.String
+          name="input"
+          title="Input"
+          x-decorator="FormItem"
+          x-component="Input"
+          required
+          x-decorator-props={{
+            inset: true
+          }}
+        />
+        <SchemaField.String
+          name="Select"
+          title="Select"
+          x-decorator="FormItem"
+          x-component="Select"
+          required
+          x-decorator-props={{
+            inset: true
+          }}
+        />
+        <SchemaField.String
+          name="Select"
+          title="Select"
+          x-decorator="FormItem"
+          x-component="Select"
+          required
+          x-decorator-props={{
+            inset: true
+          }}
+        />
+        <SchemaField.String
+          name="Cascader"
+          title="Cascader"
+          x-decorator="FormItem"
+          x-component="Cascader"
+          required
+          x-decorator-props={{
+            inset: true
+          }}
+        />
+        <SchemaField.String
+          name="DatePicker"
+          title="DatePicker"
+          x-decorator="FormItem"
+          x-component="DatePicker"
+          required
+          x-decorator-props={{
+            inset: true
+          }}
+        />
+        <SchemaField.String
+          name="InputNumber"
+          title="InputNumber"
+          x-decorator="FormItem"
+          x-component="InputNumber"
+          required
+          x-decorator-props={{
+            inset: true
+          }}
+        />
+        <SchemaField.String
+          name="TreeSelect"
+          title="TreeSelect"
+          x-decorator="FormItem"
+          x-component="TreeSelect"
+          required
+          x-decorator-props={{
+            inset: true
+          }}
+        />
+        <SchemaField.String
+          name="Switch"
+          title="Switch"
+          x-decorator="FormItem"
+          x-component="Switch"
+          required
+          x-decorator-props={{
+            inset: true
+          }}
+        />
+    </SchemaField>
+  </FormProvider>
+}
+```
+
 ## 反馈信息
 
 ```tsx

diff --git a/packages/antd/src/form-item/index.tsx b/packages/antd/src/form-item/index.tsx
@@ -35,8 +35,8 @@ const useFormItemLayout = (props) => {
 export const FormItemBase = (props) => {
   const { children, ...others } = props;
   const formLayout = useFormItemLayout(others);
-  const { label, colon = true, addonBefore, addonAfter, asterisk, feedbackStatus, extra, help,
-    fullness, feedbackLayout,
+  const { label, colon = true, addonBefore, addonAfter, asterisk, feedbackStatus, extra, feedbackText,
+    fullness, feedbackLayout, inset,
     labelWidth, wrapperWidth, labelCol, wrapperCol,
     labelAlign = 'right', wrapperAlign = 'left',
     size, labelWrap, wrapperWrap, tooltip,
@@ -66,7 +66,8 @@ export const FormItemBase = (props) => {
     [`${prefixCls}-${feedbackStatus}`]: !!feedbackStatus,
     [`${prefixCls}-size-${size}`]: !!size,
     [`${prefixCls}-feedback-layout-${feedbackLayout}`]: !!feedbackLayout,
-    [`${prefixCls}-fullness`]: !!fullness,
+    [`${prefixCls}-fullness`]: !!fullness || !!inset,
+    [`${prefixCls}-inset`]: !!inset,
     [`${prefixCls}-label-align-${labelAlign}`]: true,
     [`${prefixCls}-control-align-${wrapperAlign}`]: true,
     [`${prefixCls}-label-wrap`]: !!labelWrap,
@@ -92,7 +93,7 @@ export const FormItemBase = (props) => {
         <div style={wrapperStyle} className={cls(`${prefixCls}-control-content-component`)}>{children}</div>
         {addonAfter && <div className={cls(`${prefixCls}-addon-after`)}>{addonAfter}</div>}
       </div>
-      {help && <div className={cls(`${prefixCls}-help`)}>{help}</div>}
+      {feedbackText && <div className={cls(`${prefixCls}-help`)}>{feedbackText}</div>}
       {extra && <div className={cls(`${prefixCls}-extra`)}>{extra}</div>}
     </div>
   </div>

diff --git a/packages/antd/src/form-item/style.less b/packages/antd/src/form-item/style.less
@@ -13,6 +13,16 @@
     text-overflow: ellipsis;
     white-space: nowrap;
 }
+
+.@{form-item-cls}-label > label {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    height: 32px;
+    color: rgba(0,0,0,.85);
+    font-size: 14px;
+}
+
 .@{form-item-cls}-label-align-left {
     .@{form-item-cls}-label {
         text-align: left;
@@ -117,13 +127,23 @@
 
         .@{form-item-cls}-control-content-component {
             flex: 1;
+            position: relative;
+            display: flex;
+            align-items: center;
+            min-height: 32px;
         }
 
         .@{form-item-cls}-addon-before {
             margin-right: 8px;
+            display: inline-flex;
+            align-items: center;
+            min-height: 32px;
         }
         .@{form-item-cls}-addon-after {
             margin-left: 8px;
+            display: inline-flex;
+            align-items: center;
+            min-height: 32px;
         }
     }
 }
@@ -357,6 +377,20 @@
     }
 }
 
+.@{form-item-cls}-inset {
+    border-radius: 2px;
+    border: 1px solid #d9d9d9;
+    padding-left: 12px;
+
+    .ant-picker,
+    .ant-cascader-picker:focus .ant-cascader-input,
+    .ant-select:not(.ant-select-customize-input) .ant-select-selector,
+    .ant-input {
+        border: none;
+        box-shadow: none;
+    }    
+}
+
 .@{form-item-cls}-error {
     .ant-input,
     .ant-input-affix-wrapper,