@lyra/components/lib/toggles/Switch.js

Basic UX components

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _switchStyle = require('part:@lyra/components/toggles/switch-style');

var _switchStyle2 = _interopRequireDefault(_switchStyle);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

class Switch extends _react2.default.Component {
  constructor(...args) {
    var _temp;

    return _temp = super(...args), this.state = {
      hasFocus: false
    }, this.handleFocus = event => {
      this.setState({ hasFocus: true });
      this.props.onFocus(event);
    }, this.handleBlur = event => {
      this.setState({ hasFocus: false });
      this.props.onBlur(event);
    }, this.setInput = el => {
      this._input = el;
    }, _temp;
  }

  componentDidMount() {
    var _props = this.props;
    const checked = _props.checked,
          displayIndeterminateAs = _props.displayIndeterminateAs;

    if (displayIndeterminateAs === 'indeterminate' && typeof checked === 'undefined' && this._input) {
      this._input.indeterminate = true;
    }
  }

  focus() {
    if (this._input) {
      this._input.focus();
    }
  }

  getDisplayValue() {
    var _props2 = this.props;
    const checked = _props2.checked,
          displayIndeterminateAs = _props2.displayIndeterminateAs;

    if (typeof checked === 'undefined') {
      return displayIndeterminateAs === 'indeterminate' ? undefined : displayIndeterminateAs === true;
    }
    return checked;
  }

  render() {
    var _props3 = this.props;

    const disabled = _props3.disabled,
          markers = _props3.markers,
          _ignore = _props3.checked,
          displayIndeterminateAs = _props3.displayIndeterminateAs,
          label = _props3.label,
          description = _props3.description,
          readOnly = _props3.readOnly,
          rest = _objectWithoutProperties(_props3, ['disabled', 'markers', 'checked', 'displayIndeterminateAs', 'label', 'description', 'readOnly']);

    const hasFocus = this.state.hasFocus;


    const checked = this.getDisplayValue();
    let thumbClass = checked ? _switchStyle2.default.thumbChecked : _switchStyle2.default.thumb;

    if (typeof checked === 'undefined') {
      thumbClass = _switchStyle2.default.thumbIndeterminate;
    }

    return _react2.default.createElement(
      'label',
      {
        className: `
          ${disabled || readOnly ? _switchStyle2.default.isDisabled : _switchStyle2.default.isEnabled}
          ${typeof checked === 'undefined' ? _switchStyle2.default.indeterminate : _switchStyle2.default.root}
          ${checked ? _switchStyle2.default.isChecked : _switchStyle2.default.unChecked}
          ${hasFocus ? _switchStyle2.default.hasFocus : ''}
        `,
        onBlur: this.handleBlur
      },
      _react2.default.createElement(
        'div',
        { className: _switchStyle2.default.inner },
        _react2.default.createElement('div', { className: _switchStyle2.default.track }),
        _react2.default.createElement(
          'div',
          { className: thumbClass },
          _react2.default.createElement('div', { className: _switchStyle2.default.focusHelper })
        ),
        _react2.default.createElement('input', _extends({}, rest, {
          className: _switchStyle2.default.input,
          type: 'checkbox',
          disabled: disabled || readOnly,
          checked: checked,
          ref: this.setInput,
          onFocus: this.handleFocus
        })),
        _react2.default.createElement(
          'div',
          { className: _switchStyle2.default.label },
          label
        ),
        description && _react2.default.createElement(
          'div',
          { className: _switchStyle2.default.description },
          description
        )
      )
    );
  }
}
exports.default = Switch;
Switch.propTypes = {
  label: _propTypes2.default.string.isRequired,
  description: _propTypes2.default.string,
  markers: _propTypes2.default.array,
  checked: _propTypes2.default.bool,
  displayIndeterminateAs: _propTypes2.default.oneOf([true, false, 'indeterminate']),
  disabled: _propTypes2.default.bool,
  onFocus: _propTypes2.default.func,
  onBlur: _propTypes2.default.func,
  readOnly: _propTypes2.default.bool
};
Switch.defaultProps = {
  onFocus: () => {},
  onBlur: () => {}
};