@hashicorp/design-system-components/dist/components/hds/advanced-table/th-context-menu.js

Helios Design System Components

import Component from '@glimmer/component';
import { service } from '@ember/service';
import { tracked } from '@glimmer/tracking';
import { scheduleOnce } from '@ember/runloop';
import { modifier } from 'ember-modifier';
import { precompileTemplate } from '@ember/template-compilation';
import { g, i } 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{{#if (gt this._options.length 0)}}\n  <Hds::Dropdown class=\"hds-advanced-table__th-context-menu\" @enableCollisionDetection={{true}} ...attributes as |D|>\n    <D.ToggleIcon\n      @icon=\"more-vertical\"\n      @text=\"Additional actions for {{@column.label}}\"\n      @hasChevron={{false}}\n      @size=\"small\"\n      {{this._registerDropdownToggleElement}}\n    />\n\n    {{#each this._options as |option|}}\n      {{#if (eq option.key \"separator\")}}\n        <D.Separator />\n      {{else if option.action}}\n        <D.Interactive\n          @icon={{option.icon}}\n          data-test-context-option-key={{option.key}}\n          {{on \"click\" (fn option.action D.close)}}\n        >\n          {{option.label}}\n        </D.Interactive>\n      {{/if}}\n    {{/each}}\n  </Hds::Dropdown>\n{{/if}}");

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

class HdsAdvancedTableThContextMenu extends Component {
  static {
    g(this.prototype, "hdsIntl", [service]);
  }
  #hdsIntl = (i(this, "hdsIntl"), void 0);
  static {
    g(this.prototype, "_element", [tracked]);
  }
  #_element = (i(this, "_element"), void 0);
  get _resizeOptions() {
    const {
      column
    } = this.args;
    const translatedResetWidthLabel = this.hdsIntl.t('hds.advanced-table.th-context-menu.reset-width', {
      default: 'Reset column width'
    });
    let resizeOptions = [{
      key: 'reset-column-width',
      label: translatedResetWidthLabel,
      icon: 'rotate-ccw',
      action: this._resetColumnWidth.bind(this)
    }];
    if (!column.isLast) {
      const translatedResizeLabel = this.hdsIntl.t('hds.advanced-table.th-context-menu.resize', {
        default: 'Resize column'
      });
      resizeOptions = [{
        key: 'resize-column',
        label: translatedResizeLabel,
        icon: 'resize-column',
        action: this._resizeColumn.bind(this)
      }, ...resizeOptions];
    }
    return resizeOptions;
  }
  get _reorderOptions() {
    const {
      column
    } = this.args;
    const translatedMoveColumnLabel = this.hdsIntl.t('hds.advanced-table.th-context-menu.move-column', {
      default: 'Move column'
    });
    let reorderOptions = [{
      key: 'reorder-column',
      label: translatedMoveColumnLabel,
      icon: 'move-horizontal',
      action: () => this._moveColumn()
    }];
    if (!column.isFirst) {
      const translatedMoveColumnToStartLabel = this.hdsIntl.t('hds.advanced-table.th-context-menu.move-column-to-start', {
        default: 'Move column to start'
      });
      reorderOptions = [...reorderOptions, {
        key: 'move-column-to-start',
        label: translatedMoveColumnToStartLabel,
        icon: 'start',
        action: close => this._moveColumnToPosition('start', close)
      }];
    }
    if (!column.isLast) {
      const translatedMoveColumnToEndLabel = this.hdsIntl.t('hds.advanced-table.th-context-menu.move-column-to-end', {
        default: 'Move column to end'
      });
      reorderOptions = [...reorderOptions, {
        key: 'move-column-to-end',
        label: translatedMoveColumnToEndLabel,
        icon: 'end',
        action: close => this._moveColumnToPosition('end', close)
      }];
    }
    return reorderOptions;
  }
  get _stickyColumnOptions() {
    const {
      isStickyColumn
    } = this.args;
    const translatedPinLabel = this.hdsIntl.t('hds.advanced-table.th-context-menu.pin', {
      default: 'Pin column'
    });
    const translatedUnpinLabel = this.hdsIntl.t('hds.advanced-table.th-context-menu.unpin', {
      default: 'Unpin column'
    });
    return [{
      key: 'pin-first-column',
      label: isStickyColumn ? translatedUnpinLabel : translatedPinLabel,
      icon: isStickyColumn ? 'pin-off' : 'pin',
      action: this._pinFirstColumn.bind(this)
    }];
  }
  get _options() {
    const {
      column,
      hasReorderableColumns,
      hasResizableColumns,
      isStickyColumn
    } = this.args;
    let allGroups = [];
    if (hasResizableColumns) {
      allGroups = [...allGroups, this._resizeOptions];
    }
    if (hasReorderableColumns && isStickyColumn === undefined) {
      allGroups = [...allGroups, this._reorderOptions];
    }

    // we don't allow pinning/unpinning of the sticky column if columns are reorderable
    if (isStickyColumn !== undefined && column.isFirst && !hasReorderableColumns) {
      allGroups = [...allGroups, this._stickyColumnOptions];
    }
    return allGroups.reduce((options, group, index) => {
      // Add a separator before each group except the first
      if (index > 0) {
        return [...options, {
          key: 'separator'
        }, ...group];
      }
      return [...options, ...group];
    }, []);
  }
  _registerDropdownToggleElement = modifier(element => {
    this.args.column.thContextMenuToggleElement = element;
  });
  _resizeColumn() {
    this.args.resizeHandleElement?.focus();
  }
  _resetColumnWidth(dropdownCloseCallback) {
    const {
      column,
      onColumnResize
    } = this.args;
    column.restoreWidth();
    if (typeof onColumnResize === 'function' && column.key !== undefined) {
      onColumnResize(column.key, column.width);
    }
    dropdownCloseCallback();
  }
  _moveColumn() {
    // eslint-disable-next-line ember/no-runloop
    scheduleOnce('afterRender', this, this.args.column.focusReorderHandle.bind(this));
  }
  _moveColumnToPosition(position, dropdownCloseCallback) {
    const {
      column
    } = this.args;
    column.table.moveColumnToTerminalPosition(column, position);
    requestAnimationFrame(() => {
      dropdownCloseCallback?.();
      column.thContextMenuToggleElement?.focus();
    });
  }
  _pinFirstColumn(dropdownCloseCallback) {
    const {
      onPinFirstColumn
    } = this.args;
    if (typeof onPinFirstColumn === 'function') {
      onPinFirstColumn();
    }
    dropdownCloseCallback();
  }
}
setComponentTemplate(TEMPLATE, HdsAdvancedTableThContextMenu);

export { HdsAdvancedTableThContextMenu as default };
//# sourceMappingURL=th-context-menu.js.map