@jetbrains/ring-ui 5.1.22 → 6.0.1

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

@@ -1,296 +0,0 @@
-/* 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

@@ -1,32 +0,0 @@
-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

@@ -1,105 +0,0 @@
-/**
- * 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

@@ -1,165 +0,0 @@
-/**
- * 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

@@ -1,58 +0,0 @@
-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

@@ -1,7 +0,0 @@
-/**
- * @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

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