@zohodesk/components/lib/v1/Radio/Radio.js

In this Package, we Provide Some Basic Components to Build Web App

"use strict";

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

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

var _defaultProps = require("./props/defaultProps");

var _propTypes = require("./props/propTypes");

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

var _Layout = require("../Layout");

var _RadioModule = _interopRequireDefault(require("../../Radio/Radio.module.css"));

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

function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }

var Radio = function Radio(props) {
  var id = props.id,
      name = props.name,
      value = props.value,
      checked = props.checked,
      disabled = props.disabled,
      isReadOnly = props.isReadOnly,
      palette = props.palette,
      disabledTitle = props.disabledTitle,
      title = props.title,
      text = props.text,
      labelPalette = props.labelPalette,
      size = props.size,
      labelSize = props.labelSize,
      variant = props.variant,
      active = props.active,
      isFilled = props.isFilled,
      customClass = props.customClass,
      customProps = props.customProps,
      getRef = props.getRef,
      children = props.children,
      a11y = props.a11y;
  var _customClass$customRa = customClass.customRadioWrap,
      customRadioWrap = _customClass$customRa === void 0 ? '' : _customClass$customRa,
      _customClass$customRa2 = customClass.customRadio,
      customRadio = _customClass$customRa2 === void 0 ? '' : _customClass$customRa2,
      _customClass$customLa = customClass.customLabel,
      customLabel = _customClass$customLa === void 0 ? '' : _customClass$customLa;
  var accessMode = isReadOnly ? _RadioModule["default"].readonly : disabled ? _RadioModule["default"].disabled : _RadioModule["default"].pointer;
  var toolTip = disabled ? disabledTitle : title ? title : null;
  var ariaHidden = a11y.ariaHidden,
      _a11y$role = a11y.role,
      role = _a11y$role === void 0 ? 'radio' : _a11y$role,
      tabIndex = a11y.tabIndex,
      _a11y$ariaChecked = a11y.ariaChecked,
      ariaChecked = _a11y$ariaChecked === void 0 ? checked : _a11y$ariaChecked,
      ariaLabel = a11y.ariaLabel,
      ariaLabelledby = a11y.ariaLabelledby,
      _a11y$ariaReadonly = a11y.ariaReadonly,
      ariaReadonly = _a11y$ariaReadonly === void 0 ? isReadOnly || disabled ? true : false : _a11y$ariaReadonly;
  var _customProps$Containe = customProps.ContainerProps,
      ContainerProps = _customProps$Containe === void 0 ? {} : _customProps$Containe,
      _customProps$LabelPro = customProps.LabelProps,
      LabelProps = _customProps$LabelPro === void 0 ? {} : _customProps$LabelPro;

  function onChange(e) {
    var onChange = props.onChange;
    onChange && onChange(value, e);
  }

  function handleGetRef(ele) {
    getRef && getRef(ele, value);
  }

  return /*#__PURE__*/_react["default"].createElement(_Layout.Container, _extends({
    dataId: value ? value.toLowerCase() : 'RadioComp',
    isCover: false,
    isInline: text ? false : true,
    alignBox: "row",
    align: "both",
    className: "".concat(_RadioModule["default"].container, " ").concat(active && !disabled ? _RadioModule["default"].active : '', " ").concat(accessMode, " ").concat(isReadOnly || disabled ? '' : _RadioModule["default"].hoverEfffect, " ").concat(checked ? _RadioModule["default"].checked : '', " ").concat(customRadioWrap),
    "data-title": toolTip,
    onClick: !isReadOnly && !disabled ? onChange : '',
    "aria-checked": ariaChecked,
    tabindex: isReadOnly || disabled || ariaHidden ? '-1' : tabIndex || '0',
    eleRef: handleGetRef,
    role: role,
    "aria-Hidden": ariaHidden,
    "aria-label": ariaLabel,
    "aria-labelledby": ariaLabelledby,
    "aria-readonly": ariaReadonly
  }, ContainerProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
    className: "".concat(_RadioModule["default"].radio, " ").concat(checked ? "".concat(_RadioModule["default"]["rdBox".concat(palette)]) : '', "\n          ").concat(isReadOnly || disabled ? '' : "".concat(_RadioModule["default"]["hover".concat(palette)]), " ").concat(_RadioModule["default"][size], " ").concat(isFilled ? _RadioModule["default"].filled : '', " ").concat(_RadioModule["default"]["centerPath".concat(palette)], " ").concat(customRadio)
  }, /*#__PURE__*/_react["default"].createElement("input", {
    type: "hidden",
    id: id,
    name: name,
    value: value
  }), /*#__PURE__*/_react["default"].createElement("label", {
    className: "".concat(_RadioModule["default"].radioLabel, " ").concat(accessMode)
  }, /*#__PURE__*/_react["default"].createElement("svg", {
    xmlns: "http://www.w3.org/2000/svg",
    viewBox: "0 0 40 40"
  }, /*#__PURE__*/_react["default"].createElement("circle", {
    cx: "20",
    cy: "20",
    r: "19",
    className: "".concat(_RadioModule["default"].rdBox)
  }), checked ? /*#__PURE__*/_react["default"].createElement("circle", {
    cx: "20",
    cy: "20",
    r: "11.03",
    className: "".concat(_RadioModule["default"].centerPath)
  }) : null))), text && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
    flexible: true,
    className: _RadioModule["default"].text
  }, /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
    text: text,
    palette: labelPalette,
    size: labelSize,
    type: "title",
    clipped: true,
    dataId: "".concat(text, "_label"),
    variant: variant,
    title: toolTip ? toolTip : text,
    customClass: "".concat(checked && active ? "".concat(_RadioModule["default"]["".concat(palette, "checkedActive")]) : '', "\n            ").concat(_RadioModule["default"]["".concat(palette, "Label")], " ").concat(accessMode, " ").concat(customLabel)
  }, LabelProps))), children);
};

var _default = Radio;
exports["default"] = _default;
Radio.defaultProps = _defaultProps.defaultProps;
Radio.propTypes = _propTypes.propTypes; // if (__DOCS__) {
//   Radio.docs = {
//     componentGroup: 'Form Elements',
//     folderName: 'Style Guide'
//   };
// }