jp-composter 0.1.0

package/src/SliceUI/table/TableFooter.tsx

@@ -0,0 +1,353 @@
+import React, {useMemo} from 'react';
+import {
+  View,
+  StyleSheet,
+  Pressable,
+  Platform,
+  type ViewStyle,
+} from 'react-native';
+import {useSliceTheme} from '../contextProvider/context';
+import {setTestId} from '../automation/helper';
+import {
+  getTableBackgroundColor,
+  getTableBorderColor,
+  getTableTextColor,
+  generatePageNumbers,
+  formatPaginationText,
+} from './helper';
+import type {TableFooterProps} from './Type';
+import type {ExtendedTheme} from '../colors/Type';
+import Typography from '../typography/Typography';
+import Button from '../button/Button';
+import IconMoon from '../IconMoon';
+import FontIcon from '../assets/resources/fonts/FontIcon.json';
+
+const isWeb = Platform.OS === 'web';
+
+const TableFooter: React.FC<TableFooterProps> = ({pagination, style}) => {
+  const {theme} = useSliceTheme();
+  const {isDebugBuildType, automationBaseid} = theme;
+
+  if (!pagination) return null;
+
+  const {
+    current = 1,
+    pageSize = 10,
+    total = 0,
+    showSizeChanger = false,
+    pageSizeOptions = ['10', '20', '50', '100'],
+    showQuickJumper = false,
+    showTotal,
+    onChange,
+    onShowSizeChange,
+    position = 'bottomRight',
+    size = 'default',
+  } = pagination;
+
+  const getJustifyContent = (pos: string): ViewStyle['justifyContent'] => {
+    if (pos.includes('Left')) return 'flex-start';
+    if (pos.includes('Center')) return 'center';
+    return 'flex-end';
+  };
+
+  const footerStyle = useMemo((): ViewStyle => {
+    const backgroundColor = theme.colors?.colorBackgroundPrimary || '#ffffff';
+    const borderColor = theme.colors?.colorBorderSubtle || '#e0e0e0';
+
+    return {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: getJustifyContent(position),
+      backgroundColor,
+      borderTopWidth: 1,
+      borderTopColor: borderColor,
+      paddingHorizontal: 16,
+      paddingVertical: 12,
+      minHeight: 56,
+    };
+  }, [theme, position]);
+
+  const textColor = theme.colors?.colorForegroundPrimary || '#333333';
+
+  const totalPages = Math.ceil(total / pageSize);
+  const pageNumbers = generatePageNumbers(current, totalPages);
+  const paginationText = formatPaginationText(current, pageSize, total);
+
+  const handlePageChange = (page: number) => {
+    if (page !== current && onChange) {
+      onChange(page, pageSize);
+    }
+  };
+
+  const handlePageSizeChange = (newPageSize: number) => {
+    if (newPageSize !== pageSize && onShowSizeChange) {
+      onShowSizeChange(current, newPageSize);
+    }
+  };
+
+  const renderPageButton = (page: number | string, index: number) => {
+    if (page === '...') {
+      return (
+        <View key={`ellipsis-${index}`} style={styles.ellipsis}>
+          <Typography variant="body2" style={{color: textColor}}>
+            ...
+          </Typography>
+        </View>
+      );
+    }
+
+    const pageNumber = page as number;
+    const isActive = pageNumber === current;
+
+    return (
+      <Pressable
+        key={pageNumber}
+        onPress={() => handlePageChange(pageNumber)}
+        style={[
+          styles.pageButton,
+          isActive && styles.activePageButton,
+          {
+            backgroundColor: isActive
+              ? theme.colors?.colorBackgroundAccent
+              : 'transparent',
+          },
+        ]}>
+        <Typography
+          variant="body2"
+          style={{
+            color: isActive
+              ? theme.colors?.colorForegroundInvariable || '#fff'
+              : textColor,
+            fontWeight: isActive ? '600' : '400',
+          }}>
+          {String(pageNumber)}
+        </Typography>
+      </Pressable>
+    );
+  };
+
+  const renderPaginationInfo = () => {
+    if (showTotal) {
+      return showTotal(total, paginationText.range);
+    }
+
+    return (
+      <Typography
+        variant="body2"
+        style={StyleSheet.flatten([styles.paginationInfo, {color: textColor}])}>
+        {paginationText.text}
+      </Typography>
+    );
+  };
+
+  const renderPageSizeChanger = () => {
+    if (!showSizeChanger) return null;
+
+    return (
+      <View style={styles.pageSizeChanger}>
+        <Typography
+          variant="body2"
+          style={StyleSheet.flatten([
+            styles.pageSizeLabel,
+            {color: textColor},
+          ])}>
+          Show
+        </Typography>
+        {/* Note: In a real implementation, this would be a dropdown/select component */}
+        <View style={styles.pageSizeSelect}>
+          <Typography variant="body2" style={{color: textColor}}>
+            {String(pageSize)}
+          </Typography>
+          <IconMoon icon={FontIcon.ARROW_DOWN} size={12} color={textColor} />
+        </View>
+        <Typography
+          variant="body2"
+          style={StyleSheet.flatten([
+            styles.pageSizeLabel,
+            {color: textColor},
+          ])}>
+          per page
+        </Typography>
+      </View>
+    );
+  };
+
+  const renderQuickJumper = () => {
+    if (!showQuickJumper) return null;
+
+    return (
+      <View style={styles.quickJumper}>
+        <Typography
+          variant="body2"
+          style={StyleSheet.flatten([
+            styles.quickJumperLabel,
+            {color: textColor},
+          ])}>
+          Go to
+        </Typography>
+        {/* Note: In a real implementation, this would be a text input */}
+        <View style={styles.quickJumperInput}>
+          <Typography variant="body2" style={{color: textColor}}>
+            {String(current)}
+          </Typography>
+        </View>
+      </View>
+    );
+  };
+
+  const renderPaginationControls = () => {
+    return (
+      <View style={styles.paginationControls}>
+        <Pressable
+          onPress={() => handlePageChange(current - 1)}
+          disabled={current <= 1}
+          style={[styles.navButton, current <= 1 && styles.disabledNavButton]}>
+          <IconMoon
+            icon={FontIcon.LEFT_ARROW}
+            size={16}
+            color={
+              current <= 1
+                ? theme.colors?.colorForegroundTertiary || textColor
+                : textColor
+            }
+          />
+        </Pressable>
+
+        <View style={styles.pageNumbers}>
+          {pageNumbers.map(renderPageButton)}
+        </View>
+
+        <Pressable
+          onPress={() => handlePageChange(current + 1)}
+          disabled={current >= totalPages}
+          style={[
+            styles.navButton,
+            current >= totalPages && styles.disabledNavButton,
+          ]}>
+          <IconMoon
+            icon={FontIcon.ARROW_RIGHT_SMALL}
+            size={16}
+            color={
+              current >= totalPages
+                ? theme.colors?.colorForegroundTertiary || textColor
+                : textColor
+            }
+          />
+        </Pressable>
+      </View>
+    );
+  };
+
+  const combinedFooterStyle = useMemo(
+    () => StyleSheet.flatten([footerStyle, style]),
+    [footerStyle, style],
+  );
+
+  return (
+    <View
+      style={combinedFooterStyle}
+      {...(isDebugBuildType && automationBaseid
+        ? setTestId(automationBaseid, 'table', 'footer')
+        : {})}>
+      <View style={styles.footerContent}>
+        {renderPaginationInfo()}
+
+        <View style={styles.footerControls}>
+          {renderPageSizeChanger()}
+          {renderQuickJumper()}
+          {renderPaginationControls()}
+        </View>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  footerContent: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  footerControls: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 16,
+  },
+  paginationInfo: {
+    fontSize: 14,
+  },
+  pageSizeChanger: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  pageSizeLabel: {
+    fontSize: 14,
+  },
+  pageSizeSelect: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderWidth: 1,
+    borderRadius: 4,
+    borderColor: '#d9d9d9',
+    gap: 4,
+  },
+  quickJumper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  quickJumperLabel: {
+    fontSize: 14,
+  },
+  quickJumperInput: {
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderWidth: 1,
+    borderRadius: 4,
+    borderColor: '#d9d9d9',
+    minWidth: 40,
+    alignItems: 'center',
+  },
+  paginationControls: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
+  },
+  navButton: {
+    padding: 8,
+    borderRadius: 4,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  disabledNavButton: {
+    opacity: 0.5,
+  },
+  pageNumbers: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 2,
+  },
+  pageButton: {
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 4,
+    minWidth: 32,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  activePageButton: {
+    // backgroundColor will be set dynamically
+  },
+  ellipsis: {
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export default React.memo(TableFooter);

package/src/SliceUI/table/TableHeader.tsx

@@ -0,0 +1,247 @@
+import React, {useMemo, useState} from 'react';
+import {
+  View,
+  StyleSheet,
+  Pressable,
+  Platform,
+  type ViewStyle,
+} from 'react-native';
+import {useSliceTheme} from '../contextProvider/context';
+import {setTestId} from '../automation/helper';
+import {
+  getTableBackgroundColor,
+  getTableBorderColor,
+  getTableTextColor,
+} from './helper';
+import type {TableHeaderProps, SortDirection} from './Type';
+import type {ExtendedTheme} from '../colors/Type';
+import Typography from '../typography/Typography';
+import TableCell from './TableCell';
+import Checkbox from '../checkbox/Checkbox';
+import IconMoon from '../IconMoon';
+import FontIcon from '../assets/resources/fonts/FontIcon.json';
+
+const isWeb = Platform.OS === 'web';
+
+const TableHeader: React.FC<TableHeaderProps> = ({
+  columns,
+  selection,
+  sortedInfo,
+  onSort,
+  onSelectAll,
+  allSelected = false,
+  indeterminate = false,
+  style,
+}) => {
+  const {theme} = useSliceTheme();
+  const {isDebugBuildType, automationBaseid} = theme;
+  const [hoveredColumn, setHoveredColumn] = useState<string | null>(null);
+
+  const headerStyle = useMemo((): ViewStyle => {
+    const backgroundColor = theme.colors?.colorBackgroundSecondary || '#f5f5f5';
+    const borderColor = theme.colors?.colorBorderSubtle || '#e0e0e0';
+
+    return {
+      flexDirection: 'row',
+      alignItems: 'center',
+      backgroundColor,
+      borderBottomWidth: 1,
+      borderBottomColor: borderColor,
+      minHeight: 60,
+      paddingHorizontal: 16,
+      paddingVertical: 16,
+    };
+  }, [theme]);
+
+  const textColor = theme.colors?.colorForegroundPrimary || '#333333';
+
+  const handleSort = (columnKey: string, currentOrder?: SortDirection) => {
+    if (!onSort) return;
+
+    let newOrder: SortDirection = 'asc';
+    if (currentOrder === 'asc') {
+      newOrder = 'desc';
+    } else if (currentOrder === 'desc') {
+      newOrder = null;
+    }
+
+    onSort(columnKey, newOrder);
+  };
+
+  const handleSelectAll = () => {
+    if (onSelectAll) {
+      onSelectAll(!allSelected);
+    }
+  };
+
+  const renderSortIcon = (columnKey: string, sortable?: boolean) => {
+    if (!sortable) return null;
+
+    const isActive = sortedInfo?.columnKey === columnKey;
+    const order = isActive ? sortedInfo?.order : null;
+    const isHovered = hoveredColumn === columnKey;
+
+    return (
+      <View style={styles.sortIconContainer}>
+        <IconMoon
+          icon={
+            order === 'asc'
+              ? FontIcon.ARROW_UP
+              : order === 'desc'
+              ? FontIcon.ARROW_DOWN
+              : FontIcon.ARROW_DOWN
+          }
+          size={12}
+          color={
+            isActive || isHovered
+              ? theme.colors?.colorForegroundAccent || textColor
+              : theme.colors?.colorForegroundTertiary || textColor
+          }
+        />
+      </View>
+    );
+  };
+
+  const renderSelectionColumn = () => {
+    if (!selection) return null;
+
+    return (
+      <View style={[styles.selectionCell, {width: 48, minWidth: 48}]}>
+        {selection.type !== 'radio' && !selection.hideSelectAll && (
+          <Checkbox
+            checked={allSelected}
+            onChange={handleSelectAll}
+            size="medium"
+            style={styles.checkbox}
+          />
+        )}
+      </View>
+    );
+  };
+
+  const renderHeaderCell = (column: any, index: number) => {
+    const isActive = sortedInfo?.columnKey === column.key;
+    const order = isActive ? sortedInfo?.order : null;
+
+    const cellContent = (
+      <View style={styles.headerCellContent}>
+        <View style={styles.headerTextContainer}>
+          {column.headerRender ? (
+            column.headerRender()
+          ) : (
+            <Typography
+              variant="body2Bold"
+              style={StyleSheet.flatten([
+                styles.headerText,
+                {color: textColor},
+              ])}
+              extraProps={{
+                numberOfLines: 1,
+                ellipsizeMode: 'tail',
+              }}>
+              {column.title}
+            </Typography>
+          )}
+        </View>
+        {renderSortIcon(column.key, column.sortable)}
+      </View>
+    );
+
+    if (column.sortable) {
+      return (
+        <Pressable
+          key={column.key}
+          onPress={() => handleSort(column.key, order)}
+          style={[
+            styles.headerCell,
+            {
+              width: column.width || 'auto',
+              minWidth: column.minWidth || 100,
+              flex: column.width ? 0 : 1,
+            },
+          ]}
+          {...(isWeb && {
+            onMouseEnter: () => setHoveredColumn(column.key),
+            onMouseLeave: () => setHoveredColumn(null),
+          })}>
+          {cellContent}
+        </Pressable>
+      );
+    }
+
+    return (
+      <View
+        key={column.key}
+        style={[
+          styles.headerCell,
+          {
+            width: column.width || 'auto',
+            minWidth: column.minWidth || 100,
+            flex: column.width ? 0 : 1,
+          },
+        ]}>
+        {cellContent}
+      </View>
+    );
+  };
+
+  const combinedHeaderStyle = useMemo(
+    () => StyleSheet.flatten([headerStyle, style]),
+    [headerStyle, style],
+  );
+
+  return (
+    <View
+      style={combinedHeaderStyle}
+      {...(isDebugBuildType && automationBaseid
+        ? setTestId(automationBaseid, 'table', 'header')
+        : {})}>
+      {renderSelectionColumn()}
+      {columns.map(renderHeaderCell)}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  selectionCell: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 8,
+  },
+  checkbox: {
+    margin: 0,
+  },
+  headerCell: {
+    paddingHorizontal: 8,
+    paddingVertical: 0,
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    minHeight: 60,
+  },
+  headerCellContent: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  headerTextContainer: {
+    flex: 1,
+    marginRight: 4,
+  },
+  headerText: {
+    fontWeight: '600',
+  },
+  sortIconContainer: {
+    marginLeft: 4,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  sortableHeader: {
+    flex: 1,
+  },
+  pressedHeader: {
+    opacity: 0.7,
+  },
+});
+
+export default React.memo(TableHeader);