Upload modal card

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

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

@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Checkbox } from '@buffetjs/core';
 
 import Text from '../Text';
 import CardImgWrapper from '../CardImgWrapper';
@@ -9,20 +8,31 @@ import Wrapper from './Wrapper';
 import Title from './Title';
 
 // TODO - adapt with the real data
-const Card = ({ checked, id, name, size, small, type, onChange, url }) => {
+const Card = ({
+  checked,
+  children,
+  errorMessage,
+  hasError,
+  mime,
+  name,
+  onChange,
+  small,
+  size,
+  type,
+  url,
+}) => {
   return (
     <Wrapper>
       <div>
-        <CardImgWrapper small={small} checked={checked}>
+        <CardImgWrapper small={small} checked={checked} hasError={hasError}>
-          <CardPreview type={type} url={url} />
+          <CardPreview type={mime || type} url={url} />
-          <div className="card-control-wrapper">
+          {children}
-            <Checkbox name={id} onChange={onChange} value={checked} />
-          </div>
         </CardImgWrapper>
         <Title fontSize="md" fontWeight="bold" ellipsis>
           {name}
         </Title>
-        <Text color="grey" fontSize="xs" ellipsis>{`${type} - ${size}`}</Text>
+        {!hasError && <Text color="grey" fontSize="xs" ellipsis>{`${type} - ${size}`}</Text>}
+        {hasError && <p style={{ marginBottom: 14 }}>{errorMessage}</p>}
       </div>
     </Wrapper>
   );
@@ -30,6 +40,8 @@ const Card = ({ checked, id, name, size, small, type, onChange, url }) => {
 
 Card.defaultProps = {
   checked: false,
+  children: null,
+  hasError: false,
   name: null,
   onChange: () => {},
   size: 0,
@@ -40,8 +52,10 @@ Card.defaultProps = {
 
 Card.propTypes = {
   checked: PropTypes.bool,
+  children: PropTypes.node,
+  hasError: PropTypes.bool,
   name: PropTypes.string,
-  id: PropTypes.string.isRequired,
+  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
   onChange: PropTypes.func,
   size: PropTypes.number,
   small: PropTypes.bool,

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

@@ -23,7 +23,7 @@ const CardImgWrapper = styled.div`
   &:hover {
     .card-control-wrapper {
       display: flex;
-      z-index: 1050;
+      z-index: 1045;
     }
   }
 

packages/strapi-plugin-upload/admin/src/components/CardPreview/Wrapper.js

@@ -8,15 +8,15 @@ const Wrapper = styled.div`
   top: 0;
   left: 0;
   display: flex;
-  background-color: ${({ isImg }) => (isImg ? '#333740' : '#F2F3F4')};
+  background-color: ${({ isFile }) => (isFile ? '#F2F3F4' : '#333740')};
 `;
 
 Wrapper.defaultProps = {
-  isImg: false,
+  isFile: false,
 };
 
 Wrapper.propTypes = {
-  isImg: PropTypes.bool,
+  isFile: PropTypes.bool,
 };
 
 export default Wrapper;

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

@@ -6,14 +6,16 @@ import Wrapper from './Wrapper';
 import Image from './Image';
 
 const CardPreview = ({ url, type }) => {
+  const isFile = !type.includes('image') && !type.includes('video');
+
   return (
-    <Wrapper isImg={!!url}>{!url ? <FileIcon fileType={type} /> : <Image src={url} />}</Wrapper>
+    <Wrapper isFile={isFile}>{isFile ? <FileIcon fileType={type} /> : <Image src={url} />}</Wrapper>
   );
 };
 
 CardPreview.defaultProps = {
   url: null,
-  type: null,
+  type: '',
 };
 
 CardPreview.propTypes = {

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Checkbox } from '@buffetjs/core';
 
 import createMatrix from '../../utils/createMatrix';
 
@@ -15,14 +16,16 @@ const List = ({ data, onChange, selectedItems }) => {
         return (
           <div className="row" key={key}>
             {rowContent.map(item => {
+              const { id, url } = item;
+              const checked = selectedItems.includes(`${id}`);
+
               return (
                 <div className="col-xs-12 col-md-6 col-xl-3" key={JSON.stringify(item)}>
-                  <Card
+                  <Card small checked={checked} {...item} url={`${strapi.backendURL}${url}`}>
-                    small
+                    <div className="card-control-wrapper">
-                    checked={selectedItems.includes(item.id)}
+                      <Checkbox name={`${id}`} onChange={onChange} value={checked} />
-                    onChange={onChange}
+                    </div>
-                    {...item}
+                  </Card>
-                  />
                 </div>
               );
             })}
@@ -34,62 +37,7 @@ const List = ({ data, onChange, selectedItems }) => {
 };
 
 List.defaultProps = {
-  data: [
+  data: [],
-    {
-      id: '0',
-      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: '1',
-      name: 'Chat portrait',
-      size: 17329,
-      type: 'image/png',
-      url: 'https://emiliedammedumoulin.com/wp-content/uploads/2018/07/contact-chat-accueil.jpg',
-    },
-    {
-      id: '2',
-      name: 'Gif',
-      size: 17329,
-      type: 'image/png',
-      url:
-        'https://user-images.githubusercontent.com/879561/51321923-54024f00-1a64-11e9-8c37-3308350a59c4.gif',
-    },
-    {
-      id: '3',
-      name: 'Paysage',
-      size: 17329,
-      type: 'image/png',
-      url:
-        'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSyHCXO8D0QQrPDuGstvH9dEwhhB7Qv-3mDMWGpLExyY1CF84cL',
-    },
-    {
-      id: '4',
-      name: 'That kitten is so beautiful that I am not sure to have the place to describe it',
-      size: 17329,
-      type: 'image/png',
-      url:
-        'https://images.pexels.com/photos/1643457/pexels-photo-1643457.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
-    },
-    {
-      id: '5',
-      name: 'pdf file',
-      type: 'pdf',
-    },
-    {
-      id: '6',
-      name: 'Zip file',
-      type: 'zip',
-    },
-    {
-      id: '7',
-      name: 'Doc file',
-      type: 'docx',
-    },
-  ],
   onChange: () => {},
   selectedItems: [],
 };

packages/strapi-plugin-upload/admin/src/components/UploadList/RowItem.js

@@ -1,12 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+
+import Card from '../Card';
 import CardControl from '../CardControl';
 import CardControlsWrapper from '../CardControlsWrapper';
 import CardImgWrapper from '../CardImgWrapper';
 import InfiniteLoadingIndicator from '../InfiniteLoadingIndicator';
 
 const RowItem = ({
-  // file,
+  file,
   fileInfo,
   hasError,
   errorMessage,
@@ -15,6 +17,8 @@ const RowItem = ({
   onClickEdit,
   originalIndex,
 }) => {
+  const url = URL.createObjectURL(file);
+
   const handleClick = () => {
     onClick(originalIndex);
   };
@@ -24,18 +28,23 @@ const RowItem = ({
   };
 
   return (
-    <div className="col-3" key={originalIndex}>
+    <div className="col-xs-12 col-md-6 col-xl-3" key={JSON.stringify(originalIndex)}>
-      <div>
+      <Card
-        <CardImgWrapper isSmall hasError={hasError}>
+        small
+        errorMessage={errorMessage}
+        hasError={hasError}
+        type={file.type}
+        size={file.size}
+        url={url}
+        {...fileInfo}
+      >
         {isUploading && <InfiniteLoadingIndicator onClick={handleClick} />}
         {!isUploading && (
           <CardControlsWrapper className="card-control-wrapper">
             <CardControl onClick={handleClickEdit} />
           </CardControlsWrapper>
         )}
-        </CardImgWrapper>
+      </Card>
-        <p style={{ marginBottom: 14 }}>{errorMessage || fileInfo.name}</p>
-      </div>
     </div>
   );
 };
@@ -45,7 +54,7 @@ RowItem.defaultProps = {
 };
 
 RowItem.propTypes = {
-  // file: PropTypes.object.isRequired,
+  file: PropTypes.object.isRequired,
   fileInfo: PropTypes.shape({
     name: PropTypes.string.isRequired,
   }).isRequired,

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

@@ -195,7 +195,7 @@ const HomePage = () => {
           onClick={handleDeleteFilter}
         />
       </ControlsWrapper>
-      <List onChange={handleChangeCheck} selectedItems={dataToDelete} />
+      <List data={data} onChange={handleChangeCheck} selectedItems={dataToDelete} />
       <ListEmpty onClick={() => handleClickToggleModal()} />
       <PageFooter
         context={{ emitEvent: () => {} }}