ListView Select and unselect all

Signed-off-by: Ky <virginie.ky@gmail.com>

packages/strapi-plugin-upload/admin/src/components/SelectAll/index.js

@@ -1,13 +1,26 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { Checkbox } from '@buffetjs/core';
 import Wrapper from './Wrapper';
 
-const SelectAll = () => {
+const SelectAll = ({ checked, onChange, someChecked }) => {
   return (
     <Wrapper>
-      <Checkbox name="selectAll" />
+      <Checkbox name="selectAll" onChange={onChange} value={checked} someChecked={someChecked} />
     </Wrapper>
   );
 };
 
+SelectAll.defaultProps = {
+  checked: false,
+  onChange: () => {},
+  someChecked: false,
+};
+
+SelectAll.propTypes = {
+  checked: PropTypes.bool,
+  onChange: PropTypes.func,
+  someChecked: PropTypes.bool,
+};
+
 export default SelectAll;

packages/strapi-plugin-upload/admin/src/containers/HomePage/index.js

@@ -139,6 +139,15 @@ const HomePage = () => {
     });
   };
 
+  const handleSelectAll = () => {
+    const valueToSet = !areAllCheckboxesSelected;
+
+    dispatch({
+      type: 'TOGGLE_SELECT_ALL',
+      value: valueToSet,
+    });
+  };
+
   const headerProps = {
     title: {
       label: pluginName,
@@ -177,6 +186,9 @@ const HomePage = () => {
     _page: generatePageFromStart(start, limit),
   };
 
+  const areAllCheckboxesSelected = data.length === dataToDelete.length;
+  const hasSomeCheckboxSelected = dataToDelete.length > 0;
+
   return (
     <Container>
       <Header {...headerProps} />
@@ -189,7 +201,11 @@ const HomePage = () => {
         value={searchValue}
       />
       <ControlsWrapper>
-        <SelectAll />
+        <SelectAll
+          onChange={handleSelectAll}
+          checked={areAllCheckboxesSelected}
+          someChecked={hasSomeCheckboxSelected && !areAllCheckboxesSelected}
+        />
         <SortPicker onChange={handleChangeParams} value={query.get('_sort') || null} />
         <Filters
           onChange={handleChangeParams}

packages/strapi-plugin-upload/admin/src/containers/HomePage/reducer.js

@@ -1,7 +1,40 @@
 import { fromJS } from 'immutable';
 
 const initialState = fromJS({
-  data: [],
+  areAllCheckboxesSelected: false,
+  data: [
+    {
+      id: '1',
+      name: 'Chat paysage',
+      size: 17329,
+      type: 'image/png',
+      url:
+        'https://images.pexels.com/photos/20787/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=350',
+    },
+    {
+      id: '2',
+      name: 'Chat portrait',
+      size: 17329,
+      type: 'image/png',
+      url: 'https://emiliedammedumoulin.com/wp-content/uploads/2018/07/contact-chat-accueil.jpg',
+    },
+    {
+      id: '3',
+      name: 'Gif',
+      size: 17329,
+      type: 'image/png',
+      url:
+        'https://user-images.githubusercontent.com/879561/51321923-54024f00-1a64-11e9-8c37-3308350a59c4.gif',
+    },
+    {
+      id: '4',
+      name: 'Paysage',
+      size: 17329,
+      type: 'image/png',
+      url:
+        'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSyHCXO8D0QQrPDuGstvH9dEwhhB7Qv-3mDMWGpLExyY1CF84cL',
+    },
+  ],
   dataToDelete: [],
 });
 
@@ -21,6 +54,15 @@ const reducer = (state, action) => {
 
       return state.removeIn(['dataToDelete', index]);
     }
+    case 'TOGGLE_SELECT_ALL': {
+      const { value } = action;
+
+      if (!value) {
+        return state.update('dataToDelete', () => []);
+      }
+
+      return state.update('dataToDelete', () => state.get('data').map(item => item.get('id')));
+    }
     default:
       return state;
   }

yarn.lock

@@ -16789,13 +16789,6 @@ stream-shift@^1.0.0:
   resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.1.tgz#d7088281559ab2778424279b0877da3c392d5a3d"
   integrity sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ==
 
-stream-to-array@^2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/stream-to-array/-/stream-to-array-2.3.0.tgz#bbf6b39f5f43ec30bc71babcb37557acecf34353"
-  integrity sha1-u/azn19D7DC8cbq8s3VXrOzzQ1M=
-  dependencies:
-    any-promise "^1.1.0"
-
 stream-to-observable@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/stream-to-observable/-/stream-to-observable-0.1.0.tgz#45bf1d9f2d7dc09bed81f1c307c430e68b84cffe"