ost-ui/dist/npm/OstSwitch/index.js

ost ui for react

import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
import _inherits from 'babel-runtime/helpers/inherits';
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';

var OstSwitch = function (_Component) {
  _inherits(OstSwitch, _Component);

  function OstSwitch(props) {
    _classCallCheck(this, OstSwitch);

    var _this = _possibleConstructorReturn(this, _Component.call(this, props));

    _this.state = { checked: !!props.defaultChecked };
    return _this;
  }

  OstSwitch.prototype.render = function render() {
    var _this2 = this;

    var _props = this.props,
        _onClick = _props.onClick,
        disabled = _props.disabled;
    var checked = this.state.checked;

    return React.createElement(
      'div',
      {
        onClick: function onClick() {
          _this2.setState({ checked: !checked });
          _onClick && _onClick({ 'checked': !checked });
        },
        className: classnames("ost-swtich", {
          'ost-swtich-checked': checked,
          'ost-swtich-unchecked': !checked,
          'ost-swtich-disabled': disabled
        }) },
      React.createElement('span', { className: classnames("ost-swtich-dot", {
          "ost-swtich-dot-checked": checked,
          'ost-swtich-dot-unchecked': !checked
        }) })
    );
  };

  return OstSwitch;
}(Component);

export default OstSwitch;

OstSwitch.propTypes = {
  checked: PropTypes.bool
};