@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 = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
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 _context = require("../WixDesignSystemProvider/context");
var _Tooltip = _interopRequireDefault(require("../Tooltip"));
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/Selector/Selector.tsx";
var Selector = _ref => {
  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
  } = _ref;
  var onClick = () => !isDisabled && onToggle(id);
  return /*#__PURE__*/_react.default.createElement(_context.WixDesignSystemContext.Consumer, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 38,
      columnNumber: 5
    }
  }, _ref2 => {
    var {
      newColorsBranding
    } = _ref2;
    return /*#__PURE__*/_react.default.createElement("li", {
      "data-hook": dataHook,
      className: (0, _SelectorSt.st)(_SelectorSt.classes.root, {
        size,
        newColorsBranding,
        showDivider
      }, className),
      onClick: onClick,
      "data-shape": imageShape,
      "data-size": imageSize,
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 40,
        columnNumber: 9
      }
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: (0, _SelectorSt.st)(_SelectorSt.classes.mainPart, {
        disabled: isDisabled
      }),
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 51,
        columnNumber: 11
      }
    }, /*#__PURE__*/_react.default.createElement(ConditionalTooltip, {
      toggleTooltipProps: !!isDisabled ? toggleTooltipProps : undefined,
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 52,
        columnNumber: 13
      }
    }, toggleType === 'checkbox' ? /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
      dataHook: "toggle",
      checked: isSelected,
      disabled: isDisabled,
      indeterminate: indeterminate,
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 56,
        columnNumber: 17
      }
    }) : /*#__PURE__*/_react.default.createElement(_Radio.default, {
      dataHook: "toggle",
      checked: isSelected,
      disabled: isDisabled,
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 63,
        columnNumber: 17
      }
    })), 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: 71,
        columnNumber: 15
      }
    }), /*#__PURE__*/_react.default.createElement("div", {
      className: _SelectorSt.classes.titles,
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 81,
        columnNumber: 13
      }
    }, /*#__PURE__*/_react.default.createElement(_Text.default, {
      dataHook: "selector-title",
      size: size,
      ellipsis: true,
      children: title,
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 82,
        columnNumber: 15
      }
    }), 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: 90,
        columnNumber: 17
      }
    }), subtitleNode && /*#__PURE__*/_react.default.createElement("div", {
      "data-hook": "subtitle-node",
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 100,
        columnNumber: 17
      }
    }, 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: 105,
        columnNumber: 15
      }
    })), showBelowNodeOnSelect && belowNode && isSelected && /*#__PURE__*/_react.default.createElement("div", {
      "data-hook": "below-section",
      className: _SelectorSt.classes.belowSection,
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 114,
        columnNumber: 13
      }
    }, belowNode));
  });
};
var ConditionalTooltip = _ref3 => {
  var _toggleTooltipProps$t, _toggleTooltipProps$t2;
  var {
    toggleTooltipProps,
    children
  } = _ref3;
  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: 132,
      columnNumber: 5
    }
  }, children) : children;
};
Selector.propTypes = {
  dataHook: _propTypes.default.string,
  id: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired,
  image: _propTypes.default.node,
  size: _propTypes.default.oneOf(['small', 'medium']),
  imageSize: _propTypes.default.oneOf(['tiny', 'small', 'portrait', 'large', 'cinema']),
  imageShape: _propTypes.default.oneOf(['rectangular', 'circle']),
  showDivider: _propTypes.default.bool,
  title: _propTypes.default.node.isRequired,
  isSelected: _propTypes.default.bool,
  isDisabled: _propTypes.default.bool,
  indeterminate: _propTypes.default.bool,
  subtitle: _propTypes.default.string,
  extraNode: _propTypes.default.node,
  onToggle: _propTypes.default.func,
  toggleType: _propTypes.default.oneOf(['checkbox', 'radio']),
  showBelowNodeOnSelect: _propTypes.default.bool,
  belowNode: _propTypes.default.node,
  toggleTooltipProps: _propTypes.default.shape({
    content: _propTypes.default.string.isRequired,
    transitionSettings: _propTypes.default.shape({
      openDelay: _propTypes.default.number,
      closeDelay: _propTypes.default.number
    })
  }),
  subtitleNode: _propTypes.default.node,
  className: _propTypes.default.string
};
Selector.ExtraText = _ExtraText.default;
Selector.ProgressBar = _ProgressBar.default;
var _default = exports.default = Selector;
//# sourceMappingURL=Selector.js.map