-
-
Notifications
You must be signed in to change notification settings - Fork 9.1k
/
FramesRenderer.tsx
111 lines (101 loc) · 2.8 KB
/
FramesRenderer.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
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
108
109
110
111
import React, { Fragment, FunctionComponent, useMemo, useEffect, useState } from 'react';
import { Button } from '@storybook/components';
import { Global, CSSObject, styled } from '@storybook/theming';
import { IFrame } from './iframe';
import { FramesRendererProps } from './utils/types';
import { stringifyQueryParams } from './utils/stringifyQueryParams';
const getActive = (refId: FramesRendererProps['refId']) => {
if (refId) {
return `storybook-ref-${refId}`;
}
return 'storybook-preview-iframe';
};
const SkipToSidebarLink = styled(Button)(({ theme }) => ({
display: 'none',
'@media (min-width: 600px)': {
display: 'block',
position: 'absolute',
top: '10px',
right: '15px',
padding: '10px 15px',
fontSize: theme.typography.size.s1,
transform: 'translateY(-100px)',
'&:focus': {
transform: 'translateY(0)',
zIndex: 1,
},
},
}));
export const FramesRenderer: FunctionComponent<FramesRendererProps> = ({
refs,
story,
scale,
viewMode = 'story',
refId,
queryParams = {},
baseUrl,
storyId = '*',
}) => {
const version = refs[refId]?.version;
const stringifiedQueryParams = stringifyQueryParams({
...queryParams,
...(version && { version }),
});
const active = getActive(refId);
const styles = useMemo<CSSObject>(() => {
return {
'[data-is-storybook="false"]': {
visibility: 'hidden',
},
'[data-is-storybook="true"]': {
visibility: 'visible',
},
};
}, []);
const [frames, setFrames] = useState<Record<string, string>>({
'storybook-preview-iframe': `${baseUrl}?id=${storyId}&viewMode=${viewMode}${stringifiedQueryParams}`,
});
useEffect(() => {
const newFrames = Object.values(refs)
.filter((r) => {
if (r.error) {
return false;
}
if (r.type === 'auto-inject') {
return true;
}
if (story && r.id === story.refId) {
return true;
}
return false;
})
.reduce((acc, r) => {
return {
...acc,
[`storybook-ref-${r.id}`]: `${r.url}/iframe.html?id=${storyId}&viewMode=${viewMode}&refId=${r.id}${stringifiedQueryParams}`,
};
}, frames);
setFrames(newFrames);
}, [storyId, story, refs]);
return (
<Fragment>
<Global styles={styles} />
{Object.entries(frames).map(([id, src]) => (
<Fragment key={id}>
<SkipToSidebarLink secondary isLink tabIndex={0} href={`#${storyId}`}>
Skip to sidebar
</SkipToSidebarLink>
<IFrame
active={id === active}
key={refs[id] ? refs[id].url : id}
id={id}
title={id}
src={src}
allowFullScreen
scale={scale}
/>
</Fragment>
))}
</Fragment>
);
};