@craftercms/studio-ui
Version:
Services, components, models & utils to build CrafterCMS authoring extensions.
103 lines (101 loc) • 3.54 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 Link from '@mui/material/Link';
import Avatar from '@mui/material/Avatar';
import SystemIcon from '../SystemIcon';
import Typography from '@mui/material/Typography';
import React from 'react';
import { makeStyles } from 'tss-react/mui';
const useStyles = makeStyles()((theme, { tile, title, iconAvatar, tileActive } = {}) => ({
tile: {
width: '120px',
height: '100px',
display: 'flex',
alignItems: 'center',
flexDirection: 'column',
justifyContent: 'center',
cursor: 'pointer',
textAlign: 'center',
borderRadius: theme.shape.borderRadius,
transition: 'background 250ms ease, box-shadow 500ms ease',
margin: 5,
overflow: 'hidden',
'&:hover, &:focus': {
background: theme.palette.action.hover,
boxShadow: theme.shadows[2],
textDecoration: 'none'
},
'&.disabled': {
opacity: theme.palette.action.disabledOpacity,
background: theme.palette.action.disabled,
pointerEvents: 'none'
},
...tile
},
title: {
lineHeight: 1,
...title
},
iconAvatar: {
backgroundColor: 'transparent',
color: theme.palette.text.secondary,
margin: 5,
...iconAvatar
},
tileActive: {
'&, &:hover, &:focus': {
boxShadow: 'none',
cursor: 'default',
background: theme.palette.action.selected
},
...tileActive
}
}));
function LauncherTile(props) {
const { title, icon, link, target, onClick, disabled = false, active } = props;
const { classes, cx } = useStyles(props.styles);
return React.createElement(
Link,
{
className: cx(classes.tile, props.classes?.tile, disabled && 'disabled', active && classes.tileActive),
href: disabled ? null : link,
onClick: (e) => (!disabled && onClick ? onClick(e) : null),
target: target ? target : '_self'
},
React.createElement(
Avatar,
{ variant: 'rounded', className: cx(classes.iconAvatar, props.classes?.iconAvatar) },
React.createElement(SystemIcon, { icon: icon })
),
React.createElement(Typography, { color: 'textPrimary', className: cx(classes.title, props.classes?.title) }, title)
);
}
export default LauncherTile;