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

Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development

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); }

/* eslint css-modules/no-unused-class: [2, { markAsUsed: ['small', 'medium'] }] */
import React from 'react';
import { defaultProps } from "./props/defaultProps";
import { propTypes } from "./props/propTypes";
import Label from "../Label/Label";
import Typography from "../Typography/Typography";
import { Container, Box } from "../Layout";
import CssProvider from "../Provider/CssProvider";
import style from "./Radio.module.css";
export default class Radio extends React.Component {
  constructor(props) {
    super(props);
    this.onChange = this.onChange.bind(this);
    this.handleGetRef = this.handleGetRef.bind(this);
  }

  onChange(e) {
    let {
      onChange,
      value
    } = this.props;
    onChange && onChange(value, e);
  }

  handleGetRef(ele) {
    let {
      getRef,
      value
    } = this.props;
    getRef && getRef(ele, value);
  }

  render() {
    let {
      id,
      name,
      value,
      checked,
      disabled,
      isReadOnly,
      palette,
      disabledTitle,
      title,
      text,
      labelPalette,
      size,
      labelSize,
      variant,
      active,
      isFilled,
      customClass,
      customProps,
      children,
      a11y,
      secondaryText,
      renderRightPlaceholderNode
    } = this.props;
    let {
      customRadioWrap = '',
      customRadio = '',
      customLabel = '',
      customSecondaryText = ''
    } = customClass;
    let accessMode = isReadOnly ? style.readonly : disabled ? CssProvider('isDisabled') : style.pointer;
    let toolTip = disabled ? disabledTitle : title ? title : null;
    const isEditable = !(isReadOnly || disabled);
    let {
      ariaHidden,
      role = 'radio',
      tabIndex,
      ariaChecked = checked,
      ariaLabel,
      ariaLabelledby,
      ariaReadonly = !isEditable ? true : false
    } = a11y;
    let {
      ContainerProps = {},
      LabelProps = {},
      secondaryTextProps = {}
    } = customProps;
    return /*#__PURE__*/React.createElement(Container, _extends({
      dataId: value ? value.toLowerCase() : 'RadioComp',
      isCover: false,
      isInline: text ? false : true,
      alignBox: "row",
      align: "both",
      className: `${style.container} ${active && !disabled ? style.active : ''} ${accessMode} ${!isEditable ? '' : style.hoverEfffect} ${checked ? style.checked : ''} ${customRadioWrap}`,
      "data-title": toolTip,
      onClick: !isReadOnly && !disabled ? this.onChange : '',
      "aria-checked": ariaChecked,
      tabindex: !isEditable || ariaHidden ? '-1' : tabIndex || '0',
      eleRef: this.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}`]}` : ''} 
            ${!isEditable ? '' : `${style[`hover${palette}`]}`} ${style[size]} ${isFilled ? style.filled : ''} ${style[`centerPath${palette}`]} ${!isEditable ? `${style.disabled}` : ''} ${secondaryText ? style.withSecondaryText : ''} ${customRadio} `,
      align: secondaryText ? "start" : undefined
    }, /*#__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 || secondaryText) && /*#__PURE__*/React.createElement(Box, {
      flexible: true,
      className: style.labelContainer
    }, text && /*#__PURE__*/React.createElement(Label, _extends({
      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`]}` : ''} ${disabled ? `${style.disabled}` : ''}
                  ${style[`${palette}Label`]} ${isEditable ? style.pointer : ''} ${isReadOnly ? style.readonly : ''}  ${customLabel}`
    }, LabelProps)), secondaryText ? /*#__PURE__*/React.createElement(Typography, _extends({
      $ui_size: "12",
      $ui_lineHeight: "1.2"
    }, secondaryTextProps, {
      $i18n_dataTitle: toolTip ? null : secondaryText,
      $ui_className: `${style.secondaryText} ${customSecondaryText}`
    }), secondaryText) : null), children, renderRightPlaceholderNode ? renderRightPlaceholderNode : null);
  }

}
Radio.defaultProps = defaultProps;
Radio.propTypes = propTypes;