@jetbrains/ring-ui 4.1.1 → 4.1.2

package/dist/table/table.js

@@ -0,0 +1,404 @@
+import { _ as _defineProperty, a as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+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.js';
+import getUID from '../global/get-uid.js';
+import Shortcuts from '../shortcuts/shortcuts.js';
+import Loader from '../loader/loader.js';
+import Selection from './selection.js';
+import Header from './header.js';
+import { m as modules_1db4bbca } from '../_helpers/table.js';
+import selectionShortcutsHOC from './selection-shortcuts-hoc.js';
+import disableHoverHOC from './disable-hover-hoc.js';
+import RowWithFocusSensorCallbacks from './row-with-focus-sensor.js';
+import '../global/composeRefs.js';
+import '../shortcuts/core.js';
+import 'combokeys';
+import '../global/sniffer.js';
+import 'sniffr';
+import '../global/data-tests.js';
+import '../loader/loader__core.js';
+import '../global/dom.js';
+import 'react-waypoint';
+import '../checkbox/checkbox.js';
+import '@jetbrains/icons/checkmark';
+import '@jetbrains/icons/remove-10px';
+import '../icon/icon.js';
+import 'util-deprecate';
+import '../icon/icon__constants.js';
+import '../_helpers/icon.js';
+import '../icon/icon__svg.js';
+import '../global/memoize.js';
+import '../_helpers/checkbox.js';
+import './header-cell.js';
+import '@jetbrains/icons/unsorted-10px';
+import '@jetbrains/icons/chevron-10px';
+import './row.js';
+import '@jetbrains/icons/chevron-right';
+import '@jetbrains/icons/chevron-down';
+import '@jetbrains/icons/drag';
+import '../button/button.js';
+import 'focus-visible';
+import '../global/theme.js';
+import '../link/clickableLink.js';
+import '../_helpers/button__classes.js';
+import '../tooltip/tooltip.js';
+import '../popup/popup.js';
+import 'react-dom';
+import '../global/schedule-raf.js';
+import '../tab-trap/tab-trap.js';
+import '../popup/position.js';
+import '../popup/popup.consts.js';
+import '../popup/popup.target.js';
+import './cell.js';
+
+/**
+ * Interactive table with selection and keyboard navigation support.
+ */
+
+class Table extends PureComponent {
+  constructor() {
+    super(...arguments);
+
+    _defineProperty(this, "state", {
+      shortcutsScope: getUID('ring-table-'),
+      userSelectNone: false
+    });
+
+    _defineProperty(this, "onMouseDown", e => {
+      if (e.shiftKey) {
+        this.setState({
+          userSelectNone: true
+        });
+      }
+    });
+
+    _defineProperty(this, "onMouseUp", () => {
+      if (this.state.userSelectNone) {
+        this.setState({
+          userSelectNone: false
+        });
+      }
+    });
+
+    _defineProperty(this, "onRowFocus", row => {
+      const {
+        selection,
+        onSelect
+      } = this.props;
+      onSelect(selection.focus(row));
+    });
+
+    _defineProperty(this, "onRowSelect", (row, selected) => {
+      const {
+        selection,
+        onSelect
+      } = this.props;
+
+      if (selected) {
+        onSelect(selection.select(row));
+      } else {
+        onSelect(selection.deselect(row));
+      }
+    });
+
+    _defineProperty(this, "onSortEnd", _ref => {
+      let {
+        oldIndex,
+        newIndex
+      } = _ref;
+      const data = arrayMove(this.props.data, oldIndex, newIndex);
+      this.props.onReorder({
+        data,
+        oldIndex,
+        newIndex
+      });
+    });
+
+    _defineProperty(this, "onCheckboxChange", e => {
+      const {
+        checked
+      } = e.target;
+      const {
+        selection,
+        onSelect
+      } = this.props;
+
+      if (checked) {
+        onSelect(selection.selectAll());
+      } else {
+        onSelect(selection.reset());
+      }
+
+      this.restoreFocusWithoutScroll();
+    });
+
+    _defineProperty(this, "restoreFocusWithoutScroll", () => {
+      const {
+        scrollX,
+        scrollY
+      } = window;
+      this.props.onFocusRestore();
+      window.scrollTo(scrollX, scrollY);
+    });
+  }
+
+  componentDidMount() {
+    document.addEventListener('mouseup', this.onMouseUp);
+  }
+
+  componentDidUpdate(_ref2) {
+    let {
+      data,
+      selection,
+      onSelect,
+      selectable,
+      remoteSelection
+    } = _ref2;
+
+    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);
+  }
+
+  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({
+      [modules_1db4bbca.tableWrapper]: true,
+      [modules_1db4bbca.loading]: loading
+    });
+    const classes = classNames(this.props.className, {
+      [modules_1db4bbca.table]: true,
+      [modules_1db4bbca.multiSelection]: selection.getSelected().size > 0,
+      [modules_1db4bbca.userSelectNone]: this.state.userSelectNone,
+      [modules_1db4bbca.disabledHover]: this.props.disabledHover
+    });
+
+    const renderList = _ref3 => {
+      let {
+        children,
+        props
+      } = _ref3;
+      const empty = /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
+        colSpan: this.props.columns.length || '1',
+        className: modules_1db4bbca.tableMessage
+      }, renderEmpty ? renderEmpty() : null));
+      const tbody = (children || []).length > 0 ? children : empty;
+      return /*#__PURE__*/React.createElement("table", {
+        className: classes,
+        "data-test": "ring-table"
+      }, /*#__PURE__*/React.createElement(Header, headerProps), /*#__PURE__*/React.createElement("tbody", _extends({}, props, {
+        "data-test": "ring-table-body"
+      }), tbody));
+    };
+
+    const renderItem = _ref4 => {
+      let {
+        value,
+        index,
+        props = {},
+        isDragged
+      } = _ref4;
+      const {
+        ref,
+        ...restProps
+      } = props;
+      const row = /*#__PURE__*/React.createElement(RowWithFocusSensorCallbacks, _extends({
+        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), {
+          [modules_1db4bbca.draggingRow]: isDragged
+        }),
+        draggable: draggable,
+        alwaysShowDragHandle: alwaysShowDragHandle,
+        columns: columns,
+        "data-test": getItemDataTest(value)
+      }, restProps));
+      return isDragged ? /*#__PURE__*/React.createElement("table", {
+        style: { ...props.style,
+          borderSpacing: 0
+        }
+      }, /*#__PURE__*/React.createElement("tbody", null, row)) : row;
+    };
+
+    return /*#__PURE__*/React.createElement("div", {
+      className: wrapperClasses,
+      "data-test": "ring-table-wrapper",
+      ref: this.props.innerRef
+    }, focused && /*#__PURE__*/React.createElement(Shortcuts, {
+      map: this.props.shortcutsMap,
+      scope: this.state.shortcutsScope
+    }), /*#__PURE__*/React.createElement("div", {
+      role: "presentation",
+      onMouseDown: this.onMouseDown
+    }, draggable ? /*#__PURE__*/React.createElement(List, {
+      values: data,
+      renderList: renderList,
+      renderItem: renderItem,
+      onChange: this.onSortEnd
+    }) : renderList({
+      children: data.map((value, index) => renderItem({
+        value,
+        index
+      }))
+    })), loading && /*#__PURE__*/React.createElement("div", {
+      className: modules_1db4bbca.loadingOverlay
+    }, /*#__PURE__*/React.createElement(Loader, {
+      className: loaderClassName
+    })));
+  }
+
+}
+
+_defineProperty(Table, "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
+});
+
+_defineProperty(Table, "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: () => {}
+});
+
+var Table$1 = disableHoverHOC(selectionShortcutsHOC(focusSensorHOC(Table)));
+
+export { Table, Table$1 as default };