uicore-ts/compiledScripts/UIAutocompleteDropdownView.js

UICore is a library to build native-like user interfaces using pure Typescript. No HTML is needed at all. Components are described as TS classes and all user interactions are handled explicitly. This library is strongly inspired by the UIKit framework tha

"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var UIAutocompleteDropdownView_exports = {};
__export(UIAutocompleteDropdownView_exports, {
  UIAutocompleteDropdownView: () => UIAutocompleteDropdownView
});
module.exports = __toCommonJS(UIAutocompleteDropdownView_exports);
var import_UIAutocompleteRowView = require("./UIAutocompleteRowView");
var import_UIColor = require("./UIColor");
var import_UIObject = require("./UIObject");
var import_UITableView = require("./UITableView");
var import_UIView = require("./UIView");
class UIAutocompleteDropdownView extends import_UIView.UIView {
  constructor(elementID) {
    super(elementID);
    this._filteredItems = [];
    this._filterWords = [];
    this._highlightedRowIndex = -1;
    this._rowHeight = 36;
    this._maxVisibleRows = 8;
    this._isPointerInsideDropdown = import_UIObject.NO;
    this._suppressHoverHighlight = import_UIObject.NO;
    this.hidden = import_UIObject.YES;
    this.userInteractionEnabled = import_UIObject.YES;
    this.backgroundColor = import_UIColor.UIColor.whiteColor;
    this.setBorder(0, 1);
    this.style.boxSizing = "content-box";
    this.tableView = new import_UITableView.UITableView(elementID ? elementID + "TableView" : void 0);
    this.addSubview(this.tableView);
    this.tableView.allRowsHaveEqualHeight = import_UIObject.YES;
    this.tableView.numberOfRows = () => this._filteredItems.length;
    this.tableView.heightForRowWithIndex = () => this._rowHeight;
    this.tableView.newReusableViewForIdentifier = (identifier, rowIndex) => this.newRowView(identifier, rowIndex);
    this.tableView.viewForRowWithIndex = (index) => this.viewForRowWithIndex(index);
    this._fullHeightView = new import_UIView.UIView(elementID ? elementID + "FullHeightView" : void 0);
    this._fullHeightView.userInteractionEnabled = import_UIObject.NO;
    this.tableView.addSubview(this._fullHeightView);
    this.tableView.viewHTMLElement.addEventListener("mousemove", () => {
      this._suppressHoverHighlight = import_UIObject.NO;
    });
  }
  newRowView(identifier, rowIndex) {
    return new import_UIAutocompleteRowView.UIAutocompleteRowView(this.elementID + identifier + rowIndex);
  }
  viewForRowWithIndex(index) {
    const row = this.tableView.reusableViewForIdentifier(
      "AutocompleteRow",
      index
    );
    const item = this._filteredItems[index];
    if ((0, import_UIObject.IS)(item)) {
      row.item = item;
    }
    row.filterWords = this._filterWords;
    row.selected = index === this._highlightedRowIndex;
    const rowWasHovered = () => {
      if (this._suppressHoverHighlight) {
        return;
      }
      this._setHighlightedRowIndex(index, import_UIObject.NO);
    };
    if (row._autocompleteHoverHandler) {
      row.removeTargetForControlEvent(
        import_UIView.UIView.controlEvent.PointerHover,
        row._autocompleteHoverHandler
      );
    }
    row.controlEventTargetAccumulator.PointerHover = rowWasHovered;
    row._autocompleteHoverHandler = rowWasHovered;
    const rowWasTapped = () => {
      if ((0, import_UIObject.IS)(item) && this.didSelectItem) {
        this.didSelectItem(item);
      }
    };
    if (row._autocompleteTapHandler) {
      row.removeTargetForControlEvent(
        import_UIView.UIView.controlEvent.PointerUpInside,
        row._autocompleteTapHandler
      );
    }
    row.controlEventTargetAccumulator.PointerUpInside = rowWasTapped;
    row._autocompleteTapHandler = rowWasTapped;
    return row;
  }
  get highlightedRowIndex() {
    return this._highlightedRowIndex;
  }
  set highlightedRowIndex(index) {
    this._setHighlightedRowIndex(index, import_UIObject.YES);
  }
  _setHighlightedRowIndex(index, scrollIntoView) {
    const previousIndex = this._highlightedRowIndex;
    this._highlightedRowIndex = index;
    const previousRow = this.tableView.visibleRowWithIndex(previousIndex);
    if ((0, import_UIObject.IS)(previousRow)) {
      previousRow.selected = import_UIObject.NO;
    }
    const currentRow = this.tableView.visibleRowWithIndex(index);
    if ((0, import_UIObject.IS)(currentRow)) {
      currentRow.selected = import_UIObject.YES;
      if (scrollIntoView) {
        let contentOffset = this.tableView.contentOffset;
        if (currentRow.frame.y < contentOffset.y) {
          contentOffset.y = currentRow.frame.y;
        }
        if (currentRow.frame.max.y > contentOffset.y + this.tableView.bounds.height) {
          contentOffset = contentOffset.pointByAddingY(-(contentOffset.y + this.tableView.bounds.height - currentRow.frame.max.y));
        }
        const animationDuration = this.tableView.animationDuration;
        this.tableView.animationDuration = 0;
        this.tableView.contentOffset = contentOffset;
        this.tableView.animationDuration = animationDuration;
        this._suppressHoverHighlight = import_UIObject.YES;
      }
    }
  }
  get highlightedItem() {
    if (this._highlightedRowIndex >= 0 && this._highlightedRowIndex < this._filteredItems.length) {
      return this._filteredItems[this._highlightedRowIndex];
    }
    return void 0;
  }
  set filteredItems(items) {
    this._filteredItems = items;
    this._highlightedRowIndex = -1;
    this.tableView.reloadData();
    this.hidden = items.length === 0;
    this._updateFullHeightView();
    this.setNeedsLayout();
  }
  get filteredItems() {
    return this._filteredItems;
  }
  set filterWords(words) {
    this._filterWords = words;
    this.tableView.reloadData();
  }
  get filterWords() {
    return this._filterWords;
  }
  showAnchoredToView(anchorView) {
    this.anchorView = anchorView;
    this.calculateAndSetViewFrame = () => {
      var _a, _b, _c;
      const rootView = anchorView.rootView;
      const padding = anchorView.core.paddingLength;
      if (!this.superview || this.superview !== rootView) {
        this.removeFromSuperview();
        rootView.addSubview(this);
      }
      const fieldFrameInRoot = ((_c = (_a = this.anchorView) == null ? void 0 : _a.superview) == null ? void 0 : _c.rectangleInView(
        (_b = this.anchorView) == null ? void 0 : _b.frame,
        rootView
      )).rectangleByAddingX(padding).rectangleByAddingY(padding);
      if ((0, import_UIObject.IS_NOT)(fieldFrameInRoot)) {
        return;
      }
      const dropdownHeight = Math.min(
        this._filteredItems.length * this._rowHeight,
        this._maxVisibleRows * this._rowHeight
      );
      this.frame = fieldFrameInRoot.rectangleForNextRow(0, dropdownHeight);
    };
    this.setNeedsLayoutUpToRootView();
    this.calculateAndSetViewFrame();
    this.style.zIndex = "10000";
    this.hidden = this._filteredItems.length === 0;
  }
  dismiss() {
    this.hidden = import_UIObject.YES;
    this._highlightedRowIndex = -1;
    this._isPointerInsideDropdown = import_UIObject.NO;
  }
  _updateFullHeightView() {
    const totalHeight = this._filteredItems.length * this._rowHeight;
    this._fullHeightView.frame = this._fullHeightView.frame.rectangleWithY(0).rectangleWithHeight(totalHeight).rectangleWithWidth(1);
    this._fullHeightView.hasWeakFrame = import_UIObject.YES;
  }
  layoutSubviews() {
    super.layoutSubviews();
    const bounds = this.contentBounds;
    this.tableView.frame = bounds;
    this._updateFullHeightView();
  }
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  UIAutocompleteDropdownView
});
//# sourceMappingURL=UIAutocompleteDropdownView.js.map