@jetbrains/ring-ui 4.1.3 → 5.0.0-beta.0

package/components/button-group-ng/button-group-ng.examples.js

@@ -2,9 +2,9 @@ import angular from 'angular';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
 
-import ButtonNG from '@jetbrains/ring-ui/components/button-ng/button-ng';
+import ButtonNG from '../button-ng/button-ng';
 
-import ButtonGroupNG from '@jetbrains/ring-ui/components/button-group-ng/button-group-ng';
+import ButtonGroupNG from './button-group-ng';
 
 export default {
   title: 'Legacy Angular/Button Group Ng',

package/components/button-ng/button-ng.examples.js

@@ -5,12 +5,12 @@ import pencilIcon from '@jetbrains/icons/pencil';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
 
-import IconNG from '@jetbrains/ring-ui/components/icon-ng/icon-ng';
-import ThemeNG from '@jetbrains/ring-ui/components/theme-ng/theme-ng';
-import CheckboxNG from '@jetbrains/ring-ui/components/checkbox-ng/checkbox-ng';
-import Theme from '@jetbrains/ring-ui/components/global/theme';
+import IconNG from '../icon-ng/icon-ng';
+import ThemeNG from '../theme-ng/theme-ng';
+import CheckboxNG from '../checkbox-ng/checkbox-ng';
+import Theme from '../global/theme';
 
-import ButtonNG from '@jetbrains/ring-ui/components/button-ng/button-ng';
+import ButtonNG from './button-ng';
 
 export default {
   title: 'Legacy Angular/Button Ng',

package/components/button-set/button-set.examples.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import reactDecorator from '../../.storybook/react-decorator';
+
+import Button from '../button/button';
+
+import ButtonSet from './button-set';
+
+export default {
+  title: 'Components/Button Set',
+  decorators: [reactDecorator()],
+
+  parameters: {
+    notes: 'Allows to group several buttons and ensures that margins between them are consistent.'
+  }
+};
+
+export const buttonSet = () => (
+  <ButtonSet>
+    <Button>1st button</Button>
+    <Button>2nd button</Button>
+    <Button>3rd button</Button>
+  </ButtonSet>
+);

package/components/button-set/button-set.tsx

@@ -0,0 +1,27 @@
+import React, {PureComponent, HTMLAttributes} from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import styles from './button-set.css';
+
+/**
+ * @name Button Set
+ */
+export default class ButtonSet extends PureComponent<HTMLAttributes<HTMLElement>> {
+  static propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string
+  };
+
+  render() {
+    const classes = classNames(styles.buttonSet, this.props.className);
+    return (
+      <div
+        {...this.props}
+        className={classes}
+      >
+        {this.props.children}
+      </div>
+    );
+  }
+}

package/components/button-set-ng/button-set-ng.examples.js

@@ -2,9 +2,9 @@ import angular from 'angular';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
 
-import ButtonNG from '@jetbrains/ring-ui/components/button-ng/button-ng';
+import ButtonNG from '../button-ng/button-ng';
 
-import ButtonSetNG from '@jetbrains/ring-ui/components/button-set-ng/button-set-ng';
+import ButtonSetNG from './button-set-ng';
 
 export default {
   title: 'Legacy Angular/Button Set Ng',

package/components/button-toolbar/button-toolbar.examples.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import reactDecorator from '../../.storybook/react-decorator';
+
+import Button from '../button/button';
+import ButtonGroup from '../button-group/button-group';
+
+import ButtonToolbar from './button-toolbar';
+
+export default {
+  title: 'Components/Button Toolbar',
+  decorators: [reactDecorator()],
+
+  parameters: {
+    notes: 'Displays a toolbar with several buttons.'
+  }
+};
+
+export const buttonToolbar = () => (
+  <ButtonToolbar>
+    <Button primary delayed>
+      Run
+    </Button>
+    <ButtonGroup>
+      <Button>Button one</Button>
+      <Button>Button two</Button>
+      <Button disabled>Button three</Button>
+    </ButtonGroup>
+    <Button>Another action</Button>
+  </ButtonToolbar>
+);

package/components/button-toolbar/button-toolbar.test.tsx

@@ -0,0 +1,23 @@
+import React, {HTMLAttributes} from 'react';
+import {shallow, mount} from 'enzyme';
+
+import ButtonToolbar from './button-toolbar';
+
+describe('Button Toolbar', () => {
+  const shallowButtonToolbar = (params?: HTMLAttributes<HTMLElement>) =>
+    shallow(<ButtonToolbar {...params}/>);
+  const mountButtonToolbar = (params?: HTMLAttributes<HTMLElement>) =>
+    mount(<ButtonToolbar {...params}/>);
+
+  it('should create component', () => {
+    mountButtonToolbar().should.have.type(ButtonToolbar);
+  });
+
+  it('should wrap children with div', () => {
+    shallowButtonToolbar().should.have.tagName('div');
+  });
+
+  it('should use passed className', () => {
+    shallowButtonToolbar({className: 'test-class'}).should.have.className('test-class');
+  });
+});

package/components/button-toolbar/button-toolbar.tsx

@@ -0,0 +1,29 @@
+import React, {PureComponent, HTMLAttributes} from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import styles from './button-toolbar.css';
+
+/**
+ * @name Button Toolbar
+*/
+
+export default class ButtonToolbar extends PureComponent<HTMLAttributes<HTMLElement>> {
+  static propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string
+  };
+
+  render() {
+    const {className} = this.props;
+    const classes = classNames(styles.buttonToolbar, className);
+
+    return (
+      <div
+        {...this.props}
+        className={classes}
+      />
+    );
+  }
+}
+

package/components/button-toolbar-ng/button-toolbar-ng.examples.js

@@ -2,10 +2,10 @@ import angular from 'angular';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
 
-import ButtonNG from '@jetbrains/ring-ui/components/button-ng/button-ng';
-import ButtonGroupNg from '@jetbrains/ring-ui/components/button-group-ng/button-group-ng';
+import ButtonNG from '../button-ng/button-ng';
+import ButtonGroupNg from '../button-group-ng/button-group-ng';
 
-import ButtonToolbarNG from '@jetbrains/ring-ui/components/button-toolbar-ng/button-toolbar-ng';
+import ButtonToolbarNG from './button-toolbar-ng';
 
 export default {
   title: 'Legacy Angular/Button Toolbar Ng',

package/components/caret/caret.examples.ts

@@ -0,0 +1,40 @@
+import '../link/link__legacy.css';
+import Caret from './caret';
+
+export default {
+  title: 'Utilities/Caret',
+
+  parameters: {
+    notes:
+      'Allows manipulation of the caret position in a text box or a contenteditable element. Ported from [jquery-caret](https://github.com/accursoft/caret/).',
+    hermione: {skip: true}
+  }
+};
+
+export const basic = () => {
+  const node = document.createElement('div');
+
+  node.innerHTML = `
+<label>
+  Textarea
+  <textarea id="test-input" class="ring-input">
+  Lorem ipsum
+  dolor sit amet
+  </textarea>
+</label>
+<div><a href="" id="cursor-action" class="ring-link">Set caret position</a></div>
+    `;
+
+  const input = node.querySelector<HTMLElement>('#test-input');
+  const caret = input && new Caret(input);
+
+  node.querySelector('#cursor-action')?.addEventListener('click', event => {
+    caret?.focus();
+    caret?.setPosition(4);
+    event.preventDefault();
+  });
+
+  return node;
+};
+
+basic.storyName = 'Caret';

package/components/caret/caret.test.ts

@@ -0,0 +1,142 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+
+import Caret from './caret';
+
+describe('Caret', () => {
+  let target: HTMLElement;
+  let caret: Caret;
+  beforeEach(() => {
+    target = document.createElement('div');
+    target.innerHTML = 'target = document.createElement(textarea)';
+    target.style.font = '12px/14px Arial';
+    target.contentEditable = 'true';
+
+    document.body.appendChild(target);
+
+    caret = new Caret(target);
+  });
+
+  afterEach(() => {
+    window.getSelection()?.removeAllRanges();
+    // document.body.removeChild(target);
+  });
+
+  describe('getPosition', () => {
+    it('Default position should be 0', () => {
+      window.getSelection()?.removeAllRanges();
+
+      caret.getPosition().should.equal(0);
+    });
+
+    it('Should get correct positions', () => {
+      window.getSelection()?.collapse(target.firstChild, 10);
+
+      caret.getPosition().should.equal(10);
+    });
+
+    it('Should focus on get by default', () => {
+      caret.getPosition();
+
+      target.should.equal(document.activeElement);
+    });
+
+    it('Shouldn\'t focus on get when prohibited', () => {
+      caret.getPosition({avoidFocus: true});
+
+      target.should.not.equal(document.activeElement);
+    });
+
+    it('Should get correct position with simple deep markup', () => {
+      target.innerHTML = '<span>foo<span>test<span>hello</span></span><span>123</span></span>';
+      window.getSelection()?.collapse(target.children[0].children[0].children[0].firstChild,
+        2);
+      caret.getPosition().should.equal(9);
+    });
+
+    it('Should get correct position with difficult deep markup 2', () => {
+      target.innerHTML = '<span>span1<span>span11</span></span><span>span2<span>span21</span>' +
+        '</span><span>span3</span>';
+      window.getSelection()?.collapse(target.children[1].children[0].firstChild, 4);
+      caret.getPosition().should.equal(20);
+    });
+
+    it('Should get correct positions for the same node selection - second node', () => {
+      target.innerHTML = '<span>span1<span>span11</span></span><span>span2<span>span21</span>' +
+        '</span><span>span3</span>';
+      const range = new Range();
+      const node = target.children[1].children[0].firstChild;
+      if (node != null) {
+        range.setStart(node, 1);
+        range.setEnd(node, 4);
+      }
+      window.getSelection()?.removeAllRanges();
+      window.getSelection()?.addRange(range);
+      caret.getPosition().should.deep.equal({startOffset: 17, endOffset: 20, position: 20});
+    });
+
+    it('Should get correct positions for the same node selection - first node', () => {
+      target.innerHTML = '<span>span1<span>span11</span></span><span>span2<span>span21</span>' +
+        '</span><span>span3</span>';
+      const range = new Range();
+      range.setStart(target.children[0].childNodes[0], 0);
+      range.setEnd(target.children[0].childNodes[0], 5);
+      window.getSelection()?.removeAllRanges();
+      window.getSelection()?.addRange(range);
+      caret.getPosition().should.deep.equal({startOffset: 0, endOffset: 5, position: 5});
+    });
+
+    it('Should get correct positions for different nodes selection', () => {
+      target.innerHTML = '<span>span1<span>span11</span></span><span>span2<span>span21</span>' +
+        '</span><span>span3</span>';
+      const range = new Range();
+      const startNode = target.children[0].children[0].firstChild;
+      startNode && range.setStart(startNode, 1);
+      const endNode = target.children[1].children[0].firstChild;
+      endNode && range.setEnd(endNode, 4);
+      window.getSelection()?.removeAllRanges();
+      window.getSelection()?.addRange(range);
+      caret.getPosition().should.deep.equal({startOffset: 6, endOffset: 20, position: 20});
+    });
+
+    it('Should get correct positions for different nodes selection - whole text', () => {
+      target.innerHTML = '<span>span1<span>span11</span></span><span>span2<span>span21</span>' +
+        '</span><span>span3</span>';
+      const range = new Range();
+      range.setStart(target.children[0].childNodes[0], 0);
+      const endNode = target.children[2].firstChild;
+      endNode && range.setEnd(endNode, 5);
+      window.getSelection()?.removeAllRanges();
+      window.getSelection()?.addRange(range);
+      caret.getPosition().should.deep.equal({startOffset: 0, endOffset: 27, position: 27});
+    });
+  });
+
+  describe('setPosition', () => {
+    it('Shouldn\'t change caret position if we don\'t position', () => {
+      should.not.exist(caret.setPosition());
+
+      caret.getPosition().should.equal(0);
+    });
+
+    it('Should change caret position if we position', () => {
+      caret.setPosition(15);
+
+      caret.getPosition().should.equal(15);
+    });
+  });
+
+  describe('getOffset', () => {
+    it('Should get correct zero offset', () => {
+      window.getSelection()?.collapse(target.firstChild, 0);
+
+      caret.getOffset().should.equal(0);
+    });
+
+    it('Should get correct offset', () => {
+      window.getSelection()?.collapse(target.firstChild, 10);
+
+      // Test caret offset should be about 50px (browsers have some small differences)
+      caret.getOffset().should.be.closeTo(50, 15);
+    });
+  });
+});

package/components/caret/caret.ts

@@ -0,0 +1,239 @@
+import {getRect} from '../global/dom';
+
+export interface PositionParams {
+  avoidFocus?: boolean | null | undefined
+}
+
+export interface Position {
+  startOffset: number
+  endOffset: number
+  position: number
+}
+
+/**
+ * @name Caret
+ */
+
+export default class Caret {
+  /**
+   * Line endings RegExp
+   * @type {RegExp}
+   */
+  static returnRE = /\r/g;
+
+  /**
+   * Line endings normalizer
+   * Borrowed from jQuery
+   * @see https://github.com/jquery/jquery/blob/master/src/attributes/val.js
+   * @param value {*}
+   * @return {*}
+   */
+  static normalizeNewlines(value: string | undefined) {
+    return typeof value === 'string' ? value.replace(this.returnRE, '') : value;
+  }
+
+  target: HTMLElement | HTMLInputElement;
+
+  constructor(target: HTMLElement) {
+    this.target = target;
+  }
+
+  isContentEditable() {
+    return this.target.contentEditable === 'true';
+  }
+
+  /**
+   * Set focus on target if possible
+   */
+  focus() {
+    if (!document.activeElement || document.activeElement !== this.target) {
+      this.target.focus();
+    }
+  }
+
+  /**
+   * Get absolute caret position index
+   * @return {number}
+   */
+  getAbsolutePosition(node: Node) {
+    let _curNode: Node | null = node;
+    let curPos = 0;
+    while (_curNode != null && _curNode !== this.target) {
+      while (_curNode.previousSibling) {
+        curPos += _curNode.previousSibling.textContent?.length ?? 0;
+        _curNode = _curNode.previousSibling;
+      }
+      _curNode = _curNode.parentNode;
+    }
+    return curPos;
+  }
+
+  /**
+   * Get caret position index
+   * @param {Object} [params]
+   * @param {boolean} params.avoidFocus
+   * @return {number}
+   */
+  getPosition(params: PositionParams = {}): number | Position {
+    if (this.isContentEditable()) {
+      if (!params.avoidFocus) {
+        this.focus();
+      }
+
+      const selection = window.getSelection();
+
+      if (!selection?.rangeCount) {
+        return 0;
+      }
+
+      const range1 = selection.getRangeAt(0);
+      const range2 = range1.cloneRange();
+
+      range2.selectNodeContents(this.target);
+      range2.setEnd(range1.endContainer, range1.endOffset);
+      const _curNode = range1.startContainer;
+      if (this.target === _curNode) {
+        return range1.startOffset === 0 || _curNode.textContent == null
+          ? 0
+          : _curNode.textContent.length;
+      } else if (!this.target.contains(_curNode)) {
+        return -1;
+      } else if (!_curNode) {
+        return 'selectionStart' in this.target && this.target.selectionStart || -1;
+      }
+      const curPos = this.getAbsolutePosition(_curNode);
+      if (range1.startContainer === range1.endContainer) {
+        if (range1.startOffset === range1.endOffset) {
+          return curPos + range1.startOffset;
+        } else {
+          return {startOffset: curPos + range1.startOffset,
+            endOffset: curPos + range1.endOffset,
+            position: range2.toString().length};
+        }
+      } else {
+        const startOffset = curPos + range1.startOffset;
+        const endPos = this.getAbsolutePosition(range1.endContainer);
+        const endOffset = endPos + range1.endOffset;
+        return {startOffset, endOffset, position: range2.toString().length};
+      }
+    }
+
+    return 'selectionStart' in this.target && this.target.selectionStart || -1;
+  }
+
+  /**
+   * Get relative position of query
+   * @param  {Node} curNode
+   * @param {number} position
+   * @return {{_correctedPosition: number, _curNode: Node}}
+   */
+  getRelativePosition(curNode: Node, position: number) {
+    let curPos = 0;
+    let _curNode = curNode;
+    const nodeTypeText = 3;
+    if (!_curNode) {
+      return {_curNode: this.target, _correctedPosition: position};
+    }
+    if (position === 0) {
+      while (_curNode.nodeType !== nodeTypeText) {
+        _curNode = _curNode.childNodes[0];
+      }
+      const _correctedPosition = position;
+      return {_curNode, _correctedPosition};
+    }
+    let i = -1;
+    if (_curNode && _curNode.nodeType !== undefined) {
+      while (curPos < position && _curNode.nodeType !== nodeTypeText) {
+        i++;
+        if (_curNode.childNodes[i] != null) {
+          curPos += _curNode.childNodes[i].textContent?.length ?? 0;
+          if (curPos >= position) {
+            _curNode = _curNode.childNodes[i];
+            curPos -= _curNode.textContent?.length ?? 0;
+            i = -1;
+          }
+        } else {
+          break;
+        }
+      }
+    }
+    const _correctedPosition = position - curPos;
+    return {_curNode, _correctedPosition};
+  }
+
+  /**
+   * Set caret position index
+   * @param  {number} position
+   * @return {number}
+   */
+  setPosition(position?: Position | number) {
+    const isContentEditable = this.isContentEditable();
+    let correctedPosition;
+    let curNode: Node = this.target && this.target.childNodes[0];
+    if (position !== undefined) {
+      if (typeof position === 'object') {
+        const range = new Range();
+        const start = this.getRelativePosition(curNode, position.startOffset);
+        range.setStart(start._curNode, start._correctedPosition);
+        const end = this.getRelativePosition(curNode, position.endOffset);
+        range.setEnd(end._curNode, end._correctedPosition);
+        correctedPosition = range;
+      } else if (position === -1) {
+        const value = isContentEditable
+          ? this.target.textContent
+          : Caret.normalizeNewlines('value' in this.target ? this.target.value : undefined);
+        correctedPosition = value?.length ?? 0;
+      } else {
+        const {_curNode, _correctedPosition} = this.getRelativePosition(curNode, position);
+        curNode = _curNode;
+        correctedPosition = _correctedPosition;
+      }
+    }
+
+    if (isContentEditable) {
+      this.focus();
+
+      try {
+        if (correctedPosition instanceof Range) {
+          window.getSelection()?.removeAllRanges();
+          window.getSelection()?.addRange(correctedPosition);
+        } else {
+          window.getSelection()?.collapse(curNode || this.target, correctedPosition);
+        }
+      } catch (e) {
+        // Do nothing
+      }
+
+    } else if ('setSelectionRange' in this.target && typeof correctedPosition === 'number') {
+      this.target.setSelectionRange(correctedPosition, correctedPosition);
+    }
+
+    return correctedPosition;
+  }
+
+  /**
+   * Get caret position in pixels
+   * @return {number}
+   */
+  getOffset() {
+    let offset = 0;
+    let range;
+
+    try {
+      // Both statements may throw
+      range = window.getSelection()?.getRangeAt(0).cloneRange();
+      range?.setStart(range.startContainer, range.startOffset - 1);
+    } catch (e) {
+      return offset;
+    }
+
+    if (range && range.endOffset !== 0 && range.toString() !== '') {
+      offset =
+        getRect(range).right -
+        getRect(this.target).left -
+        (range.startContainer instanceof HTMLElement && range.startContainer.offsetLeft || 0);
+    }
+
+    return offset;
+  }
+}