/
stories.tsx
112 lines (102 loc) · 2.88 KB
/
stories.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
112
import React, { useState } from "react";
import { storiesOf } from "@storybook/react";
import styled from "styled-components";
import MapPanel, {
PanelDiv,
BackgroundDiv,
InnerScrollDiv,
BackgroundDivProps
} from "./index";
const MockMapDiv = styled.div`
width: 100%;
height: 100%;
pointer-events: all;
position: absolute;
background: linear-gradient(to bottom, #0f2027, #203a43, #2c5364);
`;
const stories = storiesOf("Over-Map Layout", module);
stories.add("inner scroll", () => {
const breakpoint = 1024;
const [panelY, setPanelY] = React.useState(0);
const [isOpen, setIsOpen] = React.useState(null);
return (
<div style={{ position: "relative", width: "100%", height: "70vh" }}>
<MapPanel
breakpoint={breakpoint}
onScroll={newPanelY => {
setPanelY(newPanelY);
newPanelY === 1 && setIsOpen(true);
newPanelY === 0 && setIsOpen(false);
}}
isOpen={isOpen}
>
<div
style={{
flex: 0,
padding: "1rem",
background: "#f2f2f2"
}}
>
Header Content
</div>
<InnerScrollDiv breakpoint={breakpoint} panelY={panelY}>
<div style={{ height: "200vh", padding: "1rem" }}>
<p>{`Components can listen on panelY: ${panelY.toFixed(2)}`}</p>
<p>
{`The panel can also be opened or closed`}
{panelY === 0 || panelY === 1 ? (
<button onClick={() => setIsOpen(!isOpen)}>
{isOpen ? "Close" : "Open"} Panel
</button>
) : null}
</p>
</div>
</InnerScrollDiv>
</MapPanel>
<MockMapDiv />
</div>
);
});
// style overrides
const StyledPanelDiv = styled(PanelDiv)`
background: purple;
border-radius: 30px 30px 0 0;
text-align: center;
`;
// attrs overrides
const StyledBackgroundDiv = styled(BackgroundDiv).attrs<BackgroundDivProps>(
({ panelY }) => ({
style: {
zIndex: panelY ? 2 : 0,
background: `hsla(${150 * panelY}, 50%, 50%, ${panelY})`
}
})
)``;
stories.add("styled", () => (
<div style={{ position: "relative", width: "100%", height: "70vh" }}>
<MapPanel panel={StyledPanelDiv} background={StyledBackgroundDiv}>
<div style={{ minHeight: "200vh" }}>{`Panel With Fancy Styles`}</div>
</MapPanel>
<MockMapDiv />
</div>
));
stories.add("short scroll", () => {
return (
<div style={{ position: "relative", width: "100%", height: "70vh" }}>
<MapPanel>
<div style={{ height: "50vh" }}>{`Panel Content`}</div>
</MapPanel>
<MockMapDiv />
</div>
);
});
stories.add("no scroll", () => {
return (
<div style={{ position: "relative", width: "100%", height: "70vh" }}>
<MapPanel>
<div style={{ flex: 1 }}>{`Panel Content`}</div>
</MapPanel>
<MockMapDiv />
</div>
);
});