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

package/components/table/table.examples.js

@@ -1,346 +0,0 @@
-import React, {Component} from 'react';
-
-import reactDecorator from '../../.storybook/react-decorator';
-
-import {Grid, Row, Col} from '@jetbrains/ring-ui/components/grid/grid';
-import Link from '@jetbrains/ring-ui/components/link/link';
-import Pager from '@jetbrains/ring-ui/components/pager/pager';
-import Button from '@jetbrains/ring-ui/components/button/button';
-
-import Table, {Table as BaseTable} from '@jetbrains/ring-ui/components/table/table';
-import MultiTable from '@jetbrains/ring-ui/components/table/multitable';
-import Selection from '@jetbrains/ring-ui/components/table/selection';
-import mock from '@jetbrains/ring-ui/components/table/table.examples.json';
-import {continents, countries} from '@jetbrains/ring-ui/components/table/table.examples2.json';
-
-export default {
-  title: 'Components/Table',
-  decorators: [reactDecorator()],
-
-  parameters: {
-    component: BaseTable,
-    framework: 'react',
-    hermione: {skip: true}
-  },
-  argTypes: {
-    selection: {
-      control: {disable: true}
-    }
-  }
-};
-
-const PAGE_SIZE = 7;
-const TOTAL = mock.length;
-class BasicDemo extends Component {
-  state = {
-    data: [],
-    selection: new Selection(),
-    page: 1,
-    pageSize: PAGE_SIZE,
-    total: TOTAL,
-    sortKey: 'country',
-    sortOrder: true
-  };
-
-  componentDidMount() {
-    this.loadPage();
-  }
-
-  componentDidUpdate(prevProps, prevState) {
-    const {page, sortKey, sortOrder} = this.state;
-    if (
-      page !== prevState.page ||
-      sortKey !== prevState.sortKey ||
-      sortOrder !== prevState.sortOrder
-    ) {
-      this.loadPage();
-    }
-  }
-
-  onSort = event => {
-    this.props.onSort(event);
-    this.setState({sortKey: event.column.id, sortOrder: event.order});
-  };
-
-  onPageChange = page => {
-    this.setState({page});
-  };
-
-  isItemSelectable(item) {
-    return item.id !== 14;
-  }
-
-  loadPage = () => {
-    const {page, pageSize, sortKey, sortOrder} = this.state;
-
-    let data = [...mock];
-    data.sort((a, b) => a[sortKey].localeCompare(b[sortKey]) * (sortOrder ? 1 : -1));
-    data = data.slice((page - 1) * pageSize, (page - 1) * pageSize + pageSize);
-
-    const selection = new Selection({data, isItemSelectable: this.isItemSelectable});
-
-    this.setState({data, selection});
-  };
-
-  render() {
-    const {onSelect, withCaption, onReorder, ...restProps} = this.props;
-    const {
-      data,
-      page,
-      pageSize,
-      total,
-      selection,
-      sortKey,
-      sortOrder
-    } = this.state;
-
-    return (
-      <div>
-        <Table
-          {...restProps}
-          data={data}
-          selection={selection}
-          onSelect={newSelection => {
-            onSelect(newSelection);
-            this.setState({selection: newSelection});
-          }}
-          onReorder={event => {
-            onReorder(event);
-            this.setState({data: event.data});
-          }}
-          onSort={this.onSort}
-          sortKey={sortKey}
-          sortOrder={sortOrder}
-          caption={withCaption ? 'Countries' : undefined}
-          isItemSelectable={this.isItemSelectable}
-          getItemDataTest={it => it.country}
-        />
-
-        <Grid>
-          <Row>
-            <Col>
-              <Pager
-                total={total}
-                pageSize={pageSize}
-                currentPage={page}
-                disablePageSizeSelector
-                onPageChange={this.onPageChange}
-              />
-            </Col>
-          </Row>
-
-          <Row>
-            <Col>
-              Active items: {[...selection.getActive()].map(item => item.country).join(', ')}
-            </Col>
-          </Row>
-
-          <Row>
-            <Col>
-              <Button onClick={() => this.setState({data: [...data]})}>
-                Recreate data array
-              </Button>
-              {page === 1 && data.length > 5 && (
-                <>
-                  {' '}
-                  <span id="button-select-bulgaria">
-                    {selection.isSelected(data[3])
-                      ? (
-                        <Button
-                          onClick={() => this.setState({selection: selection.deselect(data[3])})}
-                        >
-                          Deselect {data[3].country}
-                        </Button>
-                      )
-                      : (
-                        <Button
-                          onClick={() => this.setState({selection: selection.select(data[3])})}
-                        >
-                          Select {data[3].country}
-                        </Button>
-                      )}
-                  </span>
-
-                  <span id="button-select-finland">
-                    {' '}
-                    {selection.isSelected(data[5])
-                      ? (
-                        <Button
-                          onClick={() => this.setState({selection: selection.deselect(data[5])})}
-                        >
-                          Deselect {data[5].country}
-                        </Button>
-                      )
-                      : (
-                        <Button
-                          onClick={() => this.setState({selection: selection.select(data[5])})}
-                        >
-                          Select {data[5].country}
-                        </Button>
-                      )}
-                  </span>
-                </>
-              )}
-            </Col>
-          </Row>
-        </Grid>
-      </div>
-    );
-  }
-}
-export const basic = args => <BasicDemo {...args}/>;
-basic.args = {
-  columns: [
-    {
-      id: 'country',
-      title: 'Country',
-      sortable: true
-    },
-
-    {
-      id: 'id',
-      title: 'ID',
-      rightAlign: true
-    },
-
-    {
-      id: 'city',
-      title: 'City',
-      getDataTest: item => item.city,
-      sortable: true
-    },
-
-    {
-      id: 'url',
-      title: 'URL',
-      getValue({url}) {
-        return <Link href={url}>{url}</Link>;
-      }
-    }
-  ],
-  autofocus: true,
-  selectable: true,
-  draggable: true,
-  withCaption: false,
-  isItemSelectable: item => item.id !== 14
-};
-basic.argTypes = {
-  data: {
-    control: {disable: true}
-  },
-  sortKey: {
-    control: {disable: true}
-  },
-  sortOrder: {
-    control: {disable: true}
-  },
-  caption: {
-    control: {disable: true}
-  }
-};
-basic.storyName = 'basic';
-
-const data1 = continents;
-const data2 = countries;
-
-class MultiTableDemo extends Component {
-  state = {
-    selection1: new Selection({data: data1}),
-    selection2: new Selection({data: data2})
-  };
-
-  columns1 = [
-    {
-      id: 'continent',
-      title: 'Continent'
-    },
-    {
-      id: 'url',
-      title: 'URL'
-    }
-  ];
-
-  columns2 = [
-    {
-      id: 'country',
-      title: 'Country'
-    },
-    {
-      id: 'city',
-      title: 'City'
-    },
-    {
-      id: 'url',
-      title: 'URL'
-    }
-  ];
-
-  render() {
-    return (
-      <MultiTable>
-        <Table
-          data={data1}
-          columns={this.columns1}
-          caption="Continents"
-          selection={this.state.selection1}
-          onSelect={selection => this.setState({selection1: selection})}
-        />
-
-        <Table
-          data={data2}
-          columns={this.columns2}
-          caption="Countries"
-          autofocus
-          selection={this.state.selection2}
-          onSelect={selection => this.setState({selection2: selection})}
-        />
-      </MultiTable>
-    );
-  }
-}
-export const multiTable = () => <MultiTableDemo/>;
-multiTable.storyName = 'multi table';
-
-
-class EmptyTableDemo extends Component {
-  state = {
-    selection: new Selection({})
-  };
-
-  render() {
-    const {onSelect, ...restProps} = this.props;
-
-    return (
-      <Table
-        {...restProps}
-        selection={this.state.selection}
-        onSelect={selection => {
-          onSelect(selection);
-          this.setState({selection});
-        }}
-      />
-    );
-  }
-}
-
-export const emptyTable = args => <EmptyTableDemo {...args}/>;
-emptyTable.args = {
-  data: [],
-  columns: [
-    {
-      id: 'country',
-      title: 'Country'
-    },
-    {
-      id: 'city',
-      title: 'City'
-    },
-    {
-      id: 'url',
-      title: 'URL'
-    }
-  ],
-  renderEmpty: () => 'Empty table',
-  selectable: false
-};
-emptyTable.storyName = 'empty table';

package/components/table/table.js

@@ -1,315 +0,0 @@
-/**
- * @name Table
- */
-
-import React, {PureComponent} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import {arrayMove, List} from 'react-movable';
-
-import focusSensorHOC from '../global/focus-sensor-hoc';
-import getUID from '../global/get-uid';
-import Shortcuts from '../shortcuts/shortcuts';
-import Loader from '../loader/loader';
-
-import Selection from './selection';
-import Header from './header';
-import style from './table.css';
-import selectionShortcutsHOC from './selection-shortcuts-hoc';
-import disableHoverHOC from './disable-hover-hoc';
-import Row from './row-with-focus-sensor';
-
-/**
- * Interactive table with selection and keyboard navigation support.
- */
-export class Table extends PureComponent {
-  static propTypes = {
-    className: PropTypes.string,
-    loaderClassName: PropTypes.string,
-    data: PropTypes.array.isRequired,
-    columns: PropTypes.array.isRequired,
-    caption: PropTypes.string,
-    isItemSelectable: PropTypes.func,
-    stickyHeader: PropTypes.bool,
-    stickyHeaderOffset: PropTypes.string,
-    loading: PropTypes.bool,
-    getItemKey: PropTypes.func,
-    getItemClassName: PropTypes.func,
-    getItemDataTest: PropTypes.func,
-    onSort: PropTypes.func,
-    onReorder: PropTypes.func,
-    sortKey: PropTypes.string,
-    sortOrder: PropTypes.bool,
-    draggable: PropTypes.bool,
-    alwaysShowDragHandle: PropTypes.bool,
-    getItemLevel: PropTypes.func,
-    isItemCollapsible: PropTypes.func,
-    isParentCollapsible: PropTypes.func,
-    isItemCollapsed: PropTypes.func,
-    onItemCollapse: PropTypes.func,
-    onItemExpand: PropTypes.func,
-    isDisabledSelectionVisible: PropTypes.func,
-    getCheckboxTooltip: PropTypes.func,
-    innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.func]),
-
-    // focusSensorHOC
-    focused: PropTypes.bool,
-    onFocusRestore: PropTypes.func,
-
-    // selectionShortcutsHOC
-    selection: PropTypes.instanceOf(Selection).isRequired,
-    selectable: PropTypes.bool,
-    onSelect: PropTypes.func,
-    onItemDoubleClick: PropTypes.func,
-    onItemClick: PropTypes.func,
-    shortcutsMap: PropTypes.object,
-
-    // disableHoverHOC
-    disabledHover: PropTypes.bool,
-
-    remoteSelection: PropTypes.bool,
-
-    renderEmpty: PropTypes.func
-  };
-
-  static defaultProps = {
-    isItemSelectable: () => true,
-    loading: false,
-    onSort: () => {},
-    onReorder: () => {},
-    getItemKey: item => item.id,
-    sortKey: 'id',
-    sortOrder: true,
-    draggable: false,
-    alwaysShowDragHandle: false,
-    stickyHeader: true,
-    getItemLevel: () => 0,
-    getItemClassName: () => null,
-    getItemDataTest: () => null,
-    isItemCollapsible: () => false,
-    isParentCollapsible: () => false,
-    isItemCollapsed: () => false,
-    onItemCollapse: () => {},
-    onItemExpand: () => {},
-    onItemDoubleClick: () => {},
-    onItemClick: () => {},
-    remoteSelection: false,
-    isDisabledSelectionVisible: () => {},
-    getCheckboxTooltip: () => {}
-  };
-
-  state = {
-    shortcutsScope: getUID('ring-table-'),
-    userSelectNone: false
-  };
-
-  componentDidMount() {
-    document.addEventListener('mouseup', this.onMouseUp);
-  }
-
-  componentDidUpdate({data, selection, onSelect, selectable, remoteSelection}) {
-    if (data !== this.props.data && remoteSelection) {
-      onSelect(selection.cloneWith({data: this.props.data}));
-    }
-
-    if (!this.props.selectable && this.props.selectable !== selectable) {
-      onSelect(selection.resetSelection());
-    }
-  }
-
-  componentWillUnmount() {
-    document.removeEventListener('mouseup', this.onMouseUp);
-  }
-
-  onMouseDown = e => {
-    if (e.shiftKey) {
-      this.setState({userSelectNone: true});
-    }
-  };
-
-  onMouseUp = () => {
-    if (this.state.userSelectNone) {
-      this.setState({userSelectNone: false});
-    }
-  };
-
-  onRowFocus = row => {
-    const {selection, onSelect} = this.props;
-    onSelect(selection.focus(row));
-  };
-
-  onRowSelect = (row, selected) => {
-    const {selection, onSelect} = this.props;
-    if (selected) {
-      onSelect(selection.select(row));
-    } else {
-      onSelect(selection.deselect(row));
-    }
-  };
-
-  onSortEnd = ({oldIndex, newIndex}) => {
-    const data = arrayMove(this.props.data, oldIndex, newIndex);
-    this.props.onReorder({data, oldIndex, newIndex});
-  };
-
-  onCheckboxChange = e => {
-    const {checked} = e.target;
-    const {selection, onSelect} = this.props;
-
-    if (checked) {
-      onSelect(selection.selectAll());
-    } else {
-      onSelect(selection.reset());
-    }
-
-    this.restoreFocusWithoutScroll();
-  };
-
-  restoreFocusWithoutScroll = () => {
-    const {scrollX, scrollY} = window;
-    this.props.onFocusRestore();
-    window.scrollTo(scrollX, scrollY);
-  };
-
-  render() {
-    const {
-      data, selection, columns, caption, getItemKey, selectable, focused,
-      isItemSelectable, getItemLevel, getItemClassName, getItemDataTest,
-      draggable, alwaysShowDragHandle,
-      loading, onSort, sortKey, sortOrder, loaderClassName, stickyHeader,
-      stickyHeaderOffset, isItemCollapsible, isParentCollapsible, isItemCollapsed,
-      onItemCollapse, onItemExpand, isDisabledSelectionVisible, getCheckboxTooltip,
-      onItemDoubleClick, onItemClick, renderEmpty
-    } = this.props;
-
-
-    // NOTE: Do not construct new object per render because it causes all rows rerendering
-
-    const headerProps = {
-      caption, selectable, draggable,
-      columns, onSort, sortKey, sortOrder,
-      sticky: stickyHeader,
-      topStickOffset: stickyHeaderOffset
-    };
-
-    const selectedSize = selection.getSelected().size;
-    const allSelectedSize = selection.selectAll().getSelected().size;
-    headerProps.checked = selectedSize > 0 && selectedSize === allSelectedSize;
-    headerProps.onCheckboxChange = this.onCheckboxChange;
-    headerProps.checkboxDisabled = this.props.data.length === 0;
-
-    const wrapperClasses = classNames({
-      [style.tableWrapper]: true,
-      [style.loading]: loading
-    });
-
-    const classes = classNames(this.props.className, {
-      [style.table]: true,
-      [style.multiSelection]: selection.getSelected().size > 0,
-      [style.userSelectNone]: this.state.userSelectNone,
-      [style.disabledHover]: this.props.disabledHover
-    });
-
-    const renderList = ({children, props}) => {
-      const empty = (
-        <tr>
-          <td
-            colSpan={this.props.columns.length || '1'}
-            className={style.tableMessage}
-          >
-            {renderEmpty ? renderEmpty() : null}
-          </td>
-        </tr>
-      );
-      const tbody = (children || []).length > 0
-        ? children
-        : empty;
-      return (
-        <table className={classes} data-test="ring-table">
-          <Header {...headerProps}/>
-          <tbody {...props} data-test="ring-table-body">
-            {tbody}
-          </tbody>
-        </table>
-      );
-    };
-
-    const renderItem = ({value, index, props = {}, isDragged}) => {
-      const {ref, ...restProps} = props;
-      const row = (
-        <Row
-          innerRef={ref}
-          key={getItemKey(value)}
-          level={getItemLevel(value)}
-          index={index}
-          item={value}
-          showFocus={selection.isFocused(value)}
-          autofocus={selection.isFocused(value)}
-          focused={selection.isFocused(value)}
-          selectable={selectable && isItemSelectable(value)}
-          selected={selectable && selection.isSelected(value)}
-          onFocus={this.onRowFocus}
-          onSelect={this.onRowSelect}
-          onDoubleClick={onItemDoubleClick}
-          onClick={onItemClick}
-          collapsible={isItemCollapsible(value)}
-          parentCollapsible={isParentCollapsible(value)}
-          collapsed={isItemCollapsed(value)}
-          onCollapse={onItemCollapse}
-          onExpand={onItemExpand}
-          showDisabledSelection={isDisabledSelectionVisible(value)}
-          checkboxTooltip={getCheckboxTooltip(value)}
-          className={classNames(getItemClassName(value), {[style.draggingRow]: isDragged})}
-          draggable={draggable}
-          alwaysShowDragHandle={alwaysShowDragHandle}
-          columns={columns}
-          data-test={getItemDataTest(value)}
-          {...restProps}
-        />
-      );
-
-      return isDragged
-        ? (
-          <table style={{...props.style, borderSpacing: 0}}>
-            <tbody>{row}</tbody>
-          </table>
-        )
-        : row;
-    };
-
-    return (
-      <div className={wrapperClasses} data-test="ring-table-wrapper" ref={this.props.innerRef}>
-        {focused &&
-          (
-            <Shortcuts
-              map={this.props.shortcutsMap}
-              scope={this.state.shortcutsScope}
-            />
-          )
-        }
-
-        {/* Handler detects that user holds Shift key */}
-        <div role="presentation" onMouseDown={this.onMouseDown}>
-          {draggable
-            ? (
-              <List
-                values={data}
-                renderList={renderList}
-                renderItem={renderItem}
-                onChange={this.onSortEnd}
-              />
-            )
-            : renderList({children: data.map((value, index) => renderItem({value, index}))})}
-        </div>
-
-        {loading && (
-          <div className={style.loadingOverlay}>
-            <Loader className={loaderClassName}/>
-          </div>
-        )}
-      </div>
-    );
-  }
-}
-
-export default disableHoverHOC(selectionShortcutsHOC(focusSensorHOC(Table)));