@object-ui/plugin-view 3.0.2 → 3.1.0

package/src/ViewSwitcher.tsx

@@ -26,10 +26,17 @@ import {
   Activity,
   Calendar,
   FileText,
+  GanttChartSquare,
   Grid,
+  Images,
   LayoutGrid,
   List,
   Map,
+  Plus,
+  Share2,
+  Settings,
+  Copy,
+  Trash2,
   icons,
   type LucideIcon,
 } from 'lucide-react';
@@ -40,6 +47,9 @@ export type ViewSwitcherProps = {
   schema: ViewSwitcherSchema;
   className?: string;
   onViewChange?: (view: ViewType) => void;
+  onCreateView?: () => void;
+  onViewAction?: (action: string, view: ViewType) => void;
+  createViewLabel?: string;
   [key: string]: any;
 };
 
@@ -51,6 +61,8 @@ const DEFAULT_VIEW_LABELS: Record<ViewType, string> = {
   calendar: 'Calendar',
   timeline: 'Timeline',
   map: 'Map',
+  gallery: 'Gallery',
+  gantt: 'Gantt',
 };
 
 const DEFAULT_VIEW_ICONS: Record<ViewType, LucideIcon> = {
@@ -61,6 +73,8 @@ const DEFAULT_VIEW_ICONS: Record<ViewType, LucideIcon> = {
   calendar: Calendar,
   timeline: Activity,
   map: Map,
+  gallery: Images,
+  gantt: GanttChartSquare,
 };
 
 const viewSwitcherLayout = cva('flex gap-4', {
@@ -149,10 +163,27 @@ function getInitialView(schema: ViewSwitcherSchema): ViewType | undefined {
   return schema.views?.[0]?.type;
 }
 
+const DEFAULT_VIEW_ACTION_ICONS: Record<string, LucideIcon> = {
+  share: Share2,
+  settings: Settings,
+  duplicate: Copy,
+  delete: Trash2,
+};
+
+const DEFAULT_VIEW_ACTION_LABELS: Record<string, string> = {
+  share: 'Share',
+  settings: 'Settings',
+  duplicate: 'Duplicate',
+  delete: 'Delete',
+};
+
 export const ViewSwitcher: React.FC<ViewSwitcherProps> = ({
   schema,
   className,
   onViewChange,
+  onCreateView,
+  onViewAction,
+  createViewLabel = 'Create view',
   ...props
 }) => {
   const storageKey = React.useMemo(() => {
@@ -219,8 +250,42 @@ export const ViewSwitcher: React.FC<ViewSwitcherProps> = ({
   const isVertical = position === 'left' || position === 'right';
   const orientation = isVertical ? 'vertical' : 'horizontal';
 
+  const viewActionButtons = schema.viewActions && schema.viewActions.length > 0 ? (
+    <div className="flex items-center gap-1">
+      {schema.viewActions.map((action, idx) => {
+        const ActionIcon = action.icon
+          ? resolveIcon(action.icon) || DEFAULT_VIEW_ACTION_ICONS[action.type]
+          : DEFAULT_VIEW_ACTION_ICONS[action.type];
+        return (
+          <Button
+            key={`action-${action.type}-${idx}`}
+            type="button"
+            variant="ghost"
+            size="icon-sm"
+            onClick={() => onViewAction?.(action.type, currentView!)}
+            title={DEFAULT_VIEW_ACTION_LABELS[action.type] || action.type}
+          >
+            {ActionIcon ? <ActionIcon className="h-3.5 w-3.5" /> : null}
+          </Button>
+        );
+      })}
+    </div>
+  ) : null;
+
+  const createViewButton = schema.allowCreateView ? (
+    <Button
+      type="button"
+      variant="ghost"
+      size="icon-sm"
+      onClick={() => onCreateView?.()}
+      title={createViewLabel}
+    >
+      <Plus className="h-3.5 w-3.5" />
+    </Button>
+  ) : null;
+
   const switcher = (
-    <div className={cn(viewSwitcherWidth({ orientation }))}>
+    <div className={cn(viewSwitcherWidth({ orientation }), 'flex items-center gap-1')}>
       {variant === 'dropdown' && (
         <Select value={currentViewValue} onValueChange={(value) => handleViewChange(value as ViewType)}>
           <SelectTrigger className={cn('w-full', isVertical ? 'h-10' : 'h-9')}>
@@ -278,6 +343,9 @@ export const ViewSwitcher: React.FC<ViewSwitcherProps> = ({
           </TabsList>
         </Tabs>
       )}
+
+      {viewActionButtons}
+      {createViewButton}
     </div>
   );