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

Commit fd8f0c4

Browse files
cvlecvle
committed
Fully implement transitionAppear
1 parent 11bf320 commit fd8f0c4

File tree

7 files changed

+203
-51
lines changed

7 files changed

+203
-51
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-css-transition",
3-
"version": "0.4.0-beta.1",
3+
"version": "0.5.0-beta",
44
"description": "CSS Transition Component for React",
55
"homepage": "https://github.com/wikiwi/react-css-transition",
66
"repository": {

‎src/csstransition.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -75,9 +75,10 @@ export class CSSTransition extends Component<CSSTransitionProps, CSSTransitionSt
7575
onTransitionComplete: _c,
7676
defaultStyle: _d,
7777
activeStyle: _e,
78-
enterStyle: _f,
79-
leaveStyle: _g,
80-
transitionDelay: _l,
78+
appearStyle: _f,
79+
enterStyle: _g,
80+
leaveStyle: _h,
81+
transitionDelay: _i,
8182
...rest,
8283
} = this.props;
8384

‎src/csstransitionstate.spec.ts

Lines changed: 111 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -12,23 +12,37 @@ import { spy } from "sinon";
1212
import { CSSTransitionProps } from "./csstransition";
1313
import { transit } from "./transit";
1414
import {
15-
reduce, StateID, StateIDList, ActionID, CSSTransitionState,
16-
initDefaultState, initActiveState,
15+
getAppearStyle, reduce, StateID, StateIDList, ActionID, CSSTransitionState,
16+
defaultInitState, activeInitState, appearInitState,
1717
defaultState, activeState,
18-
enterPendingState, leavePendingState,
19-
enterTriggeredState, leaveTriggeredState,
20-
enterStartedState, leaveStartedState,
18+
appearPendingState, enterPendingState, leavePendingState,
19+
appearTriggeredState, enterTriggeredState, leaveTriggeredState,
20+
appearStartedState, enterStartedState, leaveStartedState,
2121
} from "./csstransitionstate";
2222

2323
describe("csstransitionstate.ts", () => {
24+
describe("getAppearStyle()", () => {
25+
it("should return appearStyle", () => {
26+
const props: any = { appearStyle: {} };
27+
assert.strictEqual(getAppearStyle(props), props.appearStyle);
28+
});
29+
it("should fallback to enterStyle", () => {
30+
const props: any = { enterStyle: {} };
31+
assert.strictEqual(getAppearStyle(props), props.enterStyle);
32+
});
33+
});
2434
describe("states", () => {
2535
describe(
26-
"initDefaultState",
27-
testState(StateID.DefaultInit, "defaultStyle", (props) => initDefaultState(props)),
36+
"defaultInitState",
37+
testState(StateID.DefaultInit, "defaultStyle", (props) => defaultInitState(props)),
38+
);
39+
describe(
40+
"activeInitState",
41+
testState(StateID.ActiveInit, "activeStyle", (props) => activeInitState(props)),
2842
);
2943
describe(
30-
"initActiveState",
31-
testState(StateID.ActiveInit, "activeStyle", (props) => initActiveState(props)),
44+
"appearInitState",
45+
testState(StateID.AppearInit, "appearStyle", (props) => appearInitState(props)),
3246
);
3347
describe(
3448
"defaultState",
@@ -38,6 +52,10 @@ describe("csstransitionstate.ts", () => {
3852
"activeState",
3953
testState(StateID.Active, "activeStyle", (props) => activeState(props)),
4054
);
55+
describe(
56+
"appearPendingState",
57+
testState(StateID.AppearPending, "defaultStyle", (props) => appearPendingState(props)),
58+
);
4159
describe(
4260
"enterPendingState",
4361
testState(StateID.EnterPending, "defaultStyle", (props) => enterPendingState(props)),
@@ -46,6 +64,10 @@ describe("csstransitionstate.ts", () => {
4664
"leavePendingState",
4765
testState(StateID.LeavePending, "activeStyle", (props) => leavePendingState(props)),
4866
);
67+
describe(
68+
"appearTriggeredState",
69+
testState(StateID.AppearTriggered, "appearStyle", (props) => appearTriggeredState(props)),
70+
);
4971
describe(
5072
"enterTriggeredState",
5173
testState(StateID.EnterTriggered, "enterStyle", (props) => enterTriggeredState(props)),
@@ -54,6 +76,10 @@ describe("csstransitionstate.ts", () => {
5476
"leaveTriggeredState",
5577
testState(StateID.LeaveTriggered, "leaveStyle", (props) => leaveTriggeredState(props)),
5678
);
79+
describe(
80+
"appearStartedState",
81+
testState(StateID.AppearStarted, "appearStyle", (props) => appearStartedState(props)),
82+
);
5783
describe(
5884
"enterStartedState",
5985
testState(StateID.EnterStarted, "enterStyle", (props) => enterStartedState(props)),
@@ -71,7 +97,7 @@ describe("csstransitionstate.ts", () => {
7197
assert.throw(() => reduce({}, actionID, {}));
7298
});
7399
it("should become DefaultInit", () => {
74-
const {state, pending} = reduce(undefined, actionID, {});
100+
const {state, pending} = reduce(undefined, actionID, { active: false });
75101
assert.isUndefined(pending);
76102
assert.strictEqual(state.id, StateID.DefaultInit);
77103
});
@@ -80,52 +106,73 @@ describe("csstransitionstate.ts", () => {
80106
assert.isUndefined(pending);
81107
assert.strictEqual(state.id, StateID.ActiveInit);
82108
});
109+
it("should become AppearInit", () => {
110+
const {state, pending} = reduce(undefined, actionID, { active: true, transitionAppear: true });
111+
assert.isUndefined(pending);
112+
assert.strictEqual(state.id, StateID.AppearInit);
113+
});
83114
});
84115
describe("TransitionInit", () => {
85116
const actionID = ActionID.TransitionInit;
117+
const validOrigin = [
118+
StateID.Active, StateID.ActiveInit, StateID.Default, StateID.DefaultInit, StateID.AppearInit,
119+
];
86120

87121
it("should fail on invalid state transitions", () => {
88122
StateIDList
89-
.filter((id) => [StateID.Active, StateID.ActiveInit, StateID.Default, StateID.DefaultInit].indexOf(id) < 0)
123+
.filter((id) => validOrigin.indexOf(id) < 0)
90124
.forEach((id) => assert.throw(() => reduce({ id }, actionID, {})));
91125
});
92-
it("should transit to active pending transition state", () => {
126+
it("should transit to enter pending state", () => {
93127
[StateID.Default, StateID.DefaultInit].forEach((id) => {
94-
const {state, pending} = reduce({ id }, actionID, {});
128+
const {state, pending} = reduce({ id }, actionID, { active: true });
95129
assert.strictEqual(pending, ActionID.TransitionTrigger);
96130
assert.strictEqual(state.id, StateID.EnterPending);
97131
});
98132
});
99-
it("should transit to default pending transition state", () => {
133+
it("should transit to leave pending state", () => {
100134
[StateID.Active, StateID.ActiveInit].forEach((id) => {
101-
const {state, pending} = reduce({ id }, actionID, {});
135+
const {state, pending} = reduce({ id }, actionID, { active: false });
102136
assert.strictEqual(pending, ActionID.TransitionTrigger);
103137
assert.strictEqual(state.id, StateID.LeavePending);
104138
});
105139
});
140+
it("should transit to appear pending state", () => {
141+
const id = StateID.AppearInit;
142+
const {state, pending} = reduce({ id }, actionID, { active: true });
143+
assert.strictEqual(pending, ActionID.TransitionTrigger);
144+
assert.strictEqual(state.id, StateID.AppearPending);
145+
});
106146
});
107147
describe("TransitionStart", () => {
108148
const actionID = ActionID.TransitionStart;
109149

110150
it("should not fail on invalid state transitions", () => {
111151
StateIDList
112-
.filter((id) => [StateID.EnterTriggered, StateID.LeaveTriggered].indexOf(id) < 0)
152+
.filter((id) => [StateID.EnterTriggered, StateID.LeaveTriggered, StateID.AppearTriggered].indexOf(id) < 0)
113153
.forEach((id) => assert.isNull(reduce({ id }, actionID, {})));
114154
});
115-
it("should transit to active started transition state", () => {
116-
const {state, pending} = reduce({ id: StateID.EnterTriggered }, actionID, {});
155+
it("should transit to enter started state", () => {
156+
const {state, pending} = reduce({ id: StateID.EnterTriggered }, actionID, { active: true });
117157
assert.isUndefined(pending);
118158
assert.strictEqual(state.id, StateID.EnterStarted);
119159
});
120-
it("should transit to active started transition state", () => {
121-
const {state, pending} = reduce({ id: StateID.LeaveTriggered }, actionID, {});
160+
it("should transit to leave started state", () => {
161+
const {state, pending} = reduce({ id: StateID.LeaveTriggered }, actionID, { active: false });
122162
assert.isUndefined(pending);
123163
assert.strictEqual(state.id, StateID.LeaveStarted);
124164
});
165+
it("should transit to appear started state", () => {
166+
const {state, pending} =
167+
reduce({ id: StateID.AppearTriggered }, actionID, { active: true });
168+
assert.isUndefined(pending);
169+
assert.strictEqual(state.id, StateID.AppearStarted);
170+
});
125171
});
126172
describe("TransitionComplete", () => {
127173
const actionID = ActionID.TransitionComplete;
128174
const validOrigin = [
175+
StateID.AppearTriggered, StateID.AppearStarted,
129176
StateID.EnterTriggered, StateID.EnterStarted,
130177
StateID.LeaveTriggered, StateID.LeaveStarted,
131178
];
@@ -136,15 +183,19 @@ describe("csstransitionstate.ts", () => {
136183
.forEach((id) => assert.throw(() => reduce({ id }, actionID, {})));
137184
});
138185
it("should transit to active state", () => {
139-
[StateID.EnterTriggered, StateID.EnterStarted].forEach((id) => {
140-
const {state, pending} = reduce({ id }, actionID, {});
186+
const origin = [
187+
StateID.AppearTriggered, StateID.AppearStarted,
188+
StateID.EnterTriggered, StateID.EnterStarted,
189+
];
190+
origin.forEach((id) => {
191+
const {state, pending} = reduce({ id }, actionID, { active: true });
141192
assert.isUndefined(pending);
142193
assert.strictEqual(state.id, StateID.Active);
143194
});
144195
});
145196
it("should transit to default state", () => {
146197
[StateID.LeaveTriggered, StateID.LeaveStarted].forEach((id) => {
147-
const {state, pending} = reduce({ id }, actionID, {});
198+
const {state, pending} = reduce({ id }, actionID, { active: false });
148199
assert.isUndefined(pending);
149200
assert.strictEqual(state.id, StateID.Default);
150201
});
@@ -160,33 +211,45 @@ describe("csstransitionstate.ts", () => {
160211
describe("TransitionTrigger", () => {
161212
const actionID = ActionID.TransitionTrigger;
162213

163-
it("should transit to active pending transition state", () => {
214+
it("should transit to enter pending state", () => {
164215
[StateID.Default, StateID.DefaultInit].forEach((id) => {
165-
const {state, pending} = reduce({ id }, actionID, {});
216+
const {state, pending} = reduce({ id }, actionID, { active: true });
166217
assert.strictEqual(pending, ActionID.TransitionTrigger);
167218
assert.strictEqual(state.id, StateID.EnterPending);
168219
});
169220
});
170-
it("should transit to default pending transition state", () => {
221+
it("should transit to leave pending state", () => {
171222
[StateID.Active, StateID.ActiveInit].forEach((id) => {
172-
const {state, pending} = reduce({ id }, actionID, {});
223+
const {state, pending} = reduce({ id }, actionID, { active: false });
173224
assert.strictEqual(pending, ActionID.TransitionTrigger);
174225
assert.strictEqual(state.id, StateID.LeavePending);
175226
});
176227
});
177-
it("should transit to active triggered state", () => {
228+
it("should transit to appear pending state", () => {
229+
const id = StateID.AppearInit;
230+
const {state, pending} = reduce({ id }, actionID, { active: true });
231+
assert.strictEqual(pending, ActionID.TransitionTrigger);
232+
assert.strictEqual(state.id, StateID.AppearPending);
233+
});
234+
it("should transit to enter triggered state", () => {
178235
const id = StateID.EnterPending;
179236
const {state, pending} = reduce({ id }, actionID, { active: true });
180237
assert.isUndefined(pending);
181238
assert.strictEqual(state.id, StateID.EnterTriggered);
182239
});
183-
it("should transit to default triggered transition state", () => {
240+
it("should transit to leave triggered state", () => {
184241
const id = StateID.LeavePending;
185242
const {state, pending} = reduce({ id }, actionID, { active: false });
186243
assert.isUndefined(pending);
187244
assert.strictEqual(state.id, StateID.LeaveTriggered);
188245
});
189-
it("should interrupt pending and triggered active transition", () => {
246+
it("should transit to appear triggered state", () => {
247+
const id = StateID.AppearPending;
248+
const {state, pending} = reduce({ id }, actionID, { active: true });
249+
assert.isUndefined(pending);
250+
assert.strictEqual(state.id, StateID.AppearTriggered);
251+
});
252+
it("should interrupt enter pending and triggered", () => {
190253
[StateID.EnterPending, StateID.EnterTriggered].forEach((id) => {
191254
const props = { active: false, onTransitionComplete: spy() };
192255
const {state, pending} = reduce({ id }, actionID, props);
@@ -195,7 +258,7 @@ describe("csstransitionstate.ts", () => {
195258
assert.isTrue(props.onTransitionComplete.calledOnce);
196259
});
197260
});
198-
it("should interrupt pending and triggered default transition", () => {
261+
it("should interrupt leave pending and triggered", () => {
199262
[StateID.LeavePending, StateID.LeaveTriggered].forEach((id) => {
200263
const props = { active: true, onTransitionComplete: spy() };
201264
const {state, pending} = reduce({ id }, actionID, props);
@@ -204,18 +267,33 @@ describe("csstransitionstate.ts", () => {
204267
assert.isTrue(props.onTransitionComplete.calledOnce);
205268
});
206269
});
207-
it("should interrupt started active transition", () => {
270+
it("should interrupt appear pending and triggered", () => {
271+
[StateID.AppearPending, StateID.AppearTriggered].forEach((id) => {
272+
const props = { active: false, onTransitionComplete: spy() };
273+
const {state, pending} = reduce({ id }, actionID, props);
274+
assert.isUndefined(pending);
275+
assert.strictEqual(state.id, StateID.Default);
276+
assert.isTrue(props.onTransitionComplete.calledOnce);
277+
});
278+
});
279+
it("should interrupt enter started", () => {
208280
const id = StateID.EnterStarted;
209281
const {state, pending} = reduce({ id }, actionID, { active: false });
210282
assert.isUndefined(pending);
211283
assert.strictEqual(state.id, StateID.LeaveTriggered);
212284
});
213-
it("should interrupt started default transition", () => {
285+
it("should interrupt leave started", () => {
214286
const id = StateID.LeaveStarted;
215287
const {state, pending} = reduce({ id }, actionID, { active: true });
216288
assert.isUndefined(pending);
217289
assert.strictEqual(state.id, StateID.EnterTriggered);
218290
});
291+
it("should interrupt appear started", () => {
292+
const id = StateID.AppearStarted;
293+
const {state, pending} = reduce({ id }, actionID, { active: true });
294+
assert.isUndefined(pending);
295+
assert.strictEqual(state.id, StateID.LeaveTriggered);
296+
});
219297
});
220298
});
221299
});

0 commit comments

Comments
 (0)