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

package/components/caret/caret.examples.js

@@ -1,39 +0,0 @@
-import '@jetbrains/ring-ui/components/link/link__legacy.css';
-import Caret from '@jetbrains/ring-ui/components/caret/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 caret = new Caret(node.querySelector('#test-input'));
-
-  node.querySelector('#cursor-action').addEventListener('click', event => {
-    caret.focus();
-    caret.setPosition(4);
-    event.preventDefault();
-  });
-
-  return node;
-};
-
-basic.storyName = 'Caret';

package/components/caret/caret.js

@@ -1,225 +0,0 @@
-import {getRect} from '../global/dom';
-
-/**
- * @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) {
-    return typeof value === 'string' ? value.replace(this.returnRE, '') : value;
-  }
-
-  constructor(target) {
-    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) {
-    let _curNode = node;
-    let curPos = 0;
-    while (_curNode !== this.target) {
-      while (_curNode.previousSibling) {
-        curPos += _curNode.previousSibling.textContent.length;
-        _curNode = _curNode.previousSibling;
-      }
-      _curNode = _curNode.parentNode;
-    }
-    return curPos;
-  }
-
-  /**
-   * Get caret position index
-   * @param {Object} [params]
-   * @param {boolean} params.avoidFocus
-   * @return {number}
-   */
-  getPosition(params = {}) {
-    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 ? 0 : _curNode.textContent.length;
-      } else if (!this.target.contains(_curNode)) {
-        return -1;
-      } else if (!_curNode) {
-        return this.target.selectionStart;
-      }
-      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 this.target.selectionStart;
-  }
-
-  /**
-   * Get relative position of query
-   * @param  {Node} curNode
-   * @param {number} position
-   * @return {{_correctedPosition: number, _curNode: Node}}
-   */
-  getRelativePosition(curNode, position) {
-    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 && _curNode.childNodes[i]) {
-          curPos += _curNode.childNodes[i].textContent.length;
-          if (curPos >= position) {
-            _curNode = _curNode.childNodes[i];
-            curPos -= _curNode.textContent.length;
-            i = -1;
-          }
-        } else {
-          break;
-        }
-      }
-    }
-    const _correctedPosition = position - curPos;
-    return {_curNode, _correctedPosition};
-  }
-
-  /**
-   * Set caret position index
-   * @param  {number} position
-   * @return {number}
-   */
-  setPosition(position) {
-    const isContentEditable = this.isContentEditable();
-    let correctedPosition;
-    let curNode = this.target && this.target.childNodes[0];
-    if (position !== undefined) {
-      if (position.startOffset !== undefined) {
-        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
-          : this.constructor.normalizeNewlines(this.target.value);
-        correctedPosition = value.length;
-      } 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 {
-      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.offsetLeft || 0);
-    }
-
-    return offset;
-  }
-}

package/components/caret/caret.test.js

@@ -1,137 +0,0 @@
-/* eslint-disable no-magic-numbers */
-
-import Caret from './caret';
-
-describe('Caret', () => {
-  let target;
-  let 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);
-    target = null;
-  });
-
-  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();
-      range.setStart(target.children[1].children[0].firstChild, 1);
-      range.setEnd(target.children[1].children[0].firstChild, 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();
-      range.setStart(target.children[0].children[0].firstChild, 1);
-      range.setEnd(target.children[1].children[0].firstChild, 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);
-      range.setEnd(target.children[2].firstChild, 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/checkbox/checkbox.examples.js

@@ -1,67 +0,0 @@
-import React, {Fragment} from 'react';
-
-import reactDecorator from '../../.storybook/react-decorator';
-
-import Checkbox from '@jetbrains/ring-ui/components/checkbox/checkbox';
-
-export default {
-  title: 'Components/Checkbox',
-  decorators: [reactDecorator()],
-
-  parameters: {
-    component: Checkbox,
-    framework: 'react'
-  }
-};
-
-export const controls = args => <Checkbox {...args}/>;
-controls.args = {label: 'label'};
-controls.parameters = {hermione: {skip: true}};
-
-export const basic = () => (
-  <Fragment>
-    <h1>Base Examples</h1>
-    <div id="checkbox-base">
-      <Checkbox label="One"/>
-      <br/>
-      <Checkbox label="Two" defaultChecked/>
-      <br/>
-      <Checkbox label="Indeterminate" indeterminate/>
-      <br/>
-      <Checkbox label="Indeterminate checked" indeterminate defaultChecked/>
-    </div>
-
-    <h1>Disabled checkboxes</h1>
-    <div id="checkbox-disabled">
-      <Checkbox label="One" disabled/>
-      <br/>
-      <Checkbox label="Two" disabled defaultChecked/>
-      <br/>
-      <Checkbox label="Indeterminate" disabled indeterminate/>
-      <br/>
-      <Checkbox label="Indeterminate checked" disabled indeterminate defaultChecked/>
-    </div>
-
-    <h1>Examples with outer styles</h1>
-    <div id="checkbox-additional">
-      <div style={{lineHeight: '60px'}}>
-        <Checkbox defaultChecked>This checkbox is inside a div with large line-height.</Checkbox>
-        <span>This text should be aligned on same line with checkbox label</span>
-      </div>
-      <div style={{lineHeight: '6px'}}>
-        <Checkbox defaultChecked>This checkbox is inside a div with small line-height.</Checkbox>
-        <span>This text should be aligned on same line with checkbox label</span>
-      </div>
-      <div style={{lineHeight: '48px', fontSize: '40px'}}>
-        <Checkbox defaultChecked>This checkbox is inside a div with large font-size.</Checkbox>
-        <span>This text should be aligned on same line with checkbox label</span>
-      </div>
-      <div style={{lineHeight: '6px', fontSize: '4px'}}>
-        <Checkbox defaultChecked>This checkbox is inside a div with small font-size.</Checkbox>
-        <span>This text should be aligned on same line with checkbox label</span>
-      </div>
-    </div>
-  </Fragment>
-);
-
-basic.storyName = 'basic';

package/components/checkbox/checkbox.js

@@ -1,100 +0,0 @@
-import React, {PureComponent} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import checkmarkIcon from '@jetbrains/icons/checkmark';
-import minusIcon from '@jetbrains/icons/remove-10px';
-
-import Icon from '../icon/icon';
-
-import styles from './checkbox.css';
-
-/**
- * @name Checkbox
- */
-/**
- * Displays a checkbox.
- */
-export default class Checkbox extends PureComponent {
-
-  static propTypes = {
-    name: PropTypes.string,
-    label: PropTypes.string,
-    className: PropTypes.string,
-    containerClassName: PropTypes.string,
-    containerStyle: PropTypes.object,
-    cellClassName: PropTypes.string,
-    labelClassName: PropTypes.string,
-    defaultChecked: PropTypes.bool,
-    checked: PropTypes.bool,
-    indeterminate: PropTypes.bool,
-    disabled: PropTypes.bool,
-    onChange: PropTypes.func,
-    children: PropTypes.node
-  };
-
-  componentDidMount() {
-    if (this.input != null) {
-      this.input.indeterminate = this.props.indeterminate;
-    }
-  }
-
-  componentDidUpdate(prevProps) {
-    const {indeterminate} = this.props;
-    if (this.input != null && indeterminate !== prevProps.indeterminate) {
-      this.input.indeterminate = this.props.indeterminate;
-    }
-  }
-
-  inputRef = el => {
-    if (el != null) {
-      el.indeterminate = this.props.indeterminate;
-    }
-    this.input = el;
-  };
-
-  render() {
-    const {
-      children,
-      label,
-      className,
-      containerClassName,
-      containerStyle,
-      cellClassName,
-      labelClassName,
-      indeterminate,
-      ...restProps
-    } = this.props;
-
-    const classes = classNames(styles.input, className);
-    const containerClasses = classNames(styles.checkbox, containerClassName);
-    const cellClasses = classNames(styles.cell, cellClassName);
-    const labelClasses = classNames(styles.label, labelClassName);
-
-    return (
-      <label
-        className={containerClasses}
-        style={containerStyle}
-        data-test="ring-checkbox"
-      >
-        <input
-          {...restProps}
-          data-checked={restProps.checked}
-          ref={this.inputRef}
-          type="checkbox"
-          className={classes}
-        />
-        <span className={cellClasses}>
-          <Icon
-            glyph={checkmarkIcon}
-            className={styles.check}
-          />
-          <Icon
-            glyph={minusIcon}
-            className={styles.minus}
-          />
-        </span>
-        <span className={labelClasses}>{label || children}</span>
-      </label>
-    );
-  }
-}

package/components/checkbox/checkbox.test.js

@@ -1,78 +0,0 @@
-import React from 'react';
-import {Simulate} from 'react-dom/test-utils';
-import {shallow, mount} from 'enzyme';
-
-import Checkbox from './checkbox';
-
-describe('Checkbox', () => {
-  const shallowCheckbox = props => shallow(<Checkbox {...props}/>);
-  const mountCheckbox = props => mount(<Checkbox {...props}/>);
-
-  it('should create component', () => {
-    shallowCheckbox().should.exist;
-  });
-
-  it('should render checkbox', () => {
-    const checkbox = mountCheckbox().instance();
-    checkbox.input.should.have.property('type', 'checkbox');
-  });
-
-  it('should set name', () => {
-    const checkbox = mountCheckbox({name: 'test'}).instance();
-
-    checkbox.input.should.have.property('name', 'test');
-  });
-
-  it('should call handler for click event', () => {
-    const clickHandler = sandbox.stub();
-
-    const checkbox = mountCheckbox({onClick: clickHandler}).instance();
-    Simulate.click(checkbox.input);
-
-    clickHandler.should.have.been.called;
-  });
-
-  it('should not call handler on change event if disabled', () => {
-    const onChange = sandbox.stub();
-
-    const checkbox = shallowCheckbox({
-      disabled: true,
-      onChange
-    });
-
-    checkbox.simulate('click');
-    onChange.should.have.not.been.called;
-  });
-
-  it('should be unchecked by default', () => {
-    const checkbox = shallowCheckbox();
-
-    checkbox.should.not.be.checked();
-  });
-
-  it('should check control', () => {
-    const checkbox = mountCheckbox({defaultChecked: true}).instance();
-
-    checkbox.input.should.be.checked;
-  });
-
-  it('should be disabled', () => {
-    const checkbox = mountCheckbox({
-      disabled: true
-    }).instance();
-
-    checkbox.input.should.be.disabled;
-  });
-
-  it('should check control on change event', () => {
-    const eventMock = {
-      target: {
-        checked: true
-      }
-    };
-    const checkbox = mountCheckbox().instance();
-
-    Simulate.change(checkbox.input, eventMock);
-    checkbox.input.should.be.checked;
-  });
-});