73 lines
2.2 KiB
TypeScript
73 lines
2.2 KiB
TypeScript
import { View } from "react-native";
|
|
|
|
import { MobileTableControls } from "./MobileTableControls";
|
|
import { DesktopTableControls } from "./DesktopTableControls";
|
|
|
|
interface TableControlsProps {
|
|
searchQuery: string;
|
|
menuVisible: boolean;
|
|
menuAnchor: { x: number; y: number };
|
|
searchPlaceholder?: string;
|
|
onSearch: (query: string) => void;
|
|
onMenuDismiss: () => void;
|
|
onItemsPerPageChange: (value: number) => void;
|
|
itemsPerPage?: number;
|
|
renderFilterComponent?: () => React.ReactNode;
|
|
renderFilterChips?: () => React.ReactNode;
|
|
renderActionButtons?: () => React.ReactNode;
|
|
itemsPerPageMenuOptions?: number[];
|
|
}
|
|
|
|
export const TableControls = ({
|
|
searchQuery,
|
|
menuVisible,
|
|
menuAnchor,
|
|
searchPlaceholder = "Search",
|
|
onSearch,
|
|
onMenuDismiss,
|
|
onItemsPerPageChange,
|
|
itemsPerPage = 25,
|
|
renderFilterComponent,
|
|
renderFilterChips,
|
|
renderActionButtons,
|
|
itemsPerPageMenuOptions,
|
|
}: TableControlsProps) => {
|
|
return (
|
|
<>
|
|
<View className="hidden md:flex flex-col mb-4">
|
|
<DesktopTableControls
|
|
searchQuery={searchQuery}
|
|
menuVisible={menuVisible}
|
|
menuAnchor={menuAnchor}
|
|
onSearch={onSearch}
|
|
onMenuDismiss={onMenuDismiss}
|
|
onItemsPerPageChange={onItemsPerPageChange}
|
|
itemsPerPage={itemsPerPage}
|
|
renderFilterComponent={renderFilterComponent}
|
|
renderFilterChips={renderFilterChips}
|
|
renderActionButtons={renderActionButtons}
|
|
itemsPerPageMenuOptions={itemsPerPageMenuOptions}
|
|
searchPlaceholder={searchPlaceholder}
|
|
/>
|
|
</View>
|
|
|
|
<View className="flex md:hidden flex-col mb-4">
|
|
<MobileTableControls
|
|
searchQuery={searchQuery}
|
|
menuVisible={menuVisible}
|
|
menuAnchor={menuAnchor}
|
|
onSearch={onSearch}
|
|
onMenuDismiss={onMenuDismiss}
|
|
onItemsPerPageChange={onItemsPerPageChange}
|
|
itemsPerPage={itemsPerPage}
|
|
renderFilterComponent={renderFilterComponent}
|
|
renderFilterChips={renderFilterChips}
|
|
renderActionButtons={renderActionButtons}
|
|
itemsPerPageMenuOptions={itemsPerPageMenuOptions}
|
|
searchPlaceholder={searchPlaceholder}
|
|
/>
|
|
</View>
|
|
</>
|
|
);
|
|
};
|