Skip to content

Commit

Permalink
fix(Table): fix flexGrow is invalid when the table is hidden and th…
Browse files Browse the repository at this point in the history
…en shown
  • Loading branch information
simonguo committed Jun 6, 2024
1 parent acd24e0 commit 38a032e
Show file tree
Hide file tree
Showing 6 changed files with 156 additions and 49 deletions.
77 changes: 44 additions & 33 deletions docs/examples/FluidColumnTable.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,44 +5,55 @@
```js
const data = mockUsers(20);

const App = () => {
const CustomTable = ({ flexGrow }) => {
return (
<Table
height={400}
data={data}
onSortColumn={(sortColumn, sortType) => {
console.log(sortColumn, sortType);
}}
>
<Column width={50} align="center" fixed>
<HeaderCell>Id</HeaderCell>
<Cell dataKey="id" />
</Column>
<>
<Table
height={400}
data={data}
onSortColumn={(sortColumn, sortType) => {
console.log(sortColumn, sortType);
}}
>
<Column width={50} align="center" fixed>
<HeaderCell>Id</HeaderCell>
<Cell dataKey="id" />
</Column>

<Column width={100} fixed>
<HeaderCell>First Name</HeaderCell>
<Cell dataKey="firstName" />
</Column>

<Column width={100} fixed>
<HeaderCell>First Name</HeaderCell>
<Cell dataKey="firstName" />
</Column>
<Column width={100} resizable sortable>
<HeaderCell>Last Name</HeaderCell>
<Cell dataKey="lastName" />
</Column>

<Column width={100} resizable sortable>
<HeaderCell>Last Name</HeaderCell>
<Cell dataKey="lastName" />
</Column>
<Column flexGrow={flexGrow ? 1 : undefined} width={200} sortable>
<HeaderCell>City {flexGrow ? <code>(flexGrow={1})</code> : null}</HeaderCell>
<Cell dataKey="city" />
</Column>

<Column flexGrow={1} sortable>
<HeaderCell>
City <code>(flexGrow={1})</code>
</HeaderCell>
<Cell dataKey="city" />
</Column>
<Column flexGrow={flexGrow ? 2 : undefined} width={200} sortable>
<HeaderCell>Company {flexGrow ? <code>(flexGrow={2})</code> : null}</HeaderCell>
<Cell dataKey="company" />
</Column>
</Table>
</>
);
};

<Column flexGrow={2} sortable>
<HeaderCell>
Company <code>(flexGrow={2})</code>
</HeaderCell>
<Cell dataKey="company" />
</Column>
</Table>
const App = () => {
return (
<Tabs defaultActiveKey="1">
<Tabs.Tab eventKey="1" title="flexGrow">
<CustomTable flexGrow />
</Tabs.Tab>
<Tabs.Tab eventKey="2" title="no flexGrow">
<CustomTable />
</Tabs.Tab>
</Tabs>
);
};

Expand Down
7 changes: 5 additions & 2 deletions docs/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,8 @@ import {
Divider,
Input,
Loader,
Placeholder
Placeholder,
Tabs
} from 'rsuite';
import clone from 'lodash/clone';
import isFunction from 'lodash/isFunction';
Expand Down Expand Up @@ -40,6 +41,7 @@ import 'rsuite/Nav/styles/index.less';
import 'rsuite/Input/styles/index.less';
import 'rsuite/Stack/styles/index.less';
import 'rsuite/Divider/styles/index.less';
import 'rsuite/Tabs/styles/index.less';
import './less/index.less';

const dependencies = {
Expand Down Expand Up @@ -76,7 +78,8 @@ const dependencies = {
ArrowDownIcon,
ArrowUpIcon,
SortIcon,
Placeholder
Placeholder,
Tabs
};

const examples = [
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,7 @@
"react-dnd": "^16.0.1",
"react-dnd-html5-backend": "^16.0.1",
"react-dom": "^18.2.0",
"rsuite": "^5.21.0",
"rsuite": "^5.64.0",
"sinon": "^11.1.2",
"sinon-chai": "^3.7.0",
"style-loader": "^0.13.1",
Expand Down
63 changes: 50 additions & 13 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

44 changes: 44 additions & 0 deletions src/utils/useIntersectionObserver.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import { useState, useEffect, RefObject } from 'react';

/**
* useIntersectionObserver Hook
*
* @param ref - Ref object of the element to be observed
*/
const useIntersectionObserver = (ref?: RefObject<HTMLElement>): boolean => {
const [isVisible, setIsVisible] = useState(false);

useEffect(() => {
// Check if the browser supports IntersectionObserver
if (!('IntersectionObserver' in window)) {
// If not supported, optionally set to visible or handle fallback logic
setIsVisible(true); // Fallback: Set to visible
return;
}

// Create an IntersectionObserver instance
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
setIsVisible(entry.isIntersecting);
});
});

const element = ref?.current;

// Start observing the target element
if (element) {
observer.observe(element);
}

// Cleanup function to unobserve the element when the component unmounts or dependencies change
return () => {
if (element) {
observer.unobserve(element);
}
};
}, [ref]);

return isVisible;
};

export default useIntersectionObserver;
12 changes: 12 additions & 0 deletions src/utils/useTableDimension.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { SCROLLBAR_WIDTH } from '../constants';
import { ResizeObserver } from '@juggle/resize-observer';
import useMount from './useMount';
import useUpdateLayoutEffect from './useUpdateLayoutEffect';
import useIntersectionObserver from './useIntersectionObserver';
import isNumberOrTrue from './isNumberOrTrue';
import { RowDataType, ElementOffset } from '../@types/common';
import debounce from 'lodash/debounce';
Expand Down Expand Up @@ -296,6 +297,17 @@ const useTableDimension = <Row extends RowDataType, Key>(props: TableDimensionPr
calculateTableContentWidth
]);

const isVisible = useIntersectionObserver(tableRef);

useUpdateLayoutEffect(() => {
// When the table is visible, the width of the table is recalculated.
// fix: https://github.com/rsuite/rsuite/issues/397
if (isVisible) {
calculateTableWidth();
calculateTableContentWidth();
}
}, [isVisible]);

const setScrollY = useCallback((value: number) => {
scrollY.current = value;
}, []);
Expand Down

0 comments on commit 38a032e

Please sign in to comment.