Skip to content

Commit 37a63d2

Browse files
oleggrishechkinoleggrishechkin
committed
Update react-tagged-state
1 parent f1ea4bb commit 37a63d2

File tree

3 files changed

+104
-98
lines changed

3 files changed

+104
-98
lines changed

‎frameworks/keyed/react-tagged-state/package-lock.json

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frameworks/keyed/react-tagged-state/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,6 @@
3333
"dependencies": {
3434
"react": "17.0.1",
3535
"react-dom": "17.0.1",
36-
"react-tagged-state": "1.0.11"
36+
"react-tagged-state": "1.1.7"
3737
}
3838
}

‎frameworks/keyed/react-tagged-state/src/main.jsx

Lines changed: 100 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -1,115 +1,121 @@
1-
import { memo } from "react";
2-
import { render } from "react-dom";
3-
import { createState , observer, compute } from "react-tagged-state";
1+
import {memo} from "react";
2+
import {render} from "react-dom";
3+
import {batch, mutated, useTagged} from "react-tagged-state";
44

55
const A = ["pretty", "large", "big", "small", "tall", "short", "long", "handsome", "plain", "quaint", "clean",
6-
"elegant", "easy", "angry", "crazy", "helpful", "mushy", "odd", "unsightly", "adorable", "important", "inexpensive",
7-
"cheap", "expensive", "fancy"];
6+
"elegant", "easy", "angry", "crazy", "helpful", "mushy", "odd", "unsightly", "adorable", "important", "inexpensive",
7+
"cheap", "expensive", "fancy"];
88
const C = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"];
99
const N = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse",
10-
"keyboard"];
10+
"keyboard"];
1111

1212
const random = (max) => Math.round(Math.random() * 1000) % max;
1313

1414
let nextId = 1;
1515

16-
const buildData = (count) => {
17-
const res = [];
18-
let index = 0;
19-
20-
for (; index < count; ++index) {
21-
res.push({
22-
id: nextId++,
23-
label: `${A[random(A.length)]} ${C[random(C.length)]} ${N[random(N.length)]}`
24-
})
25-
}
26-
27-
return res;
16+
const buildData = (res, count) => {
17+
for (let index = 0; index < count; index++) {
18+
res.push({
19+
id: nextId++,
20+
label: `${A[random(A.length)]} ${C[random(C.length)]} ${N[random(N.length)]}`
21+
})
22+
}
2823
}
2924

30-
const dataState = createState([]);
31-
32-
const selectedState = createState(0);
33-
34-
const update = (data) => {
35-
const newData = data.slice();
36-
let index = 0;
37-
let length = newData.length;
38-
let temp;
39-
40-
for (; index < length; index += 10) {
41-
temp = newData[index];
42-
43-
newData[index] = { id: temp.id, label: temp.label + " !!!" };
44-
}
45-
46-
return newData;
47-
};
48-
49-
const remove = (item) => (data) => {
50-
const newData = data.slice();
51-
52-
newData.splice(data.indexOf(item), 1);
53-
54-
return newData;
25+
const data = [];
26+
27+
let selected = 0;
28+
29+
const Row = memo(({item}) => {
30+
useTagged(item);
31+
32+
return (
33+
<tr className={selected === item.id ? "danger" : ""}>
34+
<td className="col-md-1">{item.id}</td>
35+
<td className="col-md-4">
36+
<a onClick={() => batch(() => {
37+
if (selected) {
38+
mutated(data.find(({id}) => id === selected));
39+
}
40+
41+
selected = item.id;
42+
mutated(item);
43+
})}>{item.label}</a>
44+
</td>
45+
<td className="col-md-1">
46+
<a onClick={() => {
47+
data.splice(data.indexOf(item), 1);
48+
mutated(data);
49+
}}><span className="glyphicon glyphicon-remove" aria-hidden="true"/></a>
50+
</td>
51+
<td className="col-md-6"/>
52+
</tr>
53+
)
54+
});
55+
56+
const RowList = () => {
57+
useTagged(data);
58+
59+
return data.map((item) => <Row key={item.id} item={item}/>)
5560
};
5661

57-
const swapRows = (data) => {
58-
const newData = data.slice();
59-
const tmp = newData[1];
60-
61-
newData[1] = newData[998];
62-
newData[998] = tmp;
63-
64-
return newData;
65-
};
66-
67-
const Row = memo(observer(({ item }) => (
68-
<tr className={compute(() => selectedState() === item.id) ? "danger" : ""}>
69-
<td className="col-md-1">{item.id}</td>
70-
<td className="col-md-4">
71-
<a onClick={() => selectedState(item.id)}>{item.label}</a>
72-
</td>
73-
<td className="col-md-1">
74-
<a onClick={() => dataState(remove(item))}><span className="glyphicon glyphicon-remove" aria-hidden="true"/></a>
75-
</td>
76-
<td className="col-md-6"/>
77-
</tr>
78-
)));
79-
80-
const RowList = observer(() => dataState().map((item) => <Row key={item.id} item={item} />));
81-
82-
const Button = ({ id, title, cb }) => (
83-
<div className="col-sm-6 smallpad">
84-
<button type="button" className="btn btn-primary btn-block" id={id} onClick={cb}>{title}</button>
85-
</div>
62+
const Button = ({id, title, cb}) => (
63+
<div className="col-sm-6 smallpad">
64+
<button type="button" className="btn btn-primary btn-block" id={id} onClick={cb}>{title}</button>
65+
</div>
8666
);
8767

8868
const Main = () => (
89-
<div className="container">
90-
<div className="jumbotron">
91-
<div className="row">
92-
<div className="col-md-6"><h1>React Tagged State </h1></div>
93-
<div className="col-md-6"><div className="row">
94-
<Button id="run" title="Create 1,000 rows" cb={() => dataState(buildData(1000))} />
95-
<Button id="runlots" title="Create 10,000 rows" cb={() => dataState(buildData(10000))} />
96-
<Button id="add" title="Append 1,000 rows" cb={() => dataState((data) => data.concat(buildData(1000)))} />
97-
<Button id="update" title="Update every 10th row" cb={() => dataState(update)} />
98-
<Button id="clear" title="Clear" cb={() => dataState([])} />
99-
<Button id="swaprows" title="Swap Rows" cb={() => dataState(swapRows)} />
100-
</div></div>
101-
</div>
69+
<div className="container">
70+
<div className="jumbotron">
71+
<div className="row">
72+
<div className="col-md-6"><h1>React Tagged State </h1></div>
73+
<div className="col-md-6">
74+
<div className="row">
75+
<Button id="run" title="Create 1,000 rows" cb={() => {
76+
data.length = 0;
77+
selected = 0;
78+
buildData(data, 1000);
79+
mutated(data);
80+
}}/>
81+
<Button id="runlots" title="Create 10,000 rows" cb={() => {
82+
data.length = 0;
83+
selected = 0;
84+
buildData(data, 10000);
85+
mutated(data);
86+
}}/>
87+
<Button id="add" title="Append 1,000 rows" cb={() => {
88+
buildData(data, 1000);
89+
mutated(data);
90+
}}/>
91+
<Button id="update" title="Update every 10th row" cb={() => batch(() => {
92+
for (let index = 0; index < data.length; index += 10) {
93+
mutated(data[index]).label += " !!!";
94+
}
95+
})}/>
96+
<Button id="clear" title="Clear" cb={() => {
97+
data.length = 0;
98+
selected = 0;
99+
mutated(data);
100+
}}/>
101+
<Button id="swaprows" title="Swap Rows" cb={() => {
102+
[data[1], data[998]] = [data[998], data[1]];
103+
mutated(data);
104+
}}/>
105+
</div>
106+
</div>
107+
</div>
108+
</div>
109+
<table className="table table-hover table-striped test-data">
110+
<tbody>
111+
<RowList/>
112+
</tbody>
113+
</table>
114+
<span className="preloadicon glyphicon glyphicon-remove" aria-hidden="true"/>
102115
</div>
103-
<table className="table table-hover table-striped test-data">
104-
<tbody>
105-
<RowList />
106-
</tbody>
107-
</table>
108-
<span className="preloadicon glyphicon glyphicon-remove" aria-hidden="true"/>
109-
</div>
110116
);
111117

112118
render(
113-
<Main />,
114-
document.getElementById("main")
119+
<Main/>,
120+
document.getElementById("main")
115121
);

0 commit comments

Comments
 (0)