cuz/src/components/Input/index.js

Front-end modular development kit.

import React from 'react';
import classNames from 'classnames';
import { Input, utils } from 'react-bootstrap';
import FormGroup from 'react-bootstrap/lib/FormGroup';

export default class cuzInput extends Input {
  constructor(props) {
    super(props);
    this.state = {
      checked: this.props.checked || false
    };
  }

  handleRadio() {
    const { onSelect, value, eventKey } = this.props;
    if ( onSelect ) {
      onSelect(value, eventKey);
    }
  }

  handleCheckbox() {
    if (this.props.disabled) return;
    this.setState({
      checked: !this.state.checked
    });
  }

  renderInput() {
    if (this.props.type === 'radio') {
      const className = this.isCheckboxOrRadio() ? '' : 'form-control';
      return (
        <input
          {...this.props}
          className={classNames(this.props.className, className)}
          onChange={utils.createChainedFunction(this.props.onChange, this.handleRadio).bind(this)}
          ref="input"
          key="input"
          style={{}} />
      );
    } else if (this.props.type === 'checkbox') {
      const className = this.isCheckboxOrRadio() ? '' : 'form-control';
      return (
        <input
          {...this.props}
          className={classNames(this.props.className, className)}
          onChange={utils.createChainedFunction(this.props.onChange, this.handleCheckbox).bind(this)}
          ref="input"
          key="input"
          style={{}} />
      );
    }
    return super.renderInput();
  }

  renderLabel(children) {
    const classes = {
      'control-label': !this.isCheckboxOrRadio(),
    };
    classes[this.props.labelClassName] = this.props.labelClassName;
    if (this.props.type === 'radio') {
      classes.checked = this.props.checked;
      classes.disabled = this.props.disabled;
    } else if (this.props.type === 'checkbox') {
      classes.checked = this.props.checked === undefined ? this.state.checked : this.props.checked;
      classes['rect-checkbox'] = (this.props.checkType === 'rect');
      classes.disabled = this.props.disabled;
    }
    return (
      <label htmlFor={this.props.id} className={classNames(classes)} key="label">
        {children}
        {this.props.label}
      </label>
    );
  }

  renderFormGroup(children) {
    const isCheckboxOrRadio = this.isCheckboxOrRadio();
    return (
      <FormGroup {...this.props}
        standalone={isCheckboxOrRadio}
        groupClassName={classNames({'form-item': isCheckboxOrRadio})}>
        {children}
      </FormGroup>
    );
  }

  render() {
    return super.render();
  }
}