@geneui/components/Radio/index.js

The Gene UI components library designed for BI tools

import { _ as _extends } from '../_rollupPluginBabelHelpers-e8fb2e5c.js';
import React__default, { forwardRef, useMemo } from 'react';
import PropTypes from 'prop-types';
import { c as classnames } from '../index-031ff73c.js';
import { c as checkboxRadioSwitcherConfig } from '../configs-00612ce0.js';
import { i as interceptValue } from '../index-a0e4e333.js';
import '../checkboxRadioSwitcher-5b69d7bd.js';
import { g as guid } from '../guid-8ddf77b3.js';
import '../dateValidation-67caec66.js';
import '../_commonjsHelpers-24198af3.js';
import 'react-dom';
import '../style-inject.es-746bb8ed.js';

const Radio = /*#__PURE__*/forwardRef((_ref, ref) => {
  let {
    size,
    label,
    labelPosition,
    labelAlignment,
    description,
    readOnly,
    disabled,
    required,
    isValid,
    errorText,
    value,
    onChange,
    checked,
    className,
    type,
    ...restProps
  } = _ref;
  const randomId = useMemo(guid, []);
  const handleChange = e => {
    onChange && onChange(interceptValue(e, value));
  };
  const hasError = !isValid;
  return /*#__PURE__*/React__default.createElement("div", {
    className: classnames('crs-holder', className, "lp-".concat(labelPosition), "la-".concat(labelAlignment), "t-".concat(type), {
      disabled,
      error: hasError,
      'read-only': readOnly,
      'input-active': checked
    })
  }, /*#__PURE__*/React__default.createElement("div", {
    className: classnames('label-holder', {
      'has-label': !!label
    })
  }, label && /*#__PURE__*/React__default.createElement("div", {
    className: "crs-item crs-label"
  }, /*#__PURE__*/React__default.createElement("label", {
    className: "ellipsis-text",
    htmlFor: randomId
  }, required && "* ", label)), /*#__PURE__*/React__default.createElement("div", {
    className: "crs-item crs-component"
  }, /*#__PURE__*/React__default.createElement("input", _extends({
    type: "radio",
    onChange: handleChange,
    ref: ref,
    id: randomId,
    checked: checked
  }, restProps)), /*#__PURE__*/React__default.createElement("label", {
    className: classnames('radio', 'cr-element', "s-".concat(size), {
      active: checked,
      'error-color': !checked && !errorText && hasError
    }),
    htmlFor: randomId
  }))), hasError && errorText && /*#__PURE__*/React__default.createElement("div", {
    className: "information-message color-danger"
  }, errorText), description && type !== 'tab' && /*#__PURE__*/React__default.createElement("div", {
    className: "input-description"
  }, description));
});
Radio.propTypes = {
  /**
   * Radio size
   */
  size: PropTypes.oneOf(checkboxRadioSwitcherConfig.size),
  /**
   * A label will be added to the Radio
   */
  label: PropTypes.string,
  /**
   * Specify the label position
   */
  labelPosition: PropTypes.oneOf(checkboxRadioSwitcherConfig.labelPosition),
  /**
   * Specify the label alignment
   */
  labelAlignment: PropTypes.oneOf(checkboxRadioSwitcherConfig.labelAlignment),
  /**
   * Optional description field
   */
  description: PropTypes.string,
  /**
   * Will make Radio readonly when set to "true"
   */
  readOnly: PropTypes.bool,
  /**
   * Will make Radio disabled when set to "true"
   */
  disabled: PropTypes.bool,
  /**
   * Radio will add an extra asterix to the "label". For more info see "ValidatableRadio"(integrated Radio with "Form" organism).
   */
  required: PropTypes.bool,
  /**
   * Control Radio validation. For more info see "ValidatableRadio"(integrated Radio with "Form" organism).
   */
  isValid: PropTypes.bool,
  /**
   * Shows error text when "isValid" is set to "false".
   */
  errorText: PropTypes.string,
  /**
   * Use this prop to get specified value when "onChange" is fired
   */
  value: PropTypes.any,
  /**
   * Fires an event when Radio is clicked((event: Event) => void).
   */
  onChange: PropTypes.func,
  /**
   * Specifies does the Radio checked or not.
   */
  checked: PropTypes.bool,
  /**
   * Needed for "RadioGroup" molecule
   */
  name: PropTypes.string,
  /**
   * Type defines the appearance of the radio
   */
  type: PropTypes.oneOf(['default', 'tab'])
};
Radio.defaultProps = {
  size: checkboxRadioSwitcherConfig.size[0],
  label: '',
  labelPosition: checkboxRadioSwitcherConfig.labelPosition[0],
  labelAlignment: checkboxRadioSwitcherConfig.labelAlignment[0],
  description: '',
  readOnly: false,
  disabled: false,
  required: false,
  isValid: true,
  errorText: '',
  checked: false,
  type: 'default'
};

export { Radio as default };