@beppla/tapas-ui 1.4.32 → 1.4.34

package/components/DataTable/DataTable.tsx

@@ -0,0 +1,263 @@
+import React, { useState, useMemo } from 'react';
+import { View, ScrollView, StyleSheet, TouchableOpacity, Platform } from 'react-native';
+import Text from '../Text/Text';
+import Pagination from '../Pagination/Pagination';
+
+export interface DataTableColumn<T = any> {
+  key: string;
+  title: string;
+  dataIndex?: string;
+  width?: number;
+  align?: 'left' | 'center' | 'right';
+  sortable?: boolean;
+  render?: (text: any, record: T, index: number) => React.ReactNode;
+  fixed?: 'left' | 'right';
+}
+
+export interface DataTableProps<T = any> {
+  columns: DataTableColumn<T>[];
+  dataSource: T[];
+  rowKey?: string | ((record: T) => string | number);
+  loading?: boolean;
+  pagination?: {
+    current: number;
+    pageSize: number;
+    total: number;
+    onChange?: (page: number, pageSize: number) => void;
+  } | false;
+  onRow?: (record: T, index: number) => {
+    onPress?: () => void;
+  };
+  emptyText?: string;
+  style?: any;
+  headerStyle?: any;
+  rowStyle?: any;
+  maxHeight?: number;
+}
+
+export function DataTable<T = any>({
+  columns,
+  dataSource,
+  rowKey = 'id',
+  loading = false,
+  pagination,
+  onRow,
+  emptyText = 'No data',
+  style,
+  headerStyle,
+  rowStyle,
+  maxHeight,
+}: DataTableProps<T>) {
+  const [sortKey, setSortKey] = useState<string | null>(null);
+  const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('asc');
+
+  const handleSort = (columnKey: string) => {
+    if (sortKey === columnKey) {
+      setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc');
+    } else {
+      setSortKey(columnKey);
+      setSortOrder('asc');
+    }
+  };
+
+  const sortedData = useMemo(() => {
+    if (!sortKey) return dataSource;
+
+    return [...dataSource].sort((a: any, b: any) => {
+      const column = columns.find(col => col.key === sortKey);
+      if (!column) return 0;
+
+      const dataIndex = column.dataIndex || column.key;
+      const aValue = a[dataIndex];
+      const bValue = b[dataIndex];
+
+      if (aValue === bValue) return 0;
+      
+      const comparison = aValue > bValue ? 1 : -1;
+      return sortOrder === 'asc' ? comparison : -comparison;
+    });
+  }, [dataSource, sortKey, sortOrder, columns]);
+
+  const getRowKey = (record: T, index: number): string | number => {
+    if (typeof rowKey === 'function') {
+      return rowKey(record);
+    }
+    return (record as any)[rowKey] || index;
+  };
+
+  return (
+    <View style={[styles.container, style]}>
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={Platform.OS === 'web'}
+        style={maxHeight ? { maxHeight } : undefined}
+      >
+        <View>
+          {/* Table Header */}
+          <View style={[styles.header, headerStyle]}>
+            {columns.map((column) => (
+              <TouchableOpacity
+                key={column.key}
+                style={[
+                  styles.headerCell,
+                  { width: column.width || 150 },
+                  column.align && { 
+                    alignItems: column.align === 'left' ? 'flex-start' : column.align === 'right' ? 'flex-end' : 'center'
+                  },
+                ]}
+                onPress={() => column.sortable && handleSort(column.key)}
+                disabled={!column.sortable}
+              >
+                <Text style={styles.headerText}>
+                  {column.title}
+                  {column.sortable && sortKey === column.key && (
+                    <Text style={styles.sortIndicator}>
+                      {sortOrder === 'asc' ? ' ↑' : ' ↓'}
+                    </Text>
+                  )}
+                </Text>
+              </TouchableOpacity>
+            ))}
+          </View>
+
+          {/* Table Body */}
+          <ScrollView
+            style={maxHeight ? { maxHeight: maxHeight - 50 } : undefined}
+            showsVerticalScrollIndicator={Platform.OS === 'web'}
+          >
+            {loading ? (
+              <View style={styles.loadingRow}>
+                <Text>Loading...</Text>
+              </View>
+            ) : sortedData.length === 0 ? (
+              <View style={styles.emptyRow}>
+                <Text style={styles.emptyText}>{emptyText}</Text>
+              </View>
+            ) : (
+              sortedData.map((record, index) => {
+                const rowProps = onRow ? onRow(record, index) : {};
+                const key = getRowKey(record, index);
+
+                return (
+                  <TouchableOpacity
+                    key={key}
+                    style={[styles.row, rowStyle]}
+                    {...rowProps}
+                    disabled={!rowProps.onPress}
+                  >
+                    {columns.map((column) => {
+                      const dataIndex = column.dataIndex || column.key;
+                      const text = (record as any)[dataIndex];
+                      
+                      return (
+                        <View
+                          key={column.key}
+                          style={[
+                            styles.cell,
+                            { width: column.width || 150 },
+                            column.align && { 
+                              alignItems: column.align === 'left' ? 'flex-start' : column.align === 'right' ? 'flex-end' : 'center'
+                            },
+                          ]}
+                        >
+                          {column.render ? (
+                            column.render(text, record, index)
+                          ) : (
+                            <Text style={styles.cellText}>{text != null ? String(text) : '-'}</Text>
+                          )}
+                        </View>
+                      );
+                    })}
+                  </TouchableOpacity>
+                );
+              })
+            )}
+          </ScrollView>
+        </View>
+      </ScrollView>
+
+      {/* Pagination */}
+      {pagination !== false && pagination && (
+        <View style={styles.paginationContainer}>
+          <Pagination
+            totalCount={`${pagination.total} items`}
+            pageParams={{
+              page: pagination.current,
+              pageSize: pagination.pageSize,
+              totalItems: pagination.total,
+              totalPage: Math.ceil(pagination.total / pagination.pageSize),
+            }}
+            onPageChange={(params) => {
+              pagination.onChange?.(params.page, params.pageSize);
+            }}
+          />
+        </View>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: '#FFFFFF',
+    borderRadius: 8,
+    overflow: 'hidden',
+  },
+  header: {
+    flexDirection: 'row',
+    backgroundColor: '#F5F5F5',
+    borderBottomWidth: 2,
+    borderBottomColor: '#E0E0E0',
+  },
+  headerCell: {
+    padding: 12,
+    borderRightWidth: 1,
+    borderRightColor: '#E0E0E0',
+  },
+  headerText: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: '#2C3E50',
+  },
+  sortIndicator: {
+    color: '#FF6B00',
+    fontSize: 12,
+  },
+  row: {
+    flexDirection: 'row',
+    borderBottomWidth: 1,
+    borderBottomColor: '#F0F0F0',
+    backgroundColor: '#FFFFFF',
+  },
+  cell: {
+    padding: 12,
+    justifyContent: 'center',
+    borderRightWidth: 1,
+    borderRightColor: '#F0F0F0',
+  },
+  cellText: {
+    fontSize: 14,
+    color: '#2C3E50',
+  },
+  loadingRow: {
+    padding: 40,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  emptyRow: {
+    padding: 40,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  emptyText: {
+    fontSize: 14,
+    color: '#999',
+  },
+  paginationContainer: {
+    padding: 16,
+    borderTopWidth: 1,
+    borderTopColor: '#E0E0E0',
+    backgroundColor: '#FAFAFA',
+  },
+});
+

package/components/DataTable/index.tsx

@@ -0,0 +1,3 @@
+export { DataTable } from './DataTable';
+export type { DataTableProps, DataTableColumn } from './DataTable';
+

package/components/DeviceSelectionModal/DeviceSelectionModal.tsx

@@ -0,0 +1,368 @@
+import React, { useState } from 'react';
+import {
+  View,
+  Modal,
+  Text,
+  TouchableOpacity,
+  FlatList,
+  ActivityIndicator,
+} from 'react-native';
+import { withTheme, makeStyles, useTheme } from '@rneui/themed';
+
+export interface Device {
+  id: string;
+  name: string;
+  description?: string;
+}
+
+export interface DeviceSelectionModalProps {
+  visible: boolean;
+  devices: Device[];
+  selectedDeviceId?: string;
+  onClose: () => void;
+  onConfirm: (deviceId: string) => void;
+  title?: string;
+  isLoading?: boolean;
+  error?: string | null;
+  onRetry?: () => void;
+  // Localization props
+  selectDeviceText?: string;
+  pleaseSelectDeviceText?: string;
+  loadingDevicesText?: string;
+  noDevicesAvailableText?: string;
+  closeText?: string;
+  confirmText?: string;
+  retryText?: string;
+  testID?: string;
+}
+
+const DeviceSelectionModal: React.FC<DeviceSelectionModalProps> = ({
+  visible,
+  devices,
+  selectedDeviceId,
+  onClose,
+  onConfirm,
+  title,
+  isLoading = false,
+  error = null,
+  onRetry,
+  selectDeviceText = "Select Device",
+  pleaseSelectDeviceText = "Please select a device",
+  loadingDevicesText = "Loading devices...",
+  noDevicesAvailableText = "No devices available",
+  closeText = "Close",
+  confirmText = "Confirm",
+  retryText = "Retry",
+  testID,
+}) => {
+  const [localSelectedId, setLocalSelectedId] = useState<string | undefined>(
+    selectedDeviceId
+  );
+  const styles = useStyles();
+  const theme = useTheme();
+
+  const handleDeviceSelect = (deviceId: string) => {
+    setLocalSelectedId(deviceId);
+  };
+
+  const handleConfirm = () => {
+    if (localSelectedId) {
+      onConfirm(localSelectedId);
+    }
+  };
+
+  const handleClose = () => {
+    setLocalSelectedId(selectedDeviceId);
+    onClose();
+  };
+
+  const renderDeviceItem = ({ item }: { item: Device }) => {
+    const isSelected = item.id === localSelectedId;
+    
+    return (
+      <TouchableOpacity
+        style={[
+          styles.deviceItem,
+          isSelected && styles.selectedDeviceItem,
+        ]}
+        onPress={() => handleDeviceSelect(item.id)}
+      >
+        <View style={styles.radioContainer}>
+          <View style={[
+            styles.radioButton,
+            isSelected && styles.radioButtonSelected,
+          ]}>
+            {isSelected && <View style={styles.radioButtonInner} />}
+          </View>
+        </View>
+        <View style={styles.deviceInfo}>
+          <Text style={[
+            styles.deviceName,
+            isSelected && styles.selectedDeviceName,
+          ]}>
+            {item.name}
+          </Text>
+          {item.description && (
+            <Text style={styles.deviceDescription}>
+              {item.description}
+            </Text>
+          )}
+        </View>
+      </TouchableOpacity>
+    );
+  };
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="fade"
+      onRequestClose={handleClose}
+      testID={testID}
+    >
+      <View style={styles.overlay}>
+        <View style={styles.modalContainer}>
+          {/* Header */}
+          <View style={styles.header}>
+            <Text style={styles.title}>{title || selectDeviceText}</Text>
+            <Text style={styles.subtitle}>
+              {pleaseSelectDeviceText}
+            </Text>
+          </View>
+
+          {/* Device List */}
+          <View style={styles.deviceList}>
+            {isLoading ? (
+               <View style={styles.loadingContainer}>
+                 <ActivityIndicator size="large" color={theme.theme.colors.primary} />
+                 <Text style={styles.loadingText}>{loadingDevicesText}</Text>
+               </View>
+             ) : error ? (
+               <View style={styles.errorContainer}>
+                 <Text style={styles.errorText}>{error}</Text>
+                 {onRetry && (
+                   <TouchableOpacity style={styles.retryButton} onPress={onRetry}>
+                     <Text style={styles.retryButtonText}>{retryText}</Text>
+                   </TouchableOpacity>
+                 )}
+               </View>
+             ) : (devices || []).length === 0 ? (
+               <View style={styles.emptyContainer}>
+                 <Text style={styles.emptyText}>{noDevicesAvailableText}</Text>
+               </View>
+            ) : (
+              <FlatList
+                data={devices}
+                keyExtractor={(item) => item.id}
+                renderItem={renderDeviceItem}
+                showsVerticalScrollIndicator={false}
+              />
+            )}
+          </View>
+
+          {/* Footer Buttons */}
+          <View style={styles.footer}>
+            <TouchableOpacity
+              style={styles.closeButton}
+              onPress={handleClose}
+            >
+              <Text style={styles.closeButtonText}>{closeText}</Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              style={[
+                styles.confirmButton,
+                !localSelectedId && styles.confirmButtonDisabled,
+              ]}
+              onPress={handleConfirm}
+              disabled={!localSelectedId}
+            >
+              <Text style={[
+                styles.confirmButtonText,
+                !localSelectedId && styles.confirmButtonTextDisabled,
+              ]}>
+                {confirmText}
+              </Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+const useStyles = makeStyles((theme) => ({
+  overlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  modalContainer: {
+    backgroundColor: theme.colors.white,
+    borderRadius: 12,
+    width: '90%',
+    maxWidth: 400,
+    maxHeight: '80%',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 8 },
+    shadowOpacity: 0.08,
+    shadowRadius: 24,
+    elevation: 8,
+  },
+  header: {
+    padding: 24,
+    paddingBottom: 16,
+    borderBottomWidth: 1,
+    borderBottomColor: theme.colors.grey4,
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: theme.colors.primary,
+    marginBottom: 8,
+  },
+  subtitle: {
+    fontSize: 14,
+    color: theme.colors.grey1,
+    fontWeight: '400',
+  },
+  deviceList: {
+    maxHeight: 300,
+    paddingHorizontal: 24,
+    paddingVertical: 16,
+  },
+  deviceItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 16,
+    paddingHorizontal: 12,
+    borderRadius: 8,
+    marginBottom: 8,
+  },
+  selectedDeviceItem: {
+    backgroundColor: theme.colors.grey3,
+  },
+  radioContainer: {
+    marginRight: 12,
+  },
+  radioButton: {
+    width: 20,
+    height: 20,
+    borderRadius: 10,
+    borderWidth: 2,
+    borderColor: theme.colors.greyOutline,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  radioButtonSelected: {
+    borderColor: theme.colors.primary,
+  },
+  radioButtonInner: {
+    width: 10,
+    height: 10,
+    borderRadius: 5,
+    backgroundColor: theme.colors.primary,
+  },
+  deviceInfo: {
+    flex: 1,
+  },
+  deviceName: {
+    fontSize: 16,
+    fontWeight: '500',
+    color: theme.colors.primary,
+    marginBottom: 4,
+  },
+  selectedDeviceName: {
+    color: theme.colors.primary,
+  },
+  deviceDescription: {
+    fontSize: 12,
+    color: theme.colors.grey1,
+    fontWeight: '400',
+  },
+  footer: {
+    flexDirection: 'row',
+    padding: 24,
+    paddingTop: 16,
+    borderTopWidth: 1,
+    borderTopColor: theme.colors.grey4,
+    gap: 12,
+  },
+  closeButton: {
+    flex: 1,
+    height: 48,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: theme.colors.greyOutline,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  closeButtonText: {
+    fontSize: 16,
+    fontWeight: '500',
+    color: theme.colors.grey1,
+  },
+  confirmButton: {
+    flex: 1,
+    height: 48,
+    borderRadius: 8,
+    backgroundColor: theme.colors.primary,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  confirmButtonDisabled: {
+    backgroundColor: theme.colors.grey3,
+  },
+  confirmButtonText: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: theme.colors.white,
+  },
+  confirmButtonTextDisabled: {
+    color: theme.colors.grey1,
+  },
+  loadingContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 40,
+  },
+  loadingText: {
+    marginTop: 16,
+    fontSize: 14,
+    color: theme.colors.grey1,
+  },
+  errorContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 40,
+  },
+  errorText: {
+    fontSize: 14,
+    color: theme.colors.error || '#FF6B6B',
+    textAlign: 'center',
+    marginBottom: 16,
+  },
+  retryButton: {
+    paddingHorizontal: 20,
+    paddingVertical: 8,
+    backgroundColor: theme.colors.primary,
+    borderRadius: 6,
+  },
+  retryButtonText: {
+    fontSize: 14,
+    color: theme.colors.white,
+    fontWeight: '500',
+  },
+  emptyContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 40,
+  },
+  emptyText: {
+    fontSize: 14,
+    color: theme.colors.grey1,
+    textAlign: 'center',
+  },
+}));
+
+export default withTheme(DeviceSelectionModal);

package/components/DraggableFlatList/DraggableFlatList.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import {View} from "react-native";
+
+interface Props {
+    testID?: string;
+}
+
+const DraggableFlatList: React.FC<Props> = ({ testID }) => {
+    return <View testID={testID}></View>
+}
+
+export default DraggableFlatList;