@jetbrains/ring-ui-built 6.0.1

package/components/table/selection-shortcuts-hoc.js

@@ -0,0 +1,205 @@
+import { g as _objectSpread2, e as _objectWithoutProperties, a as _inherits, b as _createSuper, c as _classCallCheck, _ as _defineProperty, k as _assertThisInitialized, d as _createClass, f as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/es.array.concat.js';
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import Selection from './selection.js';
+import 'core-js/modules/es.array.iterator.js';
+import 'core-js/modules/es.object.to-string.js';
+import 'core-js/modules/es.set.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/es.array.filter.js';
+import 'core-js/modules/es.array.index-of.js';
+
+var _excluded = ["selection", "selectable", "onSelect", "shortcutsMap"],
+  _excluded2 = ["selection", "selectable", "onSelect", "shortcuts"];
+function extractPropTypes(_ref) {
+  var propTypes = _ref.propTypes;
+  if (propTypes == null) {
+    return propTypes;
+  }
+  propTypes.selection;
+    propTypes.selectable;
+    propTypes.onSelect;
+    propTypes.shortcutsMap;
+    var restPropTypes = _objectWithoutProperties(propTypes, _excluded);
+  return restPropTypes;
+}
+function selectionShortcutsHOC(ComposedComponent) {
+  var SelectionShortcuts = /*#__PURE__*/function (_PureComponent) {
+    _inherits(SelectionShortcuts, _PureComponent);
+    var _super = _createSuper(SelectionShortcuts);
+    function SelectionShortcuts() {
+      var _this;
+      _classCallCheck(this, SelectionShortcuts);
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      _this = _super.call.apply(_super, [this].concat(args));
+      _defineProperty(_assertThisInitialized(_this), "onUpPress", function () {
+        var _this$props = _this.props,
+          selection = _this$props.selection,
+          onSelect = _this$props.onSelect;
+        var newSelection = selection.moveUp();
+        if (newSelection) {
+          onSelect === null || onSelect === void 0 || onSelect(newSelection);
+        }
+        return false;
+      });
+      _defineProperty(_assertThisInitialized(_this), "onDownPress", function () {
+        var _this$props2 = _this.props,
+          selection = _this$props2.selection,
+          onSelect = _this$props2.onSelect;
+        var newSelection = selection.moveDown();
+        if (newSelection) {
+          onSelect === null || onSelect === void 0 || onSelect(newSelection);
+        }
+        return false;
+      });
+      _defineProperty(_assertThisInitialized(_this), "shiftSelectionMode", void 0);
+      _defineProperty(_assertThisInitialized(_this), "onShiftKeyDown", function () {
+        var selection = _this.props.selection;
+        if (selection.isSelected(selection.getFocused())) {
+          _this.shiftSelectionMode = 'deletion';
+        } else {
+          _this.shiftSelectionMode = 'addition';
+        }
+      });
+      _defineProperty(_assertThisInitialized(_this), "shiftSelect", function (selection) {
+        if (_this.shiftSelectionMode === 'addition') {
+          return selection.select();
+        } else {
+          return selection.deselect();
+        }
+      });
+      _defineProperty(_assertThisInitialized(_this), "onShiftUpPress", function (e) {
+        e.preventDefault();
+        var _this$props3 = _this.props,
+          selectable = _this$props3.selectable,
+          selection = _this$props3.selection,
+          onSelect = _this$props3.onSelect;
+        if (!selectable) {
+          return;
+        }
+        var newSelection = _this.shiftSelect(selection);
+        var newMovedSelection = newSelection.moveUp();
+        if (newMovedSelection) {
+          onSelect === null || onSelect === void 0 || onSelect(newMovedSelection);
+        } else {
+          onSelect === null || onSelect === void 0 || onSelect(newSelection);
+        }
+      });
+      _defineProperty(_assertThisInitialized(_this), "onShiftDownPress", function (e) {
+        e.preventDefault();
+        var _this$props4 = _this.props,
+          selectable = _this$props4.selectable,
+          selection = _this$props4.selection,
+          onSelect = _this$props4.onSelect;
+        if (!selectable) {
+          return;
+        }
+        var newSelection = _this.shiftSelect(selection);
+        var newMovedSelection = newSelection.moveDown();
+        if (newMovedSelection) {
+          onSelect === null || onSelect === void 0 || onSelect(newMovedSelection);
+        } else {
+          onSelect === null || onSelect === void 0 || onSelect(newSelection);
+        }
+      });
+      _defineProperty(_assertThisInitialized(_this), "onHomePress", function () {
+        var _this$props5 = _this.props,
+          selection = _this$props5.selection,
+          onSelect = _this$props5.onSelect;
+        var newSelection = selection.moveStart();
+        if (newSelection) {
+          onSelect === null || onSelect === void 0 || onSelect(newSelection);
+        }
+        return false;
+      });
+      _defineProperty(_assertThisInitialized(_this), "onEndPress", function () {
+        var _this$props6 = _this.props,
+          selection = _this$props6.selection,
+          onSelect = _this$props6.onSelect;
+        var newSelection = selection.moveEnd();
+        if (newSelection) {
+          onSelect === null || onSelect === void 0 || onSelect(newSelection);
+        }
+        return false;
+      });
+      _defineProperty(_assertThisInitialized(_this), "onSpacePress", function () {
+        var _this$props7 = _this.props,
+          selectable = _this$props7.selectable,
+          selection = _this$props7.selection,
+          onSelect = _this$props7.onSelect;
+        if (!selectable) {
+          return true;
+        }
+        onSelect === null || onSelect === void 0 || onSelect(selection.toggleSelection());
+        return false;
+      });
+      _defineProperty(_assertThisInitialized(_this), "onEscPress", function () {
+        var _this$props8 = _this.props,
+          selection = _this$props8.selection,
+          onSelect = _this$props8.onSelect;
+        onSelect === null || onSelect === void 0 || onSelect(selection.reset());
+        //this.restoreFocusWithoutScroll();
+      });
+      _defineProperty(_assertThisInitialized(_this), "onCmdAPress", function () {
+        var _this$props9 = _this.props,
+          selectable = _this$props9.selectable,
+          selection = _this$props9.selection,
+          onSelect = _this$props9.onSelect;
+        if (!selectable) {
+          return true;
+        }
+        onSelect === null || onSelect === void 0 || onSelect(selection.selectAll());
+        return false;
+      });
+      _defineProperty(_assertThisInitialized(_this), "shortcutsMap", {
+        up: _this.onUpPress,
+        down: _this.onDownPress,
+        shift: _this.onShiftKeyDown,
+        'shift+up': _this.onShiftUpPress,
+        'shift+down': _this.onShiftDownPress,
+        home: _this.onHomePress,
+        end: _this.onEndPress,
+        space: _this.onSpacePress,
+        esc: _this.onEscPress,
+        'command+a': _this.onCmdAPress,
+        'ctrl+a': _this.onCmdAPress
+      });
+      return _this;
+    }
+    _createClass(SelectionShortcuts, [{
+      key: "render",
+      value: function render() {
+        var _this$props10 = this.props,
+          selection = _this$props10.selection,
+          selectable = _this$props10.selectable,
+          onSelect = _this$props10.onSelect;
+          _this$props10.shortcuts;
+          var restProps = _objectWithoutProperties(_this$props10, _excluded2);
+        return /*#__PURE__*/React.createElement(ComposedComponent, _extends({}, restProps, {
+          selection: selection,
+          selectable: selectable,
+          onSelect: onSelect,
+          shortcutsMap: _objectSpread2(_objectSpread2({}, this.shortcutsMap), this.props.shortcuts)
+        }));
+      }
+    }]);
+    return SelectionShortcuts;
+  }(PureComponent);
+  SelectionShortcuts.propTypes = _objectSpread2(_objectSpread2({}, extractPropTypes(ComposedComponent)), {}, {
+    selection: PropTypes.instanceOf(Selection).isRequired,
+    selectable: PropTypes.bool,
+    onSelect: PropTypes.func,
+    shortcuts: PropTypes.object
+  });
+  SelectionShortcuts.defaultProps = _objectSpread2(_objectSpread2({}, ComposedComponent.defaultProps), {}, {
+    selectable: true,
+    onSelect: function onSelect() {},
+    shortcuts: {}
+  });
+  return SelectionShortcuts;
+}
+
+export { selectionShortcutsHOC as default };

package/components/table/selection.d.ts

@@ -0,0 +1,47 @@
+export interface SelectionItem {
+    id: string | number;
+    [key: string]: unknown;
+}
+export interface TableSelectionConfig<T extends SelectionItem> {
+    data?: readonly T[] | undefined;
+    selected?: Set<T> | undefined;
+    focused?: T | null | undefined;
+    getKey?: ((item: T) => string | number) | undefined;
+    isItemSelectable?: ((item: T) => boolean | undefined) | undefined;
+    getChildren?: ((item: T) => readonly T[]) | undefined;
+}
+export interface CloneWithConfig<T> {
+    data?: readonly T[] | null | undefined;
+    selected?: Set<T> | readonly T[] | null | undefined;
+    focused?: T | null | undefined;
+}
+export default class Selection<T extends SelectionItem> {
+    private _rawData;
+    protected _getChildren: ((item: T) => readonly T[]);
+    protected _data: Set<T>;
+    protected _selected: Set<T>;
+    protected _focused: T | null;
+    private _getKey;
+    protected _isItemSelectable: (item: T) => boolean | undefined;
+    constructor({ data, selected, focused, getKey, getChildren, isItemSelectable }?: TableSelectionConfig<T>);
+    protected _buildData(data: readonly T[] | null | undefined): Set<T>;
+    protected _buildSelected(data: Set<T>, selected: Set<T>): Set<T>;
+    cloneWith({ data, selected, focused }: CloneWithConfig<T>): Selection<T>;
+    focus(value: T | null | undefined): Selection<T>;
+    moveUp(): Selection<T> | undefined;
+    moveDown(): Selection<T> | undefined;
+    moveStart(): Selection<T> | undefined;
+    moveEnd(): Selection<T> | undefined;
+    select(value?: T | null): Selection<T>;
+    deselect(value?: T | null): Selection<T>;
+    toggleSelection(value?: T | null): Selection<T>;
+    selectAll(): Selection<T>;
+    resetFocus(): Selection<T>;
+    resetSelection(): Selection<T>;
+    reset(): Selection<T>;
+    isFocused(value: T | null): boolean;
+    isSelected(value: T | null): boolean;
+    getFocused(): T | null;
+    getSelected(): Set<T>;
+    getActive(): Set<T>;
+}

package/components/table/selection.js

@@ -0,0 +1,257 @@
+import { d as _createClass, l as _toConsumableArray, c as _classCallCheck, _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/es.array.iterator.js';
+import 'core-js/modules/es.object.to-string.js';
+import 'core-js/modules/es.set.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/es.array.filter.js';
+import 'core-js/modules/es.array.index-of.js';
+
+var Selection = /*#__PURE__*/function () {
+  function Selection() {
+    var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      _ref$data = _ref.data,
+      data = _ref$data === void 0 ? [] : _ref$data,
+      _ref$selected = _ref.selected,
+      selected = _ref$selected === void 0 ? new Set() : _ref$selected,
+      _ref$focused = _ref.focused,
+      focused = _ref$focused === void 0 ? null : _ref$focused,
+      _ref$getKey = _ref.getKey,
+      getKey = _ref$getKey === void 0 ? function (item) {
+        return item.id;
+      } : _ref$getKey,
+      _ref$getChildren = _ref.getChildren,
+      getChildren = _ref$getChildren === void 0 ? function () {
+        return [];
+      } : _ref$getChildren,
+      _ref$isItemSelectable = _ref.isItemSelectable,
+      isItemSelectable = _ref$isItemSelectable === void 0 ? function () {
+        return true;
+      } : _ref$isItemSelectable;
+    _classCallCheck(this, Selection);
+    _defineProperty(this, "_rawData", void 0);
+    _defineProperty(this, "_getChildren", void 0);
+    _defineProperty(this, "_data", void 0);
+    _defineProperty(this, "_selected", void 0);
+    _defineProperty(this, "_focused", void 0);
+    _defineProperty(this, "_getKey", void 0);
+    _defineProperty(this, "_isItemSelectable", void 0);
+    this._rawData = data;
+    this._getChildren = getChildren;
+    this._data = this._buildData(data);
+    this._selected = selected;
+    this._focused = focused;
+    this._getKey = getKey;
+    this._isItemSelectable = isItemSelectable;
+  }
+  _createClass(Selection, [{
+    key: "_buildData",
+    value: function _buildData(data) {
+      return new Set(data);
+    }
+  }, {
+    key: "_buildSelected",
+    value: function _buildSelected(data, selected) {
+      return new Set(selected);
+    }
+  }, {
+    key: "cloneWith",
+    value: function cloneWith(_ref2) {
+      var _this = this;
+      var data = _ref2.data,
+        selected = _ref2.selected,
+        focused = _ref2.focused;
+      var newData = data || this._rawData;
+      var newSelected;
+      if (data && !selected) {
+        newSelected = new Set(_toConsumableArray(this._buildData(newData)).filter(function (item) {
+          return _toConsumableArray(_this._selected).some(function (it) {
+            return _this._getKey(item) === _this._getKey(it);
+          });
+        }));
+        newSelected = this._buildSelected(this._buildData(newData), newSelected);
+      } else if (selected) {
+        newSelected = selected;
+      } else {
+        newSelected = this._selected;
+      }
+      newSelected = new Set(_toConsumableArray(newSelected).filter(function (item) {
+        return _this._isItemSelectable(item);
+      }));
+      var cloneFocus = function cloneFocus() {
+        return _toConsumableArray(_this._buildData(data)).filter(function (item) {
+          return _this._focused && _this._getKey(item) === _this._getKey(_this._focused);
+        })[0];
+      };
+      var newFocused = focused === undefined ? this._focused : focused;
+      return new this.constructor({
+        data: newData,
+        selected: newSelected,
+        focused: data && !focused ? cloneFocus() : newFocused,
+        getKey: this._getKey,
+        getChildren: this._getChildren,
+        isItemSelectable: this._isItemSelectable
+      });
+    }
+  }, {
+    key: "focus",
+    value: function focus(value) {
+      return this.cloneWith({
+        focused: value
+      });
+    }
+  }, {
+    key: "moveUp",
+    value: function moveUp() {
+      var focused = this._focused;
+      var data = _toConsumableArray(this._data);
+      if (!focused) {
+        return this.cloneWith({
+          focused: data[data.length - 1]
+        });
+      }
+      var nextItem = data[data.indexOf(focused) - 1];
+      if (nextItem) {
+        return this.cloneWith({
+          focused: nextItem
+        });
+      }
+      return undefined;
+    }
+  }, {
+    key: "moveDown",
+    value: function moveDown() {
+      var focused = this._focused;
+      var data = _toConsumableArray(this._data);
+      if (!focused) {
+        return this.cloneWith({
+          focused: data[0]
+        });
+      }
+      var nextItem = data[data.indexOf(focused) + 1];
+      if (nextItem) {
+        return this.cloneWith({
+          focused: nextItem
+        });
+      }
+      return undefined;
+    }
+  }, {
+    key: "moveStart",
+    value: function moveStart() {
+      var data = _toConsumableArray(this._data);
+      if (data.length) {
+        return this.cloneWith({
+          focused: data[0]
+        });
+      }
+      return undefined;
+    }
+  }, {
+    key: "moveEnd",
+    value: function moveEnd() {
+      var data = _toConsumableArray(this._data);
+      if (data.length) {
+        return this.cloneWith({
+          focused: data.pop()
+        });
+      }
+      return undefined;
+    }
+  }, {
+    key: "select",
+    value: function select() {
+      var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this._focused;
+      if (!value || !this._isItemSelectable(value)) {
+        return this;
+      }
+      var selected = new Set(this._selected);
+      selected.add(value);
+      return this.cloneWith({
+        selected
+      });
+    }
+  }, {
+    key: "deselect",
+    value: function deselect() {
+      var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this._focused;
+      if (!value || !this._isItemSelectable(value)) {
+        return this;
+      }
+      var selected = new Set(this._selected);
+      selected.delete(value);
+      return this.cloneWith({
+        selected
+      });
+    }
+  }, {
+    key: "toggleSelection",
+    value: function toggleSelection() {
+      var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this._focused;
+      if (this.isSelected(value)) {
+        return this.deselect(value);
+      } else {
+        return this.select(value);
+      }
+    }
+  }, {
+    key: "selectAll",
+    value: function selectAll() {
+      return this.cloneWith({
+        selected: _toConsumableArray(this._data)
+      });
+    }
+  }, {
+    key: "resetFocus",
+    value: function resetFocus() {
+      return this.cloneWith({
+        focused: null
+      });
+    }
+  }, {
+    key: "resetSelection",
+    value: function resetSelection() {
+      return this.cloneWith({
+        selected: new Set()
+      });
+    }
+  }, {
+    key: "reset",
+    value: function reset() {
+      return this.resetFocus().resetSelection();
+    }
+  }, {
+    key: "isFocused",
+    value: function isFocused(value) {
+      return this._focused === value;
+    }
+  }, {
+    key: "isSelected",
+    value: function isSelected(value) {
+      return value != null && this._selected.has(value);
+    }
+  }, {
+    key: "getFocused",
+    value: function getFocused() {
+      return this._focused;
+    }
+  }, {
+    key: "getSelected",
+    value: function getSelected() {
+      return new Set(this._selected);
+    }
+  }, {
+    key: "getActive",
+    value: function getActive() {
+      if (this._selected.size) {
+        return new Set(this._selected);
+      } else if (this._focused) {
+        return new Set([this._focused]);
+      } else {
+        return new Set();
+      }
+    }
+  }]);
+  return Selection;
+}();
+
+export { Selection as default };

package/components/table/smart-table.d.ts

@@ -0,0 +1,64 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { TableAttrs } from './table';
+import Selection, { SelectionItem } from './selection';
+export interface SmartTableProps<T extends SelectionItem> extends Omit<TableAttrs<T>, 'selection' | 'onSelect'> {
+    onSelectionChange: (selection: Selection<T>) => void;
+    selection?: Selection<T>;
+}
+declare class SmartTable<T extends SelectionItem> extends PureComponent<SmartTableProps<T>> {
+    static propTypes: {
+        className?: React.Validator<string | null | undefined> | undefined;
+        onFocus?: React.Validator<(() => void) | null | undefined> | undefined;
+        onBlur?: React.Validator<(() => void) | null | undefined> | undefined;
+        caption?: React.Validator<string | null | undefined> | undefined;
+        data?: React.Validator<readonly SelectionItem[]> | undefined;
+        loading?: React.Validator<boolean | null | undefined> | undefined;
+        draggable?: React.Validator<boolean | null | undefined> | undefined;
+        columns?: React.Validator<readonly import("./header-cell").Column<SelectionItem>[]> | undefined;
+        focused?: React.Validator<boolean | null | undefined> | undefined;
+        isItemSelectable: PropTypes.Requireable<(...args: any[]) => any> | React.Validator<((item: SelectionItem) => boolean) | null | undefined>;
+        innerRef?: React.Validator<React.Ref<HTMLTableRowElement> | undefined> | undefined;
+        autofocus?: React.Validator<boolean | null | undefined> | undefined;
+        scrollOnTableFocus?: React.Validator<boolean | null | undefined> | undefined;
+        disabledHover?: React.Validator<boolean> | undefined;
+        remoteSelection?: React.Validator<boolean | null | undefined> | undefined;
+        onSort?: React.Validator<((params: import("./header-cell").SortParams) => void) | null | undefined> | undefined;
+        sortKey?: React.Validator<string | null | undefined> | undefined;
+        sortOrder?: React.Validator<boolean | null | undefined> | undefined;
+        alwaysShowDragHandle?: React.Validator<boolean | null | undefined> | undefined;
+        dragHandleTitle?: React.Validator<string | null | undefined> | undefined;
+        onReorder?: React.Validator<((params: import("./table").ReorderParams<SelectionItem>) => void) | null | undefined> | undefined;
+        getItemKey?: React.Validator<((item: SelectionItem) => string | number) | null | undefined> | undefined;
+        stickyHeader?: React.Validator<boolean | null | undefined> | undefined;
+        getItemLevel?: React.Validator<((item: SelectionItem) => number) | null | undefined> | undefined;
+        getItemClassName?: React.Validator<((item: SelectionItem) => string | null | undefined) | null | undefined> | undefined;
+        getMetaColumnClassName?: React.Validator<((item: SelectionItem) => string | null | undefined) | null | undefined> | undefined;
+        getItemDataTest?: React.Validator<((item: SelectionItem) => string | null | undefined) | null | undefined> | undefined;
+        isItemCollapsible?: React.Validator<((item: SelectionItem) => boolean) | null | undefined> | undefined;
+        isParentCollapsible?: React.Validator<((item: SelectionItem) => boolean) | null | undefined> | undefined;
+        isItemCollapsed?: React.Validator<((item: SelectionItem) => boolean) | null | undefined> | undefined;
+        onItemCollapse?: React.Validator<((item: SelectionItem) => void) | null | undefined> | undefined;
+        onItemExpand?: React.Validator<((item: SelectionItem) => void) | null | undefined> | undefined;
+        onItemDoubleClick?: React.Validator<((item: SelectionItem) => void) | null | undefined> | undefined;
+        onItemClick?: React.Validator<((item: SelectionItem, e: React.MouseEvent<HTMLTableRowElement, MouseEvent>) => void) | null | undefined> | undefined;
+        isDisabledSelectionVisible?: React.Validator<((item: SelectionItem) => boolean) | null | undefined> | undefined;
+        getCheckboxTooltip?: React.Validator<((item: SelectionItem) => string | undefined) | null | undefined> | undefined;
+        loaderClassName?: React.Validator<string | null | undefined> | undefined;
+        stickyHeaderOffset?: React.Validator<string | null | undefined> | undefined;
+        renderEmpty?: React.Validator<(() => React.ReactNode) | null | undefined> | undefined;
+        selectable?: React.Validator<boolean | null | undefined> | undefined;
+        shortcuts?: React.Validator<import("../shortcuts/core").ShortcutsMap | null | undefined> | undefined;
+        onSelectionChange: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    static defaultProps: {
+        onSelectionChange: () => void;
+    };
+    state: {
+        selection: Selection<T>;
+    };
+    UNSAFE_componentWillReceiveProps(nextProps: SmartTableProps<T>): void;
+    onSelect: (selection: Selection<T>) => void;
+    render(): React.JSX.Element;
+}
+export default SmartTable;