Skip to content

Commit 78a4cf5

Browse files
committed
refactor incorporator
1 parent 13e7ad6 commit 78a4cf5

File tree

3 files changed

+68
-90
lines changed

3 files changed

+68
-90
lines changed

src/Incorporator.ts

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import {PureComponent, createElement} from 'react';
2+
import {Scope} from './scope';
3+
4+
type Props = {
5+
targetProps: any;
6+
targetRef: any;
7+
target: any;
8+
scope: Scope;
9+
};
10+
11+
type State = {
12+
flip: boolean;
13+
};
14+
15+
export default class Incorporator extends PureComponent<Props, State> {
16+
constructor(props: Props) {
17+
super(props);
18+
this.state = {flip: false};
19+
this.selector = props.targetProps.sel;
20+
}
21+
22+
private selector: string | symbol;
23+
private unsubscribe: any;
24+
25+
public componentDidMount() {
26+
this.unsubscribe = this.props.scope.subscribe(this.selector, () => {
27+
this.setState((prev: any) => ({flip: !prev.flip}));
28+
});
29+
}
30+
31+
private incorporateHandlers<P>(props: P, scope: Scope): P {
32+
const handlers = scope.getSelectorHandlers(this.selector);
33+
for (const evType of Object.keys(handlers)) {
34+
const onFoo = `on${evType[0].toUpperCase()}${evType.slice(1)}`;
35+
props[onFoo] = (ev: any) => handlers[evType]._n(ev);
36+
}
37+
return props;
38+
}
39+
40+
private materializeTargetProps() {
41+
const {targetProps, targetRef, scope} = this.props;
42+
let output = {...targetProps};
43+
output = this.incorporateHandlers(output, scope);
44+
if (targetRef) {
45+
output.ref = targetRef;
46+
}
47+
delete output.sel;
48+
return output;
49+
}
50+
51+
public render() {
52+
const {target} = this.props;
53+
const targetProps = this.materializeTargetProps();
54+
if (targetProps.children) {
55+
return createElement(target, targetProps, targetProps.children);
56+
} else {
57+
return createElement(target, targetProps);
58+
}
59+
}
60+
61+
public componentWillUnmount() {
62+
this.unsubscribe();
63+
}
64+
}

src/convert.ts

Lines changed: 2 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,7 @@
1-
import {
2-
PureComponent,
3-
Component,
4-
ProviderProps,
5-
ReactNodeArray,
6-
ReactPortal,
7-
ReactElement,
8-
createElement,
9-
ComponentType,
10-
} from 'react';
1+
import {PureComponent, ReactElement, createElement, ComponentType} from 'react';
112
import {Stream, Subscription} from 'xstream';
123
import {ScopeContext} from './context';
13-
import {
14-
Sources,
15-
Drivers,
16-
MatchingDrivers,
17-
MatchingMain,
18-
setup,
19-
} from '@cycle/run';
4+
import {MatchingDrivers, MatchingMain, setup} from '@cycle/run';
205
import {ReactSource} from './ReactSource';
216
import {StreamRenderer} from './StreamRenderer';
227

src/incorporate.ts

Lines changed: 2 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,81 +1,10 @@
1-
import {
2-
PureComponent,
3-
createElement,
4-
Component,
5-
ComponentElement,
6-
ComponentClass,
7-
StatelessComponent,
8-
InputHTMLAttributes,
9-
DetailedReactHTMLElement,
10-
forwardRef,
11-
} from 'react';
1+
import {createElement, forwardRef} from 'react';
122
import {Scope} from './scope';
133
import {ScopeContext} from './context';
4+
import Incorporator from './Incorporator';
145

156
const wrapperComponents: Map<any, React.ComponentType<any>> = new Map();
167

17-
type Props = {
18-
targetProps: any;
19-
targetRef: any;
20-
target: any;
21-
scope: Scope;
22-
};
23-
24-
type State = {
25-
flip: boolean;
26-
};
27-
28-
export class Incorporator extends PureComponent<Props, State> {
29-
constructor(props: Props) {
30-
super(props);
31-
this.state = {flip: false};
32-
this.selector = props.targetProps.sel;
33-
}
34-
35-
private selector: string | symbol;
36-
private unsubscribe: any;
37-
38-
public componentDidMount() {
39-
this.unsubscribe = this.props.scope.subscribe(this.selector, () => {
40-
this.setState((prev: any) => ({flip: !prev.flip}));
41-
});
42-
}
43-
44-
private incorporateHandlers<P>(props: P, scope: Scope): P {
45-
const handlers = scope.getSelectorHandlers(this.selector);
46-
for (const evType of Object.keys(handlers)) {
47-
const onFoo = `on${evType[0].toUpperCase()}${evType.slice(1)}`;
48-
props[onFoo] = (ev: any) => handlers[evType]._n(ev);
49-
}
50-
return props;
51-
}
52-
53-
private materializeTargetProps() {
54-
const {targetProps, targetRef, scope} = this.props;
55-
let output = {...targetProps};
56-
output = this.incorporateHandlers(output, scope);
57-
if (targetRef) {
58-
output.ref = targetRef;
59-
}
60-
delete output.sel;
61-
return output;
62-
}
63-
64-
public render() {
65-
const {target} = this.props;
66-
const targetProps = this.materializeTargetProps();
67-
if (targetProps.children) {
68-
return createElement(target, targetProps, targetProps.children);
69-
} else {
70-
return createElement(target, targetProps);
71-
}
72-
}
73-
74-
public componentWillUnmount() {
75-
this.unsubscribe();
76-
}
77-
}
78-
798
export function incorporate(type: any) {
809
if (!wrapperComponents.has(type)) {
8110
wrapperComponents.set(

0 commit comments

Comments
 (0)