Merge branch 'oleggrishechkin-update_react-tagged-state_to_1.21.1'

Author: krausest

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

@@ -33,6 +33,6 @@
   "dependencies": {
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
-    "react-tagged-state": "^1.20.2"
+    "react-tagged-state": "1.21.1"
   }
 }

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

@@ -1,6 +1,6 @@
-import {memo, useCallback} from "react";
+import {memo} from "react";
 import {createRoot} from 'react-dom/client';
-import {createSignal, useSelector, useSignal} from "react-tagged-state";
+import {createSignal, useSelector} from "react-tagged-state";
 
 const A = ["pretty", "large", "big", "small", "tall", "short", "long", "handsome", "plain", "quaint", "clean",
     "elegant", "easy", "angry", "crazy", "helpful", "mushy", "odd", "unsightly", "adorable", "important", "inexpensive",
@@ -19,48 +19,94 @@ const buildData = (count) => {
     for (let index = 0; index < count; index++) {
         res[index] = {
             id: nextId++,
-            label: `${A[random(A.length)]} ${C[random(C.length)]} ${N[random(N.length)]}`
+            labelSignal: createSignal(`${A[random(A.length)]} ${C[random(C.length)]} ${N[random(N.length)]}`),
+            isSelectedSignal: createSignal(false)
         };
     }
 
     return res;
 }
 
-const data = createSignal([]);
+const dataSignal = createSignal([]);
 
-let selected = createSignal(0);
+let selectedSignal = createSignal(null);
+
+const select = (item) => {
+    selectedSignal((prev) => {
+        if (prev) {
+            prev.isSelectedSignal(false);
+        }
+
+        if (item) {
+            item.isSelectedSignal(true);
+        }
+
+        return item;
+    });
+};
+
+const run = () => {
+    dataSignal(buildData(1000));
+    select(null);
+};
+
+const runLots = () => {
+    dataSignal(buildData(10000));
+    select(null);
+};
+
+const add = () => {
+    dataSignal((curr) => curr.concat(buildData(1000)));
+};
+
+const update = () => {
+    const items = dataSignal();
+
+    for (let index = 0; index < items.length; index += 10) {
+        items[index].labelSignal((labelSignal) => labelSignal + " !!!");
+    }
+};
+
+const clear = () => {
+    dataSignal([]);
+    select(null);
+};
+
+const swap = () => {
+    dataSignal((curr) => [curr[0], curr[998], ...curr.slice(2, 998), curr[1], curr[999]]);
+};
+
+const remove = (id) => dataSignal((curr) => curr.filter((item) => item.id !== id));
 
 const GlyphIcon = (
     <span className="glyphicon glyphicon-remove" aria-hidden="true"/>
 );
 
-const Row = memo(({item}) => {
-    const isSelected = useSelector(() => item.id === selected(), {pure: true});
-    const handleSelect = useCallback(() => {
-        selected(item.id);
-    }, [item.id]);
-    const handleRemove = useCallback(() => {
-        data((curr) => curr.filter(({id}) => id !== item.id));
-    }, [item.id]);
-
-    return (
-        <tr className={isSelected ? "danger" : ""}>
-            <td className="col-md-1">{item.id}</td>
-            <td className="col-md-4">
-                <a onClick={handleSelect}>{item.label}</a>
-            </td>
-            <td className="col-md-1">
-                <a onClick={handleRemove}>{GlyphIcon}</a>
-            </td>
-            <td className="col-md-6"/>
-        </tr>
-    )
-});
-
-const RowList = () => {
-    const items = useSignal(data);
-
-    return items.map((item) => <Row key={item.id} item={item}/>)
+const SelectableRow = ({isSelectedSignal, children}) => (
+    <tr className={useSelector(isSelectedSignal) ? "danger" : ""}>
+        {children}
+    </tr>
+);
+
+const Label = ({labelSignal}) => useSelector(labelSignal);
+
+const ListItem = memo(({item}) => (
+    <SelectableRow isSelectedSignal={item.isSelectedSignal}>
+        <td className="col-md-1">{item.id}</td>
+        <td className="col-md-4">
+            <a onClick={() => select(item)}><Label labelSignal={item.labelSignal}/></a>
+        </td>
+        <td className="col-md-1">
+            <a onClick={() => remove(item.id)}>{GlyphIcon}</a>
+        </td>
+        <td className="col-md-6"/>
+    </SelectableRow>
+));
+
+const List = () => {
+    const items = useSelector(dataSignal);
+
+    return items.map((item) => <ListItem key={item.id} item={item}/>)
 };
 
 const Button = ({id, title, cb}) => (
@@ -76,44 +122,19 @@ const Main = () => (
                 <div className="col-md-6"><h1>React Tagged State </h1></div>
                 <div className="col-md-6">
                     <div className="row">
-                        <Button id="run" title="Create 1,000 rows" cb={() => {
-                            data(buildData(1000));
-                            selected(0);
-                        }}/>
-                        <Button id="runlots" title="Create 10,000 rows" cb={() => {
-                            data(buildData(10000));
-                            selected(0);
-                        }}/>
-                        <Button id="add" title="Append 1,000 rows" cb={() => {
-                            data((curr) => curr.concat(buildData(1000)));
-                        }}/>
-                        <Button id="update" title="Update every 10th row" cb={() => {
-                            data((curr) => {
-                                const copy = curr.slice(0);
-
-                                for (let index = 0; index < copy.length; index += 10) {
-                                    const item = copy[index];
-
-                                    copy[index] = {id: item.id, label: item.label + " !!!"};
-                                }
-
-                                return copy;
-                            });
-                        }}/>
-                        <Button id="clear" title="Clear" cb={() => {
-                            data([]);
-                            selected(0);
-                        }}/>
-                        <Button id="swaprows" title="Swap Rows" cb={() => {
-                            data((curr) => [curr[0], curr[998], ...curr.slice(2, 998), curr[1], curr[999]]);
-                        }}/>
+                        <Button id="run" title="Create 1,000 rows" cb={run}/>
+                        <Button id="runlots" title="Create 10,000 rows" cb={runLots}/>
+                        <Button id="add" title="Append 1,000 rows" cb={add}/>
+                        <Button id="update" title="Update every 10th row" cb={update}/>
+                        <Button id="clear" title="Clear" cb={clear}/>
+                        <Button id="swaprows" title="Swap Rows" cb={swap}/>
                     </div>
                 </div>
             </div>
         </div>
         <table className="table table-hover table-striped test-data">
             <tbody>
-            <RowList/>
+            <List/>
             </tbody>
         </table>
         <span className="preloadicon glyphicon glyphicon-remove" aria-hidden="true"/>