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

package/components/table/selection-shortcuts-hoc.js

@@ -0,0 +1,146 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import Selection from './selection';
+function extractPropTypes({ propTypes }) {
+    if (propTypes == null) {
+        return propTypes;
+    }
+    const { selection, selectable, onSelect, shortcutsMap, ...restPropTypes } = propTypes;
+    return restPropTypes;
+}
+export default function selectionShortcutsHOC(ComposedComponent) {
+    class SelectionShortcuts extends PureComponent {
+        onUpPress = () => {
+            const { selection, onSelect } = this.props;
+            const newSelection = selection.moveUp();
+            if (newSelection) {
+                onSelect?.(newSelection);
+            }
+            return false;
+        };
+        onDownPress = () => {
+            const { selection, onSelect } = this.props;
+            const newSelection = selection.moveDown();
+            if (newSelection) {
+                onSelect?.(newSelection);
+            }
+            return false;
+        };
+        shiftSelectionMode;
+        onShiftKeyDown = () => {
+            const { selection } = this.props;
+            if (selection.isSelected(selection.getFocused())) {
+                this.shiftSelectionMode = 'deletion';
+            }
+            else {
+                this.shiftSelectionMode = 'addition';
+            }
+        };
+        shiftSelect = (selection) => {
+            if (this.shiftSelectionMode === 'addition') {
+                return selection.select();
+            }
+            else {
+                return selection.deselect();
+            }
+        };
+        onShiftUpPress = (e) => {
+            e.preventDefault();
+            const { selectable, selection, onSelect } = this.props;
+            if (!selectable) {
+                return;
+            }
+            const newSelection = this.shiftSelect(selection);
+            const newMovedSelection = newSelection.moveUp();
+            if (newMovedSelection) {
+                onSelect?.(newMovedSelection);
+            }
+            else {
+                onSelect?.(newSelection);
+            }
+        };
+        onShiftDownPress = (e) => {
+            e.preventDefault();
+            const { selectable, selection, onSelect } = this.props;
+            if (!selectable) {
+                return;
+            }
+            const newSelection = this.shiftSelect(selection);
+            const newMovedSelection = newSelection.moveDown();
+            if (newMovedSelection) {
+                onSelect?.(newMovedSelection);
+            }
+            else {
+                onSelect?.(newSelection);
+            }
+        };
+        onHomePress = () => {
+            const { selection, onSelect } = this.props;
+            const newSelection = selection.moveStart();
+            if (newSelection) {
+                onSelect?.(newSelection);
+            }
+            return false;
+        };
+        onEndPress = () => {
+            const { selection, onSelect } = this.props;
+            const newSelection = selection.moveEnd();
+            if (newSelection) {
+                onSelect?.(newSelection);
+            }
+            return false;
+        };
+        onSpacePress = () => {
+            const { selectable, selection, onSelect } = this.props;
+            if (!selectable) {
+                return true;
+            }
+            onSelect?.(selection.toggleSelection());
+            return false;
+        };
+        onEscPress = () => {
+            const { selection, onSelect } = this.props;
+            onSelect?.(selection.reset());
+            //this.restoreFocusWithoutScroll();
+        };
+        onCmdAPress = () => {
+            const { selectable, selection, onSelect } = this.props;
+            if (!selectable) {
+                return true;
+            }
+            onSelect?.(selection.selectAll());
+            return false;
+        };
+        shortcutsMap = {
+            up: this.onUpPress,
+            down: this.onDownPress,
+            shift: this.onShiftKeyDown,
+            'shift+up': this.onShiftUpPress,
+            'shift+down': this.onShiftDownPress,
+            home: this.onHomePress,
+            end: this.onEndPress,
+            space: this.onSpacePress,
+            esc: this.onEscPress,
+            'command+a': this.onCmdAPress,
+            'ctrl+a': this.onCmdAPress
+        };
+        render() {
+            const { selection, selectable, onSelect, shortcuts, ...restProps } = this.props;
+            return (<ComposedComponent {...restProps} selection={selection} selectable={selectable} onSelect={onSelect} shortcutsMap={{ ...this.shortcutsMap, ...this.props.shortcuts }}/>);
+        }
+    }
+    SelectionShortcuts.propTypes = {
+        ...extractPropTypes(ComposedComponent),
+        selection: PropTypes.instanceOf(Selection).isRequired,
+        selectable: PropTypes.bool,
+        onSelect: PropTypes.func,
+        shortcuts: PropTypes.object
+    };
+    SelectionShortcuts.defaultProps = {
+        ...ComposedComponent.defaultProps,
+        selectable: true,
+        onSelect: () => { },
+        shortcuts: {}
+    };
+    return SelectionShortcuts;
+}

package/components/table/selection.d.ts

@@ -0,0 +1,47 @@
+export interface SelectionItem {
+    id: string | number;
+    [key: string]: unknown;
+}
+export interface TableSelectionConfig<T extends SelectionItem> {
+    data?: readonly T[] | undefined;
+    selected?: Set<T> | undefined;
+    focused?: T | null | undefined;
+    getKey?: ((item: T) => string | number) | undefined;
+    isItemSelectable?: ((item: T) => boolean | undefined) | undefined;
+    getChildren?: ((item: T) => readonly T[]) | undefined;
+}
+export interface CloneWithConfig<T> {
+    data?: readonly T[] | null | undefined;
+    selected?: Set<T> | readonly T[] | null | undefined;
+    focused?: T | null | undefined;
+}
+export default class Selection<T extends SelectionItem> {
+    private _rawData;
+    protected _getChildren: ((item: T) => readonly T[]);
+    protected _data: Set<T>;
+    protected _selected: Set<T>;
+    protected _focused: T | null;
+    private _getKey;
+    protected _isItemSelectable: (item: T) => boolean | undefined;
+    constructor({ data, selected, focused, getKey, getChildren, isItemSelectable }?: TableSelectionConfig<T>);
+    protected _buildData(data: readonly T[] | null | undefined): Set<T>;
+    protected _buildSelected(data: Set<T>, selected: Set<T>): Set<T>;
+    cloneWith({ data, selected, focused }: CloneWithConfig<T>): Selection<T>;
+    focus(value: T | null | undefined): Selection<T>;
+    moveUp(): Selection<T> | undefined;
+    moveDown(): Selection<T> | undefined;
+    moveStart(): Selection<T> | undefined;
+    moveEnd(): Selection<T> | undefined;
+    select(value?: T | null): Selection<T>;
+    deselect(value?: T | null): Selection<T>;
+    toggleSelection(value?: T | null): Selection<T>;
+    selectAll(): Selection<T>;
+    resetFocus(): Selection<T>;
+    resetSelection(): Selection<T>;
+    reset(): Selection<T>;
+    isFocused(value: T | null): boolean;
+    isSelected(value: T | null): boolean;
+    getFocused(): T | null;
+    getSelected(): Set<T>;
+    getActive(): Set<T>;
+}

package/components/table/selection.js

@@ -0,0 +1,150 @@
+export default class Selection {
+    _rawData;
+    _getChildren;
+    _data;
+    _selected;
+    _focused;
+    _getKey;
+    _isItemSelectable;
+    constructor({ data = [], selected = new Set(), focused = null, getKey = item => item.id, getChildren = () => [], isItemSelectable = () => true } = {}) {
+        this._rawData = data;
+        this._getChildren = getChildren;
+        this._data = this._buildData(data);
+        this._selected = selected;
+        this._focused = focused;
+        this._getKey = getKey;
+        this._isItemSelectable = isItemSelectable;
+    }
+    _buildData(data) {
+        return new Set(data);
+    }
+    _buildSelected(data, selected) {
+        return new Set(selected);
+    }
+    cloneWith({ data, selected, focused }) {
+        const newData = data || this._rawData;
+        let newSelected;
+        if (data && !selected) {
+            newSelected = new Set([...this._buildData(newData)].
+                filter(item => [...this._selected].some(it => this._getKey(item) === this._getKey(it))));
+            newSelected = this._buildSelected(this._buildData(newData), newSelected);
+        }
+        else if (selected) {
+            newSelected = selected;
+        }
+        else {
+            newSelected = this._selected;
+        }
+        newSelected = new Set([...newSelected].filter(item => this._isItemSelectable(item)));
+        const cloneFocus = () => [...this._buildData(data)].filter(item => this._focused && this._getKey(item) === this._getKey(this._focused))[0];
+        const newFocused = focused === undefined ? this._focused : focused;
+        return new this.constructor({
+            data: newData,
+            selected: newSelected,
+            focused: (data && !focused) ? cloneFocus() : newFocused,
+            getKey: this._getKey,
+            getChildren: this._getChildren,
+            isItemSelectable: this._isItemSelectable
+        });
+    }
+    focus(value) {
+        return this.cloneWith({ focused: value });
+    }
+    moveUp() {
+        const focused = this._focused;
+        const data = [...this._data];
+        if (!focused) {
+            return this.cloneWith({ focused: data[data.length - 1] });
+        }
+        const nextItem = data[data.indexOf(focused) - 1];
+        if (nextItem) {
+            return this.cloneWith({ focused: nextItem });
+        }
+        return undefined;
+    }
+    moveDown() {
+        const focused = this._focused;
+        const data = [...this._data];
+        if (!focused) {
+            return this.cloneWith({ focused: data[0] });
+        }
+        const nextItem = data[data.indexOf(focused) + 1];
+        if (nextItem) {
+            return this.cloneWith({ focused: nextItem });
+        }
+        return undefined;
+    }
+    moveStart() {
+        const data = [...this._data];
+        if (data.length) {
+            return this.cloneWith({ focused: data[0] });
+        }
+        return undefined;
+    }
+    moveEnd() {
+        const data = [...this._data];
+        if (data.length) {
+            return this.cloneWith({ focused: data.pop() });
+        }
+        return undefined;
+    }
+    select(value = this._focused) {
+        if (!value || !this._isItemSelectable(value)) {
+            return this;
+        }
+        const selected = new Set(this._selected);
+        selected.add(value);
+        return this.cloneWith({ selected });
+    }
+    deselect(value = this._focused) {
+        if (!value || !this._isItemSelectable(value)) {
+            return this;
+        }
+        const selected = new Set(this._selected);
+        selected.delete(value);
+        return this.cloneWith({ selected });
+    }
+    toggleSelection(value = this._focused) {
+        if (this.isSelected(value)) {
+            return this.deselect(value);
+        }
+        else {
+            return this.select(value);
+        }
+    }
+    selectAll() {
+        return this.cloneWith({ selected: [...this._data] });
+    }
+    resetFocus() {
+        return this.cloneWith({ focused: null });
+    }
+    resetSelection() {
+        return this.cloneWith({ selected: new Set() });
+    }
+    reset() {
+        return this.resetFocus().resetSelection();
+    }
+    isFocused(value) {
+        return this._focused === value;
+    }
+    isSelected(value) {
+        return value != null && this._selected.has(value);
+    }
+    getFocused() {
+        return this._focused;
+    }
+    getSelected() {
+        return new Set(this._selected);
+    }
+    getActive() {
+        if (this._selected.size) {
+            return new Set(this._selected);
+        }
+        else if (this._focused) {
+            return new Set([this._focused]);
+        }
+        else {
+            return new Set();
+        }
+    }
+}

package/components/table/smart-table.d.ts

@@ -0,0 +1,64 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { TableAttrs } from './table';
+import Selection, { SelectionItem } from './selection';
+export interface SmartTableProps<T extends SelectionItem> extends Omit<TableAttrs<T>, 'selection' | 'onSelect'> {
+    onSelectionChange: (selection: Selection<T>) => void;
+    selection?: Selection<T>;
+}
+declare class SmartTable<T extends SelectionItem> extends PureComponent<SmartTableProps<T>> {
+    static propTypes: {
+        className?: React.Validator<string | null | undefined> | undefined;
+        onFocus?: React.Validator<(() => void) | null | undefined> | undefined;
+        onBlur?: React.Validator<(() => void) | null | undefined> | undefined;
+        caption?: React.Validator<string | null | undefined> | undefined;
+        data?: React.Validator<readonly SelectionItem[]> | undefined;
+        loading?: React.Validator<boolean | null | undefined> | undefined;
+        draggable?: React.Validator<boolean | null | undefined> | undefined;
+        columns?: React.Validator<readonly import("./header-cell").Column<SelectionItem>[]> | undefined;
+        focused?: React.Validator<boolean | null | undefined> | undefined;
+        isItemSelectable: PropTypes.Requireable<(...args: any[]) => any> | React.Validator<((item: SelectionItem) => boolean) | null | undefined>;
+        innerRef?: React.Validator<React.Ref<HTMLTableRowElement> | undefined> | undefined;
+        autofocus?: React.Validator<boolean | null | undefined> | undefined;
+        scrollOnTableFocus?: React.Validator<boolean | null | undefined> | undefined;
+        disabledHover?: React.Validator<boolean> | undefined;
+        remoteSelection?: React.Validator<boolean | null | undefined> | undefined;
+        onSort?: React.Validator<((params: import("./header-cell").SortParams) => void) | null | undefined> | undefined;
+        sortKey?: React.Validator<string | null | undefined> | undefined;
+        sortOrder?: React.Validator<boolean | null | undefined> | undefined;
+        alwaysShowDragHandle?: React.Validator<boolean | null | undefined> | undefined;
+        dragHandleTitle?: React.Validator<string | null | undefined> | undefined;
+        onReorder?: React.Validator<((params: import("./table").ReorderParams<SelectionItem>) => void) | null | undefined> | undefined;
+        getItemKey?: React.Validator<((item: SelectionItem) => string | number) | null | undefined> | undefined;
+        stickyHeader?: React.Validator<boolean | null | undefined> | undefined;
+        getItemLevel?: React.Validator<((item: SelectionItem) => number) | null | undefined> | undefined;
+        getItemClassName?: React.Validator<((item: SelectionItem) => string | null | undefined) | null | undefined> | undefined;
+        getMetaColumnClassName?: React.Validator<((item: SelectionItem) => string | null | undefined) | null | undefined> | undefined;
+        getItemDataTest?: React.Validator<((item: SelectionItem) => string | null | undefined) | null | undefined> | undefined;
+        isItemCollapsible?: React.Validator<((item: SelectionItem) => boolean) | null | undefined> | undefined;
+        isParentCollapsible?: React.Validator<((item: SelectionItem) => boolean) | null | undefined> | undefined;
+        isItemCollapsed?: React.Validator<((item: SelectionItem) => boolean) | null | undefined> | undefined;
+        onItemCollapse?: React.Validator<((item: SelectionItem) => void) | null | undefined> | undefined;
+        onItemExpand?: React.Validator<((item: SelectionItem) => void) | null | undefined> | undefined;
+        onItemDoubleClick?: React.Validator<((item: SelectionItem) => void) | null | undefined> | undefined;
+        onItemClick?: React.Validator<((item: SelectionItem, e: React.MouseEvent<HTMLTableRowElement, MouseEvent>) => void) | null | undefined> | undefined;
+        isDisabledSelectionVisible?: React.Validator<((item: SelectionItem) => boolean) | null | undefined> | undefined;
+        getCheckboxTooltip?: React.Validator<((item: SelectionItem) => string | undefined) | null | undefined> | undefined;
+        loaderClassName?: React.Validator<string | null | undefined> | undefined;
+        stickyHeaderOffset?: React.Validator<string | null | undefined> | undefined;
+        renderEmpty?: React.Validator<(() => React.ReactNode) | null | undefined> | undefined;
+        selectable?: React.Validator<boolean | null | undefined> | undefined;
+        shortcuts?: React.Validator<import("../shortcuts/core").ShortcutsMap | null | undefined> | undefined;
+        onSelectionChange: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    static defaultProps: {
+        onSelectionChange: () => void;
+    };
+    state: {
+        selection: Selection<T>;
+    };
+    UNSAFE_componentWillReceiveProps(nextProps: SmartTableProps<T>): void;
+    onSelect: (selection: Selection<T>) => void;
+    render(): React.JSX.Element;
+}
+export default SmartTable;

package/components/table/smart-table.js

@@ -0,0 +1,40 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import Table from './table';
+import Selection from './selection';
+const { selection: __selection__, onSelect: __onSelect__, ...restPropTypes } = Table.propTypes ?? {};
+class SmartTable extends PureComponent {
+    static propTypes = {
+        onSelectionChange: PropTypes.func,
+        isItemSelectable: PropTypes.func,
+        ...restPropTypes
+    };
+    static defaultProps = {
+        onSelectionChange: () => { }
+    };
+    state = {
+        selection: new Selection({
+            data: this.props.data,
+            isItemSelectable: this.props.isItemSelectable
+        })
+    };
+    UNSAFE_componentWillReceiveProps(nextProps) {
+        const { data, isItemSelectable, selection } = nextProps;
+        if (this.props.remoteSelection && this.props.selection !== selection) {
+            this.setState({ selection });
+        }
+        else if (this.props.data !== data || this.props.isItemSelectable !== isItemSelectable) {
+            this.setState({
+                selection: new Selection({ data, isItemSelectable })
+            });
+        }
+    }
+    onSelect = (selection) => {
+        this.setState({ selection });
+        this.props.onSelectionChange(selection);
+    };
+    render() {
+        return (<Table {...this.props} selection={this.state.selection} onSelect={this.onSelect}/>);
+    }
+}
+export default SmartTable;

package/components/table/table.css

@@ -0,0 +1,259 @@
+@import "../global/variables.css";
+
+@value compensate: 2px;
+@value compensated: calc(calc(4 * var(--ring-unit)) - compensate);
+
+.tableWrapper {
+  position: relative;
+}
+
+.table {
+  width: 100%;
+
+  border-spacing: 0;
+}
+
+.userSelectNone {
+  user-select: none;
+}
+
+.headerCell {
+  composes: font-smaller-lower from "../global/global.css";
+
+  box-sizing: border-box;
+  height: calc(var(--ring-unit) * 3);
+  padding-right: calc(var(--ring-unit) * 5);
+
+  text-align: left;
+  white-space: nowrap;
+
+  color: var(--ring-secondary-color);
+
+  font-weight: normal;
+}
+
+.headerCell:first-child {
+  padding-left: calc(var(--ring-unit) * 4);
+}
+
+.headerCell:last-child {
+  width: 100%;
+  padding-right: calc(var(--ring-unit) * 4);
+}
+
+.headerCell:first-child:only-child {
+  width: initial;
+  max-width: none;
+}
+
+.headerCell.headerCellSorted {
+  font-weight: bold;
+}
+
+.headerCell.headerCellSortable {
+  cursor: pointer;
+}
+
+.headerCell .sorter {
+  position: absolute;
+
+  display: none;
+
+  margin-left: 6px;
+
+  user-select: none;
+}
+
+.headerCell.headerCellSortable .sorter {
+  display: inline-block;
+}
+
+.sortedUp .icon {
+  transform: rotate(180deg);
+  transform-origin: center 53%;
+}
+
+.caption {
+  padding-top: var(--ring-unit);
+  padding-bottom: 6px;
+
+  color: var(--ring-text-color);
+  border-bottom: none;
+
+  font-size: var(--ring-font-size);
+  font-weight: bold;
+  line-height: var(--ring-line-height-lower);
+}
+
+.tableHead::after {
+  position: absolute;
+
+  width: 100%;
+
+  height: 1px;
+
+  content: "";
+
+  background-color: var(--ring-line-color);
+}
+
+.subHeaderSticky {
+  position: sticky;
+
+  z-index: var(--ring-fixed-z-index);
+  top: 0;
+
+  background-color: rgba(var(--ring-content-background-components), 0.9);
+}
+
+.row {
+  outline: none;
+
+  line-height: compensated;
+}
+
+/* stylelint-disable-next-line selector-max-specificity */
+.table:not(.disabledHover) .row:hover {
+  background-color: var(--ring-hover-background-color);
+}
+
+.rowSelected {
+  background-color: var(--ring-selected-background-color);
+}
+
+.rowFocused {
+  background-color: var(--ring-hover-background-color);
+}
+/* stylelint-disable-next-line selector-max-specificity */
+.rowFocused .cell:nth-child(1) {
+  box-shadow: inset 2px 0 var(--ring-main-color);
+}
+
+.loadingOverlay {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  background-color: var(--ring-table-loader-background-color);
+}
+
+.cell {
+  composes: ellipsis from "../global/global.css";
+
+  box-sizing: content-box;
+
+  min-width: 0;
+
+  height: calc(4 * var(--ring-unit));
+  padding: 0;
+  padding-right: calc(var(--ring-unit) * 5);
+
+  color: var(--ring-text-color);
+}
+
+.cell:first-child {
+  padding-left: calc(var(--ring-unit) * 4);
+}
+
+.cell:last-child {
+  width: 100%;
+
+  /* Markup hack, allows cell to have content which is wider than cell and collapses it */
+
+  max-width: 0;
+  padding-right: calc(var(--ring-unit) * 4);
+}
+
+.cell:first-child {
+  min-width: calc(var(--ring-unit) * 37);
+  max-width: calc(var(--ring-unit) * 77);
+}
+
+.cell:first-child:only-child {
+  width: initial;
+  max-width: none;
+}
+
+.cellUnlimited {
+  width: 100%;
+}
+
+.cellRight {
+  text-align: right;
+}
+
+.metaColumn {
+  position: relative;
+
+  float: left;
+
+  height: 16px;
+  padding-right: compensate;
+}
+
+.metaColumn.headerMetaColumn {
+  padding-top: 1px;
+}
+
+@value top: -3px;
+
+.dragHandle {
+  top: top;
+  left: calc(-2 * var(--ring-unit));
+
+  cursor: grab;
+
+  opacity: 0;
+}
+
+/* override button */
+.dragHandle.dragHandle {
+  position: absolute;
+
+  height: calc(calc(4 * var(--ring-unit)) - top);
+  padding: 0;
+}
+
+.dragHandle.visibleDragHandle,
+.row:hover .dragHandle {
+  opacity: 1;
+}
+
+.rowCollapseExpandButton {
+  padding-right: calc(var(--ring-unit) / 2);
+  padding-left: 7px;
+}
+
+.draggingRow {
+  z-index: var(--ring-overlay-z-index);
+
+  background-color: var(--ring-hover-background-color);
+}
+
+.draggingRow .dragHandle {
+  cursor: grabbing;
+
+  opacity: 1;
+}
+
+.draggingRow .dragHandle svg {
+  color: var(--ring-main-color);
+}
+
+.draggingTable {
+  z-index: var(--ring-overlay-z-index);
+
+  border-spacing: 0;
+}
+
+.tableMessage {
+  padding: calc(var(--ring-unit) * 2) calc(var(--ring-unit) * 4);
+
+  color: var(--ring-secondary-color);
+}