-
Notifications
You must be signed in to change notification settings - Fork 663
/
posed.tsx
65 lines (55 loc) · 1.64 KB
/
posed.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
import * as React from 'react';
import { ReactElement } from 'react';
import { PoseElement, PoseParentContext } from './components/PoseElement';
import {
PoseElementProps,
PoseContextProps
} from './components/PoseElement.types';
import { PoserProps } from 'popmotion-pose';
// TODO: Something is wrong with the TypeScript React bindings here,
// I've had to typecast a component as a Component a couple times now.
const PoseElementComponent = PoseElement as React.PureComponent;
export type ComponentFactory = (
poseProps?: PoserProps
) => (props: PoseElementProps) => ReactElement<any>;
export type Posed = {
[key: string]: ComponentFactory;
};
const componentCache = new Map<string, ComponentFactory>();
const createComponentFactory = (key: string) => {
const componentFactory: ComponentFactory = (poseProps = {}) => ({
withParent = true,
...props
}) =>
!withParent || props.parentValues ? (
<PoseElementComponent
poseProps={poseProps}
elementType={key}
{...props}
/>
) : (
<PoseParentContext.Consumer>
{(parentCtx: PoseContextProps) => (
<PoseElementComponent
poseProps={poseProps}
elementType={key}
{...props}
{...parentCtx}
/>
)}
</PoseParentContext.Consumer>
);
componentCache.set(key, componentFactory);
return componentFactory;
};
const getComponentFactory = (key: string) =>
componentCache.has(key)
? componentCache.get(key)
: createComponentFactory(key);
const posed: Posed = new Proxy(
{},
{
get: (target, key: string) => getComponentFactory(key)
}
);
export default posed;