Merge pull request #306 from XiaoMi/hotfix/form-stable

fix(form): #295 #296
XiaoMi · Jun 14, 2019 · ae81280 · ae81280
2 parents 086c92f + 0883c76
commit ae81280
Show file tree

Hide file tree

Showing 6 changed files with 220 additions and 217 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,8 @@
 ## 1.4.6
 
 - 修复：`<Select />` 组件搜索特殊字符造成的崩溃问题 [#294](https://github.com/XiaoMi/hiui/issues/294)
+- 修复：`<Form />` 组件 `label` 文字超长时造成的浮动问题 [#295](https://github.com/XiaoMi/hiui/issues/295)
+- 修复：`<Form />` 组件验证规则未写 `trigger` 时也会触发验证的问题 [#296](https://github.com/XiaoMi/hiui/issues/296)
 
 ## 1.4.5
 

diff --git a/components/form/index.js b/components/form/index.js
@@ -1,4 +1,4 @@
-import React, {Component} from 'react'
+import React, { Component } from 'react'
 import classNames from 'classnames'
 import Item from './item'
 import './style/index'
@@ -24,7 +24,7 @@ class Form extends Component {
   }
 
   getClassNames () {
-    const {labelPosition, inline} = this.props
+    const { labelPosition, inline } = this.props
 
     const obj = {}
 
@@ -40,13 +40,15 @@ class Form extends Component {
   }
 
   addField (field) {
-    this.setState(prevState => ({
+    this.setState((prevState) => ({
       fields: prevState.fields.concat(field)
     }))
   }
 
   removeField (prop) {
-    const fields = this.state.fields.filter(field => field.props.prop !== prop)
+    const fields = this.state.fields.filter(
+      (field) => field.props.prop !== prop
+    )
 
     this.setState({
       fields
@@ -62,8 +64,8 @@ class Form extends Component {
       cb(valid)
     }
 
-    fields.forEach(field => {
-      field.validate('', errors => {
+    fields.forEach((field) => {
+      field.validate('', (errors) => {
         if (errors) {
           valid = false
         } else {
@@ -76,23 +78,25 @@ class Form extends Component {
   }
 
   validateField (key, cb) {
-    const field = this.state.fields.filter(field => field.props.prop === key)[0]
+    const field = this.state.fields.filter(
+      (field) => field.props.prop === key
+    )[0]
 
     if (!field) {
-      throw new Error('must call validateField with valid key string!')
+      throw new Error('must call validate Field with valid key string!')
     }
 
     field.validate('', cb)
   }
 
   resetValidates () {
-    this.state.fields.forEach(field => {
+    this.state.fields.forEach((field) => {
       field.resetValidate()
     })
   }
 
   render () {
-    const {children} = this.props
+    const { children } = this.props
 
     return (
       <form className={classNames('hi-form', this.getClassNames())}>

diff --git a/components/form/item.js b/components/form/item.js
@@ -54,8 +54,7 @@ class FormItem extends Component {
 
   getFilteredRule (trigger) {
     const rules = this.getRules()
-
-    return rules.filter(rule => {
+    return rules.filter((rule) => {
       return !rule.trigger || rule.trigger.indexOf(trigger) !== -1
     })
   }
@@ -129,11 +128,21 @@ class FormItem extends Component {
   }
 
   handleFieldBlur () {
-    this.validate('onBlur')
+    const hasOnBlur = this.getRules().some((rule) =>
+      (rule.trigger || '').includes('onBlur')
+    )
+    if (hasOnBlur) {
+      this.validate('onBlur')
+    }
   }
 
   handleFieldChange () {
-    this.validate('onChange')
+    const hasOnChange = this.getRules().some((rule) =>
+      (rule.trigger || '').includes('onChange')
+    )
+    if (hasOnChange) {
+      this.validate('onChange')
+    }
   }
 
   get labelWidth () {
@@ -153,33 +162,34 @@ class FormItem extends Component {
 
     return (
       <div className={classNames('hi-form-item', className, obj)}>
-        {
-          label && (
-            <label className={'hi-form-item' + '__label'} style={{ 'width': this.labelWidth }}>
-              {label}
-            </label>
-          )
-        }
-        <div className={'hi-form-item' + '__content'} style={{ 'marginLeft': this.labelWidth }}>
-          {
-            (Array.isArray(children) || !children)
-              ? children
-              : React.cloneElement(children, {
-                onChange: (...args) => {
-                  children.props.onChange && children.props.onChange(...args)
-                  setTimeout(() => {
-                    this.handleFieldChange()
-                  })
-                },
-                onBlur: (...args) => {
-                  children.props.onBlur && children.props.onBlur(...args)
-                  setTimeout(() => {
-                    this.handleFieldBlur()
-                  })
-                }
-              })
-          }
-          { error && <div className='hi-form-item__error'>{error}</div> }
+        {label ? (
+          <label
+            className={'hi-form-item' + '__label'}
+            style={{ width: this.labelWidth }}
+          >
+            {label}：
+          </label>
+        ) : (
+          <span style={{ width: this.labelWidth }} />
+        )}
+        <div className={'hi-form-item' + '__content'}>
+          {Array.isArray(children) || !children
+            ? children
+            : React.cloneElement(children, {
+              onChange: (...args) => {
+                children.props.onChange && children.props.onChange(...args)
+                setTimeout(() => {
+                  this.handleFieldChange()
+                })
+              },
+              onBlur: (...args) => {
+                children.props.onBlur && children.props.onBlur(...args)
+                setTimeout(() => {
+                  this.handleFieldBlur()
+                })
+              }
+            })}
+          <div className='hi-form-item--msg__error'>{error}</div>
         </div>
       </div>
     )

diff --git a/components/form/style/index.scss b/components/form/style/index.scss
@@ -1,6 +1,7 @@
 @import '@hi-ui/core-css/index.scss';
 
 .hi-form {
+  max-width: 100%;
   position: relative;
 
   fieldset {
@@ -18,72 +19,78 @@
     color: $gray-darker;
   }
 
+  &--inline {
+    display: flex;
+    align-items: center;
+  }
+
   &__title {
     box-sizing: border-box;
     margin-top: 0;
     margin-bottom: 24px;
     font-size: 16px;
     font-weight: 400;
   }
-}
-
-.hi-form-item {
-  font-size: $font-size-normal;
-  margin-right: $spacer-2;
-  // margin-top: 4px;
-  // margin-bottom: 4px;
-  padding: $spacer-2 0;
 
-  & + & {
-    // margin-top: $spacer-2;
+  &--label--left {
+    .hi-form-item__label {
+      text-align: left;
+    }
+  }
 
-    .hi-form--inline & {
-      // margin-top: 0;
+  &--label--right {
+    .hi-form-item__label {
+      text-align: right;
     }
   }
 
-  .hi-form--inline & {
-    display: inline-block;
-    vertical-align: top;
+  &--label--top {
+    padding-right: 0;
+    text-align: left;
+
+    .hi-form-item {
+      flex-direction: column;
+    }
   }
+}
+
+.hi-form-item {
+  display: flex;
+  font-size: $font-size-normal;
+  margin-right: $spacer-2;
 
   &__label {
-    float: left;
-    box-sizing: border-box;
-    padding-right: $spacer-3;
+    flex-shrink: 0;
+    min-height: 32px;
     line-height: 32px;
+    box-sizing: border-box;
+    padding-right: $spacer-2;
     vertical-align: top;
     color: $gray-darker;
-
-    .hi-form--label--left & {
-      text-align: left;
-    }
-
-    .hi-form--label--right & {
-      text-align: right;
-    }
-
-    .hi-form--label--top & {
-      float: none;
-      padding-right: 0;
-      text-align: left;
-    }
+    overflow-wrap: break-word;
   }
 
   &__content {
+    flex: 1;
     position: relative;
     vertical-align: top;
+    min-height: 32px;
+    line-height: 32px;
   }
 
   &__error {
-    position: absolute;
-    top: 0;
-    left: 100%;
-    margin-left: $spacer-2;
+    .hi-input__inner {
+      border-color: get-color($palette-secondary, 'danger');
+    }
+  }
+
+  &--msg__error {
     font-size: $font-size-small;
-    line-height: 32px;
-    white-space: nowrap;
-    color: #ff4949;
+    min-height: 24px;
+    padding: 2px 0;
+    box-sizing: border-box;
+    line-height: 20px;
+    color: get-color($palette-secondary, 'danger');
 
     .hi-form--inline & {
       top: 36px;