Skip to content
This repository was archived by the owner on Apr 14, 2020. It is now read-only.

Commit b7bcc60

Browse files
itsdougesitsdouges
committed
fix(baba): removes baba controlling opacity and pushes it into appropriate animations
1 parent c29a088 commit b7bcc60

5 files changed

Lines changed: 28 additions & 139 deletions

File tree

‎packages/yubaba/src/Baba/__snapshots__/test.tsx.snap‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,7 @@ Array [
2525
"render": undefined,
2626
},
2727
"origin": Object {
28-
"element": <div
29-
style="opacity: 1;"
30-
/>,
28+
"element": <div />,
3129
"elementBoundingBox": Object {
3230
"location": Object {
3331
"left": 0,
@@ -76,9 +74,7 @@ Array [
7674
"render": undefined,
7775
},
7876
"origin": Object {
79-
"element": <div
80-
style="opacity: 1;"
81-
/>,
77+
"element": <div />,
8278
"elementBoundingBox": Object {
8379
"location": Object {
8480
"left": 0,

‎packages/yubaba/src/Baba/index.tsx‎

Lines changed: 2 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,6 @@ export interface ChildProps {
3939
}
4040

4141
export interface State {
42-
shown: boolean;
4342
childProps: ChildProps;
4443
}
4544

@@ -87,7 +86,6 @@ export default class Baba extends React.PureComponent<BabaProps, State> {
8786
};
8887

8988
state: State = {
90-
shown: false,
9189
childProps: {},
9290
};
9391

@@ -168,10 +166,6 @@ export default class Baba extends React.PureComponent<BabaProps, State> {
168166
showSelfAndNotifyManager() {
169167
const { context, name } = this.props;
170168

171-
this.setState({
172-
shown: true,
173-
});
174-
175169
// If a VisibilityManager is a parent up the tree context will be available.
176170
// Notify them that we're finished getting ready.
177171
if (context) {
@@ -438,11 +432,6 @@ If it's an image, try and have the image loaded before mounting, or set a static
438432
Promise.resolve()
439433
)
440434
.then(() => {
441-
// We're finished all the transitions! Show the child element.
442-
this.setState({
443-
shown: true,
444-
});
445-
446435
// If a VisibilityManager is a parent somewhere, notify them that we're finished animating.
447436
if (context) {
448437
context.onFinish({ name });
@@ -487,7 +476,7 @@ If it's an image, try and have the image loaded before mounting, or set a static
487476
};
488477

489478
render() {
490-
const { childProps, shown } = this.state;
479+
const { childProps } = this.state;
491480
const { children } = this.props;
492481

493482
return (
@@ -497,10 +486,7 @@ If it's an image, try and have the image loaded before mounting, or set a static
497486
receiveRenderChildren={this.setReactNode}
498487
receiveRef={this.setRef}
499488
receiveFocalTargetRef={this.setTargetRef}
500-
style={{
501-
opacity: shown ? 1 : 0,
502-
...childProps.style,
503-
}}
489+
style={childProps.style}
504490
className={childProps.className}
505491
>
506492
{typeof children === 'function' ? children : React.Children.only(children)}

‎packages/yubaba/src/Baba/test.tsx‎

Lines changed: 0 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -138,117 +138,4 @@ describe('<Baba />', () => {
138138

139139
expect(callback.mock.calls[0][0].destination.elementBoundingBox).toMatchSnapshot();
140140
});
141-
142-
it('should make children visible inside first baba element before animating has been triggered', () => {
143-
const Animation = utils.createTestAnimation();
144-
145-
const wrapper = mount(
146-
<Baba name="anim-cc">
147-
<Animation>{props => <div {...props} />}</Animation>
148-
</Baba>
149-
);
150-
151-
expect(wrapper.find('div')).toHaveProp('style', { opacity: 1 });
152-
});
153-
154-
it('should hide children inside target baba element when animating has been triggered', () => {
155-
const Animation = utils.createTestAnimation();
156-
const wrapper = mount(
157-
<utils.BabaUnderTest
158-
from={
159-
<Baba name="anim-dd">
160-
<Animation>{props => <div {...props} />}</Animation>
161-
</Baba>
162-
}
163-
to={<Baba name="anim-dd">{props => <div {...props} />}</Baba>}
164-
start={false}
165-
/>
166-
);
167-
168-
wrapper.setProps({
169-
start: true,
170-
});
171-
wrapper.update();
172-
173-
expect(wrapper.find('div')).toHaveProp('style', { opacity: 0 });
174-
});
175-
176-
it('should show children when when flipping back to an already mounted baba', () => {
177-
const wrapper = mount(
178-
<utils.BabaUnderTest
179-
from={start => (
180-
<Baba name="flip-back-ee" in={!start}>
181-
{props => <div {...props} />}
182-
</Baba>
183-
)}
184-
to={<Baba name="flip-back-ee">{props => <div {...props} />}</Baba>}
185-
start
186-
/>
187-
);
188-
189-
wrapper.setProps({
190-
start: false,
191-
});
192-
wrapper.update();
193-
194-
expect(wrapper.find('div')).toHaveProp('style', { opacity: 1 });
195-
});
196-
197-
it('should keep showing baba elements that have no matching pair when flipping in prop', () => {
198-
const Animation = utils.createTestAnimation();
199-
const wrapper = mount(
200-
<utils.BabaUnderTest
201-
from={start => (
202-
<Baba name="keep-showing-aa" in={!start}>
203-
<Animation>{props => <div {...props} />}</Animation>
204-
</Baba>
205-
)}
206-
to={
207-
<Baba name="sdadsdad">
208-
{props => (
209-
<Animation>
210-
<span {...props} />
211-
</Animation>
212-
)}
213-
</Baba>
214-
}
215-
start={false}
216-
/>
217-
);
218-
219-
wrapper.setProps({
220-
start: true,
221-
});
222-
wrapper.update();
223-
224-
expect(wrapper.find('div')).toHaveProp('style', { opacity: 1 });
225-
});
226-
227-
it('should show children inside target baba element when animating has completed', async () => {
228-
const Animation = utils.createTestAnimation();
229-
const deferred = defer();
230-
const wrapper = mount(
231-
<utils.BabaUnderTest
232-
from={
233-
<Baba name="anim-pp">
234-
<Animation>{props => <div {...props} />}</Animation>
235-
</Baba>
236-
}
237-
to={
238-
<Baba name="anim-pp" onFinish={deferred.resolve}>
239-
{props => <div {...props} />}
240-
</Baba>
241-
}
242-
start={false}
243-
/>
244-
);
245-
246-
wrapper.setProps({
247-
start: true,
248-
});
249-
await deferred.promise;
250-
wrapper.update();
251-
252-
expect(wrapper.find('div')).toHaveProp('style', { opacity: 1 });
253-
});
254141
});

‎packages/yubaba/src/animations/CrossFadeMove/index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@ export default class CrossFadeMove extends React.Component<FadeMoveProps & MoveP
66
render() {
77
const { children, ...props } = this.props;
88
return (
9-
<Move {...props}>
10-
<FadeMove {...props}>{children}</FadeMove>
11-
</Move>
9+
<FadeMove {...props}>
10+
<Move {...props}>{children}</Move>
11+
</FadeMove>
1212
);
1313
}
1414
}

‎packages/yubaba/src/animations/FadeMove/index.tsx‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,8 +86,16 @@ export default class FadeMove extends React.Component<FadeMoveProps> {
8686
});
8787
};
8888

89-
beforeAnimate: AnimationCallback = (data, onFinish) => {
89+
beforeAnimate: AnimationCallback = (data, onFinish, setChildProps) => {
90+
setChildProps({
91+
style: prevStyle => ({
92+
...prevStyle,
93+
opacity: 0,
94+
}),
95+
});
96+
9097
onFinish();
98+
9199
return this.renderAnimation(data);
92100
};
93101

@@ -96,6 +104,17 @@ export default class FadeMove extends React.Component<FadeMoveProps> {
96104
return this.renderAnimation(data, { moveToTarget: true });
97105
};
98106

107+
afterAnimate: AnimationCallback = (_, onFinish, setChildProps) => {
108+
setChildProps({
109+
style: prevStyle => ({
110+
...prevStyle,
111+
opacity: 1,
112+
}),
113+
});
114+
115+
onFinish();
116+
};
117+
99118
render() {
100119
const { children } = this.props;
101120

@@ -106,6 +125,7 @@ export default class FadeMove extends React.Component<FadeMoveProps> {
106125
payload: {
107126
beforeAnimate: this.beforeAnimate,
108127
animate: this.animate,
128+
afterAnimate: this.afterAnimate,
109129
},
110130
}}
111131
>

0 commit comments

Comments
 (0)