@anymux/ui-kit 0.1.0

package/src/list/components/VirtualizedDetailsView.tsx

@@ -0,0 +1,231 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { observer } from 'mobx-react-lite';
+import { FixedSizeList as List } from 'react-window';
+import { Columns3 } from 'lucide-react';
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuCheckboxItem,
+  DropdownMenuSeparator,
+  DropdownMenuLabel,
+} from '@anymux/ui/components/dropdown-menu';
+import { ListItemsModel } from '../models/ListItemsModel';
+import { ListItem } from './ListItem';
+import { ListContextMenu } from './ListContextMenu';
+
+export interface VirtualizedDetailsViewProps {
+  model: ListItemsModel;
+  height: number;
+  width?: number;
+  className?: string;
+  overscanCount?: number;
+}
+
+interface DetailsItemRendererProps {
+  index: number;
+  style: React.CSSProperties;
+  data: {
+    model: ListItemsModel;
+    onItemClick: (item: any, event: React.MouseEvent) => void;
+    onItemDoubleClick: (item: any, event: React.MouseEvent) => void;
+    onItemContextMenu: (item: any, event: React.MouseEvent) => void;
+  };
+}
+
+const DetailsItemRenderer = observer<DetailsItemRendererProps>(({ index, style, data }) => {
+  const { model, onItemClick, onItemDoubleClick, onItemContextMenu } = data;
+  const item = model.items[index];
+
+  if (!item) {
+    return (
+      <div style={{ ...style, gridTemplateColumns: model.detailsGridTemplateColumns, columnGap: 16 }} className="grid items-center px-4 py-1 animate-pulse">
+        <div className="h-4 w-4 bg-muted rounded" />
+        <div className="h-4 bg-muted rounded" />
+        {!model.compactMode && model.columnVisibility.type && <div className="h-4 bg-muted rounded" />}
+        {!model.compactMode && model.columnVisibility.modified && <div className="h-4 bg-muted rounded" />}
+        {!model.compactMode && model.columnVisibility.size && <div className="h-4 bg-muted rounded" />}
+      </div>
+    );
+  }
+
+  return (
+    <div style={style}>
+      <ListItem
+        item={item}
+        index={index}
+        totalItems={model.totalItemCount}
+        viewType={model.currentViewType}
+        provider={model.provider}
+        model={model}
+        isSelected={model.isItemSelected(item.id)}
+        isFocused={model.focusedItem === item.id}
+        onClick={onItemClick}
+        onDoubleClick={onItemDoubleClick}
+        onContextMenu={onItemContextMenu}
+      />
+    </div>
+  );
+});
+
+DetailsItemRenderer.displayName = 'VirtualizedDetailsItemRenderer';
+
+export const VirtualizedDetailsView = observer<VirtualizedDetailsViewProps>(({
+  model,
+  height,
+  width = '100%',
+  className = '',
+  overscanCount = 5
+}) => {
+  const handleItemClick = useCallback((item: any, event: React.MouseEvent) => {
+    const modifiers = {
+      ctrl: event.ctrlKey || event.metaKey,
+      shift: event.shiftKey
+    };
+    model.selectItem(item, modifiers);
+  }, [model]);
+
+  const handleItemDoubleClick = useCallback((item: any, event: React.MouseEvent) => {
+    if (model.provider.onItemDoubleClick) {
+      model.provider.onItemDoubleClick(item);
+    }
+  }, [model]);
+
+  // Context menu state
+  const [contextMenu, setContextMenu] = useState<{
+    isOpen: boolean;
+    position: { x: number; y: number };
+  }>({ isOpen: false, position: { x: 0, y: 0 } });
+
+  const handleItemContextMenu = useCallback((item: any, event: React.MouseEvent) => {
+    event.preventDefault();
+    if (!model.isItemSelected(item.id)) {
+      model.selectItem(item);
+    }
+    setContextMenu({
+      isOpen: true,
+      position: { x: event.clientX, y: event.clientY }
+    });
+  }, [model]);
+
+  const handleCloseContextMenu = useCallback(() => {
+    setContextMenu(prev => ({ ...prev, isOpen: false }));
+  }, []);
+
+  const itemHeight = model.provider.getItemHeight(model.currentViewType);
+  const headerHeight = 40;
+
+  const itemData = {
+    model,
+    onItemClick: handleItemClick,
+    onItemDoubleClick: handleItemDoubleClick,
+    onItemContextMenu: handleItemContextMenu
+  };
+
+  return (
+    <div className={`${className}`} style={{ height, width }}>
+      {/* Fixed header — same CSS grid as ListItem details rows */}
+      <div
+        className="grid items-center bg-background border-b px-4 text-sm font-medium text-muted-foreground"
+        style={{ gridTemplateColumns: model.detailsGridTemplateColumns, columnGap: 16, height: headerHeight }}
+      >
+        {model.showCheckboxes && (
+          <div className="flex items-center justify-center">
+            <input
+              type="checkbox"
+              checked={model.items.length > 0 && model.selectedItems.size === model.items.length}
+              ref={(el) => {
+                if (el) el.indeterminate = model.selectedItems.size > 0 && model.selectedItems.size < model.items.length;
+              }}
+              onChange={() => {
+                if (model.selectedItems.size === model.items.length) {
+                  model.clearSelection();
+                } else {
+                  model.selectAll();
+                }
+              }}
+              className="h-3.5 w-3.5 rounded border-muted-foreground/50 accent-primary cursor-pointer"
+              aria-label="Select all"
+            />
+          </div>
+        )}
+        <div>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <button className="flex items-center justify-center hover:text-foreground transition-colors" aria-label="Toggle columns">
+                <Columns3 className="size-4" />
+              </button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="start">
+              <DropdownMenuLabel>Columns</DropdownMenuLabel>
+              <DropdownMenuSeparator />
+              <DropdownMenuCheckboxItem
+                checked={!model.compactMode && model.columnVisibility.type}
+                onCheckedChange={(checked) => {
+                  if (model.compactMode) model.setCompactMode(false);
+                  model.setColumnVisibility('type', !!checked);
+                }}
+              >
+                Type
+              </DropdownMenuCheckboxItem>
+              <DropdownMenuCheckboxItem
+                checked={!model.compactMode && model.columnVisibility.modified}
+                onCheckedChange={(checked) => {
+                  if (model.compactMode) model.setCompactMode(false);
+                  model.setColumnVisibility('modified', !!checked);
+                }}
+              >
+                Modified
+              </DropdownMenuCheckboxItem>
+              <DropdownMenuCheckboxItem
+                checked={!model.compactMode && model.columnVisibility.size}
+                onCheckedChange={(checked) => {
+                  if (model.compactMode) model.setCompactMode(false);
+                  model.setColumnVisibility('size', !!checked);
+                }}
+              >
+                Size
+              </DropdownMenuCheckboxItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuCheckboxItem
+                checked={model.compactMode}
+                onCheckedChange={(checked) => model.setCompactMode(!!checked)}
+              >
+                Compact
+              </DropdownMenuCheckboxItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+        <div>Name</div>
+        {!model.compactMode && model.columnVisibility.type && <div>Type</div>}
+        {!model.compactMode && model.columnVisibility.modified && <div>Modified</div>}
+        {!model.compactMode && model.columnVisibility.size && <div className="text-right">Size</div>}
+      </div>
+
+      {/* Virtualized content */}
+      <List
+        height={height - headerHeight}
+        width={width}
+        itemCount={model.totalItemCount}
+        itemSize={itemHeight}
+        itemData={itemData}
+        overscanCount={overscanCount}
+        onItemsRendered={({ visibleStartIndex, visibleStopIndex }) => {
+          model.updateViewportRange(visibleStartIndex, visibleStopIndex);
+        }}
+      >
+        {DetailsItemRenderer}
+      </List>
+
+      <ListContextMenu
+        isOpen={contextMenu.isOpen}
+        position={contextMenu.position}
+        items={model.selectedItemsArray}
+        provider={model.provider}
+        onClose={handleCloseContextMenu}
+      />
+    </div>
+  );
+});
+
+VirtualizedDetailsView.displayName = 'VirtualizedDetailsView';

package/src/list/components/VirtualizedGrid.tsx

@@ -0,0 +1,164 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { observer } from 'mobx-react-lite';
+import { FixedSizeGrid as Grid } from 'react-window';
+import { ListItemsModel } from '../models/ListItemsModel';
+import type { ListItemData } from '../types/ListTypes';
+import { ListItem } from './ListItem';
+import { ListContextMenu } from './ListContextMenu';
+
+export interface VirtualizedGridProps {
+  model: ListItemsModel;
+  height: number;
+  width: number;
+  className?: string;
+  overscanCount?: number;
+}
+
+interface GridItemRendererProps {
+  columnIndex: number;
+  rowIndex: number;
+  style: React.CSSProperties;
+  data: {
+    model: ListItemsModel;
+    itemsPerRow: number;
+    itemWidth: number;
+    onItemClick: (item: any, event: React.MouseEvent) => void;
+    onItemDoubleClick: (item: any, event: React.MouseEvent) => void;
+    onItemContextMenu: (item: any, event: React.MouseEvent) => void;
+  };
+}
+
+const GridItemRenderer = observer<GridItemRendererProps>(({
+  columnIndex,
+  rowIndex,
+  style,
+  data
+}) => {
+  const { model, itemsPerRow, onItemClick, onItemDoubleClick, onItemContextMenu } = data;
+  const itemIndex = rowIndex * itemsPerRow + columnIndex;
+  const item = model.items[itemIndex];
+
+  if (!item) {
+    return (
+      <div style={style} className="p-2">
+        <div className="w-full h-full bg-muted/20 rounded animate-pulse" />
+      </div>
+    );
+  }
+
+  return (
+    <div style={style} className="p-1">
+      <ListItem
+        item={item}
+        index={itemIndex}
+        totalItems={model.totalItemCount}
+        viewType={model.currentViewType}
+        provider={model.provider}
+        itemWidth={model.itemDimensions.width}
+        itemHeight={model.itemDimensions.height}
+        isSelected={model.isItemSelected(item.id)}
+        isFocused={model.focusedItem === item.id}
+        onClick={onItemClick}
+        onDoubleClick={onItemDoubleClick}
+        onContextMenu={onItemContextMenu}
+      />
+    </div>
+  );
+});
+
+GridItemRenderer.displayName = 'VirtualizedGridItemRenderer';
+
+export const VirtualizedGrid = observer<VirtualizedGridProps>(({
+  model,
+  height,
+  width,
+  className = '',
+  overscanCount = 5
+}) => {
+  const itemWidth = model.provider.getItemWidth?.(model.currentViewType) || 200;
+  const itemHeight = model.provider.getItemHeight(model.currentViewType);
+  const itemsPerRow = Math.max(1, Math.floor(width / itemWidth));
+  const rowCount = Math.ceil(model.totalItemCount / itemsPerRow);
+
+  // Context menu state
+  const [contextMenu, setContextMenu] = useState<{
+    isOpen: boolean;
+    position: { x: number; y: number };
+  }>({ isOpen: false, position: { x: 0, y: 0 } });
+
+  const handleItemClick = useCallback((item: any, event: React.MouseEvent) => {
+    const modifiers = {
+      ctrl: event.ctrlKey || event.metaKey,
+      shift: event.shiftKey
+    };
+    model.selectItem(item, modifiers);
+  }, [model]);
+
+  const handleItemDoubleClick = useCallback((item: any, event: React.MouseEvent) => {
+    if (model.provider.onItemDoubleClick) {
+      model.provider.onItemDoubleClick(item);
+    }
+  }, [model]);
+
+  const handleItemContextMenu = useCallback((item: any, event: React.MouseEvent) => {
+    event.preventDefault();
+    if (!model.isItemSelected(item.id)) {
+      model.selectItem(item);
+    }
+    setContextMenu({
+      isOpen: true,
+      position: { x: event.clientX, y: event.clientY }
+    });
+  }, [model]);
+
+  const handleCloseContextMenu = useCallback(() => {
+    setContextMenu(prev => ({ ...prev, isOpen: false }));
+  }, []);
+
+  const gridData = useMemo(() => ({
+    model,
+    itemsPerRow,
+    itemWidth,
+    onItemClick: handleItemClick,
+    onItemDoubleClick: handleItemDoubleClick,
+    onItemContextMenu: handleItemContextMenu
+  }), [model, itemsPerRow, itemWidth, handleItemClick, handleItemDoubleClick, handleItemContextMenu]);
+
+  return (
+    <>
+      <Grid
+        className={className}
+        height={height}
+        width={width}
+        columnCount={itemsPerRow}
+        rowCount={rowCount}
+        columnWidth={itemWidth}
+        rowHeight={itemHeight}
+        itemData={gridData}
+        overscanColumnCount={overscanCount}
+        overscanRowCount={overscanCount}
+        onItemsRendered={({
+          visibleColumnStartIndex,
+          visibleColumnStopIndex,
+          visibleRowStartIndex,
+          visibleRowStopIndex
+        }) => {
+          const startIndex = visibleRowStartIndex * itemsPerRow + visibleColumnStartIndex;
+          const stopIndex = visibleRowStopIndex * itemsPerRow + visibleColumnStopIndex;
+          model.updateViewportRange(startIndex, stopIndex);
+        }}
+      >
+        {GridItemRenderer}
+      </Grid>
+      <ListContextMenu
+        isOpen={contextMenu.isOpen}
+        position={contextMenu.position}
+        items={model.selectedItemsArray}
+        provider={model.provider}
+        onClose={handleCloseContextMenu}
+      />
+    </>
+  );
+});
+
+VirtualizedGrid.displayName = 'VirtualizedGrid';

package/src/list/components/VirtualizedList.tsx

@@ -0,0 +1,154 @@
+import React, { useCallback, useState } from 'react';
+import { observer } from 'mobx-react-lite';
+import { FixedSizeList as List } from 'react-window';
+import { ListItemsModel } from '../models/ListItemsModel';
+import { ListItem } from './ListItem';
+import { ListContextMenu } from './ListContextMenu';
+
+export interface VirtualizedListProps {
+  model: ListItemsModel;
+  height: number;
+  width?: number;
+  className?: string;
+  overscanCount?: number;
+}
+
+interface ItemRendererProps {
+  index: number;
+  style: React.CSSProperties;
+  data: {
+    model: ListItemsModel;
+    onItemClick: (item: any, event: React.MouseEvent) => void;
+    onItemDoubleClick: (item: any, event: React.MouseEvent) => void;
+    onItemContextMenu: (item: any, event: React.MouseEvent) => void;
+  };
+}
+
+const ItemRendererComponent = observer<ItemRendererProps>(({ index, style, data }) => {
+  const { model, onItemClick, onItemDoubleClick, onItemContextMenu } = data;
+  const item = model.items[index];
+
+  if (!item) {
+    return (
+      <div style={style} className="flex items-center p-2 animate-pulse">
+        <div className="w-4 h-4 bg-muted rounded mr-2" />
+        <div className="flex-1 h-4 bg-muted rounded" />
+      </div>
+    );
+  }
+
+  return (
+    <div style={style}>
+      <ListItem
+        item={item}
+        index={index}
+        totalItems={model.totalItemCount}
+        viewType={model.currentViewType}
+        provider={model.provider}
+        model={model}
+        isSelected={model.isItemSelected(item.id)}
+        isFocused={model.focusedItem === item.id}
+        onClick={onItemClick}
+        onDoubleClick={onItemDoubleClick}
+        onContextMenu={onItemContextMenu}
+      />
+    </div>
+  );
+});
+
+const ItemRenderer = React.memo(ItemRendererComponent, (prevProps, nextProps) => {
+  const prevItem = prevProps.data.model.items[prevProps.index];
+  const nextItem = nextProps.data.model.items[nextProps.index];
+
+  return (
+    prevProps.index === nextProps.index &&
+    prevItem?.id === nextItem?.id &&
+    prevItem?.name === nextItem?.name &&
+    prevItem?.modified?.getTime() === nextItem?.modified?.getTime() &&
+    prevProps.data.model.isItemSelected(prevItem?.id || '') === nextProps.data.model.isItemSelected(nextItem?.id || '') &&
+    prevProps.data.model.focusedItem === nextProps.data.model.focusedItem
+  );
+});
+
+ItemRenderer.displayName = 'VirtualizedListItemRenderer';
+
+export const VirtualizedList = observer<VirtualizedListProps>(({
+  model,
+  height,
+  width = '100%',
+  className = '',
+  overscanCount = 5
+}) => {
+  // Context menu state
+  const [contextMenu, setContextMenu] = useState<{
+    isOpen: boolean;
+    position: { x: number; y: number };
+  }>({ isOpen: false, position: { x: 0, y: 0 } });
+
+  const handleItemClick = useCallback((item: any, event: React.MouseEvent) => {
+    const modifiers = {
+      ctrl: event.ctrlKey || event.metaKey,
+      shift: event.shiftKey
+    };
+    model.selectItem(item, modifiers);
+  }, [model]);
+
+  const handleItemDoubleClick = useCallback((item: any, event: React.MouseEvent) => {
+    if (model.provider.onItemDoubleClick) {
+      model.provider.onItemDoubleClick(item);
+    }
+  }, [model]);
+
+  const handleItemContextMenu = useCallback((item: any, event: React.MouseEvent) => {
+    event.preventDefault();
+    // Select item if not already selected
+    if (!model.isItemSelected(item.id)) {
+      model.selectItem(item);
+    }
+    setContextMenu({
+      isOpen: true,
+      position: { x: event.clientX, y: event.clientY }
+    });
+  }, [model]);
+
+  const handleCloseContextMenu = useCallback(() => {
+    setContextMenu(prev => ({ ...prev, isOpen: false }));
+  }, []);
+
+  const itemHeight = model.provider.getItemHeight(model.currentViewType);
+
+  const itemData = {
+    model,
+    onItemClick: handleItemClick,
+    onItemDoubleClick: handleItemDoubleClick,
+    onItemContextMenu: handleItemContextMenu
+  };
+
+  return (
+    <>
+      <List
+        className={className}
+        height={height}
+        width={width}
+        itemCount={model.totalItemCount}
+        itemSize={itemHeight}
+        itemData={itemData}
+        overscanCount={overscanCount}
+        onItemsRendered={({ visibleStartIndex, visibleStopIndex }) => {
+          model.updateViewportRange(visibleStartIndex, visibleStopIndex);
+        }}
+      >
+        {ItemRenderer}
+      </List>
+      <ListContextMenu
+        isOpen={contextMenu.isOpen}
+        position={contextMenu.position}
+        items={model.selectedItemsArray}
+        provider={model.provider}
+        onClose={handleCloseContextMenu}
+      />
+    </>
+  );
+});
+
+VirtualizedList.displayName = 'VirtualizedList';