diff --git a/package.json b/package.json index ee09a4a9984..9462111bed7 100644 --- a/package.json +++ b/package.json @@ -64,7 +64,7 @@ "identity-obj-proxy": "^3.0.0", "jest": "^24.9.0", "jest-canvas-mock": "^2.2.0", - "jest-environment-jsdom-fifteen": "^1.0.0", + "jest-environment-jsdom-fifteen": "^1.0.2", "jest-enzyme": "^7.1.2", "jss-snapshot-serializer": "^1.0.0", "lerna": "^3.19.0", diff --git a/packages/main/package.json b/packages/main/package.json index d314cf9d1b3..d1b7b3a6ecd 100644 --- a/packages/main/package.json +++ b/packages/main/package.json @@ -29,7 +29,7 @@ "lodash.debounce": "^4.0.8", "react-content-loader": "^4.3.2", "react-jss": "10.0.0", - "react-table": "7.0.0-beta.20", + "react-table": "7.0.0-rc.5", "react-toastify": "^5.4.1", "react-window": "^1.8.5" }, diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.test.tsx b/packages/main/src/components/AnalyticalTable/AnalyticalTable.test.tsx index 6428596c823..661f13522f7 100644 --- a/packages/main/src/components/AnalyticalTable/AnalyticalTable.test.tsx +++ b/packages/main/src/components/AnalyticalTable/AnalyticalTable.test.tsx @@ -226,10 +226,10 @@ describe('AnalyticalTable', () => { const wrapper = mountThemedComponent(); // get first column of the table and simulate dragging of it - let componentDrag = wrapper.find({ role: 'columnheader' }).at(0); + let componentDrag = wrapper.find('div[role="columnheader"] div[draggable]').at(0); let inst = componentDrag.instance(); // @ts-ignore - let dragColumnId = inst.id; + let dragColumnId = inst.dataset.columnId; // @ts-ignore expect(inst.draggable).toBeDefined(); @@ -244,7 +244,7 @@ describe('AnalyticalTable', () => { dataTransfer.getData = () => { return dragColumnId; }; - let componentDrop = wrapper.find({ role: 'columnheader' }).at(1); + let componentDrop = wrapper.find('div[role="columnheader"] div[draggable]').at(1); // @ts-ignore componentDrop.simulate('drop', { dataTransfer: dataTransfer }); diff --git a/packages/main/src/components/AnalyticalTable/AnayticalTable.jss.ts b/packages/main/src/components/AnalyticalTable/AnayticalTable.jss.ts index cb046f30a2d..8261a9fa12c 100644 --- a/packages/main/src/components/AnalyticalTable/AnayticalTable.jss.ts +++ b/packages/main/src/components/AnalyticalTable/AnayticalTable.jss.ts @@ -15,7 +15,6 @@ const styles = ({ parameters }: JSSTheme) => ({ tableHeaderRow: { boxShadow: 'none !important', height: '2.75rem', - display: 'grid', zIndex: 1, position: 'relative' }, @@ -58,7 +57,6 @@ const styles = ({ parameters }: JSSTheme) => ({ } }, tr: { - display: 'grid', zIndex: 0, backgroundColor: parameters.sapUiListBackground, color: parameters.sapUiListTextColor diff --git a/packages/main/src/components/AnalyticalTable/ColumnHeader/Resizer.tsx b/packages/main/src/components/AnalyticalTable/ColumnHeader/Resizer.tsx deleted file mode 100644 index a4c7a400339..00000000000 --- a/packages/main/src/components/AnalyticalTable/ColumnHeader/Resizer.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import React, { RefObject, useCallback, useRef } from 'react'; - -const Resizer = (props) => { - const { column } = props; - const { key } = column.getHeaderProps(); - - const parentWidth = useRef(0); - const startX = useRef(0); - const resizerRef: RefObject = useRef(); - const onColumnSizeChanged = props['onColumnSizeChanged']; - const onColumnBeingResized = props['onColumnBeingResized']; - - const onResize = useCallback( - (e) => { - e.stopPropagation(); - const pageX = e.pageX; - const newWidth = Math.round(Math.max(parentWidth.current + pageX - startX.current, column.minWidth)); - onColumnSizeChanged({ - column, - width: newWidth - }); - }, - [column, parentWidth, key, startX, onColumnSizeChanged] - ); - - const onEndResize = useCallback( - (e) => { - e.stopPropagation(); - document.removeEventListener('mousemove', onResize); - document.removeEventListener('mouseup', onEndResize); - document.removeEventListener('mouseleave', onEndResize); - - delete resizerRef.current.parentElement.style.userSelect; - onColumnBeingResized({ value: false }); - }, - [onResize, resizerRef, onColumnBeingResized] - ); - - const onStartResize = useCallback( - (e) => { - e.stopPropagation(); - parentWidth.current = resizerRef.current.parentElement.getBoundingClientRect().width; - startX.current = e.pageX; - resizerRef.current.parentElement.style.userSelect = 'none'; - - document.addEventListener('mousemove', onResize); - document.addEventListener('mouseup', onEndResize); - document.addEventListener('mouseleave', onEndResize); - onColumnBeingResized({ value: true }); - }, - [onResize, onEndResize, parentWidth, startX, resizerRef, onColumnBeingResized] - ); - - return ( -
- ); -}; - -Resizer.displayName = 'Resizer'; - -export { Resizer }; diff --git a/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx b/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx index 7a72d7076e4..643942401b8 100644 --- a/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx +++ b/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx @@ -1,16 +1,15 @@ +import '@ui5/webcomponents-icons/dist/icons/filter'; +import '@ui5/webcomponents-icons/dist/icons/group-2'; +import '@ui5/webcomponents-icons/dist/icons/sort-ascending'; +import '@ui5/webcomponents-icons/dist/icons/sort-descending'; import { Event } from '@ui5/webcomponents-react-base/lib/Event'; import { StyleClassHelper } from '@ui5/webcomponents-react-base/lib/StyleClassHelper'; import { Icon } from '@ui5/webcomponents-react/lib/Icon'; import React, { CSSProperties, DragEventHandler, FC, ReactNode, ReactNodeArray, useMemo } from 'react'; import { createUseStyles, useTheme } from 'react-jss'; import { JSSTheme } from '../../../interfaces/JSSTheme'; -import { Resizer } from './Resizer'; import { ColumnType } from '../types/ColumnType'; import { ColumnHeaderModal } from './ColumnHeaderModal'; -import '@ui5/webcomponents-icons/dist/icons/filter'; -import '@ui5/webcomponents-icons/dist/icons/group-2'; -import '@ui5/webcomponents-icons/dist/icons/sort-descending'; -import '@ui5/webcomponents-icons/dist/icons/sort-ascending'; export interface ColumnHeaderProps { id: string; @@ -64,6 +63,16 @@ const styles = ({ parameters }: JSSTheme) => ({ '& :last-child': { marginLeft: '0.25rem' } + }, + resizer: { + display: 'inline-block', + width: '16px', + height: '100%', + position: 'absolute', + right: 0, + top: 0, + transform: 'translateX(50%)', + zIndex: 1 } }); @@ -106,7 +115,16 @@ export const ColumnHeader: FC = (props) => { const groupingIcon = column.isGrouped ? : null; return ( -
+
= (props) => {
); - }, [classes, column.filterValue, column.isSorted, column.isGrouped, column.isSortedDesc, children]); + }, [ + classes, + column.filterValue, + column.isSorted, + column.isGrouped, + column.isSortedDesc, + children, + isDraggable, + onDragEnter, + onDragOver, + onDragStart, + onDrop, + onDragEnd, + id + ]); const isResizable = !isLastColumn && column.canResize; const theme = useTheme() as JSSTheme; const innerStyle: CSSProperties = useMemo(() => { - const modifiedStyles = { - ...style, + const modifiedStyles: CSSProperties = { width: '100%', fontWeight: 'normal', cursor: 'pointer', @@ -137,26 +168,15 @@ export const ColumnHeader: FC = (props) => { modifiedStyles.maxWidth = `calc(100% - 16px)`; } if (dragOver) { - modifiedStyles.borderLeft = '3px solid ' + theme.parameters.sapSelectedColor; + modifiedStyles.borderLeft = `3px solid ${theme.parameters.sapSelectedColor}`; } - return modifiedStyles as CSSProperties; - }, [style, isResizable]); + return modifiedStyles; + }, [isResizable, dragOver]); if (!column) return null; return ( -
+
{groupable || sortable || filterable ? ( = (props) => { ) : (
{openBy}
)} - {isResizable && } +
); }; diff --git a/packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap b/packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap index 02efcf22a16..5170eca8ade 100644 --- a/packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap +++ b/packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap @@ -23,19 +23,21 @@ exports[`AnalyticalTable Alternate Row Color 1`] = `
+
+
+
+
+
+
- Age + Name
- Name + Age
+
- 40 + Fra
- Fra + 40
- 20 + bla
- bla + 20
{ return new RegExp(filter.value, 'gi').test(String(row[filter.id])); }; -export const DefaultColumn: Column = { +export const DefaultColumn = { Filter: DefaultFilterComponent, canResize: true, minWidth: DEFAULT_COLUMN_WIDTH, - // @ts-ignore - width: '1fr', vAlign: VerticalAlign.Middle, Aggregated: () => null, defaultFilter: defaultFilterMethod, diff --git a/packages/main/src/components/AnalyticalTable/defaults/FilterComponent/index.tsx b/packages/main/src/components/AnalyticalTable/defaults/FilterComponent/index.tsx index 59959b05094..35e8924ba9c 100644 --- a/packages/main/src/components/AnalyticalTable/defaults/FilterComponent/index.tsx +++ b/packages/main/src/components/AnalyticalTable/defaults/FilterComponent/index.tsx @@ -1,7 +1,7 @@ import { Input } from '@ui5/webcomponents-react/lib/Input'; -import React, { useCallback } from 'react'; +import React, { useCallback, FC } from 'react'; -export const DefaultFilterComponent = ({ column }) => { +export const DefaultFilterComponent: FC = ({ column }) => { const handleChange = useCallback( (e) => { column.setFilter(e.getParameter('value')); diff --git a/packages/main/src/components/AnalyticalTable/hooks/useCellStyling.ts b/packages/main/src/components/AnalyticalTable/hooks/useCellStyling.ts deleted file mode 100644 index 5780a6c331e..00000000000 --- a/packages/main/src/components/AnalyticalTable/hooks/useCellStyling.ts +++ /dev/null @@ -1,48 +0,0 @@ -import { TextAlign } from '@ui5/webcomponents-react/lib/TextAlign'; -import { VerticalAlign } from '@ui5/webcomponents-react/lib/VerticalAlign'; -import { CSSProperties } from 'react'; - -export const useCellStyling = ({ rowHeight }, classes) => ({ column }) => { - const style: CSSProperties = {}; - - if (rowHeight) { - style.height = `${rowHeight}px`; - } - switch (column.hAlign) { - case TextAlign.Begin: - style.justifyContent = 'flex-start'; - break; - case TextAlign.Center: - style.justifyContent = 'center'; - break; - case TextAlign.End: - style.justifyContent = 'flex-end'; - break; - case TextAlign.Left: - style.justifyContent = 'left'; - break; - case TextAlign.Right: - style.justifyContent = 'right'; - break; - } - switch (column.vAlign) { - case VerticalAlign.Bottom: - style.alignItems = 'flex-end'; - break; - case VerticalAlign.Middle: - style.alignItems = 'center'; - break; - case VerticalAlign.Top: - style.alignItems = 'flex-start'; - break; - } - - let className = classes.tableCell; - if (column.className) { - className += ` ${column.className}`; - } - return { - className, - style - }; -}; diff --git a/packages/main/src/components/AnalyticalTable/hooks/useDragAndDrop.ts b/packages/main/src/components/AnalyticalTable/hooks/useDragAndDrop.ts index d9e123c61cd..783a89afa31 100644 --- a/packages/main/src/components/AnalyticalTable/hooks/useDragAndDrop.ts +++ b/packages/main/src/components/AnalyticalTable/hooks/useDragAndDrop.ts @@ -5,20 +5,20 @@ const getColumnId = (column) => { return typeof column.accessor === 'string' ? column.accessor : column.id; }; -export const useDragAndDrop = (props, setColumnOrder, columnOrder, isBeingResized) => { +export const useDragAndDrop = (props, setColumnOrder, columnOrder, resizeInfo) => { const { onColumnsReordered } = props; const [dragOver, setDragOver] = useState(''); const handleDragStart = useCallback( (e) => { - if (isBeingResized) { + if (resizeInfo.isResizingColumn === e.currentTarget.dataset.columnId) { e.preventDefault(); return; } - e.dataTransfer.setData('colId', e.currentTarget.id); + e.dataTransfer.setData('colId', e.currentTarget.dataset.columnId); }, - [isBeingResized] + [resizeInfo.isResizingColumn] ); const handleDragOver = useCallback((e) => { @@ -26,14 +26,14 @@ export const useDragAndDrop = (props, setColumnOrder, columnOrder, isBeingResize }, []); const handleDragEnter = useCallback((e) => { - setDragOver(e.currentTarget.id); + setDragOver(e.currentTarget.dataset.columnId); }, []); const handleOnDrop = useCallback( (e) => { setDragOver(''); - const droppedColId = e.currentTarget.id; + const droppedColId = e.currentTarget.dataset.columnId; const draggedColId = e.dataTransfer.getData('colId'); if (droppedColId === draggedColId) return; diff --git a/packages/main/src/components/AnalyticalTable/hooks/useResizeColumns.ts b/packages/main/src/components/AnalyticalTable/hooks/useResizeColumns.ts deleted file mode 100644 index 7c92b397267..00000000000 --- a/packages/main/src/components/AnalyticalTable/hooks/useResizeColumns.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { useState, useCallback } from 'react'; - -export const useResizeColumns = () => { - const [resizedColumns, setResizedColumns] = useState({}); - const onColumnSizeChanged = useCallback( - ({ column, width }) => { - setResizedColumns({ - ...resizedColumns, - [column.id]: width - }); - }, - [setResizedColumns, resizedColumns] - ); - - const [isBeingResized, setBeingResized] = useState(false); - const onColumnBeingResized = useCallback( - ({ value }) => { - setBeingResized(value); - }, - [setBeingResized] - ); - - return [resizedColumns, onColumnSizeChanged, isBeingResized, onColumnBeingResized]; -}; diff --git a/packages/main/src/components/AnalyticalTable/hooks/useTableCellStyling.ts b/packages/main/src/components/AnalyticalTable/hooks/useTableCellStyling.ts index c35ad7fc169..047761254a7 100644 --- a/packages/main/src/components/AnalyticalTable/hooks/useTableCellStyling.ts +++ b/packages/main/src/components/AnalyticalTable/hooks/useTableCellStyling.ts @@ -1,11 +1,55 @@ -import { useCellStyling } from './useCellStyling'; -import { useCallback } from 'react'; +import { TextAlign } from '@ui5/webcomponents-react/lib/TextAlign'; +import { VerticalAlign } from '@ui5/webcomponents-react/lib/VerticalAlign'; +import { CSSProperties } from 'react'; +import { PluginHook } from 'react-table'; -export const useTableCellStyling = (classes, rowHeight) => - useCallback( - (instance) => { - instance.getCellProps.push(useCellStyling({ rowHeight }, classes)); - return instance; - }, - [rowHeight, classes] - ); +export const useTableCellStyling = (classes, rowHeight) => { + const hook: PluginHook<{}> = (instance) => { + instance.getCellProps.push(({ column }) => { + const style: CSSProperties = {}; + + if (rowHeight) { + style.height = `${rowHeight}px`; + } + switch (column.hAlign) { + case TextAlign.Begin: + style.textAlign = 'start'; + break; + case TextAlign.Center: + style.textAlign = 'center'; + break; + case TextAlign.End: + style.textAlign = 'end'; + break; + case TextAlign.Left: + style.textAlign = 'left'; + break; + case TextAlign.Right: + style.textAlign = 'right'; + break; + } + switch (column.vAlign) { + case VerticalAlign.Bottom: + style.verticalAlign = 'bottom'; + break; + case VerticalAlign.Middle: + style.verticalAlign = 'middle'; + break; + case VerticalAlign.Top: + style.verticalAlign = 'top'; + break; + } + + let className = classes.tableCell; + if (column.className) { + className += ` ${column.className}`; + } + return { + className, + style + }; + }); + }; + hook.pluginName = 'useTableCellStyling'; + return hook; +}; diff --git a/packages/main/src/components/AnalyticalTable/hooks/useTableHeaderGroupStyling.ts b/packages/main/src/components/AnalyticalTable/hooks/useTableHeaderGroupStyling.ts index 2c729d23304..7916c4069f0 100644 --- a/packages/main/src/components/AnalyticalTable/hooks/useTableHeaderGroupStyling.ts +++ b/packages/main/src/components/AnalyticalTable/hooks/useTableHeaderGroupStyling.ts @@ -1,18 +1,14 @@ -import { useCallback } from 'react'; +import { PluginHook } from 'react-table'; import { makeTemplateColumns } from './utils'; -export const useTableHeaderGroupStyling = (classes, resizedColumns) => - useCallback( - (instance) => { - instance.getHeaderGroupProps.push((table) => { - return { - className: classes.tableHeaderRow, - style: { - gridTemplateColumns: makeTemplateColumns(table.headers, resizedColumns) - } - }; - }); - return instance; - }, - [resizedColumns, classes.tableHeaderRow] - ); +export const useTableHeaderGroupStyling = (classes) => { + const hook: PluginHook<{}> = (instance) => { + instance.getHeaderGroupProps.push(() => { + return { + className: classes.tableHeaderRow + }; + }); + }; + hook.pluginName = 'useTableHeaderGroupStyling'; + return hook; +}; diff --git a/packages/main/src/components/AnalyticalTable/hooks/useTableHeaderStyling.ts b/packages/main/src/components/AnalyticalTable/hooks/useTableHeaderStyling.ts index 07ac953bc7e..ed3620f20c1 100644 --- a/packages/main/src/components/AnalyticalTable/hooks/useTableHeaderStyling.ts +++ b/packages/main/src/components/AnalyticalTable/hooks/useTableHeaderStyling.ts @@ -1,17 +1,15 @@ -import { useCallback } from 'react'; +import { PluginHook } from 'react-table'; -export const useTableHeaderStyling = (classes, onColumnSizeChanged, onColumnBeingResized) => - useCallback( - (instance) => { - instance.getHeaderProps.push((column) => { - return { - className: classes.th, - onColumnSizeChanged, - onColumnBeingResized, - column - }; - }); - return instance; - }, - [classes.th, onColumnSizeChanged, onColumnBeingResized] - ); +export const useTableHeaderStyling = (classes) => { + const hook: PluginHook<{}> = (instance) => { + instance.getHeaderProps.push((column) => { + return { + className: classes.th, + column + }; + }); + return instance; + }; + hook.pluginName = 'useTableHeaderStyling'; + return hook; +}; diff --git a/packages/main/src/components/AnalyticalTable/hooks/useTableRowStyling.ts b/packages/main/src/components/AnalyticalTable/hooks/useTableRowStyling.ts index 4ddddd211dc..a979e5adf25 100644 --- a/packages/main/src/components/AnalyticalTable/hooks/useTableRowStyling.ts +++ b/packages/main/src/components/AnalyticalTable/hooks/useTableRowStyling.ts @@ -1,8 +1,8 @@ -import { useCallback, useEffect, useMemo, useRef } from 'react'; +import { useEffect, useMemo, useRef } from 'react'; +import { PluginHook } from 'react-table'; export const useTableRowStyling = ( classes, - resizedColumns, selectable, selectedRow, selectedRowKey, @@ -30,59 +30,48 @@ export const useTableRowStyling = ( prevSelectedRowKey.current = selectedRowKey; }, [selectedRowKey]); - return useCallback( - (instance) => { - instance.getRowProps.push((row) => { - const rowKey = row.path.reduce((acc, val) => `${acc}_${val}`, 'row'); - let selected = false; + const hook: PluginHook<{}> = (instance) => { + instance.getRowProps.push((row) => { + const rowKey = row.path.reduce((acc, val) => `${acc}_${val}`, 'row'); + let selected = false; - if (!row.isAggregated && selectable) { - if (applySelectedRow) { - if (selectedRow.length && selectedRow.length > 0) { - selected = row.path.length === selectedRow.length && row.path.every((item, i) => item === selectedRow[i]); - } - } else if (selectedRowKey && rowKey === selectedRowKey) { - selected = true; + if (!row.isAggregated && selectable) { + if (applySelectedRow) { + if (selectedRow.length && selectedRow.length > 0) { + selected = row.path.length === selectedRow.length && row.path.every((item, i) => item === selectedRow[i]); } + } else if (selectedRowKey && rowKey === selectedRowKey) { + selected = true; } + } - let className = classes.tr; - if (row.isAggregated) { - className += ` ${classes.tableGroupHeader}`; - } - if (selected) { - className += ` ${classes.selectedRow}`; - } + let className = classes.tr; + if (row.isAggregated) { + className += ` ${classes.tableGroupHeader}`; + } + if (selected) { + className += ` ${classes.selectedRow}`; + } - if (alternateRowColor) { - if (row.index % 2 === 1) { - className += ` ${classes.alternateRowColor}`; - } + if (alternateRowColor) { + if (row.index % 2 === 1) { + className += ` ${classes.alternateRowColor}`; } + } - if (selectable) { - return { - className, - onClick: onRowClicked(row) - }; - } + if (selectable) { return { - className + className, + onClick: onRowClicked(row) }; - }); - return instance; - }, - [ - classes.tr, - classes.tableGroupHeader, - classes.selectedRow, - classes.alternateRowColor, - resizedColumns, - selectable, - selectedRow, - selectedRowKey, - onRowClicked, - alternateRowColor - ] - ); + } + return { + className + }; + }); + return instance; + }; + + hook.pluginName = 'useTableRowStyling'; + return hook; }; diff --git a/packages/main/src/components/AnalyticalTable/hooks/useTableStyling.ts b/packages/main/src/components/AnalyticalTable/hooks/useTableStyling.ts index bbfeb014327..a1fe3ab94e8 100644 --- a/packages/main/src/components/AnalyticalTable/hooks/useTableStyling.ts +++ b/packages/main/src/components/AnalyticalTable/hooks/useTableStyling.ts @@ -1,16 +1,13 @@ -import { useCallback } from 'react'; +import { PluginHook } from 'react-table'; -export const useTableStyling = (classes) => - useCallback( - (instance) => { - instance.getTableProps.push(() => { - return { - className: classes.table - }; - }); - return instance; - }, - [classes.table] - ); - -useTableStyling.pluginName = 'useTableStyling'; +export const useTableStyling = (classes) => { + const hook: PluginHook<{}> = (tableHooks) => { + tableHooks.getTableProps.push(() => { + return { + className: classes.table + }; + }); + }; + hook.pluginName = 'useTableStyling'; + return hook; +}; diff --git a/packages/main/src/components/AnalyticalTable/hooks/useToggleRowExpand.ts b/packages/main/src/components/AnalyticalTable/hooks/useToggleRowExpand.ts index d55d6b70ca0..e57de276ddc 100644 --- a/packages/main/src/components/AnalyticalTable/hooks/useToggleRowExpand.ts +++ b/packages/main/src/components/AnalyticalTable/hooks/useToggleRowExpand.ts @@ -1,25 +1,25 @@ import { Event } from '@ui5/webcomponents-react-base/lib/Event'; -import { useCallback } from 'react'; +import { PluginHook } from 'react-table'; export const useToggleRowExpand = (onRowExpandChange, isTreeTable) => { - return useCallback( - (instance) => { - instance.getExpandedToggleProps.push((row) => { - return { - onClick: (e) => { - e.stopPropagation(); - e.persist(); - row.toggleExpanded(); - let column = null; - if (!isTreeTable) { - column = row.cells.find((cell) => cell.column.id === row.groupByID).column; - } - - onRowExpandChange(Event.of(null, e, { row, column })); + const hook: PluginHook = (instance) => { + // @ts-ignore + instance.getExpandedToggleProps.push((row) => { + return { + onClick: (e) => { + e.stopPropagation(); + e.persist(); + row.toggleExpanded(); + let column = null; + if (!isTreeTable) { + column = row.cells.find((cell) => cell.column.id === row.groupByID).column; } - }; - }); - }, - [onRowExpandChange, isTreeTable] - ); + + onRowExpandChange(Event.of(null, e, { row, column })); + } + }; + }); + }; + hook.pluginName = 'useToggleRowExpand'; + return hook; }; diff --git a/packages/main/src/components/AnalyticalTable/hooks/useWindowResize.ts b/packages/main/src/components/AnalyticalTable/hooks/useWindowResize.ts deleted file mode 100644 index 6bf0393f911..00000000000 --- a/packages/main/src/components/AnalyticalTable/hooks/useWindowResize.ts +++ /dev/null @@ -1,43 +0,0 @@ -import { useCallback, useEffect, useRef, useState } from 'react'; -import { Device } from '@ui5/webcomponents-react-base/lib/Device'; - -export const useWindowResize = () => { - const headerRef = useRef(null); - const [tableWidth, setTableWidth] = useState(0); - const onWindowResize = useCallback(() => { - if (headerRef.current) { - setTableWidth(headerRef.current.getBoundingClientRect().width); - } - }, [setTableWidth, headerRef.current]); - - const observer = useRef(new MutationObserver(onWindowResize)); - - useEffect(() => { - if (headerRef.current && headerRef.current.getBoundingClientRect().width !== 0) { - setTableWidth(headerRef.current.getBoundingClientRect().width); - } - }, [headerRef.current, setTableWidth]); - - useEffect(() => { - Device.resize.attachHandler(onWindowResize, null); - return () => { - Device.resize.detachHandler(onWindowResize, null); - }; - }, [onWindowResize]); - - useEffect(() => { - if (headerRef.current) { - observer.current.observe(headerRef.current, { - attributes: true, - subtree: true, - childList: true - }); - } - - return () => { - observer.current.disconnect(); - }; - }, [headerRef.current, observer.current]); - - return [headerRef, tableWidth]; -}; diff --git a/packages/main/src/components/AnalyticalTable/hooks/utils.ts b/packages/main/src/components/AnalyticalTable/hooks/utils.ts index c7dbd24dcc9..ca9eaa44075 100644 --- a/packages/main/src/components/AnalyticalTable/hooks/utils.ts +++ b/packages/main/src/components/AnalyticalTable/hooks/utils.ts @@ -1,10 +1,6 @@ -export const makeTemplateColumns = (columns, resizedColumns) => { +export const makeTemplateColumns = (columns) => { return columns .map((column) => { - if (resizedColumns[column.id]) { - return `${resizedColumns[column.id]}px`; - } - let columnWidth = column.width; if (typeof columnWidth === 'number') { columnWidth = `${columnWidth}px`; diff --git a/packages/main/src/components/AnalyticalTable/index.tsx b/packages/main/src/components/AnalyticalTable/index.tsx index 63a2dd917ee..706a4d8c28e 100644 --- a/packages/main/src/components/AnalyticalTable/index.tsx +++ b/packages/main/src/components/AnalyticalTable/index.tsx @@ -1,3 +1,4 @@ +import { Device } from '@ui5/webcomponents-react-base/lib/Device'; import { Event } from '@ui5/webcomponents-react-base/lib/Event'; import { StyleClassHelper } from '@ui5/webcomponents-react-base/lib/StyleClassHelper'; import { ContentDensity } from '@ui5/webcomponents-react/lib/ContentDensity'; @@ -10,12 +11,26 @@ import React, { ReactNode, ReactText, Ref, + RefObject, useCallback, useEffect, - useMemo + useMemo, + useRef, + useState } from 'react'; import { createUseStyles, useTheme } from 'react-jss'; -import { useExpanded, useFilters, useGroupBy, useSortBy, useTable, useColumnOrder } from 'react-table'; +import { + PluginHook, + useAbsoluteLayout, + useColumnOrder, + useExpanded, + useFilters, + useGroupBy, + useResizeColumns, + useSortBy, + useTable, + Column +} from 'react-table'; import { CommonProps } from '../../interfaces/CommonProps'; import { JSSTheme } from '../../interfaces/JSSTheme'; import styles from './AnayticalTable.jss'; @@ -24,7 +39,7 @@ import { DefaultColumn } from './defaults/Column'; import { DefaultLoadingComponent } from './defaults/LoadingComponent'; import { TablePlaceholder } from './defaults/LoadingComponent/TablePlaceholder'; import { DefaultNoDataComponent } from './defaults/NoDataComponent'; -import { useResizeColumns } from './hooks/useResizeColumns'; +import { useDragAndDrop } from './hooks/useDragAndDrop'; import { useRowSelection } from './hooks/useRowSelection'; import { useTableCellStyling } from './hooks/useTableCellStyling'; import { useTableHeaderGroupStyling } from './hooks/useTableHeaderGroupStyling'; @@ -33,14 +48,11 @@ import { useTableRowStyling } from './hooks/useTableRowStyling'; import { useTableScrollHandles } from './hooks/useTableScrollHandles'; import { useTableStyling } from './hooks/useTableStyling'; import { useToggleRowExpand } from './hooks/useToggleRowExpand'; -import { useWindowResize } from './hooks/useWindowResize'; -import { makeTemplateColumns } from './hooks/utils'; +import { stateReducer } from './tableReducer/stateReducer'; import { TitleBar } from './TitleBar'; import { VirtualTableBody } from './virtualization/VirtualTableBody'; -import { useDragAndDrop } from './hooks/useDragAndDrop'; -import { reducer } from './tableReducer/reducer'; -export interface ColumnConfiguration { +export interface ColumnConfiguration extends Column { accessor?: string; width?: number; hAlign?: TextAlign; @@ -100,7 +112,7 @@ export interface TableProps extends CommonProps { * additional options which will be passed to [react-table´s useTable hook](https://github.com/tannerlinsley/react-table/blob/master/docs/api.md#table-options) */ reactTableOptions?: object; - tableHooks?: Array<() => any>; + tableHooks?: Array>; subRowsKey?: string; selectedRowKey?: string; isTreeTable?: boolean; @@ -150,18 +162,39 @@ const AnalyticalTable: FC = forwardRef((props: TableProps, ref: Ref< const classes = useStyles({ rowHeight: props.rowHeight }); const [selectedRowPath, onRowClicked] = useRowSelection(onRowSelected, selectedRowKey); - const [resizedColumns, onColumnSizeChanged, isBeingResized, onColumnBeingResized] = useResizeColumns(); const [analyticalTableRef, reactWindowRef] = useTableScrollHandles(ref); + const tableRef: RefObject = useRef(); const getSubRows = useCallback((row) => row[subRowsKey] || [], [subRowsKey]); - const { getTableProps, headerGroups, rows, prepareRow, state: tableState, setColumnOrder, dispatch } = useTable( + const [columnWidth, setColumnWidth] = useState(null); + + const defaultColumn = useMemo(() => { + if (columnWidth) { + return { + width: columnWidth, + ...DefaultColumn + }; + } + return DefaultColumn; + }, [columnWidth]); + + const { + getTableProps, + headerGroups, + rows, + prepareRow, + state: tableState, + setColumnOrder, + dispatch, + totalColumnsWidth + } = useTable( { columns, data, - defaultColumn: DefaultColumn, + defaultColumn, getSubRows, - reducer, + stateReducer, ...reactTableOptions }, useFilters, @@ -169,23 +202,36 @@ const AnalyticalTable: FC = forwardRef((props: TableProps, ref: Ref< useColumnOrder, useSortBy, useExpanded, + useAbsoluteLayout, + useResizeColumns, useTableStyling(classes), - useTableHeaderGroupStyling(classes, resizedColumns), - useTableHeaderStyling(classes, onColumnSizeChanged, onColumnBeingResized), - useTableRowStyling( - classes, - resizedColumns, - selectable, - selectedRowPath, - selectedRowKey, - onRowClicked, - alternateRowColor - ), + useTableHeaderGroupStyling(classes), + useTableHeaderStyling(classes), + useTableRowStyling(classes, selectable, selectedRowPath, selectedRowKey, onRowClicked, alternateRowColor), useTableCellStyling(classes, rowHeight), useToggleRowExpand(onRowExpandChange, isTreeTable), ...tableHooks ); + const updateTableSizes = useCallback(() => { + const visibleColumns = columns.filter(Boolean).filter(({ show }) => show ?? true); + const columnsWithFixedWidth = columns.filter(({ width }) => width ?? false).map(({ width }) => width); + const fixedWidth = columnsWithFixedWidth.reduce((acc, val) => acc + val, 0); + if (visibleColumns.length > 0 && tableRef.current.clientWidth > 0) { + setColumnWidth( + (tableRef.current.clientWidth - fixedWidth) / (visibleColumns.length - columnsWithFixedWidth.length) + ); + } else { + setColumnWidth(150); + } + }, []); + + useEffect(() => { + updateTableSizes(); + Device.resize.attachHandler(updateTableSizes, null); + return () => Device.resize.detachHandler(updateTableSizes, null); + }, [updateTableSizes]); + useEffect(() => { dispatch({ type: 'SET_GROUP_BY', payload: groupBy }); }, [groupBy, dispatch]); @@ -218,12 +264,6 @@ const AnalyticalTable: FC = forwardRef((props: TableProps, ref: Ref< }; }, [tableBodyHeight]); - const rowContainerStyling = useMemo(() => { - return { - gridTemplateColumns: makeTemplateColumns(headerGroups.map(({ headers }) => headers).flat(), resizedColumns) - }; - }, [headerGroups, resizedColumns]); - const onGroupByChanged = useCallback( (e) => { const { column, isGrouped } = e.getParameters(); @@ -244,87 +284,86 @@ const AnalyticalTable: FC = forwardRef((props: TableProps, ref: Ref< [tableState.groupBy, onGroup, dispatch] ); - const [headerRef, tableWidth] = useWindowResize(); const [dragOver, handleDragEnter, handleDragStart, handleDragOver, handleOnDrop, handleOnDragEnd] = useDragAndDrop( props, setColumnOrder, tableState.columnOrder, - isBeingResized + tableState.columnResizing ); return (
{title && {title}} {typeof renderExtension === 'function' &&
{renderExtension()}
} -
-
- {headerGroups.map((headerGroup) => { - let headerProps = {}; - if (headerGroup.getHeaderGroupProps) { - headerProps = headerGroup.getHeaderGroupProps(); - } - return ( -
- {headerGroup.headers.map((column, index) => ( - - {column.render('Header')} - - ))} -
- ); - })} - {loading && busyIndicatorEnabled && data.length > 0 && } - {loading && data.length === 0 && ( - col.show ?? true).length} - rows={props.minRows} - style={noDataStyles} - rowHeight={internalRowHeight} - /> - )} - {!loading && data.length === 0 && ( - - )} - {data.length > 0 && ( - - )} -
+
+ {columnWidth && ( +
+ {headerGroups.map((headerGroup) => { + let headerProps = {}; + if (headerGroup.getHeaderGroupProps) { + headerProps = headerGroup.getHeaderGroupProps(); + } + return ( +
+ {headerGroup.headers.map((column, index) => ( + + {column.render('Header')} + + ))} +
+ ); + })} + {loading && busyIndicatorEnabled && data.length > 0 && } + {loading && data.length === 0 && ( + col.show ?? true).length} + rows={props.minRows} + style={noDataStyles} + rowHeight={internalRowHeight} + /> + )} + {!loading && data.length === 0 && ( + + )} + {data.length > 0 && ( + + )} +
+ )}
); diff --git a/packages/main/src/components/AnalyticalTable/tableReducer/reducer.ts b/packages/main/src/components/AnalyticalTable/tableReducer/stateReducer.ts similarity index 73% rename from packages/main/src/components/AnalyticalTable/tableReducer/reducer.ts rename to packages/main/src/components/AnalyticalTable/tableReducer/stateReducer.ts index 140ba47dfb6..35f0bf1109e 100644 --- a/packages/main/src/components/AnalyticalTable/tableReducer/reducer.ts +++ b/packages/main/src/components/AnalyticalTable/tableReducer/stateReducer.ts @@ -1,4 +1,4 @@ -export const reducer = (newState, action, prevState) => { +export const stateReducer = (newState, action, prevState) => { const { payload } = action; switch (action.type) { case 'SET_GROUP_BY': diff --git a/packages/main/src/components/AnalyticalTable/types/ColumnType.ts b/packages/main/src/components/AnalyticalTable/types/ColumnType.ts index 16a21379671..93ffa6544f6 100644 --- a/packages/main/src/components/AnalyticalTable/types/ColumnType.ts +++ b/packages/main/src/components/AnalyticalTable/types/ColumnType.ts @@ -1,6 +1,7 @@ import { ComponentType } from 'react'; +import { Column } from 'react-table'; -export interface ColumnType { +export interface ColumnType extends Column { show: boolean; id: string; Filter: ComponentType<{ column: ColumnType }>; @@ -15,4 +16,6 @@ export interface ColumnType { isSorted: boolean; isSortedDesc: boolean; disableGrouping: boolean; + getResizerProps: () => any; + isResizing: boolean; } diff --git a/packages/main/src/components/AnalyticalTable/virtualization/VirtualTableBody.tsx b/packages/main/src/components/AnalyticalTable/virtualization/VirtualTableBody.tsx index 3337f0dfcdc..353e4e479dd 100644 --- a/packages/main/src/components/AnalyticalTable/virtualization/VirtualTableBody.tsx +++ b/packages/main/src/components/AnalyticalTable/virtualization/VirtualTableBody.tsx @@ -2,13 +2,11 @@ import '@ui5/webcomponents-icons/dist/icons/navigation-down-arrow'; import '@ui5/webcomponents-icons/dist/icons/navigation-right-arrow'; import React, { useCallback, useEffect, useMemo, useRef } from 'react'; import { FixedSizeList } from 'react-window'; -import { DEFAULT_COLUMN_WIDTH } from '../defaults/Column'; import { VirtualTableRow } from './VirtualTableRow'; export const VirtualTableBody = (props) => { const { classes, - rowContainerStyling, prepareRow, rows, minRows, @@ -17,14 +15,13 @@ export const VirtualTableBody = (props) => { selectedRowPath, selectable, reactWindowRef, - tableWidth, - resizedColumns, isTreeTable, internalRowHeight, tableBodyHeight, visibleRows, alternateRowColor, - overscanCount + overscanCount, + totalColumnsWidth } = props; const innerDivRef = useRef(null); @@ -42,42 +39,16 @@ export const VirtualTableBody = (props) => { const itemCount = Math.max(minRows, rows.length); const overscan = overscanCount ? overscanCount : Math.floor(visibleRows / 2); - const columnsWidth = useMemo(() => { - const aggregatedWidth = columns - .map((item) => { - if (resizedColumns.hasOwnProperty(item.accessor)) { - return resizedColumns[item.accessor]; - } - if (item.hasOwnProperty('show') && !item.show) { - return 0; - } - return item.minWidth ? item.minWidth : DEFAULT_COLUMN_WIDTH; - }) - .reduce((acc, val) => acc + val, 0); - return tableWidth > aggregatedWidth || tableWidth === 0 ? null : aggregatedWidth; - }, [columns, tableWidth, resizedColumns]); - const tableData = useMemo(() => { return { rows, additionalProps: { isTreeTable, classes, - columns, - rowContainerStyling + columns } }; - }, [ - rows, - prepareRow, - isTreeTable, - classes, - columns, - rowContainerStyling, - alternateRowColor, - selectedRow, - selectedRowPath - ]); + }, [rows, prepareRow, isTreeTable, classes, columns, alternateRowColor, selectedRow, selectedRowPath]); const getItemKey = useCallback( (index, data) => { @@ -99,7 +70,7 @@ export const VirtualTableBody = (props) => { { const { style, index, data } = props; const { additionalProps, rows } = data; - const { isTreeTable, classes, columns, rowContainerStyling } = additionalProps; + const { isTreeTable, classes, columns } = additionalProps; const row = rows[index]; - const rowStyle = { - ...style, - gridTemplateColumns: rowContainerStyling.gridTemplateColumns - }; - if (!row) { return ( -
+
{columns.map((col, colIndex) => { let classNames = classes.tableCell; if (col.className) { @@ -26,7 +21,7 @@ export const VirtualTableRow = (props) => { } return ( -
+
{row.cells.map((cell, i) => { let contentToRender = 'Cell'; if (isTreeTable) { diff --git a/shared/tests/utils.tsx b/shared/tests/utils.tsx index 1250af4e533..313426d537c 100644 --- a/shared/tests/utils.tsx +++ b/shared/tests/utils.tsx @@ -25,11 +25,6 @@ export const mountThemedComponent = ( contextOverwrite: { [key: string]: string } = {}, enzymeOptions = {} ) => { - // const searchParams = Object.entries(contextOverwrite) - // .map(([key, val]) => `sap-ui-${key}=${`${val}`.toLowerCase()}`) - // .join('&'); - // window.location.search = `?${searchParams}`; - return mount({component}, enzymeOptions); }; diff --git a/yarn.lock b/yarn.lock index 5485849c712..6ddf5bed7de 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3699,7 +3699,7 @@ acorn@^5.2.1, acorn@^5.5.3: resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.3.tgz#67aa231bf8812974b85235a96771eb6bd07ea279" integrity sha512-T/zvzYRfbVojPWahDsE5evJdHb3oJoQfFbsrKM7w5Zcs++Tr257tia3BmMP8XYVjp1S9RZXQMh7gao96BlqZOw== -acorn@^6.0.1, acorn@^6.1.1, acorn@^6.2.0, acorn@^6.2.1: +acorn@^6.0.1, acorn@^6.2.0, acorn@^6.2.1: version "6.2.1" resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.2.1.tgz#3ed8422d6dec09e6121cc7a843ca86a330a86b51" integrity sha512-JD0xT5FCRDNyjDda3Lrg/IxFscp9q4tiYtxE1/nOzlKCk7hIRuYjhq1kCNkbPjMRMZuFq20HNQn1I9k8Oj0E+Q== @@ -6306,18 +6306,30 @@ csso@^3.5.1: dependencies: css-tree "1.0.0-alpha.29" -cssom@0.3.x, "cssom@>= 0.3.2 < 0.4.0", cssom@^0.3.6: +cssom@0.3.x, "cssom@>= 0.3.2 < 0.4.0", cssom@~0.3.6: version "0.3.8" resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.8.tgz#9f1276f5b2b463f2114d3f2c75250af8c1a36f4a" integrity sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg== -cssstyle@^1.0.0, cssstyle@^1.2.2: +cssom@^0.4.1: + version "0.4.4" + resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.4.4.tgz#5a66cf93d2d0b661d80bf6a44fb65f5c2e4e0a10" + integrity sha512-p3pvU7r1MyyqbTk+WbNJIgJjG2VmTIaB10rI93LzVPrmDJKkzKYMtxxyAvQXR/NS6otuzveI7+7BBq3SjBS2mw== + +cssstyle@^1.0.0: version "1.4.0" resolved "https://registry.yarnpkg.com/cssstyle/-/cssstyle-1.4.0.tgz#9d31328229d3c565c61e586b02041a28fccdccf1" integrity sha512-GBrLZYZ4X4x6/QEoBnIrqb8B/f5l4+8me2dkom/j1Gtbxy0kBv6OGzKuAsGM75bkGwGAFkt56Iwg28S3XTZgSA== dependencies: cssom "0.3.x" +cssstyle@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/cssstyle/-/cssstyle-2.0.0.tgz#911f0fe25532db4f5d44afc83f89cc4b82c97fe3" + integrity sha512-QXSAu2WBsSRXCPjvI43Y40m6fMevvyRm8JVAuF9ksQz5jha4pWP1wpaK7Yu5oLFc6+XAY+hj8YhefyXcBB53gg== + dependencies: + cssom "~0.3.6" + csstype@^2.2.0, csstype@^2.5.7: version "2.6.6" resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.6.tgz#c34f8226a94bbb10c32cc0d714afdf942291fc41" @@ -9964,17 +9976,17 @@ jest-environment-enzyme@^7.1.2: dependencies: jest-environment-jsdom "^24.0.0" -jest-environment-jsdom-fifteen@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/jest-environment-jsdom-fifteen/-/jest-environment-jsdom-fifteen-1.0.0.tgz#9634f78d7cedcc1fdf55b4052051c422935a68ab" - integrity sha512-TNGpp8HUzpvrpweantzipQo6M2YbvmKkj1WGsdf29xpU0fgSa8nrL2fQgZDxpvrh77AexXtuXuwee0cl2iiLvg== +jest-environment-jsdom-fifteen@^1.0.2: + version "1.0.2" + resolved "https://registry.yarnpkg.com/jest-environment-jsdom-fifteen/-/jest-environment-jsdom-fifteen-1.0.2.tgz#49a0af55e0d32737a6114a1575dd714702ad63b0" + integrity sha512-nfrnAfwklE1872LIB31HcjM65cWTh1wzvMSp10IYtPJjLDUbTTvDpajZgIxUnhRmzGvogdHDayCIlerLK0OBBg== dependencies: "@jest/environment" "^24.3.0" "@jest/fake-timers" "^24.3.0" "@jest/types" "^24.3.0" jest-mock "^24.0.0" jest-util "^24.0.0" - jsdom "^15.1.0" + jsdom "^15.2.1" jest-environment-jsdom@^24.0.0: version "24.8.0" @@ -10437,22 +10449,22 @@ jsdom@^11.5.1: ws "^5.2.0" xml-name-validator "^3.0.0" -jsdom@^15.1.0: - version "15.1.1" - resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-15.1.1.tgz#21ed01f81d95ef4327f3e564662aef5e65881252" - integrity sha512-cQZRBB33arrDAeCrAEWn1U3SvrvC8XysBua9Oqg1yWrsY/gYcusloJC3RZJXuY5eehSCmws8f2YeliCqGSkrtQ== +jsdom@^15.2.1: + version "15.2.1" + resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-15.2.1.tgz#d2feb1aef7183f86be521b8c6833ff5296d07ec5" + integrity sha512-fAl1W0/7T2G5vURSyxBzrJ1LSdQn6Tr5UX/xD4PXDx/PDgwygedfW6El/KIj3xJ7FU61TTYnc/l/B7P49Eqt6g== dependencies: abab "^2.0.0" - acorn "^6.1.1" + acorn "^7.1.0" acorn-globals "^4.3.2" array-equal "^1.0.0" - cssom "^0.3.6" - cssstyle "^1.2.2" + cssom "^0.4.1" + cssstyle "^2.0.0" data-urls "^1.1.0" domexception "^1.0.1" escodegen "^1.11.1" html-encoding-sniffer "^1.0.2" - nwsapi "^2.1.4" + nwsapi "^2.2.0" parse5 "5.1.0" pn "^1.1.0" request "^2.88.0" @@ -12551,11 +12563,16 @@ number-is-nan@^1.0.0: resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d" integrity sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0= -nwsapi@^2.0.7, nwsapi@^2.1.4: +nwsapi@^2.0.7: version "2.1.4" resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.1.4.tgz#e006a878db23636f8e8a67d33ca0e4edf61a842f" integrity sha512-iGfd9Y6SFdTNldEy2L0GUhcarIutFmk+MPWIn9dmj8NMIup03G08uUF2KGbbmv/Ux4RT0VZJoP/sVbWA6d/VIw== +nwsapi@^2.2.0: + version "2.2.0" + resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.2.0.tgz#204879a9e3d068ff2a55139c2c772780681a38b7" + integrity sha512-h2AatdwYH+JHiZpv7pt/gSX1XoRGb7L/qSIeuqA6GwYoF9w1vP1cw42TO0aI2pNyshRK5893hNSl+1//vHK7hQ== + oauth-sign@~0.9.0: version "0.9.0" resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.9.0.tgz#47a7b016baa68b5fa0ecf3dee08a85c679ac6455" @@ -14519,10 +14536,10 @@ react-syntax-highlighter@^8.0.1: prismjs "^1.8.4" refractor "^2.4.1" -react-table@7.0.0-beta.20: - version "7.0.0-beta.20" - resolved "https://registry.yarnpkg.com/react-table/-/react-table-7.0.0-beta.20.tgz#2125726549a15d5fd1d264145c92b9807a82aa1e" - integrity sha512-809Zj/OHX+Jbfnb+kxULZDvDstHrpzjFl2+mYOF9pU1CcJKkL2GdBmlWr9pcDmznxMU6veJUYnAxXYqvAWKVrQ== +react-table@7.0.0-rc.5: + version "7.0.0-rc.5" + resolved "https://registry.yarnpkg.com/react-table/-/react-table-7.0.0-rc.5.tgz#6d0caf6b6003c19c3e36dfd7c926f5b40dee0c30" + integrity sha512-hMrnKMvKOfqbHv3WUxmActkTj06Y8r3v/HIZ2H6CRqhgjGV3gtONn2N1w9lLCY7NE3x7BtD+YhtmacYhWkGtJA== react-test-renderer@^16.0.0-0: version "16.8.6"