All files / src/components/Form/Verifier index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
/**
 * @Component Form.Verifier
 * @Type 表单项组件
 * @Author 瞿龙俊 - qulongjun@shine.design
 * @Date 2019-05-04 18:03
 */
import _ from 'lodash';
import React, {PureComponent} from 'react';
import classNames from 'classnames';
import * as PropTypes from 'prop-types';
import {classPrefix} from 'variables';
 
const REFS = [];
 
class Verifier extends PureComponent {
  constructor() {
    super();
 
    this.onForceValidate = this.onForceValidate.bind(this);
  }
 
  getChildContext() {
    const {errorState, successState, errorMsg} = this.props;
 
    return {errorState, successState, errorMsg};
  }
 
  /** 强制获取表单校验结果 */
  onForceValidate() {
    const {refs} = this;
 
    if (!_.isEmpty(REFS)) {
      return _.map(REFS, refName => {
        const {_onForceValidate} = refs[refName];
        return _onForceValidate();
      });
    }
    return true;
  }
 
  render() {
    const {isHighlight, isValidate, children} = this.props;
    let childrens = null;
 
    /** 计算样式 */
    const classes = classNames(
      {
        [`${classPrefix}-form--state`]: isHighlight,
      },
    );
 
    if (!_.isUndefined(children)) {
      if (_.isArray(children)) {
        childrens = _.map(children, (child, index) => {
          if (React.isValidElement(child) && _.isEqual(child.type.name, 'Item')) {
            REFS.push(`formItem-${index}`);
            return React.cloneElement(child, {isValidate, key: index, ref: `formItem-${index}`});
          }
          return child;
        });
      } else {
        REFS.push('formItem');
        childrens = React.cloneElement(children, {isValidate, ref: 'formItem'});
      }
    }
 
    return isHighlight ? (
      <div className={classes}>
        {childrens}
      </div>
    ) : childrens;
  }
}
 
Verifier.propTypes = {
  /** 校验失败提示状态颜色，目前支持 danger 和 warning */
  errorState: PropTypes.string,
  /** 是否展示表单通过状态 */
  successState: PropTypes.bool,
  /** 全局配置，配置错误提示文字，支持传入对象对默认提示文字进行覆盖 */
  errorMsg: PropTypes.object,
  /** 表单元素是否高亮显示错误提示 */
  isHighlight: PropTypes.bool,
  /** 是否开启自动表单校验 */
  isValidate: PropTypes.bool,
};
 
Verifier.defaultProps = {
  errorState: 'danger',
  successState: true,
  errorMsg: {},
  isHighlight: false,
  isValidate: true,
};
 
Verifier.childContextTypes = {
  /** 校验失败提示状态颜色 */
  errorState: PropTypes.string,
  /** 校验通过提示状态颜色 */
  successState: PropTypes.bool,
  /** 配置错误提示文字，支持传入 {ruleName : message} 对默认提示文字进行覆盖 */
  errorMsg: PropTypes.object,
};
 
export default Verifier;