@jetbrains/ring-ui 5.1.22 → 6.0.1

package/components/sidebar-ng/sidebar-ng__template.js

@@ -1,10 +0,0 @@
-export default `<div
-  class="ring-sidebar"
-  rg-place-under="{{sidebar.placeUnderSibling}}"
-  place-top-offset="{{sidebar.topOffset}}"
-  sync-height="true"
-  ng-class="{'ring-sidebar_active': sidebar.show}"
->
-  <rg-dialog in-sidebar="true" active="sidebar.dialogIsActive"></rg-dialog>
-  <div class="ring-sidebar__content" ng-transclude ng-if="!sidebar.dialogIsActive"></div>
-</div>`;

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

@@ -1,433 +0,0 @@
-import angular from 'angular';
-
-import debounce from 'just-debounce-it';
-
-import {getRect, getStyles, getWindowHeight} from '../global/dom';
-import PlaceUnder from '../place-under-ng/place-under-ng';
-import Checkbox from '../checkbox-ng/checkbox-ng';
-
-import Selection from './table-legacy-ng__selection';
-import SelectionNavigateActions from './table-legacy-ng__selection-navigate-actions';
-import TableToolbar from './table-legacy-ng__toolbar';
-import TablePager from './table-legacy-ng__pager';
-
-import '../table-legacy/table-legacy.css';
-
-/**
- * @name Table Legacy Ng
- */
-
-const angularModule = angular.module(
-  'Ring.table-legacy',
-  [TableToolbar, TablePager, Checkbox, PlaceUnder]
-);
-
-angularModule.directive('rgLegacyTable', function rgLegacyTableDirective() {
-  return {
-    restrict: 'E',
-    transclude: true,
-    template: '<div><table class="ring-table" ng-transclude></table></div>',
-    controllerAs: 'ctrl',
-
-    /**
-     * {{
-     *   items: array, items of table
-     *   selection: {Selection}?, a selection object link can be provided to use it outside the table
-     * }}
-     */
-    scope: {
-      items: '=',
-      selection: '=?',
-      disableSelection: '@'
-    },
-
-    bindToController: true,
-
-    controller: function controller($scope) {
-      this.$onInit = () => {
-        if (this.disableSelection) {
-          return;
-        }
-
-        /**
-         * Create Selection instance first to make sure it is always available
-         * @type {Selection}
-         */
-        this.selection = new Selection(this.items, (name, item, index) => {
-          $scope.$emit(name, item, index);
-          $scope.$broadcast(name, item, index);
-        });
-
-        /**
-         * Updating items when data is initiated or updated
-         */
-        $scope.$watch(() => this.items, newItems => {
-          if (newItems) {
-            this.selection.setItems(newItems);
-          }
-        });
-      };
-    }
-  };
-});
-
-angularModule.directive('rgLegacyTableHeader',
-  function rgLegacyTableHeaderDirective(getClosestElementWithCommonParent) {
-    const HEADER_RESIZE_DEBOUNCE = 50;
-    const HEADER_SCROLL_DEBOUNCE = 10;
-    const TOOLBAR_FIXED_CLASSNAME = 'ring-table__toolbar-controls_fixed';
-
-    return {
-      restrict: 'E',
-      template: `<thead>
-  <tr class="ring-table__header" ng-transclude></tr>
-  <tr class="ring-table__header ring-table__header_sticky" rg-place-under="{{stickToSelector}}" ng-transclude></tr>
-</thead>`,
-      transclude: true,
-      replace: true,
-      link: function link(scope, iElement, iAttrs) {
-        const element = iElement[0];
-        let stickToElement = null;
-
-        scope.stickToSelector = iAttrs.stickTo;
-
-        //Shortcut for placing under table toolbar
-        if (iAttrs.stickToToolbar !== undefined) {
-          scope.stickToSelector = '.ring-table__toolbar';
-        }
-
-        const scrollableHeader = element.querySelector('.ring-table__header:not(.ring-table__header_sticky)');
-        const fixedHeader = element.querySelector('.ring-table__header_sticky');
-
-        const toolbarFixed = () => stickToElement.querySelector(`.${TOOLBAR_FIXED_CLASSNAME}`) !== null;
-
-        /**
-         * Sync header columns width with real table
-         */
-        const resizeFixedHeader = debounce(() => {
-          fixedHeader.style.width = `${scrollableHeader.offsetWidth}px`;
-          const titles = Array.from(fixedHeader.querySelectorAll('.ring-table__title'));
-
-          titles.forEach((titleElement, index) => {
-            const targetHeaderTitle = scrollableHeader.
-              querySelectorAll('.ring-table__title')[index];
-            titleElement.style.width = getStyles(targetHeaderTitle).width;
-          });
-
-        }, HEADER_RESIZE_DEBOUNCE, true);
-
-        /**
-         * Toggle headers on scroll. Also resize header columns with some big interval
-         */
-        const scrollListener = debounce(() => {
-          if (toolbarFixed()) {
-            fixedHeader.style.display = 'block';
-            scrollableHeader.style.visibility = 'hidden';
-          } else {
-            fixedHeader.style.display = 'none';
-            scrollableHeader.style.visibility = 'visible';
-          }
-
-          resizeFixedHeader();
-        }, HEADER_SCROLL_DEBOUNCE);
-
-        function startSticking() {
-          scope.$evalAsync(() => {
-            window.addEventListener('resize', resizeFixedHeader);
-            window.addEventListener('scroll', scrollListener);
-            scope.$on('rgLegacyTable:itemsChanged', scrollListener);
-          });
-        }
-
-        if (scope.stickToSelector) {
-          stickToElement = getClosestElementWithCommonParent(element, scope.stickToSelector);
-          startSticking();
-        }
-      }
-    };
-  }
-);
-
-angularModule.directive('rgLegacyTableBody', function rgLegacyTableBodyDirective() {
-  return {
-    restrict: 'E',
-    template: '<tbody ng-transclude></tbody>',
-    transclude: true,
-    replace: true
-  };
-});
-
-angularModule.directive('rgLegacyTableRow', function rgLegacyTableRowDirective() {
-  return {
-    template: `<tr ng-click="rowCtrl.setActiveItem(rowCtrl.rowItem)"
-  ng-mouseover="rowCtrl.onMouseOver(rowCtrl.rowItem)"
-  ng-mouseout="rowCtrl.onMouseOut(rowCtrl.rowItem)"
-  class="ring-table__row" ng-class="{
-    'ring-table__row_active': rowCtrl.rowItem.active,
-    'ring-table__row_checked': rowCtrl.rowItem.checked,
-    'ring-table__row_active-checked': rowCtrl.rowItem.active && !rowCtrl.hasCheckedItems(),
-    'ring-table__row_implicit': rowCtrl.rowItem.implicit,
-    'ring-table__row_expanded': rowCtrl.rowItem.expanded,
-    'ring-table__row_unselectable': rowCtrl.rowItem.unselectable
-    }" ng-transclude>
-</tr>`,
-    restrict: 'E',
-    transclude: true,
-    replace: true,
-    require: ['^rgLegacyTable', 'rgLegacyTableRow'],
-
-    scope: {
-      rowItem: '='
-    },
-
-    link: function link(scope, iElement, iAttrs, ctrls) {
-      const rgLegacyTableCtrl = ctrls[0];
-      const rgLegacyTableRowCtrl = ctrls[1];
-      rgLegacyTableRowCtrl.setSelection(rgLegacyTableCtrl.selection);
-    },
-
-    controllerAs: 'rowCtrl',
-    bindToController: true,
-
-    controller: function controller($scope, $element) {
-      const element = $element[0];
-
-      let watchRowCheckFlag;
-      this.setSelection = selection => {
-        if (!selection) {
-          return;
-        }
-
-        this.selection = selection;
-
-        if (!watchRowCheckFlag) {
-          watchRowCheckFlag = $scope.$watch('rowCtrl.rowItem.checked', newValue => {
-            if (newValue !== undefined) {
-              this.selection.triggerSelectionChanged(this.rowItem);
-            }
-          });
-        }
-      };
-
-      this.setActiveItem = item => {
-        item && !item.unselectable && this.selection && this.selection.activateItem(item);
-      };
-
-      this.onMouseOver = item => {
-        item && !item.unselectable && this.selection && this.selection.setSuggestedItem(item);
-      };
-
-      this.onMouseOut = item => {
-        item &&
-        this.selection &&
-        item === this.selection.suggestedItem && this.selection.setSuggestedItem(null);
-      };
-
-      this.hasCheckedItems = () => {
-        if (!this.selection) {
-          return false;
-        }
-        //TODO: cache this operation if there are performance issues
-        const checkedItems = this.selection.getCheckedItems();
-        return checkedItems && checkedItems.length > 0;
-      };
-
-      function getRowOutOfViewInfo(el, offsetInRows) {
-        const rect = getRect(el);
-        const offset = rect.height * offsetInRows;
-
-        const isGoneUp = rect.top < offset;
-        const isGoneDown = rect.bottom > (getWindowHeight() - offset);
-
-        return {
-          offset,
-          isOutOfView: isGoneDown || isGoneUp,
-          isGoneUp,
-          isGoneDown
-        };
-      }
-
-      function addSpacingAfterScroll(offset) {
-        if (window.scrollY) {
-          window.scrollBy(0, offset);
-        }
-      }
-
-      $scope.$on('rgLegacyTable:activateItem', (e, item) => {
-        if (item === this.rowItem) {
-          const scrollInfo = getRowOutOfViewInfo(element, 2);
-          if (scrollInfo.isOutOfView) {
-            element.scrollIntoView(scrollInfo.isGoneUp);
-            addSpacingAfterScroll(scrollInfo.isGoneDown ? scrollInfo.offset : -scrollInfo.offset);
-          }
-        }
-      });
-    }
-  };
-});
-
-angularModule.
-  directive('rgLegacyTableHeaderCheckbox', function rgLegacyTableHeaderCheckboxDirective() {
-    return {
-      restrict: 'E',
-      require: '^rgLegacyTable',
-      replace: true,
-      template: '<span class="ring-table__header-checkbox"><rg-checkbox ng-click="onClickChange()" ng-model="allChecked"/></span>',
-
-      link: function link(scope, iElement, iAttrs, tableCtrl) {
-        // TODO: reduce number of recheckSelection() calls
-        scope.allChecked = false;
-
-        function recheckSelection() {
-          if (tableCtrl.items && tableCtrl.items.length) {
-            scope.allChecked = tableCtrl.items.every(item => item.checked);
-          } else {
-            scope.allChecked = false;
-          }
-        }
-
-        function markAllItemsAs(state) {
-          tableCtrl.items.forEach(item => {
-            item.checked = state;
-          });
-        }
-
-        scope.$on('rgLegacyTable:itemsChanged', () => {
-          if (scope.allChecked) {
-            markAllItemsAs(true);
-          }
-          recheckSelection();
-        });
-        scope.$on('rgLegacyTable:selectionChanged', recheckSelection);
-
-        scope.onClickChange = () => {
-          markAllItemsAs(scope.allChecked);
-        };
-      }
-    };
-  });
-
-/**
- * A checkbox cell for table. Uses rg-table-row parent directive as model host
- */
-angularModule.directive('rgLegacyTableCheckboxCell', function rgLegacyTableCheckboxCellDirective() {
-  return {
-    restrict: 'E',
-    transclude: true,
-    require: '^rgLegacyTableRow',
-    replace: true,
-    template: `
-<td class="ring-table__selector ring-table__column_selector" ng-class="{\'ring-table__column\': !isEmbedded}">
-  <rg-checkbox ng-model="getRowItem().checked" title="{{getTitle()}}" aria-label="{{geAriaLabel()}}"/>
-</td>
-    `.trim(),
-
-    link: function link(scope, iElement, iAttrs, rowCtrl) {
-      /**
-       * rowItem getter to use it as ng-model for checkbox
-       */
-      scope.getRowItem = () => rowCtrl.rowItem;
-      scope.getTitle = () => iAttrs.title || rowCtrl.rowItem.name;
-      scope.geAriaLabel = () => iAttrs.ariaLabel;
-      scope.isEmbedded = angular.isDefined(iAttrs.embedded);
-    }
-  };
-});
-
-/**
- * Table title wrapper, receive next attributes:
- * {{
-    border: whether or not title contain right border
-    active: makes title more bolder
-  }}
- */
-angularModule.directive('rgLegacyTableTitle', function rgLegacyTableTitleDirective() {
-  return {
-    restrict: 'E',
-    transclude: true,
-    replace: true,
-    scope: true,
-    template: `<th class="ring-table__title"
-    ng-class="{
-    'ring-table__title_border': isBorder,
-    'ring-table__title_active': isActive,
-    'ring-table__column_snuggle-right': isPullRight,
-    'ring-table__column_snuggle-left': isPullLeft,
-    'ring-table__column_align-right' : isAlignRight
-    }" ng-transclude>
-</th>`,
-
-    link: function link(scope, iElement, iAttrs) {
-      /**
-       * One time property assigning without watching through isolated scope helps to improve performance
-       */
-      scope.isBorder = angular.isDefined(iAttrs.border);
-      scope.isActive = angular.isDefined(iAttrs.active);
-      scope.isPullRight = angular.isDefined(iAttrs.pullRight);
-      scope.isAlignRight = angular.isDefined(iAttrs.alignRight);
-      scope.isPullLeft = angular.isDefined(iAttrs.pullLeft);
-    }
-  };
-});
-
-/**
- * Column wrapper, receive next attributes:
- * {{
-    limited: is column width should be limited,
-    wide: for wide columns
-    avatar: for columns contains avatar
-  }}
- */
-angularModule.directive('rgLegacyTableColumn', function rgLegacyTableColumnDirective() {
-  return {
-    restrict: 'E',
-    transclude: true,
-    replace: true,
-    scope: true,
-    template: `<td class="ring-table__column"
-    ng-class="{
-    'ring-table__column_limited': isLimited,
-    'ring-table__column_unlimited': isUnlimited,
-    'ring-table__column_right': isAlignRight,
-    'ring-table__avatar': isAvatar,
-    'ring-table__column_wide': isWide,
-    'ring-table__column_gray': isGray,
-    'ring-table__column_snuggle-right': isPullRight,
-    'ring-table__column_snuggle-left': isPullLeft
-    }" ng-transclude>
-</td>`,
-
-    link: function link(scope, iElement, iAttrs) {
-      const element = iElement[0];
-      const FULL_WIDTH = 100;
-
-      scope.isLimited = angular.isDefined(iAttrs.limited);
-      scope.isUnlimited = angular.isDefined(iAttrs.unlimited);
-      scope.isAvatar = angular.isDefined(iAttrs.avatar);
-      scope.isWide = angular.isDefined(iAttrs.wide);
-      scope.isAlignRight = angular.isDefined(iAttrs.alignRight);
-      scope.isGray = angular.isDefined(iAttrs.gray);
-      scope.isPullRight = angular.isDefined(iAttrs.pullRight);
-      scope.isPullLeft = angular.isDefined(iAttrs.pullLeft);
-
-      function adjustUnlimitedColumnWidths() {
-        const unlimitedColumnsCount = element.parentNode.
-          querySelectorAll('.ring-table__column[unlimited]').length;
-        if (unlimitedColumnsCount > 1) {
-          element.style.width = `${(FULL_WIDTH / unlimitedColumnsCount).toFixed()}%`;
-        }
-      }
-
-      if (scope.isUnlimited) {
-        adjustUnlimitedColumnWidths();
-      }
-    }
-  };
-});
-
-/**
- * Class with default hotkeys navigation actions (e.g. select, clear selection, move up/down)
- */
-angularModule.constant('SelectionNavigateActions', SelectionNavigateActions);
-
-export default angularModule.name;

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

@@ -1,192 +0,0 @@
-import angular from 'angular';
-
-import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
-
-import SelectNG from '../select-ng/select-ng';
-import SidebarNG from '../sidebar-ng/sidebar-ng';
-import QueryAssistNG from '../query-assist-ng/query-assist-ng';
-
-import TableNG from './table-legacy-ng';
-
-export default {
-  title: 'Legacy Angular/TableLegacy Ng',
-  decorators: [angularDecorator()],
-
-  parameters: {
-    notes: 'Displays tabular data.',
-    hermione: {skip: true}
-  }
-};
-
-export const basic = () => {
-  angular.module(APP_NAME, [TableNG]).controller('testCtrl', function controller() {
-    this.itemsArray = [
-      {
-        name: 'test1',
-        subList: [{name: 'some group'}],
-        iconUrl: 'http://via.placeholder.com/16x16'
-      }
-    ];
-
-    for (let i = 0; i < 20; i++) {
-      this.itemsArray.push({
-        name: Math.random(),
-        subList: [{name: Math.random()}, {name: Math.random()}, {name: Math.random()}]
-      });
-    }
-  });
-
-  return `
-      <div ng-controller="testCtrl as ctrl">
-        <rg-legacy-table-toolbar stick>
-          <div>Some toolbar content. Selected item:
-            {{ctrl.selection.getActiveItem().name}}
-          </div>
-        </rg-legacy-table-toolbar>
-
-        <rg-legacy-table items="ctrl.itemsArray" selection="ctrl.selection">
-          <rg-legacy-table-header>
-            <rg-legacy-table-title>Avatar</rg-legacy-table-title>
-            <rg-legacy-table-title>Check</rg-legacy-table-title>
-            <rg-legacy-table-title active>Name</rg-legacy-table-title>
-            <rg-legacy-table-title>Groups</rg-legacy-table-title>
-          </rg-legacy-table-header>
-
-          <rg-legacy-table-row row-item="item" ng-repeat="item in ctrl.itemsArray">
-            <rg-legacy-table-column avatar>
-              <img alt="Avatar" ng-if="::item.iconUrl" ng-src="{{ ::item.iconUrl }}"
-                class="ring-table__avatar__img"/>
-            </rg-legacy-table-column>
-            <rg-legacy-table-checkbox-cell aria-label="Toggle row checked state"></rg-legacy-table-checkbox-cell>
-            <rg-legacy-table-column limited>{{ ::item.name }}</rg-legacy-table-column>
-            <rg-legacy-table-column wide limited>
-              <span class="ring-table__column-list"
-                ng-repeat="subItem in ::item.subList">{{ ::subItem.name }}</span>
-            </rg-legacy-table-column>
-          </rg-legacy-table-row>
-        </rg-legacy-table>
-      </div>
-    `;
-};
-
-basic.storyName = 'basic';
-
-export const withoutSelection = () => {
-  angular.module(APP_NAME, [TableNG]);
-
-  return `
-      <div ng-init="itemsArray = ['first', 'second', 'third', 'fourth']">
-        <rg-legacy-table items="itemsArray" disable-selection="true">
-          <rg-legacy-table-row row-item="item" ng-repeat="item in itemsArray">
-            <rg-legacy-table-column>{{item}}</rg-legacy-table-column>
-          </rg-legacy-table-row>
-        </rg-legacy-table>
-      </div>
-    `;
-};
-
-withoutSelection.storyName = 'without selection';
-withoutSelection.parameters = {hermione: {skip: true}};
-
-export const withSidebar = () => {
-  angular.
-    module(APP_NAME, [TableNG, SidebarNG, SelectNG, QueryAssistNG]).
-    controller('testCtrl', function controller($timeout) {
-      this.query = 'fooo';
-
-      this.isShowSideBar = true;
-
-      $timeout(() => {
-        this.itemsArray = [
-          {
-            name: 'test1',
-            iconUrl:
-              'https://d13yacurqjgara.cloudfront.net/users/317408/avatars/mini/Layout_Behance_Avatar_(1).jpg?1376382552'
-          }
-        ];
-
-        for (let i = 0; i < 20; i++) {
-          this.itemsArray.push({name: Math.random()});
-        }
-      }, 500);
-
-      this.queryAssistSource = ({query, caret, omitSuggestions}) => ({
-        caret,
-        query,
-        styleRanges: omitSuggestions
-          ? [
-            {
-              start: 0,
-              length: 1,
-              style: 'text'
-            }
-          ]
-          : [],
-        suggestions: [
-          {
-            prefix: 'login: ',
-            option: 'test',
-            suffix: ' ',
-            description: 'logins',
-            matchingStart: 0,
-            matchingEnd: 4,
-            caret: 2,
-            completionStart: 0,
-            completionEnd: 4,
-            group: 'logins',
-            icon: 'data:uri'
-          }
-        ]
-      });
-    });
-
-  return `
-      <h3>Scroll down to see the effect</h3>
-      <div ng-controller="testCtrl as ctrl">
-        <rg-sidebar show="ctrl.isShowSideBar"
-          place-under-sibling=".some-toolbar"
-          top-offset="1">
-          <div class="ring-sidebar__title">Here is sidebar content</div>
-          <div class="ring-sidebar__section">
-            {{ctrl.selection.getActiveItem().name}}
-          </div>
-          <rg-select
-            options="item.name for item in ctrl.itemsArray track by item.name"></rg-select>
-
-          <rg-query-assist
-            x-data-source="ctrl.queryAssistSource"
-            query="ctrl.query"></rg-query-assist>
-        </rg-sidebar>
-
-        <rg-legacy-table-toolbar stick class="some-toolbar">
-          <div>Some toolbar content. Selected
-            item: {{ctrl.selection.getActiveItem().name}}
-            <rg-sidebar-toggle-button model="ctrl.isShowSideBar">Toggle
-              toolbar
-            </rg-sidebar-toggle-button>
-          </div>
-        </rg-legacy-table-toolbar>
-
-        <rg-legacy-table items="ctrl.itemsArray" selection="ctrl.selection">
-          <rg-legacy-table-header class="example__table-header"
-            stick-to=".some-toolbar">
-            <rg-legacy-table-title>Avatar</rg-legacy-table-title>
-            <rg-legacy-table-title>Check</rg-legacy-table-title>
-            <rg-legacy-table-title active>Name</rg-legacy-table-title>
-          </rg-legacy-table-header>
-
-          <rg-legacy-table-row row-item="item" ng-repeat="item in ctrl.itemsArray">
-            <rg-legacy-table-column avatar>
-              <img alt="Avatar" ng-if="::item.iconUrl" ng-src="{{ ::item.iconUrl }}"
-                class="ring-table__avatar__img"/>
-            </rg-legacy-table-column>
-            <rg-legacy-table-checkbox-cell aria-label="Toggle row checked state"></rg-legacy-table-checkbox-cell>
-            <rg-legacy-table-column limited>{{::item.name }}</rg-legacy-table-column>
-          </rg-legacy-table-row>
-        </rg-legacy-table>
-      </div>
-    `;
-};
-
-withSidebar.storyName = 'with sidebar';
-withSidebar.parameters = {hermione: {skip: true}};