@jetbrains/ring-ui-built 7.0.115 → 8.0.0-beta.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/_helpers/table.js +2 -2
- package/components/_helpers/table2.js +3 -0
- package/components/data-list/data-list.d.ts +4 -4
- package/components/data-list/data-list.js +2 -2
- package/components/data-list/data-list.mock.d.ts +1 -1
- package/components/data-list/item.d.ts +1 -1
- package/components/data-list/selection.d.ts +1 -1
- package/components/data-list/selection.js +1 -1
- package/components/date-picker/date-picker.js +1 -1
- package/components/date-picker/date-popup.js +1 -1
- package/components/date-picker/month.d.ts +0 -2
- package/components/date-picker/month.js +16 -17
- package/components/date-picker/months.js +42 -33
- package/components/date-picker/years.js +60 -52
- package/components/global/intersection-observer-context.d.ts +26 -0
- package/components/global/intersection-observer-context.js +140 -0
- package/components/{table → legacy-table}/cell.js +1 -1
- package/components/{table → legacy-table}/header-cell.js +3 -3
- package/components/{table → legacy-table}/header.js +1 -1
- package/components/{table → legacy-table}/row-with-focus-sensor.js +1 -1
- package/components/{table → legacy-table}/row.js +1 -1
- package/components/{table → legacy-table}/selection.d.ts +2 -2
- package/components/{table → legacy-table}/selection.js +1 -1
- package/components/{table → legacy-table}/simple-table.js +1 -1
- package/components/{table → legacy-table}/smart-table.js +1 -1
- package/components/legacy-table/table.d.ts +109 -0
- package/components/legacy-table/table.js +369 -0
- package/components/old-browsers-message/white-list.js +2 -2
- package/components/style.css +1 -1
- package/components/table/default-item-renderer.d.ts +25 -0
- package/components/table/default-item-renderer.js +241 -0
- package/components/table/table-base.d.ts +24 -0
- package/components/table/table-base.js +311 -0
- package/components/table/table-component.d.ts +53 -0
- package/components/table/table-component.js +316 -0
- package/components/table/table-const.d.ts +8 -0
- package/components/table/table-const.js +11 -0
- package/components/table/table-virtualize.d.ts +32 -0
- package/components/table/table-virtualize.js +330 -0
- package/components/table/table.d.ts +221 -104
- package/components/table/table.js +18 -362
- package/package.json +1 -1
- /package/components/{table → legacy-table}/cell.d.ts +0 -0
- /package/components/{table → legacy-table}/disable-hover-hoc.d.ts +0 -0
- /package/components/{table → legacy-table}/disable-hover-hoc.js +0 -0
- /package/components/{table → legacy-table}/header-cell.d.ts +0 -0
- /package/components/{table → legacy-table}/header.d.ts +0 -0
- /package/components/{table → legacy-table}/multitable.d.ts +0 -0
- /package/components/{table → legacy-table}/multitable.js +0 -0
- /package/components/{table → legacy-table}/row-with-focus-sensor.d.ts +0 -0
- /package/components/{table → legacy-table}/row.d.ts +0 -0
- /package/components/{table → legacy-table}/selection-adapter.d.ts +0 -0
- /package/components/{table → legacy-table}/selection-adapter.js +0 -0
- /package/components/{table → legacy-table}/selection-shortcuts-hoc.d.ts +0 -0
- /package/components/{table → legacy-table}/selection-shortcuts-hoc.js +0 -0
- /package/components/{table → legacy-table}/simple-table.d.ts +0 -0
- /package/components/{table → legacy-table}/smart-table.d.ts +0 -0
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { PureComponent } from 'react';
|
|
2
2
|
import classNames from 'classnames';
|
|
3
3
|
import joinDataTestAttributes from '../global/data-tests.js';
|
|
4
|
-
import { s as style } from '../_helpers/
|
|
4
|
+
import { s as style } from '../_helpers/table2.js';
|
|
5
5
|
import { jsx } from 'react/jsx-runtime';
|
|
6
6
|
|
|
7
7
|
class Cell extends PureComponent {
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { PureComponent } from 'react';
|
|
2
2
|
import classNames from 'classnames';
|
|
3
|
-
import
|
|
3
|
+
import unsortedIcon from '@jetbrains/icons/unsorted-12px';
|
|
4
4
|
import chevron12pxDown from '@jetbrains/icons/chevron-12px-down';
|
|
5
5
|
import Icon from '../icon/icon.js';
|
|
6
6
|
import joinDataTestAttributes from '../global/data-tests.js';
|
|
7
|
-
import { s as style } from '../_helpers/
|
|
7
|
+
import { s as style } from '../_helpers/table2.js';
|
|
8
8
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
9
9
|
import 'util-deprecate';
|
|
10
10
|
import '../icon/icon.constants.js';
|
|
@@ -46,7 +46,7 @@ class HeaderCell extends PureComponent {
|
|
|
46
46
|
} = this.props;
|
|
47
47
|
this.sortable = column.sortable === true;
|
|
48
48
|
this.sorted = sortKey === column.id;
|
|
49
|
-
const glyph = this.sorted ? chevron12pxDown :
|
|
49
|
+
const glyph = this.sorted ? chevron12pxDown : unsortedIcon;
|
|
50
50
|
const classes = classNames(className, column.headerClassName, {
|
|
51
51
|
[style.headerCell]: true,
|
|
52
52
|
[style.headerCellSortable]: this.sortable,
|
|
@@ -3,7 +3,7 @@ import classNames from 'classnames';
|
|
|
3
3
|
import Checkbox from '../checkbox/checkbox.js';
|
|
4
4
|
import getUID from '../global/get-uid.js';
|
|
5
5
|
import HeaderCell from './header-cell.js';
|
|
6
|
-
import { s as style } from '../_helpers/
|
|
6
|
+
import { s as style } from '../_helpers/table2.js';
|
|
7
7
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
8
8
|
import '@jetbrains/icons/checkmark-12px';
|
|
9
9
|
import '@jetbrains/icons/remove-12px';
|
|
@@ -44,7 +44,7 @@ import '../popup/popup.target.js';
|
|
|
44
44
|
import '../popup/position-css.js';
|
|
45
45
|
import '../_helpers/theme.js';
|
|
46
46
|
import './cell.js';
|
|
47
|
-
import '../_helpers/
|
|
47
|
+
import '../_helpers/table2.js';
|
|
48
48
|
|
|
49
49
|
const getContainer = () => focusSensorHOC(Row);
|
|
50
50
|
class RowWithFocusSensorCallbacks extends PureComponent {
|
|
@@ -11,7 +11,7 @@ import joinDataTestAttributes from '../global/data-tests.js';
|
|
|
11
11
|
import getUID from '../global/get-uid.js';
|
|
12
12
|
import { createComposedRef } from '../global/compose-refs.js';
|
|
13
13
|
import Cell from './cell.js';
|
|
14
|
-
import { s as style } from '../_helpers/
|
|
14
|
+
import { s as style } from '../_helpers/table2.js';
|
|
15
15
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
16
16
|
import '@jetbrains/icons/checkmark-12px';
|
|
17
17
|
import '@jetbrains/icons/remove-12px';
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
export interface SelectionItem {
|
|
5
5
|
id: string | number;
|
|
6
6
|
}
|
|
7
|
-
export interface TableSelectionConfig<T
|
|
7
|
+
export interface TableSelectionConfig<T> {
|
|
8
8
|
data?: readonly T[] | undefined;
|
|
9
9
|
selected?: Set<T> | undefined;
|
|
10
10
|
focused?: T | null | undefined;
|
|
@@ -17,7 +17,7 @@ export interface CloneWithConfig<T> {
|
|
|
17
17
|
selected?: Set<T> | readonly T[] | null | undefined;
|
|
18
18
|
focused?: T | null | undefined;
|
|
19
19
|
}
|
|
20
|
-
export default class Selection<T
|
|
20
|
+
export default class Selection<T> {
|
|
21
21
|
protected _rawData: readonly T[];
|
|
22
22
|
protected _getChildren: (item: T) => readonly T[];
|
|
23
23
|
protected _data: Set<T>;
|
|
@@ -15,7 +15,7 @@ let Selection$1 = class Selection {
|
|
|
15
15
|
focused = null,
|
|
16
16
|
getKey = item => {
|
|
17
17
|
// Default behavior stays backward compatible: use item's "id" if present
|
|
18
|
-
if ('id' in item) {
|
|
18
|
+
if (item && typeof item === 'object' && 'id' in item) {
|
|
19
19
|
return item.id;
|
|
20
20
|
}
|
|
21
21
|
// If there's no id provided on item and no getKey supplied, fail fast with a clear message
|
|
@@ -2,7 +2,7 @@ import { PureComponent } from 'react';
|
|
|
2
2
|
import classNames from 'classnames';
|
|
3
3
|
import TableContainer from './table.js';
|
|
4
4
|
import Selection$1 from './selection.js';
|
|
5
|
-
import { s as style } from '../_helpers/
|
|
5
|
+
import { s as style } from '../_helpers/table2.js';
|
|
6
6
|
import { jsx } from 'react/jsx-runtime';
|
|
7
7
|
import 'react-movable';
|
|
8
8
|
import '../global/focus-sensor-hoc.js';
|
|
@@ -32,7 +32,7 @@ import '../global/data-tests.js';
|
|
|
32
32
|
import './header-cell.js';
|
|
33
33
|
import '@jetbrains/icons/unsorted-12px';
|
|
34
34
|
import '@jetbrains/icons/chevron-12px-down';
|
|
35
|
-
import '../_helpers/
|
|
35
|
+
import '../_helpers/table2.js';
|
|
36
36
|
import './selection-shortcuts-hoc.js';
|
|
37
37
|
import './disable-hover-hoc.js';
|
|
38
38
|
import './row-with-focus-sensor.js';
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @name Table
|
|
3
|
+
*/
|
|
4
|
+
import { Component, PureComponent, type ReactNode, type SyntheticEvent } from 'react';
|
|
5
|
+
import * as React from 'react';
|
|
6
|
+
import { type OnChangeMeta } from 'react-movable/lib/types';
|
|
7
|
+
import { type FocusSensorAddProps, type FocusSensorProps } from '../global/focus-sensor-hoc';
|
|
8
|
+
import { type SelectionShortcutsAddProps, type SelectionShortcutsProps } from './selection-shortcuts-hoc';
|
|
9
|
+
import { type DisableHoverAddProps, type DisableHoverProps } from './disable-hover-hoc';
|
|
10
|
+
import Row from './row-with-focus-sensor';
|
|
11
|
+
import { type Column, type SortParams } from './header-cell';
|
|
12
|
+
export interface ReorderParams<T> {
|
|
13
|
+
data: T[];
|
|
14
|
+
oldIndex: number;
|
|
15
|
+
newIndex: number;
|
|
16
|
+
}
|
|
17
|
+
export interface TableProps<T extends object> extends FocusSensorAddProps<HTMLTableRowElement>, SelectionShortcutsAddProps<T>, DisableHoverAddProps {
|
|
18
|
+
data: readonly T[];
|
|
19
|
+
columns: readonly Column<T>[] | ((item: T | null) => readonly Column<T>[]);
|
|
20
|
+
isItemSelectable: (item: T) => boolean;
|
|
21
|
+
loading: boolean;
|
|
22
|
+
onSort: (params: SortParams) => void;
|
|
23
|
+
onReorder: (params: ReorderParams<T>) => void;
|
|
24
|
+
getItemKey: (item: T) => string | number;
|
|
25
|
+
sortKey: string;
|
|
26
|
+
sortOrder: boolean;
|
|
27
|
+
draggable: boolean;
|
|
28
|
+
alwaysShowDragHandle: boolean;
|
|
29
|
+
dragHandleTitle?: string;
|
|
30
|
+
stickyHeader: boolean;
|
|
31
|
+
wideFirstColumn: boolean;
|
|
32
|
+
getItemLevel: (item: T) => number;
|
|
33
|
+
getItemClassName: (item: T) => string | null | undefined;
|
|
34
|
+
getMetaColumnClassName: (item: T) => string | null | undefined;
|
|
35
|
+
getItemDataTest: (item: T) => string | null | undefined;
|
|
36
|
+
isItemCollapsible: (item: T) => boolean;
|
|
37
|
+
isParentCollapsible: (item: T) => boolean;
|
|
38
|
+
isItemCollapsed: (item: T) => boolean;
|
|
39
|
+
onItemCollapse: (item: T) => void;
|
|
40
|
+
onItemExpand: (item: T) => void;
|
|
41
|
+
onItemDoubleClick: (item: T) => void;
|
|
42
|
+
onItemClick: (item: T, e: React.MouseEvent<HTMLTableRowElement>) => void;
|
|
43
|
+
remoteSelection: boolean;
|
|
44
|
+
isDisabledSelectionVisible: (item: T) => boolean;
|
|
45
|
+
getCheckboxTooltip: (item: T) => string | undefined;
|
|
46
|
+
className?: string | null | undefined;
|
|
47
|
+
wrapperClassName?: string | null | undefined;
|
|
48
|
+
headerClassName?: string | null | undefined;
|
|
49
|
+
cellClassName?: string | null | undefined;
|
|
50
|
+
loaderClassName?: string | undefined;
|
|
51
|
+
caption?: string | null | undefined;
|
|
52
|
+
stickyHeaderOffset?: string | undefined;
|
|
53
|
+
renderEmpty?: (() => ReactNode) | null | undefined;
|
|
54
|
+
RowComponent: typeof Row;
|
|
55
|
+
renderLoader?: ((loaderClassName?: string) => ReactNode) | null | undefined;
|
|
56
|
+
}
|
|
57
|
+
/**
|
|
58
|
+
* Interactive table with selection and keyboard navigation support.
|
|
59
|
+
*/
|
|
60
|
+
export declare class Table<T extends object> extends PureComponent<TableProps<T>> {
|
|
61
|
+
static defaultProps: {
|
|
62
|
+
isItemSelectable: () => boolean;
|
|
63
|
+
loading: boolean;
|
|
64
|
+
onSort: () => void;
|
|
65
|
+
onReorder: () => void;
|
|
66
|
+
getItemKey: (item: object) => string | number;
|
|
67
|
+
sortKey: string;
|
|
68
|
+
sortOrder: boolean;
|
|
69
|
+
draggable: boolean;
|
|
70
|
+
alwaysShowDragHandle: boolean;
|
|
71
|
+
stickyHeader: boolean;
|
|
72
|
+
getItemLevel: () => number;
|
|
73
|
+
getItemClassName: () => null;
|
|
74
|
+
getMetaColumnClassName: () => null;
|
|
75
|
+
getItemDataTest: () => null;
|
|
76
|
+
isItemCollapsible: () => boolean;
|
|
77
|
+
isParentCollapsible: () => boolean;
|
|
78
|
+
isItemCollapsed: () => boolean;
|
|
79
|
+
onItemCollapse: () => void;
|
|
80
|
+
onItemExpand: () => void;
|
|
81
|
+
onItemDoubleClick: () => void;
|
|
82
|
+
onItemClick: () => void;
|
|
83
|
+
remoteSelection: boolean;
|
|
84
|
+
isDisabledSelectionVisible: () => boolean;
|
|
85
|
+
getCheckboxTooltip: () => undefined;
|
|
86
|
+
RowComponent: typeof Row;
|
|
87
|
+
wideFirstColumn: boolean;
|
|
88
|
+
};
|
|
89
|
+
state: {
|
|
90
|
+
shortcutsScope: string;
|
|
91
|
+
userSelectNone: boolean;
|
|
92
|
+
};
|
|
93
|
+
componentDidMount(): void;
|
|
94
|
+
componentDidUpdate({ data, selection, onSelect, selectable, remoteSelection }: TableProps<T>): void;
|
|
95
|
+
componentWillUnmount(): void;
|
|
96
|
+
onMouseDown: (e: React.MouseEvent) => void;
|
|
97
|
+
onMouseUp: () => void;
|
|
98
|
+
onRowFocus: (row: T) => void;
|
|
99
|
+
onRowSelect: (row: T, selected: boolean) => void;
|
|
100
|
+
onSortEnd: ({ oldIndex, newIndex }: OnChangeMeta) => void;
|
|
101
|
+
onCheckboxChange: (e: SyntheticEvent<HTMLInputElement>) => void;
|
|
102
|
+
restoreFocusWithoutScroll: () => void;
|
|
103
|
+
render(): React.JSX.Element;
|
|
104
|
+
}
|
|
105
|
+
export type TableAttrs<T extends object> = DisableHoverProps<SelectionShortcutsProps<T, FocusSensorProps<TableProps<T>, HTMLTableRowElement, typeof Table>>>;
|
|
106
|
+
export default class TableContainer<T extends object> extends Component<TableAttrs<T>> {
|
|
107
|
+
Table: React.ComponentClass<DisableHoverProps<SelectionShortcutsProps<T, FocusSensorProps<TableProps<T>, HTMLTableRowElement, typeof Table>>>, any>;
|
|
108
|
+
render(): React.JSX.Element;
|
|
109
|
+
}
|
|
@@ -0,0 +1,369 @@
|
|
|
1
|
+
import { Component, PureComponent, createElement } from 'react';
|
|
2
|
+
import classNames from 'classnames';
|
|
3
|
+
import { arrayMove, List } from 'react-movable';
|
|
4
|
+
import focusSensorHOC from '../global/focus-sensor-hoc.js';
|
|
5
|
+
import getUID from '../global/get-uid.js';
|
|
6
|
+
import Shortcuts from '../shortcuts/shortcuts.js';
|
|
7
|
+
import Loader from '../loader/loader.js';
|
|
8
|
+
import Header from './header.js';
|
|
9
|
+
import selectionShortcutsHOC from './selection-shortcuts-hoc.js';
|
|
10
|
+
import disableHoverHOC from './disable-hover-hoc.js';
|
|
11
|
+
import RowWithFocusSensorCallbacks from './row-with-focus-sensor.js';
|
|
12
|
+
import { s as style } from '../_helpers/table2.js';
|
|
13
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
14
|
+
import '../global/compose-refs.js';
|
|
15
|
+
import 'memoize-one';
|
|
16
|
+
import '../shortcuts/core.js';
|
|
17
|
+
import 'core-js/modules/es.array.includes.js';
|
|
18
|
+
import 'combokeys';
|
|
19
|
+
import '../global/sniffer.js';
|
|
20
|
+
import 'sniffr';
|
|
21
|
+
import '../_helpers/loader-core.js';
|
|
22
|
+
import '../global/dom.js';
|
|
23
|
+
import '../checkbox/checkbox.js';
|
|
24
|
+
import '@jetbrains/icons/checkmark-12px';
|
|
25
|
+
import '@jetbrains/icons/remove-12px';
|
|
26
|
+
import '../icon/icon.js';
|
|
27
|
+
import 'util-deprecate';
|
|
28
|
+
import '../icon/icon.constants.js';
|
|
29
|
+
import '../_helpers/icon-svg.js';
|
|
30
|
+
import 'react-compiler-runtime';
|
|
31
|
+
import '../global/memoize.js';
|
|
32
|
+
import '../control-help/control-help.js';
|
|
33
|
+
import '../global/data-tests.js';
|
|
34
|
+
import './header-cell.js';
|
|
35
|
+
import '@jetbrains/icons/unsorted-12px';
|
|
36
|
+
import '@jetbrains/icons/chevron-12px-down';
|
|
37
|
+
import './row.js';
|
|
38
|
+
import '@jetbrains/icons/chevron-right';
|
|
39
|
+
import '@jetbrains/icons/chevron-down';
|
|
40
|
+
import '@jetbrains/icons/drag';
|
|
41
|
+
import '../button/button.js';
|
|
42
|
+
import '../link/clickable-link.js';
|
|
43
|
+
import '../global/controls-height.js';
|
|
44
|
+
import '../global/configuration.js';
|
|
45
|
+
import '../_helpers/button.classes.js';
|
|
46
|
+
import '../tooltip/tooltip.js';
|
|
47
|
+
import '../popup/popup.js';
|
|
48
|
+
import 'react-dom';
|
|
49
|
+
import '../global/schedule-raf.js';
|
|
50
|
+
import '../tab-trap/tab-trap.js';
|
|
51
|
+
import '../popup/position.js';
|
|
52
|
+
import '../popup/popup.consts.js';
|
|
53
|
+
import '../popup/popup.target.js';
|
|
54
|
+
import '../popup/position-css.js';
|
|
55
|
+
import '../_helpers/theme.js';
|
|
56
|
+
import './cell.js';
|
|
57
|
+
|
|
58
|
+
class Table extends PureComponent {
|
|
59
|
+
static defaultProps = {
|
|
60
|
+
isItemSelectable: () => true,
|
|
61
|
+
loading: false,
|
|
62
|
+
onSort: () => {},
|
|
63
|
+
onReorder: () => {},
|
|
64
|
+
getItemKey: item => {
|
|
65
|
+
// Default behavior stays backward compatible: use item's "id" if present
|
|
66
|
+
if ('id' in item) {
|
|
67
|
+
return item.id;
|
|
68
|
+
}
|
|
69
|
+
// If there's no id provided on item and no getKey supplied, fail fast with a clear message
|
|
70
|
+
throw new Error('Table: getItemKey is required when items have no "id" property');
|
|
71
|
+
},
|
|
72
|
+
sortKey: 'id',
|
|
73
|
+
sortOrder: true,
|
|
74
|
+
draggable: false,
|
|
75
|
+
alwaysShowDragHandle: false,
|
|
76
|
+
stickyHeader: true,
|
|
77
|
+
getItemLevel: () => 0,
|
|
78
|
+
getItemClassName: () => null,
|
|
79
|
+
getMetaColumnClassName: () => null,
|
|
80
|
+
getItemDataTest: () => null,
|
|
81
|
+
isItemCollapsible: () => false,
|
|
82
|
+
isParentCollapsible: () => false,
|
|
83
|
+
isItemCollapsed: () => false,
|
|
84
|
+
onItemCollapse: () => {},
|
|
85
|
+
onItemExpand: () => {},
|
|
86
|
+
onItemDoubleClick: () => {},
|
|
87
|
+
onItemClick: () => {},
|
|
88
|
+
remoteSelection: false,
|
|
89
|
+
isDisabledSelectionVisible: () => false,
|
|
90
|
+
getCheckboxTooltip: () => undefined,
|
|
91
|
+
RowComponent: RowWithFocusSensorCallbacks,
|
|
92
|
+
wideFirstColumn: false
|
|
93
|
+
};
|
|
94
|
+
state = {
|
|
95
|
+
shortcutsScope: getUID('ring-table-'),
|
|
96
|
+
userSelectNone: false
|
|
97
|
+
};
|
|
98
|
+
componentDidMount() {
|
|
99
|
+
document.addEventListener('mouseup', this.onMouseUp);
|
|
100
|
+
}
|
|
101
|
+
componentDidUpdate({
|
|
102
|
+
data,
|
|
103
|
+
selection,
|
|
104
|
+
onSelect,
|
|
105
|
+
selectable,
|
|
106
|
+
remoteSelection
|
|
107
|
+
}) {
|
|
108
|
+
if (data !== this.props.data && remoteSelection) {
|
|
109
|
+
onSelect(selection.cloneWith({
|
|
110
|
+
data: this.props.data
|
|
111
|
+
}));
|
|
112
|
+
}
|
|
113
|
+
if (!this.props.selectable && this.props.selectable !== selectable) {
|
|
114
|
+
onSelect(selection.resetSelection());
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
componentWillUnmount() {
|
|
118
|
+
document.removeEventListener('mouseup', this.onMouseUp);
|
|
119
|
+
}
|
|
120
|
+
onMouseDown = e => {
|
|
121
|
+
if (e.shiftKey) {
|
|
122
|
+
this.setState({
|
|
123
|
+
userSelectNone: true
|
|
124
|
+
});
|
|
125
|
+
}
|
|
126
|
+
};
|
|
127
|
+
onMouseUp = () => {
|
|
128
|
+
if (this.state.userSelectNone) {
|
|
129
|
+
this.setState({
|
|
130
|
+
userSelectNone: false
|
|
131
|
+
});
|
|
132
|
+
}
|
|
133
|
+
};
|
|
134
|
+
onRowFocus = row => {
|
|
135
|
+
const {
|
|
136
|
+
selection,
|
|
137
|
+
onSelect
|
|
138
|
+
} = this.props;
|
|
139
|
+
onSelect(selection.focus(row));
|
|
140
|
+
};
|
|
141
|
+
onRowSelect = (row, selected) => {
|
|
142
|
+
const {
|
|
143
|
+
selection,
|
|
144
|
+
onSelect
|
|
145
|
+
} = this.props;
|
|
146
|
+
if (selected) {
|
|
147
|
+
onSelect(selection.select(row));
|
|
148
|
+
} else {
|
|
149
|
+
onSelect(selection.deselect(row));
|
|
150
|
+
}
|
|
151
|
+
};
|
|
152
|
+
onSortEnd = ({
|
|
153
|
+
oldIndex,
|
|
154
|
+
newIndex
|
|
155
|
+
}) => {
|
|
156
|
+
const data = arrayMove(this.props.data, oldIndex, newIndex);
|
|
157
|
+
this.props.onReorder({
|
|
158
|
+
data,
|
|
159
|
+
oldIndex,
|
|
160
|
+
newIndex
|
|
161
|
+
});
|
|
162
|
+
};
|
|
163
|
+
onCheckboxChange = e => {
|
|
164
|
+
const {
|
|
165
|
+
checked
|
|
166
|
+
} = e.currentTarget;
|
|
167
|
+
const {
|
|
168
|
+
selection,
|
|
169
|
+
onSelect
|
|
170
|
+
} = this.props;
|
|
171
|
+
if (checked) {
|
|
172
|
+
onSelect(selection.selectAll());
|
|
173
|
+
} else {
|
|
174
|
+
onSelect(selection.reset());
|
|
175
|
+
}
|
|
176
|
+
this.restoreFocusWithoutScroll();
|
|
177
|
+
};
|
|
178
|
+
restoreFocusWithoutScroll = () => {
|
|
179
|
+
const {
|
|
180
|
+
scrollX,
|
|
181
|
+
scrollY
|
|
182
|
+
} = window;
|
|
183
|
+
this.props.onFocusRestore();
|
|
184
|
+
window.scrollTo(scrollX, scrollY);
|
|
185
|
+
};
|
|
186
|
+
render() {
|
|
187
|
+
const {
|
|
188
|
+
data,
|
|
189
|
+
selection,
|
|
190
|
+
columns,
|
|
191
|
+
caption,
|
|
192
|
+
getItemKey,
|
|
193
|
+
selectable,
|
|
194
|
+
focused,
|
|
195
|
+
isItemSelectable,
|
|
196
|
+
getItemLevel,
|
|
197
|
+
getItemClassName,
|
|
198
|
+
getMetaColumnClassName,
|
|
199
|
+
getItemDataTest,
|
|
200
|
+
draggable,
|
|
201
|
+
alwaysShowDragHandle,
|
|
202
|
+
dragHandleTitle,
|
|
203
|
+
loading,
|
|
204
|
+
onSort,
|
|
205
|
+
sortKey,
|
|
206
|
+
sortOrder,
|
|
207
|
+
loaderClassName,
|
|
208
|
+
stickyHeader,
|
|
209
|
+
stickyHeaderOffset,
|
|
210
|
+
isItemCollapsible,
|
|
211
|
+
isParentCollapsible,
|
|
212
|
+
isItemCollapsed,
|
|
213
|
+
onItemCollapse,
|
|
214
|
+
onItemExpand,
|
|
215
|
+
isDisabledSelectionVisible,
|
|
216
|
+
getCheckboxTooltip,
|
|
217
|
+
onItemDoubleClick,
|
|
218
|
+
onItemClick,
|
|
219
|
+
renderEmpty,
|
|
220
|
+
RowComponent,
|
|
221
|
+
renderLoader
|
|
222
|
+
} = this.props;
|
|
223
|
+
// NOTE: Do not construct new object per render because it causes all rows rerendering
|
|
224
|
+
const columnsArray = typeof columns === 'function' ? columns(null) : columns;
|
|
225
|
+
const headerProps = {
|
|
226
|
+
caption,
|
|
227
|
+
selectable,
|
|
228
|
+
draggable,
|
|
229
|
+
columns: columnsArray,
|
|
230
|
+
onSort,
|
|
231
|
+
sortKey,
|
|
232
|
+
sortOrder,
|
|
233
|
+
sticky: stickyHeader,
|
|
234
|
+
topStickOffset: stickyHeaderOffset,
|
|
235
|
+
className: this.props.headerClassName
|
|
236
|
+
};
|
|
237
|
+
const selectedSize = selection.getSelected().size;
|
|
238
|
+
const allSelectedSize = selection.selectAll().getSelected().size;
|
|
239
|
+
headerProps.checked = selectedSize > 0 && selectedSize === allSelectedSize;
|
|
240
|
+
headerProps.onCheckboxChange = this.onCheckboxChange;
|
|
241
|
+
headerProps.checkboxDisabled = this.props.data.length === 0;
|
|
242
|
+
const wrapperClasses = classNames(style.tableWrapper, this.props.wrapperClassName);
|
|
243
|
+
const classes = classNames(this.props.className, {
|
|
244
|
+
[style.table]: true,
|
|
245
|
+
[style.wideFirstColumn]: this.props.wideFirstColumn,
|
|
246
|
+
[style.userSelectNone]: this.state.userSelectNone,
|
|
247
|
+
[style.disabledHover]: this.props.disabledHover
|
|
248
|
+
});
|
|
249
|
+
const renderList = ({
|
|
250
|
+
children,
|
|
251
|
+
props
|
|
252
|
+
}) => {
|
|
253
|
+
const empty = /*#__PURE__*/jsx("tr", {
|
|
254
|
+
children: /*#__PURE__*/jsx("td", {
|
|
255
|
+
colSpan: columnsArray.length || 1,
|
|
256
|
+
className: style.tableMessage,
|
|
257
|
+
children: renderEmpty ? renderEmpty() : null
|
|
258
|
+
})
|
|
259
|
+
});
|
|
260
|
+
const tbody = Array.isArray(children) && children.length > 0 ? children : empty;
|
|
261
|
+
return /*#__PURE__*/jsxs("table", {
|
|
262
|
+
className: classes,
|
|
263
|
+
"data-test": "ring-table",
|
|
264
|
+
children: [/*#__PURE__*/jsx(Header, {
|
|
265
|
+
...headerProps
|
|
266
|
+
}), /*#__PURE__*/jsx("tbody", {
|
|
267
|
+
...props,
|
|
268
|
+
"data-test": "ring-table-body",
|
|
269
|
+
children: tbody
|
|
270
|
+
})]
|
|
271
|
+
});
|
|
272
|
+
};
|
|
273
|
+
const renderItem = ({
|
|
274
|
+
value,
|
|
275
|
+
props = {},
|
|
276
|
+
isDragged
|
|
277
|
+
}) => {
|
|
278
|
+
var _restProps$key;
|
|
279
|
+
if (value === null || value === undefined) {
|
|
280
|
+
return null;
|
|
281
|
+
}
|
|
282
|
+
const {
|
|
283
|
+
ref,
|
|
284
|
+
...restProps
|
|
285
|
+
} = props;
|
|
286
|
+
const row = /*#__PURE__*/createElement(RowComponent, {
|
|
287
|
+
innerRef: ref,
|
|
288
|
+
level: getItemLevel(value),
|
|
289
|
+
item: value,
|
|
290
|
+
showFocus: selection.isFocused(value),
|
|
291
|
+
autofocus: selection.isFocused(value),
|
|
292
|
+
focused: focused && selection.isFocused(value),
|
|
293
|
+
selectable: selectable && isItemSelectable(value),
|
|
294
|
+
selected: selectable && selection.isSelected(value),
|
|
295
|
+
onFocus: this.onRowFocus,
|
|
296
|
+
onSelect: this.onRowSelect,
|
|
297
|
+
onDoubleClick: onItemDoubleClick,
|
|
298
|
+
onClick: onItemClick,
|
|
299
|
+
collapsible: isItemCollapsible(value),
|
|
300
|
+
parentCollapsible: isParentCollapsible(value),
|
|
301
|
+
collapsed: isItemCollapsed(value),
|
|
302
|
+
onCollapse: onItemCollapse,
|
|
303
|
+
onExpand: onItemExpand,
|
|
304
|
+
showDisabledSelection: isDisabledSelectionVisible(value),
|
|
305
|
+
checkboxTooltip: getCheckboxTooltip(value),
|
|
306
|
+
className: classNames(getItemClassName(value), {
|
|
307
|
+
[style.draggingRow]: isDragged
|
|
308
|
+
}),
|
|
309
|
+
metaColumnClassName: getMetaColumnClassName(value),
|
|
310
|
+
draggable: draggable,
|
|
311
|
+
alwaysShowDragHandle: alwaysShowDragHandle,
|
|
312
|
+
dragHandleTitle: dragHandleTitle,
|
|
313
|
+
columns: columns,
|
|
314
|
+
"data-test": getItemDataTest(value),
|
|
315
|
+
cellClassName: this.props.cellClassName,
|
|
316
|
+
...restProps,
|
|
317
|
+
key: (_restProps$key = restProps.key) !== null && _restProps$key !== void 0 ? _restProps$key : getItemKey(value)
|
|
318
|
+
});
|
|
319
|
+
return isDragged ? /*#__PURE__*/jsx("table", {
|
|
320
|
+
style: {
|
|
321
|
+
...props.style
|
|
322
|
+
},
|
|
323
|
+
className: style.draggingTable,
|
|
324
|
+
children: /*#__PURE__*/jsx("tbody", {
|
|
325
|
+
children: row
|
|
326
|
+
})
|
|
327
|
+
}) : row;
|
|
328
|
+
};
|
|
329
|
+
return /*#__PURE__*/jsxs("div", {
|
|
330
|
+
className: wrapperClasses,
|
|
331
|
+
"data-test": "ring-table-wrapper",
|
|
332
|
+
ref: this.props.innerRef,
|
|
333
|
+
children: [focused && /*#__PURE__*/jsx(Shortcuts, {
|
|
334
|
+
map: this.props.shortcutsMap,
|
|
335
|
+
scope: this.state.shortcutsScope
|
|
336
|
+
}), /*#__PURE__*/jsx("div", {
|
|
337
|
+
role: "presentation",
|
|
338
|
+
onMouseDown: this.onMouseDown,
|
|
339
|
+
children: draggable ? /*#__PURE__*/jsx(List, {
|
|
340
|
+
values: data,
|
|
341
|
+
renderList: renderList,
|
|
342
|
+
renderItem: renderItem,
|
|
343
|
+
onChange: this.onSortEnd
|
|
344
|
+
}) : renderList({
|
|
345
|
+
children: data.map((value, index) => renderItem({
|
|
346
|
+
value}))
|
|
347
|
+
})
|
|
348
|
+
}), loading && /*#__PURE__*/jsx("div", {
|
|
349
|
+
className: style.loadingOverlay,
|
|
350
|
+
children: renderLoader ? renderLoader(loaderClassName) : /*#__PURE__*/jsx(Loader, {
|
|
351
|
+
className: loaderClassName
|
|
352
|
+
})
|
|
353
|
+
})]
|
|
354
|
+
});
|
|
355
|
+
}
|
|
356
|
+
}
|
|
357
|
+
const getContainer = () => disableHoverHOC(selectionShortcutsHOC(focusSensorHOC(Table)));
|
|
358
|
+
// eslint-disable-next-line react/no-multi-comp
|
|
359
|
+
class TableContainer extends Component {
|
|
360
|
+
// https://stackoverflow.com/a/53882322/6304152
|
|
361
|
+
Table = getContainer();
|
|
362
|
+
render() {
|
|
363
|
+
return /*#__PURE__*/jsx(this.Table, {
|
|
364
|
+
...this.props
|
|
365
|
+
});
|
|
366
|
+
}
|
|
367
|
+
}
|
|
368
|
+
|
|
369
|
+
export { Table, TableContainer as default };
|
|
@@ -6,11 +6,11 @@ const MAJOR_VERSION_INDEX = 0;
|
|
|
6
6
|
/**
|
|
7
7
|
* SUPPORTED_BROWSERS are defined by Babel plugin, see babel config
|
|
8
8
|
*/
|
|
9
|
-
if (!["and_chr 148", "and_ff 150", "and_qq 14.9", "and_uc 15.5", "android 148", "chrome 148", "chrome 147", "chrome 146", "chrome 145", "chrome 144", "chrome 143", "chrome 142", "chrome 141", "chrome 140", "chrome 139", "chrome 138", "chrome 137", "chrome 136", "chrome 135", "chrome 134", "chrome 133", "chrome 132", "chrome 131", "chrome 130", "chrome 129", "chrome 128", "chrome 127", "chrome 126", "chrome 125", "chrome 124", "chrome 123", "chrome 122", "chrome 121", "chrome 120", "chrome 112", "chrome 109", "edge 148", "edge 147", "edge 146", "edge 145", "edge 144", "edge 143", "edge 142", "edge 141", "edge 140", "edge 139", "edge 138", "edge 137", "edge 136", "edge 135", "edge 134", "edge 133", "edge 132", "edge 131", "edge 130", "edge 129", "edge 128", "edge 127", "edge 126", "edge 125", "edge 124", "edge 123", "edge 122", "edge 121", "edge 120", "firefox 150", "firefox 149", "firefox 148", "firefox 147", "firefox 146", "firefox 145", "firefox 144", "firefox 143", "firefox 142", "firefox 141", "firefox 140", "firefox 139", "firefox 138", "firefox 137", "firefox 136", "firefox 135", "firefox 134", "firefox 133", "firefox 132", "firefox 131", "firefox 130", "firefox 129", "firefox 128", "firefox 127", "firefox 126", "firefox 125", "firefox 124", "firefox 123", "firefox 122", "firefox 121", "firefox 120", "ios_saf 26.4", "ios_saf 26.3", "ios_saf 26.2", "ios_saf 26.1", "ios_saf 26.0", "ios_saf 18.5-18.7", "ios_saf 18.4", "ios_saf 18.3", "ios_saf 18.2", "ios_saf 18.1", "ios_saf 18.0", "ios_saf 17.6-17.7", "ios_saf 17.5", "ios_saf 17.4", "ios_saf 17.3", "ios_saf 17.2", "
|
|
9
|
+
if (!["and_chr 148", "and_ff 150", "and_qq 14.9", "and_uc 15.5", "android 148", "chrome 148", "chrome 147", "chrome 146", "chrome 145", "chrome 144", "chrome 143", "chrome 142", "chrome 141", "chrome 140", "chrome 139", "chrome 138", "chrome 137", "chrome 136", "chrome 135", "chrome 134", "chrome 133", "chrome 132", "chrome 131", "chrome 130", "chrome 129", "chrome 128", "chrome 127", "chrome 126", "chrome 125", "chrome 124", "chrome 123", "chrome 122", "chrome 121", "chrome 120", "chrome 112", "chrome 109", "edge 148", "edge 147", "edge 146", "edge 145", "edge 144", "edge 143", "edge 142", "edge 141", "edge 140", "edge 139", "edge 138", "edge 137", "edge 136", "edge 135", "edge 134", "edge 133", "edge 132", "edge 131", "edge 130", "edge 129", "edge 128", "edge 127", "edge 126", "edge 125", "edge 124", "edge 123", "edge 122", "edge 121", "edge 120", "firefox 150", "firefox 149", "firefox 148", "firefox 147", "firefox 146", "firefox 145", "firefox 144", "firefox 143", "firefox 142", "firefox 141", "firefox 140", "firefox 139", "firefox 138", "firefox 137", "firefox 136", "firefox 135", "firefox 134", "firefox 133", "firefox 132", "firefox 131", "firefox 130", "firefox 129", "firefox 128", "firefox 127", "firefox 126", "firefox 125", "firefox 124", "firefox 123", "firefox 122", "firefox 121", "firefox 120", "ios_saf 26.4", "ios_saf 26.3", "ios_saf 26.2", "ios_saf 26.1", "ios_saf 26.0", "ios_saf 18.5-18.7", "ios_saf 18.4", "ios_saf 18.3", "ios_saf 18.2", "ios_saf 18.1", "ios_saf 18.0", "ios_saf 17.6-17.7", "ios_saf 17.5", "ios_saf 17.4", "ios_saf 17.3", "ios_saf 17.2", "kaios 3.0-3.1", "kaios 2.5", "op_mini all", "op_mob 80", "opera 131", "opera 127", "safari 26.4", "safari 26.3", "safari 26.2", "safari 26.1", "safari 26.0", "safari 18.5-18.7", "safari 18.4", "safari 18.3", "safari 18.2", "safari 18.1", "safari 18.0", "safari 17.6", "safari 17.5", "safari 17.4", "safari 17.3", "safari 17.2", "samsung 29", "samsung 28"]) {
|
|
10
10
|
// eslint-disable-next-line no-console
|
|
11
11
|
console.warn('Ring UI: no SUPPORTED_BROWSERS passed. Please check babel config.');
|
|
12
12
|
}
|
|
13
|
-
const SUPPORTED = ["and_chr 148", "and_ff 150", "and_qq 14.9", "and_uc 15.5", "android 148", "chrome 148", "chrome 147", "chrome 146", "chrome 145", "chrome 144", "chrome 143", "chrome 142", "chrome 141", "chrome 140", "chrome 139", "chrome 138", "chrome 137", "chrome 136", "chrome 135", "chrome 134", "chrome 133", "chrome 132", "chrome 131", "chrome 130", "chrome 129", "chrome 128", "chrome 127", "chrome 126", "chrome 125", "chrome 124", "chrome 123", "chrome 122", "chrome 121", "chrome 120", "chrome 112", "chrome 109", "edge 148", "edge 147", "edge 146", "edge 145", "edge 144", "edge 143", "edge 142", "edge 141", "edge 140", "edge 139", "edge 138", "edge 137", "edge 136", "edge 135", "edge 134", "edge 133", "edge 132", "edge 131", "edge 130", "edge 129", "edge 128", "edge 127", "edge 126", "edge 125", "edge 124", "edge 123", "edge 122", "edge 121", "edge 120", "firefox 150", "firefox 149", "firefox 148", "firefox 147", "firefox 146", "firefox 145", "firefox 144", "firefox 143", "firefox 142", "firefox 141", "firefox 140", "firefox 139", "firefox 138", "firefox 137", "firefox 136", "firefox 135", "firefox 134", "firefox 133", "firefox 132", "firefox 131", "firefox 130", "firefox 129", "firefox 128", "firefox 127", "firefox 126", "firefox 125", "firefox 124", "firefox 123", "firefox 122", "firefox 121", "firefox 120", "ios_saf 26.4", "ios_saf 26.3", "ios_saf 26.2", "ios_saf 26.1", "ios_saf 26.0", "ios_saf 18.5-18.7", "ios_saf 18.4", "ios_saf 18.3", "ios_saf 18.2", "ios_saf 18.1", "ios_saf 18.0", "ios_saf 17.6-17.7", "ios_saf 17.5", "ios_saf 17.4", "ios_saf 17.3", "ios_saf 17.2", "
|
|
13
|
+
const SUPPORTED = ["and_chr 148", "and_ff 150", "and_qq 14.9", "and_uc 15.5", "android 148", "chrome 148", "chrome 147", "chrome 146", "chrome 145", "chrome 144", "chrome 143", "chrome 142", "chrome 141", "chrome 140", "chrome 139", "chrome 138", "chrome 137", "chrome 136", "chrome 135", "chrome 134", "chrome 133", "chrome 132", "chrome 131", "chrome 130", "chrome 129", "chrome 128", "chrome 127", "chrome 126", "chrome 125", "chrome 124", "chrome 123", "chrome 122", "chrome 121", "chrome 120", "chrome 112", "chrome 109", "edge 148", "edge 147", "edge 146", "edge 145", "edge 144", "edge 143", "edge 142", "edge 141", "edge 140", "edge 139", "edge 138", "edge 137", "edge 136", "edge 135", "edge 134", "edge 133", "edge 132", "edge 131", "edge 130", "edge 129", "edge 128", "edge 127", "edge 126", "edge 125", "edge 124", "edge 123", "edge 122", "edge 121", "edge 120", "firefox 150", "firefox 149", "firefox 148", "firefox 147", "firefox 146", "firefox 145", "firefox 144", "firefox 143", "firefox 142", "firefox 141", "firefox 140", "firefox 139", "firefox 138", "firefox 137", "firefox 136", "firefox 135", "firefox 134", "firefox 133", "firefox 132", "firefox 131", "firefox 130", "firefox 129", "firefox 128", "firefox 127", "firefox 126", "firefox 125", "firefox 124", "firefox 123", "firefox 122", "firefox 121", "firefox 120", "ios_saf 26.4", "ios_saf 26.3", "ios_saf 26.2", "ios_saf 26.1", "ios_saf 26.0", "ios_saf 18.5-18.7", "ios_saf 18.4", "ios_saf 18.3", "ios_saf 18.2", "ios_saf 18.1", "ios_saf 18.0", "ios_saf 17.6-17.7", "ios_saf 17.5", "ios_saf 17.4", "ios_saf 17.3", "ios_saf 17.2", "kaios 3.0-3.1", "kaios 2.5", "op_mini all", "op_mob 80", "opera 131", "opera 127", "safari 26.4", "safari 26.3", "safari 26.2", "safari 26.1", "safari 26.0", "safari 18.5-18.7", "safari 18.4", "safari 18.3", "safari 18.2", "safari 18.1", "safari 18.0", "safari 17.6", "safari 17.5", "safari 17.4", "safari 17.3", "safari 17.2", "samsung 29", "samsung 28"] || [];
|
|
14
14
|
const WHITE_LISTED_BROWSERS = ['chrome', 'firefox', 'safari', 'edge'];
|
|
15
15
|
const WHITE_LIST = SUPPORTED.reduce((acc, item) => {
|
|
16
16
|
var _item$match;
|