/
component.js
107 lines (101 loc) · 2.42 KB
/
component.js
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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
import * as Preact from '#preact';
import {ProxyIframeEmbed} from '#preact/component/3p-frame';
import {MessageType, deserializeMessage} from '#core/3p-frame-messaging';
import {forwardRef} from '#preact/compat';
import {useCallback, useMemo, useState} from '#preact';
import {useValueRef} from '#preact/component';
/** @const {string} */
const TYPE = 'twitter';
const FULL_HEIGHT = '100%';
const MATCHES_MESSAGING_ORIGIN = () => true;
/**
* @param {!BentoTwitterDef.Props} props
* @param {{current: (!BentoTwitterDef.Api|null)}} ref
* @return {PreactDef.Renderable}
*/
function BentoTwitterWithRef(
{
cards,
conversation,
limit,
momentid,
onError,
onLoad,
options: optionsProps,
requestResize,
style,
timelineScreenName,
timelineSourceType,
timelineUserId,
title,
tweetLimit,
tweetid,
...rest
},
ref
) {
const [height, setHeight] = useState(null);
const onLoadRef = useValueRef(onLoad);
const onErrorRef = useValueRef(onError);
const messageHandler = useCallback(
(event) => {
const data = deserializeMessage(event.data);
if (data['type'] == MessageType.EMBED_SIZE) {
const height = data['height'];
if (requestResize) {
requestResize(height);
setHeight(FULL_HEIGHT);
} else {
setHeight(height);
}
onLoadRef.current?.();
} else if (data['type'] === MessageType.NO_CONTENT) {
onErrorRef.current?.();
}
},
[requestResize, onLoadRef, onErrorRef]
);
const options = useMemo(
() => ({
cards,
conversation,
limit,
momentid,
timelineScreenName,
timelineSourceType,
timelineUserId,
tweetLimit,
tweetid,
...optionsProps,
}),
[
cards,
conversation,
limit,
momentid,
optionsProps,
timelineScreenName,
timelineSourceType,
timelineUserId,
tweetLimit,
tweetid,
]
);
return (
<ProxyIframeEmbed
allowFullscreen
ref={ref}
title={title}
{...rest}
// non-overridable props
matchesMessagingOrigin={MATCHES_MESSAGING_ORIGIN}
messageHandler={messageHandler}
options={options}
type={TYPE}
style={height ? {...style, height} : style}
/>
);
}
const BentoTwitter = forwardRef(BentoTwitterWithRef);
BentoTwitter.displayName = 'BentoTwitter'; // Make findable for tests.
export {BentoTwitter};