wix-style-react/dist/es/src/Radio/Radio.js

wix-style-react

import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

import React, { useMemo } from 'react';
import PropTypes from 'prop-types';
import { st, classes } from './Radio.st.css';
import Text from '../Text';
import { generateDataAttr } from '../utils/generateDataAttr';
import { generateID } from '../utils/generateId';
import { dataHooks } from './constants';
import { withFocusable } from "wix-ui-core/dist/es/src/hocs/Focusable/FocusableHOC";

var Radio = function Radio(_ref) {
  var dataHook = _ref.dataHook,
      checked = _ref.checked,
      disabled = _ref.disabled,
      label = _ref.label,
      id = _ref.id,
      name = _ref.name,
      value = _ref.value,
      focusableOnFocus = _ref.focusableOnFocus,
      focusableOnBlur = _ref.focusableOnBlur,
      onChange = _ref.onChange,
      alignItems = _ref.alignItems,
      className = _ref.className,
      style = _ref.style;
  var defaultId = generateID();

  var _onClick = function _onClick(event) {
    if (!disabled && !checked) {
      onChange(_objectSpread({
        value: value
      }, event));
    }
  };

  var renderLabel = useMemo(function () {
    return /*#__PURE__*/React.createElement(Text, {
      tagName: "div",
      size: "medium",
      weight: "thin",
      secondary: true
    }, label);
  }, [label]);
  var radioId = id || defaultId;
  return /*#__PURE__*/React.createElement("div", _extends({
    className: st(classes.root, {
      checked: checked,
      disabled: disabled,
      alignItems: alignItems
    }, className)
  }, generateDataAttr({
    checked: checked,
    disabled: disabled
  }, ['checked', 'disabled']), {
    style: style,
    "data-hook": dataHook,
    onClick: _onClick,
    "aria-checked": !!checked
  }), /*#__PURE__*/React.createElement("input", {
    type: "radio",
    className: classes.input,
    "data-hook": dataHooks.input,
    disabled: disabled,
    checked: checked,
    value: value,
    name: name,
    id: radioId,
    onChange: function onChange() {
      return null;
    },
    onFocus: focusableOnFocus,
    onBlur: focusableOnBlur
  }), /*#__PURE__*/React.createElement("span", {
    className: classes.icon,
    "data-hook": dataHooks.icon
  }), label && /*#__PURE__*/React.createElement("label", {
    className: classes.label,
    "data-hook": dataHooks.label,
    htmlFor: radioId,
    onClick: function onClick(e) {
      return e.stopPropagation();
    }
  }, renderLabel));
};

Radio.displayName = 'Radio';
Radio.propTypes = {
  /** Applies a data-hook HTML attribute that can be used in tests */
  dataHook: PropTypes.string,

  /** Specifies a CSS class name to be appended to the component’s root element */
  className: PropTypes.string,

  /** Specifies whether a radio is selected */
  checked: PropTypes.bool,

  /** Specifies whether radio should be disabled */
  disabled: PropTypes.bool,

  /** Sets the label on the right side of a radio. The default accepted value is a text string, but it can be overridden to any other component. */
  label: PropTypes.node,

  /** Sets a unique name for the radio */
  name: PropTypes.node,

  /** Assigns an unique identifier for the radio */
  id: PropTypes.string,

  /** Sets the value that the radio represents */
  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),

  /** Defines a callback function which is called when radio is selected */
  onChange: PropTypes.func,

  /** Control radio alignment with a label */
  alignItems: PropTypes.oneOf(['top', 'center'])
};
Radio.defaultProps = {
  checked: false,
  disabled: false,
  alignItems: 'center',
  onChange: function onChange() {
    return null;
  }
};
export default withFocusable(Radio);