Skip to content

Commit

Permalink
Use prettierrc
Browse files Browse the repository at this point in the history
  • Loading branch information
@ooade
ooade committed Jun 4, 2020
1 parent 00a6b07 commit b2caa9e
Show file tree
Hide file tree
Showing 2 changed files with 133 additions and 133 deletions.
214 changes: 107 additions & 107 deletions __tests__/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,122 +1,122 @@
import React from "react";
import { render, fireEvent } from "@testing-library/react";
import ClickAwayListener from "../src";
import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import ClickAwayListener from '../src';

describe("ClickAway Listener", () => {
it("should render properly", () => {
const { getByText } = render(
<ClickAwayListener onClickAway={() => null}>
Hello World
</ClickAwayListener>
);
expect(getByText(/Hello World/i)).toBeTruthy();
});
describe('ClickAway Listener', () => {
it('should render properly', () => {
const { getByText } = render(
<ClickAwayListener onClickAway={() => null}>
Hello World
</ClickAwayListener>
);
expect(getByText(/Hello World/i)).toBeTruthy();
});

it("should trigger onClickAway only when an element is clicked outside", () => {
const fakeHandleClick = jest.fn();
const { getByText } = render(
<React.Fragment>
<ClickAwayListener onClickAway={fakeHandleClick}>
Hello World
</ClickAwayListener>
<button>A button</button>
<p>A text element</p>
</React.Fragment>
);
it('should trigger onClickAway only when an element is clicked outside', () => {
const fakeHandleClick = jest.fn();
const { getByText } = render(
<React.Fragment>
<ClickAwayListener onClickAway={fakeHandleClick}>
Hello World
</ClickAwayListener>
<button>A button</button>
<p>A text element</p>
</React.Fragment>
);

fireEvent.click(getByText(/A button/i));
fireEvent.click(getByText(/A text element/i));
fireEvent.click(getByText(/Hello World/i));
expect(fakeHandleClick).toBeCalledTimes(2);
});
fireEvent.click(getByText(/A button/i));
fireEvent.click(getByText(/A text element/i));
fireEvent.click(getByText(/Hello World/i));
expect(fakeHandleClick).toBeCalledTimes(2);
});

it("works with different mouse events", () => {
const fakeHandleClick = jest.fn();
const { getByText } = render(
<React.Fragment>
<ClickAwayListener onClickAway={fakeHandleClick} mouseEvent="mousedown">
Hello World
</ClickAwayListener>
<button>A button</button>
<p>A text element</p>
</React.Fragment>
);
it('works with different mouse events', () => {
const fakeHandleClick = jest.fn();
const { getByText } = render(
<React.Fragment>
<ClickAwayListener onClickAway={fakeHandleClick} mouseEvent="mousedown">
Hello World
</ClickAwayListener>
<button>A button</button>
<p>A text element</p>
</React.Fragment>
);

fireEvent.mouseDown(getByText(/A button/i));
fireEvent.mouseDown(getByText(/A text element/i));
fireEvent.mouseDown(getByText(/Hello World/i));
expect(fakeHandleClick).toBeCalledTimes(2);
});
fireEvent.mouseDown(getByText(/A button/i));
fireEvent.mouseDown(getByText(/A text element/i));
fireEvent.mouseDown(getByText(/Hello World/i));
expect(fakeHandleClick).toBeCalledTimes(2);
});

it("returns the event object", () => {
const handleClick = (event: MouseEvent | TouchEvent) => {
expect(event.type).toBe("click");
};
it('returns the event object', () => {
const handleClick = (event: MouseEvent | TouchEvent) => {
expect(event.type).toBe('click');
};

const { getByText } = render(
<React.Fragment>
<ClickAwayListener onClickAway={handleClick}>
Hello World
</ClickAwayListener>
<button>A button</button>
</React.Fragment>
);
const { getByText } = render(
<React.Fragment>
<ClickAwayListener onClickAway={handleClick}>
Hello World
</ClickAwayListener>
<button>A button</button>
</React.Fragment>
);

fireEvent.click(getByText(/A button/i));
});
fireEvent.click(getByText(/A button/i));
});

it("works with different touch events", () => {
const fakeHandleClick = jest.fn();
const { getByText } = render(
<React.Fragment>
<ClickAwayListener onClickAway={fakeHandleClick} touchEvent="touchend">
Hello World
</ClickAwayListener>
<button>A button</button>
<p>A text element</p>
</React.Fragment>
);
it('works with different touch events', () => {
const fakeHandleClick = jest.fn();
const { getByText } = render(
<React.Fragment>
<ClickAwayListener onClickAway={fakeHandleClick} touchEvent="touchend">
Hello World
</ClickAwayListener>
<button>A button</button>
<p>A text element</p>
</React.Fragment>
);

fireEvent.touchEnd(getByText(/A button/i));
fireEvent.touchEnd(getByText(/A text element/i));
fireEvent.touchEnd(getByText(/Hello World/i));
expect(fakeHandleClick).toBeCalledTimes(2);
});
fireEvent.touchEnd(getByText(/A button/i));
fireEvent.touchEnd(getByText(/A text element/i));
fireEvent.touchEnd(getByText(/Hello World/i));
expect(fakeHandleClick).toBeCalledTimes(2);
});

it("should handle multiple cases", () => {
const fakeHandleClick = jest.fn();
const fakeHandleClick2 = jest.fn();
const { getByTestId } = render(
<React.Fragment>
<ClickAwayListener onClickAway={fakeHandleClick}>
<div data-testid="hello-world">Hello World</div>
</ClickAwayListener>
<button data-testid="button-one">A button</button>
<button data-testid="some-other-button-one">Some other button</button>
<p data-testid="text-one">A text element</p>
it('should handle multiple cases', () => {
const fakeHandleClick = jest.fn();
const fakeHandleClick2 = jest.fn();
const { getByTestId } = render(
<React.Fragment>
<ClickAwayListener onClickAway={fakeHandleClick}>
<div data-testid="hello-world">Hello World</div>
</ClickAwayListener>
<button data-testid="button-one">A button</button>
<button data-testid="some-other-button-one">Some other button</button>
<p data-testid="text-one">A text element</p>

<ClickAwayListener onClickAway={fakeHandleClick2}>
<div data-testid="foo-bar">Foo bar</div>
</ClickAwayListener>
<button data-testid="button-two">Foo bar button</button>
<button data-testid="some-other-button-two">
Foo bar other button
</button>
<p data-testid="text-two">Foo bar text element</p>
</React.Fragment>
);
<ClickAwayListener onClickAway={fakeHandleClick2}>
<div data-testid="foo-bar">Foo bar</div>
</ClickAwayListener>
<button data-testid="button-two">Foo bar button</button>
<button data-testid="some-other-button-two">
Foo bar other button
</button>
<p data-testid="text-two">Foo bar text element</p>
</React.Fragment>
);

fireEvent.click(getByTestId("button-one"));
fireEvent.click(getByTestId("text-one"));
fireEvent.click(getByTestId("hello-world"));
fireEvent.click(getByTestId("some-other-button-one"));
expect(fakeHandleClick).toBeCalledTimes(3);
fireEvent.click(getByTestId('button-one'));
fireEvent.click(getByTestId('text-one'));
fireEvent.click(getByTestId('hello-world'));
fireEvent.click(getByTestId('some-other-button-one'));
expect(fakeHandleClick).toBeCalledTimes(3);

// 4 from the previous ones, and the 3 new ones
fireEvent.click(getByTestId("button-two"));
fireEvent.click(getByTestId("text-two"));
fireEvent.click(getByTestId("foo-bar"));
fireEvent.click(getByTestId("some-other-button-two"));
expect(fakeHandleClick2).toBeCalledTimes(7);
});
// 4 from the previous ones, and the 3 new ones
fireEvent.click(getByTestId('button-two'));
fireEvent.click(getByTestId('text-two'));
fireEvent.click(getByTestId('foo-bar'));
fireEvent.click(getByTestId('some-other-button-two'));
expect(fakeHandleClick2).toBeCalledTimes(7);
});
});
52 changes: 26 additions & 26 deletions src/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,41 +1,41 @@
import React, { useEffect, useRef, FunctionComponent } from "react";
import React, { useEffect, useRef, FunctionComponent } from 'react';

type MouseEvents = "click" | "mousedown" | "mouseup";
type TouchEvents = "touchstart" | "touchend";
type MouseEvents = 'click' | 'mousedown' | 'mouseup';
type TouchEvents = 'touchstart' | 'touchend';

interface Props {
onClickAway: (event: MouseEvent | TouchEvent) => void;
mouseEvent?: MouseEvents;
touchEvent?: TouchEvents;
onClickAway: (event: MouseEvent | TouchEvent) => void;
mouseEvent?: MouseEvents;
touchEvent?: TouchEvents;
}

const ClickAwayListener: FunctionComponent<Props> = ({
onClickAway,
mouseEvent = "click",
touchEvent = "touchend",
children,
onClickAway,
mouseEvent = 'click',
touchEvent = 'touchend',
children,
}) => {
let node = useRef<HTMLDivElement>(null);
let node = useRef<HTMLDivElement>(null);

useEffect(() => {
const handleEvents = (event: MouseEvent | TouchEvent): void => {
if (node.current && node.current.contains(event.target as Node)) {
return;
}
useEffect(() => {
const handleEvents = (event: MouseEvent | TouchEvent): void => {
if (node.current && node.current.contains(event.target as Node)) {
return;
}

onClickAway(event);
};
onClickAway(event);
};

document.addEventListener(mouseEvent, handleEvents);
document.addEventListener(touchEvent, handleEvents);
document.addEventListener(mouseEvent, handleEvents);
document.addEventListener(touchEvent, handleEvents);

return () => {
document.removeEventListener(mouseEvent, handleEvents);
document.removeEventListener(touchEvent, handleEvents);
};
});
return () => {
document.removeEventListener(mouseEvent, handleEvents);
document.removeEventListener(touchEvent, handleEvents);
};
});

return <div ref={node}>{children}</div>;
return <div ref={node}>{children}</div>;
};

export default ClickAwayListener;

0 comments on commit b2caa9e

Please sign in to comment.