@craftercms/studio-ui
Version:
Services, components, models & utils to build CrafterCMS authoring extensions.
198 lines (196 loc) • 6.6 kB
JavaScript
/*
* Copyright (C) 2007-2022 Crafter Software Corporation. All Rights Reserved.
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Lesser General Public License version 3 as published by
* the Free Software Foundation.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Lesser General Public License for more details.
*
* You should have received a copy of the GNU Lesser General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
/*
* Copyright (C) 2007-2022 Crafter Software Corporation. All Rights Reserved.
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License version 3 as published by
* the Free Software Foundation.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import React from 'react';
import Card from '@mui/material/Card';
import CardHeader from '@mui/material/CardHeader';
import CardMedia from '@mui/material/CardMedia';
import CardActionArea from '@mui/material/CardActionArea';
import { makeStyles } from 'tss-react/mui';
import FormGroup from '@mui/material/FormGroup';
import Checkbox from '@mui/material/Checkbox';
import cardTitleStyles, { cardSubtitleStyles } from '../../styles/card';
import palette from '../../styles/palette';
import SystemIcon from '../SystemIcon';
const useStyles = makeStyles()(() => ({
card: {
position: 'relative'
},
cardTitle: Object.assign({}, cardTitleStyles),
cardSubtitle: Object.assign(Object.assign({}, cardSubtitleStyles), { WebkitLineClamp: 1 }),
cardHeader: { alignSelf: 'center' },
media: {
height: 0,
paddingTop: '56.25%'
},
mediaIcon: {
paddingTop: '56.25%',
position: 'relative',
overflow: 'hidden',
'& .media-icon': {
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
color: palette.gray.medium4,
fontSize: '50px'
},
'&.list': {
height: '80px',
width: '80px',
paddingTop: '0',
order: -1
}
},
videoThumbnail: {
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
width: '100%'
}
}));
function MediaCard(props) {
var _a, _b, _c, _d, _e, _f, _g;
const { classes, cx } = useStyles();
// region const { ... } = props
const {
onSelect,
selected,
item,
previewAppBaseUri,
showPath = true,
onClick,
onPreview = onClick,
action,
avatar,
onDragStart,
onDragEnd,
compact = false
} = props;
// endregion
const { name, path, type } = item;
let iconMap = {
Page: '@mui/icons-material/InsertDriveFileOutlined',
Video: '@mui/icons-material/VideocamOutlined',
Template: '@mui/icons-material/CodeRounded',
Taxonomy: '@mui/icons-material/LocalOfferOutlined',
Component: '@mui/icons-material/ExtensionOutlined',
Groovy: '@mui/icons-material/CodeRounded',
JavaScript: '@mui/icons-material/CodeRounded',
CSS: '@mui/icons-material/CodeRounded'
};
let icon = {
id: (_a = iconMap[type]) !== null && _a !== void 0 ? _a : '@mui/icons-material/InsertDriveFileOutlined'
};
const systemIcon = React.createElement(SystemIcon, { icon: icon, svgIconProps: { className: 'media-icon' } });
const CardActionAreaOrFragment = onPreview ? CardActionArea : React.Fragment;
const cardActionAreaOrFragmentProps = onPreview
? {
className: (_b = props.classes) === null || _b === void 0 ? void 0 : _b.cardActionArea,
disableRipple: Boolean(onDragStart || onDragEnd),
onClick(e) {
e.preventDefault();
e.stopPropagation();
onPreview(e);
}
}
: {};
return React.createElement(
Card,
{
className: cx(classes.card, (_c = props.classes) === null || _c === void 0 ? void 0 : _c.root),
draggable: Boolean(onDragStart || onDragEnd),
onDragStart: onDragStart,
onDragEnd: onDragEnd,
onClick: onClick
},
React.createElement(CardHeader, {
classes: {
action: classes.cardHeader,
root: (_d = props.classes) === null || _d === void 0 ? void 0 : _d.cardHeader
},
avatar: onSelect
? React.createElement(
FormGroup,
{ className: (_e = props.classes) === null || _e === void 0 ? void 0 : _e.checkbox },
React.createElement(Checkbox, {
checked: selected.includes(path),
onClick: (e) => onSelect(path, e.target.checked),
color: 'primary',
size: 'small'
})
)
: avatar,
title: name,
subheader: showPath ? item.path : null,
action: action,
titleTypographyProps: {
variant: 'subtitle2',
component: 'h2',
className: classes.cardTitle,
title: item.name
},
subheaderTypographyProps: {
variant: 'subtitle2',
component: 'div',
className: classes.cardSubtitle,
color: 'textSecondary',
title: item.path
}
}),
!compact &&
React.createElement(
CardActionAreaOrFragment,
Object.assign({}, cardActionAreaOrFragmentProps),
type === 'Image'
? React.createElement(CardMedia, {
className: cx(classes.media, (_f = props.classes) === null || _f === void 0 ? void 0 : _f.media),
image: `${previewAppBaseUri}${path}`,
title: name
})
: React.createElement(
'div',
{
className: cx(classes.mediaIcon, (_g = props.classes) === null || _g === void 0 ? void 0 : _g.mediaIcon)
},
type === 'Video'
? React.createElement(
'video',
{ className: classes.videoThumbnail },
React.createElement('source', { src: path, type: 'video/mp4' }),
systemIcon
)
: systemIcon
)
)
);
}
export default MediaCard;