wix-style-react/dist/src/SelectorList/Content/Content.js

wix-style-react

"use strict";

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

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

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

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

var _ContentSt = require("./Content.st.css");

var _SelectorList = require("../SelectorList.helpers");

var _Selector = _interopRequireDefault(require("../../Selector"));

var _Loader = _interopRequireDefault(require("../../Loader"));

var _InfiniteScroll = _interopRequireDefault(require("../../utils/InfiniteScroll"));

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

var DEFAULT_EMPTY = /*#__PURE__*/_react["default"].createElement("div", {
  className: _ContentSt.classes.defaultEmptyStateWrapper
}, /*#__PURE__*/_react["default"].createElement(_Text["default"], null, "You don't have any items"));

var ListItems = function ListItems(_ref) {
  var items = _ref.items,
      checkIsSelected = _ref.checkIsSelected,
      _onToggle = _ref.onToggle,
      imageSize = _ref.imageSize,
      imageShape = _ref.imageShape,
      multiple = _ref.multiple;

  if (!items.length) {
    return null;
  }

  return /*#__PURE__*/_react["default"].createElement("ul", {
    "data-hook": _SelectorList.dataHooks.list,
    className: _ContentSt.classes.list
  }, items.map(function (item) {
    return /*#__PURE__*/_react["default"].createElement(_Selector["default"], {
      id: item.id,
      key: item.id,
      dataHook: _SelectorList.dataHooks.selector,
      imageSize: imageSize,
      imageShape: imageShape,
      toggleType: multiple ? 'checkbox' : 'radio',
      image: item.image,
      title: item.title,
      subtitle: item.subtitle,
      extraNode: item.extraNode ? item.extraNode : item.extraText && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
        secondary: true
      }, item.extraText),
      subtitleNode: item.subtitleNode,
      belowNode: item.belowNode,
      showBelowNodeOnSelect: item.showBelowNodeOnSelect,
      isSelected: checkIsSelected(item),
      isDisabled: item.disabled,
      onToggle: function onToggle() {
        !item.disabled && _onToggle(item);
      }
    });
  }));
};

var SelectorListContent = function SelectorListContent(_ref2) {
  var dataHook = _ref2.dataHook,
      items = _ref2.items,
      topScrollableContent = _ref2.topScrollableContent,
      onToggle = _ref2.onToggle,
      emptyState = _ref2.emptyState,
      renderNoResults = _ref2.renderNoResults,
      isLoading = _ref2.isLoading,
      checkIsSelected = _ref2.checkIsSelected,
      isEmpty = _ref2.isEmpty,
      noResultsFound = _ref2.noResultsFound,
      imageSize = _ref2.imageSize,
      imageShape = _ref2.imageShape,
      multiple = _ref2.multiple,
      searchValue = _ref2.searchValue,
      loadMore = _ref2.loadMore,
      hasMore = _ref2.hasMore,
      infiniteScrollRef = _ref2.infiniteScrollRef;
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: _ContentSt.classes.content,
    "data-hook": dataHook
  }, isLoading && /*#__PURE__*/_react["default"].createElement("div", {
    className: _ContentSt.classes.mainLoaderWrapper
  }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], {
    size: "medium",
    dataHook: _SelectorList.dataHooks.mainLoader
  })), isEmpty && /*#__PURE__*/_react["default"].createElement("div", {
    "data-hook": _SelectorList.dataHooks.emptyState,
    className: _ContentSt.classes.emptyStateWrapper,
    children: emptyState
  }), items.length > 0 && /*#__PURE__*/_react["default"].createElement(_InfiniteScroll["default"], {
    key: searchValue,
    ref: infiniteScrollRef,
    data: items,
    loadMore: loadMore,
    hasMore: hasMore,
    useWindow: false,
    initialLoad: false,
    loader: /*#__PURE__*/_react["default"].createElement("div", {
      className: _ContentSt.classes.nextPageLoaderWrapper
    }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], {
      size: "small",
      dataHook: _SelectorList.dataHooks.nextPageLoader
    }))
  }, topScrollableContent, /*#__PURE__*/_react["default"].createElement(ListItems, {
    items: items,
    checkIsSelected: checkIsSelected,
    onToggle: onToggle,
    imageSize: imageSize,
    imageShape: imageShape,
    multiple: multiple
  })), noResultsFound && /*#__PURE__*/_react["default"].createElement("div", {
    "data-hook": _SelectorList.dataHooks.noResultsFoundState,
    className: _ContentSt.classes.noResultsFoundStateWrapper,
    children: renderNoResults(searchValue)
  }));
};

SelectorListContent.propTypes = {
  /** applied as data-hook HTML attribute that can be used to create driver in testing */
  dataHook: _propTypes["default"].string,

  /** array of selector items to show */
  items: _propTypes["default"].arrayOf(_propTypes["default"].shape({
    id: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]).isRequired,
    title: _propTypes["default"].node.isRequired,
    subtitle: _propTypes["default"].string,
    extraText: _propTypes["default"].string,
    extraNode: _propTypes["default"].node,
    disabled: _propTypes["default"].bool,
    // show item as disabled, dont count it in "select all", exclude from `onOk`
    selected: _propTypes["default"].bool,
    // force item as selected
    image: _propTypes["default"].node,
    subtitleNode: _propTypes["default"].node,
    belowNode: _propTypes["default"].node,
    showBelowNodeOnSelect: _propTypes["default"].bool
  })),

  /** Component/element that will be rendered above the list that will not be sticky, but scrollable */
  topScrollableContent: _propTypes["default"].node,

  /** callback to trigger when toggling a selector, receives SelectorList item */
  onToggle: _propTypes["default"].func,

  /**
   * Component/element that will be rendered when there is nothing to display,
   * i.e. empty `{items:[], totalCount: 0}` was returned on the first call to `dataSource`
   * */
  emptyState: _propTypes["default"].node,

  /**
   * Function that will get the current `searchQuery` and should return the component/element
   * that will be rendered when there are no items that suffice the entered search query
   *  */
  renderNoResults: _propTypes["default"].func,

  /** whether list is loading */
  isLoading: _propTypes["default"].bool,

  /** a function that receives an item and checks if it is selected */
  checkIsSelected: _propTypes["default"].func.isRequired,

  /** whether list is empty */
  isEmpty: _propTypes["default"].bool,

  /** whether list search found no matching items */
  noResultsFound: _propTypes["default"].bool,

  /** Image icon size */
  imageSize: _propTypes["default"].oneOf(['tiny', 'small', 'portrait', 'large', 'cinema']),

  /**
   * Image icon shape, `rectangular` or `circle`.<br>
   * NOTE: `circle` is not compatible with `imageSize` of `portrait` or `cinema`
   * */
  imageShape: function imageShape(props, propName, componentName) {
    if (['portrait', 'cinema'].includes(props.imageSize) && props[propName] === 'circle') {
      return new Error("".concat(componentName, ": prop \"imageSize\" with value of \"").concat(props.imageSize, "\" is incompatible with prop imageShape with value of \"circle\" \u2014 use \"rectangular\" instead."));
    }
  },

  /** display checkbox and allow multi selection */
  multiple: _propTypes["default"].bool,

  /** search input value */
  searchValue: _propTypes["default"].string.isRequired,

  /** A callback called when more items are requested to be rendered. */
  loadMore: _propTypes["default"].func.isRequired,

  /** Whether there are more items to be loaded. */
  hasMore: _propTypes["default"].bool
};
SelectorListContent.defaultProps = {
  dataHook: _SelectorList.dataHooks.content,
  emptyState: DEFAULT_EMPTY,
  renderNoResults: function renderNoResults(searchValue) {
    return /*#__PURE__*/_react["default"].createElement("div", {
      className: _ContentSt.classes.defaultNoResultsFoundStateWrapper
    }, /*#__PURE__*/_react["default"].createElement(_Text["default"], null, "No items matched your search ", "\"".concat(searchValue, "\"")));
  }
};
var _default = SelectorListContent;
exports["default"] = _default;