Init

src/Gridler/components/Computer.tsx

@@ -0,0 +1,111 @@
+import React, { useEffect, useRef } from 'react';
+
+import { useStore } from './Store';
+
+//The computer component does not need to be recalculated on every render, so we use React.memo to prevent unnecessary re-renders.
+export const Computer = React.memo(() => {
+  const refFirstRun = useRef(0);
+  const {
+    _glideref,
+
+    colOrder,
+    colSize,
+    colSort,
+    columns,
+    loadPage,
+    setState,
+    setStateFN,
+  } = useStore((s) => ({
+    _glideref: s._glideref,
+    colFilters: s.colFilters,
+    colOrder: s.colOrder,
+    colSize: s.colSize,
+    colSort: s.colSort,
+    columns: s.columns,
+    loadPage: s.loadPage,
+    setState: s.setState,
+    setStateFN: s.setStateFN,
+
+    uniqueid: s.uniqueid,
+  }));
+
+  useEffect(() => {
+    setState(
+      'renderColumns',
+      columns?.map((c) => ({
+        ...c,
+        hasMenu: c?.hasMenu ?? true,
+        icon: 'sort',
+      }))
+    );
+  }, [columns]);
+
+  useEffect(() => {
+    if (!colSort) {
+      return;
+    }
+    setStateFN('renderColumns', (cols) => {
+      return cols?.map((c) => ({
+        ...c,
+        icon:
+          c.id && colSort?.find((col) => col.id === c.id)?.direction
+            ? colSort?.find((col) => col.id === c.id)?.direction === 'asc'
+              ? 'sortup'
+              : 'sortdown'
+            : (c.defaultIcon ?? 'sort'),
+      }));
+    }).then(() => {
+      loadPage(0, 'all');
+    });
+  }, [colSort]);
+
+  useEffect(() => {
+    if (!colSize) {
+      return;
+    }
+    setStateFN('renderColumns', (cols) => {
+      return cols?.map((c) => ({
+        ...c,
+        width: c.id && colSize?.[c.id] ? colSize?.[c.id] : c.width,
+      }));
+    });
+  }, [colSize]);
+
+  useEffect(() => {
+    if (!colOrder) {
+      return;
+    }
+    setStateFN('renderColumns', (cols) => {
+      const result = cols?.sort((a, b) => {
+        if (colOrder[a.id] > colOrder[b.id]) {
+          return 1;
+        }
+        return -1;
+      });
+
+      return result;
+    });
+  }, [colOrder]);
+
+  useEffect(() => {
+    if (!_glideref) {
+      return;
+    }
+    if (refFirstRun.current > 0) {
+      return;
+    }
+    refFirstRun.current = 1;
+    loadPage(0);
+  }, [_glideref]);
+
+  // console.log('Gridler:Debug:Computer', {
+  //   colFilters,
+  //   colOrder,
+  //   colSize,
+  //   colSort,
+  //   columns,
+  //   uniqueid
+  // });
+
+  return <></>;
+});