mirror of
https://github.com/strapi/strapi.git
synced 2025-08-08 08:46:42 +00:00
Upload modal card
Signed-off-by: Virginie Ky <virginie.ky@gmail.com>
This commit is contained in:
Virginie Ky
parent
f3bfdb40fb
commit
76f41a6ec0
@ -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}>
|
||||
<CardPreview type={type} url={url} />
|
||||
<div className="card-control-wrapper">
|
||||
<Checkbox name={id} onChange={onChange} value={checked} />
|
||||
</div>
|
||||
<CardImgWrapper small={small} checked={checked} hasError={hasError}>
|
||||
<CardPreview type={mime || type} url={url} />
|
||||
{children}
|
||||
</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,
|
||||
|
||||
@ -23,7 +23,7 @@ const CardImgWrapper = styled.div`
|
||||
&:hover {
|
||||
.card-control-wrapper {
|
||||
display: flex;
|
||||
z-index: 1050;
|
||||
z-index: 1045;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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 = {
|
||||
|
||||
@ -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
|
||||
small
|
||||
checked={selectedItems.includes(item.id)}
|
||||
onChange={onChange}
|
||||
{...item}
|
||||
/>
|
||||
<Card small checked={checked} {...item} url={`${strapi.backendURL}${url}`}>
|
||||
<div className="card-control-wrapper">
|
||||
<Checkbox name={`${id}`} onChange={onChange} value={checked} />
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
@ -34,62 +37,7 @@ const List = ({ data, onChange, selectedItems }) => {
|
||||
};
|
||||
|
||||
List.defaultProps = {
|
||||
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',
|
||||
},
|
||||
],
|
||||
data: [],
|
||||
onChange: () => {},
|
||||
selectedItems: [],
|
||||
};
|
||||
|
||||
@ -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>
|
||||
<CardImgWrapper isSmall hasError={hasError}>
|
||||
{isUploading && <InfiniteLoadingIndicator onClick={handleClick} />}
|
||||
{!isUploading && (
|
||||
<CardControlsWrapper className="card-control-wrapper">
|
||||
<CardControl onClick={handleClickEdit} />
|
||||
</CardControlsWrapper>
|
||||
)}
|
||||
</CardImgWrapper>
|
||||
<p style={{ marginBottom: 14 }}>{errorMessage || fileInfo.name}</p>
|
||||
</div>
|
||||
<div className="col-xs-12 col-md-6 col-xl-3" key={JSON.stringify(originalIndex)}>
|
||||
<Card
|
||||
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>
|
||||
)}
|
||||
</Card>
|
||||
</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,
|
||||
|
||||
@ -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: () => {} }}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user