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

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

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

/**** Libraries ****/
import React, { PureComponent } from 'react';
import { compileClassNames } from '@zohodesk/utils';
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/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.handleChange = this.handleChange.bind(this);
    this.updateData = this.updateData.bind(this);
    this.handleFocus = this.handleFocus.bind(this);
    this.data = {
      radios: {},
      focus: this.handleFocus
    };
  }

  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,
      customClass,
      customProps
    } = this.props;
    const {
      LabelProps = {},
      RadioProps = {},
      InfoIconProps = {},
      ValidationMessageProps1 = {},
      ValidationMessageProps2 = {}
    } = customProps;
    const {
      customWrapperClass = '',
      customLabelClass = '',
      customRadioWrapperClass = '',
      customRadioClass = ''
    } = customClass;
    return /*#__PURE__*/React.createElement("div", {
      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''} ${customWrapperClass}`,
      "data-title": isDisabled ? title : null,
      "data-selector-id": dataSelectorId
    }, labelName && /*#__PURE__*/React.createElement(Label, _extends({
      text: labelName,
      size: "medium",
      isRequired: isMandatory,
      isDisabled: isDisabled,
      isReadOnly: isReadOnly,
      palette: labelPalette,
      customClass: {
        label: customLabelClass
      },
      customId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
      testId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
      tagAttributes: {
        label: {
          id
        }
      }
    }, LabelProps)), /*#__PURE__*/React.createElement("div", {
      className: `${style.fieldContainer} ${isBoxStyle ? style.radiosWrapper : ''} ${labelName ? isBoxStyle ? style.fieldMargin_large : style.fieldMargin_medium : ''} ${style.radioContainer}`
    }, options.map((option, index) => {
      let {
        text,
        value,
        disabled = false,
        tooltip,
        infoTooltip,
        secondaryText,
        renderRightPlaceholderNode,
        customProps
      } = option;
      let isDisabledState = disabled || isDisabled;
      let isChecked = selectedValue == value;
      const rightPlaceholderNode = !!infoTooltip ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Icon, _extends({
        name: "ZD-GN-info",
        size: "16",
        title: infoTooltip,
        iconClass: style.infoIcon
      }, InfoIconProps)), renderRightPlaceholderNode) : renderRightPlaceholderNode;
      const radioBoxClasses = isBoxStyle ? compileClassNames({
        [customRadioClass]: !!customRadioClass,
        [style.radioBox]: true,
        [style.withSecondaryText]: !!secondaryText,
        [style.primaryTextOnly]: !secondaryText,
        [style.hoverableRadioBox]: !isDisabledState,
        [style.radioBoxActive]: isChecked
      }) : '';
      return /*#__PURE__*/React.createElement("span", {
        key: text,
        className: `${!isBoxStyle ? style.radio : ''} ${style.radioWrap} ${customRadioWrapperClass}`
      }, /*#__PURE__*/React.createElement(Radio, _extends({}, customProps, {
        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,
        secondaryText: secondaryText
      }, RadioProps, {
        a11y: {
          tabIndex: !!selectedValue ? isChecked ? '0' : '-1' : index === 0 ? '0' : '-1',
          ...RadioProps.a11y
        },
        customClass: {
          customRadioWrap: radioBoxClasses,
          ...RadioProps.customClass
        },
        customProps: { ...RadioProps.customProps,
          LabelProps: { ...(RadioProps.customProps ? RadioProps.customProps.LabelProps : undefined),
            renderRightPlaceholderNode: rightPlaceholderNode
          }
        }
      })));
    })), validationMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
      text: validationMessage,
      palette: validationPalette,
      type: errorType,
      dataId: `${dataId}_ValidationMessage`
    }, ValidationMessageProps1)), validationRuleMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
      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'
//   };
// }