@ytsaurus/ui 0.0.3

package/src/ui/components/ElementsTable/ElementsTableHeader.tsx

@@ -0,0 +1,351 @@
+import React, {Component, CSSProperties} from 'react';
+import PropTypes from 'prop-types';
+import block from 'bem-cn-lite';
+
+import {
+    ELEMENTS_TABLE,
+    prepareColumnsData,
+    prepareCellClassName,
+    prepareGroupCellClassName,
+    getColumnCaption,
+    getColumnEdgePosition,
+    TemplatesPropType,
+} from './utils';
+import {OldSortState} from '../../types';
+import {oldSortStateToOrderType, OrderType} from '../../utils/sort-helpers';
+import SortIcon from '../../components/SortIcon/SortIcon';
+import {Tooltip} from '../../components/Tooltip/Tooltip';
+import {ToggleColumnSortOrderParams} from '../../store/actions/tables';
+import {RootState} from '../../store/reducers';
+
+const b = block(ELEMENTS_TABLE);
+
+export const sortStateType = PropTypes.shape({
+    field: PropTypes.string,
+    asc: PropTypes.bool,
+});
+
+export interface ElementsTableHeaderProps {
+    css?: string;
+    templates?: unknown;
+    size: string;
+    theme: string;
+    padded: boolean;
+    striped: boolean;
+
+    items: Array<unknown>;
+    //computeKey: () => void;
+    onItemClick?: () => void;
+    onItemHover?: () => void;
+
+    toggleColumnSortOrder: (params: ToggleColumnSortOrderParams) => void;
+
+    //sortInfo?: () => OldSortState;
+    tableId: keyof RootState['tables'];
+    sortState?: Record<string, OldSortState>;
+    onSort?: (columnName?: string) => void;
+
+    columns: ColumnsItem;
+
+    itemHeight?: number;
+    selectedIndex?: number;
+}
+
+interface ColumnsItem {
+    items: Array<{
+        sort?: boolean;
+        sortWithUndefined?: boolean;
+    }>;
+    sets: unknown;
+    mode: string;
+}
+
+interface State {
+    columnItems: Record<string, ColumnGroupInfo | ColumnInfo>;
+    columnSet: {
+        items: Array<string>;
+        hasGroups?: boolean;
+    };
+}
+
+interface ColumnGroupInfo {
+    groupName: string;
+    groupFirstItem?: boolean;
+    headerStyle?: CSSProperties;
+    groupCount?: number;
+    groupId?: string;
+
+    tooltipProps?: undefined;
+    sort?: undefined;
+    render?: undefined;
+    sortWithUndefined?: undefined;
+    allowedOrderTypes?: undefined;
+
+    caption?: React.ReactNode;
+    captionTail?: React.ReactNode; // rendered after sort-order icon
+}
+
+interface ColumnInfo {
+    tooltipProps?: {
+        className?: string;
+    };
+    sort?: boolean;
+    sortWithUndefined?: boolean;
+    allowedOrderTypes?: Array<OrderType>;
+
+    render: React.ComponentType;
+
+    groupName?: undefined;
+
+    caption?: React.ReactNode;
+    captionTail?: React.ReactNode; // rendered after sort-order icon
+}
+
+interface CellProps {
+    style?: CSSProperties;
+    colSpan?: number;
+    rowSpan?: number;
+    className?: string;
+    key?: string;
+}
+
+export default class ElementsTableHeader extends Component<ElementsTableHeaderProps, State> {
+    static propTypes = {
+        css: PropTypes.string,
+        templates: TemplatesPropType.isRequired,
+        size: PropTypes.string.isRequired,
+        theme: PropTypes.string.isRequired,
+        padded: PropTypes.bool.isRequired,
+        striped: PropTypes.bool.isRequired,
+        // ITEMS
+        items: PropTypes.array.isRequired,
+        computeKey: PropTypes.func,
+        onItemClick: PropTypes.func,
+        onItemHover: PropTypes.func,
+        // old SORT
+        sortInfo: PropTypes.func, // ko.param, old tables
+        // new SORT
+        tableId: PropTypes.string,
+        sortState: sortStateType,
+        // COLUMNS
+        columns: PropTypes.shape({
+            items: PropTypes.object.isRequired,
+            sets: PropTypes.object.isRequired,
+            mode: PropTypes.string.isRequired,
+        }).isRequired,
+        // VIRTUAL RENDERING
+        itemHeight: PropTypes.number,
+        // ROW SELECTION
+        selectedIndex: PropTypes.number,
+    };
+
+    constructor(props: ElementsTableHeaderProps) {
+        super(props);
+
+        this.state = {
+            columnItems: {},
+            columnSet: {
+                items: [],
+            },
+        };
+    }
+
+    // eslint-disable-next-line @typescript-eslint/member-ordering
+    static getDerivedStateFromProps(props: ElementsTableHeaderProps) {
+        const {columns} = props;
+        const {items, set} = prepareColumnsData(columns);
+
+        return {
+            columnItems: items,
+            columnSet: set,
+        };
+    }
+
+    isColumnSortable(columnName: string) {
+        const {columnItems} = this.state;
+        const sortable = columnItems[columnName].sort;
+
+        return typeof sortable === 'function' || (typeof sortable === 'boolean' && sortable);
+    }
+
+    renderCellCaptionTail(columnName: string) {
+        const {columnItems} = this.state;
+        const column = columnItems[columnName];
+
+        return column?.captionTail || null;
+    }
+
+    renderCellCaption(columnName: string) {
+        const {columnItems} = this.state;
+        const column = columnItems[columnName];
+        const withTooltip = Boolean(column?.tooltipProps);
+        const content = getColumnCaption(column, columnName);
+        const {className: tooltipClassName, ...restTooltipProps} = column?.tooltipProps || {};
+
+        if (column?.render) {
+            return <column.render />;
+        }
+
+        return withTooltip ? (
+            <Tooltip {...restTooltipProps} className={b('column-name', tooltipClassName)}>
+                {content}
+            </Tooltip>
+        ) : (
+            <div
+                className={b('column-name')}
+                title={typeof content === 'string' ? content : undefined}
+            >
+                {content}
+            </div>
+        );
+    }
+
+    renderSortableHeaderCaption(columnName: string) {
+        const className = block('yc-link')({view: 'primary'});
+        const {sortState, onSort} = this.props;
+
+        const {sortWithUndefined, allowedOrderTypes} = this.state.columnItems[columnName];
+
+        let sortInfo: OldSortState | undefined;
+        let sortQuery, toggleOrder;
+        if (sortState) {
+            const {tableId, toggleColumnSortOrder} = this.props;
+            sortInfo = sortState[tableId!];
+            toggleOrder = () => {
+                toggleColumnSortOrder({
+                    tableId,
+                    columnName,
+                    withUndefined: sortWithUndefined,
+                    allowedOrderTypes,
+                });
+                if (typeof onSort === 'function') {
+                    onSort(columnName);
+                }
+            };
+        }
+
+        const orderType = oldSortStateToOrderType(
+            sortInfo?.field === columnName ? sortInfo : undefined,
+        );
+
+        return (
+            <a className={className} href={sortQuery} onClick={toggleOrder}>
+                {this.renderCellCaption(columnName)}
+                <SortIcon className={b('cell-sort')} order={orderType} />
+                {this.renderCellCaptionTail(columnName)}
+            </a>
+        );
+    }
+
+    renderHeaderCell(columnName: string, edgePosition: 'start' | 'end') {
+        const {columnItems} = this.state;
+        const cellClassName = prepareCellClassName(
+            columnItems,
+            columnName,
+            this.props.css,
+            edgePosition,
+        );
+
+        return (
+            <th className={cellClassName} key={columnName}>
+                {this.isColumnSortable(columnName) ? (
+                    this.renderSortableHeaderCaption(columnName)
+                ) : (
+                    <React.Fragment>
+                        {this.renderCellCaption(columnName)}
+                        {this.renderCellCaptionTail(columnName)}
+                    </React.Fragment>
+                )}
+            </th>
+        );
+    }
+
+    renderHeaderGroupCell(
+        columnName: string,
+        groupRowPlacement: 'top' | 'bottom',
+        edgePosition: 'start' | 'end',
+    ): React.ReactNode {
+        const {columnItems} = this.state;
+        const {css} = this.props;
+        const column = columnItems[columnName];
+        const cellClassName = prepareCellClassName(columnItems, columnName, css, edgePosition);
+        const cellProps: CellProps = {
+            key: columnName,
+            className: cellClassName,
+        };
+        let caption = this.isColumnSortable(columnName)
+            ? this.renderSortableHeaderCaption(columnName)
+            : this.renderCellCaption(columnName);
+
+        if (groupRowPlacement === 'top') {
+            if (column.groupName) {
+                if (column.groupFirstItem) {
+                    caption = this.renderCellCaption(column.groupName);
+                    cellProps.style = column.headerStyle;
+                    cellProps.colSpan = column.groupCount;
+                    cellProps.className = prepareGroupCellClassName(
+                        column.groupId,
+                        css,
+                        edgePosition,
+                    );
+                } else {
+                    return null;
+                }
+            } else {
+                cellProps.rowSpan = 2;
+            }
+        }
+
+        if (groupRowPlacement === 'bottom' && !column.groupName) {
+            return null;
+        }
+
+        return <th {...cellProps}>{caption}</th>;
+    }
+
+    renderHeaderGroupRow(placement: 'top' | 'bottom') {
+        const {columnSet, columnItems} = this.state;
+
+        return (
+            <tr className={b('row')}>
+                {columnSet.items.map((columnName, index) =>
+                    this.renderHeaderGroupCell(
+                        columnName,
+                        placement,
+                        getColumnEdgePosition(columnSet, columnItems, index, placement)!,
+                    ),
+                )}
+            </tr>
+        );
+    }
+
+    renderHeaderRow() {
+        const {columnSet, columnItems} = this.state;
+
+        return (
+            <tr className={b('row')}>
+                {columnSet.items.map((columnName, index) =>
+                    this.renderHeaderCell(
+                        columnName,
+                        getColumnEdgePosition(columnSet, columnItems, index)!,
+                    ),
+                )}
+            </tr>
+        );
+    }
+
+    render() {
+        const {columnSet} = this.state;
+        const hasGroups = columnSet.hasGroups;
+        const headerClassName = b('head');
+
+        return hasGroups ? (
+            <thead className={headerClassName}>
+                {this.renderHeaderGroupRow('top')}
+                {this.renderHeaderGroupRow('bottom')}
+            </thead>
+        ) : (
+            <thead className={headerClassName}>{this.renderHeaderRow()}</thead>
+        );
+    }
+}

package/src/ui/components/ElementsTable/ElementsTableRow.js

@@ -0,0 +1,128 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import block from 'bem-cn-lite';
+
+import {
+    ELEMENTS_TABLE,
+    prepareCellClassName,
+    getColumnEdgePosition,
+    TemplatesPropType,
+    getRenderer,
+} from './utils';
+
+export default class ElementsTableRow extends React.PureComponent {
+    static propTypes = {
+        css: PropTypes.string,
+        templates: TemplatesPropType,
+        item: PropTypes.object.isRequired,
+        itemHeight: PropTypes.number,
+        itemMods: PropTypes.func,
+        index: PropTypes.number.isRequired,
+        selected: PropTypes.bool.isRequired,
+        columnSet: PropTypes.object.isRequired,
+        columnItems: PropTypes.object.isRequired,
+        onItemClick: PropTypes.func,
+        onItemHover: PropTypes.func,
+        toggleItemState: PropTypes.func,
+        itemState: PropTypes.object,
+        cssHover: PropTypes.bool.isRequired,
+        onItemSelect: PropTypes.func,
+        rowClassName: PropTypes.func,
+    };
+
+    componentDidUpdate() {
+        const {selected, onItemSelect} = this.props;
+
+        if (onItemSelect && selected) {
+            onItemSelect();
+        }
+    }
+
+    getItemMods(item, index) {
+        const {itemMods, css} = this.props;
+
+        return typeof itemMods === 'function' ? block(css)('table-row', itemMods(item, index)) : '';
+    }
+
+    getColumn(columnName) {
+        return this.props.columnItems[columnName];
+    }
+
+    onMouseClick = (e) => {
+        const {onItemClick} = this.props;
+        if (typeof onItemClick === 'function') {
+            onItemClick(e);
+        }
+    };
+
+    renderCell(cell, columnName, rowIndex, colIndex) {
+        const {
+            css,
+            templates: templatesCollection,
+            columnSet,
+            columnItems,
+            toggleItemState,
+            itemState,
+            colSpan,
+        } = this.props;
+        const edgePosition = getColumnEdgePosition(columnSet, columnItems, colIndex);
+        const cellClassName = prepareCellClassName(columnItems, columnName, css, edgePosition);
+        const renderer = getRenderer(this, templatesCollection, columnName);
+
+        const colSpanValue = !colSpan ? undefined : colSpan(cell, rowIndex, colIndex);
+        return {
+            colSpanValue,
+            node: (
+                <td key={columnName} className={cellClassName} colSpan={colSpanValue}>
+                    {renderer(cell, columnName, toggleItemState, itemState)}
+                </td>
+            ),
+        };
+    }
+
+    render() {
+        const {
+            columnSet,
+            item,
+            itemHeight,
+            index,
+            selected,
+            onItemHover,
+            cssHover,
+            onMouseMove,
+            rowClassName: classNameFn,
+        } = this.props;
+
+        const extraClassName = classNameFn ? classNameFn(item, index) : '';
+        const rowClassName = block(ELEMENTS_TABLE)(
+            'row',
+            {
+                selected: selected ? 'yes' : undefined,
+                hover: cssHover ? 'yes' : undefined,
+            },
+            [this.getItemMods(item, index), extraClassName].filter(Boolean).join(' '),
+        );
+        const rowStyle = {height: itemHeight};
+
+        const cells = [];
+        for (let i = 0; i < columnSet.items.length; ) {
+            const columnName = columnSet.items[i];
+            const {node, colSpanValue} = this.renderCell(item, columnName, index, i);
+            cells.push(node);
+            i += colSpanValue > 0 ? colSpanValue : 1;
+        }
+
+        return (
+            <tr
+                className={rowClassName}
+                onMouseMove={onMouseMove}
+                onClick={this.onMouseClick}
+                onMouseEnter={onItemHover}
+                data-index={index}
+                style={rowStyle}
+            >
+                {cells}
+            </tr>
+        );
+    }
+}

package/src/ui/components/ElementsTable/ElementsTableSticky.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import {compose} from 'redux';
+
+import withStickyHead from '../../components/ElementsTable/hocs/withStickyHead';
+import withStickyFooter from '../../components/ElementsTable/hocs/withStickyFooter';
+import ElementsTableBase from '../../components/ElementsTable/ElementsTable';
+
+const ElementsTable = compose(withStickyHead, withStickyFooter)(ElementsTableBase);
+
+function ElementsTableSticky(props) {
+    return <ElementsTable {...props} />;
+}
+
+export default ElementsTableSticky;

package/src/ui/components/ElementsTable/constants.scss

@@ -0,0 +1,5 @@
+$thick-border: 1px solid var(--dark-divider);
+$thin-border: 1px solid var(--light-divider);
+
+$row-height_size_s: 35px;
+$row-height_size_m: 40px;

package/src/ui/components/ElementsTable/hocs/withKeyboardNavigation.js

@@ -0,0 +1,175 @@
+import React, {Component, Fragment} from 'react';
+import PropTypes from 'prop-types';
+
+import Hotkey from '../../../components/Hotkey/Hotkey';
+
+import {getDisplayName} from '../../../utils';
+
+import '../ElementsTable.scss';
+
+export default (ElementsTable) => {
+    return class WithKeyboardNavigation extends Component {
+        static displayName = `WithKeyboardNavigation(${getDisplayName(ElementsTable)})`;
+
+        static propTypes = {
+            // from parent
+            hotkeys: PropTypes.array,
+            onItemClick: PropTypes.func,
+            selectedIndex: PropTypes.number,
+            items: PropTypes.array.isRequired,
+        };
+
+        static defaultProps = {
+            hotkeys: [],
+            selectedIndex: 0,
+            onItemClick: () => {},
+        };
+
+        state = {
+            hoverSelectedIndex: this.props.selectedIndex,
+            selectedIndex: this.props.selectedIndex,
+            mode: 'mouse',
+        };
+
+        get hotkeys() {
+            return [
+                ...this.props.hotkeys.map(this.wrapHotkeyHandler),
+
+                {keys: 'k, up', handler: this.selectPrev, scope: 'all'},
+                {keys: 'up', handler: this.selectPrev, scope: 'filter'},
+
+                {keys: 'j, down', handler: this.selectNext, scope: 'all'},
+                {keys: 'down', handler: this.selectNext, scope: 'filter'},
+
+                {
+                    keys: 'l, enter, ctrl+right',
+                    handler: this.handleItemKeyboardClick,
+                    scope: 'all',
+                },
+                {
+                    keys: 'enter',
+                    handler: this.handleItemKeyboardClick,
+                    scope: 'filter',
+                },
+            ];
+        }
+
+        wrapHotkeyHandler = (params) => {
+            const {handler, ...rest} = params;
+            return {
+                ...rest,
+                handler: (...args) => {
+                    const {items} = this.props;
+                    const {selectedIndex} = this.state;
+                    return handler(...args, {
+                        item: items[selectedIndex],
+                        index: selectedIndex,
+                    });
+                },
+            };
+        };
+
+        selectIndex = (index) => {
+            const {items} = this.props;
+            const maxIndex = Math.max(0, items.length - 1);
+
+            let state;
+            if (index > maxIndex) {
+                state = {
+                    selectedIndex: maxIndex,
+                    hoverSelectedIndex: maxIndex,
+                };
+            } else if (index < 0) {
+                state = {
+                    selectedIndex: 0,
+                    hoverSelectedIndex: 0,
+                };
+            } else {
+                state = {
+                    selectedIndex: index,
+                    hoverSelectedIndex: index,
+                };
+            }
+
+            this.setState({mode: 'keyboard', ...state});
+        };
+
+        selectNext = () => {
+            const {hoverSelectedIndex} = this.state;
+
+            this.selectIndex(hoverSelectedIndex + 1);
+        };
+
+        selectPrev = () => {
+            const {hoverSelectedIndex} = this.state;
+
+            this.selectIndex(hoverSelectedIndex - 1);
+        };
+
+        handleMouseMove = () => {
+            const {mode} = this.state;
+
+            if (mode !== 'mouse') {
+                this.setState({mode: 'mouse'});
+            }
+        };
+
+        handleItemHover = (item, index) => {
+            const {mode} = this.state;
+
+            if (mode === 'mouse') {
+                this.setState({
+                    hoverSelectedIndex: index,
+                });
+            }
+        };
+
+        handleItemSelect = (item, index) => {
+            const {mode} = this.state;
+            const elem = document.querySelector(
+                `.elements-table__row_selected_yes[data-index="${index}"]`,
+            );
+
+            if (elem && mode === 'keyboard') {
+                const windowHeight = document.documentElement.clientHeight;
+                const bounding = elem.getBoundingClientRect();
+                const bottomCoordinate = bounding.y + bounding.height;
+                const topCoordinate = bounding.y;
+
+                if (bottomCoordinate > windowHeight) {
+                    elem.scrollIntoView(false);
+                } else if (topCoordinate < 120) {
+                    elem.scrollIntoView(true);
+                    window.scrollBy(0, -120);
+                }
+            }
+        };
+
+        handleItemKeyboardClick = () => {
+            const {onItemClick, items} = this.props;
+            const {selectedIndex} = this.state;
+
+            if (items && items[selectedIndex]) {
+                onItemClick(items[selectedIndex]);
+            }
+        };
+
+        render() {
+            const {selectedIndex, mode} = this.state;
+
+            return (
+                <Fragment>
+                    <ElementsTable
+                        {...this.props}
+                        cssHover={mode === 'mouse'}
+                        onItemHover={this.handleItemHover}
+                        onMouseMove={this.handleMouseMove}
+                        selectedIndex={mode === 'keyboard' ? selectedIndex : null}
+                        onItemSelect={mode === 'keyboard' ? this.handleItemSelect : null}
+                    />
+                    <Hotkey settings={this.hotkeys} />
+                </Fragment>
+            );
+        }
+    };
+};