@jetbrains/ring-ui 5.1.23 → 5.1.25

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

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

@@ -0,0 +1,192 @@
+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}};