cinnecta-ui/lib/components/Checkbox.js

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

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

var _Label = _interopRequireDefault(require("./Label"));

var _CheckboxOnly = _interopRequireDefault(require("./CheckboxOnly"));

var _Text = _interopRequireDefault(require("./Text"));

var _withStyles = require("../helpers/withStyles");

var _reactWithStyles = require("react-with-styles");

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

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }

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

var propTypes = _objectSpread({}, _reactWithStyles.withStylesPropTypes, {
  checked: _propTypes.default.bool,
  disabled: _propTypes.default.bool,
  id: _propTypes.default.string,
  invalid: _propTypes.default.bool,
  label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
  name: _propTypes.default.string,
  onBlur: _propTypes.default.func,
  onChange: _propTypes.default.func,
  onFocus: _propTypes.default.func,
  pullRight: _propTypes.default.bool,
  refForFocus: _propTypes.default.func,
  subtitle: _propTypes.default.string
});

var defaultProps = {
  label: '',
  radioButton: false
};

var Checkbox = function Checkbox(_ref) {
  var checked = _ref.checked,
      css = _ref.css,
      disabled = _ref.disabled,
      id = _ref.id,
      invalid = _ref.invalid,
      label = _ref.label,
      name = _ref.name,
      onBlur = _ref.onBlur,
      onChange = _ref.onChange,
      onFocus = _ref.onFocus,
      pullRight = _ref.pullRight,
      refForFocus = _ref.refForFocus,
      styles = _ref.styles,
      subtitle = _ref.subtitle;
  return _react.default.createElement(_Label.default, {
    htmlFor: id
  }, _react.default.createElement("div", css(styles.column, pullRight && styles.pullRight), _react.default.createElement(_CheckboxOnly.default, {
    id: id,
    checked: checked,
    disabled: disabled,
    invalid: invalid,
    name: name,
    onBlur: onBlur,
    onChange: onChange,
    onFocus: onFocus
  })), _react.default.createElement("div", css(styles.column, pullRight ? styles.marginRight : styles.spacing), _react.default.createElement("div", css(styles.checkbox__label), typeof label === 'string' ? _react.default.createElement(_Text.default, {
    disabled: disabled
  }, label) : label), subtitle && checked && _react.default.createElement("div", css(styles.subtitle), _react.default.createElement(_Text.default, {
    small: true
  }, subtitle))));
};

Checkbox.propTypes = propTypes;
Checkbox.defaultProps = defaultProps;
var CheckboxWithStyles = (0, _withStyles.withStyles)(function (_ref2) {
  var units = _ref2.units,
      color = _ref2.color,
      font = _ref2.font,
      fontSize = _ref2.fontSize,
      weight = _ref2.weight,
      lineHeight = _ref2.lineHeight,
      breakpoint = _ref2.breakpoint;
  return {
    checkbox: {},
    column: {
      display: 'table-cell',
      verticalAlign: 'top',
      whiteSpace: 'normal'
    },
    checkbox__label: _defineProperty({
      color: color.grayDarker,
      cursor: 'pointer',
      display: 'inline-block',
      wordWrap: 'break-word',
      letterSpacing: 'normal',
      fontFamily: font.default,
      fontWeight: weight.normal,
      fontSize: fontSize.small.regular,
      lineHeight: lineHeight.regular
    }, breakpoint.large, {
      fontSize: fontSize.large.regular
    }),
    spacing: {
      paddingLeft: 12
    },
    marginRight: {
      marginRight: 32
    },
    pullRight: {
      float: 'right'
    },
    subtitle: {
      paddingTop: 2
    }
  };
})(Checkbox);
var _default = CheckboxWithStyles;
exports.default = _default;