@jetbrains/ring-ui 5.1.21 → 5.1.23

package/components/shortcuts/shortcuts-hoc.js

@@ -1,19 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import getUID from '../global/get-uid';
-import Shortcuts from './shortcuts';
-export default function shortcutsHOC(ComposedComponent) {
-    return class WithShortcuts extends React.Component {
-        static propTypes = {
-            rgShortcutsOptions: PropTypes.object,
-            rgShortcutsMap: PropTypes.object
-        };
-        _shortcutsScopeUid = getUID('rg-shortcuts-');
-        render() {
-            const { rgShortcutsOptions, rgShortcutsMap, ...props } = this.props;
-            return (<Shortcuts scope={this._shortcutsScopeUid} map={rgShortcutsMap} options={rgShortcutsOptions} disabled={rgShortcutsOptions.disabled}>
-          <ComposedComponent {...props}/>
-        </Shortcuts>);
-        }
-    };
-}

package/components/shortcuts/shortcuts.d.ts

@@ -1,28 +0,0 @@
-import { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import { ShortcutsMap, ShortcutsScopeOptions } from './core';
-export interface ShortcutsProps {
-    map: ShortcutsMap;
-    scope: string;
-    options: ShortcutsScopeOptions;
-    children?: React.ReactNode;
-    disabled?: boolean | null | undefined;
-}
-export default class Shortcuts extends PureComponent<ShortcutsProps> {
-    static propTypes: {
-        map: PropTypes.Validator<object>;
-        scope: PropTypes.Validator<string>;
-        options: PropTypes.Requireable<object>;
-        disabled: PropTypes.Requireable<boolean>;
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-    };
-    static defaultProps: {
-        options: {};
-    };
-    componentDidMount(): void;
-    componentDidUpdate(prevProps: ShortcutsProps): void;
-    componentWillUnmount(): void;
-    turnShorcutsOn(): void;
-    turnShorcutsOff(): void;
-    render(): string | number | true | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null;
-}

package/components/shortcuts/shortcuts.js

@@ -1,50 +0,0 @@
-import { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import shortcuts from './core';
-export default class Shortcuts extends PureComponent {
-    static propTypes = {
-        map: PropTypes.object.isRequired,
-        scope: PropTypes.string.isRequired,
-        options: PropTypes.object,
-        disabled: PropTypes.bool,
-        children: PropTypes.node
-    };
-    static defaultProps = {
-        options: {}
-    };
-    componentDidMount() {
-        if (!this.props.disabled) {
-            this.turnShorcutsOn();
-        }
-    }
-    componentDidUpdate(prevProps) {
-        const { disabled, map } = this.props;
-        if (!prevProps.disabled && disabled) {
-            this.turnShorcutsOff();
-        }
-        if (prevProps.disabled && !disabled) {
-            this.turnShorcutsOn();
-        }
-        if (prevProps.map !== map) {
-            shortcuts.bindMap(map, this.props);
-        }
-    }
-    componentWillUnmount() {
-        if (!this.props.disabled) {
-            this.turnShorcutsOff();
-        }
-    }
-    turnShorcutsOn() {
-        const { map, scope, options } = this.props;
-        shortcuts.bindMap(map, this.props);
-        shortcuts.pushScope(scope, options);
-    }
-    turnShorcutsOff() {
-        const { scope } = this.props;
-        shortcuts.unbindScope(scope);
-        shortcuts.spliceScope(scope);
-    }
-    render() {
-        return this.props.children || null;
-    }
-}

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.js

@@ -1,101 +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 {
-  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));
-  }
-}
-HintPopupService.$inject = ['dialog', 'shortcuts'];
-
-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;

package/components/shortcuts-hint-ng/shortcuts-hint-ng.stories.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.test.js

@@ -1,113 +0,0 @@
-/* eslint-disable angular/no-angular-mock */
-
-import angular from 'angular';
-import 'angular-mocks';
-
-import sniffer from '../global/sniffer';
-
-import ShortcutsNgHint from './shortcuts-hint-ng';
-
-describe('Shortcuts Hint Ng', () => {
-  beforeEach(angular.mock.module(ShortcutsNgHint));
-
-  describe('shortcut key symbol filter', () => {
-    let shortcutKeySymbolFilter;
-
-    /* global inject */
-    beforeEach(inject(_shortcutKeySymbolFilter_ => {
-      shortcutKeySymbolFilter = _shortcutKeySymbolFilter_;
-    }));
-
-    it('Should replace + with spaces on mac os', () => {
-      sandbox.stub(sniffer, 'os').value({name: 'macos'});
-      shortcutKeySymbolFilter('S1+S2').should.be.equal('S1S2');
-    });
-
-    it('Should replace + with spaces on windows', () => {
-      sandbox.stub(sniffer, 'os').value({name: 'windows'});
-      shortcutKeySymbolFilter('S1+S2').should.be.equal('S1+S2');
-    });
-
-    it('Should capitalize key if is not in key mapping', () => {
-      sandbox.stub(sniffer, 'os').value({name: 'macos'});
-      shortcutKeySymbolFilter('f2+e').should.be.equal('F2E');
-    });
-
-    it('Should replace action keys with symbols on mac', () => {
-      sandbox.stub(sniffer, 'os').value({name: 'macos'});
-      shortcutKeySymbolFilter('ctrl+alt+shift+enter+up+down+left+right+backspace').
-        should.be.equal('⌃⌥⇧⏎↑↓←→⌫');
-    });
-
-    it('Should replace action keys with key names on windows', () => {
-      sandbox.stub(sniffer, 'os').value({name: 'windows'});
-      shortcutKeySymbolFilter('ctrl+alt+shift+enter+up+down+left+right+backspace+f4').
-        should.be.equal('Ctrl+Alt+Shift+Enter+↑+↓+←+→+Backspace+F4');
-    });
-  });
-
-  describe('shortcut search filter', () => {
-    let shortcutSearchFilter;
-    let fakeShortcuts;
-
-    beforeEach(inject(_shortcutSearchFilter_ => {
-      shortcutSearchFilter = _shortcutSearchFilter_;
-
-      fakeShortcuts = [
-        {key: 'shift+left+up', titles: ['combination first']},
-        {key: 'ctrl+enter', titles: ['some second']},
-        {key: 'meta+alt+down', titles: ['combination third']}
-      ];
-    }));
-
-    it('Should not filter if query is empty', () => {
-      const filtered = shortcutSearchFilter(fakeShortcuts, undefined);
-
-      filtered.should.be.deep.equal(fakeShortcuts);
-    });
-
-    it('Should search by shortcut title', () => {
-      const filtered = shortcutSearchFilter(fakeShortcuts, 'second');
-
-      filtered.length.should.be.equal(1);
-      filtered[0].should.be.equal(fakeShortcuts[1]);
-    });
-
-    it('Should search by shortcut key', () => {
-      const filtered = shortcutSearchFilter(fakeShortcuts, 'down');
-
-      filtered.length.should.be.equal(1);
-      filtered[0].should.be.equal(fakeShortcuts[2]);
-    });
-
-    it('Should search by shortcut symbol on mac', () => {
-      sandbox.stub(sniffer, 'os').value({name: 'macos'});
-      const filtered = shortcutSearchFilter(fakeShortcuts, '⌥');
-
-      filtered.length.should.be.equal(1);
-      filtered[0].should.be.equal(fakeShortcuts[2]);
-    });
-
-    it('Should find multiple results', () => {
-      const filtered = shortcutSearchFilter(fakeShortcuts, 'combination');
-
-      filtered.length.should.be.equal(2);
-    });
-
-    it('Should support multiple keys', () => {
-      const filtered = shortcutSearchFilter([
-        {key: ['shift+left+up', 'shift+left+up'], titles: ['combination first']}
-      ], 'combination');
-
-      filtered.length.should.be.equal(1);
-    });
-
-    it('Should support multiple titles', () => {
-      const filtered = shortcutSearchFilter([
-        {key: ['shift+left+up'], titles: ['combination first', 'combination second']}
-      ], 'second');
-
-      filtered.length.should.be.equal(1);
-    });
-  });
-});

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

@@ -1,48 +0,0 @@
-export default `<div class="shortcuts-hint">
-
-  <div class="shortcuts-hint__search-input-wrapper">
-    <rg-input
-      ng-attr-placeholder="{{hintPopupCtrl.searchPlaceholder}}"
-      ng-model="hintPopupCtrl.searchText"
-    ></rg-input>
-    <rg-icon
-      class="shortcuts-hint__search-icon"
-      glyph="{{hintPopupCtrl.searchIcon}}"
-    ></rg-icon>
-  </div>
-
-  <div class="shortcuts-hint__columns">
-    <div class="shortcuts-hint__table">
-      <div ng-repeat="mode in hintPopupCtrl.modes"
-        class="shortcuts-hint__shortcut-block">
-
-        <div class="shortcuts-hint__table-title" ng-if="mode.title">
-          <div></div>
-          <div class="shortcuts-hint__shortcuts-title">{{hintPopupCtrl.getTitle(mode.title)}}</div>
-        </div>
-
-        <div ng-repeat="shortcut in mode.shortcuts | shortcutSearch:hintPopupCtrl.searchText"
-          class="shortcuts-hint__table-row">
-          <div class="shortcuts-hint__shortcut-cell">
-            <div class="shortcuts-hint__shortcut"
-              ng-if="hintPopupCtrl.isArray(shortcut.key)"
-              ng-repeat="key in shortcut.key track by $index">
-              {{key | shortcutKeySymbol}}
-            </div>
-            <span class="shortcuts-hint__shortcut"
-              ng-if="!hintPopupCtrl.isArray(shortcut.key)">{{shortcut.key | shortcutKeySymbol}}</span>
-          </div>
-          <div class="shortcuts-hint__hint">
-            <span ng-repeat="title in shortcut.titles">
-              {{hintPopupCtrl.getTitle(title)}}
-              <br ng-if="!$last">
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div rg-template="hintPopupCtrl.tailTemplate"></div>
-
-</div>`;