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

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

/**** Libraries ****/
import React, { PureComponent } 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/lib/Label/Label';
import Radio from '@zohodesk/components/lib/Radio/Radio';
import ValidationMessage from "../ValidationMessage/ValidationMessage";
/** Css */

import style from "../Fields.module.css";
export default class RadioField extends PureComponent {
  constructor(props) {
    super(props);
    this.data = {
      radios: {},
      focus: this.handleFocus
    };
    this.handleChange = this.handleChange.bind(this);
    this.updateData = this.updateData.bind(this);
    this.handleFocus = this.handleFocus.bind(this);
  }

  componentDidMount() {
    const {
      getRef,
      id
    } = this.props;
    getRef && getRef(this.data, id);
  }

  componentDidUpdate(prevProps) {
    const {
      getRef,
      id
    } = this.props;

    if (getRef !== prevProps.getRef) {
      getRef && getRef(this.data, id);
    }
  }

  componentWillUnmount() {
    const {
      getRef,
      id
    } = this.props;
    getRef && getRef(null, id);
  }

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

  updateData(ele, val) {
    this.data.radios[val] = ele;
  }

  handleFocus() {
    const {
      selectedValue,
      options
    } = this.props;
    const firstRadioValue = options[0].value;

    if (selectedValue) {
      this.data.radios[selectedValue].focus();
    } else {
      this.data.radios[firstRadioValue].focus();
    }
  }

  render() {
    let {
      labelName,
      id,
      isMandatory,
      options,
      validationMessage,
      validationPalette,
      errorType,
      isDisabled,
      title,
      labelPalette,
      labelSize,
      size,
      selectedValue,
      isActive,
      dataId,
      dataSelectorId,
      validationRuleMessage,
      validationRulePalette,
      isReadOnly,
      isBoxStyle,
      variant,
      customProps
    } = this.props;
    const {
      LabelProps = {},
      RadioProps = {},
      InfoIconProps = {},
      ValidationMessageProps1 = {},
      ValidationMessageProps2 = {}
    } = customProps;
    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: this.handleChange,
        getRef: this.updateData,
        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; // if (__DOCS__) {
//   RadioField.docs = {
//     componentGroup: 'Form Fields',
//     folderName: 'General'
//   };
// }