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

Helios Design System Components

import Component from '@glimmer/component';
import { action } from '@ember/object';
import { modifier } from 'ember-modifier';
import { scheduleOnce } from '@ember/runloop';
import { precompileTemplate } from '@ember/template-compilation';
import { 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{{! template-lint-disable no-unsupported-role-attributes require-presentational-children }}\n<div\n  role=\"button\"\n  draggable=\"true\"\n  class=\"hds-advanced-table__th-reorder-handle\"\n  tabindex=\"0\"\n  aria-description={{hds-t\n    \"hds.components.advanced-table.th-reorder-handle.aria-description\"\n    default=\"Use left and right arrow keys while focused on this button to move the column to a new position.\"\n  }}\n  aria-label={{hds-t\n    \"hds.components.advanced-table.th-reorder-handle.aria-label\"\n    columnLabel=@column.label\n    default=(concat \"Reorder \" @column.label \" column\")\n  }}\n  {{this._registerElement}}\n  {{on \"dragstart\" this.handleDragStart}}\n  {{on \"dragend\" this.handleDragEnd}}\n  {{on \"keydown\" this.handleKeydown}}\n  ...attributes\n>\n  <div class=\"hds-advanced-table__th-reorder-handle__inner\">\n    <Hds::Icon @name=\"move-horizontal\" />\n  </div>\n</div>");

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

function constructDragPreview(width, height) {
  const dragPreviewElement = document.createElement('div');
  dragPreviewElement.className = 'hds-advanced-table__th-reorder-drag-preview';
  dragPreviewElement.style.width = `${width}px`;
  if (height) {
    dragPreviewElement.style.height = `${height}px`;
  }
  document.body.appendChild(dragPreviewElement);
  return dragPreviewElement;
}
class HdsAdvancedTableThReorderHandle extends Component {
  _registerElement = modifier(element => {
    this.args.column.reorderHandleElement = element;
  });
  handleDragStart(event) {
    const {
      column,
      tableHeight,
      onReorderDragStart
    } = this.args;
    const {
      key,
      thElement
    } = column;
    if (key === undefined || thElement === undefined) {
      return;
    }
    column.isBeingDragged = true;
    const thElementWidth = thElement.offsetWidth;
    event.dataTransfer?.setData('text/plain', key);
    if (event.dataTransfer) {
      event.dataTransfer.effectAllowed = 'move';
    }
    const dragPreview = constructDragPreview(thElementWidth, tableHeight);
    document.body.appendChild(dragPreview);

    // set the drag image, center it, and offset it vertically by 10px
    event.dataTransfer?.setDragImage(dragPreview, thElementWidth / 2, 10);
    setTimeout(() => document.body.removeChild(dragPreview), 0);
    onReorderDragStart(column);
  }
  static {
    n(this.prototype, "handleDragStart", [action]);
  }
  handleDragEnd() {
    const {
      column,
      onReorderDragEnd
    } = this.args;
    column.isBeingDragged = false;
    if (typeof onReorderDragEnd === 'function') {
      onReorderDragEnd();
    }
  }
  static {
    n(this.prototype, "handleDragEnd", [action]);
  }
  handleKeydown(event) {
    switch (event.key) {
      case 'ArrowLeft':
      case 'ArrowRight':
        {
          event.preventDefault();
          const {
            column
          } = this.args;
          const direction = event.key === 'ArrowLeft' ? -1 : 1;
          column.table.stepColumn(column, direction);

          // we need to wait for the next run loop to ensure that the element has been registered with the column after moving
          // eslint-disable-next-line ember/no-runloop
          scheduleOnce('afterRender', this, this.args.column.focusReorderHandle.bind(this));
          break;
        }
      case ' ':
        {
          event.preventDefault();
          break;
        }
    }
  }
  static {
    n(this.prototype, "handleKeydown", [action]);
  }
}
setComponentTemplate(TEMPLATE, HdsAdvancedTableThReorderHandle);

export { HdsAdvancedTableThReorderHandle as default };
//# sourceMappingURL=th-reorder-handle.js.map