Skip to content

Commit 7320819

Browse files
iamogbziamogbz
committed
style: switch indentation to 2 spaces
1 parent a21a38d commit 7320819

34 files changed

+865
-873
lines changed

‎.eslintrc.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,8 +42,8 @@
4242
"allowAllPropertiesOnSameLine": true
4343
}],
4444
"react/jsx-first-prop-new-line": [2, "multiline"],
45-
"react/jsx-indent": [2, 4],
46-
"react/jsx-indent-props": [2, 4],
45+
"react/jsx-indent": [2, 2],
46+
"react/jsx-indent-props": [2, 2],
4747
"prettier/prettier": 2
4848
},
4949
"settings": {

‎.prettierrc.json‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
2-
"bracketSpacing": true,
3-
"semi": true,
4-
"singleQuote": false,
5-
"tabWidth": 4,
6-
"trailingComma": "all"
2+
"bracketSpacing": true,
3+
"semi": true,
4+
"singleQuote": false,
5+
"tabWidth": 2,
6+
"trailingComma": "all"
77
}

‎config/mocks/DOMRect.ts‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
11
export default class DOMRect {
2-
bottom = 0;
3-
left = 0;
4-
right = 0;
5-
top = 0;
6-
constructor(
7-
// eslint-disable-next-line no-unused-vars
8-
public x = 0,
9-
// eslint-disable-next-line no-unused-vars
10-
public y = 0,
11-
// eslint-disable-next-line no-unused-vars
12-
public width = 0,
13-
// eslint-disable-next-line no-unused-vars
14-
public height = 0,
15-
) {
16-
this.left = x;
17-
this.top = y;
18-
this.right = x + width;
19-
this.bottom = y + height;
20-
}
2+
bottom = 0;
3+
left = 0;
4+
right = 0;
5+
top = 0;
6+
constructor(
7+
// eslint-disable-next-line no-unused-vars
8+
public x = 0,
9+
// eslint-disable-next-line no-unused-vars
10+
public y = 0,
11+
// eslint-disable-next-line no-unused-vars
12+
public width = 0,
13+
// eslint-disable-next-line no-unused-vars
14+
public height = 0,
15+
) {
16+
this.left = x;
17+
this.top = y;
18+
this.right = x + width;
19+
this.bottom = y + height;
20+
}
2121
}
2222

2323
Object.assign(window, { DOMRect });

‎config/mocks/ResizeObserver.ts‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
export default class ResizeObserver {
2-
observe() {
3-
// do nothing
4-
}
5-
unobserve() {
6-
// do nothing
7-
}
8-
disconnect() {
9-
// do nothing
10-
}
2+
observe() {
3+
// do nothing
4+
}
5+
unobserve() {
6+
// do nothing
7+
}
8+
disconnect() {
9+
// do nothing
10+
}
1111
}
1212

1313
Object.assign(window, { ResizeObserver });

‎demo/src/App.tsx‎

Lines changed: 28 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -5,34 +5,34 @@ import { Clock } from "./Clock";
55
import "./styles.css";
66

77
export default function App(): JSX.Element {
8-
const [usingPortal, setUsingPortal] = React.useState(false);
9-
const [ref, reflection] = useMirror({ className: "Frame" });
10-
return (
11-
<div className="App">
12-
<h1>React Mirror Demo</h1>
13-
<button
14-
className="Button"
15-
disabled={usingPortal}
16-
onClick={(): void => setUsingPortal(true)}
17-
>
18-
Start thinking with portals!
19-
</button>
8+
const [usingPortal, setUsingPortal] = React.useState(false);
9+
const [ref, reflection] = useMirror({ className: "Frame" });
10+
return (
11+
<div className="App">
12+
<h1>React Mirror Demo</h1>
13+
<button
14+
className="Button"
15+
disabled={usingPortal}
16+
onClick={(): void => setUsingPortal(true)}
17+
>
18+
Start thinking with portals!
19+
</button>
2020

21-
<div className="Demo">
22-
<div className="Frame" ref={ref}>
23-
<input className="Input" placeholder="type something..." />
24-
<div style={{ padding: 10 }}>Mirror mirror in my dom</div>
25-
<Clock />
26-
</div>
27-
28-
{usingPortal ? (
29-
<Window onClose={(): void => setUsingPortal(false)}>
30-
{reflection}
31-
</Window>
32-
) : (
33-
reflection
34-
)}
35-
</div>
21+
<div className="Demo">
22+
<div className="Frame" ref={ref}>
23+
<input className="Input" placeholder="type something..." />
24+
<div style={{ padding: 10 }}>Mirror mirror in my dom</div>
25+
<Clock />
3626
</div>
37-
);
27+
28+
{usingPortal ? (
29+
<Window onClose={(): void => setUsingPortal(false)}>
30+
{reflection}
31+
</Window>
32+
) : (
33+
reflection
34+
)}
35+
</div>
36+
</div>
37+
);
3838
}

‎demo/src/Clock.tsx‎

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -2,30 +2,30 @@ import * as React from "react";
22
import "./clock.css";
33

44
function useCurrent(): Date {
5-
const [date, setDate] = React.useState(new Date());
6-
React.useEffect(() => {
7-
const timeout = setTimeout(() => setDate(new Date()), 300);
8-
return (): void => clearTimeout(timeout);
9-
}, [date, setDate]);
10-
return date;
5+
const [date, setDate] = React.useState(new Date());
6+
React.useEffect(() => {
7+
const timeout = setTimeout(() => setDate(new Date()), 300);
8+
return (): void => clearTimeout(timeout);
9+
}, [date, setDate]);
10+
return date;
1111
}
1212

1313
export function Clock(): JSX.Element {
14-
const date = useCurrent();
15-
const ratios = {
16-
Second: date.getSeconds() / 60,
17-
Minute: date.getMinutes() / 60,
18-
Hour: (date.getHours() % 12) / 12,
19-
};
20-
return (
21-
<div className="Clock Face" data-name="MyClock">
22-
{Object.entries(ratios).map(([cls, ratio]) => (
23-
<span
24-
key={cls}
25-
className={`Clock Hand ${cls}`}
26-
style={{ transform: `rotate(${ratio * 360}deg)` }}
27-
></span>
28-
))}
29-
</div>
30-
);
14+
const date = useCurrent();
15+
const ratios = {
16+
Second: date.getSeconds() / 60,
17+
Minute: date.getMinutes() / 60,
18+
Hour: (date.getHours() % 12) / 12,
19+
};
20+
return (
21+
<div className="Clock Face" data-name="MyClock">
22+
{Object.entries(ratios).map(([cls, ratio]) => (
23+
<span
24+
key={cls}
25+
className={`Clock Hand ${cls}`}
26+
style={{ transform: `rotate(${ratio * 360}deg)` }}
27+
></span>
28+
))}
29+
</div>
30+
);
3131
}

‎demo/src/Window.tsx‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,24 @@ import * as React from "react";
22
import * as ReactDOM from "react-dom";
33

44
export function Window({
5-
onClose,
6-
children,
5+
onClose,
6+
children,
77
}: {
8-
onClose: () => void;
9-
children: React.ReactNode;
8+
onClose: () => void;
9+
children: React.ReactNode;
1010
}): JSX.Element {
11-
const portalWindow = React.useMemo(() => {
12-
const _window = window.open(
13-
"",
14-
"React Mirror Portal Test",
15-
"width=400,height=400",
16-
);
17-
_window?.addEventListener("beforeunload", onClose);
18-
return _window;
19-
}, [onClose]);
20-
const portal = React.useMemo(() => {
21-
if (!portalWindow?.document?.body) return;
22-
return ReactDOM.createPortal(children, portalWindow.document.body);
23-
}, [children, portalWindow]);
24-
return <>{portal}</>;
11+
const portalWindow = React.useMemo(() => {
12+
const _window = window.open(
13+
"",
14+
"React Mirror Portal Test",
15+
"width=400,height=400",
16+
);
17+
_window?.addEventListener("beforeunload", onClose);
18+
return _window;
19+
}, [onClose]);
20+
const portal = React.useMemo(() => {
21+
if (!portalWindow?.document?.body) return;
22+
return ReactDOM.createPortal(children, portalWindow.document.body);
23+
}, [children, portalWindow]);
24+
return <>{portal}</>;
2525
}

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
"lib"
3131
],
3232
"scripts": {
33-
"lint": "eslint . --ext .js,.ts",
33+
"lint": "eslint . --ext .js,.ts,.jsx,.tsx",
3434
"build": "webpack --mode=production",
3535
"build-watch": "webpack --mode=development --watch",
3636
"build-types": "tsc --declaration --emitDeclarationOnly --project tsconfig.prod.json",

‎src/__mocks__.ts‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,25 @@
11
export function addDomNode() {
2-
const domNode = document.createElement("div");
3-
document.body.appendChild(domNode);
4-
const node0 = document.createComment("comment node");
5-
document.appendChild(node0);
6-
const node1 = document.createElement("div");
7-
domNode.appendChild(node1);
8-
node1.className = "class1 one";
9-
node1.setAttribute("attr", "[value");
10-
const node2 = document.createElement("input");
11-
node1.appendChild(node2);
12-
node2.className = "class2 two";
13-
node2.value = "input-value";
14-
const node3 = document.createTextNode("text content");
15-
domNode.appendChild(node3);
16-
return domNode;
2+
const domNode = document.createElement("div");
3+
document.body.appendChild(domNode);
4+
const node0 = document.createComment("comment node");
5+
document.appendChild(node0);
6+
const node1 = document.createElement("div");
7+
domNode.appendChild(node1);
8+
node1.className = "class1 one";
9+
node1.setAttribute("attr", "[value");
10+
const node2 = document.createElement("input");
11+
node1.appendChild(node2);
12+
node2.className = "class2 two";
13+
node2.value = "input-value";
14+
const node3 = document.createTextNode("text content");
15+
domNode.appendChild(node3);
16+
return domNode;
1717
}
1818

1919
export function addDomStyles() {
20-
const domStyle = document.createElement("style");
21-
document.head.appendChild(domStyle);
22-
domStyle.innerHTML = `
20+
const domStyle = document.createElement("style");
21+
document.head.appendChild(domStyle);
22+
domStyle.innerHTML = `
2323
@charset "utf-8";
2424
@font-face {
2525
font-family: "Open Sans";
@@ -58,5 +58,5 @@ export function addDomStyles() {
5858
width: 20px;
5959
}
6060
`;
61-
return domStyle;
61+
return domStyle;
6262
}

‎src/__tests__/index.test.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
describe("Entry", () => {
2-
it("exports expected modules", async () => {
3-
// eslint-disable-next-line @typescript-eslint/no-var-requires
4-
expect(require("../")).toMatchInlineSnapshot(`
2+
it("exports expected modules", async () => {
3+
// eslint-disable-next-line @typescript-eslint/no-var-requires
4+
expect(require("../")).toMatchInlineSnapshot(`
55
Object {
66
"Frame": [Function],
77
"Mirror": [Function],
88
"Reflection": [Function],
99
"useMirror": [Function],
1010
}
1111
`);
12-
});
12+
});
1313
});

0 commit comments

Comments
 (0)