@jetbrains/ring-ui 5.1.23 → 5.1.25

package/components/table-legacy-ng/table-legacy-ng.test.js

@@ -0,0 +1,296 @@
+/* eslint-disable no-magic-numbers */
+import 'angular';
+import 'angular-mocks';
+import './table-legacy-ng';
+import TableSelection from './table-legacy-ng__selection';
+import SelectionNavigateActions from './table-legacy-ng__selection-navigate-actions';
+
+describe('Table Legacy Ng', () => {
+  let scope;
+  let directiveController;
+  let element;
+  let $compile;
+  const fakeData = {
+    items: [],
+    loadMore() {}
+  };
+
+  beforeEach(() => {
+    //Restoring items before each test to prevent side effects
+    fakeData.items = [
+      {id: 1, name: 'test1'},
+      {id: 2, name: 'test2'},
+      {id: 3, name: 'test3'},
+      {id: 4, name: 'test4'}
+    ];
+  });
+
+  beforeEach(window.module('Ring.table-legacy'));
+
+  /* global inject */
+  beforeEach(inject(($rootScope, _$compile_) => {
+    scope = $rootScope.$new();
+    $compile = _$compile_;
+
+    scope.data = fakeData;
+
+    element = $compile(
+      '<rg-legacy-table items="data.items">' +
+        '<rg-legacy-table-header></rg-legacy-table-header>' +
+        '<rg-legacy-table-row row-item="item" ng-repeat="item in data.items">' +
+          '<div class="ring-table__column">{{item.id}}</div>' +
+        '</rg-legacy-table-row>' +
+      '</rg-legacy-table>'
+    )(scope);
+
+    scope.$digest();
+    directiveController = element.controller('rgLegacyTable');
+  }));
+
+  describe('DOM', () => {
+    it('Should place table inside', () => {
+      element[0].should.contain('table');
+    });
+
+    it('Should place all items inside table', () => {
+      const rows = element[0].querySelectorAll('.ring-table__row');
+      rows.should.have.length(fakeData.items.length);
+    });
+
+    it('Should set correct unlimited columns width', () => {
+      element = $compile(
+        '<rg-legacy-table items="data.items">' +
+        '<rg-legacy-table-header></rg-legacy-table-header>' +
+        '<rg-legacy-table-row row-item="item" ng-repeat="item in data.items">' +
+          '<rg-legacy-table-column unlimited>{{item.id}}</rg-legacy-table-column>' +
+          '<rg-legacy-table-column unlimited>{{item.name}}</rg-legacy-table-column>' +
+          '<rg-legacy-table-column unlimited>{{item.name}}</rg-legacy-table-column>' +
+        '</rg-legacy-table-row>' +
+        '</rg-legacy-table>'
+      )(scope);
+      scope.$digest();
+
+      const columns = element[0].querySelector('.ring-table__row').querySelectorAll('.ring-table__column');
+      columns[0].style.should.have.property('width', '33%');
+      columns[1].style.should.have.property('width', '33%');
+    });
+  });
+
+  describe('Selection', () => {
+    let selection;
+    const fakeEvent = {};
+
+    beforeEach(() => {
+      fakeEvent.emitEvent = sandbox.stub();
+      selection = new TableSelection(fakeData.items, fakeEvent.emitEvent.bind(fakeEvent));
+    });
+
+    it('Should receive items and store it inside instance', () => {
+      selection.items.should.equal(fakeData.items);
+    });
+
+    describe('Activation, deactivation, etc', () => {
+      it('Should mark item as active on activateItem', () => {
+        selection.activateItem(fakeData.items[1]);
+        selection.getActiveItem().should.equal(fakeData.items[1]);
+      });
+
+      it('Should return active item from getActiveItem', () => {
+        selection.activateItem(fakeData.items[2]);
+        fakeData.items[2].active.should.be.true;
+      });
+
+      it('Should clear other active item on activateItem', () => {
+        selection.activateItem(fakeData.items[2]);
+        fakeData.items[2].active.should.be.true;
+      });
+
+      it('Should unmark item as active on next item activation', () => {
+        selection.activateItem(fakeData.items[2]);
+        selection.activateItem(fakeData.items[3]);
+        fakeData.items[2].active.should.be.false;
+        fakeData.items[3].active.should.be.true;
+      });
+
+      it('Should move selection down on activateNextItem', () => {
+        selection.activateItem(fakeData.items[2]);
+        selection.activateNextItem();
+        fakeData.items[3].active.should.be.true;
+      });
+
+      it('Should move selection up on activatePreviousItem', () => {
+        selection.activateItem(fakeData.items[2]);
+        selection.activatePreviousItem();
+        fakeData.items[1].active.should.be.true;
+      });
+
+      it('Should deactivate active item if first is active and then moving up', () => {
+        selection.activateItem(fakeData.items[0]);
+        selection.activatePreviousItem();
+        should.not.exist(selection.getActiveItem());
+      });
+
+      it('Should trigger rgLegacyTable:activateItem event on activation', () => {
+        selection.activateItem(fakeData.items[0]);
+        fakeEvent.emitEvent.should.
+          have.been.calledWith('rgLegacyTable:activateItem', fakeData.items[0]);
+      });
+
+      it('Should trigger rgLegacyTable:activateItem with empty item on clearActivity', () => {
+        selection.clearActivity();
+        fakeEvent.emitEvent.should.have.been.calledWith('rgLegacyTable:activateItem', null);
+      });
+    });
+
+    describe('Checking', () => {
+      it('Should check item', () => {
+        selection.checkItem(fakeData.items[2]);
+        fakeData.items[2].checked.should.be.true;
+      });
+
+      it('Should uncheck item', () => {
+        fakeData.items[2].checked = true;
+        selection.uncheckItem(fakeData.items[2]);
+        fakeData.items[2].checked.should.be.false;
+      });
+
+      it('Should toggle checking', () => {
+        fakeData.items[2].checked = true;
+        selection.toggleCheck(fakeData.items[2]);
+        fakeData.items[2].checked.should.be.false;
+      });
+
+      it('Should return all checked items', () => {
+        fakeData.items[1].checked = true;
+        fakeData.items[3].checked = true;
+        const checkedItems = selection.getCheckedItems();
+
+        checkedItems.length.should.equal(2);
+        checkedItems[0].should.equal(fakeData.items[1]);
+        checkedItems[1].should.equal(fakeData.items[3]);
+      });
+
+      it('Should trigger rgLegacyTable:selectionChanged event on checking', () => {
+        selection.checkItem(fakeData.items[2]);
+        fakeEvent.emitEvent.should.have.been.calledWith('rgLegacyTable:selectionChanged');
+      });
+
+      it('Should trigger rgLegacyTable:selectionChanged event on unchecking', () => {
+        selection.uncheckItem(fakeData.items[2]);
+        fakeEvent.emitEvent.should.have.been.calledWith('rgLegacyTable:selectionChanged');
+      });
+    });
+
+    describe('Table row', () => {
+      it('Should activate item on clicking row', () => {
+        element[0].querySelector('.ring-table__row:nth-child(4)').dispatchEvent(new CustomEvent('click'));
+        scope.$digest();
+
+        directiveController.selection.getActiveItem().should.equal(fakeData.items[2]);
+      });
+    });
+
+    describe('Default table navigation actions', () => {
+      let navigateActions;
+      beforeEach(() => {
+        navigateActions = new SelectionNavigateActions();
+      });
+
+      it('should export interface', () => {
+        navigateActions.setSelection.should.exist;
+        navigateActions.moveUp.should.exist;
+        navigateActions.moveDown.should.exist;
+        navigateActions.reset.should.exist;
+        navigateActions.selectUp.should.exist;
+        navigateActions.selectDown.should.exist;
+        navigateActions.selectCurrent.should.exist;
+        navigateActions.clearSelection.should.exist;
+      });
+
+      it('should do nothing if selection is not put', () => {
+        navigateActions.moveUp().should.be.false;
+        navigateActions.moveDown().should.be.false;
+        navigateActions.reset().should.be.false;
+        navigateActions.selectUp().should.be.false;
+        navigateActions.selectDown().should.be.false;
+        navigateActions.selectCurrent().should.be.false;
+        navigateActions.clearSelection().should.be.false;
+      });
+
+      describe('Default table navigation actions\' methods', () => {
+        beforeEach(() => {
+          navigateActions.setSelection(selection);
+        });
+
+        it('should select next item', () => {
+          navigateActions.setSelection(selection);
+          selection.activateItem(fakeData.items[1]);
+
+          navigateActions.moveDown();
+          selection.getActiveItemIndex().should.equals(2);
+        });
+
+        it('should select prev item', () => {
+          navigateActions.setSelection(selection);
+          selection.activateItem(fakeData.items[1]);
+
+          navigateActions.moveUp();
+          selection.getActiveItemIndex().should.equals(0);
+        });
+
+        it('should clear selection', () => {
+          navigateActions.setSelection(selection);
+          selection.activateItem(fakeData.items[1]);
+          selection.checkItem(fakeData.items[1]);
+
+          navigateActions.clearSelection();
+          selection.getCheckedItems().length.should.equals(0);
+        });
+
+        it('should select current', () => {
+          navigateActions.setSelection(selection);
+          selection.activateItem(fakeData.items[1]);
+
+          navigateActions.selectCurrent();
+          const result = selection.getCheckedItems();
+          result.length.should.equals(1);
+          result[0].should.equals(fakeData.items[1]);
+        });
+
+        it('should select up', () => {
+          navigateActions.setSelection(selection);
+          selection.activateItem(fakeData.items[2]);
+          selection.checkItem(fakeData.items[2]);
+
+          navigateActions.selectUp();
+          selection.getCheckedItems().length.should.equals(0);
+          selection.getActiveItemIndex().should.equals(1);
+        });
+
+        it('should select down', () => {
+          navigateActions.setSelection(selection);
+          selection.activateItem(fakeData.items[2]);
+
+          navigateActions.selectDown();
+          const result = selection.getCheckedItems();
+          result.length.should.equals(1);
+          result[0].should.equals(fakeData.items[2]);
+          selection.getActiveItemIndex().should.equals(3);
+        });
+
+        it('should select down multiple times', () => {
+          navigateActions.setSelection(selection);
+          selection.activateItem(fakeData.items[1]);
+
+          navigateActions.selectDown();
+          navigateActions.selectDown();
+          const result = selection.getCheckedItems();
+          result.length.should.equals(2);
+          result[0].should.equals(fakeData.items[1]);
+          result[1].should.equals(fakeData.items[2]);
+          selection.getActiveItemIndex().should.equals(3);
+        });
+      });
+    });
+  });
+});

package/components/table-legacy-ng/table-legacy-ng__pager.js

@@ -0,0 +1,32 @@
+import angular from 'angular';
+
+import Pager from '../pager-ng/pager-ng';
+import MessageBundle from '../message-bundle-ng/message-bundle-ng';
+
+const angularModule = angular.module('Ring.table-legacy.pager', [MessageBundle, Pager]);
+angularModule.directive('rgLegacyTablePager', function rgLegacyTablePagerDirective() {
+  return {
+    restrict: 'E',
+    template: `<rg-pager
+  total="pagerCtrl.total"
+  current-page="pagerCtrl.getPage()"
+  page-size="pagerCtrl.top"
+  on-page-change="pagerCtrl.onPageChange"
+  disable-page-size-selector="true"
+></rg-pager>`,
+    scope: {},
+    bindToController: {
+      skip: '=',
+      top: '=',
+      total: '=',
+      onPageChange: '&'
+    },
+
+    controllerAs: 'pagerCtrl',
+    controller: function controller() {
+      this.getPage = () => this.top / this.skip;
+    }
+  };
+});
+
+export default angularModule.name;

package/components/table-legacy-ng/table-legacy-ng__selection-navigate-actions.js

@@ -0,0 +1,105 @@
+/**
+ * Class with default hotkey actions (e.g. select, clear selection, move up/down)
+ * @param {Selection?} tableSelection selection associated with rg-table
+ * (if tableSelection is not defined, use method setSelection to configure instance)
+ */
+export default class SelectionNavigateActions {
+  constructor(tableSelection) {
+    this._selection = tableSelection;
+    this._addSelectionMode = null;
+  }
+
+  setSelection(tableSelection) {
+    this._selection = tableSelection;
+  }
+
+  moveUp() {
+    if (!this._selection) {
+      return false;
+    }
+    const activeItem = this._selection.activatePreviousItem();
+
+    if (activeItem && activeItem.unselectable) {
+      return this.moveUp();
+    }
+
+    return !activeItem;
+  }
+
+  moveDown() {
+    if (this._selection) {
+      const activeItem = this._selection.activateNextItem();
+      if (!activeItem) {
+        this._selection.setActiveItemIndex(0);
+      } else if (activeItem.unselectable) {
+        return this.moveDown();
+      }
+    }
+    return false;
+  }
+
+  reset() {
+    this._addSelectionMode = null;
+    return !!this._selection;
+  }
+
+  selectUp() {
+    if (!this._selection) {
+      return false;
+    }
+    this._changeCheckedItemsArray();
+    return this.moveUp();
+  }
+
+  selectDown() {
+    if (!this._selection) {
+      return false;
+    }
+    this._changeCheckedItemsArray();
+    return this.moveDown();
+  }
+
+  selectCurrent() {
+    if (!this._selection) {
+      return false;
+    }
+    const activeItem = this._selection.getActiveItem();
+    if (!activeItem) {
+      return true;
+    } else {
+      this._selection.toggleCheck(activeItem);
+      return false;
+    }
+  }
+
+  clearSelection() {
+    if (!this._selection) {
+      return false;
+    }
+    const activeItem = this._selection.getActiveItem();
+
+    if (activeItem) {
+      if (this._selection.getCheckedItems().length > 0) {
+        this._selection.clearSelection();
+        return false;
+      }
+
+      this._selection.clearActivity();
+    }
+
+    return true;
+  }
+
+  _changeCheckedItemsArray() {
+    if (!this._selection) {
+      return false;
+    }
+    const activeItem = this._selection.getActiveItem();
+    if (activeItem && !this._addSelectionMode) {
+      this._addSelectionMode = activeItem.checked ? 'uncheckItem' : 'checkItem';
+    }
+    this._selection[this._addSelectionMode](activeItem);
+
+    return undefined;
+  }
+}

package/components/table-legacy-ng/table-legacy-ng__selection.js

@@ -0,0 +1,165 @@
+/**
+ * Selection class, catches all selection and activation operations and triggers events
+ */
+export default class Selection {
+  suggestedItem = null;
+
+  constructor(items, emitEvent, singleActiveElementAsSelection = true) {
+    this.items = items;
+    this.emitEvent = emitEvent;
+    this.singleActiveElementAsSelection = singleActiveElementAsSelection;
+  }
+
+  setItems(items) {
+    this.items = items;
+    this.suggestedItem = null;
+    this.emitEvent('rgLegacyTable:itemsChanged', items);
+  }
+
+  activateItem(item) {
+    if (item && !item.unselectable) {
+      this.clearActivity();
+      item.active = true;
+      this.emitEvent('rgLegacyTable:activateItem', item, this.items.indexOf(item));
+    }
+  }
+
+  getActiveItem() {
+    if (!this.items) {
+      return undefined;
+    }
+
+    return this.items.find(item => item.active);
+  }
+
+  getActiveItemIndex() {
+    return this.items.indexOf(this.getActiveItem());
+  }
+
+  setActiveItemIndex(index) {
+    const item = this.items[index];
+    this.activateItem(item);
+  }
+
+  findNextActiveItem(startIndex, direction) {
+    const maxIndex = this.items.length - 1;
+
+    if (direction) {
+      for (let i = startIndex + 1; i <= maxIndex; i++) {
+        if (!this.items[i].unselectable) {
+          return this.items[i];
+        }
+      }
+    } else {
+      for (let i = startIndex - 1; i >= 0; i--) {
+        if (!this.items[i].unselectable) {
+          return this.items[i];
+        }
+      }
+    }
+
+    return undefined;
+  }
+
+  activateNextItem() {
+    const activeItemIndex = this.items.indexOf(this.getActiveItem());
+    if (activeItemIndex === -1 && this.suggestedItem) {
+      this.activateItem(this.suggestedItem);
+      return this.suggestedItem;
+    } else if (activeItemIndex >= 0 && activeItemIndex < this.items.length - 1) {
+      const newActiveItem = this.findNextActiveItem(activeItemIndex, 1);
+      this.activateItem(newActiveItem);
+      return newActiveItem;
+    } else {
+      this.clearActivity();
+      return undefined;
+    }
+  }
+
+  activatePreviousItem() {
+    const activeItemIndex = this.items.indexOf(this.getActiveItem());
+    if (activeItemIndex === -1 && this.suggestedItem) {
+      this.activateItem(this.suggestedItem);
+      return this.suggestedItem;
+    } else if (activeItemIndex > 0 && activeItemIndex <= this.items.length - 1) {
+      const newActiveItem = this.findNextActiveItem(activeItemIndex, 0);
+      this.activateItem(newActiveItem);
+      return newActiveItem;
+    } else {
+      this.clearActivity();
+      return undefined;
+    }
+  }
+
+  clearSelection() {
+    this.clearCheckedItems();
+    if (this.singleActiveElementAsSelection) {
+      this.clearActivity();
+    }
+  }
+
+  clearCheckedItems() {
+    this.items.forEach(item => {
+      item.checked = false;
+    });
+  }
+
+  clearActivity() {
+    const activeItem = this.getActiveItem();
+    if (activeItem) {
+      activeItem.active = false;
+    }
+    this.emitEvent('rgLegacyTable:activateItem', null);
+  }
+
+  checkItem(item) {
+    if (item && !item.uncheckable && !item.unselectable) {
+      item.checked = true;
+      this.triggerSelectionChanged(item);
+    }
+  }
+
+  uncheckItem(item) {
+    if (item) {
+      item.checked = false;
+      this.triggerSelectionChanged(item);
+    }
+  }
+
+  toggleCheck(item) {
+    if (item && !item.uncheckable && !item.unselectable) {
+      item.checked = !item.checked;
+      this.triggerSelectionChanged(item);
+    }
+  }
+
+  triggerSelectionChanged(item) {
+    this.emitEvent('rgLegacyTable:selectionChanged', item);
+  }
+
+  getCheckedItems() {
+    if (!this.items) {
+      return [];
+    }
+
+    return this.items.filter(item => item.checked);
+  }
+
+  getSelectedItems() {
+    const checked = this.getCheckedItems();
+    if (!checked.length) {
+      const active = this.getActiveItem();
+      if (active && this.singleActiveElementAsSelection) {
+        return [active];
+      } else {
+        return [];
+      }
+    } else {
+      return checked;
+    }
+  }
+
+  setSuggestedItem(item) {
+    this.suggestedItem = item;
+  }
+}

package/components/table-legacy-ng/table-legacy-ng__toolbar.js

@@ -0,0 +1,58 @@
+import angular from 'angular';
+
+import {getDocumentScrollTop} from '../global/dom';
+import '../table-legacy/table-legacy__toolbar.css';
+import scheduleRAF from '../global/schedule-raf';
+
+const angularModule = angular.module('Ring.table-legacy.toolbar', []);
+angularModule.directive('rgLegacyTableToolbar', function rgLegacyTableToolbarDirective() {
+  const scheduleScrollListener = scheduleRAF();
+
+  return {
+    restrict: 'E',
+    replace: true,
+    transclude: true,
+    template: '<div class="ring-table__toolbar"><div class="ring-table__toolbar-controls ring-popup-container-mark" ng-transclude></div></div>',
+    scope: {
+      toolbarIsReady: '=?'
+    },
+    link: function link(scope, iElement, attrs) {
+      /**
+       * Use plain DOM functions without any jquery. Should work with IE8+
+       */
+      const element = iElement[0];
+      const controlsContainer = element.querySelector('.ring-table__toolbar-controls');
+      let savedToolbarTop;
+
+      const toolbarScrollListener = () => scheduleScrollListener(() => {
+        const scrolledTop = getDocumentScrollTop();
+        const elementTop = element.getBoundingClientRect().top + scrolledTop;
+        const toolbarTop = savedToolbarTop || elementTop;
+
+        if (scrolledTop > toolbarTop && !savedToolbarTop) {
+          //save height to style to prevent collapsing after fixing controls
+          element.style.height = `${element.offsetHeight}px`;
+          savedToolbarTop = toolbarTop;
+          controlsContainer.classList.add('ring-table__toolbar-controls_fixed');
+        } else if (scrolledTop <= toolbarTop && savedToolbarTop >= 0) {
+          savedToolbarTop = null;
+          element.style.height = null;
+          controlsContainer.classList.remove('ring-table__toolbar-controls_fixed');
+        }
+      });
+
+      //Stick toolbar if sticking is enabled
+      if (attrs.stick !== undefined) {
+        window.addEventListener('scroll', toolbarScrollListener);
+
+        scope.$on('$destroy', () => {
+          window.removeEventListener('scroll', toolbarScrollListener);
+        });
+      }
+
+      scope.toolbarIsReady = true;
+    }
+  };
+});
+
+export default angularModule.name;

package/components/table-ng/smart-table-ng.js

@@ -0,0 +1,7 @@
+/**
+ * @name SmartTable Ng
+ */
+import angularComponentFactory from '../global/angular-component-factory';
+import SmartTable from '../table/smart-table';
+
+export default angularComponentFactory(SmartTable, 'SmartTable').name;

package/components/table-ng/table-ng.js

@@ -0,0 +1,7 @@
+/**
+ * @name Table Ng
+ */
+import angularComponentFactory from '../global/angular-component-factory';
+import Table from '../table/table';
+
+export default angularComponentFactory(Table, 'Table').name;