Liferay.Loader.define("portal-search-ranking-web@2.0.50/js/components/list/Item.es", ['module', 'exports', 'require', '@frontend-taglib-clay$clayui/button', '@frontend-taglib-clay$clayui/form', '@frontend-taglib-clay$clayui/icon', '@frontend-taglib-clay$clayui/label', '@frontend-taglib-clay$clayui/layout', '@frontend-taglib-clay$clayui/sticker', 'frontend-js-react-web$classnames', 'frontend-js-react-web$prop-types', 'frontend-js-react-web$react', 'frontend-js-react-web$react-dnd', 'frontend-js-react-web$react-dnd-html5-backend', 'frontend-js-react-web$react-dom', '../../utils/constants.es', '../../utils/drag-types.es', '../../utils/language.es', '../../utils/util.es', './ItemDropdown.es'], function (module, exports, require) {
  var define = undefined;
  var global = window;
  {
    Object.defineProperty(exports, "__esModule", {
      value: true
    });
    exports.default = void 0;

    var _button = _interopRequireDefault(require("@frontend-taglib-clay$clayui/button"));

    var _form = require("@frontend-taglib-clay$clayui/form");

    var _icon = _interopRequireDefault(require("@frontend-taglib-clay$clayui/icon"));

    var _label = _interopRequireDefault(require("@frontend-taglib-clay$clayui/label"));

    var _layout = _interopRequireDefault(require("@frontend-taglib-clay$clayui/layout"));

    var _sticker = _interopRequireDefault(require("@frontend-taglib-clay$clayui/sticker"));

    var _classnames = _interopRequireDefault(require("frontend-js-react-web$classnames"));

    var _propTypes = require("frontend-js-react-web$prop-types");

    var _react = _interopRequireWildcard(require("frontend-js-react-web$react"));

    var _reactDnd = require("frontend-js-react-web$react-dnd");

    var _reactDndHtml5Backend = require("frontend-js-react-web$react-dnd-html5-backend");

    var _reactDom = require("frontend-js-react-web$react-dom");

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

    var _dragTypes = _interopRequireDefault(require("../../utils/drag-types.es"));

    var _language = require("../../utils/language.es");

    var _util = require("../../utils/util.es");

    var _ItemDropdown = _interopRequireDefault(require("./ItemDropdown.es"));

    function _getRequireWildcardCache() {
      if (typeof WeakMap !== "function") return null;var cache = new WeakMap();_getRequireWildcardCache = function _getRequireWildcardCache() {
        return cache;
      };return cache;
    }

    function _interopRequireWildcard(obj) {
      if (obj && obj.__esModule) {
        return obj;
      }if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") {
        return { default: obj };
      }var cache = _getRequireWildcardCache();if (cache && cache.has(obj)) {
        return cache.get(obj);
      }var newObj = {};var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;for (var key in obj) {
        if (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 _interopRequireDefault(obj) {
      return obj && obj.__esModule ? obj : { default: obj };
    }

    function _typeof(obj) {
      "@babel/helpers - typeof";
      if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
        _typeof = function _typeof(obj) {
          return typeof obj;
        };
      } else {
        _typeof = function _typeof(obj) {
          return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
        };
      }return _typeof(obj);
    }

    function _classCallCheck(instance, Constructor) {
      if (!(instance instanceof Constructor)) {
        throw new TypeError("Cannot call a class as a function");
      }
    }

    function _defineProperties(target, props) {
      for (var i = 0; i < props.length; i++) {
        var descriptor = props[i];descriptor.enumerable = descriptor.enumerable || false;descriptor.configurable = true;if ("value" in descriptor) descriptor.writable = true;Object.defineProperty(target, descriptor.key, descriptor);
      }
    }

    function _createClass(Constructor, protoProps, staticProps) {
      if (protoProps) _defineProperties(Constructor.prototype, protoProps);if (staticProps) _defineProperties(Constructor, staticProps);return Constructor;
    }

    function _possibleConstructorReturn(self, call) {
      if (call && (_typeof(call) === "object" || typeof call === "function")) {
        return call;
      }return _assertThisInitialized(self);
    }

    function _getPrototypeOf(o) {
      _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
        return o.__proto__ || Object.getPrototypeOf(o);
      };return _getPrototypeOf(o);
    }

    function _assertThisInitialized(self) {
      if (self === void 0) {
        throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
      }return self;
    }

    function _inherits(subClass, superClass) {
      if (typeof superClass !== "function" && superClass !== null) {
        throw new TypeError("Super expression must either be null or a function");
      }subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } });if (superClass) _setPrototypeOf(subClass, superClass);
    }

    function _setPrototypeOf(o, p) {
      _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
        o.__proto__ = p;return o;
      };return _setPrototypeOf(o, p);
    }

    function _defineProperty(obj, key, value) {
      if (key in obj) {
        Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true });
      } else {
        obj[key] = value;
      }return obj;
    }

    var DEFAULT_ICON = 'web-content';
    var DOCUMENT_CSS_CLASS_COLOR_MAP = {
      'document-code': 'file-icon-color-7',
      'document-compressed': 'file-icon-color-0',
      'document-default': 'file-icon-color-0',
      'document-image': 'file-icon-color-5',
      'document-multimedia': 'file-icon-color-5',
      'document-pdf': 'file-icon-color-3',
      'document-presentation': 'file-icon-color-4',
      'document-table': 'file-icon-color-2',
      'document-text': 'file-icon-color-6'
    };
    var HOVER_TYPES = {
      BOTTOM: 'bottom',
      TOP: 'top'
    };
    var ROOT_CLASS = 'list-item-root';
    /**
     * Component used for displaying a pin icon when an item is pinned. This should
     * be identical to the pin quick action button so that when hovered over, the
     * icons should align exactly on top of each other. This icon should not be
     * focusable or clickable.
     */

    var ResultPinIconDisplay = function ResultPinIconDisplay() {
      return (/*#__PURE__*/_react.default.createElement("div", {
          className: "quick-action-menu result-pin-icon-display"
        }, /*#__PURE__*/_react.default.createElement(_button.default, {
          className: "btn-outline-borderless component-action quick-action-item",
          displayType: "secondary",
          monospaced: true,
          tabIndex: "-1",
          title: Liferay.Language.get('pinned-result')
        }, /*#__PURE__*/_react.default.createElement(_icon.default, {
          symbol: "pin"
        })))
      );
    };
    /**
     * Passes the required values to the drop target and drag preview.
     * This method must be called `beginDrag`.
     * @param {Object} props Component's current props
     * @returns {Object} The props to be passed to the drop target and drag preview.
     */

    function beginDrag(_ref) {
      var author = _ref.author,
          clicks = _ref.clicks,
          date = _ref.date,
          description = _ref.description,
          hidden = _ref.hidden,
          id = _ref.id,
          index = _ref.index,
          onBlur = _ref.onBlur,
          pinned = _ref.pinned,
          selected = _ref.selected,
          title = _ref.title,
          type = _ref.type;
      onBlur();
      return {
        author: author,
        clicks: clicks,
        date: date,
        description: description,
        hidden: hidden,
        id: id,
        index: index,
        pinned: pinned,
        selected: selected,
        title: title,
        type: type
      };
    }
    /**
     * Prevents dropping from the same position.
     * This method must be called `canDrop`.
     * @param {Object} props Component's current props.
     * @param {DropTargetMonitor} monitor
     * @returns {boolean} True if the target should accept the item.
     */

    function canDrop(props, monitor) {
      var dropIndex = props.index,
          pinned = props.pinned;

      var _monitor$getItem = monitor.getItem(),
          dragIndex = _monitor$getItem.index;

      return pinned && dragIndex !== dropIndex;
    }
    /**
     * Passes necessary values for the `endDrag` method.
     *
     * hoveringBelow: For determining if the index should be +1 if below.
     * index: For the position of where the move the dragged item.
     *
     * @param {Object} props The current props of the component being dropped.
     * @param {DropTargetMonitor} monitor
     * @param {DragDropContainer} component The drop target component.
     */

    function drop(_ref2, monitor, component) {
      var index = _ref2.index;
      var decoratedComponent = component.getDecoratedComponentInstance();
      return {
        hoverPosition: decoratedComponent.state.hoverPosition,
        index: index
      };
    }
    /**
     * Implements the behavior of what will occur when an item stops being dragged.
     * Moves the dragged item to the dropped index.
     * This method must be called `endDrag`.
     * @param {Object} props The current props of the component being dragged.
     * @param {DropTargetMonitor} monitor
     */

    function endDrag(props, monitor) {
      var onFocus = props.onFocus,
          onMove = props.onMove;

      var _monitor$getItem2 = monitor.getItem(),
          dragIndex = _monitor$getItem2.index;

      if (monitor.didDrop()) {
        var _monitor$getDropResul = monitor.getDropResult(),
            hoverPosition = _monitor$getDropResul.hoverPosition,
            dropIndex = _monitor$getDropResul.index;

        var destIndex = hoverPosition === HOVER_TYPES.TOP ? dropIndex : dropIndex + 1;
        var focusIndex = dragIndex < destIndex ? destIndex - 1 : destIndex;

        if (hoverPosition !== null) {
          onMove(dragIndex, destIndex);
        }

        onFocus(hoverPosition !== null ? focusIndex : dragIndex);
      } else {
        onFocus(dragIndex);
      }
    }
    /**
     * Updates the hover indicator line. Performs logic to hide the hover indicator
     * for hovering over a different item, but moving to the same index. This is
     * done here instead of ideally in `canDrop` so the state doesn't need to be
     * lifted to a parent component. This also means though that everywhere we
     * depend on `canDrop` we have to also have to check `hoverPosition !== null`.
     *
     * @param {Object} props The component's current props.
     * @param {DropTargetMonitor} monitor
     * @param {DragDropContainer} component The component being hovered over.
     */

    function hover(props, monitor, component) {
      var dropIndex = props.index;

      var _monitor$getItem3 = monitor.getItem(),
          dragIndex = _monitor$getItem3.index;

      var hoverAbove = isHoverAbove(monitor, component);
      var destIndex = hoverAbove ? dropIndex - 1 : dropIndex + 1;

      if (dragIndex === destIndex) {
        component.setState({
          hoverPosition: null
        });
      } else if (hoverAbove) {
        component.setState({
          hoverPosition: HOVER_TYPES.TOP
        });
      } else {
        component.setState({
          hoverPosition: HOVER_TYPES.BOTTOM
        });
      }
    }
    /**
     * A helper method for drag and drop methods.
     *
     * Checks if the mouse is hovering over an item's top-half by:
     * 1) hoverMiddleY: Get vertical middle.
     * 2) clientOffset: Determine mouse position.
     * 3) hoverClientY: Get pixels to the top.
     *
     * @param {DropTargetMonitor} monitor
     * @param {DragDropContainer} component The component being hovered over.
     */

    function isHoverAbove(monitor, component) {
      var hoverBoundingRect = (0, _reactDom.findDOMNode)(component).getBoundingClientRect();
      var hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
      var clientOffset = monitor.getClientOffset();
      var hoverClientY = clientOffset.y - hoverBoundingRect.top;
      return hoverClientY < hoverMiddleY;
    }

    var Item = /*#__PURE__*/function (_PureComponent) {
      _inherits(Item, _PureComponent);

      function Item() {
        var _getPrototypeOf2;

        var _this;

        _classCallCheck(this, Item);

        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
          args[_key] = arguments[_key];
        }

        _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(Item)).call.apply(_getPrototypeOf2, [this].concat(args)));

        _defineProperty(_assertThisInitialized(_this), "rootRef", /*#__PURE__*/_react.default.createRef());

        _defineProperty(_assertThisInitialized(_this), "state", {
          hoverPosition: null
        });

        _defineProperty(_assertThisInitialized(_this), "_handleBlur", function () {
          _this.props.onBlur();
        });

        _defineProperty(_assertThisInitialized(_this), "_handleFocus", function (event) {
          if (event.target.classList.contains(ROOT_CLASS)) {
            var _this$props = _this.props,
                index = _this$props.index,
                onFocus = _this$props.onFocus;
            onFocus(index);
          }
        });

        _defineProperty(_assertThisInitialized(_this), "_handleHide", function () {
          var _this$props2 = _this.props,
              hidden = _this$props2.hidden,
              id = _this$props2.id,
              onBlur = _this$props2.onBlur,
              onClickHide = _this$props2.onClickHide,
              onRemoveSelect = _this$props2.onRemoveSelect;
          onRemoveSelect([id]);
          onClickHide([id], !hidden);

          if (onBlur) {
            onBlur();
          }
        });

        _defineProperty(_assertThisInitialized(_this), "_handleKeyDown", function (event) {
          var focus = _this.props.focus;

          if (focus) {
            if (event.key === _constants.KEY_CODES.S) {
              _this._handleSelect();
            } else if (event.key === _constants.KEY_CODES.P) {
              _this._handlePin();
            } else if (event.key === _constants.KEY_CODES.H) {
              _this._handleHide();
            }
          }
        });

        _defineProperty(_assertThisInitialized(_this), "_handlePin", function () {
          var _this$props3 = _this.props,
              addedResult = _this$props3.addedResult,
              id = _this$props3.id,
              onClickPin = _this$props3.onClickPin,
              onRemoveSelect = _this$props3.onRemoveSelect,
              pinned = _this$props3.pinned;

          if (addedResult) {
            onRemoveSelect([id]);
          }

          onClickPin([id], !pinned);
        });

        _defineProperty(_assertThisInitialized(_this), "_handleSelect", function () {
          var _this$props4 = _this.props,
              id = _this$props4.id,
              onSelect = _this$props4.onSelect;
          onSelect(id);
        });

        return _this;
      }

      _createClass(Item, [{
        key: "componentDidMount",

        /**
         * Use empty image as a drag preview so browsers don't draw it and
         * we can draw what we want on the custom drag layer instead.
         *
         * captureDraggingState: true for IE fallback. This specifies that we'd
         * rather screenshot the node when it already knows it's being dragged so we
         * can hide it with CSS.
         */
        value: function componentDidMount() {
          var connectDragPreview = this.props.connectDragPreview;

          if (connectDragPreview) {
            connectDragPreview((0, _reactDndHtml5Backend.getEmptyImage)(), {
              captureDraggingState: true
            });
          }
        }
        /**
         * Use HTMLElement focus method so that pressing tab will focus starting
         * from the currently focused item. This is needed when using arrow keys to
         * change focus between items.
         * @param {Object} prevProps The previous props before updating.
         */

      }, {
        key: "componentDidUpdate",
        value: function componentDidUpdate(prevProps) {
          var focus = this.props.focus;

          if (prevProps.focus !== focus && focus) {
            this.rootRef.current.focus();
          }
        }
      }, {
        key: "render",
        value: function render() {
          var _this$props5 = this.props,
              author = _this$props5.author,
              canDrop = _this$props5.canDrop,
              clicks = _this$props5.clicks,
              connectDragSource = _this$props5.connectDragSource,
              connectDropTarget = _this$props5.connectDropTarget,
              date = _this$props5.date,
              deleted = _this$props5.deleted,
              description = _this$props5.description,
              dragging = _this$props5.dragging,
              focus = _this$props5.focus,
              hidden = _this$props5.hidden,
              icon = _this$props5.icon,
              id = _this$props5.id,
              onClickHide = _this$props5.onClickHide,
              onClickPin = _this$props5.onClickPin,
              over = _this$props5.over,
              pinned = _this$props5.pinned,
              reorder = _this$props5.reorder,
              selected = _this$props5.selected,
              style = _this$props5.style,
              title = _this$props5.title,
              type = _this$props5.type,
              viewURL = _this$props5.viewURL;
          var hoverPosition = this.state.hoverPosition;
          var classSticker = (0, _classnames.default)(DOCUMENT_CSS_CLASS_COLOR_MAP[icon] || DOCUMENT_CSS_CLASS_COLOR_MAP['document-default'], 'result-icon');
          var listClasses = (0, _classnames.default)(ROOT_CLASS, 'list-group-item', 'list-group-item-flex', {
            'item-drop-indicator-above': over && canDrop && hoverPosition === HOVER_TYPES.TOP,
            'item-drop-indicator-below': over && canDrop && hoverPosition === HOVER_TYPES.BOTTOM,
            'list-item-dragging': dragging,
            'list-item-has-clicks': !(0, _util.isNil)(clicks),
            'result-ranking-item-focus': focus,
            'result-ranking-item-hidden': hidden,
            'result-ranking-item-pinned': pinned,
            'result-ranking-item-reorder': reorder
          });
          return connectDropTarget( /*#__PURE__*/_react.default.createElement("li", {
            className: listClasses,
            "data-testid": id,
            onBlur: this._handleBlur,
            onFocus: this._handleFocus,
            onKeyDown: this._handleKeyDown,
            ref: this.rootRef,
            style: style,
            tabIndex: 0
          }, /*#__PURE__*/_react.default.createElement(_layout.default.ContentCol, {
            className: "result-drag",
            "data-testid": "DRAG_ICON",
            style: {
              visibility: pinned ? 'visible' : 'hidden'
            }
          }, connectDragSource( /*#__PURE__*/_react.default.createElement("span", {
            className: "result-drag-sticker sticker sticker-secondary"
          }, /*#__PURE__*/_react.default.createElement(_icon.default, {
            symbol: "drag"
          })))), /*#__PURE__*/_react.default.createElement(_layout.default.ContentCol, null, /*#__PURE__*/_react.default.createElement(_form.ClayCheckbox, {
            "aria-label": Liferay.Language.get('select'),
            checked: selected,
            onChange: this._handleSelect
          })), /*#__PURE__*/_react.default.createElement(_layout.default.ContentCol, null, /*#__PURE__*/_react.default.createElement(_sticker.default, {
            className: classSticker,
            displayType: "light"
          }, /*#__PURE__*/_react.default.createElement(_icon.default, {
            symbol: icon ? icon : DEFAULT_ICON
          }))), /*#__PURE__*/_react.default.createElement(_layout.default.ContentCol, {
            expand: true
          }, /*#__PURE__*/_react.default.createElement(_layout.default.ContentSection, {
            containerElement: "section"
          }, /*#__PURE__*/_react.default.createElement("div", {
            className: "list-group-title"
          }, /*#__PURE__*/_react.default.createElement("span", {
            className: "text-truncate-inline"
          }, viewURL ? /*#__PURE__*/_react.default.createElement("a", {
            href: viewURL,
            rel: "noopener noreferrer",
            target: "_blank"
          }, "".concat(title, " "), /*#__PURE__*/_react.default.createElement(_icon.default, {
            symbol: "shortcut"
          })) : title, deleted && /*#__PURE__*/_react.default.createElement(_label.default, {
            className: "delete-label",
            displayType: "danger"
          }, Liferay.Language.get('deleted')))), (author || date) && /*#__PURE__*/_react.default.createElement("p", {
            className: "list-group-subtext"
          }, author && /*#__PURE__*/_react.default.createElement("span", {
            className: "author"
          }, author), date && /*#__PURE__*/_react.default.createElement("span", {
            className: "date"
          }, date)), type && /*#__PURE__*/_react.default.createElement("p", {
            className: "list-group-subtext"
          }, "[".concat(type, "]")), description && /*#__PURE__*/_react.default.createElement("p", {
            className: "list-group-text list-item-description"
          }, description))), /*#__PURE__*/_react.default.createElement(_layout.default.ContentCol, null, pinned && /*#__PURE__*/_react.default.createElement(ResultPinIconDisplay, null), /*#__PURE__*/_react.default.createElement("div", {
            className: "quick-action-menu"
          }, onClickHide && /*#__PURE__*/_react.default.createElement(_button.default, {
            className: "btn-outline-borderless component-action quick-action-item",
            displayType: "secondary",
            monospaced: true,
            onClick: this._handleHide,
            title: hidden ? Liferay.Language.get('show-result') : Liferay.Language.get('hide-result')
          }, /*#__PURE__*/_react.default.createElement(_icon.default, {
            symbol: hidden ? 'view' : 'hidden'
          })), onClickPin && /*#__PURE__*/_react.default.createElement(_button.default, {
            className: "btn-outline-borderless component-action quick-action-item",
            displayType: "secondary",
            monospaced: true,
            onClick: this._handlePin,
            title: pinned ? Liferay.Language.get('unpin-result') : Liferay.Language.get('pin-result')
          }, pinned ? /*#__PURE__*/_react.default.createElement(_icon.default, {
            key: "UNPIN",
            symbol: "unpin"
          }) : /*#__PURE__*/_react.default.createElement(_icon.default, {
            key: "PIN",
            symbol: "pin"
          }))), (onClickPin || onClickHide) && /*#__PURE__*/_react.default.createElement(_ItemDropdown.default, {
            hidden: hidden,
            onClickHide: this._handleHide,
            onClickPin: this._handlePin,
            pinned: pinned
          })), !(0, _util.isNil)(clicks) && /*#__PURE__*/_react.default.createElement("div", {
            className: "click-count list-group-text sticker-bottom-right"
          }, (0, _language.sub)(Liferay.Language.get('clicks-x'), [/*#__PURE__*/_react.default.createElement("b", {
            key: "CLICK_COUNT"
          }, clicks)], false))));
        }
      }]);

      return Item;
    }(_react.PureComponent);

    _defineProperty(Item, "defaultProps", {
      author: '',
      connectDragPreview: function connectDragPreview(val) {
        return val;
      },
      connectDragSource: function connectDragSource(val) {
        return val;
      },
      connectDropTarget: function connectDropTarget(val) {
        return val;
      },
      date: '',
      onBlur: function onBlur() {},
      onFocus: function onFocus() {},
      onMove: function onMove() {},
      onRemoveSelect: function onRemoveSelect() {},
      onSelect: function onSelect() {},
      title: '-',
      type: ''
    });

    var ItemWithDrag = (0, _reactDnd.DragSource)(_dragTypes.default.LIST_ITEM, {
      beginDrag: beginDrag,
      endDrag: endDrag
    }, function (connect, monitor) {
      return {
        connectDragPreview: connect.dragPreview(),
        connectDragSource: connect.dragSource(),
        dragging: monitor.isDragging()
      };
    })(Item);

    var _default = (0, _reactDnd.DropTarget)(_dragTypes.default.LIST_ITEM, {
      canDrop: canDrop,
      drop: drop,
      hover: hover
    }, function (connect, monitor) {
      return {
        canDrop: monitor.canDrop(),
        connectDropTarget: connect.dropTarget(),
        over: monitor.isOver()
      };
    })(ItemWithDrag);

    exports.default = _default;
    //# sourceMappingURL=Item.es.js.map
  }
});
//# sourceMappingURL=Item.es.js.map