@jetbrains/ring-ui 5.1.1 → 6.0.2-beta.0

package/components/select-ng/select-ng__lazy.js

@@ -1,83 +0,0 @@
-import angular from 'angular';
-
-import React, {cloneElement} from 'react';
-
-import {render, hydrate} from '../global/react-render-adapter';
-import {RerenderableSelect} from '../select/select';
-
-class SelectLazy {
-  constructor(container, props, ctrl, type, selectRef) {
-    this.container = container;
-    this.ctrl = ctrl;
-    this.props = props || {};
-    this.type = type;
-    this.node = container;
-    this.selectInstance = null;
-    this.selectRef = node => {
-      this.selectInstance = node;
-      selectRef(node);
-    };
-    this._popup = {
-      isVisible: angular.noop
-    };
-
-    this.attachEvents();
-    this.render();
-  }
-
-  onClick = () => {
-    this._clickHandler();
-  };
-
-  rerender(props = {}) {
-    for (const prop in props) {
-      if (props.hasOwnProperty(prop)) {
-        if (props[prop] == this.props[prop]) { //eslint-disable-line eqeqeq
-          break;
-        }
-
-        this.render(props);
-        return;
-      }
-    }
-  }
-
-  attachEvents() {
-    this.container.addEventListener('click', this.onClick, {capture: true});
-  }
-
-  detachEvents() {
-    this.container.removeEventListener('click', this.onClick, {capture: true});
-  }
-
-  render(props) {
-    this.reactSelect = (
-      <RerenderableSelect
-        {...Object.assign({}, this.props, props || {})}
-        ref={this.selectRef}
-      />
-    );
-    this.props = this.reactSelect.props;
-
-    if (this.type !== 'dropdown') {
-      const ReactDOMServer = require('react-dom/server');
-      this.container.innerHTML = ReactDOMServer.renderToString(this.reactSelect);
-    }
-  }
-
-  _clickHandler() {
-    this.detachEvents();
-    if (this.type === 'dropdown') {
-      render(cloneElement(this.reactSelect, {
-        ref: node => {
-          this.selectRef(node);
-          node?._openPopupIfClosed?.();
-        }
-      }), this.container);
-    } else {
-      hydrate(this.reactSelect, this.container);
-    }
-  }
-}
-
-export default SelectLazy;

package/components/select-ng/select-ng__lazy.test.js

@@ -1,81 +0,0 @@
-import SelectLazy from './select-ng__lazy';
-
-describe('Select Lazy', () => {
-
-
-  let containerNode;
-  let ctrl;
-  beforeEach(() => {
-    containerNode = document.createElement('div');
-    ctrl = {};
-  });
-
-
-  it('should create lazy select', () => {
-    const lazySelect = renderLazySelect();
-    lazySelect.should.not.be.undefined;
-  });
-
-
-  it('should render static markup', () => {
-    renderLazySelect();
-    should.exist(findSelectNode(containerNode));
-  });
-
-
-  it('should render react select on click', () => {
-    const lazySelect = renderLazySelect();
-    simulateClick(lazySelect);
-    ctrl.selectInstance.should.not.be.undefined;
-  });
-
-
-  it('should detach lazy select after render', () => {
-    const lazySelect = renderLazySelect();
-    sandbox.spy(lazySelect, '_clickHandler');
-
-    simulateClick(lazySelect);
-    simulateClick(lazySelect);
-    simulateClick(lazySelect);
-
-    lazySelect._clickHandler.should.be.calledOnce;
-  });
-
-
-  it('should not render markup for select dropdown', () => {
-    renderDropdownSelect();
-    should.not.exist(findSelectNode(containerNode));
-  });
-
-
-  it('should render select dropdown on click', () => {
-    const lazySelect = renderDropdownSelect();
-    simulateClick(lazySelect);
-    should.exist(ctrl.selectInstance);
-  });
-
-
-  function simulateClick(select) {
-    const clickEvent = new CustomEvent('click');
-    select.container.dispatchEvent(clickEvent);
-  }
-
-
-  function renderDropdownSelect() {
-    return renderLazySelect('dropdown');
-  }
-
-
-  function renderLazySelect(type = 'button') {
-    const lazySelect = new SelectLazy(containerNode, {}, ctrl, type, instance => {
-      ctrl.selectInstance = instance;
-    });
-    lazySelect.render();
-    return lazySelect;
-  }
-
-
-  function findSelectNode(container) {
-    return container.querySelector('[data-test="ring-select"]');
-  }
-});

package/components/select-ng/select-ng__options.js

@@ -1,147 +0,0 @@
-import angular from 'angular';
-
-import deepEqual from 'deep-equal';
-
-class Options {
-  static OPTIONS_REGEXP = /^\s*(.*?)(?:\s+as\s+(.*?))?(?:\s+select\s+as\s+(.*?))?(?:\s+describe\sas\s+(.*?))?(?:\s+for\s+)?([$\w]+)\s+in\s+(.*?)(?:\s+track\sby\s+(.*?))?$/;
-
-  static MATCHES = {
-    ITEM: 1,
-    LABEL: 2,
-    SELECTED_LABEL: 3,
-    DESCRIPTION: 4,
-    OPTION: 5,
-    ITEMS: 6,
-    TRACK: 7
-  };
-
-  static defaultKeyField = 'key';
-  static defaultLabelField = 'label';
-  static defaultSelectedLabelField = 'selectedLabel';
-  static defaultDescriptionField = 'description';
-
-  constructor(scope, optionsString) {
-    this.scope = scope;
-    const $parse = this.constructor.$parse;
-    const MATCHES = this.constructor.MATCHES;
-
-    let match;
-    if (!(match = optionsString.match(this.constructor.OPTIONS_REGEXP))) {
-      throw new Error('Bad rgSelect expression format. Expected: [{item}] [[as] item.text] [select as item.selectLabel]' +
-        ` [describe as {item.description}] [for] {item} in {items|dataSource(query)} [track by item.id], Received: ${optionsString}`);
-    }
-
-    /**
-     * Now we can write only `item.value as item.label for item in items`
-     * we can not skip `item.label`
-     */
-    this.hasItemGetter = Boolean(match[MATCHES.ITEM] && match[MATCHES.LABEL]);
-
-    this.itemGetter = $parse(match[MATCHES.ITEM]);
-    this.labelGetter = (match[MATCHES.LABEL] && $parse(match[MATCHES.LABEL])) || this.itemGetter;
-    this.selectedLabelGetter =
-      match[MATCHES.SELECTED_LABEL] &&
-      $parse(match[MATCHES.SELECTED_LABEL]);
-    this.descriptionGetter = match[MATCHES.DESCRIPTION] && $parse(match[MATCHES.DESCRIPTION]);
-    this.optionVariableName = match[MATCHES.OPTION];
-    this.datasourceGetter = $parse(match[MATCHES.ITEMS]);
-    this.trackByGetter = match[MATCHES.TRACK] && $parse(match[MATCHES.TRACK]);
-    this.datasourceIsFunction = match[MATCHES.ITEMS].indexOf('(') > 0;
-  }
-
-  getProperty(option, getter) {
-    if (getter) {
-      const locals = {};
-      locals[this.optionVariableName] = option;
-      return getter.call(this, this.scope, locals);
-    }
-
-    return undefined;
-  }
-
-  /**
-   * @param {Object} option The item from options collection
-   * @return {any} The option value
-   */
-  getValue(option) {
-    if (!this.hasItemGetter) {
-      return option;
-    }
-
-    const value = this.getProperty(option, this.itemGetter);
-
-    return value === undefined ? option : value;
-  }
-
-  /**
-   * @param {any} value The option value
-   * @param {Array} options The list of options
-   * @return {Object|undefined} The option object
-   */
-  getOptionByValue(value, options) {
-    /**
-     * @param {any} it
-     * @return {string} The string representation of the value
-     */
-    function toString(it) {
-      return typeof it === 'object' ? JSON.stringify(it) : String(it);
-    }
-
-    if (!this.hasItemGetter) {
-      return value;
-    }
-
-    const matchedOptions = options.filter(option => {
-      const optionValue = this.getValue(option);
-
-      if (typeof value === 'object') {
-        return deepEqual(optionValue, value);
-      }
-
-      return optionValue === value;
-    });
-
-    if (matchedOptions.length > 1) {
-      throw new Error(`Error(rg-select): You can not have two options with same value(${toString(value)})`);
-    }
-
-    return matchedOptions[0];
-  }
-
-  getKey(option) {
-    return this.getProperty(option, this.trackByGetter) ||
-      option[this.constructor.defaultKeyField] ||
-      option;
-  }
-
-  getLabel(option) {
-    const optionStringValue = typeof option === 'string' ? option : null;
-    return this.getProperty(option, this.labelGetter) ||
-      option[this.constructor.defaultLabelField] ||
-      optionStringValue;
-  }
-
-  getSelectedLabel(option) {
-    return this.getProperty(option, this.selectedLabelGetter) ||
-      option[this.constructor.defaultSelectedLabelField];
-  }
-
-  getDescription(option) {
-    return this.getProperty(option, this.descriptionGetter) ||
-      option[this.constructor.defaultDescriptionField];
-  }
-
-  getOptions(query, skip) {
-    return this.datasourceGetter(this.scope, {query, skip});
-  }
-}
-
-
-const angularModule = angular.module('Ring.select.options', []);
-
-angularModule.factory('SelectOptions', function SelectOptionsFactory($parse) {
-  Options.$parse = $parse;
-  return Options;
-});
-
-export default angularModule.name;

package/components/shortcuts-hint-ng/shortcuts-hint-ng.css

@@ -1,116 +0,0 @@
-@import "../global/variables.css";
-
-@value unit from "../global/global.css";
-
-:global(.shortcuts-hint) {
-  width: 900px;
-  margin-bottom: calc(unit * 2);
-}
-
-:global(.shortcuts-hint__dialog) {
-  width: auto;
-}
-
-:global(.shortcuts-hint__popup-header) {
-  padding-left: unit;
-}
-
-:global(.shortcuts-hint__columns) {
-  margin-top: calc(unit * 3);
-  columns: 2 auto;
-
-  line-height: 20px;
-}
-
-:global(.shortcuts-hint__table) {
-  display: table;
-
-  border-spacing: 0 unit;
-
-  border-collapse: separate;
-}
-
-:global(.shortcuts-hint__shortcuts-column) {
-  min-width: calc(unit * 4);
-}
-
-:global(.shortcuts-hint__shortcut-block) {
-  display: table-row-group;
-}
-
-:global(.shortcuts-hint__shortcut-block:not(:first-child)::before) {
-  display: block;
-
-  height: calc(unit / 2);
-
-  content: "";
-}
-
-:global(.shortcuts-hint__search-input-wrapper) {
-  position: relative;
-
-  width: calc(unit * 30);
-}
-
-:global(.shortcuts-hint__search-icon) {
-  position: absolute;
-  top: -1px;
-  right: 0;
-
-  width: calc(unit * 2);
-  height: calc(unit * 2);
-
-  padding: 3px 4px 3px 5px;
-
-  user-select: none;
-
-  color: var(--ring-disabled-color);
-}
-
-:global(.shortcuts-hint__table-row) {
-  display: table-row;
-}
-
-:global(.shortcuts-hint__table-title) {
-  display: table-row;
-}
-
-:global(.shortcuts-hint__shortcut-cell) {
-  display: table-cell;
-
-  max-width: calc(unit * 22);
-  padding-right: unit;
-
-  text-align: right;
-}
-
-:global(.shortcuts-hint__shortcut) {
-  white-space: nowrap;
-
-  color: var(--ring-secondary-color);
-
-  font-family: monospace;
-}
-
-:global(.shortcuts-hint__hint) {
-  display: table-cell;
-
-  padding-left: unit;
-}
-
-:global(.shortcuts-hint__shortcuts-title) {
-  display: table-cell;
-
-  padding-left: unit;
-
-  letter-spacing: 1.5px;
-  text-transform: uppercase;
-
-  color: var(--ring-secondary-color);
-
-  font-size: 12px;
-}
-
-:global(.shortcuts-hint__key-spacer) {
-  padding: 0 unit;
-}

package/components/shortcuts-hint-ng/shortcuts-hint-ng.examples.js

@@ -1,126 +0,0 @@
-import angular from 'angular';
-
-import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
-
-import ShortcutsHintNg from './shortcuts-hint-ng';
-
-export default {
-  title: 'Legacy Angular/ShortcutsHint Ng',
-  decorators: [angularDecorator()],
-
-  parameters: {
-    notes: 'Displays a popup listing all registered shortcuts.',
-    hermione: {captureSelector: '*[data-test~=ring-dialog-container]'}
-  }
-};
-
-export const basic = () => {
-  angular.
-    module(APP_NAME, [ShortcutsHintNg]).
-    config(shortcutsProvider => {
-      shortcutsProvider.
-        mode({
-          id: 'some-kind-shortcuts',
-          title: 'Some Action Related Shortcuts',
-          shortcuts: [
-            {
-              key: 'meta+enter+home',
-              action: 'someAction',
-              title: 'Do some action shortcut'
-            },
-            {
-              key: 'ctrl+shift+down',
-              action: 'someAction',
-              title:
-                'Another action shortcut with very very very very very very very very very very long text description'
-            },
-            {
-              key: ['ctrl+alt+e', 'shift+down+u'],
-              action: 'someAction',
-              title: 'Another action shortcut with multiple keys'
-            },
-            {
-              key: ['meta+right+left+end'],
-              action: 'fooBarAction',
-              title:
-                'Blah blah blah Blah blah blah Blah blah blah Blah blah blahBlah blah blahBlah blah blah'
-            },
-            {
-              key: ['meta+esc+del+end'],
-              action: 'someAction',
-              title: 'Blah blah'
-            },
-            {
-              key: ['ctrl+alt+e', 'shift+e+enter'],
-              action: 'someAction',
-              title: 'Fo bar cooo'
-            },
-            {
-              key: ['shift+down+u'],
-              action: 'someAction',
-              title: 'Another action shortcut with multiple keys'
-            },
-            {
-              key: ['ctrl+alt+e'],
-              action: 'someAction',
-              title:
-                'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.'
-            },
-            {
-              key: ['shift+down+u+]'],
-              action: 'someAction',
-              title: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry'
-            },
-            {
-              key: ['ctrl+alt+right+up+down'],
-              action: 'someAction',
-              title: 'Lorem Ipsum is simply'
-            }
-          ]
-        }).
-        mode({
-          id: 'some-other-shortcuts',
-          title: 'Shortcuts for other actions',
-          shortcuts: [
-            {
-              key: 'meta+=',
-              action: 'someAction',
-              title: 'Do some action shortcut'
-            },
-            {
-              key: 'alt+N',
-              action: 'someAction',
-              title: 'Another action shortcut with very very long text description'
-            },
-            {
-              key: 'shift+left+down',
-              action: 'someAction',
-              title: 'Another action shortcut'
-            }
-          ]
-        });
-    }).
-    controller('testCtrl', function controller($timeout, rgShortcutsHintPopup) {
-      this.showPopup = () => {
-        rgShortcutsHintPopup.show({
-          tailTemplate: `
-              <div>
-                You can write anything here, this is a custom section.
-                You can even create your own footer.
-              </div>
-            `
-        });
-      };
-
-      $timeout(this.showPopup, 200);
-    });
-
-  return `
-      <div ng-controller="testCtrl as ctrl">
-        <button ng-click="ctrl.showPopup()">Show popup</button>
-        <rg-dialog></rg-dialog>
-      </div>
-    `;
-};
-
-basic.storyName = 'ShortcutsHint Ng';

package/components/shortcuts-hint-ng/shortcuts-hint-ng.js

@@ -1,102 +0,0 @@
-import angular from 'angular';
-
-import searchIcon from '@jetbrains/icons/search';
-
-import RingAngularComponent from '../global/ring-angular-component';
-import DialogNg from '../dialog-ng/dialog-ng';
-import ShortcutsNg from '../shortcuts-ng/shortcuts-ng';
-import RingTemplateNg from '../template-ng/template-ng';
-import IconNg from '../icon-ng/icon-ng';
-import InputNg from '../input-ng/input-ng';
-import {getShortcutTitle} from '../shortcuts/shortcut-title';
-
-import HintPopupTpl from './shortcuts-hint-ng__template';
-import './shortcuts-hint-ng.css';
-
-/**
- * @name Shortcuts Ng Hint Popup
- */
-
-const angularModule = angular.module(
-  'Ring.shortcuts.hint-popup',
-  [DialogNg, ShortcutsNg, IconNg, InputNg, RingTemplateNg]
-);
-const getTitle = title => (typeof title === 'function' ? title() : title);
-
-
-class HintPopupService extends RingAngularComponent {
-  static $inject = ['dialog', 'shortcuts'];
-
-  show(popupConfig = {}, shortcutModes, okButtonLabel = 'Got it', searchPlaceholder = 'Search') {
-    const {dialog, shortcuts} = this.$inject;
-
-    const modes = shortcutModes || shortcuts.getRegisteredShortcuts();
-
-    modes.forEach(mode => {
-      mode.shortcuts.forEach(shortcut => {
-        shortcut.titles = shortcut.titles || [];
-
-        if (shortcut.title && !shortcut.titles.includes(shortcut.title)) {
-          shortcut.titles.push(shortcut.title);
-        }
-      });
-    });
-
-    return dialog.show(Object.assign({
-      template: HintPopupTpl,
-      closeOnClick: true,
-      autoWidth: true,
-      cssClass: 'shortcuts-hint__dialog',
-      controllerAs: 'hintPopupCtrl',
-      buttons: [{
-        label: okButtonLabel,
-        default: true
-      }],
-      controller() {
-        // eslint-disable-next-line consistent-this
-        const ctrl = this;
-
-        ctrl.searchIcon = searchIcon;
-        ctrl.modes = modes;
-        ctrl.tailTemplate = popupConfig.tailTemplate;
-        ctrl.isArray = it => Array.isArray(it);
-        ctrl.searchText = '';
-        ctrl.searchPlaceholder = searchPlaceholder;
-        ctrl.getTitle = getTitle;
-      }
-    }, popupConfig));
-  }
-}
-
-function shortcutKeySymbolFilter(shortcut) {
-  return getShortcutTitle(shortcut);
-}
-
-function shortcutSearchFilter(shortcuts, query = '') {
-  return (shortcuts || []).filter(shortcut => {
-    const key = shortcut.key.join ? shortcut.key.join(' ') : shortcut.key;
-    const keysPresentation = shortcutKeySymbolFilter(key);
-
-    if (!shortcut.titles.length) {
-      return false;
-    } else {
-      const keyMatches = key.toLowerCase().indexOf(query.toLowerCase()) !== -1;
-      const titleMatches = shortcut.titles.
-        map(getTitle).
-        join(' ').
-        toLowerCase().
-        indexOf(query.toLowerCase()) !== -1;
-      const presentationMatches = keysPresentation.
-        toLowerCase().
-        indexOf(query.toLowerCase()) !== -1;
-
-      return keyMatches || titleMatches || presentationMatches;
-    }
-  });
-}
-
-angularModule.service('rgShortcutsHintPopup', HintPopupService);
-angularModule.filter('shortcutKeySymbol', () => shortcutKeySymbolFilter);
-angularModule.filter('shortcutSearch', () => shortcutSearchFilter);
-
-export default angularModule.name;