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

package/components/list/list__item.jsx

@@ -0,0 +1,129 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import dataTests from '../global/data-tests';
+import Avatar, { Size as AvatarSize } from '../avatar/avatar';
+import Checkbox from '../checkbox/checkbox';
+import Icon from '../icon/icon';
+import getUID from '../global/get-uid';
+import globalStyles from '../global/global.css';
+import styles from './list.css';
+/**
+ * @constructor
+ * @extends {ReactComponent}
+ */
+const RING_UNIT = 8;
+const DEFAULT_PADDING = 16;
+const CHECKBOX_WIDTH = 28;
+export default class ListItem extends PureComponent {
+    id = getUID('list-item-');
+    stopBubbling = (e) => e.stopPropagation();
+    _isString = (val) => typeof val === 'string' || val instanceof String;
+    render() {
+        const { scrolling, className, disabled, checkbox, avatar, subavatar, glyph, icon, rightGlyph, description, label, title, details, hover, rgItemType, level, tabIndex, compact, onClick, onCheckboxChange, onMouseOver, onMouseDown, onMouseUp, rightNodes, leftNodes, showGeneratedAvatar, username, ...restProps } = this.props;
+        const checkable = checkbox !== undefined;
+        const shouldShowGeneratedAvatar = showGeneratedAvatar && username != null;
+        const hasLeftNodes = leftNodes || glyph || avatar || shouldShowGeneratedAvatar;
+        const showCheckbox = checkable && (checkbox || !hasLeftNodes || (hover && !disabled));
+        const classes = classNames(styles.item, globalStyles.resetButton, className, {
+            [styles.action]: !disabled,
+            [styles.hover]: hover && !disabled,
+            [styles.compact]: compact,
+            [styles.scrolling]: scrolling,
+            [styles.disabled]: disabled
+        });
+        const detailsClasses = classNames({
+            [styles.details]: details,
+            [styles.padded]: icon !== undefined ||
+                checkbox !== undefined ||
+                glyph !== undefined
+        });
+        const style = {
+            paddingLeft: `${(Number(level) || 0) * RING_UNIT + DEFAULT_PADDING + (showCheckbox ? CHECKBOX_WIDTH : 0)}px`
+        };
+        let computedTitle = null;
+        if (this._isString(title)) {
+            // if title is specified and is a string then use it
+            computedTitle = title;
+        }
+        else {
+            // otherwise use label if it is a string;
+            // label can also be an element, use empty string in this case
+            computedTitle = this._isString(label) ? label : '';
+        }
+        const dataTest = dataTests({
+            'ring-list-item': (restProps['data-test'] || '').indexOf('ring-list-item') === -1,
+            'ring-list-item-action': !disabled,
+            'ring-list-item-selected': checkbox
+        }, restProps['data-test']);
+        return (<div className={styles.itemContainer} data-test={dataTest}>
+        {showCheckbox && (<div className={styles.checkboxContainer}>
+            <Checkbox aria-labelledby={this.id} checked={checkbox} disabled={disabled} onChange={onCheckboxChange} onClick={this.stopBubbling}/>
+          </div>)}
+        <button id={this.id} type="button" tabIndex={tabIndex} onClick={onClick} onMouseOver={onMouseOver} onMouseDown={onMouseDown} onFocus={onMouseOver} onMouseUp={onMouseUp} className={classes} style={style}>
+          <div className={styles.top} onMouseOut={this.stopBubbling} onBlur={this.stopBubbling}>
+            {!showCheckbox && (<div className={styles.left}>
+                {leftNodes}
+                {glyph && (<Icon className={styles.glyph} glyph={glyph} size={this.props.iconSize}/>)}
+                {(avatar || shouldShowGeneratedAvatar) && (<Avatar className={styles.avatar} url={avatar} size={AvatarSize.Size20} subavatar={subavatar} username={username}/>)}
+              </div>)}
+
+            <span className={styles.label} title={computedTitle} data-test="ring-list-item-label">{label}</span>
+
+            {description && (<span className={styles.description} data-test="ring-list-item-description">{description}</span>)}
+
+            <div className={styles.right}>
+              {rightGlyph && (<Icon className={styles.rightGlyph} glyph={rightGlyph} size={this.props.iconSize}/>)}
+              {icon && (<div className={styles.icon} style={{ backgroundImage: `url("${icon}")` }}/>)}
+              {rightNodes}
+            </div>
+          </div>
+
+          {details && <div className={detailsClasses}>{details}</div>}
+        </button>
+      </div>);
+    }
+}
+ListItem.propTypes = {
+    scrolling: PropTypes.bool,
+    hover: PropTypes.bool,
+    details: PropTypes.string,
+    disabled: PropTypes.bool,
+    className: PropTypes.string,
+    tabIndex: PropTypes.number,
+    checkbox: PropTypes.bool,
+    description: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.element,
+        PropTypes.array
+    ]),
+    showGeneratedAvatar: PropTypes.bool,
+    username: PropTypes.string,
+    avatar: PropTypes.string,
+    subavatar: PropTypes.string,
+    glyph: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
+    icon: PropTypes.string,
+    iconSize: PropTypes.number,
+    rightNodes: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.element,
+        PropTypes.array
+    ]),
+    leftNodes: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.element,
+        PropTypes.array
+    ]),
+    label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+    title: PropTypes.string,
+    level: PropTypes.number,
+    rgItemType: PropTypes.number,
+    rightGlyph: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
+    compact: PropTypes.bool,
+    onClick: PropTypes.func,
+    onCheckboxChange: PropTypes.func,
+    onMouseOver: PropTypes.func,
+    onMouseDown: PropTypes.func,
+    onMouseUp: PropTypes.func,
+    'data-test': PropTypes.string
+};

package/components/list/list__link.d.ts

@@ -0,0 +1,9 @@
+import { PureComponent } from 'react';
+import { ListDataItemProps } from './consts';
+/**
+ * @constructor
+ * @extends {ReactComponent}
+ */
+export default class ListLink<T> extends PureComponent<ListDataItemProps<T>> {
+    render(): JSX.Element;
+}

package/components/list/list__link.jsx

@@ -0,0 +1,43 @@
+import React, { Component, PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import Link, { linkHOC } from '../link/link';
+import dataTests from '../global/data-tests';
+import styles from './list.css';
+/**
+ * @constructor
+ * @extends {ReactComponent}
+ */
+export default class ListLink extends PureComponent {
+    render() {
+        const { scrolling, 'data-test': dataTest, className, label, hover, description, rgItemType, url, onCheckboxChange, disabled, LinkComponent, compact, hoverClassName, ...restProps } = this.props;
+        const classes = classNames(styles.item, className, {
+            [styles.actionLink]: !disabled,
+            [styles.compact]: compact,
+            [styles.scrolling]: scrolling
+        });
+        const Comp = LinkComponent ? linkHOC(LinkComponent) : Link;
+        return (<Comp pseudo={!this.props.href} {...restProps} hover={hover && !disabled} className={classes} data-test={dataTests('ring-list-link', dataTest)}>
+        {label}
+      </Comp>);
+    }
+}
+ListLink.propTypes = {
+    ...Link.propTypes,
+    description: PropTypes.string,
+    label: PropTypes.oneOfType([
+        PropTypes.element,
+        PropTypes.string,
+        PropTypes.func
+    ]),
+    rgItemType: PropTypes.number,
+    scrolling: PropTypes.bool.isRequired,
+    url: PropTypes.string,
+    LinkComponent: PropTypes.oneOfType([
+        PropTypes.instanceOf(Component),
+        PropTypes.func,
+        PropTypes.string
+    ]),
+    onCheckboxChange: PropTypes.func.isRequired,
+    compact: PropTypes.bool
+};

package/components/list/list__separator.d.ts

@@ -0,0 +1,5 @@
+import { PureComponent } from 'react';
+import { ListDataItemProps } from './consts';
+export default class ListSeparator<T> extends PureComponent<ListDataItemProps<T>> {
+    render(): JSX.Element;
+}

package/components/list/list__separator.jsx

@@ -0,0 +1,21 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import styles from './list.css';
+export default class ListSeparator extends PureComponent {
+    render() {
+        const { description, isFirst, className } = this.props;
+        const classes = classNames(styles.separator, className, {
+            [styles.separator_first]: isFirst
+        });
+        return (<span className={classes}>{description}</span>);
+    }
+}
+ListSeparator.propTypes = {
+    className: PropTypes.string,
+    description: PropTypes.oneOfType([
+        PropTypes.element,
+        PropTypes.string
+    ]),
+    isFirst: PropTypes.bool
+};

package/components/list/list__title.d.ts

@@ -0,0 +1,5 @@
+import { PureComponent } from 'react';
+import { ListDataItemProps } from './consts';
+export default class ListTitle<T> extends PureComponent<ListDataItemProps<T>> {
+    render(): JSX.Element;
+}

package/components/list/list__title.jsx

@@ -0,0 +1,28 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import styles from './list.css';
+export default class ListTitle extends PureComponent {
+    render() {
+        const { className, description, label, isFirst } = this.props;
+        const classes = classnames(styles.title, className, {
+            [styles.title_first]: isFirst
+        });
+        return (<span className={classes} data-test="ring-list-title">
+        <span className={classnames(styles.label, styles.text)} data-test="ring-list-title-label">{label}</span>
+        <div className={styles.description} data-test="ring-list-title-description">{description}</div>
+      </span>);
+    }
+}
+ListTitle.propTypes = {
+    className: PropTypes.string,
+    description: PropTypes.oneOfType([
+        PropTypes.element,
+        PropTypes.string
+    ]),
+    label: PropTypes.oneOfType([
+        PropTypes.element,
+        PropTypes.string
+    ]),
+    isFirst: PropTypes.bool
+};

package/components/list/list__users-groups-source.d.ts

@@ -0,0 +1,27 @@
+import Auth, { AuthUser } from '../auth/auth';
+import HubSourceUsersGroups, { HubSourceUsersGroupsOptions, UserGroup } from '../hub-source/hub-source__users-groups';
+interface ListUsersGroupsSourceOptions extends Partial<HubSourceUsersGroupsOptions> {
+    GroupsTitle: string;
+    NoGroupsTitle: string;
+    UsersTitle: string;
+    NoUsersTitle: string;
+    getPluralForUserCount: (count: number) => string;
+}
+declare enum Filter {
+    ALL = 0,
+    USERS = 1,
+    GROUPS = 2
+}
+export default class ListUsersGroupsSource extends HubSourceUsersGroups {
+    static Filter: typeof Filter;
+    listSourceOptions: ListUsersGroupsSourceOptions;
+    constructor(auth: Auth, options?: Partial<ListUsersGroupsSourceOptions>);
+    getGroupsSectionTitle(groups: UserGroup[]): string;
+    getUsersSectionTitle(users: AuthUser[]): string;
+    getForList(query?: string, filter?: Filter): Promise<{
+        rgItemType: import("./consts").Type;
+        key: number;
+        description: string;
+    }[]>;
+}
+export {};

package/components/list/list__users-groups-source.js

@@ -1,89 +1,74 @@
 import GroupIcon from '@jetbrains/icons/group';
-
 import HubSourceUsersGroups from '../hub-source/hub-source__users-groups';
-
 import List from './list';
-
 const defaultOptions = {
-  GroupsTitle: 'Groups',
-  NoGroupsTitle: 'No groups',
-
-  UsersTitle: 'Users',
-  NoUsersTitle: 'No users',
-
-  getPluralForUserCount: count => {
-    // eslint-disable-next-line no-magic-numbers
-    const plural = count % 10 !== 1 || count % 100 === 11;
-    return `${count} member${plural ? 's' : ''}`;
-  }
-};
-
-const Filter = {
-  ALL: 0,
-  USERS: 1,
-  GROUPS: 2
+    GroupsTitle: 'Groups',
+    NoGroupsTitle: 'No groups',
+    UsersTitle: 'Users',
+    NoUsersTitle: 'No users',
+    getPluralForUserCount: count => {
+        // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+        const plural = count % 10 !== 1 || count % 100 === 11;
+        return `${count} member${plural ? 's' : ''}`;
+    }
 };
-
+var Filter;
+(function (Filter) {
+    Filter[Filter["ALL"] = 0] = "ALL";
+    Filter[Filter["USERS"] = 1] = "USERS";
+    Filter[Filter["GROUPS"] = 2] = "GROUPS";
+})(Filter || (Filter = {}));
 export default class ListUsersGroupsSource extends HubSourceUsersGroups {
-  static Filter = Filter;
-
-  constructor(auth, options) {
-    super(auth, options);
-
-    this.listSourceOptions = Object.assign({}, defaultOptions, options);
-  }
-
-  getGroupsSectionTitle(groups) {
-    return groups.length
-      ? this.listSourceOptions.GroupsTitle
-      : this.listSourceOptions.NoGroupsTitle;
-  }
-
-  getUsersSectionTitle(users) {
-    return users.length ? this.listSourceOptions.UsersTitle : this.listSourceOptions.NoUsersTitle;
-  }
-
-  async getForList(query, filter = Filter.ALL) {
-    const [users, groups] = await this.getUserAndGroups(query);
-    const items = [];
-
-    if (filter === Filter.ALL) {
-      items.push({
-        rgItemType: List.ListProps.Type.SEPARATOR,
-        key: 2,
-        description: this.getUsersSectionTitle(users)
-      });
+    static Filter = Filter;
+    listSourceOptions;
+    constructor(auth, options) {
+        super(auth, options);
+        this.listSourceOptions = Object.assign({}, defaultOptions, options);
     }
-
-    if (filter !== Filter.GROUPS) {
-      users.forEach(user => items.push({
-        ...user,
-        key: user.id,
-        label: user.name,
-        avatar: user.profile ? user.profile.avatar.url : null,
-        description: user.login
-      }));
+    getGroupsSectionTitle(groups) {
+        return groups.length
+            ? this.listSourceOptions.GroupsTitle
+            : this.listSourceOptions.NoGroupsTitle;
     }
-
-    if (filter === Filter.ALL) {
-      items.push({
-        rgItemType: List.ListProps.Type.SEPARATOR,
-        key: 1,
-        description: this.getGroupsSectionTitle(groups)
-      });
+    getUsersSectionTitle(users) {
+        return users.length ? this.listSourceOptions.UsersTitle : this.listSourceOptions.NoUsersTitle;
     }
-
-    if (filter !== Filter.USERS) {
-      groups.forEach(group => items.push({
-        ...group,
-        key: group.id,
-        label: group.name,
-        avatar: group.iconUrl,
-        glyph: group.iconUrl ? null : GroupIcon,
-        description: this.listSourceOptions.getPluralForUserCount(group.userCount)
-      }));
+    async getForList(query, filter = Filter.ALL) {
+        const [users, groups] = await this.getUserAndGroups(query);
+        const items = [];
+        if (filter === Filter.ALL) {
+            items.push({
+                rgItemType: List.ListProps.Type.SEPARATOR,
+                key: 2,
+                description: this.getUsersSectionTitle(users)
+            });
+        }
+        if (filter !== Filter.GROUPS) {
+            users.forEach(user => items.push({
+                ...user,
+                key: user.id,
+                label: user.name,
+                avatar: user.profile ? user.profile.avatar?.url : null,
+                description: user.login
+            }));
+        }
+        if (filter === Filter.ALL) {
+            items.push({
+                rgItemType: List.ListProps.Type.SEPARATOR,
+                key: 1,
+                description: this.getGroupsSectionTitle(groups)
+            });
+        }
+        if (filter !== Filter.USERS) {
+            groups.forEach(group => items.push({
+                ...group,
+                key: group.id,
+                label: group.name,
+                avatar: group.iconUrl,
+                glyph: group.iconUrl ? null : GroupIcon,
+                description: this.listSourceOptions.getPluralForUserCount(group.userCount)
+            }));
+        }
+        return items;
     }
-
-    return items;
-  }
 }

package/components/loader/loader.d.ts

@@ -0,0 +1,28 @@
+import { HTMLAttributes, PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import LoaderCore, { LoaderCoreProps } from './loader__core';
+export interface LoaderProps extends Partial<LoaderCoreProps>, HTMLAttributes<HTMLElement> {
+    'data-test'?: string | null | undefined;
+}
+/**
+ * @name Loader
+ */
+/**
+ * Displays a large animated loader with an optional caption. Typical use cases: page loading animation, major action animation.
+ */
+export default class Loader extends PureComponent<LoaderProps> {
+    static propTypes: {
+        className: PropTypes.Requireable<string>;
+        size: PropTypes.Requireable<number>;
+        colors: PropTypes.Requireable<any[]>;
+        message: PropTypes.Requireable<string>;
+        'data-test': PropTypes.Requireable<string>;
+        stop: PropTypes.Requireable<boolean>;
+        deterministic: PropTypes.Requireable<boolean>;
+    };
+    componentDidUpdate(prevProps: LoaderProps): void;
+    componentWillUnmount(): void;
+    loader?: LoaderCore;
+    initLoader: (el: Node | null) => void;
+    render(): JSX.Element;
+}

package/components/loader/loader.jsx

@@ -0,0 +1,44 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import dataTests from '../global/data-tests';
+import LoaderCore from './loader__core';
+/**
+ * @name Loader
+ */
+/**
+ * Displays a large animated loader with an optional caption. Typical use cases: page loading animation, major action animation.
+ */
+export default class Loader extends PureComponent {
+    static propTypes = {
+        className: PropTypes.string,
+        size: PropTypes.number,
+        colors: PropTypes.array,
+        message: PropTypes.string,
+        'data-test': PropTypes.string,
+        stop: PropTypes.bool,
+        deterministic: PropTypes.bool
+    };
+    componentDidUpdate(prevProps) {
+        if (this.loader) {
+            if (!prevProps.stop && this.props.stop) {
+                this.loader.stopAnimation();
+            }
+            else if (prevProps.stop && !this.props.stop) {
+                this.loader.startAnimation();
+            }
+        }
+    }
+    componentWillUnmount() {
+        this.loader?.destroy();
+    }
+    loader;
+    initLoader = (el) => {
+        if (el) {
+            this.loader = new LoaderCore(el, this.props);
+        }
+    };
+    render() {
+        const { message, size, colors, 'data-test': dataTest, stop, deterministic, ...restProps } = this.props;
+        return (<div data-test={dataTests('ring-loader', dataTest)} {...restProps} ref={this.initLoader}/>);
+    }
+}

package/components/loader/loader__core.d.ts

@@ -0,0 +1,75 @@
+export interface Color {
+    r: number;
+    g: number;
+    b: number;
+}
+interface ParticleType {
+    step(): void;
+    isAlive(): boolean;
+    draw(ctx: CanvasRenderingContext2D): void;
+}
+export interface LoaderCoreProps {
+    size: number;
+    stop: boolean;
+    deterministic: boolean;
+    colors: Color[];
+    message?: string | null | undefined;
+}
+export default class LoaderCore {
+    static defaultProps: {
+        size: number;
+        stop: boolean;
+        deterministic: boolean;
+        colors: {
+            r: number;
+            g: number;
+            b: number;
+        }[];
+    };
+    static calculateGradient(startColor: Color, stopColor: Color, position: number): {
+        r: number;
+        g: number;
+        b: number;
+    };
+    props: LoaderCoreProps;
+    canvas: HTMLCanvasElement;
+    textNode: HTMLElement;
+    ctx: CanvasRenderingContext2D | null;
+    height: number;
+    width: number;
+    particles: ParticleType[];
+    baseSpeed: number;
+    colorIndex: number;
+    maxRadius: number;
+    minRadius: number;
+    colorChangeTick: number;
+    x: number;
+    y: number;
+    radius: number;
+    hSpeed: number;
+    vSpeed: number;
+    radiusSpeed: number;
+    tick: number;
+    isRunning: boolean;
+    constructor(containerNode: Node, props: Partial<LoaderCoreProps>);
+    static getPixelRatio(): number;
+    prepareInitialState(ticks: number): void;
+    handleLimits(coord: number, radius: number, speed: number, limit: number): number;
+    calculateNextCoordinates(): void;
+    calculateNextRadius(): void;
+    getNextColor(): {
+        r: number;
+        g: number;
+        b: number;
+    };
+    nextTick(): void;
+    step(): void;
+    removeDeadParticles(): void;
+    draw(): void;
+    loop(): void;
+    updateMessage(text: string): void;
+    stopAnimation(): void;
+    startAnimation(): void;
+    destroy(): void;
+}
+export {};