cinnecta-ui/lib/components/CheckboxOnly.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 _withStyles = require("../helpers/withStyles");

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

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

function _extends() { _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; }; return _extends.apply(this, arguments); }

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,
  name: _propTypes.default.string,
  onBlur: _propTypes.default.func,
  onChange: _propTypes.default.func,
  onFocus: _propTypes.default.func,
  refForFocus: _propTypes.default.func
});

var CheckboxOnly = function CheckboxOnly(_ref) {
  var checked = _ref.checked,
      css = _ref.css,
      disabled = _ref.disabled,
      id = _ref.id,
      invalid = _ref.invalid,
      name = _ref.name,
      onBlur = _ref.onBlur,
      onChange = _ref.onChange,
      onFocus = _ref.onFocus,
      refForFocus = _ref.refForFocus,
      styles = _ref.styles;
  return _react.default.createElement("div", css(styles.container), _react.default.createElement("div", css(styles.checkbox, disabled && styles.checkbox_disabled, invalid && styles.checkbox_invalid), _react.default.createElement("input", _extends({}, css(styles.checkbox__input), {
    type: "checkbox",
    id: id,
    name: name,
    checked: checked,
    disabled: disabled,
    "aria-invalid": invalid,
    onBlur: onBlur,
    onChange: onChange,
    onFocus: onFocus
  })), _react.default.createElement("div", _extends({}, css(styles.checkbox__markContainer), {
    "data-fake-checkbox": !invalid && !disabled
  }), checked && _react.default.createElement("div", css(styles.checkbox__checkMark), _react.default.createElement("svg", _extends({}, css(styles.checkbox__checkMark__icon), {
    xmlns: "http://www.w3.org/2000/svg",
    viewBox: "0 0 54.19 42.05"
  }), _react.default.createElement("path", {
    d: "M48,0a6,6,0,0,0-4.12,1.81c-9.36,9.38-16.58,17.25-25.16,26L10,20.47a6,6,0,0,0-8,8.92l.28.23,13,11a6,6,0,0,0,8.13-.34c10.79-10.81,18.46-19.43,29-30A6,6,0,0,0,48,0Z"
  }))))));
};

CheckboxOnly.propTypes = propTypes;
var CheckboxOnlyWithStyles = (0, _withStyles.withStyles)(function (_ref2) {
  var units = _ref2.units,
      color = _ref2.color,
      input = _ref2.input;
  return {
    container: {
      display: 'inline-block',
      position: 'relative',
      cursor: 'pointer',
      overflow: 'hidden',
      borderRadius: input.checkbox.borderRadius,
      marginTop: 2,
      ':focus-within': {
        boxShadow: "0 0 2px ".concat(color.secondary)
      }
    },
    checkbox: _objectSpread({
      width: input.checkbox.size,
      height: input.checkbox.size,
      background: input.checkbox.background,
      textAlign: 'center'
    }, input.checkbox.border, {
      boxSizing: 'border-box'
    }),
    checkbox_disabled: _objectSpread({
      background: input.checkbox.disabled.background
    }, input.checkbox.disabled.border),
    checkbox_invalid: _objectSpread({
      background: input.checkbox.invalid.background
    }, input.checkbox.invalid.border),
    checkbox__input: {
      width: '100%',
      height: '100%',
      margin: 0,
      padding: 0,
      opacity: 0,
      position: 'absolute',
      top: 0,
      right: 0,
      bottom: 0,
      left: 0,
      ':focus + [data-fake-checkbox]': {
        zIndex: 1,
        borderWidth: 1,
        borderStyle: 'solid',
        borderColor: color.secondary,
        boxSizing: 'border-box'
      }
    },
    checkbox__markContainer: {
      display: 'flex',
      position: 'absolute',
      width: '100%',
      height: '100%',
      top: 0,
      right: 0,
      bottom: 0,
      left: 0,
      alignItems: 'center',
      justifyContent: 'center',
      borderRadius: input.checkbox.borderRadius
    },
    checkbox__checkMark: {
      background: color.secondary,
      width: '100%',
      height: '100%',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center'
    },
    checkbox__checkMark__icon: {
      fill: color.white,
      width: '60%'
    }
  };
})(CheckboxOnly);
var _default = CheckboxOnlyWithStyles;
exports.default = _default;