@idealyst/datagrid 1.0.40 → 1.0.41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/datagrid",
-  "version": "1.0.40",
+  "version": "1.0.41",
   "description": "High-performance datagrid component for React and React Native",
   "documentation": "https://github.com/your-username/idealyst-framework/tree/main/packages/datagrid#readme",
   "main": "src/index.ts",

package/src/DataGrid/DataGrid.tsx

@@ -1,6 +1,6 @@
-import React, { useState, useMemo, useCallback } from 'react';
-import { View, Text, Button } from '@idealyst/components';
-import { createStyleSheet, useStyles } from 'react-native-unistyles';
+import React, { useState, useCallback } from 'react';
+import { View, Text } from '@idealyst/components';
+import { UnistylesRuntime } from 'react-native-unistyles';
 import { ScrollView } from '../primitives/ScrollView';
 import { VirtualizedList } from '../primitives/VirtualizedList';
 import type { DataGridProps, Column } from './types';
@@ -23,7 +23,6 @@ export function DataGrid<T extends Record<string, any>>({
   multiSelect = false,
   stickyHeader = true,
 }: DataGridProps<T>) {
-  const { styles } = useStyles(stylesheet);
   const [sortColumn, setSortColumn] = useState<string | null>(null);
   const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc');
 
@@ -54,21 +53,43 @@ export function DataGrid<T extends Record<string, any>>({
   }, [selectedRows, onSelectionChange, multiSelect, onRowClick]);
 
   const renderHeader = () => (
-    <View style={[styles.header, headerStyle]}>
+    <View style={[
+      (theme) => ({
+        flexDirection: 'row',
+        backgroundColor: theme.colors.neutral[50],
+        borderBottomWidth: 2,
+        borderBottomColor: theme.colors.neutral[200],
+      }),
+      headerStyle
+    ]}>
       {columns.map((column) => (
         <View
           key={column.key}
           style={[
-            styles.headerCell,
+            (theme) => ({
+              flexDirection: 'row',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              padding: theme.spacing.sm,
+              borderRightWidth: 1,
+              borderRightColor: theme.colors.neutral[200],
+            }),
             { width: column.width || 'auto', minWidth: column.minWidth, maxWidth: column.maxWidth },
             column.headerStyle,
           ]}
         >
-          <Text weight="bold" style={styles.headerText}>
+          <Text weight="bold" style={(theme) => ({
+            fontSize: 14,
+            color: theme.colors.neutral[700],
+          })}>
             {column.header}
           </Text>
           {column.sortable && (
-            <Text style={styles.sortIndicator}>
+            <Text style={(theme) => ({
+              fontSize: 10,
+              marginLeft: theme.spacing.xs,
+              color: theme.colors.primary[500],
+            })}>
               {sortColumn === column.key ? (sortDirection === 'asc' ? '▲' : '▼') : ''}
             </Text>
           )}
@@ -84,8 +105,15 @@ export function DataGrid<T extends Record<string, any>>({
     return (
       <View
         style={[
-          styles.row,
-          isSelected && styles.selectedRow,
+          (theme) => ({
+            flexDirection: 'row',
+            borderBottomWidth: 1,
+            borderBottomColor: theme.colors.neutral[100],
+            backgroundColor: theme.colors.background,
+          }),
+          isSelected && ((theme) => ({
+            backgroundColor: theme.colors.primary[50],
+          })),
           computedRowStyle,
         ]}
         onPress={() => handleRowClick(item, index)}
@@ -101,7 +129,12 @@ export function DataGrid<T extends Record<string, any>>({
             <View
               key={column.key}
               style={[
-                styles.cell,
+                (theme) => ({
+                  padding: theme.spacing.sm,
+                  borderRightWidth: 1,
+                  borderRightColor: theme.colors.neutral[100],
+                  justifyContent: 'center',
+                }),
                 { width: column.width || 'auto', minWidth: column.minWidth, maxWidth: column.maxWidth },
                 computedCellStyle,
               ]}
@@ -121,7 +154,17 @@ export function DataGrid<T extends Record<string, any>>({
   const containerHeight = typeof height === 'number' ? height : undefined;
 
   return (
-    <View style={[styles.container, { width, height }, style]}>
+    <View style={[
+      (theme) => ({
+        backgroundColor: theme.colors.background,
+        borderWidth: 1,
+        borderColor: theme.colors.neutral[200],
+        borderRadius: theme.radius.md,
+        overflow: 'hidden',
+      }),
+      { width, height },
+      style
+    ]}>
       {stickyHeader && renderHeader()}
       {virtualized && containerHeight ? (
         <VirtualizedList
@@ -133,7 +176,7 @@ export function DataGrid<T extends Record<string, any>>({
         />
       ) : (
         <ScrollView
-          style={styles.scrollView}
+          style={{ flex: 1 }}
           showsVerticalScrollIndicator={true}
         >
           {!stickyHeader && renderHeader()}
@@ -144,53 +187,3 @@ export function DataGrid<T extends Record<string, any>>({
   );
 }
 
-const stylesheet = createStyleSheet((theme) => ({
-  container: {
-    backgroundColor: theme.colors.background,
-    borderWidth: 1,
-    borderColor: theme.colors.neutral[200],
-    borderRadius: theme.radius.md,
-    overflow: 'hidden',
-  },
-  header: {
-    flexDirection: 'row',
-    backgroundColor: theme.colors.neutral[50],
-    borderBottomWidth: 2,
-    borderBottomColor: theme.colors.neutral[200],
-  },
-  headerCell: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    padding: theme.spacing.sm,
-    borderRightWidth: 1,
-    borderRightColor: theme.colors.neutral[200],
-  },
-  headerText: {
-    fontSize: 14,
-    color: theme.colors.neutral[700],
-  },
-  sortIndicator: {
-    fontSize: 10,
-    marginLeft: theme.spacing.xs,
-    color: theme.colors.primary[500],
-  },
-  row: {
-    flexDirection: 'row',
-    borderBottomWidth: 1,
-    borderBottomColor: theme.colors.neutral[100],
-    backgroundColor: theme.colors.background,
-  },
-  selectedRow: {
-    backgroundColor: theme.colors.primary[50],
-  },
-  cell: {
-    padding: theme.spacing.sm,
-    borderRightWidth: 1,
-    borderRightColor: theme.colors.neutral[100],
-    justifyContent: 'center',
-  },
-  scrollView: {
-    flex: 1,
-  },
-}));