From 97d199edb1fe03e503654d33ebc26a7f0ae6ad0b Mon Sep 17 00:00:00 2001 From: Bougie <1742070326@qq.com> Date: Fri, 14 Jun 2019 15:36:36 +0800 Subject: [PATCH 1/3] fix(form): #295 #296 --- components/form/index.js | 24 +++--- components/form/item.js | 72 +++++++++------- components/form/style/index.scss | 90 +++++++++++--------- docs/en-US/components/form.md | 137 +++++++++++++++---------------- docs/zh-CN/components/form.md | 117 ++++++++++++-------------- 5 files changed, 223 insertions(+), 217 deletions(-) diff --git a/components/form/index.js b/components/form/index.js index 6f90c5f1b..7f05107cc 100644 --- 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 (
diff --git a/components/form/item.js b/components/form/item.js index fe2d5367d..1d8fa31a0 100644 --- 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 (
- { - label && ( - - ) - } -
- { - (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 &&
{error}
} + {label ? ( + + ) : ( + + )} +
+ {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}
) diff --git a/components/form/style/index.scss b/components/form/style/index.scss index 79611fd19..92e925159 100644 --- 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,6 +19,11 @@ color: $gray-darker; } + &--inline { + display: flex; + align-items: center; + } + &__title { box-sizing: border-box; margin-top: 0; @@ -25,65 +31,71 @@ 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 { + // float: none; + 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 { + // position: absolute; + // top: 100%; + // bottom: 0; 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; + // white-space: nowrap; + color: get-color($palette-secondary, 'danger'); .hi-form--inline & { top: 36px; diff --git a/docs/en-US/components/form.md b/docs/en-US/components/form.md index 6c44c9ca6..17c3f8974 100644 --- a/docs/en-US/components/form.md +++ b/docs/en-US/components/form.md @@ -12,7 +12,6 @@ constructor() { super() - this.state = { checkedIndex: 0, alignList: [ @@ -33,40 +32,34 @@ constructor() { } } - render(){ const {position, checkedIndex} = this.state return (
-
- { - - this.setState({ - position: data, - checkedIndex: index - }) - }} - /> -
-
- - - - - - - - - - - - - -
+ { + this.setState({ + position: data, + checkedIndex: index + }) + }} + /> +
+
+
+ + + + + + + + + +
) } @@ -83,21 +76,17 @@ render(){ render(){ return ( -
-
-
- - - - - - - - - -
-
-
+
+ + + + + + + + + +
) } ``` @@ -113,9 +102,7 @@ render(){ constructor(props) { super(props) - this.form = React.createRef() - this.state = { form: { name: '', @@ -127,8 +114,8 @@ constructor(props) { name: [ { required: true, - message: input name, - trigger: 'blur,change' + message: input name, + trigger: 'onBlur,onChange' } ], region: [ @@ -154,7 +141,7 @@ constructor(props) { cb() } }, - trigger: 'change' + trigger: 'onChange' } ] } @@ -192,28 +179,32 @@ render(){ const {form, checkedIndex} = this.state return ( -
-
-
- - - - - - - - - - - - -
-
-
+
+ + + + + + + + + + + + +
) } ``` diff --git a/docs/zh-CN/components/form.md b/docs/zh-CN/components/form.md index ec501840b..e51af290f 100644 --- a/docs/zh-CN/components/form.md +++ b/docs/zh-CN/components/form.md @@ -7,7 +7,6 @@ ```js constructor() { super() - this.state = { alignCheckedIndex: 0, alignList: [ @@ -45,14 +44,13 @@ constructor() { } render(){ - const {position, alignCheckedIndex, columnCheckedIndex} = this.state + const { position, alignCheckedIndex, columnCheckedIndex } = this.state const Row = Grid.Row const Col = Grid.Col return (
- - - - -
- - + + - - - + + - - + -
@@ -114,21 +105,17 @@ render(){ ```js render(){ return ( -
-
-
- - - - - - - - - -
-
-
+
+ + + + + + + + + +
) } ``` @@ -155,7 +142,7 @@ constructor(props) { name: [ { required: true, - message: 请输入名称, + message: 请输入名称, trigger: 'onBlur,onChange' } ], @@ -207,7 +194,8 @@ cancelSubmit() { form: { name: '', region: '', - count: '' + count: '', + type: [] } }) this.form.resetValidates() @@ -228,36 +216,37 @@ handleChange(key, e, value, index) { render(){ const Row = Grid.Row const Col = Grid.Col - const {form, checkedIndex} = this.state - + const {form} = this.state return ( -
+
this.form = node} model={form} rules={this.state.rules} labelWidth='80'> - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + +
-
+ ) } ``` @@ -287,8 +276,8 @@ render(){ ### Form Methods -| 方法名| 说明| -| --- | --- | -| validate(callback) | 对整个表单进行校验 | -| validateField(prop, callback) | 对表单字段进行校验 | -| resetValidates | 重置整个表单的验证 | +| 方法名 | 说明 | 回调参数 | +| ----------------------------- | ------------------ | ---------------------------------------- | +| validate(callback) | 对整个表单进行校验 | (valid: boolean) => void | +| validateField(prop, callback) | 对表单字段进行校验 | (prop: string, (valid: boolean) => void) | +| resetValidates() | 重置整个表单的验证 | - | From fd7ab098aaad5428b8fa168b24ef07be6cd02be4 Mon Sep 17 00:00:00 2001 From: Bougie <1742070326@qq.com> Date: Fri, 14 Jun 2019 15:47:37 +0800 Subject: [PATCH 2/3] chore(form): remove useless comment --- components/form/style/index.scss | 5 ----- 1 file changed, 5 deletions(-) diff --git a/components/form/style/index.scss b/components/form/style/index.scss index 92e925159..0bf18cbac 100644 --- a/components/form/style/index.scss +++ b/components/form/style/index.scss @@ -45,7 +45,6 @@ } &--label--top { - // float: none; padding-right: 0; text-align: left; @@ -86,15 +85,11 @@ } &--msg__error { - // position: absolute; - // top: 100%; - // bottom: 0; font-size: $font-size-small; min-height: 24px; padding: 2px 0; box-sizing: border-box; line-height: 20px; - // white-space: nowrap; color: get-color($palette-secondary, 'danger'); .hi-form--inline & { From 0883c76e186f084a1dd9d81e5245b23cbb7c643f Mon Sep 17 00:00:00 2001 From: Bougie <1742070326@qq.com> Date: Fri, 14 Jun 2019 16:00:01 +0800 Subject: [PATCH 3/3] docs: update change log --- CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5148d16e2..efc64b52b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,8 @@ ## 1.4.6 - 修复：`