backpack-ui/dist/components/checkbox/checkboxComponent.js

Lonely Planet's Components

"use strict";

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

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

var _extends3 = _interopRequireDefault(_extends2);

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 _react = require("react");

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _radium = require("radium");

var _radium2 = _interopRequireDefault(_radium);

var _kebabCase = require("lodash/kebabCase");

var _kebabCase2 = _interopRequireDefault(_kebabCase);

var _colors = require("../../styles/colors");

var _colors2 = _interopRequireDefault(_colors);

var _timing = require("../../styles/timing");

var _timing2 = _interopRequireDefault(_timing);

var _zIndex = require("../../styles/zIndex");

var _zIndex2 = _interopRequireDefault(_zIndex);

var _font = require("../../utils/font");

var _font2 = _interopRequireDefault(_font);

var _color = require("../../utils/color");

var _propTypes3 = require("../../utils/propTypes");

var _propTypes4 = _interopRequireDefault(_propTypes3);

var _icon = require("../icon");

var _icon2 = _interopRequireDefault(_icon);

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

var _ = { kebabCase: _kebabCase2.default };

var styles = {
  container: {
    display: "inline-block",
    fontFamily: (0, _font2.default)("benton"),
    verticalAlign: "top"
  },

  label: {
    color: _colors2.default.textPrimary,
    cursor: "pointer",
    display: "block",
    fontSize: "13px",
    lineHeight: 1,
    position: "relative"
  },

  text: {
    display: "block",
    lineHeight: 1
  },

  checkmark: {
    borderColor: (0, _color.rgba)(_colors2.default.textPrimary, 0.5),
    borderStyle: "solid",
    borderWidth: "1px",
    color: _colors2.default.bgPrimary,
    display: "block",
    left: 0,
    position: "absolute",
    textAlign: "center",
    top: 0,
    transition: "background-color " + _timing2.default.fast + ",\n      border-color " + _timing2.default.fast,
    userSelect: "none",
    zIndex: _zIndex2.default.default,

    ":focus": {
      borderColor: _colors2.default.textPrimary,
      outline: 0
    }
  },

  checkmarkNoBorder: {
    borderColor: "transparent"
  },

  checkmarkChecked: {
    backgroundColor: _colors2.default.linkPrimary,
    borderColor: _colors2.default.linkPrimary
  },

  input: {
    backgroundColor: _colors2.default.bgPrimary,
    border: 0,
    left: 0,
    margin: 0,
    opacity: 0,
    position: "absolute",
    top: 0,
    WebkitAppearance: "none"
  },

  icon: {
    color: _colors2.default.textOverlay,
    display: "block",
    filter: "drop-shadow(" + (0, _color.rgba)(_colors2.default.bgOverlay, 0.2) + " 0 1px 1px)",
    left: "-1px",
    position: "absolute",
    top: "-1px"
  }
};

var CheckboxComponent = function (_Component) {
  (0, _inherits3.default)(CheckboxComponent, _Component);

  function CheckboxComponent() {
    (0, _classCallCheck3.default)(this, CheckboxComponent);
    return (0, _possibleConstructorReturn3.default)(this, (CheckboxComponent.__proto__ || (0, _getPrototypeOf2.default)(CheckboxComponent)).apply(this, arguments));
  }

  (0, _createClass3.default)(CheckboxComponent, [{
    key: "render",
    value: function render() {
      var _props = this.props,
          checked = _props.checked,
          onClick = _props.onClick,
          id = _props.id,
          value = _props.value,
          size = _props.size,
          name = _props.name,
          label = _props.label,
          required = _props.required,
          rounded = _props.rounded,
          type = _props.type,
          removeBorder = _props.removeBorder,
          innerRef = _props.innerRef,
          style = _props.style,
          qaHook = _props.qaHook;


      var textPadding = {
        16: {
          paddingBottom: "1px",
          paddingLeft: "28px",
          paddingTop: "2px"
        },
        24: {
          paddingBottom: "5px",
          paddingLeft: "36px",
          paddingTop: "6px"
        },
        32: {
          paddingBottom: "9px",
          paddingLeft: "44px",
          paddingTop: "10px"
        }
      };

      return _react2.default.createElement(
        "span",
        {
          className: "Checkbox",
          id: _.kebabCase(id),
          ref: _.kebabCase(id),
          style: [styles.container, style]
        },
        _react2.default.createElement(
          "label",
          {
            htmlFor: _.kebabCase(id) + "-input",
            style: [styles.label, { height: size + "px" }, label ? { width: "auto" } : { width: size + "px" }]
          },
          _react2.default.createElement(
            "span",
            {
              ref: innerRef,
              tabIndex: "0",
              style: [styles.checkmark, {
                fontSize: size + "px",
                height: "1em",
                width: "1em"
              }, rounded && { borderRadius: "100%" }, removeBorder && styles.checkmarkNoBorder, checked && styles.checkmarkChecked]
            },
            _react2.default.createElement(_icon2.default.Checkbox, {
              style: (0, _extends3.default)({}, styles.icon, checked ? { opacity: 1 } : { opacity: 0 })
            })
          ),
          label && _react2.default.createElement(
            "span",
            { style: [styles.text, textPadding[size]] },
            label
          ),
          _react2.default.createElement("input", {
            id: _.kebabCase(id) + "-input",
            type: type,
            style: [styles.input, {
              height: size + "px",
              width: size + "px"
            }],
            value: value,
            name: _.kebabCase(name),
            "data-testid": qaHook ? _.kebabCase(id) + "-input" : null,
            onClick: onClick,
            required: required && !checked
          })
        )
      );
    }
  }]);
  return CheckboxComponent;
}(_react.Component);

CheckboxComponent.propTypes = {
  id: _propTypes2.default.string.isRequired,
  value: _propTypes2.default.string,
  name: _propTypes2.default.string,
  label: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.arrayOf(_propTypes2.default.oneOfType([_propTypes2.default.object, _propTypes2.default.string]))]),
  checked: _propTypes2.default.bool,
  onClick: _propTypes2.default.func,
  size: _propTypes2.default.oneOf([16, 24, 32]),
  required: _propTypes2.default.bool,
  rounded: _propTypes2.default.bool,
  type: _propTypes2.default.oneOf(["checkbox", "radio"]),
  removeBorder: _propTypes2.default.bool,
  innerRef: _propTypes2.default.func,
  style: _propTypes4.default.style,
  qaHook: _propTypes2.default.bool
};

CheckboxComponent.defaultProps = {
  checked: false,
  onClick: null,
  size: 16,
  required: false,
  type: "checkbox",
  rounded: false,
  removeBorder: false,
  innerRef: null,
  qaHook: false
};

exports.default = (0, _radium2.default)(CheckboxComponent);