@vtex/styleguide/lib/Checkbox/index.js

> VTEX Styleguide React components ([Docs](https://vtex.github.io/styleguide))

"use strict";

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

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _classnames = require("classnames");

var _classnames2 = _interopRequireDefault(_classnames);

var _Check = require("../icon/Check");

var _Check2 = _interopRequireDefault(_Check);

var _CheckPartial = require("../icon/CheckPartial");

var _CheckPartial2 = _interopRequireDefault(_CheckPartial);

var _withForwardedRef = require("../../modules/withForwardedRef");

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

function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }

var Checkbox =
/*#__PURE__*/
function (_PureComponent) {
  _inheritsLoose(Checkbox, _PureComponent);

  function Checkbox(props) {
    var _this;

    _this = _PureComponent.call(this, props) || this;

    _this.handleChange = function (e) {
      return _this.props.onChange ? !_this.props.disabled && _this.props.onChange(e) : undefined;
    };

    _this.myCheckbox = _react2.default.createRef();
    return _this;
  }

  var _proto = Checkbox.prototype;

  _proto.componentDidMount = function componentDidMount() {
    this.myCheckbox.indeterminate = !this.props.checked && this.props.partial;
  };

  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
    if (prevProps.partial !== this.props.partial || prevProps.checked !== this.props.checked) {
      this.myCheckbox.indeterminate = !this.props.checked && this.props.partial;
    }
  };

  _proto.render = function render() {
    var _this2 = this;

    var _this$props = this.props,
        checked = _this$props.checked,
        disabled = _this$props.disabled,
        id = _this$props.id,
        label = _this$props.label,
        name = _this$props.name,
        required = _this$props.required,
        value = _this$props.value,
        partial = _this$props.partial,
        forwardedRef = _this$props.forwardedRef;
    return _react2.default.createElement("div", {
      className: (0, _classnames2.default)('vtex-checkbox__line-container flex items-start relative', {
        pointer: !disabled
      })
    }, _react2.default.createElement("div", {
      className: (0, _classnames2.default)('vtex-checkbox__container relative w1 h1', {
        mr3: label
      })
    }, _react2.default.createElement("div", {
      className: (0, _classnames2.default)('vtex-checkbox__inner-container h1 w1 absolute ba bw1 br1 ', {
        'b--muted-4 pointer': !checked && !disabled,
        'b--disabled bg-muted-5 c-disabled': !checked && disabled,
        'b--action-primary bg-action-primary': checked && !disabled,
        'b--muted-5 bg-muted-5': partial && !checked && disabled,
        'b--disabled bg-disabled': checked && disabled,
        mr3: label
      }),
      style: {
        transition: 'background 20ms, border 100ms',
        backgroundColor: partial && !checked && !disabled && '#dbe9fd',
        borderColor: partial && !checked && !disabled && '#dbe9fd'
      }
    }), _react2.default.createElement("div", {
      className: "vtex-checkbox__box-wrapper absolute w1 h1 flex o-100",
      style: {
        left: 0
      }
    }, _react2.default.createElement("div", {
      className: "vtex-checkbox__box absolute top-0 left-0 bottom-0 overflow-hidden w-100 flex items-center align-center justify-center " + (disabled ? 'c-on-disabled' : 'c-on-action-primary'),
      style: {
        transition: 'right 110ms ease-in-out 30ms'
      }
    }, checked ? _react2.default.createElement(_Check2.default, {
      size: 12,
      color: "currentColor"
    }) : partial && _react2.default.createElement(_CheckPartial2.default, {
      size: 12,
      color: disabled ? '#979899' : '#1346d8'
    }))), _react2.default.createElement("input", {
      checked: checked,
      ref: function ref(elem) {
        elem && (_this2.myCheckbox = elem);

        if (typeof forwardedRef === 'function') {
          forwardedRef(elem);
        } else if (forwardedRef && typeof forwardedRef === 'object') {
          forwardedRef.current = elem;
        }
      },
      className: (0, _classnames2.default)('vtex-checkbox__input h1 w1 absolute o-0', {
        pointer: !disabled
      }),
      disabled: disabled,
      required: required,
      id: id,
      name: name,
      onChange: this.handleChange,
      type: "checkbox",
      value: value,
      tabIndex: 0
    })), label && _react2.default.createElement("label", {
      className: (0, _classnames2.default)('vtex-checkbox__label w-100', {
        'c-disabled': disabled
      }, {
        'c-on-base pointer': !disabled
      }),
      htmlFor: id
    }, label));
  };

  return Checkbox;
}(_react.PureComponent);

Checkbox.defaultProps = {
  checked: false,
  disabled: false,
  required: false,
  partial: false
};
Checkbox.propTypes = {
  /** (Input spec attribute) */
  checked: _propTypes2.default.bool,

  /** @ignore Forwarded Ref */
  forwardedRef: _withForwardedRef.refShape,

  /** (Input spec attribute) */
  disabled: _propTypes2.default.bool,

  /** (Input spec attribute) */
  id: _propTypes2.default.string.isRequired,

  /** Checkbox label */
  label: _propTypes2.default.node,

  /** (Input spec attribute) */
  name: _propTypes2.default.string.isRequired,

  /** onChange event */
  onChange: _propTypes2.default.func.isRequired,

  /** (Input spec attribute) */
  required: _propTypes2.default.bool,

  /** (Input spec attribute) */
  value: _propTypes2.default.string,

  /** Partial state */
  partial: _propTypes2.default.bool
};
exports.default = (0, _withForwardedRef.withForwardedRef)(Checkbox);