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

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

import React from 'react';
import { defaultProps } from "./props/defaultProps";
import { propTypes } from "./props/propTypes";
import Label from "../Label/Label";
import { Container, Box } from "../Layout";
import style from "../../Radio/Radio.module.css";

const Radio = props => {
  let {
    id,
    name,
    value,
    checked,
    disabled,
    isReadOnly,
    palette,
    disabledTitle,
    title,
    text,
    labelPalette,
    size,
    labelSize,
    variant,
    active,
    isFilled,
    customClass,
    customProps,
    getRef,
    children,
    a11y
  } = props;
  let {
    customRadioWrap = '',
    customRadio = '',
    customLabel = ''
  } = customClass;
  let accessMode = isReadOnly ? style.readonly : disabled ? style.disabled : style.pointer;
  let toolTip = disabled ? disabledTitle : title ? title : null;
  let {
    ariaHidden,
    role = 'radio',
    tabIndex,
    ariaChecked = checked,
    ariaLabel,
    ariaLabelledby,
    ariaReadonly = isReadOnly || disabled ? true : false
  } = a11y;
  let {
    ContainerProps = {},
    LabelProps = {}
  } = customProps;

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

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

  return /*#__PURE__*/React.createElement(Container, {
    dataId: value ? value.toLowerCase() : 'RadioComp',
    isCover: false,
    isInline: text ? false : true,
    alignBox: "row",
    align: "both",
    className: `${style.container} ${active && !disabled ? style.active : ''} ${accessMode} ${isReadOnly || disabled ? '' : style.hoverEfffect} ${checked ? style.checked : ''} ${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.createElement(Box, {
    className: `${style.radio} ${checked ? `${style[`rdBox${palette}`]}` : ''}
          ${isReadOnly || disabled ? '' : `${style[`hover${palette}`]}`} ${style[size]} ${isFilled ? style.filled : ''} ${style[`centerPath${palette}`]} ${customRadio}`
  }, /*#__PURE__*/React.createElement("input", {
    type: "hidden",
    id: id,
    name: name,
    value: value
  }), /*#__PURE__*/React.createElement("label", {
    className: `${style.radioLabel} ${accessMode}`
  }, /*#__PURE__*/React.createElement("svg", {
    xmlns: "http://www.w3.org/2000/svg",
    viewBox: "0 0 40 40"
  }, /*#__PURE__*/React.createElement("circle", {
    cx: "20",
    cy: "20",
    r: "19",
    className: `${style.rdBox}`
  }), checked ? /*#__PURE__*/React.createElement("circle", {
    cx: "20",
    cy: "20",
    r: "11.03",
    className: `${style.centerPath}`
  }) : null))), text && /*#__PURE__*/React.createElement(Box, {
    flexible: true,
    className: style.text
  }, /*#__PURE__*/React.createElement(Label, {
    text: text,
    palette: labelPalette,
    size: labelSize,
    type: "title",
    clipped: true,
    dataId: `${text}_label`,
    variant: variant,
    title: toolTip ? toolTip : text,
    customClass: `${checked && active ? `${style[`${palette}checkedActive`]}` : ''}
            ${style[`${palette}Label`]} ${accessMode} ${customLabel}`,
    ...LabelProps
  })), children);
};

export default Radio;
Radio.defaultProps = defaultProps;
Radio.propTypes = propTypes; // if (__DOCS__) {
//   Radio.docs = {
//     componentGroup: 'Form Elements',
//     folderName: 'Style Guide'
//   };
// }