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

package/components/tags-input/tags-input.tsx

@@ -0,0 +1,394 @@
+import React, {Component, PureComponent, SyntheticEvent} from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import getEventKey from '../global/get-event-key';
+import Select, {SelectItem} from '../select/select';
+import TagsList, {TagType} from '../tags-list/tags-list';
+import Caret from '../caret/caret';
+import memoize from '../global/memoize';
+import rerenderHOC from '../global/rerender-hoc';
+
+import {Filter} from '../select/select__popup';
+
+import styles from './tags-input.css';
+
+function noop() {}
+
+/**
+ * @name Tags Input
+ */
+
+const POPUP_VERTICAL_SHIFT = 2;
+
+export interface ToggleTagParams {
+  tag: TagType
+}
+export interface TagsInputRequestParams {
+  query: string
+}
+export interface TagsInputProps {
+  dataSource: (params: TagsInputRequestParams) =>
+    readonly SelectItem[] | Promise<readonly SelectItem[]>
+  onAddTag: (params: ToggleTagParams) => void
+  onRemoveTag: (params: ToggleTagParams) => void
+  customTagComponent: Component
+  maxPopupHeight: number
+  minPopupWidth: number
+  canNotBeEmpty: boolean
+  disabled: boolean
+  autoOpen: boolean
+  renderOptimization: boolean
+  legacyMode: boolean
+  allowAddNewTags: boolean
+  filter: boolean | Filter
+  placeholder: string
+  className?: string | null | undefined
+  tags?: readonly TagType[] | null | undefined
+  loadingMessage?: string | undefined
+  notFoundMessage?: string | undefined
+}
+interface TagsInputState {
+  tags: TagType[]
+  prevTags: TagType[] | null
+  suggestions: SelectItem[]
+  loading: boolean
+  focused: boolean
+  query: string
+  activeIndex: number | null | undefined
+}
+export default class TagsInput extends PureComponent<TagsInputProps, TagsInputState> {
+  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: TagsInputProps) {
+    super(props);
+    this.ngModelStateField = TagsInput.ngModelStateField;
+  }
+
+  state: TagsInputState = {
+    tags: [],
+    prevTags: null,
+    suggestions: [],
+    loading: true,
+    focused: false,
+    query: '',
+    activeIndex: 0
+  };
+
+  static getDerivedStateFromProps({tags}: TagsInputProps, {prevTags}: TagsInputState) {
+    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';
+  ngModelStateField: string;
+
+  node?: HTMLElement | null;
+  nodeRef = (node: HTMLElement | null) => {
+    this.node = node;
+  };
+
+  input?: HTMLInputElement | null;
+  caret?: Caret;
+  getInputNode() {
+    if (!this.input) {
+      this.input = this.select?.filter;
+      if (this.input) {
+        this.caret = new Caret(this.input);
+      }
+    }
+    return this.input;
+  }
+
+  setActiveIndex(activeIndex?: number | null) {
+    this.setState({activeIndex});
+  }
+
+  focusInput = () => {
+    this.getInputNode()?.focus();
+  };
+
+  addTag = (tag: TagType | null) => {
+    if (tag == null) {
+      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: TagType) {
+    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: SyntheticEvent) => {
+    if (event.target !== this.node) {
+      return;
+    }
+
+    this.loadSuggestions(this.getInputNode()?.value);
+    this.focusInput();
+  };
+
+  filterExistingTags = (suggestions: readonly SelectItem[]) => {
+    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});
+        }
+      } catch (e) {
+        this.setState({loading: false});
+      }
+    });
+
+  private _focusHandler = () => {
+    this.setActiveIndex(null);
+    this.setState({focused: true});
+  };
+
+  private _blurHandler = () => {
+    this.setState({focused: false});
+  };
+
+  selectTag = (moveForward?: boolean) => {
+    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: React.KeyboardEvent) => {
+    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) {
+      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;
+      }
+    }
+
+    return true;
+  };
+
+  handleClick = memoize((tag: TagType) => () => {
+    this.setActiveIndex(this.state.tags.indexOf(tag));
+  });
+
+  handleRemove = memoize((tag: TagType) => () => this.onRemoveTag(tag));
+
+  handleTagCreation = (label: string) => {
+    this.addTag({key: label, label});
+  };
+
+  select?: Select | null;
+  selectRef = (el: Select | null) => {
+    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);
+export type TagsInputAttrs = JSX.LibraryManagedAttributes<typeof TagsInput, TagsInputProps>
+

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.examples.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import checkmarkIcon from '@jetbrains/icons/checkmark';
+
+import reactDecorator from '../../.storybook/react-decorator';
+
+import TagsList from './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.test.tsx

@@ -0,0 +1,45 @@
+import React, {Component} from 'react';
+import {shallow, render} from 'enzyme';
+
+import TagsList, {TagsListAttrs} from './tags-list';
+
+describe('Tags List', () => {
+  let tagsList;
+  const tagsMock = [{key: 1, label: 'test1'}];
+  const shallowTagsList = (props?: Partial<TagsListAttrs>) =>
+    shallow(<TagsList tags={tagsMock} {...props}/>);
+  const renderTagsList = (props?: Partial<TagsListAttrs>) =>
+    render(<TagsList tags={tagsMock} {...props}/>);
+
+  describe('DOM', () => {
+    it('should render tags list', () => {
+      shallowTagsList().should.have.data('test', 'ring-tags-list');
+    });
+
+    it('should render passed label inside tags', () => {
+      renderTagsList().find('[data-test~="ring-tag"]').should.have.text('test1');
+    });
+
+    it('should render custom tag', () => {
+      class CustomTag extends Component {
+        render() {
+          return (<span data-test="custom-tag" className="custom-tag"/>);
+        }
+      }
+
+      tagsList = renderTagsList({
+        customTagComponent: CustomTag
+      });
+
+      tagsList.find('.custom-tag').should.have.data('test', 'custom-tag');
+    });
+
+    it('Should use passed className', () => {
+      tagsList = shallowTagsList({
+        className: 'test-class'
+      });
+
+      tagsList.should.have.className('test-class');
+    });
+  });
+});

package/components/tags-list/tags-list.tsx

@@ -0,0 +1,107 @@
+import React, {Component, ComponentType, HTMLAttributes, ReactNode} from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import Tag, {TagAttrs} from '../tag/tag';
+
+function noop() {}
+
+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.node,
+    tags: PropTypes.array,
+    customTagComponent: PropTypes.elementType,
+    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: T, focusTag: boolean) {
+    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>
+    );
+  }
+}
+
+export type TagsListAttrs<T extends TagType = TagType> =
+  JSX.LibraryManagedAttributes<typeof TagsList, TagsListProps<T>>

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

@@ -2,7 +2,7 @@ import angular from 'angular';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
 
-import TemplateNG from '@jetbrains/ring-ui/components/template-ng/template-ng';
+import TemplateNG from './template-ng';
 
 export default {
   title: 'Legacy Angular/Template Ng',

package/components/text/text.examples.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import reactDecorator from '../../.storybook/react-decorator';
+
+import Group from '../group/group';
+
+import Text from './text';
+
+export default {
+  title: 'Components/Text',
+  decorators: [reactDecorator()],
+
+  parameters: {
+    notes: 'A component for rendering text content.'
+  }
+};
+
+export const basic = () => (
+  <Group>
+    <Text>Text</Text>
+    <Text info>with an info message</Text>
+  </Group>
+);
+
+basic.storyName = 'Text';

package/components/text/text.test.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import {shallow, mount} from 'enzyme';
+
+import Text, {TextProps} from './text';
+
+describe('Text', () => {
+  const shallowText = (props?: TextProps) => shallow(<Text {...props}/>);
+  const mountText = (props?: TextProps) => mount(<Text {...props}/>);
+
+  it('should create component', () => {
+    mountText().should.have.type(Text);
+  });
+
+  it('should wrap children with span', () => {
+    shallowText().should.have.tagName('span');
+  });
+
+  it('should use passed className', () => {
+    shallowText({className: 'test-class'}).should.have.className('test-class');
+  });
+
+  it('should use pass rest props to dom node', () => {
+    shallowText({'data-test': 'foo'}).should.have.data('test', 'foo');
+  });
+});

package/components/text/text.tsx

@@ -0,0 +1,34 @@
+import React, {Component, HTMLAttributes} from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import styles from './text.css';
+
+export interface TextProps extends HTMLAttributes<HTMLElement> {
+  info?: boolean | null | undefined
+  'data-test'?: string | null | undefined
+}
+
+/**
+ * @name Text
+ */
+
+export default class Text extends Component<TextProps> {
+  static propTypes = {
+    children: PropTypes.node,
+    info: PropTypes.bool,
+    className: PropTypes.string
+  };
+
+  render() {
+    const {children, className, info, ...restProps} = this.props;
+
+    const classes = classNames(styles.text, className, {
+      [styles.info]: info
+    });
+
+    return (
+      <span className={classes} {...restProps}>{children}</span>
+    );
+  }
+}

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

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