@codementor/ui-kit/ToggleSwitch.js

'use strict';

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

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _keys = require('babel-runtime/core-js/object/keys');

var _keys2 = _interopRequireDefault(_keys);

var _style = require('styled-jsx/style');

var _style2 = _interopRequireDefault(_style);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _omitBy = require('lodash/omitBy');

var _omitBy2 = _interopRequireDefault(_omitBy);

var _isUndefined = require('lodash/isUndefined');

var _isUndefined2 = _interopRequireDefault(_isUndefined);

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

var SIZE_MAP = {
  default: {
    width: '60px',
    height: '25px',
    slidingRange: '37px',
    sliderWidth: '21px',
    sliderHeight: '21px',
    sliderBeforeMargin: '-8px 0 0 -8px',
    sliderBeforeWidth: '17px',
    sliderBeforeHeight: '17px',
    sliderOnTextRight: '11px',
    sliderOffTextLeft: '11px'
  },
  small: {
    width: '40px',
    height: '20px',
    slidingRange: '22px',
    sliderWidth: '16px',
    sliderHeight: '16px',
    sliderBeforeMargin: '-6px 0 0 -6px',
    sliderBeforeWidth: '13px',
    sliderBeforeHeight: '13px',
    sliderOnTextRight: '6px',
    sliderOffTextLeft: '6px'
  }
};

var SUPPORTED_SIZES = exports.SUPPORTED_SIZES = (0, _keys2.default)(SIZE_MAP);

var ToggleSwitch = function (_PureComponent) {
  (0, _inherits3.default)(ToggleSwitch, _PureComponent);

  function ToggleSwitch() {
    var _ref;

    var _temp, _this, _ret;

    (0, _classCallCheck3.default)(this, ToggleSwitch);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = ToggleSwitch.__proto__ || (0, _getPrototypeOf2.default)(ToggleSwitch)).call.apply(_ref, [this].concat(args))), _this), _this._getSize = function (size) {
      return SUPPORTED_SIZES.includes(size) ? size : SUPPORTED_SIZES[0];
    }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
  }

  (0, _createClass3.default)(ToggleSwitch, [{
    key: 'render',
    value: function render() {
      var _props = this.props,
          size = _props.size,
          positiveLabel = _props.positiveLabel,
          negativeLabel = _props.negativeLabel,
          props = (0, _objectWithoutProperties3.default)(_props, ['size', 'positiveLabel', 'negativeLabel']);

      var _SIZE_MAP$_getSize = SIZE_MAP[this._getSize(size)],
          width = _SIZE_MAP$_getSize.width,
          height = _SIZE_MAP$_getSize.height,
          slidingRange = _SIZE_MAP$_getSize.slidingRange,
          sliderWidth = _SIZE_MAP$_getSize.sliderWidth,
          sliderHeight = _SIZE_MAP$_getSize.sliderHeight,
          sliderBeforeMargin = _SIZE_MAP$_getSize.sliderBeforeMargin,
          sliderBeforeWidth = _SIZE_MAP$_getSize.sliderBeforeWidth,
          sliderBeforeHeight = _SIZE_MAP$_getSize.sliderBeforeHeight,
          sliderOnTextRight = _SIZE_MAP$_getSize.sliderOnTextRight,
          sliderOffTextLeft = _SIZE_MAP$_getSize.sliderOffTextLeft;

      var inputProps = (0, _omitBy2.default)((0, _extends3.default)({
        type: 'checkbox',
        className: 'switcher__input'
      }, props), _isUndefined2.default);

      return _react2.default.createElement(
        'label',
        {
          className: _style2.default.dynamic([['2598185014', [width, height, slidingRange, sliderOnTextRight, sliderOffTextLeft, sliderWidth, sliderHeight, sliderBeforeMargin, sliderBeforeWidth, sliderBeforeHeight]]]) + ' ' + 'switcher'
        },
        _react2.default.createElement('input', (0, _extends3.default)({}, inputProps, {
          className: _style2.default.dynamic([['2598185014', [width, height, slidingRange, sliderOnTextRight, sliderOffTextLeft, sliderWidth, sliderHeight, sliderBeforeMargin, sliderBeforeWidth, sliderBeforeHeight]]]) + ' ' + (inputProps.className != null && inputProps.className || '')
        })),
        _react2.default.createElement('span', {
          'data-on': positiveLabel,
          'data-off': negativeLabel, className: _style2.default.dynamic([['2598185014', [width, height, slidingRange, sliderOnTextRight, sliderOffTextLeft, sliderWidth, sliderHeight, sliderBeforeMargin, sliderBeforeWidth, sliderBeforeHeight]]]) + ' ' + 'switcher__label'
        }),
        _react2.default.createElement('span', {
          className: _style2.default.dynamic([['2598185014', [width, height, slidingRange, sliderOnTextRight, sliderOffTextLeft, sliderWidth, sliderHeight, sliderBeforeMargin, sliderBeforeWidth, sliderBeforeHeight]]]) + ' ' + 'switcher__slider'
        }),
        _react2.default.createElement(_style2.default, {
          styleId: '2598185014',
          css: '.switcher.__jsx-style-dynamic-selector{position:relative;display:inline-block;vertical-align:top;width:' + width + ';height:' + height + ';background-color:#fff;border-radius:18px;box-shadow:inset 0 -1px #fff,inset 0 1px 1px rgba(0,0,0,0.05);cursor:pointer;background-image:linear-gradient(to top,#eee,#fff 25px);}.switcher.__jsx-style-dynamic-selector input.switcher__input.__jsx-style-dynamic-selector{position:absolute;top:0;left:0;opacity:0;}.switcher.__jsx-style-dynamic-selector input.switcher__input.__jsx-style-dynamic-selector:checked~.switcher__label.__jsx-style-dynamic-selector{background:#47a8d8;box-shadow:inset 0 1px 2px rgba(0,0,0,0.15),inset 0 0 3px rgba(0,0,0,0.2);}.switcher.__jsx-style-dynamic-selector input.switcher__input.__jsx-style-dynamic-selector:checked~.switcher__label.__jsx-style-dynamic-selector:before{opacity:0;}.switcher.__jsx-style-dynamic-selector input.switcher__input.__jsx-style-dynamic-selector:checked~.switcher__label.__jsx-style-dynamic-selector:after{opacity:1;}.switcher.__jsx-style-dynamic-selector input.switcher__input.__jsx-style-dynamic-selector:checked~.switcher__slider.__jsx-style-dynamic-selector{left:' + slidingRange + ';box-shadow:-1px 1px 5px rgba(0,0,0,0.2);}.switcher.__jsx-style-dynamic-selector .switcher__label.__jsx-style-dynamic-selector{position:relative;display:block;height:inherit;text-transform:uppercase;background:#eceeef;border-radius:inherit;box-shadow:inset 0 1px 2px rgba(0,0,0,0.12),inset 0 0 2px rgba(0,0,0,0.15);-webkit-transition:0.15s ease-out;transition:0.15s ease-out;}.switcher.__jsx-style-dynamic-selector .switcher__label.__jsx-style-dynamic-selector:before{content:attr(data-off);font-size:12px;right:' + sliderOnTextRight + ';color:#aaa;text-shadow:0 1px rgba(255,255,255,0.5);}.switcher.__jsx-style-dynamic-selector .switcher__label.__jsx-style-dynamic-selector:after{content:attr(data-on);font-size:12px;left:' + sliderOffTextLeft + ';color:#fff;text-shadow:0 1px rgba(0,0,0,0.2);opacity:0;}.switcher.__jsx-style-dynamic-selector .switcher__label.__jsx-style-dynamic-selector:before,.switcher.__jsx-style-dynamic-selector .switcher__label.__jsx-style-dynamic-selector:after{position:absolute;top:50%;margin-top:-0.5em;line-height:1;-webkit-transition:inherit;transition:inherit;}.switcher.__jsx-style-dynamic-selector .switcher__slider.__jsx-style-dynamic-selector{position:absolute;top:2px;left:2px;width:' + sliderWidth + ';height:' + sliderHeight + ';background:#fff;border-radius:10px;box-shadow:1px 1px 5px rgba(0,0,0,0.2);background-image:linear-gradient(to top,#fff 40%,#f0f0f0);-webkit-transition:left 0.15s ease-out;transition:left 0.15s ease-out;}.switcher.__jsx-style-dynamic-selector .switcher__slider.__jsx-style-dynamic-selector:before{content:\'\';position:absolute;top:50%;left:50%;margin:' + sliderBeforeMargin + ';width:' + sliderBeforeWidth + ';height:' + sliderBeforeHeight + ';background:#f9f9f9;border-radius:8px;box-shadow:inset 0 1px rgba(0,0,0,0.02);background-image:linear-gradient(to top,#eee,#fff);}',
          dynamic: [width, height, slidingRange, sliderOnTextRight, sliderOffTextLeft, sliderWidth, sliderHeight, sliderBeforeMargin, sliderBeforeWidth, sliderBeforeHeight]
        })
      );
    }
  }]);
  return ToggleSwitch;
}(_react.PureComponent);

ToggleSwitch.propTypes = {
  size: _propTypes2.default.oneOf(SUPPORTED_SIZES),
  positiveLabel: _propTypes2.default.string,
  negativeLabel: _propTypes2.default.string
};

ToggleSwitch.defaultProps = {
  size: SUPPORTED_SIZES[0],
  positiveLabel: '',
  negativeLabel: ''
};

exports.default = ToggleSwitch;