CHANGELOG.md

@@ -1,11 +1,5 @@
 # @warkypublic/zustandsyncstore
 
-## 0.0.6
-
-### Patch Changes
-
-- 182a5f8: Flex changes and event handlers
-
 ## 0.0.5
 
 ### Patch Changes

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@warkypublic/oranguru",
   "author": "Warky Devs",
-  "version": "0.0.6",
+  "version": "0.0.5",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/Gridler/Gridler.module.css

@@ -3,7 +3,11 @@
     1px 0 0 #00000030,
     0 1px 0 #00000030,
     -1px 0 0 #00000030;
-
+  display: flex;
+  min-height: 40px;
+  min-width: 40px;
+  height: 100%;
+  width: 100%;
   
   &[data-focused='true'] {
     box-shadow:

src/Gridler/GridlerDataGrid.tsx

@@ -24,19 +24,7 @@ export const GridlerDataGrid = () => {
   const ref = React.useRef<DataEditorRef | null>(null);
   const refContextActivated = React.useRef<boolean>(false);
 
-  const { height, ref: refWrapper, width } = useElementSize({ box: 'content-box' });
+  const { height, ref: refWrapper, width } = useElementSize();
-  /*
-    const [_dimensions, setDimensions] = useState<{ height: number; width: number } | null>(null);
-  const { height, width } = _dimensions ?? { height: 0, width: 0 };
-
-  useLayoutEffect(() => {
-    // Measure container before rendering grid
-    if (refWrapper.current) {
-      const { height, width } = refWrapper.current.getBoundingClientRect();
-      setDimensions({ height, width });
-    }
-  }, []);
-   */
 
   const {
     _gridSelection,
@@ -49,7 +37,6 @@ export const GridlerDataGrid = () => {
     headerHeight,
     heightProp,
     mounted,
-    onCellClicked,
     onCellEdited,
     onColumnMoved,
     onColumnProposeMove,
@@ -78,7 +65,6 @@ export const GridlerDataGrid = () => {
     headerHeight: s.headerHeight,
     heightProp: s.height,
     mounted: s.mounted,
-    onCellClicked: s.onCellClicked,
     onCellEdited: s.onCellEdited,
     onColumnMoved: s.onColumnMoved,
     onColumnProposeMove: s.onColumnProposeMove,
@@ -86,7 +72,6 @@ export const GridlerDataGrid = () => {
     onContextClick: s.onContextClick,
     onHeaderClicked: s.onHeaderClicked,
     onHeaderMenuClick: s.onHeaderMenuClick,
-
     onItemHovered: s.onItemHovered,
     onVisibleRegionChanged: s.onVisibleRegionChanged,
     renderColumns: s.renderColumns,
@@ -137,13 +122,6 @@ export const GridlerDataGrid = () => {
           }
         }}
         ref={refWrapper}
-        style={{
-          display: 'flex',
-          height: '100%',
-          minHeight: '64px',
-          minWidth: '32px',
-          width: '100%',
-        }}
       >
         {sections?.left}
 
@@ -154,14 +132,8 @@ export const GridlerDataGrid = () => {
             columns={(renderColumns as Array<GridColumn>) ?? []}
             columnSelect="none"
             drawFocusRing
-            height={height ?? 400}
+            height={(height ?? 400) - 4}
-            overscrollX={16}
-            overscrollY={32}
             rangeSelect="multi-rect"
-            rightElementProps={{
-              fill: false,
-              sticky: true,
-            }}
             rowMarkers={{
               checkboxStyle: 'square',
               kind: 'both',
@@ -176,7 +148,6 @@ export const GridlerDataGrid = () => {
             gridSelection={_gridSelection}
             headerHeight={headerHeight ?? 32}
             headerIcons={{ sort: SortSprite, sortdown: SortDownSprite, sortup: SortUpSprite }}
-            onCellClicked={onCellClicked}
             onCellContextMenu={(cell, event) => {
               event.preventDefault();
               glideProps?.onCellContextMenu?.(cell, event);
@@ -258,10 +229,8 @@ export const GridlerDataGrid = () => {
         {!hasLocalData && <Pager />}
         {sections?.right}
       </div>
-      <div style={{ flexGrow: 0 }}>
+      <BottomBar />
-        <BottomBar />
+      {sections?.bottom}
-        {sections?.bottom}
-      </div>
       {/* <Portal> */}
     </Stack>
   );

src/Gridler/components/Column.tsx

@@ -18,7 +18,7 @@ export interface GridlerColumn extends Partial<BaseGridColumn> {
     colIndx: string,
     value: any,
     storeState: GridlerStoreState
-  ) => Partial<GridCellLoose>;
+  ) => GridCellLoose;
   defaultIcon?: string;
   disableFilter?: boolean;
   disableMove?: boolean;

src/Gridler/components/Computer.tsx

@@ -181,11 +181,6 @@ export const Computer = React.memo(() => {
       }));
     }).then(() => {
       loadPage(0, 'all');
-      getState('_events')?.dispatchEvent?.(
-        new CustomEvent('onColumnSorted', {
-          detail: { cols: colSort },
-        })
-      );
     });
   }, [colSort]);
 
@@ -197,11 +192,6 @@ export const Computer = React.memo(() => {
     if (JSON.stringify(refLastFilters.current) !== JSON.stringify(colFilters)) {
       loadPage(0, 'all');
       refLastFilters.current = colFilters;
-      getState('_events')?.dispatchEvent?.(
-        new CustomEvent('onColumnFiltered', {
-          detail: { filters: colFilters },
-        })
-      );
     }
   }, [colFilters]);
 

src/Gridler/components/GridlerStore.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-
+/* eslint-disable react/react-in-jsx-scope */
 /* eslint-disable react-refresh/only-export-components */
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import {
@@ -143,7 +143,6 @@ export interface GridlerState {
   loadingData?: boolean;
   loadPage: (page: number, clearMode?: 'all' | 'page') => Promise<void>;
   mounted: boolean;
-  onCellClicked: (cell: Item, event: CellClickedEventArgs) => void;
   onCellEdited: (cell: Item, newVal: EditableGridCell) => void;
   onColumnMoved: (from: number, to: number) => void;
   onColumnProposeMove: (startIndex: number, endIndex: number) => boolean;
@@ -341,16 +340,6 @@ const { Provider, useStore: useGridlerStore } = createSyncStore<GridlerStoreStat
     },
     maxConcurrency: 1,
     mounted: false,
-    onCellClicked: (cell: Item, event: CellClickedEventArgs) => {
-      const state = get();
-      const [col, row] = cell;
-      state.glideProps?.onCellClicked?.(cell, event);
-      state._events.dispatchEvent(
-        new CustomEvent('onCellClicked', {
-          detail: { cell, col, row, state },
-        })
-      );
-    },
     onCellEdited: (cell: Item, newVal: EditableGridCell) => {
       const state = get();
       const [, row] = cell;
@@ -362,7 +351,6 @@ const { Provider, useStore: useGridlerStore } = createSyncStore<GridlerStoreStat
           detail: { cell, newVal, row, state },
         })
       );
-      state.glideProps?.onCellEdited?.(cell, newVal);
     },
     onColumnMoved: (from: number, to: number) => {
       const s = get();
@@ -749,7 +737,7 @@ const { Provider, useStore: useGridlerStore } = createSyncStore<GridlerStoreStat
         const val = String(ref).includes('.') ? (getNestedValue(ref, row) ?? '') : row?.[ref];
 
         if (coldef?.Cell) {
-          return { kind: GridCellKind.Text, ...coldef?.Cell(row, col, ref, val, s) } as GridCell;
+          return coldef?.Cell(row, col, ref, val, s) as GridCell;
         }
         if (s.RenderCell) {
           return s.RenderCell(row, col, ref, val, s);

src/Gridler/stories/Examples.goapi.tsx

@@ -18,25 +18,6 @@ export const GridlerGoAPIExampleEventlog = () => {
   const [sections, setSections] = useState<Record<string, unknown> | undefined>(undefined);
   const columns: GridlerColumns = [
     {
-      Cell: (row) => {
-        const process = `${
-          row?.cql2?.length > 0
-            ? '🔖'
-            : row?.cql1?.length > 0
-              ? '📕'
-              : row?.status === 1
-                ? '💡'
-                : row?.status === 2
-                  ? '🔒'
-                  : '⚙️'
-        } ${String(row?.id_process ?? '0')}`;
-
-        return {
-          data: process,
-          displayData: process,
-          status: row?.status,
-        } as any;
-      },
       id: 'id_process',
       title: 'RID',
       width: 100,
@@ -64,7 +45,7 @@ export const GridlerGoAPIExampleEventlog = () => {
   ];
 
   return (
-    <Stack h="80vh" w="50vw">
+    <Stack h="80vh">
       <h2>Demo Using Go API Adaptor</h2>
       <TextInput label="API Url" onChange={(e) => setApiUrl(e.target.value)} value={apiUrl} />
       <TextInput label="API Key" onChange={(e) => setApiKey(e.target.value)} value={apiKey} />