@jetbrains/ring-ui 4.1.12 → 5.0.0-beta.11

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

@@ -1,347 +1,265 @@
-import React, {Component, PureComponent} from 'react';
+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() {}
-
+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});
+    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: PropTypes.instanceOf(Component),
+        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;
     }
-    return nextState;
-  }
-
-  componentDidMount() {
-    if (this.props.autoOpen && !this.props.disabled) {
-      this.focusInput();
-      this.loadSuggestions();
-      this.select._showPopup();
+    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;
     }
-  }
-
-  static ngModelStateField = 'tags';
-
-  nodeRef = node => {
-    this.node = node;
-  };
-
-  getInputNode() {
-    if (!this.input) {
-      this.input = this.select.filter;
-      this.caret = new Caret(this.input);
+    componentDidMount() {
+        if (this.props.autoOpen && !this.props.disabled) {
+            this.focusInput();
+            this.loadSuggestions();
+            this.select?._showPopup();
+        }
     }
-    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();
+    static ngModelStateField = 'tags';
+    ngModelStateField;
+    node;
+    nodeRef = (node) => {
+        this.node = node;
+    };
+    input;
+    caret;
+    getInputNode() {
+        if (!this.input) {
+            this.input = this.select?.filter;
+            if (this.input) {
+                this.caret = new Caret(this.input);
+            }
+        }
+        return this.input;
     }
-  };
-
-  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();
+    setActiveIndex(activeIndex) {
+        this.setState({ activeIndex });
+    }
+    focusInput = () => {
+        this.getInputNode()?.focus();
+    };
+    addTag = (tag) => {
+        if (tag == null) {
+            return;
         }
-        return tags;
-      }, this.focusInput);
-  }
-
-  clickHandler = event => {
-    if (event.target !== this.node) {
-      return;
+        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);
     }
-
-    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;
+    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 {
+            const suggestionsResult = this.props.dataSource({ query });
+            const allSuggestions = Array.isArray(suggestionsResult)
+                ? suggestionsResult
+                : await suggestionsResult;
+            const suggestions = this.filterExistingTags(allSuggestions);
+            if (this.node && query === this.state.query) {
+                this.setState({ suggestions, loading: false });
+            }
         }
-        const suggestions = this.filterExistingTags(allSuggestions);
-        if (this.node && query === this.state.query) {
-          this.setState({suggestions, loading: false});
+        catch (e) {
+            this.setState({ 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) {
+    _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 instanceof Element &&
+            event.target.matches(this.getInputNode()?.tagName ?? '');
+        if (key === ' ' && this.props.allowAddNewTags) {
+            event.stopPropagation();
+            const value = this.getInputNode()?.value;
+            if (value != null && value !== '') {
+                this.handleTagCreation(value);
+            }
+            return true;
+        }
+        if (this.select?._popup?.isVisible()) {
+            return true;
+        }
+        if (key === 'ArrowLeft') {
+            if (this.getInputNode() && this.caret != null && this.caret.getPosition() > 0) {
+                return true;
+            }
+            this.selectTag();
+            return false;
+        }
+        if (key === 'ArrowRight' && !isInputFocused()) {
+            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) {
-          this.getInputNode().focus();
-          this.setActiveIndex();
+            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.activeIndex != null &&
+                this.state.tags[this.state.activeIndex]) {
+                this.onRemoveTag(this.state.tags[this.state.activeIndex]).
+                    then(() => this.selectTag(true));
+                return false;
+            }
         }
-      } 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
+        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 });
+    };
+    select;
+    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}
-          />
+        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>
-    );
-  }
+      </div>);
+    }
 }
-
 export const RerenderableTagsInput = rerenderHOC(TagsInput);
-

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

@@ -2,7 +2,7 @@ import angular from 'angular';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
 
-import TagsInputNG from '@jetbrains/ring-ui/components/tags-input-ng/tags-input-ng';
+import TagsInputNG from './tags-input-ng';
 
 export default {
   title: 'Legacy Angular/Tags Input Ng',

package/components/tags-list/tags-list.d.ts

@@ -0,0 +1,46 @@
+import React, { Component, ComponentType, HTMLAttributes, ReactNode } from 'react';
+import PropTypes from 'prop-types';
+import { TagAttrs } from '../tag/tag';
+declare function noop(): void;
+export interface TagType extends Omit<TagAttrs, 'onClick'> {
+    label?: ReactNode;
+    key?: string | number | null | undefined;
+}
+export interface TagsListProps<T extends TagType> extends HTMLAttributes<HTMLElement> {
+    tags: readonly T[];
+    customTagComponent: ComponentType<TagAttrs>;
+    canNotBeEmpty: boolean;
+    disabled: boolean;
+    handleClick: (tag: T) => (e: React.MouseEvent<HTMLElement>) => void;
+    handleRemove: (tag: T) => (e: React.MouseEvent<HTMLElement>) => void;
+    activeIndex?: number | null | undefined;
+    tagClassName?: string | null | undefined;
+}
+/**
+ * @name Tags List
+ */
+export default class TagsList<T extends TagType> extends Component<TagsListProps<T>> {
+    static propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        tags: PropTypes.Requireable<any[]>;
+        customTagComponent: PropTypes.Requireable<PropTypes.ReactComponentLike>;
+        activeIndex: PropTypes.Requireable<number>;
+        canNotBeEmpty: PropTypes.Requireable<boolean>;
+        disabled: PropTypes.Requireable<boolean>;
+        handleClick: PropTypes.Requireable<(...args: any[]) => any>;
+        handleRemove: PropTypes.Requireable<(...args: any[]) => any>;
+        className: PropTypes.Requireable<string>;
+        tagClassName: PropTypes.Requireable<string>;
+    };
+    static defaultProps: {
+        customTagComponent: null;
+        canNotBeEmpty: boolean;
+        disabled: boolean;
+        handleClick: typeof noop;
+        handleRemove: typeof noop;
+    };
+    renderTag(tag: T, focusTag: boolean): JSX.Element;
+    render(): JSX.Element;
+}
+export declare type TagsListAttrs<T extends TagType = TagType> = JSX.LibraryManagedAttributes<typeof TagsList, TagsListProps<T>>;
+export {};