Bulk actions support (#1418)

frontend/src/static/js/components/MediaListWrapper.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 import { MediaListRow } from './MediaListRow';
+import { BulkActionsDropdown } from './BulkActionsDropdown';
+import { SelectAllCheckbox } from './SelectAllCheckbox';
 import './MediaListWrapper.scss';
 
 interface MediaListWrapperProps {
@@ -9,6 +11,12 @@ interface MediaListWrapperProps {
   className?: string;
   style?: { [key: string]: any };
   children?: any;
+  showBulkActions?: boolean;
+  selectedCount?: number;
+  totalCount?: number;
+  onBulkAction?: (action: string) => void;
+  onSelectAll?: () => void;
+  onDeselectAll?: () => void;
 }
 
 export const MediaListWrapper: React.FC<MediaListWrapperProps> = ({
@@ -18,9 +26,26 @@ export const MediaListWrapper: React.FC<MediaListWrapperProps> = ({
   className,
   style,
   children,
+  showBulkActions = false,
+  selectedCount = 0,
+  totalCount = 0,
+  onBulkAction = () => {},
+  onSelectAll = () => {},
+  onDeselectAll = () => {},
 }) => (
   <div className={(className ? className + ' ' : '') + 'media-list-wrapper'} style={style}>
     <MediaListRow title={title} viewAllLink={viewAllLink} viewAllText={viewAllText}>
+      {showBulkActions && (
+        <div className="bulk-actions-container">
+          <BulkActionsDropdown selectedCount={selectedCount} onActionSelect={onBulkAction} />
+          <SelectAllCheckbox
+            totalCount={totalCount}
+            selectedCount={selectedCount}
+            onSelectAll={onSelectAll}
+            onDeselectAll={onDeselectAll}
+          />
+        </div>
+      )}
       {children || null}
     </MediaListRow>
   </div>