@craftercms/studio-ui
Version:
Services, components, models & utils to build CrafterCMS authoring extensions.
118 lines (116 loc) • 3.91 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: Object.assign(
{
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: Object.assign({ lineHeight: 1 }, title),
iconAvatar: Object.assign(
{ backgroundColor: 'transparent', color: theme.palette.text.secondary, margin: 5 },
iconAvatar
),
tileActive: Object.assign(
{
'&, &:hover, &:focus': {
boxShadow: 'none',
cursor: 'default',
background: theme.palette.action.selected
}
},
tileActive
)
}));
function LauncherTile(props) {
var _a, _b, _c;
const { title, icon, link, target, onClick, disabled = false, active } = props;
const { classes, cx } = useStyles(props.styles);
return React.createElement(
Link,
{
className: cx(
classes.tile,
(_a = props.classes) === null || _a === void 0 ? void 0 : _a.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, (_b = props.classes) === null || _b === void 0 ? void 0 : _b.iconAvatar)
},
React.createElement(SystemIcon, { icon: icon })
),
React.createElement(
Typography,
{
color: 'textPrimary',
className: cx(classes.title, (_c = props.classes) === null || _c === void 0 ? void 0 : _c.title)
},
title
)
);
}
export default LauncherTile;