@zohodesk/dot/es/v1/form/fields/RadioField/RadioField.js

In this Library, we Provide Some Basic Components to Build Your Application

/**** Libraries ****/
import React, { memo } from 'react';
import { defaultProps } from "./props/defaultProps";
import { propTypes } from "./props/propTypes";
/**** Components ****/

import Icon from '@zohodesk/icons/es/Icon';
import Label from '@zohodesk/components/es/v1/Label/Label';
import Radio from '@zohodesk/components/es/v1/Radio/Radio';
import ValidationMessage from "../ValidationMessage/ValidationMessage";
/** Hook */

import useRadio from "./useRadio";
/** Css */

import style from "../../../../form/fields/Fields.module.css";

const RadioField = props => {
  const {
    labelName,
    id,
    isMandatory,
    options,
    validationMessage,
    validationPalette,
    errorType,
    isDisabled,
    title,
    labelPalette,
    labelSize,
    size,
    selectedValue,
    isActive,
    getRef,
    dataId,
    dataSelectorId,
    validationRuleMessage,
    validationRulePalette,
    isReadOnly,
    isBoxStyle,
    variant,
    customProps,
    onChange
  } = props;
  const {
    LabelProps = {},
    RadioProps = {},
    InfoIconProps = {},
    ValidationMessageProps1 = {},
    ValidationMessageProps2 = {}
  } = customProps;
  const {
    handleGetRef,
    handleChange
  } = useRadio({
    id,
    onChange,
    getRef,
    options,
    selectedValue
  });
  return /*#__PURE__*/React.createElement("div", {
    className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
    "data-title": isDisabled ? title : null,
    "data-selector-id": dataSelectorId
  }, labelName && /*#__PURE__*/React.createElement(Label, {
    text: labelName,
    size: "medium",
    id: id,
    palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : 'default',
    customClass: `${style.fieldLabel} ${isMandatory ? style.labelMandatory : ''}`,
    dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
    ...LabelProps
  }), /*#__PURE__*/React.createElement("div", {
    className: `${style.fieldContainer} ${isBoxStyle ? style.radiosWrapper : ''} ${labelName ? style.fieldMargin_medium : ''} ${style.radioContainer}`
  }, options.map((option, index) => {
    let {
      text,
      value,
      disabled = false,
      tooltip,
      infoTooltip
    } = option;
    let isDisabledState = disabled || isDisabled;
    let isChecked = selectedValue == value;
    return /*#__PURE__*/React.createElement("span", {
      key: index,
      className: `${!isBoxStyle ? style.radio : ''} ${style.radioWrap}`
    }, /*#__PURE__*/React.createElement(Radio, {
      id: index,
      value: value,
      name: id,
      text: text,
      labelPalette: labelPalette,
      labelSize: labelSize,
      active: isActive || isBoxStyle && isChecked,
      disabled: isDisabledState,
      disabledTitle: tooltip,
      title: tooltip,
      onChange: handleChange,
      getRef: handleGetRef,
      size: size,
      checked: isChecked,
      dataId: dataId,
      isReadOnly: isReadOnly,
      variant: variant,
      ...RadioProps,
      a11y: {
        tabIndex: !!selectedValue ? isChecked ? '0' : '-1' : index === 0 ? '0' : '-1',
        ...RadioProps.a11y
      },
      customClass: {
        customRadioWrap: isBoxStyle ? `${style.radioBox} ${!isDisabledState ? style.hoverableRadioBox : ''} ${isChecked ? style.radioBoxActive : ''}` : '',
        ...RadioProps.customClass
      }
    }, !!infoTooltip ? /*#__PURE__*/React.createElement(Icon, {
      name: "ZD-GN-info",
      size: "16",
      title: infoTooltip,
      iconClass: style.infoIcon,
      ...InfoIconProps
    }) : null));
  })), validationMessage && /*#__PURE__*/React.createElement(ValidationMessage, {
    text: validationMessage,
    palette: validationPalette,
    type: errorType,
    dataId: `${dataId}_ValidationMessage`,
    ...ValidationMessageProps1
  }), validationRuleMessage && /*#__PURE__*/React.createElement(ValidationMessage, {
    text: validationRuleMessage,
    palette: validationRulePalette,
    type: errorType,
    dataId: `${dataId}_ValidationRuleMessage`,
    ...ValidationMessageProps2
  }));
};

RadioField.propTypes = propTypes;
RadioField.defaultProps = defaultProps;
const MemoizedRadioField = /*#__PURE__*/memo(RadioField);
MemoizedRadioField.propTypes = propTypes;
MemoizedRadioField.defaultProps = defaultProps;
MemoizedRadioField.displayName = 'RadioField';
export default MemoizedRadioField;