@jetbrains/ring-ui 4.1.5 → 5.0.0-beta.2

package/components/tags-input/tags-input.js

@@ -1,347 +0,0 @@
-import React, {Component, PureComponent} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-import getEventKey from '../global/get-event-key';
-import Select from '../select/select';
-import TagsList from '../tags-list/tags-list';
-import Caret from '../caret/caret';
-import memoize from '../global/memoize';
-import rerenderHOC from '../global/rerender-hoc';
-
-import styles from './tags-input.css';
-
-function noop() {}
-
-/**
- * @name Tags Input
- */
-
-const POPUP_VERTICAL_SHIFT = 2;
-
-export default class TagsInput extends PureComponent {
-  static propTypes = {
-    className: PropTypes.string,
-    tags: PropTypes.array,
-    /**
-     * Datasource should return array(or promise) of suggestions.
-     * Each suggestion should contain key and label fields.
-     * DataSource should handle caching and response racing (when later request
-     * responded earlier) by himself.
-     */
-    dataSource: PropTypes.func,
-    onAddTag: PropTypes.func,
-    onRemoveTag: PropTypes.func,
-    customTagComponent: (props, propName, componentName) => {
-      if (props[propName] && !props[propName].prototype instanceof Component) {
-        return new Error(`Invalid prop ${propName} supplied to ${componentName}. Validation failed.`);
-      }
-      return null;
-    },
-    maxPopupHeight: PropTypes.number,
-    minPopupWidth: PropTypes.number,
-    placeholder: PropTypes.string,
-    canNotBeEmpty: PropTypes.bool,
-    disabled: PropTypes.bool,
-    autoOpen: PropTypes.bool,
-    renderOptimization: PropTypes.bool,
-    legacyMode: PropTypes.bool,
-    filter: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape({fn: PropTypes.func})]),
-
-    loadingMessage: PropTypes.string,
-    notFoundMessage: PropTypes.string,
-    allowAddNewTags: PropTypes.bool
-  };
-
-  static defaultProps = {
-    dataSource: noop,
-    onAddTag: noop,
-    onRemoveTag: noop,
-    customTagComponent: null,
-    maxPopupHeight: 500,
-    minPopupWidth: 360,
-    canNotBeEmpty: false,
-    disabled: false,
-    autoOpen: false,
-    renderOptimization: true,
-    legacyMode: false,
-    allowAddNewTags: false,
-    filter: {fn: () => true},
-    placeholder: 'Select an option'
-  };
-
-  constructor(props) {
-    super(props);
-    this.ngModelStateField = TagsInput.ngModelStateField;
-  }
-
-  state = {
-    tags: [],
-    prevTags: null,
-    suggestions: [],
-    loading: true,
-    focused: false,
-    query: '',
-    activeIndex: 0
-  };
-
-  static getDerivedStateFromProps({tags}, {prevTags}) {
-    const nextState = {prevTags: tags};
-    if (tags != null && tags !== prevTags) {
-      Object.assign(nextState, {tags, activeIndex: tags.length});
-    }
-    return nextState;
-  }
-
-  componentDidMount() {
-    if (this.props.autoOpen && !this.props.disabled) {
-      this.focusInput();
-      this.loadSuggestions();
-      this.select._showPopup();
-    }
-  }
-
-  static ngModelStateField = 'tags';
-
-  nodeRef = node => {
-    this.node = node;
-  };
-
-  getInputNode() {
-    if (!this.input) {
-      this.input = this.select.filter;
-      this.caret = new Caret(this.input);
-    }
-    return this.input;
-  }
-
-  setActiveIndex(activeIndex) {
-    this.setState({activeIndex});
-  }
-
-  focusInput = () => {
-    this.getInputNode().focus();
-  };
-
-  addTag = tag => {
-    const isUniqueTag = this.state.tags.filter(item => tag.key === item.key).length === 0;
-    this.select.clear();
-    this.select.filterValue('');
-
-    if (isUniqueTag) {
-      this.setState(prevState => ({
-        tags: prevState.tags.concat([tag])
-      }));
-      this.props.onAddTag({tag});
-      this.setActiveIndex();
-    }
-  };
-
-  onRemoveTag(tagToRemove) {
-    return Promise.resolve(this.props.onRemoveTag({tag: tagToRemove})).
-      then(() => {
-        const tags = this.state.tags.filter(tag => tag !== tagToRemove);
-        if (this.node) {
-          this.setState({tags});
-          this.focusInput();
-        }
-        return tags;
-      }, this.focusInput);
-  }
-
-  clickHandler = event => {
-    if (event.target !== this.node) {
-      return;
-    }
-
-    this.loadSuggestions(this.getInputNode().value);
-    this.focusInput();
-  };
-
-  filterExistingTags = suggestions => {
-    const tagsMap = new Map(this.state.tags.map(tag => [tag.key, tag]));
-    return suggestions.filter(suggestion => !tagsMap.has(suggestion.key));
-  };
-
-  loadSuggestions = (query = '') =>
-    this.setState({loading: true, query}, async () => {
-      try {
-        let allSuggestions = this.props.dataSource({query});
-        if (typeof allSuggestions.then === 'function') {
-          allSuggestions = await allSuggestions;
-        }
-        const suggestions = this.filterExistingTags(allSuggestions);
-        if (this.node && query === this.state.query) {
-          this.setState({suggestions, loading: false});
-        }
-      } catch (e) {
-        this.setState({loading: false});
-      }
-    });
-
-  _focusHandler = () => {
-    this.setActiveIndex(null);
-    this.setState({focused: true});
-  };
-
-  _blurHandler = () => {
-    this.setState({focused: false});
-  };
-
-  selectTag = moveForward => {
-    const activeIndex = typeof this.state.activeIndex === 'number'
-      ? this.state.activeIndex
-      : this.state.tags.length + 1;
-    let newActiveIndex = activeIndex + (moveForward ? 1 : -1);
-
-    if (newActiveIndex >= this.state.tags.length) {
-      newActiveIndex = this.state.tags.length - 1;
-    } else if (newActiveIndex < 0) {
-      newActiveIndex = 0;
-    }
-
-    if (this.state.activeIndex !== newActiveIndex) {
-      this.setActiveIndex(newActiveIndex);
-    }
-  };
-
-  handleKeyDown = event => {
-    const key = getEventKey(event);
-    const isInputFocused = () => event.target.matches(this.getInputNode().tagName);
-
-    if (key === ' ' && this.props.allowAddNewTags) {
-      event.stopPropagation();
-      const value = this.getInputNode().value;
-      if (value !== '') {
-        this.handleTagCreation(value);
-      }
-      return true;
-    }
-
-    if (this.select._popup.isVisible()) {
-      return true;
-    }
-
-
-    if (key === 'ArrowLeft') {
-      if (this.getInputNode() && this.caret.getPosition() > 0) {
-        return true;
-      }
-
-      this.selectTag();
-      return false;
-    }
-
-    if (key === 'ArrowRight' && !isInputFocused(event)) {
-      if (this.state.activeIndex === this.state.tags.length - 1) {
-        if (!this.props.disabled) {
-          this.getInputNode().focus();
-          this.setActiveIndex();
-        }
-      } else {
-        this.selectTag(true);
-      }
-      return false;
-    }
-
-    if (!this.props.disabled) {
-      if (key === 'Backspace' && !this.getInputNode().value) {
-        event.preventDefault();
-        const tagsLength = this.state.tags.length;
-        this.select._hidePopup(true); // otherwise confirmation may be overlapped by popup
-        this.onRemoveTag(this.state.tags[tagsLength - 1]);
-        return false;
-      }
-
-      if ((key === 'Delete' || key === 'Backspace') && this.state.tags[this.state.activeIndex]) {
-        this.onRemoveTag(this.state.tags[this.state.activeIndex]).
-          then(() => this.selectTag(true));
-        return false;
-      }
-    }
-
-    return true;
-  };
-
-  handleClick = memoize(tag => () => {
-    this.setActiveIndex(this.state.tags.indexOf(tag));
-  });
-
-  handleRemove = memoize(tag => () => this.onRemoveTag(tag));
-
-  handleTagCreation = label => {
-    this.addTag({key: label, label});
-  };
-
-  selectRef = el => {
-    this.select = el;
-  };
-
-  render() {
-    const {focused, tags, activeIndex} = this.state;
-    const {legacyMode, disabled, canNotBeEmpty, allowAddNewTags, filter} = this.props;
-    const classes = classNames(
-      styles.tagsInput,
-      {
-        [styles.tagsInputDisabled]: disabled,
-        [styles.tagsInputFocused]: focused,
-        [styles.tagsInputLegacyMode]: legacyMode
-      },
-      this.props.className);
-
-    return (
-      <div
-        // it transfers focus to input
-        role="presentation"
-        className={classes}
-        onKeyDown={this.handleKeyDown}
-        onClick={this.clickHandler}
-        ref={this.nodeRef}
-      >
-        <TagsList
-          tags={tags}
-          activeIndex={activeIndex}
-          disabled={disabled}
-          canNotBeEmpty={canNotBeEmpty}
-          handleRemove={this.handleRemove}
-          className={styles.tagsList}
-          tagClassName={styles.tag}
-          handleClick={this.handleClick}
-        >
-          <Select
-            ref={this.selectRef}
-            size={Select.Size.AUTO}
-            type={Select.Type.INPUT_WITHOUT_CONTROLS}
-            inputPlaceholder={this.props.placeholder}
-            data={this.state.suggestions}
-            className={classNames(styles.tagsSelect)}
-            onSelect={this.addTag}
-            onFocus={this._focusHandler}
-            onBlur={this._blurHandler}
-            renderOptimization={this.props.renderOptimization}
-            add={allowAddNewTags ? {prefix: 'Add new tag'} : undefined}
-            onAdd={allowAddNewTags ? this.handleTagCreation : undefined}
-            filter={filter}
-            maxHeight={this.props.maxPopupHeight}
-            minWidth={this.props.minPopupWidth}
-            top={POPUP_VERTICAL_SHIFT}
-            loading={this.state.loading}
-            onFilter={this.loadSuggestions}
-            onBeforeOpen={this.loadSuggestions}
-            onKeyDown={this.handleKeyDown}
-            disabled={this.props.disabled}
-
-            loadingMessage={this.props.loadingMessage}
-            notFoundMessage={this.props.notFoundMessage}
-          />
-        </TagsList>
-
-        {!legacyMode && <div className={styles.underline}/>}
-        {!legacyMode && <div className={styles.focusUnderline}/>}
-      </div>
-    );
-  }
-}
-
-export const RerenderableTagsInput = rerenderHOC(TagsInput);
-

package/components/tags-input/tags-input.test.js

@@ -1,234 +0,0 @@
-import React from 'react';
-import {shallow, mount} from 'enzyme';
-
-import Select from '../select/select';
-
-import TagsInput from './tags-input';
-
-describe('Tags Input', () => {
-  const fakeTags = [{key: 1, label: 'test1'}];
-
-  const shallowTagsInput = props => shallow(<TagsInput tags={fakeTags} {...props}/>);
-  const mountTagsInput = props => mount(<TagsInput tags={fakeTags} {...props}/>);
-
-  describe('DOM', () => {
-    it('should render select in input_without_controls mode', () => {
-      shallowTagsInput().find(Select).should.have.prop('type', Select.Type.INPUT_WITHOUT_CONTROLS);
-    });
-
-    it('Should use passed className', () => {
-      const wrapper = shallowTagsInput({
-        className: 'test-class'
-      });
-      wrapper.should.have.className('test-class');
-    });
-  });
-
-
-  describe('Select', () => {
-    it('should auto open popup', () => {
-      const wrapper = mountTagsInput({autoOpen: true});
-      const instance = wrapper.instance();
-
-      instance.select._popup.isVisible().should.be.true;
-    });
-
-    it('Should add tag', () => {
-      const wrapper = mountTagsInput();
-      const instance = wrapper.instance();
-      instance.addTag({key: 2, label: 'test2'});
-      wrapper.state('tags').should.deep.contain({key: 2, label: 'test2'});
-    });
-
-    it('Should remove tag', async () => {
-      const wrapper = mountTagsInput();
-      const instance = wrapper.instance();
-      await instance.onRemoveTag(fakeTags[0]);
-      wrapper.state('tags').should.be.empty;
-    });
-
-    it('Should clear selected value after adding tag', () => {
-      const wrapper = mountTagsInput();
-      const instance = wrapper.instance();
-      sandbox.spy(instance.select, 'clear');
-      instance.addTag({key: 2, label: 'test2'});
-
-      instance.select.clear.should.have.been.called;
-    });
-
-    it('Should clear select input after adding tag', () => {
-      const wrapper = mountTagsInput();
-      const instance = wrapper.instance();
-      sandbox.spy(instance.select, 'filterValue');
-      instance.addTag({key: 2, label: 'test2'});
-
-      instance.select.filterValue.should.have.been.calledWith('');
-    });
-
-    it('Should copy tags to state on receiving props', () => {
-      const wrapper = shallowTagsInput();
-      const newTags = [{key: 4, label: 'test5'}];
-      wrapper.setProps({tags: newTags});
-      wrapper.state('tags').should.be.deep.equal(newTags);
-    });
-  });
-
-
-  describe('DataSource', () => {
-    it('Should call datasource and set suggestions returned', async () => {
-      const suggestions = [{key: 14, label: 'suggestion 14'}];
-      const dataSource = sandbox.spy(() => Promise.resolve(suggestions));
-      const wrapper = mountTagsInput({dataSource});
-      const instance = wrapper.instance();
-
-      await instance.loadSuggestions();
-      wrapper.state('suggestions').should.deep.equal(suggestions);
-    });
-
-    it('Should call datasource with query entered', () => {
-      const dataSource = sandbox.spy(() => Promise.resolve([]));
-      const wrapper = shallowTagsInput({dataSource});
-      const instance = wrapper.instance();
-      instance.loadSuggestions('testquery');
-
-      dataSource.should.have.been.calledWith({query: 'testquery'});
-    });
-
-    it('Should call datasource when arrow down pressed', () => {
-      const dataSource = sandbox.spy(() => Promise.resolve([]));
-      const wrapper = mountTagsInput({dataSource});
-      const instance = wrapper.instance();
-      instance.select.props.onBeforeOpen();
-
-      dataSource.should.have.been.calledWith({query: ''});
-    });
-  });
-
-
-  describe('Loading', () => {
-    it('Should turn on loading message immediately after initialization', () => {
-      const wrapper = mountTagsInput();
-      wrapper.should.have.state('loading', true);
-    });
-
-    it('Should turn on loading message while loading suggestions', async () => {
-      const dataSource = sandbox.spy(() => Promise.resolve([]));
-      const wrapper = mountTagsInput({dataSource});
-      const instance = wrapper.instance();
-
-      wrapper.should.have.state('loading', true);
-
-      await instance.loadSuggestions();
-      wrapper.should.have.state('loading', false);
-    });
-  });
-
-  it('Should drop existing tags from suggestions by key', () => {
-    const wrapper = mountTagsInput();
-    const instance = wrapper.instance();
-    const notAddedSuggestions = instance.filterExistingTags([
-      {key: 1, label: 'test1'},
-      {key: 2, label: 'test2'}
-    ]);
-
-    notAddedSuggestions.should.be.deep.equal([{key: 2, label: 'test2'}]);
-  });
-
-
-  describe('Shortcuts', () => {
-    describe('Keyboard handling', () => {
-      const getEventMock = keyboardKey => Object.assign({
-        key: keyboardKey,
-        preventDefault: sandbox.spy(),
-        target: {
-          matches: () => true
-        }
-      });
-
-      it('Should remove last tag on pressing backspace if input is empty', () => {
-        const wrapper = mountTagsInput();
-        const instance = wrapper.instance();
-        sandbox.spy(instance, 'onRemoveTag');
-        instance.getInputNode().value = '';
-        instance.handleKeyDown(getEventMock('Backspace'));
-
-        instance.onRemoveTag.should.have.been.calledWith(fakeTags[0]);
-      });
-
-      it('Should not tag on pressing backspace if input is not empty', () => {
-        const wrapper = mountTagsInput();
-        const instance = wrapper.instance();
-        sandbox.spy(instance, 'onRemoveTag');
-        instance.getInputNode().value = 'entered value';
-        instance.handleKeyDown(getEventMock('Backspace'));
-
-        instance.onRemoveTag.should.not.have.been.called;
-      });
-
-      it('should remove tag with DELETE key if tag is focused', () => {
-        const wrapper = mountTagsInput();
-        const instance = wrapper.instance();
-        sandbox.spy(instance, 'onRemoveTag');
-        wrapper.setState({
-          activeIndex: 0
-        });
-        instance.handleKeyDown(getEventMock('Delete'));
-        instance.onRemoveTag.should.have.been.calledWith(fakeTags[0]);
-      });
-
-      it('should remove tag with BACKSPACE key if tag is focused', () => {
-        const wrapper = mountTagsInput({
-          activeIndex: 0
-        });
-        const instance = wrapper.instance();
-        sandbox.spy(instance, 'onRemoveTag');
-        instance.handleKeyDown(getEventMock('Backspace'));
-
-        instance.onRemoveTag.should.have.been.calledWith(fakeTags[0]);
-      });
-
-      it('should not remove tag with DELETE key if tag is not focused', () => {
-        const wrapper = mountTagsInput();
-        const instance = wrapper.instance();
-        sandbox.spy(instance, 'onRemoveTag');
-        instance.handleKeyDown(getEventMock('Delete'));
-        instance.onRemoveTag.should.not.have.been.called;
-      });
-
-      it('should not navigate to the first tag from select input', () => {
-        const wrapper = mountTagsInput();
-        const instance = wrapper.instance();
-        sandbox.spy(instance, 'selectTag');
-        instance.getInputNode();
-        instance.caret = {
-          getPosition: () => 1
-        };
-        instance.handleKeyDown(getEventMock('ArrowLeft'));
-
-        instance.selectTag.should.not.have.been.called;
-      });
-
-      it('should navigate to the first tag from select input', () => {
-        const wrapper = mountTagsInput();
-        const instance = wrapper.instance();
-        instance.caret = {
-          getPosition: sandbox.spy()
-        };
-        instance.handleKeyDown(getEventMock('ArrowLeft'));
-
-        wrapper.should.have.state('activeIndex', 0);
-      });
-
-      it('should navigate to the select input', () => {
-        const wrapper = mountTagsInput({
-          activeIndex: 0
-        });
-        const instance = wrapper.instance();
-        sandbox.spy(instance, 'setActiveIndex');
-        instance.handleKeyDown(getEventMock('ArrowRight'));
-
-        instance.setActiveIndex.should.not.have.been.calledWith(undefined);
-      });
-    });
-  });
-});

package/components/tags-list/tags-list.examples.js

@@ -1,41 +0,0 @@
-import React from 'react';
-import checkmarkIcon from '@jetbrains/icons/checkmark';
-
-import reactDecorator from '../../.storybook/react-decorator';
-
-import TagsList from '@jetbrains/ring-ui/components/tags-list/tags-list';
-
-export default {
-  title: 'Components/Tags List',
-  decorators: [reactDecorator()],
-
-  parameters: {
-    notes: 'Displays a list of tags.'
-  }
-};
-
-export const basic = () => (
-  <TagsList
-    className="test-additional-class"
-    tags={[{key: 'test1', label: 'test1'}, {key: 'test2', label: 'test2'}]}
-  />
-);
-
-basic.storyName = 'basic';
-
-export const withIcons = () => (
-  <TagsList
-    tags={[
-      {key: 'test1', label: 'test1', rgTagIcon: checkmarkIcon},
-      {key: 'test2', label: 'test2'}
-    ]}
-  />
-);
-
-withIcons.storyName = 'with icons';
-
-export const disabled = () => (
-  <TagsList disabled tags={[{key: 'test1', label: 'test1'}, {key: 'test2', label: 'test2'}]}/>
-);
-
-disabled.storyName = 'disabled';

package/components/tags-list/tags-list.js

@@ -1,93 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-import Tag from '../tag/tag';
-
-function noop() {}
-
-/**
- * @name Tags List
- */
-
-export default class TagsList extends Component {
-  static propTypes = {
-    children: PropTypes.node,
-    tags: PropTypes.array,
-    customTagComponent: (props, propName, componentName) => {
-      if (props[propName] && !props[propName].prototype instanceof Component) {
-        return new Error(`Invalid prop ${propName} supplied to ${componentName}. Validation failed.`);
-      }
-      return null;
-    },
-    activeIndex: PropTypes.number,
-    canNotBeEmpty: PropTypes.bool,
-    disabled: PropTypes.bool,
-    handleClick: PropTypes.func,
-    handleRemove: PropTypes.func,
-    className: PropTypes.string,
-    tagClassName: PropTypes.string
-  };
-
-  static defaultProps = {
-    customTagComponent: null,
-    canNotBeEmpty: false,
-    disabled: false,
-    handleClick: noop,
-    handleRemove: noop
-  };
-
-  renderTag(tag, focusTag) {
-    const TagComponent = this.props.customTagComponent || Tag;
-    const readOnly = this.props.disabled || tag.readOnly ||
-      (this.props.canNotBeEmpty && this.props.tags.length === 1);
-
-    const {tagClassName} = this.props;
-
-    return (
-      <TagComponent
-        {...tag}
-        readOnly={readOnly}
-        disabled={this.props.disabled || tag.disabled}
-        focused={focusTag}
-        onClick={this.props.handleClick(tag)}
-        onRemove={this.props.handleRemove(tag)}
-        className={tagClassName}
-      >{tag.label}</TagComponent>
-    );
-  }
-
-  render() {
-    const {
-      children,
-      className,
-      customTagComponent,
-      canNotBeEmpty,
-      handleClick,
-      tagClassName,
-      handleRemove,
-      tags,
-      activeIndex,
-      ...props
-    } = this.props;
-    const classes = classNames(
-      'ring-js-shortcuts',
-      className
-    );
-
-    const tagsList = (this.props.tags || []).map(
-      (tag, index) => this.renderTag(tag, this.props.activeIndex === index)
-    );
-
-    return (
-      <div
-        data-test="ring-tags-list"
-        className={classes}
-        {...props}
-      >
-        {tagsList}
-        {children}
-      </div>
-    );
-  }
-}