Skip to content

Commit 661d87f

Browse files
yjoseyjose
authored
Merge pull request #86 from yjose/fixes
Fixes
2 parents 4920fcb + d44af18 commit 661d87f

File tree

7 files changed

+105
-42
lines changed

7 files changed

+105
-42
lines changed

‎__test__/__snapshots__/index.test.js.snap

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ exports[`it should close on click outside popup (closeOnDocumentClick = true ) 1
5656
}
5757
/>
5858
<div
59-
className="popup-overlay"
59+
className="popup-overlay "
6060
key="O"
6161
onClick={[Function]}
6262
style={
@@ -245,7 +245,7 @@ exports[`it should render correctly on click and will update the the popup conte
245245
}
246246
/>
247247
<div
248-
className="popup-overlay"
248+
className="popup-overlay "
249249
key="O"
250250
onClick={[Function]}
251251
style={
@@ -402,7 +402,7 @@ exports[`it should render correctly on click and will update the trigger text
402402
}
403403
/>
404404
<div
405-
className="popup-overlay"
405+
className="popup-overlay "
406406
key="O"
407407
onClick={[Function]}
408408
style={
@@ -554,7 +554,7 @@ exports[`it should rendered in the bottom center position 1`] = `
554554
}
555555
/>
556556
<div
557-
className="popup-overlay"
557+
className="popup-overlay "
558558
key="O"
559559
onClick={[Function]}
560560
style={
@@ -659,7 +659,7 @@ exports[`it should rendered in the bottom left position 1`] = `
659659
}
660660
/>
661661
<div
662-
className="popup-overlay"
662+
className="popup-overlay "
663663
key="O"
664664
onClick={[Function]}
665665
style={
@@ -764,7 +764,7 @@ exports[`it should rendered in the bottom right position 1`] = `
764764
}
765765
/>
766766
<div
767-
className="popup-overlay"
767+
className="popup-overlay "
768768
key="O"
769769
onClick={[Function]}
770770
style={
@@ -869,7 +869,7 @@ exports[`it should rendered in the left bottom position 1`] = `
869869
}
870870
/>
871871
<div
872-
className="popup-overlay"
872+
className="popup-overlay "
873873
key="O"
874874
onClick={[Function]}
875875
style={
@@ -974,7 +974,7 @@ exports[`it should rendered in the left center position 1`] = `
974974
}
975975
/>
976976
<div
977-
className="popup-overlay"
977+
className="popup-overlay "
978978
key="O"
979979
onClick={[Function]}
980980
style={
@@ -1079,7 +1079,7 @@ exports[`it should rendered in the left top position 1`] = `
10791079
}
10801080
/>
10811081
<div
1082-
className="popup-overlay"
1082+
className="popup-overlay "
10831083
key="O"
10841084
onClick={[Function]}
10851085
style={
@@ -1184,7 +1184,7 @@ exports[`it should rendered in the right bottom position 1`] = `
11841184
}
11851185
/>
11861186
<div
1187-
className="popup-overlay"
1187+
className="popup-overlay "
11881188
key="O"
11891189
onClick={[Function]}
11901190
style={
@@ -1289,7 +1289,7 @@ exports[`it should rendered in the right center position 1`] = `
12891289
}
12901290
/>
12911291
<div
1292-
className="popup-overlay"
1292+
className="popup-overlay "
12931293
key="O"
12941294
onClick={[Function]}
12951295
style={
@@ -1394,7 +1394,7 @@ exports[`it should rendered in the right top position 1`] = `
13941394
}
13951395
/>
13961396
<div
1397-
className="popup-overlay"
1397+
className="popup-overlay "
13981398
key="O"
13991399
onClick={[Function]}
14001400
style={
@@ -1499,7 +1499,7 @@ exports[`it should rendered in the top center position 1`] = `
14991499
}
15001500
/>
15011501
<div
1502-
className="popup-overlay"
1502+
className="popup-overlay "
15031503
key="O"
15041504
onClick={[Function]}
15051505
style={
@@ -1604,7 +1604,7 @@ exports[`it should rendered in the top left position 1`] = `
16041604
}
16051605
/>
16061606
<div
1607-
className="popup-overlay"
1607+
className="popup-overlay "
16081608
key="O"
16091609
onClick={[Function]}
16101610
style={
@@ -1709,7 +1709,7 @@ exports[`it should rendered in the top right position 1`] = `
17091709
}
17101710
/>
17111711
<div
1712-
className="popup-overlay"
1712+
className="popup-overlay "
17131713
key="O"
17141714
onClick={[Function]}
17151715
style={
@@ -1813,7 +1813,7 @@ exports[`it shouldn't close on click outside popup 1`] = `
18131813
}
18141814
/>
18151815
<div
1816-
className="popup-overlay"
1816+
className="popup-overlay "
18171817
key="O"
18181818
onClick={[Function]}
18191819
style={

‎docs/src/mdPages/3.componentApi.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ The reactjs-popup API is inspired by semantic popup docs
3535
| contentStyle | | {object} | Custom popup content style |
3636
| overlayStyle | | {object} | Custom overlay style <br/> Note: `top` and `left` property will not be overridden. |
3737
| arrowStyle | | {object} | Custom arrow style <br/> Note: `transform` property will not be overridden. |
38+
| className | | {string} | Custom Popup ClassName <br/> Note: this class name will be merged with the component element: ex `className='foo'` means `foo-arrow` to style arrow, `foo-overlay` to style overlay and `foo-content` to style popup content |
3839
| keepTooltipInside | true | {bool,string} | html selector, class name or id element that the tooltip must be inside (defaults to `window` if keepTooltipInside = true) default false |
3940

4041
### Example : on focus

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@
1717
},
1818
"peerDependencies": {
1919
"react": "^16.0.0",
20-
"react-dom": "^16.0.0"
20+
"react-dom": "^16.0.0",
21+
"prop-types": "^15.6.0"
2122
},
2223
"devDependencies": {
2324
"@babel/core": "^7.2.2",

‎src/index.js

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -202,6 +202,7 @@ export default class Popup extends React.PureComponent {
202202
offsetY,
203203
keepTooltipInside,
204204
arrowStyle,
205+
className,
205206
} = this.props;
206207
const helper = this.HelperEl.getBoundingClientRect();
207208
const trigger = this.TriggerEl.getBoundingClientRect();
@@ -232,6 +233,10 @@ export default class Popup extends React.PureComponent {
232233
this.ArrowEl.style['-webkit-transform'] = cords.transform;
233234
this.ArrowEl.style.top = arrowStyle.top || cords.arrowTop;
234235
this.ArrowEl.style.left = arrowStyle.left || cords.arrowLeft;
236+
this.ArrowEl.classList.add(`popup-arrow`);
237+
if (className !== '') {
238+
this.ArrowEl.classList.add(`${className}-arrow`);
239+
}
235240
}
236241
if (
237242
/* eslint-disable-next-line no-undef */
@@ -254,7 +259,9 @@ export default class Popup extends React.PureComponent {
254259
: styles.popupContent.tooltip;
255260

256261
const childrenElementProps = {
257-
className: `popup-content ${className}`,
262+
className: `popup-content ${
263+
className !== '' ? `${className}-content` : ''
264+
}`,
258265
style: Object.assign({}, popupContentStyle, contentStyle),
259266
ref: this.setContentRef,
260267
onClick: e => {
@@ -314,7 +321,13 @@ export default class Popup extends React.PureComponent {
314321
};
315322

316323
render() {
317-
const {overlayStyle, closeOnDocumentClick, on, trigger} = this.props;
324+
const {
325+
overlayStyle,
326+
closeOnDocumentClick,
327+
className,
328+
on,
329+
trigger,
330+
} = this.props;
318331
const {modal, isOpen} = this.state;
319332
const overlay = isOpen && !(on.indexOf('hover') >= 0);
320333
const ovStyle = modal ? styles.overlay.modal : styles.overlay.tooltip;
@@ -334,7 +347,9 @@ export default class Popup extends React.PureComponent {
334347
overlay && (
335348
<div
336349
key="O"
337-
className="popup-overlay"
350+
className={`popup-overlay ${
351+
className !== '' ? `${className}-overlay` : ''
352+
}`}
338353
style={Object.assign({}, ovStyle, overlayStyle)}
339354
onClick={closeOnDocumentClick ? this.closePopup : undefined}>
340355
{modal && this.renderContent()}

‎stories/src/PopupElement.js

Lines changed: 17 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,42 @@
1-
import React from "react";
2-
import Popup from "../../src/";
3-
import { Centred } from "story-router";
1+
import React from 'react';
2+
import {Centred} from 'story-router';
3+
import Popup from '../../src/';
44

55
const Button = props => (
66
<button {...props}>
7-
{" "}
87
Button nested with offsetX
9-
{props.open ? "open" : "close"}{" "}
8+
{props.open ? 'open' : 'close'}{' '}
109
</button>
1110
);
1211

1312
const PopupElement = props => (
1413
<div>
15-
<div style={{ zIndex: "90" }}>
14+
<div style={{zIndex: '90'}}>
1615
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo voluptas s
1716
<Popup trigger={open => <Button open={open} />} {...props}>
1817
{close => <Content close={close} />}
1918
</Popup>
2019
</div>
2120

22-
<div style={{ zIndex: "90" }}>
23-
{" "}
21+
<div style={{zIndex: '90'}}>
22+
{' '}
2423
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo voluptas ex,
2524
blanditiis reiciendis dolor numquam pariatur facilis, labore, libero nihil
26-
asperiores ae facilis{" "}
25+
asperiores ae facilis{' '}
2726
</div>
2827
</div>
2928
);
3029

31-
const Content = ({ close }) => (
30+
const Content = ({close}) => (
3231
<div>
3332
sum dolor sit amet consectetur adipisicing elit. Nemo voluptas ex,
34-
blanditiis reiciendir voluptas tempora doloremque!{" "}
33+
blanditiis reiciendir voluptas tempora doloremque!{' '}
3534
<button onClick={close}>close</button>
3635
<Popup
37-
on={["click"]}
38-
position={"bottom left"}
39-
closeOnDocumentClick={true}
40-
trigger={<button>Button nested</button>}
41-
>
36+
on={['click']}
37+
position="bottom left"
38+
closeOnDocumentClick
39+
trigger={<button>Button nested</button>}>
4240
<div>
4341
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo voluptas
4442
ex, blanditiis reiciendis dolor numquam pariatur facilis, labore, libero
@@ -50,13 +48,13 @@ const Content = ({ close }) => (
5048
);
5149

5250
const PopupElementStory = {
53-
name: "Popup trigger function",
51+
name: 'Popup trigger function',
5452
component: Centred(PopupElement),
5553
props: {
5654
offsetX: 0,
5755
offsetY: 0,
58-
position: "top left"
59-
}
56+
position: 'top left',
57+
},
6058
};
6159

6260
export default PopupElementStory;

‎stories/src/PopupStyle.js

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
/* eslint-disable jsx-a11y/anchor-is-valid */
2+
import React from 'react';
3+
4+
import Popup from '../../src';
5+
6+
const PopupFuncProps = {
7+
className: 'test',
8+
arrowStyle: {},
9+
contentStyle: {},
10+
overlayStyle: {},
11+
on: 'click',
12+
};
13+
14+
const PopupStyle = props => (
15+
<div>
16+
<div style={{height: '800px'}}> scroll to bottom :) </div>
17+
<div style={{height: '100px', background: 'red', position: 'relative'}}>
18+
<Popup {...props} trigger={<button type="button"> Button 2</button>}>
19+
{close => (
20+
<div>
21+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo
22+
voluptas s lore Lorem ipsum dolor sit amet consectetur adipisicing
23+
elit. Nemo voluptas s loreLorem ipsum dolor sit amet consectetur
24+
adipisicing elit. Nemo voluptas s loreLorem ipsum dolor sit amet
25+
consectetur adipisicing elit. Nemo voluptas s lore
26+
<a
27+
className="close"
28+
onClick={close}
29+
style={{margin: '10px', background: 'red'}}>
30+
close here &times;
31+
</a>{' '}
32+
</div>
33+
)}
34+
</Popup>
35+
</div>
36+
</div>
37+
);
38+
39+
const PopupStyleStory = {
40+
name: 'Popup Style',
41+
component: PopupStyle,
42+
props: PopupFuncProps,
43+
};
44+
45+
export default PopupStyleStory;

‎stories/src/index.js

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react';
22
import {Centred} from 'story-router';
33
import Story from './Story';
44
// import { Centred } from "../../src/utils/";
5-
5+
import Popup from '../../src';
66
import PopupElementStory from './PopupElement';
77
import PopupFuncStory from './PopupFunc';
88
import PopupInputFocusStory from './PopupInputFocus';
@@ -12,14 +12,14 @@ import Menu from './Menu';
1212
import ControlledModal from './ControlledModal';
1313
import ControlledTooltip from './ControlledTooltip';
1414
import BoundedTooltip from './BoundedTooltip';
15+
import PopupStyle from './PopupStyle';
1516

1617
import CellTablePopupStory from './CellTablePopup';
1718

1819
import PopupHandleEventStory from './PopupHandleEvent';
1920

2021
import NestedLockScrollStory from './NestedLockScroll';
2122

22-
2323
const storyProps = {text: 'Parcel Storybook'};
2424
const buttonProps = {
2525
name: 'My Button',
@@ -39,7 +39,9 @@ export default [
3939
},
4040
{
4141
name: 'without Prop', // without props
42-
component: Centred(() => <button>Test without props</button>),
42+
component: Centred(() => (
43+
<Popup trigger={<button> trigger</button>}> content</Popup>
44+
)),
4345
},
4446
{
4547
name: 'Controlled Modal Component', // without props
@@ -85,4 +87,5 @@ export default [
8587
CellTablePopupStory,
8688
PopupHandleEventStory,
8789
NestedLockScrollStory,
90+
PopupStyle,
8891
];

0 commit comments

Comments
 (0)