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

wix-style-react

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _typeof = require("@babel/runtime/helpers/typeof");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _react = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _RadioSt = require("./Radio.st.css");

var _Text = _interopRequireDefault(require("../Text"));

var _generateDataAttr = require("../utils/generateDataAttr");

var _generateId = require("../utils/generateId");

var _constants = require("./constants");

var _FocusableHOC = require("wix-ui-core/dist/src/hocs/Focusable/FocusableHOC");

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

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) { (0, _defineProperty2["default"])(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; }

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 = (0, _generateId.generateID)();

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

  var renderLabel = (0, _react.useMemo)(function () {
    return /*#__PURE__*/_react["default"].createElement(_Text["default"], {
      tagName: "div",
      size: "medium",
      weight: "thin",
      secondary: true
    }, label);
  }, [label]);
  var radioId = id || defaultId;
  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
    className: (0, _RadioSt.st)(_RadioSt.classes.root, {
      checked: checked,
      disabled: disabled,
      alignItems: alignItems
    }, className)
  }, (0, _generateDataAttr.generateDataAttr)({
    checked: checked,
    disabled: disabled
  }, ['checked', 'disabled']), {
    style: style,
    "data-hook": dataHook,
    onClick: _onClick,
    "aria-checked": !!checked
  }), /*#__PURE__*/_react["default"].createElement("input", {
    type: "radio",
    className: _RadioSt.classes.input,
    "data-hook": _constants.dataHooks.input,
    disabled: disabled,
    checked: checked,
    value: value,
    name: name,
    id: radioId,
    onChange: function onChange() {
      return null;
    },
    onFocus: focusableOnFocus,
    onBlur: focusableOnBlur
  }), /*#__PURE__*/_react["default"].createElement("span", {
    className: _RadioSt.classes.icon,
    "data-hook": _constants.dataHooks.icon
  }), label && /*#__PURE__*/_react["default"].createElement("label", {
    className: _RadioSt.classes.label,
    "data-hook": _constants.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["default"].string,

  /** Specifies a CSS class name to be appended to the component’s root element */
  className: _propTypes["default"].string,

  /** Specifies whether a radio is selected */
  checked: _propTypes["default"].bool,

  /** Specifies whether radio should be disabled */
  disabled: _propTypes["default"].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["default"].node,

  /** Sets a unique name for the radio */
  name: _propTypes["default"].node,

  /** Assigns an unique identifier for the radio */
  id: _propTypes["default"].string,

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

  /** Defines a callback function which is called when radio is selected */
  onChange: _propTypes["default"].func,

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

var _default = (0, _FocusableHOC.withFocusable)(Radio);

exports["default"] = _default;