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

Commit 7851363

Browse files
souporserioussouporserious
authored
Merge pull request #89 from Justkant/chore/update-dependencies
chore: update & clean dependencies
2 parents 7fc0de7 + be63633 commit 7851363

20 files changed

+2287
-1020
lines changed

‎.babelrc‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
{
22
"presets": [
3-
"es2015",
4-
"stage-0",
3+
["env", { "modules": false }],
54
"react"
5+
],
6+
"plugins": [
7+
"transform-object-rest-spread",
8+
"transform-class-properties",
9+
"transform-export-extensions"
610
]
711
}

‎.eslintrc.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
exports.root = true;
2+
3+
exports.plugins = ['prettier'];
4+
5+
exports.extends = ['standard', 'standard-react', 'prettier', 'prettier/react'];
6+
7+
exports.parser = 'babel-eslint';
8+
9+
exports.env = {
10+
browser: true,
11+
};
12+
13+
exports.settings = {
14+
react: {
15+
version: '16.2',
16+
},
17+
};
18+
19+
exports.globals = {
20+
};
21+
22+
exports.rules = {
23+
// prettier
24+
'prettier/prettier': ['error', { trailingComma: 'all', singleQuote: true, semi: false, }],
25+
curly: ['error', 'multi-line'],
26+
'no-unexpected-multiline': 'off',
27+
};

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,3 +19,4 @@ lib
1919
.cache
2020
.project
2121
.tmp
22+
.vscode

‎README.md‎

Lines changed: 19 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
11
## React Popper
22

3-
[![npm version](https://badge.fury.io/js/react-popper.svg)](https://badge.fury.io/js/react-popper)
3+
[![npm version](https://img.shields.io/npm/v/react-popper.svg)](https://www.npmjs.com/package/react-popper)
4+
[![npm downloads](https://img.shields.io/npm/dm/react-popper.svg)](https://www.npmjs.com/package/react-popper)
45
[![Dependency Status](https://david-dm.org/souporserious/react-popper.svg)](https://david-dm.org/souporserious/react-popper)
6+
[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
7+
[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
58

69
React wrapper around [PopperJS](https://github.com/FezVrasta/popper.js/).
710

811
## Install
912

10-
`npm install react-popper --save`
13+
`npm install react-popper --save` or `yarn add react-popper`
1114

1215
```html
1316
<script src="https://unpkg.com/react-popper/dist/react-popper.js"></script>
@@ -110,9 +113,9 @@ A `Target`'s child may be one of the following:
110113
```js
111114
{
112115
targetProps: {
113-
ref // a function that accepts the target component as an argument
116+
ref, // a function that accepts the target component as an argument
114117
},
115-
restProps // any other props that came through the Target component
118+
restProps, // any other props that came through the Target component
116119
}
117120
```
118121

@@ -141,9 +144,9 @@ A `Popper`'s child may be one of the following:
141144
popperProps: {
142145
ref, // a function that accepts the popper component as an argument
143146
style, // the styles to apply to the popper element
144-
['data-placement'] // the placement of the Popper
147+
'data-placement', // the placement of the Popper
145148
},
146-
restProps // any other props that came through the Popper component
149+
restProps, // any other props that came through the Popper component
147150
}
148151
```
149152

@@ -162,29 +165,30 @@ An `Arrow`'s child may be one of the following:
162165
{
163166
arrowProps: {
164167
ref, // a function that accepts the arrow component as an argument
165-
style // the styles to apply to the arrow element
168+
style, // the styles to apply to the arrow element
166169
},
167-
restProps // any other props that came through the Arrow component
170+
restProps, // any other props that came through the Arrow component
168171
}
169172
```
170173

171174

172175
## Running Locally
173176

174-
clone repo
177+
#### clone repo
175178

176179
`git clone [email protected]:souporserious/react-popper.git`
177180

178-
move into folder
181+
#### move into folder
179182

180183
`cd ~/react-popper`
181184

182-
install dependencies
185+
#### install dependencies
183186

184-
`npm install`
187+
`npm install` or `yarn`
185188

186-
run dev mode
189+
#### run dev mode
187190

188-
`npm run dev`
191+
`npm run dev` or `yarn dev`
189192

190-
open your browser and visit: `http://localhost:8080/`
193+
#### open your browser and visit:
194+
`http://localhost:8080/`

‎example/animated.jsx‎

Lines changed: 44 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import React, { PureComponent } from 'react'
2-
import ReactDOM, { findDOMNode } from 'react-dom'
3-
import Transition from 'react-transition-group/Transition';
4-
import { Manager, Target, Popper, Arrow } from '../src/react-popper'
2+
import { findDOMNode } from 'react-dom'
3+
import Transition from 'react-transition-group/Transition'
4+
import PropTypes from 'prop-types'
55
import outy from 'outy'
6+
import { Manager, Target, Popper } from '../src/react-popper'
67

78
const duration = 300
89

@@ -13,7 +14,7 @@ const defaultStyle = {
1314

1415
const transitionStyles = {
1516
entering: { opacity: 0 },
16-
entered: { opacity: 1 },
17+
entered: { opacity: 1 },
1718
}
1819

1920
const CustomTarget = ({ innerRef, ...props }) => (
@@ -36,6 +37,10 @@ const CustomTarget = ({ innerRef, ...props }) => (
3637
/>
3738
)
3839

40+
CustomTarget.propTypes = {
41+
innerRef: PropTypes.func,
42+
}
43+
3944
const CustomPopper = ({ innerRef, style, ...props }) => (
4045
<div
4146
ref={innerRef}
@@ -54,6 +59,11 @@ const CustomPopper = ({ innerRef, style, ...props }) => (
5459
/>
5560
)
5661

62+
CustomPopper.propTypes = {
63+
innerRef: PropTypes.func,
64+
style: PropTypes.object,
65+
}
66+
5767
class AnimatedExample extends PureComponent {
5868
state = {
5969
isOpen: false,
@@ -87,7 +97,7 @@ class AnimatedExample extends PureComponent {
8797
this.outsideTap = outy(
8898
elements,
8999
['click', 'touchstart'],
90-
this._handleOutsideTap
100+
this._handleOutsideTap,
91101
)
92102
}
93103

@@ -101,36 +111,36 @@ class AnimatedExample extends PureComponent {
101111

102112
render() {
103113
return (
104-
<div>
105-
<h2>Animated Example</h2>
106-
<Manager>
107-
<Target
108-
innerRef={c => (this.target = findDOMNode(c))}
109-
component={CustomTarget}
110-
onClick={this._handleTargetClick}
114+
<div>
115+
<h2>Animated Example</h2>
116+
<Manager>
117+
<Target
118+
innerRef={c => (this.target = findDOMNode(c))}
119+
component={CustomTarget}
120+
onClick={this._handleTargetClick}
121+
>
122+
Click {this.state.isOpen ? 'outside to hide' : 'to show'} popper
123+
</Target>
124+
<Transition in={this.state.isOpen} timeout={duration}>
125+
{state => (
126+
<Popper
127+
key="popper"
128+
component={CustomPopper}
129+
innerRef={c => {
130+
this.popper = findDOMNode(c)
131+
}}
132+
placement="bottom"
133+
style={{
134+
...defaultStyle,
135+
...transitionStyles[state],
136+
}}
111137
>
112-
Click {this.state.isOpen ? 'outside to hide' : 'to show'} popper
113-
</Target>
114-
<Transition in={this.state.isOpen} timeout={duration}>
115-
{state => (
116-
<Popper
117-
key="popper"
118-
component={CustomPopper}
119-
innerRef={c => {
120-
this.popper = findDOMNode(c)
121-
}}
122-
placement="bottom"
123-
style={{
124-
...defaultStyle,
125-
...transitionStyles[state]
126-
}}
127-
>
128-
<div>Animated Popper 🎉</div>
129-
</Popper>
130-
)}
131-
</Transition>
132-
</Manager>
133-
</div>
138+
<div>Animated Popper 🎉</div>
139+
</Popper>
140+
)}
141+
</Transition>
142+
</Manager>
143+
</div>
134144
)
135145
}
136146
}

‎example/common.jsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
export const modifiers = {
2-
preventOverflow: {
3-
enabled: true,
4-
escapeWithReference: true,
5-
boundariesElement: 'scrollParent'
6-
}
2+
preventOverflow: {
3+
enabled: true,
4+
escapeWithReference: true,
5+
boundariesElement: 'scrollParent',
6+
},
77
}

‎example/index.html‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,9 @@
44
<meta charset="UTF-8">
55
<title>Component</title>
66
<link href="https://fonts.googleapis.com/css?family=Bungee|Lato:400,900" rel="stylesheet">
7-
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
87
</head>
98
<body>
109
<div id="app"></div>
11-
<script src="http://localhost:8080/webpack-dev-server.js"></script>
1210
<script src="bundle.js"></script>
1311
</body>
1412
</html>

‎example/index.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import MultipleExample from './multiple'
55
import AnimatedExample from './animated'
66
import ModifiersExample from './modifiers'
77

8-
import './main.scss'
8+
import './main.css'
99

1010
const App = () => (
1111
<div style={{ padding: 200 }}>

‎example/main.scss‎ renamed to ‎example/main.css‎

File renamed without changes.

‎example/modifiers.jsx‎

Lines changed: 35 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import React from 'react'
2+
import { Portal } from 'react-portal'
23
import { Manager, Target, Popper, Arrow } from '../src/react-popper'
3-
import PopperJS from 'popper.js'
4-
import Portal from 'react-travel'
5-
import {modifiers} from './common'
4+
import { modifiers } from './common'
65

76
class MultipleExample extends React.Component {
87
state = {
@@ -12,29 +11,39 @@ class MultipleExample extends React.Component {
1211
render() {
1312
const { placement } = this.state
1413
return (
15-
<div>
16-
<h2>Modifier Example</h2>
17-
<div style={{
18-
height: 150,
19-
border: '1px solid gray',
20-
overflow: 'auto'
21-
}}>
22-
<Manager>
23-
<Target style={{ width: 120, height: 50, marginTop: 180, marginBottom: 200, background: 'gold' }}>
24-
Box
25-
</Target>
26-
<Portal>
27-
<Popper
28-
className="popper"
29-
placement={placement}
30-
modifiers={modifiers}
31-
>
32-
Popper Content
33-
<Arrow className="popper__arrow" />
34-
</Popper>
35-
</Portal>
36-
</Manager>
37-
</div>
14+
<div>
15+
<h2>Modifier Example</h2>
16+
<div
17+
style={{
18+
height: 150,
19+
border: '1px solid gray',
20+
overflow: 'auto',
21+
}}
22+
>
23+
<Manager>
24+
<Target
25+
style={{
26+
width: 120,
27+
height: 50,
28+
marginTop: 180,
29+
marginBottom: 200,
30+
background: 'gold',
31+
}}
32+
>
33+
Box
34+
</Target>
35+
<Portal>
36+
<Popper
37+
className="popper"
38+
placement={placement}
39+
modifiers={modifiers}
40+
>
41+
Popper Content
42+
<Arrow className="popper__arrow" />
43+
</Popper>
44+
</Portal>
45+
</Manager>
46+
</div>
3847
</div>
3948
)
4049
}

0 commit comments

Comments
 (0)