All files / src/components/Switch 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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
/**
 * @Component Switch
 * @Type 开关组件
 * @Author 瞿龙俊 - qulongjun@shine.design
 * @Date 2019-08-20 20:50
 */
import _ from 'lodash';
import React, {PureComponent} from 'react';
import classNames from 'classnames';
import * as PropTypes from 'prop-types';
import {classPrefix} from 'variables';
import './style/index.scss';
import {buildDefaultRules, runRegExp, VALIDATION_RULES} from "validations";
 
const DEFAULT_RULE = _.keys(VALIDATION_RULES);
 
class Switch extends PureComponent {
 
  onValidate = isFullResult => {
    const {value} = this.textInput;
    const {rules} = this.props;
    const resultList = [];
    // 移除 rules 中为false 的规则
    _.omitBy(rules, item => _.isBoolean(item) && !item);
    // 依次校验家表单规则
    _.mapValues(rules, (rule, key) => {
      let _result = true;
      // 预设校验规则
      if (_.includes(DEFAULT_RULE, key)) {
        const buildRules = buildDefaultRules(key, rule);
 
        if (_.isRegExp(buildRules)) {
          _result = runRegExp(buildRules, value);
        }
 
        if (_.isFunction(buildRules)) {
          _result = buildRules(value, rule);
        }
      }
 
      // Function：自定义校验规则,返回值不为 true 则校验不通过。
      if (_.isFunction(rule)) {
        _result = rule(value);
      }
 
      // RegExp：自定义校验规则，使用正则进行匹配，不符合则校验不通过
      if (_.isRegExp(rule)) {
        _result = runRegExp(rule, value);
      }
 
      if (!_result) resultList.push(key);
    });
 
    return _.isEmpty(resultList) || (isFullResult ? resultList : resultList[0]);
  };
 
  _onChange = event => {
    const {onChange, _onValidateResult} = this.props;
    if (event.reactComposition.composition === false) {
      if (_.isFunction(_onValidateResult)) _onValidateResult(this.onValidate());
      if (_.isFunction(onChange)) onChange(event);
    }
  };
 
  render() {
    const {isChecked, name, id, isDisabled, isControlled, isShowIcon} = this.props;
    const {bgColor, outlineColor, size} = this.props;
    const {onChange} = this.props;
    const {isValidate, rules} = this.props;
    const {className, attributes} = this.props;
 
    /** 计算样式 */
    const classes = classNames(
      `${classPrefix}-switch`,
      {
        [`${classPrefix}-switch--icon`]: isShowIcon,
        [`${classPrefix}-switch--${bgColor || outlineColor}`]: _.isString(bgColor) || _.isString(outlineColor),
        [`${classPrefix}-switch--outline`]: _.isString(outlineColor),
        [`${classPrefix}-switch--${size}`]: _.isString(size),
      },
      className,
    );
 
    // 开关属性配置
    const props = {
      type: 'checkbox',
      ...isControlled ? {checked: isChecked} : {defaultChecked: isChecked},
      name,
      id,
      disabled: isDisabled,
      ...attributes,
    };
 
    // 回调函数
    const callbacks = {
      onChange: (isValidate && !_.isUndefined(rules)) ? this._onChange : onChange,
    };
 
    return (
      <span className={classes}>
        <label>
          <input {...props} {...callbacks} />
          <span />
        </label>
      </span>
    );
  }
}
 
Switch.propTypes = {
  /** 开关表单名称 */
  name: PropTypes.node,
  /** 开关表单ID */
  id: PropTypes.node,
  /** 是否打开开关 */
  isChecked: PropTypes.bool,
  /** 设置是否禁用开关 */
  isDisabled: PropTypes.bool,
  /** 是否显示开关图标 */
  isShowIcon: PropTypes.bool,
  /** 是否将组件设置为受控组件 */
  isControlled: PropTypes.bool,
  /** 设置开关尺寸，支持 default：默认 / small：小尺寸 / large：大尺寸 */
  size: PropTypes.oneOf(['default', 'small', 'large']),
  /** 表单校验规则 */
  rules: PropTypes.object,
  /** 表单校验失败提示文字 */
  errorMsg: PropTypes.object,
  /** 输入框内容发生改变时触发 */
  onChange: PropTypes.func,
  /** 用户自定义修饰符 */
  className: PropTypes.string,
  /** 用户自定义属性 */
  attributes: PropTypes.object,
};
 
Switch.defaultProps = {
  name: undefined,
  id: undefined,
  isChecked: false,
  isDisabled: false,
  isControlled: false,
  isShowIcon: false,
  size: 'default',
  rules: undefined,
  errorMsg: undefined,
  onChange: undefined,
  className: '',
  attributes: {},
};
 
export default Switch;