@jetbrains/ring-ui 6.0.6-beta.0 → 6.0.6

package/components/data-list/data-list.js

@@ -0,0 +1,119 @@
+/**
+  * @name Data List
+  */
+import React, { PureComponent, Component } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import focusSensorHOC from '../global/focus-sensor-hoc';
+import selectionShortcutsHOC from '../table/selection-shortcuts-hoc';
+import disableHoverHOC from '../table/disable-hover-hoc';
+import getUID from '../global/get-uid';
+import Shortcuts from '../shortcuts/shortcuts';
+import Loader from '../loader/loader';
+import { refObject } from '../global/prop-types';
+import Item, { moreLessButtonStates } from './item';
+import styles from './data-list.css';
+import Selection from './selection';
+class DataList extends PureComponent {
+    static defaultProps = {
+        loading: false,
+        onItemMoreLess: () => { },
+        itemMoreLessState: () => moreLessButtonStates.UNUSED,
+        remoteSelection: false
+    };
+    componentDidUpdate(prevProps) {
+        const { data, selection, onSelect, selectable } = this.props;
+        if (data !== prevProps.data && !prevProps.remoteSelection) {
+            onSelect(selection.cloneWith({ data }));
+        }
+        if (!selectable && prevProps.selectable) {
+            onSelect(selection.resetSelection());
+        }
+    }
+    shortcutsScope = getUID('ring-data-list-');
+    onItemFocus = (item) => {
+        const { selection, onSelect } = this.props;
+        onSelect(selection.focus(item));
+    };
+    onItemSelect = (item, selected) => {
+        const { selection, onSelect } = this.props;
+        if (selected) {
+            onSelect(selection.select(item));
+        }
+        else {
+            onSelect(selection.deselect(item));
+        }
+    };
+    onEqualPress = () => {
+        const { selection, itemFormatter } = this.props;
+        const focused = selection.getFocused();
+        if (focused == null) {
+            throw new Error('No focused item');
+        }
+        const item = itemFormatter(focused);
+        if (item.collapsed) {
+            item.onExpand?.();
+        }
+        else {
+            item.onCollapse?.();
+        }
+    };
+    shortcutsMap = {
+        '=': this.onEqualPress
+    };
+    render() {
+        const { data, className, loading, selection, disabledHover, itemFormatter, focused, innerRef } = this.props;
+        const shortcutsMap = { ...this.shortcutsMap, ...this.props.shortcutsMap };
+        const classes = classNames(className, {
+            [styles.dataList]: true,
+            [styles.disabledHover]: disabledHover,
+            [styles.multiSelection]: selection.getSelected().size > 0
+        });
+        return (<div className={styles.dataListWrapper} data-test="ring-data-list" ref={innerRef}>
+        {focused &&
+                (<Shortcuts map={shortcutsMap} scope={this.shortcutsScope}/>)}
+
+        <ul className={classes}>
+          {data.map(model => {
+                const item = itemFormatter(model);
+                const { id, key, title, items } = item;
+                const showMoreLessButton = this.props.itemMoreLessState?.(item);
+                return (<Item key={key || id} item={model} title={title} items={items} itemFormatter={itemFormatter} collapsible={item.collapsible} collapsed={item.collapsed} onCollapse={item.onCollapse} onExpand={item.onExpand} showFocus={selection.isFocused(model)} onFocus={this.onItemFocus} selection={selection} selectable={item.selectable} selected={selection.isSelected(model)} onSelect={this.onItemSelect} showMoreLessButton={showMoreLessButton} onItemMoreLess={this.props.onItemMoreLess}/>);
+            })}
+        </ul>
+
+        {loading && (<div className={data.length > 0 ? styles.loadingOverlay : undefined}>
+            <Loader />
+          </div>)}
+      </div>);
+    }
+}
+DataList.propTypes = {
+    className: PropTypes.string,
+    data: PropTypes.array.isRequired,
+    loading: PropTypes.bool,
+    focused: PropTypes.bool.isRequired,
+    disabledHover: PropTypes.bool,
+    selection: PropTypes.instanceOf(Selection).isRequired,
+    selectable: PropTypes.bool.isRequired,
+    shortcutsMap: PropTypes.shape({}).isRequired,
+    innerRef: PropTypes.oneOfType([
+        refObject(PropTypes.instanceOf(HTMLDivElement)),
+        PropTypes.func
+    ]),
+    itemFormatter: PropTypes.func.isRequired,
+    onItemMoreLess: PropTypes.func,
+    itemMoreLessState: PropTypes.func,
+    onSelect: PropTypes.func.isRequired,
+    remoteSelection: PropTypes.bool
+};
+const getContainer = () => disableHoverHOC(selectionShortcutsHOC(focusSensorHOC(DataList)));
+// eslint-disable-next-line react/no-multi-comp
+export default class DataListContainer extends Component {
+    static propTypes = getContainer().propTypes;
+    // https://stackoverflow.com/a/53882322/6304152
+    DataList = getContainer();
+    render() {
+        return <this.DataList {...this.props}/>;
+    }
+}

package/components/data-list/data-list.mock.d.ts

@@ -0,0 +1,16 @@
+import React, { ReactNode } from 'react';
+import { SelectionItem } from '../table/selection';
+export interface Item extends SelectionItem {
+    title: ReactNode;
+    collapsible?: boolean;
+    selectable?: boolean;
+    items?: Item[];
+}
+declare const items: Item[];
+export declare const moreItems: {
+    id: number;
+    selectable: boolean;
+    collapsible: boolean;
+    title: React.JSX.Element;
+}[];
+export default items;

package/components/data-list/data-list.mock.js

@@ -0,0 +1,207 @@
+/* eslint-disable react/jsx-no-literals */
+import React from 'react';
+import Link from '../link/link';
+import Badge from '../badge/badge';
+const items = [
+    {
+        id: 1,
+        title: <span><strong>Assigner</strong> in 60 projects</span>,
+        collapsible: true,
+        selectable: true,
+        items: [
+            {
+                id: 11,
+                title: '6 projects: as a member of jetbrains-team',
+                collapsible: true,
+                selectable: true,
+                items: [
+                    {
+                        id: 111,
+                        selectable: true,
+                        title: <Link href="#">TeamCity</Link>
+                    },
+                    {
+                        id: 112,
+                        selectable: true,
+                        title: <Link href="#">YouTrack</Link>
+                    },
+                    {
+                        id: 113,
+                        selectable: true,
+                        title: <Link href="#">Sandbox</Link>
+                    },
+                    {
+                        id: 114,
+                        selectable: true,
+                        title: <Link href="#">Exception Analyzer</Link>
+                    },
+                    {
+                        id: 115,
+                        selectable: true,
+                        title: <Link href="#">MPS</Link>
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        id: 2,
+        title: <span><strong>Code Reviewer</strong> in 5 projects</span>,
+        selectable: true,
+        collapsible: true,
+        items: [
+            {
+                id: 21,
+                selectable: true,
+                title: (<span>
+            <Link href="#">JetProfile</Link>
+            <span> </span>
+            <Badge gray>duplicate</Badge>
+          </span>)
+            },
+            {
+                id: 22,
+                title: '6 projects: as a member of jetbrains-team',
+                collapsible: true,
+                items: [
+                    {
+                        id: 221,
+                        collapsible: true,
+                        title: <Link href="#">TeamCity</Link>
+                    },
+                    {
+                        id: 222,
+                        collapsible: true,
+                        title: <Link href="#">YouTrack</Link>
+                    },
+                    {
+                        id: 223,
+                        collapsible: true,
+                        title: <Link href="#">Sandbox</Link>
+                    },
+                    {
+                        id: 224,
+                        collapsible: true,
+                        title: <Link href="#">Exception Analyzer</Link>
+                    },
+                    {
+                        id: 225,
+                        collapsible: true,
+                        title: <Link href="#">MPS</Link>
+                    }
+                ]
+            },
+            {
+                id: 23,
+                collapsible: true,
+                title: (<span>
+            <Link href="#">CustomJDK</Link>
+            <span>: as a member of ide-developers</span>
+          </span>)
+            }
+        ]
+    },
+    {
+        id: 3,
+        title: <span><strong>Code Viewer</strong> in 5 projects</span>,
+        selectable: true,
+        collapsible: true,
+        items: [
+            {
+                id: 31,
+                collapsible: true,
+                title: (<span>
+            <Link href="#">ide-frontend</Link>
+            <span>: as a member of ide-developers</span>
+          </span>)
+            },
+            {
+                id: 32,
+                collapsible: true,
+                title: (<span>
+            <Link href="#">ide-frontend</Link>
+            <span>: as a member of ide-frontend Code Viewers</span>
+          </span>)
+            }
+        ]
+    },
+    {
+        id: 4,
+        title: <span><strong>Commenter</strong> in 12 projects</span>,
+        collapsible: true,
+        items: [
+            {
+                id: 41,
+                collapsible: true,
+                title: (<span>
+            <Link href="#">Intellij IDEA</Link>
+            <span>: as a member of Registered Users</span>
+          </span>)
+            },
+            {
+                id: 42,
+                collapsible: true,
+                title: (<span>
+            <Link href="#">YouTrack Backlog</Link>
+            <span>: as a member of jetbrains-team</span>
+          </span>)
+            }
+        ]
+    },
+    {
+        id: 5,
+        collapsible: true,
+        title: (<span>
+        <strong>Developer</strong>
+        <span> in 57 projects </span>
+        <Badge>team role</Badge>
+      </span>),
+        items: [
+            {
+                id: 51,
+                selectable: true,
+                collapsible: true,
+                title: <Link href="#">Wasabi</Link>
+            }
+        ]
+    },
+    {
+        id: 6,
+        collapsible: true,
+        title: (<span>
+        <strong>Git Hosting Admin</strong>
+        <span> in project </span>
+        <Link href="#">Hackathon 2016</Link>
+        <span>: as a member of jetbrains-team</span>
+      </span>)
+    },
+    {
+        id: 7,
+        title: <span><strong>Git Hosting Checkout</strong> in 7 projects</span>,
+        selectable: true,
+        collapsible: true
+    }
+];
+export const moreItems = [
+    {
+        id: 91,
+        selectable: true,
+        collapsible: true,
+        title: (<span>
+        <Link href="#">More item 1</Link>
+        <span> </span>
+        <Badge gray>duplicate</Badge>
+      </span>)
+    },
+    {
+        id: 92,
+        selectable: true,
+        collapsible: true,
+        title: (<span>
+        <Link href="#">More item 2</Link>
+        <span> </span>
+        <Badge gray>duplicate</Badge>
+      </span>)
+    }
+];
+export default items;

package/components/data-list/item.d.ts

@@ -0,0 +1,50 @@
+import React, { PureComponent, ReactNode } from 'react';
+import Selection, { SelectionItem } from '../table/selection';
+export declare enum moreLessButtonStates {
+    UNUSED = 0,
+    MORE = 1,
+    MORE_LOADING = 2,
+    LESS = 3
+}
+export interface BaseFormattedItem<T> {
+    items?: readonly T[];
+    title?: ReactNode;
+    collapsible?: boolean | null | undefined;
+    collapsed?: boolean | null | undefined;
+    onCollapse?: () => void;
+    onExpand?: () => void;
+    selectable?: boolean | undefined;
+}
+export interface FormattedItem<T> extends BaseFormattedItem<T> {
+    key?: string | null | undefined;
+    id?: string | number | null | undefined;
+}
+export interface ItemProps<T extends SelectionItem> extends BaseFormattedItem<T> {
+    item: T;
+    onFocus: (item: T) => void;
+    onSelect: (item: T, selected: boolean) => void;
+    itemFormatter: (item: T) => FormattedItem<T>;
+    level: number;
+    parentShift: number;
+    showMoreLessButton: moreLessButtonStates;
+    onItemMoreLess: (item: T, more: boolean) => void;
+    className?: string | null | undefined;
+    showFocus?: boolean | undefined;
+    selection: Selection<T>;
+    selected?: boolean | undefined;
+}
+export default class Item<T extends SelectionItem> extends PureComponent<ItemProps<T>> {
+    static defaultProps: {
+        items: never[];
+        level: number;
+        parentShift: number;
+        showMoreLessButton: moreLessButtonStates;
+        onItemMoreLess: () => void;
+    };
+    onShowMore: () => void;
+    onShowLess: () => void;
+    onFocus: () => void;
+    onSelect: (selected: boolean) => void;
+    renderItem: (model: T, parentShift: number) => React.JSX.Element;
+    render(): React.JSX.Element;
+}

package/components/data-list/item.js

@@ -0,0 +1,114 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import chevronRightIcon from '@jetbrains/icons/chevron-right';
+import chevronDownIcon from '@jetbrains/icons/chevron-down';
+import Link from '../link/link';
+import Text from '../text/text';
+import LoaderInline from '../loader-inline/loader-inline';
+import Button from '../button/button';
+import Selection from '../table/selection';
+import Title from './title';
+import styles from './data-list.css';
+export var moreLessButtonStates;
+(function (moreLessButtonStates) {
+    moreLessButtonStates[moreLessButtonStates["UNUSED"] = 0] = "UNUSED";
+    moreLessButtonStates[moreLessButtonStates["MORE"] = 1] = "MORE";
+    moreLessButtonStates[moreLessButtonStates["MORE_LOADING"] = 2] = "MORE_LOADING";
+    moreLessButtonStates[moreLessButtonStates["LESS"] = 3] = "LESS";
+})(moreLessButtonStates || (moreLessButtonStates = {}));
+const ITEM_LEFT_OFFSET = 32;
+const LIST_LEFT_OFFSET = 24;
+export default class Item extends PureComponent {
+    static defaultProps = {
+        items: [],
+        level: 0,
+        parentShift: 0,
+        showMoreLessButton: moreLessButtonStates.UNUSED,
+        onItemMoreLess: () => { }
+    };
+    onShowMore = () => {
+        const { onItemMoreLess, item } = this.props;
+        onItemMoreLess(item, true);
+    };
+    onShowLess = () => {
+        const { onItemMoreLess, item } = this.props;
+        onItemMoreLess(item, false);
+    };
+    onFocus = () => {
+        const { onFocus, item } = this.props;
+        onFocus(item);
+    };
+    onSelect = (selected) => {
+        const { onSelect, item } = this.props;
+        onSelect(item, selected);
+    };
+    renderItem = (model, parentShift) => {
+        const { onFocus, onSelect, selection, level, itemFormatter } = this.props;
+        const item = itemFormatter(model);
+        return (<Item key={item.key || item.id} item={model} title={item.title} items={item.items} level={level + 1} parentShift={parentShift} itemFormatter={itemFormatter} collapsible={item.collapsible} collapsed={item.collapsed} onCollapse={item.onCollapse} onExpand={item.onExpand} showFocus={selection.isFocused(model)} onFocus={onFocus} selection={selection} selectable={item.selectable} selected={selection.isSelected(model)} onSelect={onSelect}/>);
+    };
+    render() {
+        const { title, items, showMoreLessButton, level, parentShift, showFocus, selectable, selected, collapsible, collapsed, onCollapse, onExpand } = this.props;
+        let moreLessButton;
+        if (showMoreLessButton === moreLessButtonStates.MORE ||
+            showMoreLessButton === moreLessButtonStates.MORE_LOADING) {
+            moreLessButton = (<Text info>
+          <Link inherit pseudo onClick={this.onShowMore}>{'Show more'}</Link>
+          {showMoreLessButton === moreLessButtonStates.MORE_LOADING &&
+                    <LoaderInline className={styles.showMoreLoader}/>}
+        </Text>);
+        }
+        else if (showMoreLessButton === moreLessButtonStates.LESS) {
+            moreLessButton = (<Text info>
+          <Link inherit pseudo onClick={this.onShowLess}>{'Show less'}</Link>
+        </Text>);
+        }
+        let collapserExpander = null;
+        if (collapsible) {
+            if (collapsed) {
+                collapserExpander = (<Button title="Expand" onClick={onExpand} icon={chevronRightIcon} className={styles.collapseButton} iconClassName={styles.collapseIcon} data-test="ring-data-list-expand"/>);
+            }
+            else {
+                collapserExpander = (<Button title="Collapse" onClick={onCollapse} icon={chevronDownIcon} className={styles.collapseButton} iconClassName={styles.collapseIcon} data-test="ring-data-list-collapse"/>);
+            }
+        }
+        const itemIsEmpty = !items?.length || (collapsible && collapsed);
+        const offset = level * LIST_LEFT_OFFSET + ITEM_LEFT_OFFSET + parentShift;
+        return (<li>
+        <Title title={title} focused={showFocus} showFocus={showFocus} selectable={selectable} selected={selected} collapserExpander={collapserExpander} onFocus={this.onFocus} onSelect={this.onSelect} offset={offset}/>
+
+        {!itemIsEmpty
+                ? (<ul className={styles.itemContent}>
+              {items.map(model => this.renderItem(model, parentShift))}
+
+              {showMoreLessButton !== moreLessButtonStates.UNUSED
+                        ? <li className={styles.showMore}>{moreLessButton}</li>
+                        : null}
+            </ul>)
+                : null}
+      </li>);
+    }
+}
+Item.propTypes = {
+    item: PropTypes.shape({
+        id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
+    }).isRequired,
+    title: PropTypes.node,
+    items: PropTypes.array,
+    className: PropTypes.string,
+    level: PropTypes.number,
+    parentShift: PropTypes.number,
+    itemFormatter: PropTypes.func.isRequired,
+    collapsible: PropTypes.bool,
+    collapsed: PropTypes.bool,
+    onCollapse: PropTypes.func,
+    onExpand: PropTypes.func,
+    showFocus: PropTypes.bool,
+    onFocus: PropTypes.func.isRequired,
+    selection: PropTypes.instanceOf(Selection).isRequired,
+    selectable: PropTypes.bool,
+    selected: PropTypes.bool,
+    onSelect: PropTypes.func.isRequired,
+    showMoreLessButton: PropTypes.number,
+    onItemMoreLess: PropTypes.func
+};

package/components/data-list/selection.d.ts

@@ -0,0 +1,16 @@
+import TableSelection, { CloneWithConfig, SelectionItem } from '../table/selection';
+export default class Selection<T extends SelectionItem> extends TableSelection<T> {
+    protected _buildData(data: T[]): Set<T>;
+    protected _buildSelected(data: Set<T>, selected: Set<T>): Set<T>;
+    private _getDescendants;
+    private _getAncestors;
+    private _selectDescendants;
+    private _deselectDescendants;
+    private _selectAncestors;
+    private _deselectAncestors;
+    select(value?: T | null): Selection<T>;
+    focus(value: T | null | undefined): Selection<T>;
+    resetSelection(): Selection<T>;
+    cloneWith(config: CloneWithConfig<T>): Selection<T>;
+    deselect(value?: T | null): Selection<T>;
+}

package/components/data-list/selection.js

@@ -0,0 +1,81 @@
+import TableSelection from '../table/selection';
+export default class Selection extends TableSelection {
+    _buildData(data) {
+        return new Set(this._getDescendants(data));
+    }
+    _buildSelected(data, selected) {
+        const _selected = new Set(selected);
+        [...data].forEach(item => {
+            if (_selected.has(item)) {
+                this._selectDescendants(item, _selected);
+            }
+        });
+        return _selected;
+    }
+    _getDescendants(items) {
+        let result = [];
+        items.forEach(item => {
+            result.push(item);
+            result = [...result, ...this._getDescendants(this._getChildren(item))];
+        });
+        return result;
+    }
+    _getAncestors(item) {
+        let result = [];
+        const parent = [...this._data].find(it => this._getChildren(it).includes(item));
+        if (parent) {
+            result = [parent, ...this._getAncestors(parent)];
+        }
+        return result;
+    }
+    _selectDescendants(item, selected) {
+        this._getDescendants(this._getChildren(item)).
+            forEach(it => selected.add(it));
+    }
+    _deselectDescendants(item, selected) {
+        this._getDescendants(this._getChildren(item)).
+            forEach(it => selected.delete(it));
+    }
+    _selectAncestors(item, selected) {
+        this._getAncestors(item).forEach(ancestor => {
+            const groupIsSelected = this._getChildren(ancestor).
+                filter(it => this._isItemSelectable(it)).
+                every(it => selected.has(it));
+            if (groupIsSelected) {
+                selected.add(ancestor);
+            }
+        });
+    }
+    _deselectAncestors(item, selected) {
+        this._getAncestors(item).forEach(it => selected.delete(it));
+    }
+    select(value = this._focused) {
+        if (!value || !this._isItemSelectable(value)) {
+            return this;
+        }
+        const selected = new Set(this._selected);
+        selected.add(value);
+        this._selectDescendants(value, selected);
+        this._selectAncestors(value, selected);
+        return this.cloneWith({ selected });
+    }
+    focus(value) {
+        return super.focus(value);
+    }
+    resetSelection() {
+        return super.resetSelection();
+    }
+    cloneWith(config) {
+        return super.cloneWith(config);
+    }
+    deselect(value = this._focused) {
+        if (!value || !this._isItemSelectable(value)) {
+            return this;
+        }
+        const selected = new Set(this._selected);
+        selected.delete(value);
+        this._deselectDescendants(value, selected);
+        this._deselectAncestors(value, selected);
+        return this.cloneWith({ selected });
+    }
+}

package/components/data-list/title.d.ts

@@ -0,0 +1,26 @@
+import React, { PureComponent, ReactNode } from 'react';
+import { FocusSensorAddProps } from '../global/focus-sensor-hoc';
+export interface TitleProps extends FocusSensorAddProps<HTMLDivElement> {
+    onSelect: (selected: boolean) => void;
+    selectable?: boolean | undefined;
+    selected?: boolean | undefined;
+    showFocus?: boolean | undefined;
+    offset?: number | undefined;
+    className?: string | null | undefined;
+    title?: ReactNode;
+    collapserExpander?: ReactNode;
+}
+declare class Title extends PureComponent<TitleProps> {
+    static defaultProps: {
+        selectable: boolean;
+        selected: boolean;
+        showFocus: boolean;
+    };
+    id: string;
+    onCheckboxFocus: () => void;
+    onCheckboxChange: () => void;
+    toggleSelection(): void;
+    render(): React.JSX.Element;
+}
+declare const _default: React.ComponentType<import("../global/focus-sensor-hoc").FocusSensorProps<TitleProps, HTMLDivElement, typeof Title>>;
+export default _default;