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

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

/* 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 { 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,
      renderRightPlaceholderNode
    } = this.props;
    let {
      customRadioWrap = '',
      customRadio = '',
      customLabel = ''
    } = 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 = {}
    } = customProps;
    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} ${!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}`]} ${customRadio} ${!isEditable ? `${style.disabled}` : ''}`
    }, /*#__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} ${disabled ? `${style.disabled}` : ''}`
    }, /*#__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`]} ${isEditable ? style.pointer : ''} ${isReadOnly ? style.readonly : ''}  ${customLabel}`,
      ...LabelProps
    })), children, renderRightPlaceholderNode ? renderRightPlaceholderNode : null);
  }

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