cinnecta-ui/lib/components/RadioButtonOnly.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,
  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.number])
});

var RadioButtonOnly = function RadioButtonOnly(_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,
      value = _ref.value;
  return _react.default.createElement("div", css(styles.container), _react.default.createElement("div", css(styles.radio, disabled && styles.radio_disabled, invalid && styles.radio_invalid), _react.default.createElement("input", _extends({}, css(styles.radio__input), {
    type: "radio",
    id: id,
    name: name,
    checked: checked,
    disabled: disabled,
    value: value,
    "aria-invalid": invalid,
    onBlur: onBlur,
    onChange: onChange,
    onFocus: onFocus
  })), _react.default.createElement("div", _extends({}, css(styles.radio__markContainer), {
    "data-fake-radio": !invalid && !disabled
  }), checked && _react.default.createElement("div", css(styles.radio__checkMark)))));
};

RadioButtonOnly.propTypes = propTypes;
var RadioButtonOnlyWithStyles = (0, _withStyles.withStyles)(function (_ref2) {
  var units = _ref2.units,
      color = _ref2.color,
      input = _ref2.input;
  return {
    container: {
      display: 'inline-block',
      position: 'relative',
      marginTop: 2,
      verticalAlign: 'top'
    },
    radio: _objectSpread({
      width: input.radio.size,
      height: input.radio.size,
      borderRadius: input.radio.borderRadius,
      background: input.radio.background
    }, input.radio.border, {
      boxSizing: 'border-box'
    }),
    radio_disabled: _objectSpread({
      background: input.radio.disabled.background
    }, input.radio.disabled.border),
    radio_invalid: _objectSpread({
      background: input.radio.invalid.background
    }, input.radio.invalid.border),
    radio__input: {
      width: '100%',
      height: '100%',
      margin: 0,
      padding: 0,
      opacity: 0,
      position: 'absolute',
      ':focus + [data-fake-radio]': {
        zIndex: 1,
        borderWidth: 1,
        borderStyle: 'solid',
        borderColor: color.secondary,
        boxSizing: 'border-box'
      }
    },
    radio__markContainer: {
      display: 'flex',
      position: 'absolute',
      width: '100%',
      height: '100%',
      left: 0,
      top: 0,
      alignItems: 'center',
      justifyContent: 'center',
      borderRadius: input.radio.border.borderRadius
    },
    radio__checkMark: _objectSpread({}, input.radio.checkMark)
  };
})(RadioButtonOnly);
var _default = RadioButtonOnlyWithStyles;
exports.default = _default;