Skip to content
This repository was archived by the owner on Dec 5, 2024. It is now read-only.

Commit 2b8ca6d

Browse files
author
Federico Zivolo
committed
docs: Updated demo
1 parent 119be08 commit 2b8ca6d

File tree

14 files changed

+499
-558
lines changed

14 files changed

+499
-558
lines changed

‎demo/animated.jsx‎

Lines changed: 0 additions & 148 deletions
This file was deleted.

‎demo/common.jsx‎

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎demo/favicon.png‎

-553 Bytes
Binary file not shown.

‎demo/index.html‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,14 @@
33

44
<head>
55
<meta charset="UTF-8">
6-
<title>Component</title>
7-
<link href="https://fonts.googleapis.com/css?family=Bungee|Lato:400,900" rel="stylesheet">
6+
<title>react-popper</title>
7+
<link href="https://fonts.googleapis.com/css?family=Lato:400,900" rel="stylesheet">
88
</head>
99

1010
<body>
11-
<div id="app"></div>
11+
<noscript>You need JavaScript to view this website.</noscript>
12+
<div id="root"></div>
1213
<script src="./index.js"></script>
1314
</body>
1415

15-
</html>
16+
</html>

‎demo/index.js‎

Lines changed: 179 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,179 @@
1-
import React from 'react'
2-
import ReactDOM from 'react-dom'
3-
4-
import MultipleExample from './multiple'
5-
import AnimatedExample from './animated'
6-
import ModifiersExample from './modifiers'
7-
import ToggleableExample from './toggleable'
8-
import StandaloneExample from './standalone'
9-
import StandaloneObjectExample from './standaloneObject'
10-
11-
import './main.css'
12-
13-
const App = () => (
14-
<div style={{ padding: 200 }}>
15-
<div style={{ marginBottom: 200 }}>
16-
<MultipleExample />
17-
</div>
18-
{/* <div style={{ marginBottom: 200 }}>
19-
<AnimatedExample />
20-
</div>
21-
<div style={{ marginBottom: 200 }}>
22-
<ModifiersExample />
23-
</div>
24-
<div style={{ marginBottom: 200 }}>
25-
<ToggleableExample />
26-
</div>
27-
<div style={{ marginBottom: 200 }}>
28-
<StandaloneExample />
29-
</div>
30-
<div style={{ marginBottom: 200 }}>
31-
<StandaloneObjectExample />
32-
</div> */}
33-
</div>
34-
)
35-
36-
ReactDOM.render(<App />, document.getElementById('app'))
1+
// @flow
2+
import React, { Fragment } from 'react';
3+
import ReactDOM from 'react-dom';
4+
import { injectGlobal } from 'react-emotion';
5+
import { compose, withState } from 'recompose';
6+
import { Transition } from 'react-spring';
7+
import { Manager, Reference, Popper } from '../src';
8+
import {
9+
Main,
10+
ReferenceBox,
11+
ClickableReferenceBox,
12+
PoppersContainer,
13+
TransitionedPopperBox,
14+
PopperBox,
15+
Arrow,
16+
PopperDot,
17+
} from './styles';
18+
19+
injectGlobal`
20+
*, *:before, *:after {
21+
box-sizing: border-box;
22+
min-width: 0;
23+
min-height: 0;
24+
}
25+
26+
html, body {
27+
margin: 0;
28+
background-color: #232323;
29+
font-family: Lato, sans-serif;
30+
}
31+
32+
a {
33+
color: white;
34+
}
35+
`;
36+
37+
const Null = () => null;
38+
39+
const placements = ['top', 'right', 'bottom', 'left'];
40+
41+
const enhance = compose(
42+
withState(
43+
'activePlacement',
44+
'setActivePlacement',
45+
placements[Math.floor(Math.random() * placements.length)]
46+
),
47+
withState('isPopper2Open', 'togglePopper2', false)
48+
);
49+
50+
const modifiers = {
51+
flip: { enabled: false },
52+
preventOverflow: { enabled: false },
53+
hide: { enabled: false },
54+
};
55+
56+
const Demo = enhance(
57+
({ activePlacement, setActivePlacement, isPopper2Open, togglePopper2 }) => (
58+
<Fragment>
59+
<Main gradient="purple">
60+
<Manager>
61+
<Reference>
62+
{({ ref }) => (
63+
<ReferenceBox innerRef={ref}>
64+
<a
65+
href="https://github.com/FezVrasta/react-popper"
66+
target="_blank"
67+
>
68+
react-popper
69+
</a>
70+
</ReferenceBox>
71+
)}
72+
</Reference>
73+
<PoppersContainer>
74+
<Popper placement={activePlacement} modifiers={modifiers}>
75+
{({ ref, style, placement, arrowProps }) => (
76+
<TransitionedPopperBox innerRef={ref} style={style}>
77+
{placement}
78+
<Arrow
79+
innerRef={arrowProps.ref}
80+
data-placement={placement}
81+
style={arrowProps.style}
82+
/>
83+
</TransitionedPopperBox>
84+
)}
85+
</Popper>
86+
{placements.filter(p => p !== activePlacement).map(p => (
87+
<Popper placement={p} key={p} modifiers={modifiers}>
88+
{({ ref, style }) => (
89+
<PopperDot
90+
innerRef={ref}
91+
style={style}
92+
onClick={() => setActivePlacement(p)}
93+
title={p}
94+
/>
95+
)}
96+
</Popper>
97+
))}
98+
</PoppersContainer>
99+
</Manager>
100+
</Main>
101+
<Main gradient="orange">
102+
<Manager>
103+
<Reference>
104+
{({ ref }) => (
105+
<ClickableReferenceBox
106+
tabIndex={0}
107+
innerRef={ref}
108+
onClick={() => togglePopper2(!isPopper2Open)}
109+
>
110+
Click to toggle
111+
</ClickableReferenceBox>
112+
)}
113+
</Reference>
114+
<Transition
115+
from={{ opacity: 0, rotation: '180deg', scale: 0.5, top: -20 }}
116+
enter={{ opacity: 1, rotation: '0deg', scale: 1, top: 0 }}
117+
leave={{ opacity: 0, rotation: '180deg', scale: 0.5, top: -20 }}
118+
>
119+
{isPopper2Open
120+
? ({ rotation, scale, opacity, top: topOffset }) => (
121+
<Popper
122+
placement="bottom"
123+
modifiers={{
124+
...modifiers,
125+
// We disable the built-in gpuAcceleration so that
126+
// Popper.js will return us easy to interpolate values
127+
// (top, left instead of transform: translate3d)
128+
// We'll then use these values to generate the needed
129+
// css tranform values blended with the react-spring values
130+
computeStyle: { gpuAcceleration: false },
131+
}}
132+
>
133+
{({
134+
ref,
135+
style: { top, left, position },
136+
placement,
137+
arrowProps,
138+
}) => (
139+
<PopperBox
140+
innerRef={ref}
141+
style={{
142+
opacity,
143+
top: 0,
144+
left: 0,
145+
position,
146+
padding: '1em',
147+
width: '10em',
148+
transform: `translate3d(${left}px, ${top +
149+
topOffset}px, 0) scale(${scale}) rotate(${rotation})`,
150+
transformOrigin: 'top center',
151+
}}
152+
>
153+
<a
154+
href="https://github.com/drcmda/react-spring"
155+
target="_blank"
156+
>
157+
react-spring
158+
</a>
159+
animated
160+
<Arrow
161+
innerRef={arrowProps.ref}
162+
data-placement={placement}
163+
style={arrowProps.style}
164+
/>
165+
</PopperBox>
166+
)}
167+
</Popper>
168+
)
169+
: Null}
170+
</Transition>
171+
</Manager>
172+
</Main>
173+
</Fragment>
174+
)
175+
);
176+
177+
const rootNode = document.querySelector('#root');
178+
179+
rootNode && ReactDOM.render(<Demo />, rootNode);

0 commit comments

Comments
 (0)