Skip to content

Commit b2caa9e

Browse files
ooadeooade
committed
Use prettierrc
1 parent 00a6b07 commit b2caa9e

File tree

2 files changed

+133
-133
lines changed

2 files changed

+133
-133
lines changed

‎__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
});

‎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)