@hashicorp/design-system-components/dist/components/hds/advanced-table/th-reorder-drop-target.js

Helios Design System Components

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';
import { modifier } from 'ember-modifier';
import { BORDER_WIDTH } from './index.js';
import { requestAnimationFrameWaiter } from './utils.js';
import { HdsAdvancedTableColumnReorderSideValues } from './types.js';
import { precompileTemplate } from '@ember/template-compilation';
import { g, i, n } from 'decorator-transforms/runtime';
import { setComponentTemplate } from '@ember/component';

var TEMPLATE = precompileTemplate("{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-License-Identifier: MPL-2.0\n}}\n\n<div\n  class={{this.classNames}}\n  aria-hidden=\"true\"\n  {{style height=this.height}}\n  {{this._registerElement}}\n  {{on \"dragover\" this.handleDragOver}}\n  {{on \"drop\" this.handleDrop}}\n  ...attributes\n/>");

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */

class HdsAdvancedTableThReorderDropTarget extends Component {
  static {
    g(this.prototype, "_dragSide", [tracked], function () {
      return null;
    });
  }
  #_dragSide = (i(this, "_dragSide"), void 0);
  static {
    g(this.prototype, "_isUpdateQueued", [tracked], function () {
      return false;
    });
  }
  #_isUpdateQueued = (i(this, "_isUpdateQueued"), void 0);
  _element;
  _registerElement = modifier(element => {
    this._element = element;
  });

  // determines whether the drag event is occurring on the left or right side of the element
  _getDragSide(event) {
    const rect = this._element.getBoundingClientRect();
    const mouseX = event.clientX;
    const elementMiddleX = rect.left + rect.width / 2;
    return mouseX < elementMiddleX ? HdsAdvancedTableColumnReorderSideValues.Left : HdsAdvancedTableColumnReorderSideValues.Right;
  }
  get isDraggingOver() {
    const {
      table
    } = this.args.column;
    return table.reorderHoveredColumn?.key === this.args.column.key;
  }
  get classNames() {
    const {
      column
    } = this.args;
    const classes = ['hds-advanced-table__th-reorder-drop-target'];
    if (column.isFirst && !this.args.hasSelectableRows) {
      classes.push('hds-advanced-table__th-reorder-drop-target--is-first');
    } else if (column.isLast) {
      classes.push('hds-advanced-table__th-reorder-drop-target--is-last');
    }
    if (column.isBeingDragged) {
      classes.push('hds-advanced-table__th-reorder-drop-target--is-being-dragged');
    } else if (this.isDraggingOver && this._dragSide !== null) {
      classes.push(...['hds-advanced-table__th-reorder-drop-target--is-dragging-over', `hds-advanced-table__th-reorder-drop-target--is-dragging-over--${this._dragSide}`]);
    }
    return classes.join(' ');
  }
  get height() {
    const {
      tableHeight
    } = this.args;
    if (tableHeight === undefined) {
      return;
    }
    return `${tableHeight - BORDER_WIDTH * 2}px`;
  }
  handleDragOver(event) {
    event.preventDefault();
    if (this._isUpdateQueued) {
      return;
    }
    this._isUpdateQueued = true;
    requestAnimationFrameWaiter(() => {
      const {
        column
      } = this.args;
      const {
        table
      } = column;
      if (table.reorderDraggedColumn !== null) {
        if (table.reorderDraggedColumn.key === column.key) {
          table.reorderHoveredColumn = null;
        } else {
          table.reorderHoveredColumn = column;
          const {
            next,
            previous
          } = table.reorderDraggedColumn.siblings;
          const dragSide = this._getDragSide(event);
          if (column === previous && dragSide === HdsAdvancedTableColumnReorderSideValues.Left || column === next && dragSide === HdsAdvancedTableColumnReorderSideValues.Right || column !== previous && column !== next) {
            this._dragSide = dragSide;
          }
        }
      }
      this._isUpdateQueued = false;
    });
  }
  static {
    n(this.prototype, "handleDragOver", [action]);
  }
  handleDrop(event) {
    event.preventDefault();
    const {
      column,
      onReorderDrop
    } = this.args;
    const {
      _dragSide
    } = this;
    if (column === undefined || _dragSide === null || typeof onReorderDrop !== 'function') {
      return;
    }
    onReorderDrop(column, _dragSide);
    this._dragSide = null;
    column.table.reorderHoveredColumn = null;
  }
  static {
    n(this.prototype, "handleDrop", [action]);
  }
}
setComponentTemplate(TEMPLATE, HdsAdvancedTableThReorderDropTarget);

export { HdsAdvancedTableThReorderDropTarget as default };
//# sourceMappingURL=th-reorder-drop-target.js.map