@bacon-pos/ui 0.9.0 → 0.10.0

package/src/components/Table/DataTable.tsx

@@ -0,0 +1,173 @@
+import { useState } from 'react';
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+import { useTheme } from '../../theme';
+import { Button } from '../Button/Button';
+import { ChipGroup } from '../Chip/ChipGroup';
+import { EmptyState, type EmptyStateProps } from '../EmptyState/EmptyState';
+import { Icon } from '../Icon/Icon';
+import type { IconName } from '../Icon/icons.generated';
+import { IconButton } from '../IconButton/IconButton';
+import { Input } from '../Input/Input';
+import { Text } from '../Text/Text';
+import { Table, type TableProps } from './Table';
+
+export interface DataTableTab {
+  value: string;
+  label: string;
+  icon?: IconName;
+}
+
+export interface DataTablePagination {
+  /** 1-based current page. */
+  page: number;
+  pageSize: number;
+  /** Total row count (across pages). */
+  total: number;
+  onPageChange: (page: number) => void;
+  /** Customize the range label. Defaults to `${from}–${to} of ${total}`. */
+  formatRange?: (from: number, to: number, total: number) => string;
+}
+
+export interface DataTableProps<T> extends Omit<TableProps<T>, 'empty'> {
+  /** Tabs above the toolbar (reuses `ChipGroup`). */
+  tabs?: DataTableTab[];
+  /** Active tab (controlled). */
+  activeTab?: string;
+  defaultTab?: string;
+  onTabChange?: (value: string) => void;
+
+  /** Show the search field. */
+  searchable?: boolean;
+  searchValue?: string;
+  onSearchChange?: (value: string) => void;
+  searchPlaceholder?: string;
+
+  /** Show a create button on the right of the toolbar. */
+  createLabel?: string;
+  onCreate?: () => void;
+  createIcon?: IconName;
+
+  /** Structured empty state (alternative to Table's `empty` node). */
+  emptyState?: EmptyStateProps;
+  /** Raw empty node (wins over `emptyState`). */
+  empty?: React.ReactNode;
+
+  /** Pagination controls below the table. */
+  pagination?: DataTablePagination;
+
+  /** Gap between toolbar sections. Defaults to 16. */
+  gap?: number;
+  containerStyle?: StyleProp<ViewStyle>;
+}
+
+/**
+ * DataTable — the turnkey management table (Figma): optional tabs (`ChipGroup`),
+ * a search + create toolbar, the `Table` body, a structured `EmptyState`, and
+ * optional pagination — assembled with consistent spacing. For bespoke layouts,
+ * compose `Table` + `EmptyState` yourself.
+ */
+export function DataTable<T>({
+  tabs,
+  activeTab,
+  defaultTab,
+  onTabChange,
+  searchable = false,
+  searchValue,
+  onSearchChange,
+  searchPlaceholder = 'Search…',
+  createLabel,
+  onCreate,
+  createIcon = 'plus',
+  emptyState,
+  empty,
+  pagination,
+  gap = 16,
+  containerStyle,
+  ...tableProps
+}: DataTableProps<T>) {
+  const theme = useTheme();
+
+  const tabControlled = activeTab !== undefined;
+  const [tabInternal, setTabInternal] = useState<string | null>(defaultTab ?? tabs?.[0]?.value ?? null);
+  const currentTab = tabControlled ? activeTab : tabInternal;
+  const setTab = (value: string | null) => {
+    if (value == null) return; // tabs are not deselectable
+    if (!tabControlled) setTabInternal(value);
+    onTabChange?.(value);
+  };
+
+  const emptyNode = empty ?? (emptyState ? <EmptyState {...emptyState} /> : undefined);
+
+  const showToolbar = searchable || !!createLabel;
+
+  return (
+    <View style={[{ gap }, containerStyle]}>
+      {tabs && tabs.length > 0 ? (
+        <ChipGroup
+          tone="dark"
+          options={tabs.map((t) => ({ value: t.value, label: t.label, icon: t.icon }))}
+          value={currentTab}
+          onChange={setTab}
+        />
+      ) : null}
+
+      {showToolbar ? (
+        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
+          {searchable ? (
+            <View style={{ flex: 1, minWidth: 220 }}>
+              <Input
+                value={searchValue}
+                onChangeText={onSearchChange}
+                placeholder={searchPlaceholder}
+                leftIcon={<Icon name="search" size={24} color="tertiary" />}
+              />
+            </View>
+          ) : null}
+          {createLabel ? (
+            <Button
+              label={createLabel}
+              variant="inverse"
+              size="md"
+              onPress={onCreate}
+              leftIcon={<Icon name={createIcon} size={24} color={theme.colors.action.inverseForeground} />}
+            />
+          ) : null}
+        </View>
+      ) : null}
+
+      <Table {...tableProps} empty={emptyNode} />
+
+      {pagination ? <Paginator {...pagination} /> : null}
+    </View>
+  );
+}
+
+function Paginator({ page, pageSize, total, onPageChange, formatRange }: DataTablePagination) {
+  const totalPages = Math.max(1, Math.ceil(total / pageSize));
+  const from = total === 0 ? 0 : (page - 1) * pageSize + 1;
+  const to = Math.min(page * pageSize, total);
+
+  return (
+    <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-end', gap: 12 }}>
+      <Text variant="bodySmall" color="secondary">
+        {formatRange ? formatRange(from, to, total) : `${from}–${to} of ${total}`}
+      </Text>
+      <IconButton
+        icon="arrow-left"
+        accessibilityLabel="Previous page"
+        variant="secondary"
+        size="sm"
+        disabled={page <= 1}
+        onPress={() => onPageChange(page - 1)}
+      />
+      <IconButton
+        icon="arrow-right"
+        accessibilityLabel="Next page"
+        variant="secondary"
+        size="sm"
+        disabled={page >= totalPages}
+        onPress={() => onPageChange(page + 1)}
+      />
+    </View>
+  );
+}