2020-03-27 11:49:07 +01:00
|
|
|
import React, { memo } from 'react';
|
2020-02-14 17:44:54 +01:00
|
|
|
import PropTypes from 'prop-types';
|
2020-03-18 00:47:16 +01:00
|
|
|
import { formatBytes, getExtension, getType } from '../../utils';
|
|
|
|
|
|
|
|
import Flex from '../Flex';
|
2020-03-05 14:38:51 +01:00
|
|
|
import Text from '../Text';
|
2020-03-26 12:57:41 +01:00
|
|
|
import Border from '../CardBorder';
|
2020-02-14 17:44:54 +01:00
|
|
|
import CardImgWrapper from '../CardImgWrapper';
|
2020-03-02 00:21:43 +01:00
|
|
|
import CardPreview from '../CardPreview';
|
2020-03-26 12:57:41 +01:00
|
|
|
import ErrorMessage from '../CardErrorMessage';
|
2020-04-06 11:24:19 +02:00
|
|
|
import FileInfos from '../FileInfos';
|
2020-03-26 12:57:41 +01:00
|
|
|
import Title from '../CardTitle';
|
2020-03-18 00:47:16 +01:00
|
|
|
import Tag from '../Tag';
|
2020-03-26 12:57:41 +01:00
|
|
|
import Wrapper from '../CardWrapper';
|
2020-02-14 17:44:54 +01:00
|
|
|
|
2020-03-06 17:19:20 +01:00
|
|
|
const Card = ({
|
2020-03-24 07:35:16 +01:00
|
|
|
id,
|
2020-03-06 17:19:20 +01:00
|
|
|
checked,
|
|
|
|
children,
|
|
|
|
errorMessage,
|
|
|
|
hasError,
|
2020-03-26 16:07:14 +01:00
|
|
|
hasIcon,
|
2020-03-06 17:19:20 +01:00
|
|
|
mime,
|
|
|
|
name,
|
2020-03-24 07:35:16 +01:00
|
|
|
onClick,
|
2020-03-26 12:15:00 +01:00
|
|
|
previewUrl,
|
2020-03-06 17:19:20 +01:00
|
|
|
small,
|
|
|
|
size,
|
|
|
|
type,
|
|
|
|
url,
|
2020-03-24 15:45:01 +01:00
|
|
|
withFileCaching,
|
2020-03-31 17:54:12 +02:00
|
|
|
withoutFileInfo,
|
2020-03-06 17:19:20 +01:00
|
|
|
}) => {
|
2020-03-23 22:30:23 +01:00
|
|
|
const fileSize = formatBytes(size, 0);
|
|
|
|
const fileType = mime || type;
|
2020-03-18 23:31:02 +01:00
|
|
|
|
2020-03-24 07:35:16 +01:00
|
|
|
const handleClick = () => {
|
|
|
|
onClick(id);
|
|
|
|
};
|
|
|
|
|
2020-02-14 17:44:54 +01:00
|
|
|
return (
|
2020-03-24 07:35:16 +01:00
|
|
|
<Wrapper onClick={handleClick}>
|
2020-03-10 16:32:12 +01:00
|
|
|
<CardImgWrapper checked={checked} small={small}>
|
2020-03-24 15:45:01 +01:00
|
|
|
<CardPreview
|
|
|
|
hasError={hasError}
|
2020-03-26 16:07:14 +01:00
|
|
|
hasIcon={hasIcon}
|
2020-03-26 12:15:00 +01:00
|
|
|
previewUrl={previewUrl}
|
2020-03-24 15:45:01 +01:00
|
|
|
url={url}
|
|
|
|
type={fileType}
|
|
|
|
withFileCaching={withFileCaching}
|
|
|
|
/>
|
2020-03-10 16:32:12 +01:00
|
|
|
<Border color={hasError ? 'orange' : 'mediumBlue'} shown={checked || hasError} />
|
2020-03-10 00:37:14 +01:00
|
|
|
{children}
|
|
|
|
</CardImgWrapper>
|
2020-04-01 11:02:03 +02:00
|
|
|
|
|
|
|
{!withoutFileInfo ? (
|
|
|
|
<>
|
|
|
|
<Flex>
|
|
|
|
<Title>{name}</Title>
|
|
|
|
<Tag label={getType(fileType)} />
|
|
|
|
</Flex>
|
2020-04-06 11:24:19 +02:00
|
|
|
{!withoutFileInfo && <FileInfos extension={getExtension(fileType)} size={fileSize} />}
|
2020-04-01 11:02:03 +02:00
|
|
|
</>
|
|
|
|
) : (
|
|
|
|
<Text lineHeight="13px" />
|
|
|
|
)}
|
|
|
|
|
2020-03-31 21:46:51 +02:00
|
|
|
{hasError && <ErrorMessage title={errorMessage}>{errorMessage}</ErrorMessage>}
|
2020-02-14 17:44:54 +01:00
|
|
|
</Wrapper>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
Card.defaultProps = {
|
2020-03-05 16:13:44 +01:00
|
|
|
checked: false,
|
2020-03-06 17:19:20 +01:00
|
|
|
children: null,
|
2020-03-10 00:27:18 +01:00
|
|
|
errorMessage: null,
|
2020-03-24 07:35:16 +01:00
|
|
|
id: null,
|
2020-03-06 17:19:20 +01:00
|
|
|
hasError: false,
|
2020-03-26 16:07:14 +01:00
|
|
|
hasIcon: false,
|
2020-03-10 00:27:18 +01:00
|
|
|
mime: null,
|
2020-03-05 16:13:44 +01:00
|
|
|
name: null,
|
2020-03-24 07:35:16 +01:00
|
|
|
onClick: () => {},
|
2020-03-26 12:15:00 +01:00
|
|
|
previewUrl: null,
|
2020-03-05 16:13:44 +01:00
|
|
|
size: 0,
|
2020-03-05 14:34:05 +01:00
|
|
|
small: false,
|
2020-03-05 16:13:44 +01:00
|
|
|
type: null,
|
|
|
|
url: null,
|
2020-03-24 15:45:01 +01:00
|
|
|
withFileCaching: true,
|
2020-03-31 17:54:12 +02:00
|
|
|
withoutFileInfo: false,
|
2020-02-14 17:44:54 +01:00
|
|
|
};
|
|
|
|
|
|
|
|
Card.propTypes = {
|
2020-03-24 07:35:16 +01:00
|
|
|
id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
2020-03-05 16:13:44 +01:00
|
|
|
checked: PropTypes.bool,
|
2020-03-06 17:19:20 +01:00
|
|
|
children: PropTypes.node,
|
2020-03-10 00:27:18 +01:00
|
|
|
errorMessage: PropTypes.string,
|
2020-03-06 17:19:20 +01:00
|
|
|
hasError: PropTypes.bool,
|
2020-03-26 16:07:14 +01:00
|
|
|
hasIcon: PropTypes.bool,
|
2020-03-10 00:27:18 +01:00
|
|
|
mime: PropTypes.string,
|
2020-03-05 16:13:44 +01:00
|
|
|
name: PropTypes.string,
|
2020-03-24 07:35:16 +01:00
|
|
|
onClick: PropTypes.func,
|
2020-03-26 12:15:00 +01:00
|
|
|
previewUrl: PropTypes.string,
|
2020-03-05 16:13:44 +01:00
|
|
|
size: PropTypes.number,
|
2020-03-05 14:34:05 +01:00
|
|
|
small: PropTypes.bool,
|
2020-03-05 16:13:44 +01:00
|
|
|
type: PropTypes.string,
|
|
|
|
url: PropTypes.string,
|
2020-03-24 15:45:01 +01:00
|
|
|
withFileCaching: PropTypes.bool,
|
2020-03-31 17:54:12 +02:00
|
|
|
withoutFileInfo: PropTypes.bool,
|
2020-02-14 17:44:54 +01:00
|
|
|
};
|
|
|
|
|
2020-03-27 11:49:07 +01:00
|
|
|
export default memo(Card);
|