Skip to content
This repository was archived by the owner on Nov 4, 2025. It is now read-only.

Commit 78e375d

Browse files
committed
fix: Visible change should trigger align
1 parent 4b52a66 commit 78e375d

File tree

3 files changed

+66
-32
lines changed

3 files changed

+66
-32
lines changed

examples/simple.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ class Test extends Component {
55
state = {
66
monitor: true,
77
random: false,
8+
disabled: false,
89
randomWidth: 100,
910
align: {
1011
points: ['cc', 'cc'],
@@ -59,6 +60,12 @@ class Test extends Component {
5960
}));
6061
};
6162

63+
toggleDisabled = () => {
64+
this.setState(({ disabled }) => ({
65+
disabled: !disabled,
66+
}));
67+
};
68+
6269
forceAlign = () => {
6370
this.$align.forceAlign();
6471
};
@@ -85,6 +92,10 @@ class Test extends Component {
8592
<input type="checkbox" checked={this.state.random} onChange={this.toggleRandom} />
8693
&nbsp; Random Size
8794
</label>
95+
<label>
96+
<input type="checkbox" checked={this.state.disabled} onChange={this.toggleDisabled} />
97+
&nbsp; Disabled
98+
</label>
8899
</p>
89100
<div
90101
ref={this.containerRef}
@@ -106,6 +117,7 @@ class Test extends Component {
106117
target={this.getTarget}
107118
monitorWindowResize={this.state.monitor}
108119
align={this.state.align}
120+
disabled={this.state.disabled}
109121
>
110122
<div
111123
style={{

src/Align.tsx

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,13 @@ const Align: React.RefForwardingComponent<RefAlign, AlignProps> = (
107107
}
108108
});
109109

110+
// Listen for disabled change
111+
React.useEffect(() => {
112+
if (!disabled) {
113+
forceAlign();
114+
}
115+
}, [disabled]);
116+
110117
// Listen for window resize
111118
const winResizeRef = React.useRef<{ remove: Function }>(null);
112119
React.useEffect(() => {

tests/element.test.js

Lines changed: 47 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -4,46 +4,52 @@ import { mount } from 'enzyme';
44
import Align from '../src';
55

66
describe('element align', () => {
7-
it('resize', () => {
7+
beforeEach(() => {
88
jest.useFakeTimers();
9+
});
910

10-
const align = {
11-
points: ['bc', 'tc'],
12-
};
11+
afterEach(() => {
12+
jest.useRealTimers();
13+
});
1314

14-
const onAlign = jest.fn();
15+
const align = {
16+
points: ['bc', 'tc'],
17+
};
1518

16-
class Test extends React.Component {
17-
getTarget = () => this.$target;
19+
class Test extends React.Component {
20+
getTarget = () => this.$target;
1821

19-
targetRef = ele => {
20-
this.$target = ele;
21-
};
22+
targetRef = ele => {
23+
this.$target = ele;
24+
};
2225

23-
render() {
24-
return (
25-
<div style={{ paddingTop: 100 }}>
26-
<div ref={this.targetRef} style={{ display: 'inline-block', width: 50, height: 50 }}>
27-
target
28-
</div>
29-
<Align target={this.getTarget} align={align} onAlign={onAlign} {...this.props}>
30-
<div
31-
id="ele_src"
32-
style={{
33-
position: 'absolute',
34-
width: 50,
35-
height: 80,
36-
}}
37-
>
38-
source
39-
</div>
40-
</Align>
26+
render() {
27+
return (
28+
<div style={{ paddingTop: 100 }}>
29+
<div ref={this.targetRef} style={{ display: 'inline-block', width: 50, height: 50 }}>
30+
target
4131
</div>
42-
);
43-
}
32+
<Align target={this.getTarget} align={align} {...this.props}>
33+
<div
34+
id="ele_src"
35+
style={{
36+
position: 'absolute',
37+
width: 50,
38+
height: 80,
39+
}}
40+
>
41+
source
42+
</div>
43+
</Align>
44+
</div>
45+
);
4446
}
47+
}
48+
49+
it('resize', () => {
50+
const onAlign = jest.fn();
4551

46-
const wrapper = mount(<Test monitorWindowResize />);
52+
const wrapper = mount(<Test monitorWindowResize onAlign={onAlign} />);
4753
expect(onAlign).toHaveBeenCalled();
4854

4955
// Window resize
@@ -62,8 +68,17 @@ describe('element align', () => {
6268
// Remove should not crash
6369
wrapper.setProps({ monitorWindowResize: true });
6470
wrapper.unmount();
71+
});
6572

66-
jest.useRealTimers();
73+
it('disabled should trigger align', () => {
74+
const onAlign = jest.fn();
75+
76+
const wrapper = mount(<Test monitorWindowResize onAlign={onAlign} disabled />);
77+
expect(onAlign).not.toHaveBeenCalled();
78+
79+
wrapper.setProps({ disabled: false });
80+
jest.runAllTimers();
81+
expect(onAlign).toHaveBeenCalled();
6782
});
6883
});
6984
/* eslint-enable */

0 commit comments

Comments
 (0)