@jetbrains/ring-ui 5.1.23 → 5.1.25

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

@@ -0,0 +1,275 @@
+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 { Size } from '../input/input';
+import { ControlsHeightContext } from '../global/controls-height';
+import getUID from '../global/get-uid';
+import inputStyles from '../input/input.css';
+import ControlLabel from '../control-label/control-label';
+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: PropTypes.instanceOf(Component),
+        maxPopupHeight: PropTypes.number,
+        minPopupWidth: PropTypes.number,
+        placeholder: PropTypes.string,
+        canNotBeEmpty: PropTypes.bool,
+        disabled: PropTypes.bool,
+        autoOpen: PropTypes.bool,
+        renderOptimization: PropTypes.bool,
+        filter: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape({ fn: PropTypes.func })]),
+        size: PropTypes.string,
+        height: PropTypes.string,
+        label: PropTypes.node,
+        loadingMessage: PropTypes.string,
+        notFoundMessage: PropTypes.string,
+        hint: PropTypes.node,
+        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,
+        allowAddNewTags: false,
+        filter: { fn: () => true },
+        placeholder: 'Select an option',
+        size: Size.M
+    };
+    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';
+    ngModelStateField;
+    static contextType = ControlsHeightContext;
+    id = this.props.id || getUID('ring-tags-list-');
+    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;
+    }
+    setActiveIndex(activeIndex) {
+        this.setState({ activeIndex });
+    }
+    focusInput = () => {
+        this.getInputNode()?.focus();
+    };
+    focus = () => {
+        this.focusInput();
+    };
+    addTag = (tag) => {
+        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) {
+        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 && event.target.parentElement !== this.node) {
+            return;
+        }
+        this.select?._clickHandler();
+    };
+    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 });
+            }
+        }
+        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 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 && Number(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) => () => {
+        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 { disabled, canNotBeEmpty, allowAddNewTags, filter, size, labelType, height = this.context, label } = this.props;
+        const classes = classNames(styles.tagsInput, [inputStyles[`size${size}`]], [inputStyles[`height${height}`]], {
+            [styles.tagsInputDisabled]: disabled,
+            [styles.tagsInputFocused]: focused
+        }, this.props.className);
+        return (<div 
+        // it transfers focus to input
+        role="presentation" className={classes} onKeyDown={this.handleKeyDown} onClick={this.clickHandler} ref={this.nodeRef}>
+        {label && (<ControlLabel htmlFor={this.id} disabled={disabled} type={labelType}>{label}</ControlLabel>)}
+
+        <TagsList tags={tags} activeIndex={activeIndex} disabled={disabled} canNotBeEmpty={canNotBeEmpty} handleRemove={this.handleRemove} className={styles.tagsList} tagClassName={styles.tag} handleClick={this.handleClick} customTagComponent={this.props.customTagComponent}>
+          <Select id={this.id} 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} hint={this.props.hint}/>
+        </TagsList>
+      </div>);
+    }
+}
+export const RerenderableTagsInput = rerenderHOC(TagsInput);

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

@@ -0,0 +1,7 @@
+/**
+ * @name Tags Input Ng
+ */
+import angularComponentFactory from '../global/angular-component-factory';
+import TagsInput from '../tags-input/tags-input';
+
+export default angularComponentFactory(TagsInput, 'TagsInput').name;

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

@@ -0,0 +1,41 @@
+import angular from 'angular';
+
+import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
+
+import TagsInputNG from './tags-input-ng';
+
+export default {
+  title: 'Legacy Angular/Tags Input Ng',
+  decorators: [angularDecorator()],
+
+  parameters: {
+    notes: 'Provides an Angular wrapper for Tags Input.'
+  }
+};
+
+export const basic = ({onAddTag, onRemoveTag}) => {
+  angular.module(APP_NAME, [TagsInputNG]).controller('ExampleCtrl', function ctrl($q) {
+    this.tags = [{key: 'test1', label: 'test1'}, {key: 'test2', label: 'test2'}];
+
+    this.dataSource = () =>
+      $q.when([{key: 'test3', label: 'test3'}, {key: 'test4', label: 'test4'}]);
+
+    this.onAddTag = onAddTag;
+
+    this.removeTag = onRemoveTag;
+  });
+  return `
+      <div ng-controller="ExampleCtrl as ctrl">
+        <rg-tags-input
+          tags="ctrl.tags"
+          x-data-source="ctrl.dataSource"
+          placeholder="'Type something'"
+          on-add-tag="ctrl.onAddTag"
+          on-remove-tag="ctrl.removeTag"
+        ></rg-tags-input>
+      </div>
+    `;
+};
+
+basic.storyName = 'Tags Input Ng';
+basic.argTypes = {onAddTag: {}, onRemoveTag: {}};

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' | 'children'> {
+    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): React.JSX.Element;
+    render(): React.JSX.Element;
+}
+export type TagsListAttrs<T extends TagType = TagType> = JSX.LibraryManagedAttributes<typeof TagsList, TagsListProps<T>>;
+export {};

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

@@ -0,0 +1,45 @@
+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: 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, 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>);
+    }
+}

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

@@ -0,0 +1,57 @@
+import angular from 'angular';
+
+import RingAngularComponent from '../global/ring-angular-component';
+
+/**
+ * @name Template Ng
+*/
+
+const angularModule = angular.module('Ring.template', []);
+
+class RgTemplateController extends RingAngularComponent {
+  currentScope = null;
+
+  constructor(...args) {
+    super(...args);
+
+    const {$scope, $attrs} = this.$inject;
+    $scope.$watch($attrs.rgTemplate || $attrs.template, this.render);
+  }
+
+  render = template => {
+    const {$scope, $element, $compile} = this.$inject;
+
+    this.cleanup();
+
+    this.currentScope = $scope.$new();
+
+    this.currentScope.$evalAsync(() => {
+      $element.html(template);
+      this.addInnerClass();
+      $compile($element.contents())(this.currentScope);
+    });
+  };
+
+  addInnerClass = () => {
+    const {rgTemplateClass} = this.$inject.$attrs;
+    if (rgTemplateClass) {
+      this.$inject.$element.contents().addClass(rgTemplateClass);
+    }
+  };
+
+  cleanup() {
+    if (this.currentScope) {
+      this.currentScope.$destroy();
+      this.currentScope = null;
+    }
+  }
+}
+RgTemplateController.$inject = ['$scope', '$element', '$attrs', '$compile'];
+
+angularModule.directive('rgTemplate', function rgTemplateDirective() {
+  return {
+    controller: RgTemplateController
+  };
+});
+
+export default angularModule.name;

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

@@ -0,0 +1,32 @@
+import angular from 'angular';
+
+import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
+
+import TemplateNG from './template-ng';
+
+export default {
+  title: 'Legacy Angular/Template Ng',
+  decorators: [angularDecorator()],
+
+  parameters: {
+    hermione: {skip: true}
+  }
+};
+
+export const basic = () => {
+  angular.module(APP_NAME, [TemplateNG]);
+
+  return '<rg-template template="\'<label>Input<br/><input/></label>\'"></rg-template>';
+};
+
+basic.storyName = 'basic';
+
+export const withController = () => {
+  angular.module(APP_NAME, [TemplateNG]).controller('ExampleCtrl', function ctrl() {
+    this.template = '<button>button</button>';
+  });
+
+  return '<rg-template template="ctrl.template" ng-controller="ExampleCtrl as ctrl"></rg-template>';
+};
+
+withController.storyName = 'with controller';

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

@@ -0,0 +1,97 @@
+/* global inject */
+import Template from './template-ng';
+
+describe('Template Ng', () => {
+  let $compile;
+  let $rootScope;
+
+  beforeEach(window.module(Template));
+
+  beforeEach(inject((_$rootScope_, _$compile_) => {
+    $rootScope = _$rootScope_;
+    $compile = _$compile_;
+  }));
+
+  afterEach(() => {
+    $rootScope.$destroy();
+  });
+
+  function build(template) {
+    const $element = $compile(template)($rootScope);
+    const element = $element[0];
+    const ctrl = $element.controller('rgTemplate');
+
+    $rootScope.$digest();
+
+    return {element, ctrl};
+  }
+
+  it('should work as an element', () => {
+    const {element} = build('<rg-template template="\'<test></test>\'"></rg-template>');
+
+    element.should.contain('test');
+  });
+
+  it('should work as an attribute', () => {
+    const {element} = build('<div rg-template="\'<test></test>\'"></div>');
+
+    element.should.contain('test');
+  });
+
+  it('should render a given template', () => {
+    $rootScope.template = '<test></test>';
+    const {element} = build('<rg-template template="template"></rg-template>');
+
+    element.should.contain('test');
+  });
+
+  it('should apply a given template class', () => {
+    $rootScope.template = '<test></test>';
+    const {element} = build('<rg-template template="template" rg-template-class="test-class"></rg-template>');
+
+    element.querySelector('test').should.match('.test-class');
+  });
+
+  it('should watch a given template expression', () => {
+    $rootScope.template = '<test></test>';
+    const {element} = build('<rg-template template="template"></rg-template>');
+    $rootScope.template = '<test2></test2>';
+    $rootScope.$digest();
+
+    element.should.contain('test2');
+  });
+
+  it('should watch a parent scope', () => {
+    $rootScope.template = '<test>{{ id }}</test>';
+    $rootScope.id = '123';
+    const {element} = build('<rg-template template="template"></rg-template>');
+
+    element.should.contain.text('123');
+
+    $rootScope.id = '456';
+    $rootScope.$digest();
+
+    element.should.contain.text('456');
+  });
+
+  it('should work correctly with an empty template', () => {
+    $rootScope.template = '<test></test>';
+    const {element} = build('<rg-template template="template"></rg-template>');
+    $rootScope.template = '';
+    $rootScope.$digest();
+
+    element.should.be.empty;
+  });
+
+  it('should remove current elements after changing a template expression', () => {
+    $rootScope.template = '<test></test>';
+    const {element} = build('<div><rg-template template="template"></rg-template></div>');
+
+    element.should.contain('test');
+
+    $rootScope.template = '<test2></test2>';
+    $rootScope.$digest();
+
+    element.should.not.contain('test');
+  });
+});

package/components/text/text.css

@@ -0,0 +1,21 @@
+@import "../global/variables.css";
+
+.text {
+  color: var(--ring-text-color);
+}
+
+.sizeS {
+  font-size: var(--ring-font-size-smaller);
+}
+
+.sizeM {
+  font-size: var(--ring-font-size);
+}
+
+.sizeL {
+  font-size: var(--ring-font-size-larger);
+}
+
+.info {
+  color: var(--ring-secondary-color);
+}

package/components/text/text.d.ts

@@ -0,0 +1,23 @@
+import React, { Component, HTMLAttributes } from 'react';
+import PropTypes from 'prop-types';
+type TextSize = 's' | 'm' | 'l';
+export interface TextProps extends HTMLAttributes<HTMLElement> {
+    info?: boolean | null | undefined;
+    size?: TextSize;
+    'data-test'?: string | null | undefined;
+}
+declare const TextSize: Record<string, TextSize>;
+/**
+ * @name Text
+ */
+export default class Text extends Component<TextProps> {
+    static propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        info: PropTypes.Requireable<boolean>;
+        size: PropTypes.Requireable<TextSize>;
+        className: PropTypes.Requireable<string>;
+    };
+    static Size: Record<string, TextSize>;
+    render(): React.JSX.Element;
+}
+export {};

package/components/text/text.js

@@ -0,0 +1,31 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import styles from './text.css';
+const TextSize = {
+    S: 's',
+    M: 'm',
+    L: 'l'
+};
+/**
+ * @name Text
+ */
+export default class Text extends Component {
+    static propTypes = {
+        children: PropTypes.node,
+        info: PropTypes.bool,
+        size: PropTypes.oneOf(Object.keys(TextSize).map(it => TextSize[it])),
+        className: PropTypes.string
+    };
+    static Size = TextSize;
+    render() {
+        const { children, className, info, size, ...restProps } = this.props;
+        const classes = classNames(styles.text, className, {
+            [styles.info]: info,
+            [styles.sizeS]: size === Text.Size.S,
+            [styles.sizeM]: size === Text.Size.M,
+            [styles.sizeL]: size === Text.Size.L
+        });
+        return (<span className={classes} {...restProps}>{children}</span>);
+    }
+}