@idealyst/datagrid 1.0.41 → 1.0.45

package/src/primitives/Table/Table.web.tsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import { UnistylesRuntime } from 'react-native-unistyles';
+
+interface TableProps {
+  children: React.ReactNode;
+  style?: any;
+}
+
+export const Table: React.FC<TableProps> = ({ children, style }) => {
+  let resolvedStyle = {};
+  if (typeof style === 'function') {
+    try {
+      resolvedStyle = style(UnistylesRuntime.theme);
+    } catch (error) {
+      resolvedStyle = {};
+    }
+  } else if (style) {
+    resolvedStyle = style;
+  }
+  
+  const combinedStyle = {
+    width: '100%',
+    tableLayout: 'fixed' as const,
+    borderCollapse: 'separate' as const,
+    borderSpacing: 0,
+    ...resolvedStyle,
+  };
+  
+  return (
+    <table style={combinedStyle}>
+      {children}
+    </table>
+  );
+};
+
+interface TableRowProps {
+  children: React.ReactNode;
+  style?: any;
+  onPress?: () => void;
+}
+
+export const TableRow: React.FC<TableRowProps> = ({ children, style, onPress }) => {
+  let resolvedStyle = {};
+  if (typeof style === 'function') {
+    try {
+      resolvedStyle = style(UnistylesRuntime.theme);
+    } catch (error) {
+      resolvedStyle = {};
+    }
+  } else if (style) {
+    resolvedStyle = style;
+  }
+  
+  return (
+    <tr 
+      style={resolvedStyle}
+      onClick={onPress}
+      role={onPress ? 'button' : undefined}
+      tabIndex={onPress ? 0 : undefined}
+      onKeyDown={onPress ? (e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          onPress();
+        }
+      } : undefined}
+    >
+      {children}
+    </tr>
+  );
+};
+
+interface TableCellProps {
+  children: React.ReactNode;
+  style?: any;
+  width?: number | string;
+  colSpan?: number;
+}
+
+export const TableCell: React.FC<TableCellProps> = ({ children, style, width, colSpan }) => {
+  let resolvedStyle = {};
+  if (typeof style === 'function') {
+    try {
+      resolvedStyle = style(UnistylesRuntime.theme);
+    } catch (error) {
+      resolvedStyle = {};
+    }
+  } else if (style) {
+    resolvedStyle = style;
+  }
+  
+  const combinedStyle = {
+    verticalAlign: 'middle',
+    ...(width && { width }),
+    ...resolvedStyle,
+  };
+  
+  return (
+    <td style={combinedStyle} colSpan={colSpan}>
+      {children}
+    </td>
+  );
+};

package/src/primitives/Table/TableBody.native.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { View } from 'react-native';
+import { UnistylesRuntime } from 'react-native-unistyles';
+
+interface TableBodyProps {
+  children: React.ReactNode;
+  style?: any;
+}
+
+export const TableBody: React.FC<TableBodyProps> = ({ children, style }) => {
+  let resolvedStyle = {};
+  if (typeof style === 'function') {
+    try {
+      resolvedStyle = style(UnistylesRuntime.theme);
+    } catch (error) {
+      resolvedStyle = {};
+    }
+  } else if (style) {
+    resolvedStyle = style;
+  }
+  
+  return (
+    <View style={resolvedStyle}>
+      {children}
+    </View>
+  );
+};

package/src/primitives/Table/TableBody.web.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { UnistylesRuntime } from 'react-native-unistyles';
+
+interface TableBodyProps {
+  children: React.ReactNode;
+  style?: any;
+}
+
+export const TableBody: React.FC<TableBodyProps> = ({ children, style }) => {
+  let resolvedStyle = {};
+  if (typeof style === 'function') {
+    try {
+      resolvedStyle = style(UnistylesRuntime.theme);
+    } catch (error) {
+      resolvedStyle = {};
+    }
+  } else if (style) {
+    resolvedStyle = style;
+  }
+  
+  return (
+    <tbody style={resolvedStyle}>
+      {children}
+    </tbody>
+  );
+};

package/src/primitives/Table/TableHeader.native.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { View } from 'react-native';
+import { UnistylesRuntime } from 'react-native-unistyles';
+
+interface TableHeaderProps {
+  children: React.ReactNode;
+  style?: any;
+}
+
+export const TableHeader: React.FC<TableHeaderProps> = ({ children, style }) => {
+  let resolvedStyle = {};
+  if (typeof style === 'function') {
+    try {
+      resolvedStyle = style(UnistylesRuntime.theme);
+    } catch (error) {
+      resolvedStyle = {};
+    }
+  } else if (style) {
+    resolvedStyle = style;
+  }
+  
+  return (
+    <View style={resolvedStyle}>
+      {children}
+    </View>
+  );
+};

package/src/primitives/Table/TableHeader.web.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { UnistylesRuntime } from 'react-native-unistyles';
+
+interface TableHeaderProps {
+  children: React.ReactNode;
+  style?: any;
+}
+
+export const TableHeader: React.FC<TableHeaderProps> = ({ children, style }) => {
+  let resolvedStyle = {};
+  if (typeof style === 'function') {
+    try {
+      resolvedStyle = style(UnistylesRuntime.theme);
+    } catch (error) {
+      resolvedStyle = {};
+    }
+  } else if (style) {
+    resolvedStyle = style;
+  }
+  
+  return (
+    <thead style={resolvedStyle}>
+      {children}
+    </thead>
+  );
+};

package/src/primitives/Table/index.native.ts

@@ -0,0 +1,3 @@
+export { Table, TableRow, TableCell } from './Table.native';
+export { TableHeader } from './TableHeader.native';
+export { TableBody } from './TableBody.native';

package/src/primitives/Table/index.ts

@@ -0,0 +1,3 @@
+export { Table, TableRow, TableCell } from './Table.web';
+export { TableHeader } from './TableHeader.web';
+export { TableBody } from './TableBody.web';

package/src/primitives/VirtualizedList/VirtualizedList.web.tsx

@@ -33,12 +33,14 @@ export const VirtualizedList: React.FC<VirtualizedListProps> = ({
   };
 
   return (
-    <List {...listProps}>
-      {({ index, style }) => (
-        <div style={style}>
-          {renderItem({ item: data[index], index })}
-        </div>
-      )}
-    </List>
+    <div style={{ display: 'table', width: '100%', tableLayout: 'fixed' }}>
+      <List {...listProps}>
+        {({ index, style }) => (
+          <div style={{ ...style, display: 'table-row-group' }}>
+            {renderItem({ item: data[index], index })}
+          </div>
+        )}
+      </List>
+    </div>
   );
 };