Bulk actions support (#1418)

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

@@ -0,0 +1,50 @@
+import React from 'react';
+import './SelectAllCheckbox.scss';
+import { translateString } from '../utils/helpers/';
+
+interface SelectAllCheckboxProps {
+  totalCount: number;
+  selectedCount: number;
+  onSelectAll: () => void;
+  onDeselectAll: () => void;
+}
+
+export const SelectAllCheckbox: React.FC<SelectAllCheckboxProps> = ({
+  totalCount,
+  selectedCount,
+  onSelectAll,
+  onDeselectAll,
+}) => {
+  const allSelected = totalCount > 0 && selectedCount === totalCount;
+  const someSelected = selectedCount > 0 && selectedCount < totalCount;
+
+  const handleChange = () => {
+    if (allSelected || someSelected) {
+      onDeselectAll();
+    } else {
+      onSelectAll();
+    }
+  };
+
+  const isDisabled = totalCount === 0;
+
+  return (
+    <div className="select-all-checkbox">
+      <label className={'select-all-label' + (isDisabled ? ' disabled' : '')}>
+        <input
+          type="checkbox"
+          checked={allSelected}
+          ref={(input) => {
+            if (input) {
+              input.indeterminate = someSelected;
+            }
+          }}
+          onChange={handleChange}
+          disabled={isDisabled}
+          aria-label={translateString('Select all media')}
+        />
+        <span className="checkbox-label-text">{translateString('All')}</span>
+      </label>
+    </div>
+  );
+};