wix-style-react/dist/src/Checkbox/Checkbox.js

wix-style-react

'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 _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _class, _temp;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _CheckboxChecked = require('wix-ui-icons-common/system/CheckboxChecked');

var _CheckboxChecked2 = _interopRequireDefault(_CheckboxChecked);

var _CheckboxIndeterminate = require('wix-ui-icons-common/system/CheckboxIndeterminate');

var _CheckboxIndeterminate2 = _interopRequireDefault(_CheckboxIndeterminate);

var _Label = require('../Label');

var _Label2 = _interopRequireDefault(_Label);

var _Checkbox = require('./Checkbox.scss');

var _Checkbox2 = _interopRequireDefault(_Checkbox);

var _WixComponent2 = require('../BaseComponents/WixComponent');

var _WixComponent3 = _interopRequireDefault(_WixComponent2);

var _Focusable = require('../common/Focusable');

var _generateId = require('../utils/generateId');

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

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

/** a simple WixStyle checkbox */
var Checkbox = (_temp = _class = function (_WixComponent) {
  _inherits(Checkbox, _WixComponent);

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

    var _this = _possibleConstructorReturn(this, (Checkbox.__proto__ || Object.getPrototypeOf(Checkbox)).call(this, props));

    _this._id = Checkbox.displayName + '-' + (0, _generateId.generateID)();


    _this.state = { isFocused: false };
    return _this;
  }

  //TODO fix me please. We need to get away from ids.


  _createClass(Checkbox, [{
    key: 'render',
    value: function render() {
      var _classNames;

      var _props = this.props,
          _props$id = _props.id,
          id = _props$id === undefined ? this._id : _props$id,
          checked = _props.checked,
          indeterminate = _props.indeterminate,
          disabled = _props.disabled,
          hasError = _props.hasError,
          hover = _props.hover,
          size = _props.size,
          onChange = _props.onChange,
          children = _props.children;


      var classname = (0, _classnames2.default)(_Checkbox2.default.root, indeterminate ? _Checkbox2.default.indeterminate : checked ? _Checkbox2.default.checked : _Checkbox2.default.unchecked, (_classNames = {}, _defineProperty(_classNames, _Checkbox2.default.hover, hover), _defineProperty(_classNames, _Checkbox2.default.disabled, disabled), _defineProperty(_classNames, _Checkbox2.default.hasError, hasError), _classNames));

      /*
      NOTE: attaching Focusable handlers to root div (when the tabindex was on the main div under the label) is not working. The onFocus does not get
      called when clicking on the text (the children). So I moved the tabindex to the root.
      */
      return _react2.default.createElement(
        'div',
        _extends({
          className: classname,
          onFocus: this.props.focusableOnFocus,
          onBlur: this.props.focusableOnBlur
        }, (0, _Focusable.focusableStates)(this.props), {
          tabIndex: disabled ? null : 0
        }),
        _react2.default.createElement('input', {
          type: 'checkbox',
          id: id,
          checked: checked,
          disabled: disabled,
          onChange: disabled ? null : onChange,
          style: { display: 'none' }
        }),
        _react2.default.createElement(
          _Label2.default,
          { 'for': id, dataHook: 'checkbox-label' },
          _react2.default.createElement(
            'div',
            {
              'data-hook': 'checkbox-box',
              className: (0, _classnames2.default)(_Checkbox2.default.checkbox, _Checkbox2.default[size])
            },
            _react2.default.createElement(
              'div',
              { className: _Checkbox2.default.inner, onClick: function onClick(e) {
                  return e.stopPropagation();
                } },
              indeterminate ? _react2.default.createElement(_CheckboxIndeterminate2.default, null) : _react2.default.createElement(_CheckboxChecked2.default, null)
            )
          ),
          children && _react2.default.createElement(
            'div',
            { className: _Checkbox2.default.children, 'data-hook': 'checkbox-children' },
            children
          )
        )
      );
    }
  }]);

  return Checkbox;
}(_WixComponent3.default), _class.displayName = 'Checkbox', _class.propTypes = {
  /** used for automatic testing */
  checked: _propTypes.bool,
  children: _propTypes.node,
  disabled: _propTypes.bool,
  hasError: _propTypes.bool,
  id: _propTypes.string,
  indeterminate: _propTypes.bool,

  /** used for automatic testing */
  hover: _propTypes.bool,
  size: (0, _propTypes.oneOf)(['medium']),
  onChange: _propTypes.func
}, _class.defaultProps = {
  checked: false,
  size: 'medium',
  onChange: function onChange(e) {
    e.stopPropagation();
  }
}, _temp);
exports.default = (0, _Focusable.withFocusable)(Checkbox);