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

wix-style-react

"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");
var _ExtraText = _interopRequireDefault(require("./ExtraText"));
var _ProgressBar = _interopRequireDefault(require("./ProgressBar"));
var _context = require("../WixStyleReactProvider/context");
var _Divider = _interopRequireDefault(require("../Divider"));
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/Selector/Selector.js";
class Selector extends _react.default.PureComponent {
  constructor() {
    super(...arguments);
    this._onClick = () => !this.props.isDisabled && this.props.onToggle(this.props.id);
  }
  render() {
    var {
      dataHook,
      size,
      imageSize,
      imageShape,
      image,
      hasDivider,
      title,
      subtitle,
      extraNode,
      isSelected,
      isDisabled,
      indeterminate,
      toggleType,
      showBelowNodeOnSelect,
      subtitleNode,
      belowNode,
      className
    } = this.props;
    return /*#__PURE__*/_react.default.createElement(_context.WixStyleReactContext.Consumer, {
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 78,
        columnNumber: 7
      }
    }, _ref => {
      var {
        newColorsBranding
      } = _ref;
      return /*#__PURE__*/_react.default.createElement("li", {
        "data-hook": dataHook,
        className: (0, _SelectorSt.st)(_SelectorSt.classes.root, {
          size,
          newColorsBranding,
          hasDivider
        }, className),
        onClick: this._onClick,
        "data-shape": imageShape,
        "data-size": imageSize,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 80,
          columnNumber: 11
        }
      }, /*#__PURE__*/_react.default.createElement("div", {
        className: (0, _SelectorSt.st)(_SelectorSt.classes.mainPart, {
          disabled: isDisabled
        }),
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 91,
          columnNumber: 13
        }
      }, toggleType === 'checkbox' ? /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
        dataHook: "toggle",
        checked: isSelected,
        disabled: isDisabled,
        indeterminate: indeterminate,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 93,
          columnNumber: 17
        }
      }) : /*#__PURE__*/_react.default.createElement(_Radio.default, {
        dataHook: "toggle",
        checked: isSelected,
        disabled: isDisabled,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 100,
          columnNumber: 17
        }
      }), image && /*#__PURE__*/_react.default.createElement("div", {
        "data-hook": "selector-image",
        className: (0, _SelectorSt.st)(_SelectorSt.classes.image, {
          imageSize,
          imageShape
        }),
        children: image,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 108,
          columnNumber: 17
        }
      }), /*#__PURE__*/_react.default.createElement("div", {
        className: _SelectorSt.classes.titles,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 118,
          columnNumber: 15
        }
      }, /*#__PURE__*/_react.default.createElement(_Text.default, {
        dataHook: "selector-title",
        size: size,
        ellipsis: true,
        children: title,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 119,
          columnNumber: 17
        }
      }), subtitle && /*#__PURE__*/_react.default.createElement(_Text.default, {
        size: size === 'medium' ? 'small' : 'tiny',
        secondary: true,
        dataHook: "selector-subtitle",
        ellipsis: true,
        children: subtitle,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 127,
          columnNumber: 19
        }
      }), subtitleNode && /*#__PURE__*/_react.default.createElement("div", {
        "data-hook": "subtitle-node",
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 137,
          columnNumber: 19
        }
      }, subtitleNode)), extraNode && /*#__PURE__*/_react.default.createElement("div", {
        className: _SelectorSt.classes.extra,
        "data-hook": "selector-extra-node",
        children: extraNode,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 142,
          columnNumber: 17
        }
      })), showBelowNodeOnSelect && belowNode && isSelected && /*#__PURE__*/_react.default.createElement("div", {
        "data-hook": "below-section",
        className: _SelectorSt.classes.belowSection,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 151,
          columnNumber: 15
        }
      }, belowNode));
    });
  }
}
Selector.propTypes = {
  /** Applied as data-hook HTML attribute that can be used in the tests */
  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']),
  hasDivider: _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,
  subtitleNode: _propTypes.default.node,
  className: _propTypes.default.string
};
Selector.defaultProps = {
  isSelected: false,
  isDisabled: false,
  toggleType: 'radio',
  size: 'medium',
  imageSize: 'large',
  imageShape: 'rectangular',
  hasDivider: false,
  onToggle: i => i,
  showBelowNodeOnSelect: false
};
Selector.ExtraText = _ExtraText.default;
Selector.ProgressBar = _ProgressBar.default;
var _default = exports.default = Selector;
//# sourceMappingURL=Selector.js.map