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

Commit 8db8279

Browse files
FezVrastaFezVrasta
committed
fix: upgrade all dependencies to latest
1 parent 4754c50 commit 8db8279

File tree

5 files changed

+4025
-4440
lines changed

5 files changed

+4025
-4440
lines changed

‎.size-snapshot.json‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,25 @@
11
{
22
"dist/index.umd.js": {
3-
"bundled": 84846,
4-
"minified": 30911,
5-
"gzipped": 9420
3+
"bundled": 156499,
4+
"minified": 66522,
5+
"gzipped": 15800
66
},
77
"dist/index.umd.min.js": {
8-
"bundled": 49580,
9-
"minified": 20040,
10-
"gzipped": 6478
8+
"bundled": 121165,
9+
"minified": 55751,
10+
"gzipped": 12844
1111
},
1212
"dist/index.esm.js": {
13-
"bundled": 13500,
14-
"minified": 7562,
15-
"gzipped": 2164,
13+
"bundled": 13259,
14+
"minified": 7240,
15+
"gzipped": 2176,
1616
"treeshaked": {
1717
"rollup": {
18-
"code": 3816,
19-
"import_statements": 184
18+
"code": 3788,
19+
"import_statements": 158
2020
},
2121
"webpack": {
22-
"code": 4957
22+
"code": 4986
2323
}
2424
}
2525
}

‎demo/index.js‎

Lines changed: 95 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
// @flow
2-
import React, { Fragment } from 'react';
2+
import React, { useState } from 'react';
33
import ReactDOM from 'react-dom';
4-
import { injectGlobal } from 'react-emotion';
5-
import { compose, withState } from 'recompose';
4+
import { Global, css } from '@emotion/core';
65
import { Transition } from 'react-spring/renderprops';
76
import { Manager, Reference, Popper } from '../src';
87
import {
@@ -16,37 +15,10 @@ import {
1615
PopperDot,
1716
} from './styles';
1817

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: #171d23;
29-
font-family: Lato, sans-serif;
30-
}
31-
32-
a {
33-
color: white;
34-
}
35-
`;
36-
3718
const Null = () => null;
3819

3920
const placements = ['top', 'right', 'bottom', 'left'];
4021

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-
5022
const modifiers = [
5123
{
5224
name: 'flip',
@@ -81,7 +53,7 @@ const dotModifiers = [
8153
options: {
8254
offset: [0, 56],
8355
},
84-
}
56+
},
8557
];
8658

8759
const mainModifiers = [
@@ -91,7 +63,7 @@ const mainModifiers = [
9163
name: 'computeStyles',
9264
options: {
9365
adaptive: false,
94-
}
66+
},
9567
},
9668
];
9769

@@ -106,13 +78,41 @@ const animatedModifiers = [
10678
name: 'computeStyles',
10779
options: {
10880
gpuAcceleration: false,
109-
}
81+
},
11082
},
11183
];
11284

113-
const Demo = enhance(
114-
({ activePlacement, setActivePlacement, isPopper2Open, togglePopper2 }) => (
115-
<Fragment>
85+
const Demo = () => {
86+
const [activePlacement, setActivePlacement] = useState(
87+
placements[Math.floor(Math.random() * placements.length)]
88+
);
89+
const [isPopper2Open, togglePopper2] = useState(false);
90+
91+
return (
92+
<>
93+
<Global
94+
styles={css`
95+
*,
96+
*:before,
97+
*:after {
98+
box-sizing: border-box;
99+
min-width: 0;
100+
min-height: 0;
101+
}
102+
103+
html,
104+
body {
105+
margin: 0;
106+
background-color: #171d23;
107+
font-family: Lato, sans-serif;
108+
}
109+
110+
a {
111+
color: white;
112+
}
113+
`}
114+
/>
115+
116116
<Main gradient="purple">
117117
<Manager>
118118
<Reference>
@@ -140,18 +140,20 @@ const Demo = enhance(
140140
</TransitionedPopperBox>
141141
)}
142142
</Popper>
143-
{placements.filter(p => p !== activePlacement).map(p => (
144-
<Popper placement={p} key={p} modifiers={dotModifiers}>
145-
{({ ref, style }) => (
146-
<PopperDot
147-
innerRef={ref}
148-
style={style}
149-
onClick={() => setActivePlacement(p)}
150-
title={p}
151-
/>
152-
)}
153-
</Popper>
154-
))}
143+
{placements
144+
.filter((p) => p !== activePlacement)
145+
.map((p) => (
146+
<Popper placement={p} key={p} modifiers={dotModifiers}>
147+
{({ ref, style }) => (
148+
<PopperDot
149+
innerRef={ref}
150+
style={style}
151+
onClick={() => setActivePlacement(p)}
152+
title={p}
153+
/>
154+
)}
155+
</Popper>
156+
))}
155157
</PoppersContainer>
156158
</Manager>
157159
</Main>
@@ -174,55 +176,55 @@ const Demo = enhance(
174176
enter={{ opacity: 1, rotation: '0deg', scale: 1, top: 0 }}
175177
leave={{ opacity: 0, rotation: '180deg', scale: 0.5, top: -20 }}
176178
>
177-
{show =>
178-
show ? ({ rotation, scale, opacity, top: topOffset }) => (
179-
<Popper
180-
placement="bottom"
181-
modifiers={animatedModifiers}
182-
>
183-
{({
184-
ref,
185-
style: { top, left, position },
186-
placement,
187-
arrowProps,
188-
}) => (
189-
<PopperBox
190-
innerRef={ref}
191-
style={{
192-
opacity,
193-
top: 0,
194-
left: 0,
195-
position,
196-
padding: '1em',
197-
width: '10em',
198-
transform: `translate3d(${left}, ${parseInt(top) +
199-
topOffset}px, 0) scale(${scale}) rotate(${rotation})`,
200-
transformOrigin: 'top center',
201-
}}
202-
>
203-
<a
204-
href="https://github.com/drcmda/react-spring"
205-
target="_blank"
179+
{(show) =>
180+
show
181+
? ({ rotation, scale, opacity, top: topOffset }) => (
182+
<Popper placement="bottom" modifiers={animatedModifiers}>
183+
{({
184+
ref,
185+
style: { top, left, position },
186+
placement,
187+
arrowProps,
188+
}) => (
189+
<PopperBox
190+
innerRef={ref}
191+
style={{
192+
opacity,
193+
top: 0,
194+
left: 0,
195+
position,
196+
padding: '1em',
197+
width: '10em',
198+
transform: `translate3d(${left}, ${
199+
parseInt(top) + topOffset
200+
}px, 0) scale(${scale}) rotate(${rotation})`,
201+
transformOrigin: 'top center',
202+
}}
206203
>
207-
react-spring
208-
</a>
209-
animated
210-
<Arrow
211-
innerRef={arrowProps.ref}
212-
data-placement={placement}
213-
style={arrowProps.style}
214-
/>
215-
</PopperBox>
216-
)}
217-
</Popper>
218-
)
219-
: Null}
204+
<a
205+
href="https://github.com/drcmda/react-spring"
206+
target="_blank"
207+
>
208+
react-spring
209+
</a>
210+
animated
211+
<Arrow
212+
innerRef={arrowProps.ref}
213+
data-placement={placement}
214+
style={arrowProps.style}
215+
/>
216+
</PopperBox>
217+
)}
218+
</Popper>
219+
)
220+
: Null
221+
}
220222
</Transition>
221223
</Manager>
222224
</Main>
223-
</Fragment>
224-
)
225-
);
225+
</>
226+
);
227+
};
226228

227229
const rootNode = document.querySelector('#root');
228230

‎demo/styles.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import styled, { keyframes } from 'react-emotion';
1+
import styled from '@emotion/styled';
2+
import { keyframes } from '@emotion/core';
23

34
const gradients = {
45
purple: 'linear-gradient(to right, #9d50bb, #6e48aa)',
@@ -16,7 +17,7 @@ export const Main = styled('main')`
1617
justify-content: center;
1718
align-items: center;
1819
height: 100vh;
19-
background-image: ${props => gradients[props.gradient]};
20+
background-image: ${(props) => gradients[props.gradient]};
2021
color: #ffffff;
2122
clip-path: polygon(99% 1%, 99% 95%, 50% 99%, 1% 95%, 1% 1%, 50% 5%);
2223
&:first-child {
@@ -62,7 +63,7 @@ export const PopperBox = styled('div')`
6263
border-radius: 10px;
6364
padding: 0.5em;
6465
text-align: center;
65-
${props => props.popperStyle};
66+
${(props) => props.popperStyle};
6667
`;
6768

6869
export const TransitionedPopperBox = styled(PopperBox)`

0 commit comments

Comments
 (0)