jp-composter 0.1.0

package/src/SliceUI/table/Table.tsx

@@ -0,0 +1,388 @@
+import React, {useMemo, useState, useCallback, useEffect} from 'react';
+import {
+  View,
+  StyleSheet,
+  ScrollView,
+  ActivityIndicator,
+  type ViewStyle,
+} from 'react-native';
+import {useSliceTheme} from '../contextProvider/context';
+import {setTestId} from '../automation/helper';
+import {
+  sortData,
+  filterData,
+  paginateData,
+  getRowKey,
+  isAllRowsSelected,
+  isSomeRowsSelected,
+  toggleAllRowsSelection,
+  getTableBackgroundColor,
+  getTableBorderColor,
+} from './helper';
+import type {
+  TableProps,
+  TableRowData,
+  TableSortState,
+  SortDirection,
+} from './Type';
+import type {ExtendedTheme} from '../colors/Type';
+import Typography from '../typography/Typography';
+import TableHeader from './TableHeader';
+import TableRow from './TableRow';
+import TableFooter from './TableFooter';
+
+const Table = <T extends TableRowData>({
+  screenName = 'default',
+  id = 'default',
+  columns,
+  dataSource,
+  size = 'medium',
+  variant = 'default',
+  loading = false,
+  pagination = false,
+  rowSelection,
+  scroll,
+  bordered = false,
+  showHeader = true,
+  title,
+  footer,
+  expandable,
+  rowKey,
+  onRow,
+  onHeaderRow,
+  sortDirections = ['asc', 'desc'],
+  defaultSortOrder,
+  showSorterTooltip = true,
+  tableStyle,
+  headerStyle,
+  bodyStyle,
+  footerStyle,
+  rowStyle,
+  cellStyle,
+  emptyText,
+  locale,
+}: TableProps<T>) => {
+  const {theme} = useSliceTheme();
+  const {isDebugBuildType, automationBaseid} = theme;
+
+  // State management
+  const [sortedInfo, setSortedInfo] = useState<TableSortState>({
+    columnKey: undefined,
+    order: defaultSortOrder,
+  });
+  const [selectedRowKeys, setSelectedRowKeys] = useState<(string | number)[]>(
+    rowSelection?.selectedRowKeys || [],
+  );
+  const [expandedRowKeys, setExpandedRowKeys] = useState<(string | number)[]>(
+    expandable?.expandedRowKeys || expandable?.defaultExpandedRowKeys || [],
+  );
+
+  // Update selected rows when prop changes
+  useEffect(() => {
+    if (rowSelection?.selectedRowKeys) {
+      setSelectedRowKeys(rowSelection.selectedRowKeys);
+    }
+  }, [rowSelection?.selectedRowKeys]);
+
+  // Update expanded rows when prop changes
+  useEffect(() => {
+    if (expandable?.expandedRowKeys) {
+      setExpandedRowKeys(expandable.expandedRowKeys);
+    }
+  }, [expandable?.expandedRowKeys]);
+
+  // Process data
+  const processedData = useMemo(() => {
+    let result = [...dataSource];
+
+    // Apply sorting
+    result = sortData(result, sortedInfo, columns);
+
+    return result;
+  }, [dataSource, sortedInfo, columns]);
+
+  // Apply pagination
+  const paginatedResult = useMemo(() => {
+    return paginateData(processedData, pagination);
+  }, [processedData, pagination]);
+
+  const {paginatedData, totalPages, startIndex, endIndex} = paginatedResult;
+
+  // Selection logic
+  const allSelected = useMemo(
+    () => isAllRowsSelected(paginatedData, selectedRowKeys, rowKey),
+    [paginatedData, selectedRowKeys, rowKey],
+  );
+
+  const indeterminate = useMemo(
+    () => isSomeRowsSelected(paginatedData, selectedRowKeys, rowKey),
+    [paginatedData, selectedRowKeys, rowKey],
+  );
+
+  const selectedRows = useMemo(
+    () =>
+      processedData.filter((record, index) => {
+        const key = getRowKey(record, index, rowKey);
+        return selectedRowKeys.includes(key);
+      }),
+    [processedData, selectedRowKeys, rowKey],
+  );
+
+  // Event handlers
+  const handleSort = useCallback(
+    (columnKey: string, direction: SortDirection) => {
+      setSortedInfo({columnKey, order: direction});
+    },
+    [],
+  );
+
+  const handleSelectAll = useCallback(
+    (selected: boolean) => {
+      const result = toggleAllRowsSelection(
+        paginatedData,
+        selectedRowKeys,
+        rowKey,
+      );
+
+      setSelectedRowKeys(result.selectedRowKeys);
+
+      if (rowSelection?.onChange) {
+        rowSelection.onChange(result.selectedRowKeys, result.selectedRows);
+      }
+
+      if (rowSelection?.onSelectAll) {
+        rowSelection.onSelectAll(selected, result.selectedRows, paginatedData);
+      }
+    },
+    [paginatedData, selectedRowKeys, rowKey, rowSelection],
+  );
+
+  const handleRowSelect = useCallback(
+    (record: T, index: number, selected: boolean) => {
+      const key = getRowKey(record, index, rowKey);
+      let newSelectedKeys: (string | number)[];
+
+      if (rowSelection?.type === 'radio') {
+        newSelectedKeys = selected ? [key] : [];
+      } else {
+        newSelectedKeys = selected
+          ? [...selectedRowKeys, key]
+          : selectedRowKeys.filter(k => k !== key);
+      }
+
+      setSelectedRowKeys(newSelectedKeys);
+
+      const newSelectedRows = processedData.filter((r, i) => {
+        const rKey = getRowKey(r, i, rowKey);
+        return newSelectedKeys.includes(rKey);
+      });
+
+      if (rowSelection?.onChange) {
+        rowSelection.onChange(newSelectedKeys, newSelectedRows);
+      }
+
+      if (rowSelection?.onSelect) {
+        rowSelection.onSelect(record, selected, newSelectedRows, {} as any);
+      }
+    },
+    [selectedRowKeys, rowKey, rowSelection, processedData],
+  );
+
+  // Styles
+  const containerStyle = useMemo((): ViewStyle => {
+    const backgroundColor = theme.colors?.colorBackgroundPrimary || '#ffffff';
+    const borderColor = theme.colors?.colorBorderSubtle || '#e0e0e0';
+
+    return {
+      backgroundColor,
+      borderRadius: 8,
+      overflow: 'hidden',
+      borderWidth: 1,
+      borderColor,
+      width: '100%',
+      minWidth: 800, // Ensure minimum width for proper column display
+    };
+  }, [theme, bordered]);
+
+  const scrollViewStyle = useMemo((): ViewStyle => {
+    const style: ViewStyle = {
+      flex: 1,
+    };
+
+    if (scroll?.y) {
+      style.maxHeight = typeof scroll.y === 'number' ? scroll.y : undefined;
+    }
+
+    return style;
+  }, [scroll]);
+
+  // Render methods
+  const renderTitle = () => {
+    if (!title) return null;
+
+    return <View style={styles.titleContainer}>{title()}</View>;
+  };
+
+  const renderHeader = () => {
+    if (!showHeader) return null;
+
+    return (
+      <TableHeader
+        columns={columns}
+        selection={rowSelection}
+        sortedInfo={sortedInfo}
+        onSort={handleSort}
+        onSelectAll={handleSelectAll}
+        allSelected={allSelected}
+        indeterminate={indeterminate}
+        style={headerStyle}
+      />
+    );
+  };
+
+  const renderBody = () => {
+    if (loading) {
+      return (
+        <View style={styles.loadingContainer}>
+          <ActivityIndicator
+            size="large"
+            color={theme.colors?.colorForegroundAccent}
+          />
+          <Typography
+            variant="body2"
+            style={StyleSheet.flatten([
+              styles.loadingText,
+              {color: theme.colors?.colorForegroundSecondary},
+            ])}>
+            Loading...
+          </Typography>
+        </View>
+      );
+    }
+
+    if (paginatedData.length === 0) {
+      return (
+        <View style={styles.emptyContainer}>
+          {emptyText || (
+            <Typography
+              variant="body1"
+              style={StyleSheet.flatten([
+                styles.emptyText,
+                {color: theme.colors?.colorForegroundTertiary},
+              ])}>
+              {locale?.emptyText || 'No data'}
+            </Typography>
+          )}
+        </View>
+      );
+    }
+
+    return (
+      <View style={[styles.bodyContainer, bodyStyle]}>
+        {paginatedData.map((record, index) => {
+          const key = getRowKey(record, index, rowKey);
+          const selected = selectedRowKeys.includes(key);
+
+          return (
+            <TableRow
+              key={key}
+              record={record}
+              index={index}
+              columns={columns}
+              selection={rowSelection}
+              selected={selected}
+              onSelect={sel => handleRowSelect(record, index, sel)}
+              onRow={onRow}
+              style={rowStyle}
+              hover={true}
+              striped={variant === 'striped'}
+            />
+          );
+        })}
+      </View>
+    );
+  };
+
+  const renderFooter = () => {
+    const footerContent = (
+      <>
+        {pagination && (
+          <TableFooter pagination={pagination} style={footerStyle} />
+        )}
+        {footer && <View style={styles.customFooter}>{footer()}</View>}
+      </>
+    );
+
+    return footerContent;
+  };
+
+  const combinedTableStyle = useMemo(
+    () => StyleSheet.flatten([containerStyle, tableStyle]),
+    [containerStyle, tableStyle],
+  );
+
+  return (
+    <View
+      style={combinedTableStyle}
+      {...(isDebugBuildType && automationBaseid
+        ? setTestId(automationBaseid, screenName, id)
+        : {})}>
+      {renderTitle()}
+
+      <View style={styles.tableContent}>
+        {renderHeader()}
+
+        <ScrollView
+          style={scrollViewStyle}
+          horizontal={!!scroll?.x}
+          showsHorizontalScrollIndicator={!!scroll?.x}
+          showsVerticalScrollIndicator={!!scroll?.y}>
+          {renderBody()}
+        </ScrollView>
+      </View>
+
+      {renderFooter()}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  titleContainer: {
+    padding: 16,
+    borderBottomWidth: 1,
+    borderBottomColor: '#f0f0f0',
+  },
+  tableContent: {
+    flex: 1,
+  },
+  bodyContainer: {
+    flex: 1,
+  },
+  loadingContainer: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 60,
+  },
+  loadingText: {
+    marginTop: 12,
+  },
+  emptyContainer: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 60,
+  },
+  emptyText: {
+    textAlign: 'center',
+  },
+  customFooter: {
+    padding: 16,
+    borderTopWidth: 1,
+    borderTopColor: '#f0f0f0',
+  },
+});
+
+export default React.memo(Table) as <T extends TableRowData>(
+  props: TableProps<T>,
+) => React.ReactElement;

package/src/SliceUI/table/TableCell.tsx

@@ -0,0 +1,158 @@
+import React, {useMemo} from 'react';
+import {
+  View,
+  StyleSheet,
+  Pressable,
+  Platform,
+  type ViewStyle,
+  type TextStyle,
+} from 'react-native';
+import {useSliceTheme} from '../contextProvider/context';
+import {setTestId} from '../automation/helper';
+import {getJustifyContent, getTextAlign} from './helper';
+import type {TableCellProps} from './Type';
+import Typography from '../typography/Typography';
+
+const isWeb = Platform.OS === 'web';
+
+const TableCell: React.FC<TableCellProps> = ({
+  children,
+  align = 'left',
+  style,
+  textStyle,
+  width,
+  minWidth,
+  maxWidth,
+  fixed,
+  ellipsis = false,
+  onPress,
+}) => {
+  const {theme} = useSliceTheme();
+  const {isDebugBuildType, automationBaseid} = theme;
+
+  const cellStyle = useMemo((): ViewStyle => {
+    const baseStyle: ViewStyle = {
+      flex: width ? 0 : 1,
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: getJustifyContent(align),
+      paddingHorizontal: 8,
+      paddingVertical: 0,
+    };
+
+    if (width) {
+      if (typeof width === 'number') {
+        baseStyle.width = width;
+      } else if (typeof width === 'string') {
+        if (width.endsWith('%')) {
+          baseStyle.flexBasis = width as any;
+        } else {
+          baseStyle.width = parseInt(width, 10) || undefined;
+        }
+      }
+    }
+
+    if (minWidth) {
+      baseStyle.minWidth = minWidth;
+    }
+
+    if (maxWidth) {
+      baseStyle.maxWidth = maxWidth;
+    }
+
+    if (fixed) {
+      baseStyle.position = 'absolute';
+      if (fixed === 'left') {
+        baseStyle.left = 0;
+        baseStyle.zIndex = 10;
+      } else if (fixed === 'right') {
+        baseStyle.right = 0;
+        baseStyle.zIndex = 10;
+      }
+    }
+
+    return baseStyle;
+  }, [align, width, minWidth, maxWidth, fixed, theme.spacing]);
+
+  const contentStyle = useMemo((): TextStyle => {
+    const baseStyle: TextStyle = {
+      flex: 1,
+      textAlign: getTextAlign(align),
+    };
+
+    if (ellipsis && isWeb) {
+      // Web-only CSS properties - cast as any since RN types don't include them
+      (baseStyle as any).overflow = 'hidden';
+      (baseStyle as any).textOverflow = 'ellipsis';
+      (baseStyle as any).whiteSpace = 'nowrap';
+    }
+
+    return baseStyle;
+  }, [align, ellipsis]);
+
+  const combinedCellStyle = useMemo(
+    () => StyleSheet.flatten([styles.baseCell, cellStyle, style]),
+    [cellStyle, style],
+  );
+
+  const combinedTextStyle = useMemo(
+    () => StyleSheet.flatten([contentStyle, textStyle]),
+    [contentStyle, textStyle],
+  );
+
+  const renderContent = () => {
+    if (React.isValidElement(children)) {
+      return children;
+    }
+
+    if (typeof children === 'string' || typeof children === 'number') {
+      return (
+        <Typography
+          variant="body2"
+          style={combinedTextStyle}
+          extraProps={{
+            numberOfLines: ellipsis ? 1 : undefined,
+            ellipsizeMode: ellipsis ? 'tail' : undefined,
+          }}>
+          {String(children)}
+        </Typography>
+      );
+    }
+
+    return children;
+  };
+
+  if (onPress) {
+    return (
+      <Pressable
+        onPress={onPress}
+        style={({pressed}) => [combinedCellStyle, pressed && styles.pressed]}
+        {...(isDebugBuildType && automationBaseid
+          ? setTestId(automationBaseid, 'table', 'cell')
+          : {})}>
+        {renderContent()}
+      </Pressable>
+    );
+  }
+
+  return (
+    <View
+      style={combinedCellStyle}
+      {...(isDebugBuildType && automationBaseid
+        ? setTestId(automationBaseid, 'table', 'cell')
+        : {})}>
+      {renderContent()}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  baseCell: {
+    borderRightWidth: 0, // Will be handled by parent row
+  },
+  pressed: {
+    opacity: 0.7,
+  },
+});
+
+export default React.memo(TableCell);