@wix/design-system/dist/cjs/Selector/Selector.js

@wix/design-system

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _Checkbox = _interopRequireDefault(require("../Checkbox"));
var _Radio = _interopRequireDefault(require("../Radio"));
var _Text = _interopRequireDefault(require("../Text"));
var _SelectorSt = require("./Selector.st.css.js");
var _ExtraText = _interopRequireDefault(require("./ExtraText"));
var _ProgressBar = _interopRequireDefault(require("./ProgressBar"));
var _Tooltip = _interopRequireDefault(require("../Tooltip"));
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/Selector/Selector.tsx";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var Selector = /*#__PURE__*/_react.default.forwardRef((_ref, forwardedRef) => {
  var {
    dataHook,
    size = 'medium',
    imageSize = 'large',
    imageShape = 'rectangular',
    image,
    toggleType = 'radio',
    showDivider = false,
    title,
    subtitle,
    extraNode,
    isSelected = false,
    isDisabled = false,
    toggleTooltipProps,
    indeterminate,
    showBelowNodeOnSelect,
    subtitleNode,
    belowNode,
    className,
    id,
    onToggle = i => i,
    isActive = false
  } = _ref;
  var rootRef = (0, _react.useRef)(null);
  var toggleRef = (0, _react.useRef)(null);
  (0, _react.useEffect)(() => {
    if (typeof forwardedRef === 'function') {
      forwardedRef(rootRef.current);
    } else if (forwardedRef) {
      forwardedRef.current = rootRef.current;
    }
  });

  // Make the toggle input non-focusable (aria-activedescendant pattern)
  (0, _react.useEffect)(() => {
    var _wrappedRef$inputRef;
    var toggle = toggleRef.current;
    if (!toggle) return;
    var wrappedRef = toggle.wrappedComponentRef;
    if (wrappedRef instanceof HTMLInputElement) {
      wrappedRef.tabIndex = -1;
      return;
    }
    var checkboxInput = wrappedRef == null || (_wrappedRef$inputRef = wrappedRef.inputRef) == null ? void 0 : _wrappedRef$inputRef.current;
    if (checkboxInput) {
      checkboxInput.tabIndex = -1;
    }
  });
  var onClick = () => !isDisabled && onToggle(id);
  return /*#__PURE__*/_react.default.createElement("li", {
    ref: rootRef,
    id: String(id),
    "data-hook": dataHook,
    className: (0, _SelectorSt.st)(_SelectorSt.classes.root, {
      size,
      showDivider,
      isActive
    }, className),
    onClick: onClick,
    role: "option",
    "aria-selected": isSelected,
    "data-disabled": isDisabled || undefined,
    "data-shape": imageShape,
    "data-size": imageSize,
    tabIndex: -1,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 82,
      columnNumber: 7
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _SelectorSt.st)(_SelectorSt.classes.mainPart, {
      disabled: isDisabled
    }),
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 95,
      columnNumber: 9
    }
  }, /*#__PURE__*/_react.default.createElement(ConditionalTooltip, {
    toggleTooltipProps: !!isDisabled ? toggleTooltipProps : undefined,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 96,
      columnNumber: 11
    }
  }, toggleType === 'checkbox' ? /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
    ref: toggleRef,
    dataHook: "toggle",
    checked: isSelected,
    disabled: isDisabled,
    indeterminate: indeterminate,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 100,
      columnNumber: 15
    }
  }) : /*#__PURE__*/_react.default.createElement(_Radio.default, {
    ref: toggleRef,
    dataHook: "toggle",
    checked: isSelected,
    disabled: isDisabled,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 108,
      columnNumber: 15
    }
  })), image && /*#__PURE__*/_react.default.createElement("div", {
    "data-hook": "selector-image",
    className: (0, _SelectorSt.st)(_SelectorSt.classes.image, {
      imageSize,
      imageShape
    }),
    children: image,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 117,
      columnNumber: 13
    }
  }), /*#__PURE__*/_react.default.createElement("div", {
    className: _SelectorSt.classes.titles,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 127,
      columnNumber: 11
    }
  }, /*#__PURE__*/_react.default.createElement(_Text.default, {
    dataHook: "selector-title",
    size: size,
    ellipsis: true,
    children: title,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 128,
      columnNumber: 13
    }
  }), subtitle && /*#__PURE__*/_react.default.createElement(_Text.default, {
    size: size === 'medium' ? 'small' : 'tiny',
    secondary: true,
    dataHook: "selector-subtitle",
    ellipsis: true,
    children: subtitle,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 136,
      columnNumber: 15
    }
  }), subtitleNode && /*#__PURE__*/_react.default.createElement("div", {
    "data-hook": "subtitle-node",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 146,
      columnNumber: 15
    }
  }, subtitleNode)), extraNode && /*#__PURE__*/_react.default.createElement("div", {
    className: _SelectorSt.classes.extra,
    "data-hook": "selector-extra-node",
    children: extraNode,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 151,
      columnNumber: 13
    }
  })), showBelowNodeOnSelect && belowNode && isSelected && /*#__PURE__*/_react.default.createElement("div", {
    "data-hook": "below-section",
    className: _SelectorSt.classes.belowSection,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 160,
      columnNumber: 11
    }
  }, belowNode));
});
var ConditionalTooltip = _ref2 => {
  var _toggleTooltipProps$t, _toggleTooltipProps$t2;
  var {
    toggleTooltipProps,
    children
  } = _ref2;
  return toggleTooltipProps ? /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
    content: toggleTooltipProps == null ? void 0 : toggleTooltipProps.content,
    disabled: false,
    dataHook: "toggle-tooltip",
    enterDelay: (_toggleTooltipProps$t = toggleTooltipProps.transitionSettings) == null ? void 0 : _toggleTooltipProps$t.openDelay,
    exitDelay: (_toggleTooltipProps$t2 = toggleTooltipProps.transitionSettings) == null ? void 0 : _toggleTooltipProps$t2.closeDelay,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 177,
      columnNumber: 5
    }
  }, children) : children;
};
Selector.displayName = 'Selector';
Selector.ExtraText = _ExtraText.default;
Selector.ProgressBar = _ProgressBar.default;
var _default = exports.default = Selector;
//# sourceMappingURL=Selector.js.map