重构 components 下部分组件代码

src/components/Button/index.js

+/**
+*
+* IKButton
+*
+*/
+
+import React, { PureComponent } from 'react';
+
+
+class IKButton extends PureComponent { // eslint-disable-line react/prefer-stateless-function
+  static propTypes = {
+    type: React.PropTypes.string,
+    icon: React.PropTypes.string,
+    className: React.PropTypes.string,
+  };
+
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    const props = $({}, this.props);
+
+    props.type = props.type || 'default';
+
+    classNames = ['ikmd-btn', `ikmd-btn-${props.type}`];
+
+    if (props.className && props.className.length > 0) {
+      classNames.concat(props.className.split(' '));
+    }
+
+    let children = props.children;
+
+    if (props.icon) {
+      children = (
+        <div className="ikmd-btn-icon-wrapper">
+          <svg>
+            <use xlinkHref={props.icon} />
+          </svg>
+          <p>{props.children}</p>
+        </div>
+      );
+    }
+
+    return (
+      <button className ={classNames.join(' ')}>
+        {children}
+      </button>
+    );
+  }
+}
+
+export default IKButton;

src/components/Button/tests/index.test.js

+// import IKButton from '../index';
+
+import expect from 'expect';
+// import { shallow } from 'enzyme';
+// import React from 'react';
+
+describe('<IKButton />', () => {
+  it('Expect to have unit tests specified', () => {
+    expect(true).toEqual(false);
+  });
+});

src/components/ButtonGrop/index.js

+/**
+*
+* IKButtonGroup
+*
+*/
+
+import React, { PureComponent } from 'react';
+
+
+class IKButtonGroup extends PureComponent { // eslint-disable-line react/prefer-stateless-function
+  static propTypes = {
+    title: React.PropTypes.string,
+    position: React.PropTypes.string,
+    className: React.PropTypes.string,
+  };
+
+  constructor(props) {
+    super(props);
+  }
+
+  componentDidMount() {
+    const $buttons = $('.ikmd-btn-group').children('button');
+    $buttons.width(`${100 / buttons.size()}%`);
+  }
+
+  render() {
+    const props = $.extend({}, this.props);
+    let className = 'ikmd-btn-group-container';
+
+    if (props.className) {
+      className += ` ${props.className}`;
+    }
+
+    if (props.position) {
+      className += ` ikmd-btn-group-${props.position}`;
+    }
+
+    let titleArea = null;
+    let buttons = [];
+    let buttonGroup = null;
+    if (props.title) {
+      titleArea = (<div className="ikmd-btn-group-header">{props.title}</div>)
+    }
+
+    if (className.indexOf('ikmd-btn-group-bottom') > -1) {
+      buttonGroup = (<div className="ikmd-btn-group-bottom-placeholder"></div>);
+    }
+
+    React.Children.map(props.children, (button) => {
+      if (button && button.props.onClick) {
+        buttons.push(<IKButton {...button.props}));
+      } else {
+        buttons.push(button);
+      }
+    });
+
+    return (
+      <div className="ikmd-btn-group-wrapper">
+        <div className={className}>
+          {titleArea}
+          <div className="ikmd-btn-group">
+            {buttons}
+          </div>
+          {buttonGroup}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default IKButtonGroup;

src/components/ButtonGrop/tests/index.test.js

+// import IKButtonGroup from '../index';
+
+import expect from 'expect';
+// import { shallow } from 'enzyme';
+// import React from 'react';
+
+describe('<IKButtonGroup />', () => {
+  it('Expect to have unit tests specified', () => {
+    expect(true).toEqual(false);
+  });
+});

src/components/CheckBox/index.js

+/**
+*
+* IKCheckBox
+*
+*/
+
+import React, { PureComponent } from 'react';
+
+class IKCheckBox extends PureComponent { // eslint-disable-line react/prefer-stateless-function
+  static propTypes = {
+    label: React.PropTypes.string.isRequired,
+    label_value: React.PropTypes.string.isRequired,
+    checked: React.PropTypes.boolean,
+    index: React.PropTypes.number,
+    onClick: React.PropTypes.func,
+  };
+
+  state = {
+    checked: false;
+  };
+
+  constructor(props) {
+    super(props);
+  }
+
+  handleClick(e) {
+    this.setState({ checked: !this.state.checked }, () => {
+      this.props.onClick(this.props.index, this.state.checked);
+    });
+  }
+
+  render() {
+    const props = $({}, this.props);
+
+    let className ='ikmd-check-box fa ';
+    if (this.state.checked) {
+      className += 'fa-check-square';
+    } else {
+      className += 'fa-square-o';
+    }
+
+    return (
+      <div className="ikmd-check-box-container">
+        <IKInputType label={props.label} vaule={props.label_value} />
+        <i className={className} onClick={this.handleClick}
+      </div>
+    );
+  }
+}
+
+export default IKCheckBox;

src/components/CheckBox/tests/index.test.js

+// import IKCheckBox from '../index';
+
+import expect from 'expect';
+// import { shallow } from 'enzyme';
+// import React from 'react';
+
+describe('<IKCheckBox />', () => {
+  it('Expect to have unit tests specified', () => {
+    expect(true).toEqual(false);
+  });
+});

src/components/Input/index.js

+/**
+*
+* IKInput
+*
+*/
+
+import React, { PureComponent } from 'react';
+
+
+class IKInput extends PureComponent { // eslint-disable-line react/prefer-stateless-function
+  static propTypes = {
+    required: React.PropTypes.boolean,
+    number: React.PropTypes.string,
+    mobile: React.PropTypes.string,
+    phone: React.PropTypes.string,
+    value: React.PropTypes.string,
+    inputType: React.PropTypes.string,
+    tips: React.PropTypes.string,
+    errorMsg: React.PropTypes.string,
+    percent: React.PropTypes.boolean,
+    decimal: React.PropTypes.number,
+    allowEmoji: React.PropTypes.boolean,
+    button, React.PropTypes.boolean,
+    buttonEvent: React.PropTypes.func,
+    onClick: React.PropTypes.func,
+    onKeydown: React.PropTypes.func,
+    onPressEnter: React.PropTypes.func,
+    onKeyUp: React.PropTypes.func,
+    onChange: React.PropTypes.func,
+    onBlur: React.PropTypes.func,
+  };
+
+  state = {
+    needValidate: validateReg? || this.props.required
+    validateReg: validateReg
+    focus: if isPresent(@props.value) then true else false
+    error: false
+    inputType: this.props.inputType || 'text'
+    tips: this.props.tips || tips
+    errorMsg: this.props.errorMsg || errorMsg
+    button: if isPresent(@props.button) then @props.button else false
+    allowEmoji: this.props.allowEmoji || false
+  };
+
+  constructor(props) {
+    super(props);
+
+    [validateReg, tips, errorMsg] = this.getValidateInfo();
+
+    this.setState {
+      needValidate: validateReg || this.props.required
+      validateReg: validateReg
+      focus: this.props.value ? true : false,
+      error: false
+      inputType: this.props.inputType || 'text'
+      tips: this.props.tips || tips
+      errorMsg: this.props.errorMsg || errorMsg
+      button: this.props.button ? this.props.button : false,
+      allowEmoji: this.props.allowEmoji || false
+    };
+  }
+
+  getValidateInfo() {
+    let tips = '';
+    let validateReg = '';
+    let errorMsg = '不能为空';
+
+    if (this.props.required) {
+      tips = '必填';
+    }
+
+    if (this.props.number) {
+      validateReg = /(^\s+$|^\d+[\.]?$|^\d+\.\d+$)|(^[\s]*$)/;
+      tips = '';
+      errorMsg = '必须为数字';
+    } else if (this.props.mobile) {
+      validateReg = /(^1[3|4|5|7|8][0-9]\d{8}$)|(^[\s]*$)/;
+      tips = '请填写手机号';
+      errorMsg = '格式不正确';
+    } else if (this.props.phone) {
+      validateReg = /(^[/\*\+\.\-\,\\(\)\s\d]+$)|(^[\s]*$)/;
+      tips = '请填写电话';
+      errorMsg = '格式不正确';
+    } else {
+      validateReg = this.props.validateReg;
+    }
+
+    return [validateReg, tips, errorMsg];
+  }
+
+  handleClick() {
+    this.refs.input.focus();
+  }
+
+  handleInput(e) {
+    let reg = null;
+    if (this.props.percent) {
+      reg = /^\d{1,2}[\.]?$|^\d{1,2}\.\d{1,2}$|^100$|^100[\.]?$|^100\.[0]{1,2}$/
+    } else if (this.props.decimal) {
+      const decimal = Number(this.props.decimal);
+
+      if (decimal === 0) {
+        reg = /^\d+$/;
+      } else {
+        reg = new RegExp(`^\\d+[\\.]?$|^\\d+\\.\\d{1,${decimal}}$`);
+      }
+    }
+
+    if (reg) {
+      if (value || reg.test(value)) {
+        this.props.onChange(value);
+      }
+    } else {
+      this.props.onChange(e);
+    }
+  }
+
+  handleKeyUp(e) {
+    if (this.props.onKeyUp) {
+      this.props.onKeyUp(e);
+    }
+  }
+
+  handleKeyDown(e) {
+    if (e.keyCode === 13 && this.props.onPressEnter) {
+      this.onPressEnter(e);
+    }
+
+    if (this.props.onKeyDown) {
+      this.onKeyDown(e);
+    }
+  }
+
+  handleFocus() {
+    this.setState({ focus: true });
+  }
+
+  handleBlur(e) {
+    if (this.props.onBlur) {
+      this.props.onBlur(e);
+    }
+
+    if (typeof(this.state.inputType) !== 'number' && !this.props.value) {
+      this.setState({ focus: false });
+    }
+  }
+
+  validate(callback) {
+    let error = false;
+
+    if (!this.state.allowEmoji) {
+      error = /[^\s]*[\uE000-\uF8FF]|\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDDFF][^\s]*/.test(this.props.value);
+      this.setState({
+        error: error,
+        errorMsg: '不允许输入表情'
+      }, () => {
+        callback && callback();
+      });
+    }
+
+    if (!error) {
+      const errorMsg = this.getValidateInfo()[2];
+
+      if (this.props.value === '' && this.props.required) {
+        error = true;
+      } else if (this.state.validateReg) {
+        error = this.state.validateReg.test(this.props.value);
+      } else {
+        error = false;
+      }
+
+      this.setState({
+        errorMsg: errorMsg,
+        error: error;
+      }, () => {
+        callback && callback();
+      })
+    }
+  }
+
+  componentWillReceiveProps(nextProps) {
+    const state = {
+      value: nextProps.value;
+    };
+
+    if (nextProps.value) {
+      state.focus = true;
+    }
+
+    this.setState(state);
+  }
+
+  render() {
+    const props = $({}, this.props);
+    let inputElm = null;
+    let svgElm = null;
+
+    props.type = props.type || 'input';
+
+    if (props.value) {
+      delete props.defaultValue;
+    }  else {
+      props.value = '';
+    }
+
+    if (props.button) {
+      props.style = { width : '80%' };
+    }
+
+    if (props.type === 'input') {
+      inputElm = (
+        <input
+          {...props}
+          ref="input"
+          type= {props.inputType}
+          onKeyDown={this.handleKeyDown}
+          onChange={this.handleInput}
+          onFocus={this.handleFocus}
+          onBlur={this.handleBlur}/>
+      );
+    } else {
+      inputElm = (
+        <textarea
+          {...props}
+          ref="input"
+          onKeyUp={this.handleKeyUp}
+          onKeyDown={this.handleKeyDown}
+          onChange={this.handleInput}
+          onFocus={this.handleFocus}
+          onBlur={this.handleBlur}/>
+      );
+    }
+
+    if (props.button) {
+      svgElm = (
+        <svg>
+          <use xlinkHref={props.button} onClick={props.buttonEvent} />
+        </svg>
+      );
+    }
+
+    return (
+      <div class="ikmd-input" onClick={this.props.onClick} 'data-valid'= {!this.state.error}
+        <label className="" onClick={this.handleClick}>{props.label} </label>
+        {inputElm}
+        {svgElm}
+        <p className="ikmd-input-tips">{this.state.tips}</p>
+        <p className="ikmd-input-errors">{this.state.errorMsg}</p>
+      </div>
+    );
+  }
+}
+
+export default IKInput;

src/components/Input/tests/index.test.js

+// import IKInput from '../index';
+
+import expect from 'expect';
+// import { shallow } from 'enzyme';
+// import React from 'react';
+
+describe('<IKInput />', () => {
+  it('Expect to have unit tests specified', () => {
+    expect(true).toEqual(false);
+  });
+});

src/components/InputGroup/index.js

+/**
+*
+* IKInputGroup
+*
+*/
+
+import React, { PureComponent } from 'react';
+
+
+class IKInputGroup extends PureComponent { // eslint-disable-line react/prefer-stateless-function
+  static propTypes = {
+    title: React.PropTypes.string,
+    position: React.PropTypes.string,
+    className: React.PropTypes.string,
+  };
+
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    const props = $.extend({}, this.props);
+    let className = 'ikmd-input-group-container';
+    let groupClassName = '';
+    let titleArea = null;
+
+    if (props.title) {
+      titleArea = (<div className="ikmd-input-group-header">{props.title}</div>)
+    }
+
+    if (props.position) {
+      groupClassName = `ikmd-input-group-${props.position}`;
+    }
+
+    if (props.className) {
+      className += ` ${props.className}`;
+    }
+
+    return (
+      <div className={className}>
+        <div className="ikmd-input-group">
+          {titleArea}
+          {props.children}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default IKInputGroup;

src/components/InputGroup/tests/index.test.js

+// import IKInputGroup from '../index';
+
+import expect from 'expect';
+// import { shallow } from 'enzyme';
+// import React from 'react';
+
+describe('<IKInputGroup />', () => {
+  it('Expect to have unit tests specified', () => {
+    expect(true).toEqual(false);
+  });
+});

src/components/InputText/index.js

+/**
+*
+* IKInputText
+*
+*/
+
+import React, { PureComponent } from 'react';
+
+
+class IKInputText extends PureComponent { // eslint-disable-line react/prefer-stateless-function
+  static propTypes = {
+    label: React.PropTypes.string.isRequired,
+    value: React.PropTypes.string.isRequired,
+  };
+
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    const props = $.extend({}, this.props)
+
+    let children = null;
+    if (props.value) {
+      children = (<span>{props.value}</span>)
+    }
+
+    return (
+      <div className="ikmd-input ikmd-input-text">
+        <label class={props.value? 'shrunken': ''}>{props.label}</label>
+        {children}
+      </div>
+    );
+  }
+}
+
+export default IKInputText;

src/components/InputText/tests/index.test.js

+// import IKInputText from '../index';
+
+import expect from 'expect';
+// import { shallow } from 'enzyme';
+// import React from 'react';
+
+describe('<IKInputText />', () => {
+  it('Expect to have unit tests specified', () => {
+    expect(true).toEqual(false);
+  });
+});

src/components/Loading/index.js

+/**
+*
+* IKLoading
+*
+*/
+
+import React, { PureComponent } from 'react';
+
+
+class IKLoading extends PureComponent { // eslint-disable-line react/prefer-stateless-function
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <div className="ikmd-loading">
+        {[1,2,3,4,5].map((index) => {
+          <div class=`ikmd-loading-rect${index}`></div>
+        })}
+      </div>
+    );
+  }
+}
+
+export default IKLoading;

src/components/Loading/tests/index.test.js

+// import IKLoading from '../index';
+
+import expect from 'expect';
+// import { shallow } from 'enzyme';
+// import React from 'react';
+
+describe('<IKLoading />', () => {
+  it('Expect to have unit tests specified', () => {
+    expect(true).toEqual(false);
+  });
+});