Skip to content

Commit d6d1d6a

Browse files
mohsinulhaqmohsinulhaq
authored
upgrade popper-js to v2 (#95)
1 parent 2b4d66e commit d6d1d6a

File tree

11 files changed

+3585
-3589
lines changed

11 files changed

+3585
-3589
lines changed

‎.size-snapshot.json‎

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,15 @@
11
{
2-
"dist/cjs/react-popper-tooltip.js": {
3-
"bundled": 15639,
4-
"minified": 8815,
5-
"gzipped": 2508
6-
},
7-
"dist/esm/react-popper-tooltip.js": {
8-
"bundled": 15605,
9-
"minified": 8795,
10-
"gzipped": 2499,
2+
"react-popper-tooltip.js": {
3+
"bundled": 15314,
4+
"minified": 8563,
5+
"gzipped": 2414,
116
"treeshaked": {
127
"rollup": {
13-
"code": 347,
14-
"import_statements": 327
8+
"code": 209,
9+
"import_statements": 209
1510
},
1611
"webpack": {
17-
"code": 9510
12+
"code": 9247
1813
}
1914
}
2015
}

‎README.md‎

Lines changed: 4 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,11 @@
55
[![codecov](https://codecov.io/gh/mohsinulhaq/react-popper-tooltip/branch/master/graph/badge.svg)](https://codecov.io/gh/mohsinulhaq/react-popper-tooltip)
66
[![Dependency Status](https://img.shields.io/david/mohsinulhaq/react-popper-tooltip.svg?style=flat-square)](https://david-dm.org/mohsinulhaq/react-popper-tooltip)
77

8-
React tooltip component based on [react-popper](https://github.com/FezVrasta/react-popper), the React wrapper around [popper.js](https://popper.js.org/) library.
8+
React tooltip component based on [react-popper](https://github.com/FezVrasta/react-popper), the React wrapper around [popper.js](https://popper.js.org) library.
99

1010
## Homepage
1111

12-
https://react-popper-tooltip.netlify.com
12+
https://react-popper-tooltip.netlify.app
1313

1414
## Example
1515

@@ -82,70 +82,6 @@ render(
8282

8383
Read more about [render prop](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce) pattern if you're not familiar with this approach.
8484

85-
## Quick start
86-
87-
If you would like our opinionated container and arrow styles for your tooltip for quick start, you may import `react-popper-tooltip/dist/styles.css`, and use the classes `tooltip-container` and `tooltip-arrow` as follows:
88-
89-
### Tooltip.js
90-
91-
```jsx
92-
import React from 'react';
93-
import TooltipTrigger from 'react-popper-tooltip';
94-
import 'react-popper-tooltip/dist/styles.css';
95-
96-
const Tooltip = ({children, tooltip, hideArrow, ...props}) => (
97-
<TooltipTrigger
98-
{...props}
99-
tooltip={({
100-
arrowRef,
101-
tooltipRef,
102-
getArrowProps,
103-
getTooltipProps,
104-
placement
105-
}) => (
106-
<div
107-
{...getTooltipProps({
108-
ref: tooltipRef,
109-
className: 'tooltip-container'
110-
})}
111-
>
112-
{!hideArrow && (
113-
<div
114-
{...getArrowProps({
115-
ref: arrowRef,
116-
className: 'tooltip-arrow',
117-
'data-placement': placement
118-
})}
119-
/>
120-
)}
121-
{tooltip}
122-
</div>
123-
)}
124-
>
125-
{({getTriggerProps, triggerRef}) => (
126-
<span
127-
{...getTriggerProps({
128-
ref: triggerRef,
129-
className: 'trigger'
130-
})}
131-
>
132-
{children}
133-
</span>
134-
)}
135-
</TooltipTrigger>
136-
);
137-
138-
export default Tooltip;
139-
```
140-
141-
Then you can use it as shown in the example below.
142-
143-
```jsx
144-
<Tooltip placement="top" trigger="click" tooltip="Hi there!">
145-
Click me
146-
</Tooltip>
147-
```
148-
14985
## Examples
15086

15187
To fiddle with our example recipes, run:
@@ -275,24 +211,13 @@ Recommended usage with hover trigger and no arrow element
275211
> `object`
276212
277213
Modifiers passed directly to the underlying popper.js instance.
278-
For more information, refer to Popper.js’
279-
[modifier docs](https://popper.js.org/popper-documentation.html#modifiers)
280-
281-
Default modifiers:
282-
283-
```
284-
{
285-
preventOverflow: {
286-
boundariesElement: 'viewport'
287-
}
288-
}
289-
```
214+
For more information, refer to Popper.js’ [modifier docs](https://popper.js.org/docs/v2/modifiers)
290215

291216
### mutationObserverOptions
292217

293218
> `object`
294219
295-
Options to `MutationObserver`, used internally for updating tooltip position based on trigger DOM changes.
220+
Options to `MutationObserver`, used internally for updating tooltip position based on its DOM changes.
296221
For more information, refer to [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) docs.
297222

298223
Default options:

‎docs/examples/BasicTooltipTrigger.tsx‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,18 @@
11
import React, { memo } from 'react';
22
import TooltipTrigger from '../../src';
3-
import '../../src/styles.css';
43
import { ChildrenArg, TooltipArg } from '../../src';
54
import { BasicTooltipTriggerProps } from './types';
5+
import './styles.css';
6+
7+
const modifiers = [
8+
{
9+
name: 'offset',
10+
enabled: true,
11+
options: {
12+
offset: [0, 4],
13+
},
14+
},
15+
];
616

717
const Trigger = (children: React.ReactNode) => ({
818
triggerRef,
@@ -45,7 +55,11 @@ const Tooltip = (tooltip: React.ReactNode, hideArrow?: boolean) => ({
4555

4656
const BasicTooltipTrigger = memo(
4757
({ tooltip, children, hideArrow, ...props }: BasicTooltipTriggerProps) => (
48-
<TooltipTrigger {...props} tooltip={Tooltip(tooltip, hideArrow)}>
58+
<TooltipTrigger
59+
{...props}
60+
modifiers={modifiers}
61+
tooltip={Tooltip(tooltip, hideArrow)}
62+
>
4963
{Trigger(children)}
5064
</TooltipTrigger>
5165
)

‎src/styles.css‎ renamed to ‎docs/examples/styles.css‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,12 @@
22
background-color: white;
33
border-radius: 3px;
44
border: 1px solid silver;
5-
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
5+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
66
display: flex;
77
flex-direction: column;
8-
margin: 0.4rem;
98
padding: 0.4rem;
109
transition: opacity 0.3s;
11-
z-index: 2147483647;
10+
z-index: 9999;
1211
}
1312

1413
.tooltip-arrow {

‎package.json‎

Lines changed: 32 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,21 @@
11
{
22
"name": "react-popper-tooltip",
3-
"version": "2.11.1",
3+
"version": "3.0.0",
44
"description": "React tooltip library built around react-popper",
5-
"homepage": "https://react-popper-tooltip.netlify.com",
5+
"homepage": "https://react-popper-tooltip.netlify.app",
66
"repository": {
77
"type": "git",
88
"url": "https://github.com/mohsinulhaq/react-popper-tooltip"
99
},
1010
"main": "dist/cjs/react-popper-tooltip.js",
1111
"module": "dist/esm/react-popper-tooltip.js",
12-
"style": "dist/styles.css",
1312
"typings": "dist/index.d.ts",
1413
"files": [
1514
"dist"
1615
],
17-
"sideEffects": [
18-
"*.css"
19-
],
16+
"sideEffects": false,
2017
"scripts": {
21-
"build": "rm -rf dist && rollup -c && cp src/styles.css dist && yarn tsc && rm -rf compiled",
18+
"build": "rm -rf dist && rollup -c && yarn tsc && rm -rf compiled",
2219
"prepublishOnly": "yarn typecheck && yarn lint && yarn build && yarn test",
2320
"prettier": "prettier --write src/**/*.{ts,tsx}",
2421
"docs": "docz dev",
@@ -53,38 +50,39 @@
5350
"react-dom": "^16.6.0"
5451
},
5552
"dependencies": {
56-
"@babel/runtime": "^7.9.2",
57-
"react-popper": "^1.3.7"
53+
"@babel/runtime": "^7.10.4",
54+
"@popperjs/core": "^2.4.3",
55+
"react-popper": "^2.2.3"
5856
},
5957
"devDependencies": {
60-
"@babel/cli": "^7.8.4",
61-
"@babel/core": "^7.9.0",
62-
"@babel/plugin-proposal-class-properties": "^7.8.3",
63-
"@babel/plugin-transform-runtime": "^7.9.0",
64-
"@babel/preset-env": "^7.9.0",
65-
"@babel/preset-react": "^7.9.4",
66-
"@babel/preset-typescript": "^7.9.0",
67-
"@testing-library/react": "^10.0.2",
68-
"@types/jest": "^25.1.4",
69-
"@types/react": "^16.9.31",
70-
"@types/react-dom": "^16.9.6",
71-
"@typescript-eslint/eslint-plugin": "^2.26.0",
72-
"@typescript-eslint/parser": "^2.26.0",
73-
"docz": "^2.2.0",
74-
"eslint": "^6.8.0",
75-
"eslint-config-prettier": "^6.10.1",
76-
"eslint-plugin-prettier": "^3.1.2",
77-
"eslint-plugin-react": "^7.19.0",
78-
"husky": "^4.2.3",
79-
"jest": "^25.2.4",
80-
"lint-staged": "^10.1.1",
81-
"prettier": "^2.0.2",
58+
"@babel/cli": "^7.10.4",
59+
"@babel/core": "^7.10.4",
60+
"@babel/plugin-proposal-class-properties": "^7.10.4",
61+
"@babel/plugin-transform-runtime": "^7.10.4",
62+
"@babel/preset-env": "^7.10.4",
63+
"@babel/preset-react": "^7.10.4",
64+
"@babel/preset-typescript": "^7.10.4",
65+
"@testing-library/react": "^10.4.3",
66+
"@types/jest": "^26.0.3",
67+
"@types/react": "^16.9.41",
68+
"@types/react-dom": "^16.9.8",
69+
"@typescript-eslint/eslint-plugin": "^3.5.0",
70+
"@typescript-eslint/parser": "^3.5.0",
71+
"docz": "^2.3.1",
72+
"eslint": "^7.3.1",
73+
"eslint-config-prettier": "^6.11.0",
74+
"eslint-plugin-prettier": "^3.1.4",
75+
"eslint-plugin-react": "^7.20.3",
76+
"husky": "^4.2.5",
77+
"jest": "^26.1.0",
78+
"lint-staged": "^10.2.11",
79+
"prettier": "^2.0.5",
8280
"react": "^16.12.0",
8381
"react-dom": "^16.12.0",
84-
"rollup": "^2.3.2",
82+
"rollup": "^2.18.1",
8583
"rollup-plugin-babel": "^4.4.0",
8684
"rollup-plugin-node-resolve": "^5.2.0",
87-
"rollup-plugin-size-snapshot": "^0.11.0",
88-
"typescript": "^3.8.3"
85+
"rollup-plugin-size-snapshot": "^0.12.0",
86+
"typescript": "^3.9.5"
8987
}
9088
}

‎src/Tooltip.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ class Tooltip extends Component<TooltipProps> {
1515

1616
public componentDidMount() {
1717
const observer = (this.observer = new MutationObserver(() => {
18-
this.props.scheduleUpdate();
18+
this.props.update();
1919
}));
2020
observer.observe(this.tooltipRef!, this.props.mutationObserverOptions);
2121

@@ -40,7 +40,7 @@ class Tooltip extends Component<TooltipProps> {
4040
}
4141

4242
public componentDidUpdate() {
43-
if (this.props.closeOnOutOfBoundaries && this.props.outOfBoundaries) {
43+
if (this.props.closeOnReferenceHidden && this.props.isReferenceHidden) {
4444
this.props.hideTooltip();
4545
}
4646
}

0 commit comments

Comments
 (0)