@jetbrains/ring-ui 4.1.5 → 5.0.0-beta.2

package/components/table/header.js

@@ -1,178 +0,0 @@
-import React, {PureComponent} 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 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;
-    }
-    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}>
-        {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}
-        >
-          {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>
-    );
-  }
-}

package/components/table/multitable.js

@@ -1,99 +0,0 @@
-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());
-      }
-    }
-  }
-
-  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>
-    );
-  }
-}

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

@@ -1,39 +0,0 @@
-import React, {PureComponent} from 'react';
-
-import focusSensorHOC from '../global/focus-sensor-hoc';
-
-import Row from './row';
-
-const RowWithFocusSensor = 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}
-      />
-    );
-  }
-}

package/components/table/row.js

@@ -1,242 +0,0 @@
-import React, {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 Cell from './cell';
-import style from './table.css';
-
-const DragHandle = ({alwaysShowDragHandle}) => {
-  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 default class Row extends PureComponent {
-  static 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
-  };
-
-  static defaultProps = {
-    selectable: true,
-    showFocus: false,
-    draggable: false,
-    alwaysShowDragHandle: false,
-    selected: false,
-    onHover: () => {},
-    onSelect: () => {},
-    onDoubleClick: () => {},
-    onClick: () => {},
-    onFocusRestore: () => {},
-    level: 0,
-    collapsible: false,
-    parentCollapsible: false,
-    collapsed: false,
-    onCollapse: () => {},
-    onExpand: () => {}
-  };
-
-  id = getUID('table-row-');
-
-  onMouseEnter = () => {
-    const {item, onHover} = this.props;
-    onHover(item);
-  };
-
-  onClick = e => {
-    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);
-  };
-
-  rowRef = el => {
-    this.row = el;
-  };
-
-  render() {
-    const {
-      item, columns, selectable, selected,
-      showFocus, draggable, alwaysShowDragHandle, level,
-      collapsible, parentCollapsible, collapsed,
-      onCollapse, onExpand, showDisabledSelection,
-      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>
-    );
-  }
-}