Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings
This repository was archived by the owner on Apr 8, 2020. It is now read-only.

Commit 621c01d

Browse files
committed
Handle pending state after update
1 parent cd45949 commit 621c01d

File tree

2 files changed

+23
-17
lines changed

2 files changed

+23
-17
lines changed

‎src/composables/withTransitionState.spec.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -173,7 +173,8 @@ describe("withTransitionState.tsx", () => {
173173
assert.deepEqual(wrapper.props().transitionState, pick(pendingState, "style", "className"));
174174
});
175175

176-
it("should dispatch ActionID.TransitionStart in 2nd frame", (done) => {
176+
it("should dispatch ActionID.TransitionStart after update in 2nd frame", (done) => {
177+
(wrapper.instance() as any).componentDidUpdate();
177178
runInFrame(1, () => {
178179
assert.isTrue(reducer.calledWith(pendingState.id, {
179180
kind: ActionID.TransitionStart,

‎src/composables/withTransitionState.tsx

Lines changed: 21 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,8 @@ import { CSSProperties } from "react";
22
import {
33
combine, withState, withHandlers, withProps,
44
onDidMount, onWillUnmount, onWillReceiveProps,
5-
isolate, integrate, StateUpdater,
5+
isolate, integrate, StateUpdater,onDidUpdate,
66
} from "reassemble";
7-
import * as shallowEqual from "fbjs/lib/shallowEqual";
87

98
import { CSSTransitionProps, CSSTransitionInnerProps } from "../csstransition";
109
import runInFrame from "../utils/runInFrame";
@@ -27,6 +26,7 @@ type PropsOut =
2726
actionProps?: {[P in ActionPropKeys]?: CSSTransitionProps[P]},
2827
cancelPendingIfExistent?: () => void,
2928
dispatch?: (actionID: ActionID) => void,
29+
runPending?: () => void,
3030
setTransitionState?: StateUpdater<TransitionState>,
3131
onTransitionBegin?: CSSTransitionInnerProps["onTransitionBegin"],
3232
onTransitionComplete?: CSSTransitionInnerProps["onTransitionComplete"],
@@ -51,6 +51,7 @@ export const withTransitionState = (reduce: Reducer) => combine(
5151
(initialProps) => {
5252
let stateID = reduce(StateID.EntryPoint, { kind: ActionID.New, props: initialProps }).state.id;
5353
let cancelPending: () => void = null;
54+
let pendingCallback: () => void;
5455
const cancelPendingIfExistent = () => {
5556
if (cancelPending) {
5657
cancelPending();
@@ -59,7 +60,14 @@ export const withTransitionState = (reduce: Reducer) => combine(
5960
};
6061
return {
6162
cancelPendingIfExistent: () => cancelPendingIfExistent,
62-
dispatch: ({actionProps, onTransitionComplete, setTransitionState, transitionState}) => {
63+
runPending: () => () => {
64+
const callback = pendingCallback;
65+
pendingCallback = null;
66+
if (callback) {
67+
callback();
68+
}
69+
},
70+
dispatch: ({actionProps, onTransitionComplete, setTransitionState}) => {
6371
const run = (actionID: ActionID) => {
6472
const result = reduce(stateID, { kind: actionID, props: actionProps });
6573
if (!result) { return; }
@@ -69,19 +77,12 @@ export const withTransitionState = (reduce: Reducer) => combine(
6977
const {state, pending} = result;
7078
stateID = state.id;
7179
cancelPendingIfExistent();
72-
let callback: any;
7380
if (pending) {
74-
callback = () => {
81+
pendingCallback = () => {
7582
cancelPending = runInFrame(1, () => run(pending));
7683
};
7784
}
78-
if (!shallowEqual(transitionState.style, result.state.style) ||
79-
transitionState.className !== result.state.className ||
80-
transitionState.inTransition !== result.state.inTransition) {
81-
setTransitionState(pick(state, "style", "className", "inTransition"), callback);
82-
} else if (callback) {
83-
callback();
84-
}
85+
setTransitionState(pick(state, "style", "className", "inTransition"), null);
8586
};
8687
return run;
8788
},
@@ -96,15 +97,19 @@ export const withTransitionState = (reduce: Reducer) => combine(
9697
({dispatch}) => {
9798
dispatch(ActionID.Mount);
9899
}),
99-
onWillUnmount<PropsUnion>(
100-
({cancelPendingIfExistent}) => {
101-
cancelPendingIfExistent();
102-
}),
103100
onWillReceiveProps<PropsUnion>(
104101
({active: prevActive}, {active: nextActive, dispatch}) => {
105102
if (prevActive === nextActive) { return; }
106103
dispatch(ActionID.TransitionTrigger);
107104
}),
105+
onDidUpdate<PropsUnion>(
106+
({runPending}) => {
107+
runPending();
108+
}),
109+
onWillUnmount<PropsUnion>(
110+
({cancelPendingIfExistent}) => {
111+
cancelPendingIfExistent();
112+
}),
108113
integrate<keyof PropsUnion>(
109114
"timeout", "transitionState", "onTransitionBegin", "onTransitionComplete",
110115
),

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /