Skip to content

Commit 6b30c8f

Browse files
KaWaiteKaWaite
committed
use prettier in example proj too
1 parent c287eb1 commit 6b30c8f

File tree

4 files changed

+102
-60
lines changed

4 files changed

+102
-60
lines changed

‎.eslintignore

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1 @@
11
/dist
2-
/example

‎example/src/App.tsx

Lines changed: 83 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,19 @@
11
import { useState } from "react";
2-
import { GridWrapper, GridSection, GridArea, GridItem, Alignment } from "react-align";
2+
import {
3+
GridWrapper,
4+
GridSection,
5+
GridArea,
6+
GridItem,
7+
Alignment,
8+
} from "react-align";
39

4-
type Item = { id: string, location: string, index: number, extended: boolean; extendable: boolean; };
10+
type Item = {
11+
id: string;
12+
location: string;
13+
index: number;
14+
extended: boolean;
15+
extendable: boolean;
16+
};
517

618
const initItems: Item[] = [
719
{ id: "A", location: "1", index: 0, extended: false, extendable: false },
@@ -19,23 +31,32 @@ const initAlignments: Record<string, Alignment> = {
1931
"7": "start",
2032
"8": "start",
2133
"9": "start",
22-
}
34+
};
2335

2436
const hoz = (l: string) => l === "4" || l === "6";
2537
const ver = (l: string) => l === "2" || l === "8";
2638
const ItemComponent = (item: Item, i: number) => (
27-
<GridItem id={item.id} index={i} key={item.id} extendable={item.extendable} extended={item.extended}>
39+
<GridItem
40+
id={item.id}
41+
index={i}
42+
key={item.id}
43+
extendable={item.extendable}
44+
extended={item.extended}
45+
>
2846
<div
2947
style={{
3048
fontSize: "24px",
3149
width: item.extended && hoz(item.location) ? "100%" : "200px",
3250
height: item.extended && ver(item.location) ? "100%" : "50px",
3351
background: "#ddd",
3452
padding: "10px",
35-
boxSizing: "border-box"
36-
}}>{item.id}</div>
53+
boxSizing: "border-box",
54+
}}
55+
>
56+
{item.id}
57+
</div>
3758
</GridItem>
38-
)
59+
);
3960

4061
function App() {
4162
const [edit, setEdit] = useState(false);
@@ -46,13 +67,16 @@ function App() {
4667
<GridWrapper
4768
editing={edit}
4869
onMove={(...args) => {
49-
console.log('move', ...args);
50-
setItems(items => {
51-
const target = items.find(i => i.id === args[0]);
70+
console.log("move", ...args);
71+
setItems((items) => {
72+
const target = items.find((i) => i.id === args[0]);
5273
if (!target) return items;
53-
const sibilings = items.filter(i => i.location === args[1]);
74+
const sibilings = items.filter((i) => i.location === args[1]);
5475
if (args[1] === args[3]) {
55-
sibilings.splice(sibilings.findIndex(i => i.id === args[0]), 1);
76+
sibilings.splice(
77+
sibilings.findIndex((i) => i.id === args[0]),
78+
1
79+
);
5680
}
5781
sibilings.splice(args[2], 0, target);
5882
target.location = args[1];
@@ -63,23 +87,24 @@ function App() {
6387
});
6488
}}
6589
onAlignChange={(...args) => {
66-
console.log('alignmentChange', ...args);
67-
setAlignments(a => ({
90+
console.log("alignmentChange", ...args);
91+
setAlignments((a) => ({
6892
...a,
69-
[args[0]]: args[1]
93+
[args[0]]: args[1],
7094
}));
7195
}}
7296
onExtend={(...args) => {
73-
console.log('extend', ...args);
74-
setItems(items => {
75-
const target = items.find(i => i.id === args[0]);
97+
console.log("extend", ...args);
98+
setItems((items) => {
99+
const target = items.find((i) => i.id === args[0]);
76100
if (!target) return items;
77101
target.extended = args[1];
78102
return [...items];
79103
});
80-
}}>
104+
}}
105+
>
81106
<GridSection>
82-
{["1", "2", "3"].map(l => (
107+
{["1", "2", "3"].map((l) => (
83108
<GridArea
84109
id={l}
85110
key={l}
@@ -88,32 +113,42 @@ function App() {
88113
vertical={l === "2"}
89114
stretch={l === "2"}
90115
editorStyle={{ background: l === "2" ? "blue" : "red" }}
91-
iconColor={l === "2" ? "red" : "blue"}>
92-
{items.filter(i => i.location === l).sort((a, b) => a.index - b.index).map(ItemComponent)}
116+
iconColor={l === "2" ? "red" : "blue"}
117+
>
118+
{items
119+
.filter((i) => i.location === l)
120+
.sort((a, b) => a.index - b.index)
121+
.map(ItemComponent)}
93122
</GridArea>
94123
))}
95124
</GridSection>
96125
<GridSection stretch>
97-
{["4", "5", "6"].map(l => l == "5" ? (
98-
<div
99-
key={l}
100-
style={{ flex: "auto" }}>
101-
<button onClick={() => setEdit(e => !e)}>{edit ? "Finish" : "Start"} editing</button>
102-
</div>
103-
) : (
104-
<GridArea
105-
id={l}
106-
key={l}
107-
align={alignments[l]}
108-
end={l === "6"}
109-
editorStyle={{ background: "red" }}
110-
iconColor={"blue"}>
111-
{items.filter(i => i.location === l).sort((a, b) => a.index - b.index).map(ItemComponent)}
112-
</GridArea>
113-
))}
126+
{["4", "5", "6"].map((l) =>
127+
l == "5" ? (
128+
<div key={l} style={{ flex: "auto" }}>
129+
<button onClick={() => setEdit((e) => !e)}>
130+
{edit ? "Finish" : "Start"} editing
131+
</button>
132+
</div>
133+
) : (
134+
<GridArea
135+
id={l}
136+
key={l}
137+
align={alignments[l]}
138+
end={l === "6"}
139+
editorStyle={{ background: "red" }}
140+
iconColor={"blue"}
141+
>
142+
{items
143+
.filter((i) => i.location === l)
144+
.sort((a, b) => a.index - b.index)
145+
.map(ItemComponent)}
146+
</GridArea>
147+
)
148+
)}
114149
</GridSection>
115150
<GridSection>
116-
{["7", "8", "9"].map(l => (
151+
{["7", "8", "9"].map((l) => (
117152
<GridArea
118153
id={l}
119154
key={l}
@@ -122,13 +157,17 @@ function App() {
122157
vertical={l === "8"}
123158
stretch={l === "8"}
124159
editorStyle={{ background: l === "8" ? "blue" : "red" }}
125-
iconColor={l === "8" ? "red" : "blue"}>
126-
{items.filter(i => i.location === l).sort((a, b) => a.index - b.index).map(ItemComponent)}
160+
iconColor={l === "8" ? "red" : "blue"}
161+
>
162+
{items
163+
.filter((i) => i.location === l)
164+
.sort((a, b) => a.index - b.index)
165+
.map(ItemComponent)}
127166
</GridArea>
128167
))}
129168
</GridSection>
130169
</GridWrapper>
131-
)
170+
);
132171
}
133172

134-
export default App
173+
export default App;

‎example/src/main.tsx

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
1-
import { StrictMode } from 'react'
2-
import {createRoot} from 'react-dom/client'
3-
import './index.css'
4-
import App from './App'
1+
import { StrictMode } from "react";
2+
import { createRoot } from "react-dom/client";
3+
import "./index.css";
4+
import App from "./App";
55

6-
const container = document.getElementById("root")
6+
const container = document.getElementById("root");
77
if (!container) throw new Error("root element is not found");
8-
const root = createRoot(container)
9-
root.render(<StrictMode><App /></StrictMode>)
8+
const root = createRoot(container);
9+
root.render(
10+
<StrictMode>
11+
<App />
12+
</StrictMode>
13+
);

‎example/vite.config.ts

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
import { defineConfig } from 'vite'
2-
import react from '@vitejs/plugin-react'
3-
import reactSvgPlugin from 'vite-plugin-react-svg'
1+
import { defineConfig } from "vite";
2+
import react from "@vitejs/plugin-react";
3+
import reactSvgPlugin from "vite-plugin-react-svg";
44

55
// https://vitejs.dev/config/
66
export default defineConfig({
7-
plugins: [reactSvgPlugin({ defaultExport: 'component' }), react()],
8-
server:{
7+
plugins: [reactSvgPlugin({ defaultExport: "component" }), react()],
8+
server: {
99
port: 3001,
10-
open: true
11-
}
12-
})
10+
open: true,
11+
},
12+
});

0 commit comments

Comments
 (0)