@jetbrains/ring-ui 4.1.12 → 5.0.0-beta.11

package/components/table/header.d.ts

@@ -0,0 +1,60 @@
+import { ChangeEventHandler, PureComponent, SyntheticEvent } from 'react';
+import PropTypes from 'prop-types';
+import { Waypoint } from 'react-waypoint';
+import { Column, SortParams } from './header-cell';
+export interface HeaderProps {
+    columns: readonly Column[];
+    selectable: boolean;
+    draggable: boolean;
+    checked: boolean;
+    sticky: boolean;
+    topStickOffset: string;
+    onSort: (params: SortParams) => void;
+    onCheckboxChange: ChangeEventHandler<HTMLInputElement>;
+    sortKey: string;
+    sortOrder: boolean;
+    caption?: string | null | undefined;
+    checkboxDisabled?: boolean | undefined;
+}
+export default class Header extends PureComponent<HeaderProps> {
+    static propTypes: {
+        caption: PropTypes.Requireable<string>;
+        selectable: PropTypes.Requireable<boolean>;
+        draggable: PropTypes.Requireable<boolean>;
+        checked: PropTypes.Requireable<boolean>;
+        checkboxDisabled: PropTypes.Requireable<boolean>;
+        sticky: PropTypes.Requireable<boolean>;
+        topStickOffset: PropTypes.Requireable<string>;
+        onCheckboxChange: PropTypes.Requireable<(...args: any[]) => any>;
+        columns: PropTypes.Validator<any[]>;
+        onSort: PropTypes.Requireable<(...args: any[]) => any>;
+        sortKey: PropTypes.Requireable<string>;
+        sortOrder: PropTypes.Requireable<boolean>;
+    };
+    static defaultProps: {
+        selectable: boolean;
+        draggable: boolean;
+        checked: boolean;
+        sticky: boolean;
+        topStickOffset: string;
+        onSort: () => void;
+        onCheckboxChange: () => void;
+        sortKey: string;
+        sortOrder: boolean;
+    };
+    state: {
+        fixed: boolean;
+        headerWidth: undefined;
+        widths: never[];
+    };
+    id: string;
+    onCheckboxFocus: (event: SyntheticEvent<HTMLElement>) => void;
+    private _columnsRowNode?;
+    storeColumnsRowNode: (node: HTMLElement | null) => void;
+    onScrollIn: () => void;
+    onScrollOut: ({ currentPosition }: Waypoint.CallbackArgs) => void;
+    calculateColumnsWidths(columnsRowNode: HTMLElement | null | undefined): void;
+    createCells(widths?: never[]): JSX.Element[];
+    render(): JSX.Element;
+}
+export declare type HeaderAttrs = JSX.LibraryManagedAttributes<typeof Header, HeaderProps>;

package/components/table/header.js

@@ -1,178 +1,111 @@
-import React, {PureComponent} from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import {Waypoint} from 'react-waypoint';
-
+import { Waypoint } from 'react-waypoint';
 import Checkbox from '../checkbox/checkbox';
-
 import getUID from '../global/get-uid';
-
 import style from './table.css';
 import HeaderCell from './header-cell';
-
-
 export default class Header extends PureComponent {
-  static propTypes = {
-    caption: PropTypes.string,
-    selectable: PropTypes.bool,
-    draggable: PropTypes.bool,
-    checked: PropTypes.bool,
-    checkboxDisabled: PropTypes.bool,
-    sticky: PropTypes.bool,
-    topStickOffset: PropTypes.string,
-    onCheckboxChange: PropTypes.func,
-    columns: PropTypes.array.isRequired,
-    onSort: PropTypes.func,
-    sortKey: PropTypes.string,
-    sortOrder: PropTypes.bool
-  };
-
-  static defaultProps = {
-    selectable: true,
-    draggable: false,
-    checked: true,
-    sticky: true,
-    topStickOffset: '0px',
-    onSort: () => {},
-    onCheckboxChange: () => {},
-    sortKey: 'id',
-    sortOrder: true
-  };
-
-  state = {
-    fixed: false,
-    headerWidth: null,
-    widths: []
-  };
-
-  id = getUID('table-header-');
-
-  onCheckboxFocus = event => {
-    event.target.blur();
-  };
-
-  storeColumnsRowNode = node => {
-    if (node) {
-      this._columnsRowNode = node;
-      this.calculateColumnsWidths(node);
-    }
-  };
-
-  onScrollIn = () => {
-    this.calculateColumnsWidths(this._columnsRowNode);
-    this.setState({fixed: false});
-  };
-
-  onScrollOut = ({currentPosition}) => {
-    if (currentPosition !== 'above') {
-      return;
+    static propTypes = {
+        caption: PropTypes.string,
+        selectable: PropTypes.bool,
+        draggable: PropTypes.bool,
+        checked: PropTypes.bool,
+        checkboxDisabled: PropTypes.bool,
+        sticky: PropTypes.bool,
+        topStickOffset: PropTypes.string,
+        onCheckboxChange: PropTypes.func,
+        columns: PropTypes.array.isRequired,
+        onSort: PropTypes.func,
+        sortKey: PropTypes.string,
+        sortOrder: PropTypes.bool
+    };
+    static defaultProps = {
+        selectable: true,
+        draggable: false,
+        checked: true,
+        sticky: true,
+        topStickOffset: '0px',
+        onSort: () => { },
+        onCheckboxChange: () => { },
+        sortKey: 'id',
+        sortOrder: true
+    };
+    state = {
+        fixed: false,
+        headerWidth: undefined,
+        widths: []
+    };
+    id = getUID('table-header-');
+    onCheckboxFocus = (event) => {
+        event.currentTarget.blur();
+    };
+    _columnsRowNode;
+    storeColumnsRowNode = (node) => {
+        if (node) {
+            this._columnsRowNode = node;
+            this.calculateColumnsWidths(node);
+        }
+    };
+    onScrollIn = () => {
+        this.calculateColumnsWidths(this._columnsRowNode);
+        this.setState({ fixed: false });
+    };
+    onScrollOut = ({ currentPosition }) => {
+        if (currentPosition !== 'above') {
+            return;
+        }
+        this.calculateColumnsWidths(this._columnsRowNode);
+        this.setState({ fixed: true });
+    };
+    calculateColumnsWidths(columnsRowNode) {
+        this.setState({
+            headerWidth: columnsRowNode?.clientWidth,
+            widths: [...columnsRowNode?.childNodes ?? []].map(column => (column instanceof Element ? column.clientWidth : 0))
+        });
     }
-    this.calculateColumnsWidths(this._columnsRowNode);
-    this.setState({fixed: true});
-  };
-
-  calculateColumnsWidths(columnsRowNode) {
-    this.setState({
-      headerWidth: columnsRowNode.clientWidth,
-      widths: [...columnsRowNode.childNodes].map(column => column.clientWidth)
-    });
-  }
-
-  createCells(widths = []) {
-    const {
-      selectable, draggable, columns, checked, checkboxDisabled,
-      onCheckboxChange, onSort, sortKey, sortOrder
-    } = this.props;
-
-    const metaColumnClasses = classNames(style.metaColumn, style.headerMetaColumn);
-
-    const metaColumn = (
-      <div className={metaColumnClasses}>
+    createCells(widths = []) {
+        const { selectable, draggable, columns, checked, checkboxDisabled, onCheckboxChange, onSort, sortKey, sortOrder } = this.props;
+        const metaColumnClasses = classNames(style.metaColumn, style.headerMetaColumn);
+        const metaColumn = (<div className={metaColumnClasses}>
         {selectable &&
-        (
-          <Checkbox
-            aria-labelledby={this.id}
-            disabled={checkboxDisabled}
-            checked={checked}
-            onChange={onCheckboxChange}
-            onFocus={this.onCheckboxFocus}
-          />
-        )}
-      </div>
-    );
-
-    return columns.map((column, index) => {
-      const columnStyle = widths[index] ? {width: widths[index]} : null;
-      const props = {column, onSort, sortKey, sortOrder, style: columnStyle};
-      return (
-        <HeaderCell
-          key={column.id}
-          data-test={column.id}
-          {...props}
-        >
+                (<Checkbox aria-labelledby={this.id} disabled={checkboxDisabled} checked={checked} onChange={onCheckboxChange} onFocus={this.onCheckboxFocus}/>)}
+      </div>);
+        return columns.map((column, index) => {
+            const columnStyle = widths[index] ? { width: widths[index] } : undefined;
+            const props = { column, onSort, sortKey, sortOrder, style: columnStyle };
+            return (<HeaderCell key={column.id} data-test={column.id} {...props}>
           {index === 0 && (draggable || selectable) && metaColumn}
-        </HeaderCell>
-      );
-    });
-  }
-
-  render() {
-    const {caption, sticky, topStickOffset} = this.props;
-    const {fixed, widths, headerWidth} = this.state;
-
-    const regularCells = this.createCells();
-
-    const waypointChild = (
-      <tr data-test="ring-table-header-row">
+        </HeaderCell>);
+        });
+    }
+    render() {
+        const { caption, sticky, topStickOffset } = this.props;
+        const { fixed, widths, headerWidth } = this.state;
+        const regularCells = this.createCells();
+        const waypointChild = (<tr data-test="ring-table-header-row">
         {/*Since we need to keep the exact amount of columns in each row, we need to present them even being empty*/}
         {/*regularCells doesn't provide any other information than a list of components. Hence using array indexes as keys looks like a sane idea*/}
         {/*eslint-disable-next-line react/no-array-index-key*/}
         {regularCells.map((c, i) => <td key={i}/>)}
-      </tr>
-    );
-
-    return (
-      <thead id={this.id} data-test="ring-table-header" className={style.tableHead}>
-        {caption && (
-          <tr data-test="ring-table-header-row">
-            <th
-              className={classNames(style.headerCell, style.caption)}
-              colSpan={regularCells.length + 1}
-              data-test="ring-table-header-cell"
-            >{caption}</th>
-          </tr>
-        )}
+      </tr>);
+        return (<thead id={this.id} data-test="ring-table-header" className={style.tableHead}>
+        {caption && (<tr data-test="ring-table-header-row">
+            <th className={classNames(style.headerCell, style.caption)} colSpan={regularCells.length + 1} data-test="ring-table-header-cell">{caption}</th>
+          </tr>)}
 
         {sticky &&
-        (
-          <Waypoint
-            topOffset={topStickOffset}
-            onEnter={this.onScrollIn}
-            onLeave={this.onScrollOut}
-          >
+                (<Waypoint topOffset={topStickOffset} onEnter={this.onScrollIn} onLeave={this.onScrollOut}>
             {waypointChild}
-          </Waypoint>
-        )
-        }
+          </Waypoint>)}
 
-        <tr
-          className={style.subHeader}
-          ref={this.storeColumnsRowNode}
-          data-test="ring-table-header-row"
-        >{regularCells}</tr>
+        <tr className={style.subHeader} ref={this.storeColumnsRowNode} data-test="ring-table-header-row">{regularCells}</tr>
 
         {fixed && sticky &&
-          (
-            <tr
-              className={style.subHeaderFixed}
-              style={{width: headerWidth, top: topStickOffset}}
-              data-test="ring-table-header-row"
-            >
+                (<tr className={style.subHeaderFixed} style={{ width: headerWidth, top: topStickOffset }} data-test="ring-table-header-row">
               {this.createCells(widths)}
-            </tr>
-          )
-        }
-      </thead>
-    );
-  }
+            </tr>)}
+      </thead>);
+    }
 }

package/components/table/multitable.d.ts

@@ -0,0 +1,25 @@
+import { PureComponent, ReactElement } from 'react';
+import PropTypes from 'prop-types';
+import { TableAttrs } from './table';
+import { SelectionItem } from './selection';
+export interface MultiTableProps {
+    children: ReactElement<TableAttrs<SelectionItem>>[];
+}
+export default class MultiTable extends PureComponent<MultiTableProps> {
+    static propTypes: {
+        children: PropTypes.Validator<any>;
+    };
+    componentDidUpdate(prevProps: MultiTableProps): void;
+    onUpPress: () => boolean;
+    onDownPress: () => boolean;
+    onEscPress: () => void;
+    onCmdAPress: () => boolean;
+    shortcuts: {
+        up: () => boolean;
+        down: () => boolean;
+        esc: () => void;
+        'command+a': () => boolean;
+        'ctrl+a': () => boolean;
+    };
+    render(): JSX.Element;
+}

package/components/table/multitable.js

@@ -1,99 +1,81 @@
-import React, {PureComponent, Children, cloneElement} from 'react';
+import React, { PureComponent, Children, cloneElement } from 'react';
 import PropTypes from 'prop-types';
-
 export default class MultiTable extends PureComponent {
-  static propTypes = {
-    children: PropTypes.any.isRequired
-  };
-
-  componentDidUpdate(prevProps) {
-    if (prevProps.children) {
-      const prevSelections = prevProps.children.map(element => element.props.selection);
-      const prevFocusedIndex = prevSelections.findIndex(selection => selection.getFocused());
-      const prevFocused = prevSelections[prevFocusedIndex];
-
-      const currentSelections = this.props.children.map(element => element.props.selection);
-      const currentFocused = currentSelections.filter(selection => selection.getFocused());
-
-      if (currentFocused.includes(prevFocused)) {
-        prevProps.children[prevFocusedIndex].props.onSelect(prevFocused.resetFocus());
-      }
+    static propTypes = {
+        children: PropTypes.any.isRequired
+    };
+    componentDidUpdate(prevProps) {
+        if (prevProps.children) {
+            const prevSelections = prevProps.children.map(element => element.props.selection);
+            const prevFocusedIndex = prevSelections.findIndex(selection => selection.getFocused());
+            const prevFocused = prevSelections[prevFocusedIndex];
+            const currentSelections = this.props.children.map(element => element.props.selection);
+            const currentFocused = currentSelections.filter(selection => selection.getFocused());
+            if (currentFocused.includes(prevFocused)) {
+                prevProps.children[prevFocusedIndex].props.onSelect?.(prevFocused.resetFocus());
+            }
+        }
     }
-  }
-
-  onUpPress = () => {
-    const {children: tables} = this.props;
-
-    const tableIndex = tables.findIndex(({props: {selection}}) => selection.getFocused());
-    const currentTable = tables[tableIndex].props;
-    const prevTable = tables[tableIndex - 1] ? tables[tableIndex - 1].props : null;
-
-    let newSelection = currentTable.selection.moveUp();
-    if (newSelection) {
-      currentTable.onSelect(newSelection);
-    } else if (prevTable) {
-      currentTable.onSelect(currentTable.selection.resetFocus());
-      newSelection = prevTable.selection.moveUp();
-      if (newSelection) {
-        prevTable.onSelect(newSelection);
-      }
+    onUpPress = () => {
+        const { children: tables } = this.props;
+        const tableIndex = tables.findIndex(({ props: { selection } }) => selection.getFocused());
+        const currentTable = tables[tableIndex].props;
+        const prevTable = tables[tableIndex - 1] ? tables[tableIndex - 1].props : null;
+        let newSelection = currentTable.selection.moveUp();
+        if (newSelection) {
+            currentTable.onSelect?.(newSelection);
+        }
+        else if (prevTable) {
+            currentTable.onSelect?.(currentTable.selection.resetFocus());
+            newSelection = prevTable.selection.moveUp();
+            if (newSelection) {
+                prevTable.onSelect?.(newSelection);
+            }
+        }
+        return false;
+    };
+    onDownPress = () => {
+        const { children: tables } = this.props;
+        const tableIndex = tables.findIndex(({ props: { selection } }) => selection.getFocused());
+        const currentTable = tables[tableIndex].props;
+        const nextTable = tables[tableIndex + 1] ? tables[tableIndex + 1].props : null;
+        let newSelection = currentTable.selection.moveDown();
+        if (newSelection) {
+            currentTable.onSelect?.(newSelection);
+        }
+        else if (nextTable) {
+            currentTable.onSelect?.(currentTable.selection.resetFocus());
+            newSelection = nextTable.selection.moveDown();
+            if (newSelection) {
+                nextTable.onSelect?.(newSelection);
+            }
+        }
+        return false;
+    };
+    onEscPress = () => {
+        const { children } = this.props;
+        Children.forEach(children, ({ props: { selection, onSelect } }) => {
+            onSelect(selection.reset());
+        });
+    };
+    onCmdAPress = () => {
+        const { children } = this.props;
+        Children.forEach(children, ({ props: { selection, onSelect } }) => {
+            onSelect(selection.selectAll());
+        });
+        return false;
+    };
+    shortcuts = {
+        up: this.onUpPress,
+        down: this.onDownPress,
+        esc: this.onEscPress,
+        'command+a': this.onCmdAPress,
+        'ctrl+a': this.onCmdAPress
+    };
+    render() {
+        return (<div data-test="ring-multitable">{Children.map(this.props.children, child => {
+                const props = { shortcuts: this.shortcuts };
+                return cloneElement(child, props);
+            })}</div>);
     }
-
-    return false;
-  };
-
-  onDownPress = () => {
-    const {children: tables} = this.props;
-
-    const tableIndex = tables.findIndex(({props: {selection}}) => selection.getFocused());
-    const currentTable = tables[tableIndex].props;
-    const nextTable = tables[tableIndex + 1] ? tables[tableIndex + 1].props : null;
-
-    let newSelection = currentTable.selection.moveDown();
-    if (newSelection) {
-      currentTable.onSelect(newSelection);
-    } else if (nextTable) {
-      currentTable.onSelect(currentTable.selection.resetFocus());
-      newSelection = nextTable.selection.moveDown();
-      if (newSelection) {
-        nextTable.onSelect(newSelection);
-      }
-    }
-
-    return false;
-  };
-
-  onEscPress = () => {
-    const {children} = this.props;
-    Children.forEach(children, ({props: {selection, onSelect}}) => {
-      onSelect(selection.reset());
-    });
-  };
-
-  onCmdAPress = () => {
-    const {children} = this.props;
-    Children.forEach(children, ({props: {selection, onSelect}}) => {
-      onSelect(selection.selectAll());
-    });
-    return false;
-  };
-
-  shortcuts = {
-    up: this.onUpPress,
-    down: this.onDownPress,
-    esc: this.onEscPress,
-    'command+a': this.onCmdAPress,
-    'ctrl+a': this.onCmdAPress
-  };
-
-  render() {
-    return (
-      <div data-test="ring-multitable">{
-        Children.map(this.props.children, child => {
-          const props = {shortcuts: this.shortcuts};
-          return cloneElement(child, props);
-        })
-      }</div>
-    );
-  }
 }

package/components/table/row-with-focus-sensor.d.ts

@@ -0,0 +1,18 @@
+import React, { PureComponent } from 'react';
+import { FocusSensorProps } from '../global/focus-sensor-hoc';
+import Row, { RowProps } from './row';
+import { SelectionItem } from './selection';
+export interface RowWithFocusSensorCallbacksProps<T extends SelectionItem> extends Omit<FocusSensorProps<RowProps<T>, HTMLTableRowElement, typeof Row>, 'onFocus'> {
+    onFocus: (item: T) => void;
+    onSelect: (item: T, selected: boolean) => void;
+    onCollapse: (item: T) => void;
+    onExpand: (item: T) => void;
+}
+export default class RowWithFocusSensorCallbacks<T extends SelectionItem> extends PureComponent<RowWithFocusSensorCallbacksProps<T>> {
+    RowWithFocusSensor: React.ComponentType<FocusSensorProps<RowProps<T>, HTMLDivElement, typeof Row>>;
+    onFocus: () => void;
+    onSelect: (item: T, selected: boolean) => void;
+    onCollapse: () => void;
+    onExpand: () => void;
+    render(): JSX.Element;
+}

package/components/table/row-with-focus-sensor.js

@@ -1,39 +1,25 @@
-import React, {PureComponent} from 'react';
-
+import React, { PureComponent } from 'react';
 import focusSensorHOC from '../global/focus-sensor-hoc';
-
 import Row from './row';
-
-const RowWithFocusSensor = focusSensorHOC(Row);
-
+const getContainer = () => focusSensorHOC(Row);
 export default class RowWithFocusSensorCallbacks extends PureComponent {
-  static propTypes = Row.propTypes;
-
-  onFocus = () => {
-    this.props.onFocus(this.props.item);
-  };
-
-  onSelect = (item, selected) => {
-    this.props.onSelect(item, selected);
-  };
-
-  onCollapse = () => {
-    this.props.onCollapse(this.props.item);
-  };
-
-  onExpand = () => {
-    this.props.onExpand(this.props.item);
-  };
-
-  render() {
-    return (
-      <RowWithFocusSensor
-        {...this.props}
-        onFocus={this.onFocus}
-        onSelect={this.onSelect}
-        onCollapse={this.onCollapse}
-        onExpand={this.onExpand}
-      />
-    );
-  }
+    // https://stackoverflow.com/a/53882322/6304152
+    RowWithFocusSensor = getContainer();
+    onFocus = () => {
+        this.props.onFocus(this.props.item);
+    };
+    onSelect = (item, selected) => {
+        this.props.onSelect(item, selected);
+    };
+    onCollapse = () => {
+        this.props.onCollapse(this.props.item);
+    };
+    onExpand = () => {
+        this.props.onExpand(this.props.item);
+    };
+    render() {
+        return (<this.RowWithFocusSensor {...this.props} onFocus={this.onFocus} onSelect={this.onSelect} onCollapse={this.onCollapse} onExpand={this.onExpand}/>);
+    }
 }
+RowWithFocusSensorCallbacks.propTypes =
+    Row.propTypes;

package/components/table/row.d.ts

@@ -0,0 +1,56 @@
+import React, { HTMLAttributes, PureComponent } from 'react';
+import { FocusSensorAddProps } from '../global/focus-sensor-hoc';
+import { Column } from './header-cell';
+import { SelectionItem } from './selection';
+export interface RowProps<T extends SelectionItem> extends Omit<HTMLAttributes<HTMLTableRowElement>, 'onClick' | 'onDoubleClick' | 'onSelect'>, FocusSensorAddProps<HTMLTableRowElement> {
+    item: T;
+    columns: readonly Column<T>[];
+    selectable: boolean;
+    showFocus: boolean;
+    draggable: boolean;
+    alwaysShowDragHandle: boolean;
+    selected: boolean;
+    onHover: (item: T, e: React.MouseEvent<HTMLTableRowElement>) => void;
+    onSelect: (item: T, selected: boolean) => void;
+    onDoubleClick: (item: T) => void;
+    onClick: (item: T, e: React.MouseEvent<HTMLTableRowElement>) => void;
+    level: number;
+    collapsible: boolean;
+    parentCollapsible: boolean;
+    collapsed: boolean;
+    onCollapse: (item: T) => void;
+    onExpand: (item: T) => void;
+    showDisabledSelection?: boolean | null | undefined;
+    checkboxTooltip?: string | undefined;
+    autofocus?: boolean | null | undefined;
+    'data-test'?: string | null | undefined;
+}
+export default class Row<T extends SelectionItem> extends PureComponent<RowProps<T>> {
+    static defaultProps: {
+        selectable: boolean;
+        showFocus: boolean;
+        draggable: boolean;
+        alwaysShowDragHandle: boolean;
+        selected: boolean;
+        onHover: () => void;
+        onSelect: () => void;
+        onDoubleClick: () => void;
+        onClick: () => void;
+        level: number;
+        collapsible: boolean;
+        parentCollapsible: boolean;
+        collapsed: boolean;
+        onCollapse: () => void;
+        onExpand: () => void;
+    };
+    id: string;
+    onMouseEnter: (e: React.MouseEvent<HTMLTableRowElement>) => void;
+    onClick: (e: React.MouseEvent<HTMLTableRowElement>) => void;
+    onCheckboxFocus: () => void;
+    onCheckboxChange: () => void;
+    toggleSelection(): void;
+    onDoubleClick: () => void;
+    row?: HTMLElement | null;
+    rowRef: (el: HTMLElement | null) => void;
+    render(): JSX.Element;
+}