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

wix-style-react

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;

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; }

import React from 'react';
import { node, bool, func, oneOf, string } from 'prop-types';
import classNames from 'classnames';
import CheckboxChecked from 'wix-ui-icons-common/system/CheckboxChecked';
import CheckboxIndeterminate from 'wix-ui-icons-common/system/CheckboxIndeterminate';
import Label from '../Label';
import styles from './Checkbox.scss';
import WixComponent from '../BaseComponents/WixComponent';
import { withFocusable, focusableStates } from '../common/Focusable';

import { generateID } from '../utils/generateId';

/** 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 + '-' + 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 = classNames(styles.root, indeterminate ? styles.indeterminate : checked ? styles.checked : styles.unchecked, (_classNames = {}, _defineProperty(_classNames, styles.hover, hover), _defineProperty(_classNames, styles.disabled, disabled), _defineProperty(_classNames, styles.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 React.createElement(
        'div',
        _extends({
          className: classname,
          onFocus: this.props.focusableOnFocus,
          onBlur: this.props.focusableOnBlur
        }, focusableStates(this.props), {
          tabIndex: disabled ? null : 0
        }),
        React.createElement('input', {
          type: 'checkbox',
          id: id,
          checked: checked,
          disabled: disabled,
          onChange: disabled ? null : onChange,
          style: { display: 'none' }
        }),
        React.createElement(
          Label,
          { 'for': id, dataHook: 'checkbox-label' },
          React.createElement(
            'div',
            {
              'data-hook': 'checkbox-box',
              className: classNames(styles.checkbox, styles[size])
            },
            React.createElement(
              'div',
              { className: styles.inner, onClick: function onClick(e) {
                  return e.stopPropagation();
                } },
              indeterminate ? React.createElement(CheckboxIndeterminate, null) : React.createElement(CheckboxChecked, null)
            )
          ),
          children && React.createElement(
            'div',
            { className: styles.children, 'data-hook': 'checkbox-children' },
            children
          )
        )
      );
    }
  }]);

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

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


export default withFocusable(Checkbox);