@jetbrains/ring-ui 4.1.3 → 5.0.0-beta.0

package/components/table/header.tsx

@@ -0,0 +1,196 @@
+import React, {ChangeEventHandler, PureComponent, SyntheticEvent} from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import {Waypoint} from 'react-waypoint';
+
+import Checkbox from '../checkbox/checkbox';
+
+import getUID from '../global/get-uid';
+
+import style from './table.css';
+import HeaderCell, {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.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: SyntheticEvent<HTMLElement>) => {
+    event.currentTarget.blur();
+  };
+
+  private _columnsRowNode?: HTMLElement | null;
+  storeColumnsRowNode = (node: HTMLElement | null) => {
+    if (node) {
+      this._columnsRowNode = node;
+      this.calculateColumnsWidths(node);
+    }
+  };
+
+  onScrollIn = () => {
+    this.calculateColumnsWidths(this._columnsRowNode);
+    this.setState({fixed: false});
+  };
+
+  onScrollOut = ({currentPosition}: Waypoint.CallbackArgs) => {
+    if (currentPosition !== 'above') {
+      return;
+    }
+    this.calculateColumnsWidths(this._columnsRowNode);
+    this.setState({fixed: true});
+  };
+
+  calculateColumnsWidths(columnsRowNode: HTMLElement | null | undefined) {
+    this.setState({
+      headerWidth: columnsRowNode?.clientWidth,
+      widths: [...columnsRowNode?.childNodes ?? []].map(column =>
+        (column instanceof Element ? column.clientWidth : 0))
+    });
+  }
+
+  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]} : 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">
+        {/*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>
+        )}
+
+        {sticky &&
+        (
+          <Waypoint
+            topOffset={topStickOffset}
+            onEnter={this.onScrollIn}
+            onLeave={this.onScrollOut}
+          >
+            {waypointChild}
+          </Waypoint>
+        )
+        }
+
+        <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"
+            >
+              {this.createCells(widths)}
+            </tr>
+          )
+        }
+      </thead>
+    );
+  }
+}
+
+export type HeaderAttrs = JSX.LibraryManagedAttributes<typeof Header, HeaderProps>

package/components/table/multitable.tsx

@@ -0,0 +1,106 @@
+import React, {PureComponent, Children, cloneElement, 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.any.isRequired
+  };
+
+  componentDidUpdate(prevProps: MultiTableProps) {
+    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);
+      }
+    }
+
+    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<ReactElement>(children, ({props: {selection, onSelect}}) => {
+      onSelect(selection.reset());
+    });
+  };
+
+  onCmdAPress = () => {
+    const {children} = this.props;
+    Children.forEach<ReactElement>(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<ReactElement, ReactElement>(this.props.children, child => {
+          const props = {shortcuts: this.shortcuts};
+          return cloneElement(child, props);
+        })
+      }</div>
+    );
+  }
+}

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

@@ -0,0 +1,56 @@
+import React, {PureComponent, ComponentType} from 'react';
+
+import focusSensorHOC, {FocusSensorProps} from '../global/focus-sensor-hoc';
+
+import Row, {RowProps} from './row';
+import {SelectionItem} from './selection';
+
+const getContainer = <T extends SelectionItem>() =>
+  focusSensorHOC<HTMLDivElement, RowProps<T>, typeof Row>(Row);
+
+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>> {
+  // https://stackoverflow.com/a/53882322/6304152
+  RowWithFocusSensor = getContainer<T>();
+
+  onFocus = () => {
+    this.props.onFocus(this.props.item);
+  };
+
+  onSelect = (item: T, selected: boolean) => {
+    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 as ComponentType<unknown>).propTypes =
+  (Row as ComponentType<unknown>).propTypes;

package/components/table/row.tsx

@@ -0,0 +1,276 @@
+import React, {ComponentType, HTMLAttributes, PureComponent} from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import chevronRightIcon from '@jetbrains/icons/chevron-right';
+import chevronDownIcon from '@jetbrains/icons/chevron-down';
+import dragIcon from '@jetbrains/icons/drag';
+
+import Checkbox from '../checkbox/checkbox';
+import Button from '../button/button';
+import Tooltip from '../tooltip/tooltip';
+import dataTests from '../global/data-tests';
+
+import getUID from '../global/get-uid';
+import composeRefs from '../global/composeRefs';
+
+import {FocusSensorAddProps} from '../global/focus-sensor-hoc';
+
+import Cell from './cell';
+import style from './table.css';
+
+import {Column} from './header-cell';
+import {SelectionItem} from './selection';
+
+interface DragHandleProps {
+  alwaysShowDragHandle: boolean
+}
+const DragHandle = ({alwaysShowDragHandle}: DragHandleProps) => {
+  const classes = classNames(style.dragHandle, {
+    [style.visibleDragHandle]: alwaysShowDragHandle
+  });
+
+  return (
+    <Button
+      data-movable-handle
+      title="Drag"
+      className={classes}
+      icon={dragIcon}
+    />
+  );
+};
+DragHandle.propTypes = {
+  alwaysShowDragHandle: PropTypes.bool
+};
+
+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) => 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: true,
+    showFocus: false,
+    draggable: false,
+    alwaysShowDragHandle: false,
+    selected: false,
+    onHover: () => {},
+    onSelect: () => {},
+    onDoubleClick: () => {},
+    onClick: () => {},
+    level: 0,
+    collapsible: false,
+    parentCollapsible: false,
+    collapsed: false,
+    onCollapse: () => {},
+    onExpand: () => {}
+  };
+
+  id = getUID('table-row-');
+
+  onMouseEnter = () => {
+    const {item, onHover} = this.props;
+    onHover(item);
+  };
+
+  onClick = (e: React.MouseEvent<HTMLTableRowElement>) => {
+    const {item} = this.props;
+
+    this.props.onClick(item, e);
+
+    if (e.shiftKey) {
+      this.toggleSelection();
+    }
+  };
+
+  onCheckboxFocus = () => {
+    this.props.onFocusRestore();
+  };
+
+  onCheckboxChange = () => {
+    this.toggleSelection();
+  };
+
+  toggleSelection() {
+    const {selectable, selected, onSelect, item} = this.props;
+    if (selectable) {
+      onSelect(item, !selected);
+    }
+  }
+
+  onDoubleClick = () => {
+    const {item} = this.props;
+    this.props.onDoubleClick(item);
+  };
+
+  row?: HTMLElement | null;
+  rowRef = (el: HTMLElement | null) => {
+    this.row = el;
+  };
+
+  render() {
+    const {
+      item, columns, selectable, selected,
+      showFocus, draggable, alwaysShowDragHandle, level,
+      collapsible, parentCollapsible, collapsed,
+      onCollapse, onExpand, showDisabledSelection, onSelect,
+      checkboxTooltip, innerRef, focused, autofocus, onFocusReset,
+      onFocusRestore, onHover, className, 'data-test': dataTest, ...restProps
+    } = this.props;
+
+    const classes = classNames(className, {
+      [style.row]: true,
+      [style.rowFocused]: showFocus,
+      [style.rowSelected]: selected
+    });
+
+    const testAttrs = {
+      'data-test-focused': showFocus || undefined,
+      'data-test-selected': selected || undefined
+    };
+
+    const metaColumnClasses = style.metaColumn;
+
+    const SUBITEM_OFFSET = 30;
+    const COLLAPSIBLE_PARENT_OFFSET = 20;
+    const gap = level * SUBITEM_OFFSET + (parentCollapsible ? COLLAPSIBLE_PARENT_OFFSET : 0);
+    const metaColumnStyle = {
+      paddingLeft: `${gap}px`
+    };
+
+    const metaColumn = (
+      <div className={metaColumnClasses} style={metaColumnStyle}>
+        {draggable &&
+          <DragHandle alwaysShowDragHandle={alwaysShowDragHandle}/>
+        }
+
+        {selectable &&
+          (
+            <Tooltip title={checkboxTooltip}>
+              <Checkbox
+                aria-labelledby={this.id}
+                className={showFocus ? 'ring-checkbox_focus' : ''}
+                checked={selected}
+                onFocus={this.onCheckboxFocus}
+                onChange={this.onCheckboxChange}
+                tabIndex={-1}
+              />
+            </Tooltip>
+          )
+        }
+
+        {!selectable && showDisabledSelection &&
+          (
+            <Tooltip title={checkboxTooltip}>
+              <Checkbox
+                aria-labelledby={this.id}
+                checked={selected}
+                disabled
+              />
+            </Tooltip>
+          )
+        }
+
+        {collapsible && collapsed &&
+          (
+            <Button
+              className={style.rowCollapseExpandButton}
+              icon={chevronRightIcon}
+              onClick={() => onExpand(item)}
+            />
+          )
+        }
+
+        {collapsible && !collapsed &&
+          (
+            <Button
+              className={style.rowCollapseExpandButton}
+              icon={chevronDownIcon}
+              onClick={() => onCollapse(item)}
+            />
+          )
+        }
+      </div>
+    );
+
+    const cells = columns.map((column, index) => {
+      const getValue = column.getValue || (() => item[column.id]);
+      const getDataTest = column.getDataTest || (() => column.id);
+      const value = getValue(item, column);
+      const cellClasses = classNames({[style.cellRight]: column.rightAlign}, column.className);
+      const showMetaColumn = draggable || selectable || showDisabledSelection || !!level;
+
+      return (
+        <Cell key={column.id} className={cellClasses} data-test={getDataTest(item, column)}>
+          {index === 0 && (showMetaColumn) && metaColumn}
+          {value}
+        </Cell>
+      );
+    });
+
+    return (
+      <tr
+        id={this.id}
+        ref={composeRefs(this.rowRef, innerRef)}
+        className={classes}
+        tabIndex={0}
+        data-test={dataTests('ring-table-row', dataTest)}
+        {...testAttrs}
+        {...restProps}
+        onMouseMove={this.onMouseEnter}
+        onClick={this.onClick}
+        onDoubleClick={this.onDoubleClick}
+      >{cells}</tr>
+    );
+  }
+}
+
+(Row as ComponentType<unknown>).propTypes = {
+  className: PropTypes.string,
+  item: PropTypes.object.isRequired,
+  columns: PropTypes.array.isRequired,
+  selectable: PropTypes.bool,
+  showFocus: PropTypes.bool,
+  draggable: PropTypes.bool,
+  alwaysShowDragHandle: PropTypes.bool,
+  selected: PropTypes.bool,
+  onHover: PropTypes.func,
+  onSelect: PropTypes.func,
+  onDoubleClick: PropTypes.func,
+  onClick: PropTypes.func,
+  onFocusRestore: PropTypes.func,
+  level: PropTypes.number,
+  collapsible: PropTypes.bool,
+  parentCollapsible: PropTypes.bool,
+  collapsed: PropTypes.bool,
+  onCollapse: PropTypes.func,
+  onExpand: PropTypes.func,
+  showDisabledSelection: PropTypes.bool,
+  checkboxTooltip: PropTypes.string,
+  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  focused: PropTypes.bool,
+  autofocus: PropTypes.bool,
+  onFocusReset: PropTypes.func,
+  'data-test': PropTypes.string
+};

package/components/table/selection-adapter.ts

@@ -0,0 +1,12 @@
+import Selection, {SelectionItem} from './selection';
+
+export default function selectionAdapter(getSelection: () => Selection<SelectionItem>) {
+  return {
+    get size() {
+      return getSelection().getActive().size;
+    },
+    get items() {
+      return [...getSelection().getActive()];
+    }
+  };
+}