feat: add feedback layout

alibaba · Feb 17, 2021 · df56cde · df56cde
1 parent 7a980b5
commit df56cde
Show file tree

Hide file tree

Showing 3 changed files with 103 additions and 16 deletions.
diff --git a/packages/antd/docs/components/FormItem.md b/packages/antd/docs/components/FormItem.md
@@ -159,6 +159,25 @@ export default () => {
   return (
     <FormProvider form={form}>
       <SchemaField>
+        <SchemaField.Void
+          x-component="Title"
+          x-component-props={{ text: 'label为空时的展示' }}
+        />
+        <SchemaField.String
+          x-decorator="FormItem"
+          x-component="Input"
+          x-decorator-props={{
+            labelWidth: 300,
+          }}
+        />
+        <SchemaField.String
+          title=""
+          x-decorator="FormItem"
+          x-component="Input"
+          x-decorator-props={{
+            labelWidth: 300,
+          }}
+        />
         <SchemaField.Void
           x-component="Title"
           x-component-props={{ text: '冒号' }}
@@ -167,7 +186,7 @@ export default () => {
           title="默认"
           x-decorator="FormItem"
           x-component="Input"
-        />
+        />        
         <SchemaField.String
           title="无冒号(colon=false)"
           x-decorator="FormItem"
@@ -665,16 +684,68 @@ export default () => {
         />
 
         <SchemaField.String
-          title="加载状态(feedbackStatus=loading)"
+          title="加载状态(feedbackStatus=pending)"
           x-decorator="FormItem"
           x-component="Input"
           description="description"
           x-decorator-props={{
-            feedbackStatus: 'loading',
+            feedbackStatus: 'pending',
             feedbackIcon: <LoadingOutlined style={{ color: '#1890ff' }} />,
           }}
         />
 
+        <SchemaField.Void
+          x-component="Title"
+          x-component-props={{ text: '反馈信息的布局' }}
+        />
+
+        <SchemaField.String
+          title="紧凑模式有feedback(feedbackLayout=terse)"
+          x-decorator="FormItem"
+          x-component="Input"
+          x-decorator-props={{
+            feedbackStatus: 'error',
+            feedbackText: 'error message',
+            feedbackLayout: 'terse'
+          }}
+        />
+
+        <SchemaField.String
+          title="紧凑模式无feedback(feedbackLayout=terse)"
+          x-decorator="FormItem"
+          x-component="Input"
+          x-decorator-props={{
+            feedbackLayout: 'terse'
+          }}
+        />
+
+        <SchemaField.String
+          title="松散模式(feedbackLayout=loose)"
+          x-decorator="FormItem"
+          x-component="Input"
+          x-decorator-props={{
+            feedbackStatus: 'error',
+            feedbackText: 'error message',
+            feedbackLayout: 'loose'
+          }}
+        />
+
+        <SchemaField.String
+          title="弹出模式(feedbackLayout=popover)"
+          x-decorator="FormItem"
+          x-component="Input"
+          x-decorator-props={{
+            feedbackStatus: 'error',
+            feedbackText: 'error message',
+            feedbackLayout: 'popover'
+          }}
+        />
+
+        <SchemaField.Void
+          x-component="Title"
+          x-component-props={{ text: '组件的适配情况' }}
+        />
+
         <SchemaField.String
           title="Select"
           x-decorator="FormItem"
@@ -768,13 +839,15 @@ const SchemaField = createSchemaField({
 })
 
 const form = createForm({
+  values: {
+    size: 'default',
+  },
   effects: () => {
     onFieldChange('size', ['value'], (field, form) => {
       form.setFieldState('sizeWrap.*', (state) => {
-        if (!state.props['x-decorator-props']) {
-          state.props['x-decorator-props'] = {}
+        if (state.decorator[1]) {
+          state.decorator[1].size = field.value
         }
-        state.props['x-decorator-props'].size = field.value
       })
     })
   },

diff --git a/packages/antd/src/form-item/index.tsx b/packages/antd/src/form-item/index.tsx
@@ -4,7 +4,7 @@ import { usePrefixCls } from '../__builtins__'
 import { isVoidField } from '@formily/core'
 import { connect, mapProps } from '@formily/react'
 import { useFormLayout, useFormShallowLayout } from '../form-layout'
-import { Tooltip } from 'antd'
+import { Tooltip, Popover } from 'antd'
 import { QuestionCircleOutlined } from '@ant-design/icons'
 
 export interface IFormItemProps {
@@ -113,12 +113,20 @@ export const BaseItem: React.FC<IFormItemProps> = (props) => {
     enableCol = true
   }
 
+  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}-size-${size}`]: !!size,
         [`${prefixCls}-feedback-layout-${feedbackLayout}`]: !!feedbackLayout,
         [`${prefixCls}-fullness`]: !!fullness || !!inset || !!feedbackIcon,
@@ -132,7 +140,7 @@ export const BaseItem: React.FC<IFormItemProps> = (props) => {
         [props.className]: !!props.className,
       })}
     >
-      <div
+      { label !== undefined && <div
         className={cls({
           [`${prefixCls}-label`]: true,
           [`${prefixCls}-item-col-${labelCol}`]: enableCol && !!labelCol,
@@ -148,8 +156,8 @@ export const BaseItem: React.FC<IFormItemProps> = (props) => {
             <QuestionCircleOutlined className={cls(`${prefixCls}-tooltip`)} />
           </Tooltip>
         )}
-        {colon && <span className={cls(`${prefixCls}-colon`)}>{':'}</span>}
-      </div>
+        { label && <span className={cls(`${prefixCls}-colon`)}>{colon ? ':' : ''}</span>}
+      </div> }
 
       <div
         className={cls({
@@ -170,7 +178,7 @@ export const BaseItem: React.FC<IFormItemProps> = (props) => {
               [`${prefixCls}-control-content-component-has-feedback-icon`]: !!feedbackIcon,
             })}
           >
-            {children}
+            {formatChildren}
             {feedbackIcon && (
               <div className={cls(`${prefixCls}-feedback-icon`)}>
                 {feedbackIcon}
@@ -181,7 +189,7 @@ export const BaseItem: React.FC<IFormItemProps> = (props) => {
             <div className={cls(`${prefixCls}-addon-after`)}>{addonAfter}</div>
           )}
         </div>
-        {!!feedbackText && (
+        {(!!feedbackText && feedbackLayout !== 'popover') && (
           <div className={cls(`${prefixCls}-help`)}>{feedbackText}</div>
         )}
         {extra && <div className={cls(`${prefixCls}-extra`)}>{extra}</div>}
@@ -219,7 +227,7 @@ export const FormItem: ComposeFormItem = connect(
         feedbackStatus:
           field.validateStatus === 'validating'
             ? 'pending'
-            : field.validateStatus,
+            : field.decorator[1]?.feedbackStatus || field.validateStatus,
       }
     },
     (props, field) => {
@@ -235,7 +243,7 @@ export const FormItem: ComposeFormItem = connect(
       return {
         asterisk,
       }
-    }
+    },
   )
 )
 

diff --git a/packages/antd/src/form-item/style.less b/packages/antd/src/form-item/style.less
@@ -4,7 +4,7 @@
 
 .@{form-item-cls} {
     display: flex;
-    margin-bottom: 24px;
+    margin-bottom: 16px;
 }
 
 .@{form-item-cls}-label {
@@ -357,7 +357,7 @@
 .@{form-item-cls}-help,
 .@{form-item-cls}-extra {
     clear: both;
-    min-height: 24px;
+    min-height: 16px;
     color: rgba(0, 0, 0, 0.45);
     font-size: 14px;
     line-height: 1.5715;
@@ -448,4 +448,10 @@
     .@{form-item-cls}-help {
         color: #faad14;
     }
+}
+
+.@{form-item-cls}-feedback-layout-terse {
+    &.@{form-item-cls}-feedback-status-valid {
+        margin-bottom: 0;
+    }
 }