@cbinsights/fds/lib/components/Radio/index.js

Form: A design system by CB Insights

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

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

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

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

var _uuid = require("uuid");

var _classcat = _interopRequireDefault(require("classcat"));

var _RadioEmptyIcon = _interopRequireDefault(require("../../icons/react/RadioEmptyIcon"));

var _RadioFilledIcon = _interopRequireDefault(require("../../icons/react/RadioFilledIcon"));

var _excluded = ["showLabel", "disabled", "name", "label", "checked", "defaultChecked", "value", "onChange"];

var Radio = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
  var _ref$showLabel = _ref.showLabel,
      showLabel = _ref$showLabel === void 0 ? true : _ref$showLabel,
      _ref$disabled = _ref.disabled,
      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
      name = _ref.name,
      label = _ref.label,
      checked = _ref.checked,
      defaultChecked = _ref.defaultChecked,
      value = _ref.value,
      onChange = _ref.onChange,
      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
  var id = (0, _uuid.v4)();
  return /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _classcat.default)([{
      'fdsCheckable--disabled': disabled
    }, 'fdsCheckable fdsRadio'])
  }, /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({}, rest, {
    ref: ref,
    type: "radio",
    name: name,
    id: id,
    checked: checked,
    defaultChecked: defaultChecked,
    value: value,
    onChange: onChange,
    className: "media--xs" // prevent className being passed down via rest

  })), /*#__PURE__*/_react.default.createElement("label", {
    className: "flush--bottom",
    htmlFor: id
  }, /*#__PURE__*/_react.default.createElement("span", {
    className: "fdsCheckable-icon--checked"
  }, /*#__PURE__*/_react.default.createElement(_RadioFilledIcon.default, {
    size: "xs"
  })), /*#__PURE__*/_react.default.createElement("span", {
    className: "fdsCheckable-icon--unchecked"
  }, /*#__PURE__*/_react.default.createElement(_RadioEmptyIcon.default, {
    size: "xs"
  })), showLabel && /*#__PURE__*/_react.default.createElement("span", {
    className: "padding--left--s"
  }, label)));
});

Radio.displayName = 'Radio';
var _default = Radio;
exports.default = _default;