Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(Tile): recalculate tile rect height on component did mount #9593

Merged
merged 14 commits into from
Sep 24, 2021
Merged

fix(Tile): recalculate tile rect height on component did mount #9593

Show file tree
Hide file tree
Changes from 13 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
868ab70
fix(Tile): recalculate tile rect height on component did mount
dakahn Sep 3, 2021
5dc3e4f
Update packages/react/src/components/Tile/Tile.js
dakahn Sep 3, 2021
0582b4e
fix(Tile): remove unused variable
dakahn Sep 7, 2021
b33af4b
Merge branch '9187-expandable-tile-bug' of github.com:dakahn/carbon i…
dakahn Sep 7, 2021
12d9b2e
Merge branch 'main' into 9187-expandable-tile-bug
dakahn Sep 7, 2021
6b815ad
chore(Tile): update tests with mock ResizeObserver
dakahn Sep 7, 2021
5b1e5cc
Merge branch '9187-expandable-tile-bug' of github.com:dakahn/carbon i…
dakahn Sep 7, 2021
2058b14
chore(Tile): format file
dakahn Sep 7, 2021
3cb3d1d
fix(Tile-test): wrap resizeObserver in before/aftereach
dakahn Sep 8, 2021
5401e4a
Merge branch 'main' into 9187-expandable-tile-bug
dakahn Sep 8, 2021
8def3e9
fix(Tile-test): add asynchronous afterAll call
dakahn Sep 13, 2021
32b379a
Merge branch '9187-expandable-tile-bug' of github.com:dakahn/carbon i…
dakahn Sep 13, 2021
7860a5d
fix(jest): add ResizeObserver to setup
joshblack Sep 13, 2021
2250284
Merge branch 'main' into 9187-expandable-tile-bug
sstrubberg Sep 24, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions config/jest-config-carbon/setup/setup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,3 +39,13 @@ if (global.window) {
const { getComputedStyle } = window;
window.getComputedStyle = (element) => getComputedStyle(element);
}

if (global.window) {
window.ResizeObserver = jest.fn(() => {
return {
observe: jest.fn(),
unobserve: jest.fn(),
disconnect: jest.fn(),
};
});
}
17 changes: 17 additions & 0 deletions packages/react/src/components/Tile/Tile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -507,11 +507,22 @@ export class ExpandableTile extends Component {
};
}

resizeObserver = null;

componentDidMount = () => {
this.resizeObserver = new ResizeObserver((entries) => {
const [aboveTheFold] = entries;
this.setState({
tileMaxHeight: aboveTheFold.contentRect.height,
});
});

if (this.tile) {
const getStyle = window.getComputedStyle(this.tile, null);

if (this.aboveTheFold) {
this.resizeObserver.observe(this.aboveTheFold);

this.setState({
tileMaxHeight: this.aboveTheFold.getBoundingClientRect().height,
tilePadding:
Expand All @@ -522,6 +533,12 @@ export class ExpandableTile extends Component {
}
};

componentWillUnmount() {
if (this.resizeObserver) {
this.resizeObserver.disconnect();
}
}

componentDidUpdate = (prevProps) => {
if (prevProps.expanded !== this.props.expanded) {
this.setMaxHeight();
Expand Down