Skip to content

Commit ce78d5e

Browse files
ooadeooade
authored
Merge pull request #11 from ooade/patch/prettier-before-commit
Patch/prettier before commit
2 parents 894b01e + 95c55b1 commit ce78d5e

File tree

5 files changed

+233
-136
lines changed

5 files changed

+233
-136
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<a href="https://www.npmjs.org/package/react-click-away-listener"><img src="https://img.shields.io/npm/v/react-click-away-listener.svg?style=flat-square" alt="npm"></a>
66
<a href="https://travis-ci.org/ooade/react-click-away-listener"><img src="https://img.shields.io/travis/ooade/react-click-away-listener.svg?style=flat-square" alt="travis"></a>
77
<a href="https://github.com/ooade/react-click-away-listener"><img src="https://img.shields.io/codecov/c/github/ooade/react-click-away-listener.svg?style=flat-square" alt="code coverage"></a>
8-
<a href="https://github.com/ooade/react-click-away-listener"><img src="https://img.shields.io/npm/dm/react-click-away-listener.svg?style=flat-square" alt="downloads/month"></a>
8+
<a href="https://www.npmjs.org/package/react-click-away-listener"><img src="https://img.shields.io/npm/dm/react-click-away-listener.svg?style=flat-square" alt="downloads/month"></a>
99
<a href="http://makeapullrequest.com"><img src="https://img.shields.io/badge/PR(s)-welcome-brightgreen.svg?style=flat-square" alt="pullrequest"></a>
1010
<a href="http://www.firsttimersonly.com"><img src="https://img.shields.io/badge/first--timers--only-friendly-blue.svg?style=flat-square" alt="firsttimersonly"></a>
1111
</p>

‎__tests__/index.tsx‎

Lines changed: 107 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -1,122 +1,122 @@
1-
import React from 'react';
2-
import { render, fireEvent } from '@testing-library/react';
3-
import ClickAwayListener from '../src';
1+
import React from "react";
2+
import { render, fireEvent } from "@testing-library/react";
3+
import ClickAwayListener from "../src";
44

5-
describe('ClickAway Listener', () => {
6-
it('should render properly', () => {
7-
const { getByText } = render(
8-
<ClickAwayListener onClickAway={() => null}>
9-
Hello World
10-
</ClickAwayListener>
11-
);
12-
expect(getByText(/Hello World/i)).toBeTruthy();
13-
});
5+
describe("ClickAway Listener", () => {
6+
it("should render properly", () => {
7+
const { getByText } = render(
8+
<ClickAwayListener onClickAway={() => null}>
9+
Hello World
10+
</ClickAwayListener>
11+
);
12+
expect(getByText(/Hello World/i)).toBeTruthy();
13+
});
1414

15-
it('should trigger onClickAway only when an element is clicked outside', () => {
16-
const fakeHandleClick = jest.fn();
17-
const { getByText } = render(
18-
<React.Fragment>
19-
<ClickAwayListener onClickAway={fakeHandleClick}>
20-
Hello World
21-
</ClickAwayListener>
22-
<button>A button</button>
23-
<p>A text element</p>
24-
</React.Fragment>
25-
);
15+
it("should trigger onClickAway only when an element is clicked outside", () => {
16+
const fakeHandleClick = jest.fn();
17+
const { getByText } = render(
18+
<React.Fragment>
19+
<ClickAwayListener onClickAway={fakeHandleClick}>
20+
Hello World
21+
</ClickAwayListener>
22+
<button>A button</button>
23+
<p>A text element</p>
24+
</React.Fragment>
25+
);
2626

27-
fireEvent.click(getByText(/A button/i));
28-
fireEvent.click(getByText(/A text element/i));
29-
fireEvent.click(getByText(/Hello World/i));
30-
expect(fakeHandleClick).toBeCalledTimes(2);
31-
});
27+
fireEvent.click(getByText(/A button/i));
28+
fireEvent.click(getByText(/A text element/i));
29+
fireEvent.click(getByText(/Hello World/i));
30+
expect(fakeHandleClick).toBeCalledTimes(2);
31+
});
3232

33-
it('works with different mouse events', () => {
34-
const fakeHandleClick = jest.fn();
35-
const { getByText } = render(
36-
<React.Fragment>
37-
<ClickAwayListener onClickAway={fakeHandleClick} mouseEvent="mousedown">
38-
Hello World
39-
</ClickAwayListener>
40-
<button>A button</button>
41-
<p>A text element</p>
42-
</React.Fragment>
43-
);
33+
it("works with different mouse events", () => {
34+
const fakeHandleClick = jest.fn();
35+
const { getByText } = render(
36+
<React.Fragment>
37+
<ClickAwayListener onClickAway={fakeHandleClick} mouseEvent="mousedown">
38+
Hello World
39+
</ClickAwayListener>
40+
<button>A button</button>
41+
<p>A text element</p>
42+
</React.Fragment>
43+
);
4444

45-
fireEvent.mouseDown(getByText(/A button/i));
46-
fireEvent.mouseDown(getByText(/A text element/i));
47-
fireEvent.mouseDown(getByText(/Hello World/i));
48-
expect(fakeHandleClick).toBeCalledTimes(2);
49-
});
45+
fireEvent.mouseDown(getByText(/A button/i));
46+
fireEvent.mouseDown(getByText(/A text element/i));
47+
fireEvent.mouseDown(getByText(/Hello World/i));
48+
expect(fakeHandleClick).toBeCalledTimes(2);
49+
});
5050

51-
it('returns the event object', () => {
52-
const handleClick = (event: MouseEvent | TouchEvent) => {
53-
expect(event.type).toBe('click');
54-
};
51+
it("returns the event object", () => {
52+
const handleClick = (event: MouseEvent | TouchEvent) => {
53+
expect(event.type).toBe("click");
54+
};
5555

56-
const { getByText } = render(
57-
<React.Fragment>
58-
<ClickAwayListener onClickAway={handleClick}>
59-
Hello World
60-
</ClickAwayListener>
61-
<button>A button</button>
62-
</React.Fragment>
63-
);
56+
const { getByText } = render(
57+
<React.Fragment>
58+
<ClickAwayListener onClickAway={handleClick}>
59+
Hello World
60+
</ClickAwayListener>
61+
<button>A button</button>
62+
</React.Fragment>
63+
);
6464

65-
fireEvent.click(getByText(/A button/i));
66-
});
65+
fireEvent.click(getByText(/A button/i));
66+
});
6767

68-
it('works with different touch events', () => {
69-
const fakeHandleClick = jest.fn();
70-
const { getByText } = render(
71-
<React.Fragment>
72-
<ClickAwayListener onClickAway={fakeHandleClick} touchEvent="touchend">
73-
Hello World
74-
</ClickAwayListener>
75-
<button>A button</button>
76-
<p>A text element</p>
77-
</React.Fragment>
78-
);
68+
it("works with different touch events", () => {
69+
const fakeHandleClick = jest.fn();
70+
const { getByText } = render(
71+
<React.Fragment>
72+
<ClickAwayListener onClickAway={fakeHandleClick} touchEvent="touchend">
73+
Hello World
74+
</ClickAwayListener>
75+
<button>A button</button>
76+
<p>A text element</p>
77+
</React.Fragment>
78+
);
7979

80-
fireEvent.touchEnd(getByText(/A button/i));
81-
fireEvent.touchEnd(getByText(/A text element/i));
82-
fireEvent.touchEnd(getByText(/Hello World/i));
83-
expect(fakeHandleClick).toBeCalledTimes(2);
84-
});
80+
fireEvent.touchEnd(getByText(/A button/i));
81+
fireEvent.touchEnd(getByText(/A text element/i));
82+
fireEvent.touchEnd(getByText(/Hello World/i));
83+
expect(fakeHandleClick).toBeCalledTimes(2);
84+
});
8585

86-
it('should handle multiple cases', () => {
87-
const fakeHandleClick = jest.fn();
88-
const fakeHandleClick2 = jest.fn();
89-
const { getByTestId } = render(
90-
<React.Fragment>
91-
<ClickAwayListener onClickAway={fakeHandleClick}>
92-
<div data-testid="hello-world">Hello World</div>
93-
</ClickAwayListener>
94-
<button data-testid="button-one">A button</button>
95-
<button data-testid="some-other-button-one">Some other button</button>
96-
<p data-testid="text-one">A text element</p>
86+
it("should handle multiple cases", () => {
87+
const fakeHandleClick = jest.fn();
88+
const fakeHandleClick2 = jest.fn();
89+
const { getByTestId } = render(
90+
<React.Fragment>
91+
<ClickAwayListener onClickAway={fakeHandleClick}>
92+
<div data-testid="hello-world">Hello World</div>
93+
</ClickAwayListener>
94+
<button data-testid="button-one">A button</button>
95+
<button data-testid="some-other-button-one">Some other button</button>
96+
<p data-testid="text-one">A text element</p>
9797

98-
<ClickAwayListener onClickAway={fakeHandleClick2}>
99-
<div data-testid="foo-bar">Foo bar</div>
100-
</ClickAwayListener>
101-
<button data-testid="button-two">Foo bar button</button>
102-
<button data-testid="some-other-button-two">
103-
Foo bar other button
104-
</button>
105-
<p data-testid="text-two">Foo bar text element</p>
106-
</React.Fragment>
107-
);
98+
<ClickAwayListener onClickAway={fakeHandleClick2}>
99+
<div data-testid="foo-bar">Foo bar</div>
100+
</ClickAwayListener>
101+
<button data-testid="button-two">Foo bar button</button>
102+
<button data-testid="some-other-button-two">
103+
Foo bar other button
104+
</button>
105+
<p data-testid="text-two">Foo bar text element</p>
106+
</React.Fragment>
107+
);
108108

109-
fireEvent.click(getByTestId('button-one'));
110-
fireEvent.click(getByTestId('text-one'));
111-
fireEvent.click(getByTestId('hello-world'));
112-
fireEvent.click(getByTestId('some-other-button-one'));
113-
expect(fakeHandleClick).toBeCalledTimes(3);
109+
fireEvent.click(getByTestId("button-one"));
110+
fireEvent.click(getByTestId("text-one"));
111+
fireEvent.click(getByTestId("hello-world"));
112+
fireEvent.click(getByTestId("some-other-button-one"));
113+
expect(fakeHandleClick).toBeCalledTimes(3);
114114

115-
// 4 from the previous ones, and the 3 new ones
116-
fireEvent.click(getByTestId('button-two'));
117-
fireEvent.click(getByTestId('text-two'));
118-
fireEvent.click(getByTestId('foo-bar'));
119-
fireEvent.click(getByTestId('some-other-button-two'));
120-
expect(fakeHandleClick2).toBeCalledTimes(7);
121-
});
115+
// 4 from the previous ones, and the 3 new ones
116+
fireEvent.click(getByTestId("button-two"));
117+
fireEvent.click(getByTestId("text-two"));
118+
fireEvent.click(getByTestId("foo-bar"));
119+
fireEvent.click(getByTestId("some-other-button-two"));
120+
expect(fakeHandleClick2).toBeCalledTimes(7);
121+
});
122122
});

‎package.json‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@
1313
"build-tsc": "tsc -w",
1414
"prepublish": "npm run build",
1515
"build": "tsc && rollup -c rollup.config.js",
16-
"report-coverage": "cat ./coverage/lcov.info | codecov"
16+
"report-coverage": "cat ./coverage/lcov.info | codecov",
17+
"prettier": "prettier --write '{src,__tests__}/*.tsx'"
1718
},
1819
"files": [
1920
"dist",
@@ -35,7 +36,9 @@
3536
"eslint-plugin-jsx-a11y": "^6.2.0",
3637
"eslint-plugin-react": "^7.12.4",
3738
"eslint-plugin-react-hooks": "^1.6.0",
39+
"ghooks": "^2.0.4",
3840
"jest": "^24.9.0",
41+
"prettier": "^2.0.5",
3942
"react": "^16.11.0",
4043
"react-dom": "^16.11.0",
4144
"rollup": "^1.26.3",
@@ -55,5 +58,10 @@
5558
"transform": {
5659
"^.+\\.tsx?$": "ts-jest"
5760
}
61+
},
62+
"config": {
63+
"ghooks": {
64+
"pre-commit": "npm run prettier"
65+
}
5866
}
5967
}

‎src/index.tsx‎

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,41 @@
1-
import React, { useEffect, useRef, FunctionComponent } from 'react';
1+
import React, { useEffect, useRef, FunctionComponent } from "react";
22

3-
type MouseEvents = 'click' | 'mousedown' | 'mouseup';
4-
type TouchEvents = 'touchstart' | 'touchend';
3+
type MouseEvents = "click" | "mousedown" | "mouseup";
4+
type TouchEvents = "touchstart" | "touchend";
55

66
interface Props {
7-
onClickAway: (event: MouseEvent | TouchEvent) => void;
8-
mouseEvent?: MouseEvents;
9-
touchEvent?: TouchEvents;
7+
onClickAway: (event: MouseEvent | TouchEvent) => void;
8+
mouseEvent?: MouseEvents;
9+
touchEvent?: TouchEvents;
1010
}
1111

1212
const ClickAwayListener: FunctionComponent<Props> = ({
13-
onClickAway,
14-
mouseEvent = 'click',
15-
touchEvent = 'touchend',
16-
children
13+
onClickAway,
14+
mouseEvent = "click",
15+
touchEvent = "touchend",
16+
children,
1717
}) => {
18-
let node = useRef<HTMLDivElement>(null);
18+
let node = useRef<HTMLDivElement>(null);
1919

20-
useEffect(() => {
21-
const handleEvents = (event: MouseEvent | TouchEvent): void => {
22-
if (node.current && node.current.contains(event.target as Node)) {
23-
return;
24-
}
20+
useEffect(() => {
21+
const handleEvents = (event: MouseEvent | TouchEvent): void => {
22+
if (node.current && node.current.contains(event.target as Node)) {
23+
return;
24+
}
2525

26-
onClickAway(event);
27-
};
26+
onClickAway(event);
27+
};
2828

29-
document.addEventListener(mouseEvent, handleEvents);
30-
document.addEventListener(touchEvent, handleEvents);
29+
document.addEventListener(mouseEvent, handleEvents);
30+
document.addEventListener(touchEvent, handleEvents);
3131

32-
return () => {
33-
document.removeEventListener(mouseEvent, handleEvents);
34-
document.removeEventListener(touchEvent, handleEvents);
35-
};
36-
});
32+
return () => {
33+
document.removeEventListener(mouseEvent, handleEvents);
34+
document.removeEventListener(touchEvent, handleEvents);
35+
};
36+
});
3737

38-
return <div ref={node}>{children}</div>;
38+
return <div ref={node}>{children}</div>;
3939
};
4040

4141
export default ClickAwayListener;

0 commit comments

Comments
 (0)