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

Commit 5c2bbfe

Browse files
cvlecvle
committed
Use reassemble
1 parent 5e37a87 commit 5c2bbfe

18 files changed

+285
-164
lines changed

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,6 @@
9999
"webpack": "^2.2.0-rc.1"
100100
},
101101
"dependencies": {
102-
"react-assemble": "file:///home/vagrant/projects/typescript/react-assemble"
102+
"reassemble": "file:///home/vagrant/projects/typescript/reassemble"
103103
}
104104
}

‎src/composables/mergeWithBaseStyle.spec.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
import * as React from "react";
1010
import { assert } from "chai";
1111
import { shallow } from "enzyme";
12-
import { assemble } from "react-assemble";
12+
import { assemble } from "reassemble";
1313

1414
import { mergeWithBaseStyle } from "./mergeWithBaseStyle";
1515
import { Component } from "../../test/component";

‎src/composables/mergeWithBaseStyle.tsx

+11-5
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,19 @@
66
* of the MIT license. See the LICENSE file for details.
77
*/
88

9-
import { combine, withProps } from "react-assemble";
9+
import { combine, withProps } from "reassemble";
10+
import { HTMLAttributes } from "react";
11+
12+
import { WithTransitionStateProps } from "./withTransitionState";
1013

1114
const mergeClasses = (...classes: string[]) => classes.filter((s) => s).join(" ");
1215

16+
type StyleProps = Pick<HTMLAttributes<any>, "style" | "className">;
17+
1318
export const mergeWithBaseStyle = combine(
14-
withProps<any, any>(({ transitionState, style, className }: any) => ({
15-
style: { ...style, ...transitionState.style },
16-
className: mergeClasses(className, transitionState.className),
17-
})),
19+
withProps<StyleProps & WithTransitionStateProps, StyleProps>(
20+
({ transitionState, style, className }) => ({
21+
style: { ...style, ...transitionState.style },
22+
className: mergeClasses(className, transitionState.className),
23+
})),
1824
);

‎src/composables/preventPhantomEvents.spec.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { StatelessComponent } from "react";
1111
import { assert } from "chai";
1212
import { mount, ReactWrapper } from "enzyme";
1313
import { spy, SinonSpy } from "sinon";
14-
import { assemble } from "react-assemble";
14+
import { assemble } from "reassemble";
1515

1616
import { preventPhantomEvents } from "./preventPhantomEvents";
1717
const Component: StatelessComponent<any> = ({onTransitionEnd}) => <span {...{ onTransitionEnd }} />;

‎src/composables/preventPhantomEvents.tsx

+56-40
Original file line numberDiff line numberDiff line change
@@ -6,51 +6,67 @@
66
* of the MIT license. See the LICENSE file for details.
77
*/
88

9-
import { TransitionEvent } from "react";
10-
import { combine, withHandlers, onWillReceiveProps, onDidUpdate, isolate, integrate } from "react-assemble";
9+
import { EventHandler, TransitionEvent } from "react";
10+
import { combine, withHandlers, onWillReceiveProps, onDidUpdate, isolate, integrate } from "reassemble";
11+
12+
import { CSSTransitionProps } from "../csstransition";
13+
14+
type PropsOut = {
15+
requestTimeUpdate?: () => void;
16+
handleTimeUpdateRequest?: () => void;
17+
onTransitionEnd?: EventHandler<TransitionEvent>;
18+
};
19+
20+
type PropsUnion = CSSTransitionProps & PropsOut;
1121

1222
export const preventPhantomEvents = combine(
1323
isolate(
14-
withHandlers<any, any>(() => {
15-
let lastTriggerTime: any;
16-
let lastTriggerTimePerformance: any;
17-
let timeUpdateRequested = false;
18-
return {
19-
requestTimeUpdate: () => () => {
20-
timeUpdateRequested = true;
21-
},
22-
handleTimeUpdateRequest: () => () => {
23-
if (timeUpdateRequested) {
24-
lastTriggerTime = Date.now();
25-
if (typeof performance !== "undefined") {
26-
lastTriggerTimePerformance = performance.now();
24+
withHandlers<PropsUnion, PropsOut>(
25+
() => {
26+
let lastTriggerTime: any;
27+
let lastTriggerTimePerformance: any;
28+
let timeUpdateRequested = false;
29+
return {
30+
requestTimeUpdate: () => () => {
31+
timeUpdateRequested = true;
32+
},
33+
handleTimeUpdateRequest: () => () => {
34+
if (timeUpdateRequested) {
35+
lastTriggerTime = Date.now();
36+
if (typeof performance !== "undefined") {
37+
lastTriggerTimePerformance = performance.now();
38+
}
39+
timeUpdateRequested = false;
2740
}
28-
timeUpdateRequested = false;
29-
}
30-
},
31-
onTransitionEnd: ({onTransitionEnd}: any) => (e: TransitionEvent) => {
32-
if (!onTransitionEnd) { return; }
41+
},
42+
onTransitionEnd: ({onTransitionEnd}) => (e: TransitionEvent) => {
43+
if (!onTransitionEnd) { return; }
3344

34-
// Skip transitionEnd that comes <= 15ms after (reversing) a transition.
35-
// In most cases this came from the previous transition.
36-
let compareWith = lastTriggerTime;
37-
if ((e.timeStamp as any) < 1000000000000 && lastTriggerTimePerformance) {
38-
compareWith = lastTriggerTimePerformance;
39-
}
40-
if ((e.timeStamp as any) - compareWith <= 15) {
41-
return;
42-
}
45+
// Skip transitionEnd that comes <= 15ms after (reversing) a transition.
46+
// In most cases this came from the previous transition.
47+
let compareWith = lastTriggerTime;
48+
if ((e.timeStamp as any) < 1000000000000 && lastTriggerTimePerformance) {
49+
compareWith = lastTriggerTimePerformance;
50+
}
51+
if ((e.timeStamp as any) - compareWith <= 15) {
52+
return;
53+
}
4354

44-
onTransitionEnd(e);
45-
},
46-
};
47-
}),
48-
onWillReceiveProps<any>(({active}, {active: nextActive, requestTimeUpdate}) => {
49-
if (active !== nextActive) {
50-
requestTimeUpdate();
51-
}
52-
}),
53-
onDidUpdate<any>(({handleTimeUpdateRequest}) => handleTimeUpdateRequest()),
54-
integrate<any>("onTransitionEnd"),
55+
onTransitionEnd(e);
56+
},
57+
};
58+
}),
59+
onWillReceiveProps<PropsUnion>(
60+
({active}, {active: nextActive, requestTimeUpdate}) => {
61+
if (active !== nextActive) {
62+
requestTimeUpdate();
63+
}
64+
}),
65+
onDidUpdate<PropsUnion>(
66+
({handleTimeUpdateRequest}) => handleTimeUpdateRequest(),
67+
),
68+
integrate<keyof PropsUnion>(
69+
"onTransitionEnd",
70+
),
5571
),
5672
);

‎src/composables/withDOMNodeCallback.spec.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
import * as React from "react";
1010
import { assert } from "chai";
1111
import { mount } from "enzyme";
12-
import { assemble } from "react-assemble";
12+
import { assemble } from "reassemble";
1313

1414
import { withDOMNodeCallback } from "./withDOMNodeCallback";
1515

‎src/composables/withDOMNodeCallback.tsx

+9-2
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,17 @@
66
* of the MIT license. See the LICENSE file for details.
77
*/
88

9-
import { withHandlers } from "react-assemble";
9+
import { withHandlers } from "reassemble";
10+
11+
import { CSSTransitionInnerProps } from "../csstransition";
12+
13+
export type WithDOMNodeCallbackProps = {
14+
onDOMNodeRef: CSSTransitionInnerProps["onDOMNodeRef"],
15+
getDOMNode: () => Element,
16+
};
1017

1118
export const withDOMNodeCallback =
12-
withHandlers<any, any>(() => {
19+
withHandlers<{}, WithDOMNodeCallbackProps>(() => {
1320
let ref: Element;
1421
return {
1522
onDOMNodeRef: () => (e: Element) => {

‎src/composables/withTransitionInfo.spec.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
import * as React from "react";
1010
import { assert } from "chai";
1111
import { shallow, mount } from "enzyme";
12-
import { assemble } from "react-assemble";
12+
import { assemble } from "reassemble";
1313

1414
import { withTransitionInfo } from "./withTransitionInfo";
1515
import { Component } from "../../test/component";

‎src/composables/withTransitionInfo.ts

+54-30
Original file line numberDiff line numberDiff line change
@@ -6,43 +6,67 @@
66
* of the MIT license. See the LICENSE file for details.
77
*/
88

9-
import { withProps, withHandlers, isolate, integrate } from "react-assemble";
9+
import { withProps, withHandlers, isolate, integrate } from "reassemble";
1010

11+
import { CSSTransitionProps } from "../csstransition";
12+
import { WithDOMNodeCallbackProps } from "./withDOMNodeCallback";
13+
import { WithTransitionStateProps } from "./withTransitionState";
1114
import { parseTransition, TransitionEntry } from "../utils/parseTransition";
1215
import { parseComputedTransition } from "../utils/parseComputedTransition";
1316
import { memoize } from "../utils/memoize";
1417

18+
export type WithTransitionInfoProps = {
19+
transitionInfo?: {
20+
firstPropertyDelay: number,
21+
firstProperty: string,
22+
lastProperty: string,
23+
},
24+
};
25+
26+
type PropsOut = WithTransitionInfoProps & {
27+
parseComputedTransitionMemoized?: typeof parseComputedTransition,
28+
};
29+
30+
type PropsUnion = CSSTransitionProps
31+
& WithDOMNodeCallbackProps
32+
& WithTransitionStateProps
33+
& PropsOut;
34+
1535
export const withTransitionInfo =
1636
isolate(
17-
withHandlers<any, any>(() => {
18-
const memoized = memoize(
19-
(node: Element) => parseComputedTransition(getComputedStyle(node)),
20-
(node: Element) => node.className,
21-
);
22-
return {
23-
parseComputedTransitionMemoized: () => memoized,
24-
};
25-
}),
26-
withProps<any, any>(({style, className, transitionState, getDOMNode, parseComputedTransitionMemoized}: any) => {
27-
if (transitionState.inTransition) {
28-
let parsed: [TransitionEntry, TransitionEntry];
29-
if (style && style.transition) {
30-
parsed = parseTransition(style.transition);
31-
} else {
32-
const node = getDOMNode();
33-
node.className = className;
34-
parsed = parseComputedTransitionMemoized(node);
35-
}
36-
const [{delay: firstPropertyDelay, property: firstProperty}, {property: lastProperty}] = parsed;
37+
withHandlers<PropsUnion, PropsOut>(
38+
() => {
39+
const memoized = memoize(
40+
(node: Element) => parseComputedTransition(getComputedStyle(node)),
41+
(node: Element) => node.className,
42+
);
3743
return {
38-
transitionInfo: {
39-
firstPropertyDelay,
40-
firstProperty,
41-
lastProperty,
42-
},
44+
parseComputedTransitionMemoized: () => memoized,
4345
};
44-
}
45-
return { transitionInfo: {} };
46-
}),
47-
integrate<any>("transitionInfo"),
46+
}),
47+
withProps<PropsUnion, PropsOut>(
48+
({style, className, transitionState, getDOMNode, parseComputedTransitionMemoized}) => {
49+
if (transitionState.inTransition) {
50+
let parsed: [TransitionEntry, TransitionEntry];
51+
if (style && style.transition) {
52+
parsed = parseTransition(style.transition);
53+
} else {
54+
const node = getDOMNode();
55+
node.className = className;
56+
parsed = parseComputedTransitionMemoized(node);
57+
}
58+
const [{delay: firstPropertyDelay, property: firstProperty}, {property: lastProperty}] = parsed;
59+
return {
60+
transitionInfo: {
61+
firstPropertyDelay,
62+
firstProperty,
63+
lastProperty,
64+
},
65+
};
66+
}
67+
return { transitionInfo: {} };
68+
}),
69+
integrate<keyof WithTransitionInfoProps>(
70+
"transitionInfo",
71+
),
4872
);

‎src/composables/withTransitionObserver.spec.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import * as React from "react";
1010
import { assert } from "chai";
1111
import { shallow, ShallowWrapper } from "enzyme";
1212
import { spy } from "sinon";
13-
import { assemble } from "react-assemble";
13+
import { assemble } from "reassemble";
1414

1515
import { withTransitionObserver } from "./withTransitionObserver";
1616
import { Component } from "../../test/component";

‎src/composables/withTransitionObserver.tsx

+21-5
Original file line numberDiff line numberDiff line change
@@ -6,20 +6,36 @@
66
* of the MIT license. See the LICENSE file for details.
77
*/
88

9-
import { TransitionEvent } from "react";
10-
import { withHandlers } from "react-assemble";
9+
import { EventHandler, TransitionEvent } from "react";
10+
import { withHandlers } from "reassemble";
1111

12+
import { CSSTransitionInnerProps } from "../csstransition";
13+
import { WithTransitionStateProps } from "./withTransitionState";
14+
import { WithTransitionInfoProps } from "./withTransitionInfo";
1215
import matchTransitionProperty from "../utils/matchTransitionProperty";
1316

17+
export type WithTransitionObserverProps = {
18+
onTransitionStart: EventHandler<TransitionEvent>,
19+
};
20+
21+
type PropsOut = WithTransitionObserverProps & {
22+
onTransitionEnd: EventHandler<TransitionEvent>,
23+
};
24+
25+
type PropsUnion = CSSTransitionInnerProps
26+
& WithTransitionStateProps
27+
& WithTransitionInfoProps
28+
& PropsOut;
29+
1430
export const withTransitionObserver =
15-
withHandlers<any, any>({
31+
withHandlers<PropsUnion, PropsOut>({
1632
onTransitionStart: (
1733
{
1834
transitionInfo: { firstProperty },
1935
transitionState: { inTransition },
2036
onTransitionStart,
2137
onTransitionBegin,
22-
}: any,
38+
},
2339
) => (e: TransitionEvent) => {
2440
if (onTransitionStart) { onTransitionStart(e); }
2541
if (!inTransition || e.target !== e.currentTarget ||
@@ -34,7 +50,7 @@ export const withTransitionObserver =
3450
transitionState: { inTransition },
3551
onTransitionEnd,
3652
onTransitionComplete,
37-
}: any,
53+
},
3854
) => (e: TransitionEvent) => {
3955
if (onTransitionEnd) { onTransitionEnd(e); }
4056
if (!inTransition || e.target !== e.currentTarget ||

‎src/composables/withTransitionState.spec.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import * as React from "react";
1010
import { assert } from "chai";
1111
import { ShallowWrapper, shallow } from "enzyme";
1212
import { SinonSpy, spy } from "sinon";
13-
import { assemble } from "react-assemble";
13+
import { assemble } from "reassemble";
1414

1515
import { withTransitionState } from "./withTransitionState";
1616
import { StateID, ActionID, Reducer, TransitionState } from "../reducer";
@@ -36,7 +36,7 @@ describe("withTransitionState.tsx", () => {
3636
let wrapper: ShallowWrapper<any, any>;
3737

3838
describe("constructor", () => {
39-
const state = { id: 1, style: {} };
39+
const state: TransitionState = { id: 1, style: {} };
4040
let reducer: SinonSpy;
4141
before(() => {
4242
reducer = spy(() => ({ state }));

0 commit comments

Comments
 (0)