@craftercms/studio-ui/components/SiteCard/SiteCard.js

Services, components, models & utils to build CrafterCMS authoring extensions.

/*
 * 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 IconButton from '@mui/material/IconButton';
import EditRoundedIcon from '@mui/icons-material/EditRounded';
import DeleteRoundedIcon from '@mui/icons-material/DeleteRounded';
import CardMedia from '@mui/material/CardMedia';
import CardActions from '@mui/material/CardActions';
import Tooltip from '@mui/material/Tooltip';
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
import CardActionArea from '@mui/material/CardActionArea';
import { Typography } from '@mui/material';
import ConfirmDropdown from '../ConfirmDropdown';
import { useSiteCardStyles } from '../SitesGrid/styles';
import { PublishingStatusButtonUI } from '../PublishingStatusButton';
const translations = defineMessages({
  confirmHelperText: {
    id: 'siteCard.helperText',
    defaultMessage: 'Delete "{site}" project?'
  },
  confirmOk: {
    id: 'words.yes',
    defaultMessage: 'Yes'
  },
  confirmCancel: {
    id: 'words.no',
    defaultMessage: 'No'
  }
});
export function SiteCard(props) {
  const {
    site,
    onSiteClick,
    onDeleteSiteClick,
    onEditSiteClick,
    fallbackImageSrc = '/studio/static-assets/themes/cstudioTheme/images/default-contentType.jpg',
    compact = false,
    publishingStatus,
    onPublishButtonClick
  } = props;
  const { classes, cx: clsx } = useSiteCardStyles();
  const { formatMessage } = useIntl();
  return React.createElement(
    Card,
    { className: clsx(classes.card, compact && 'compact') },
    React.createElement(
      CardActionArea,
      { onClick: () => onSiteClick(site), component: 'div' },
      React.createElement(CardHeader, {
        title: site.name,
        className: classes.cardHeader,
        subheader:
          site.description &&
          React.createElement(
            Tooltip,
            { title: site.description },
            React.createElement(
              Typography,
              { color: 'textSecondary', component: 'h2', variant: 'subtitle2', className: 'cardSubtitle' },
              site.description
            )
          ),
        onClick: (e) => {
          e.stopPropagation();
          onSiteClick(site);
        },
        titleTypographyProps: {
          variant: 'subtitle2',
          component: 'h2',
          className: 'cardTitle'
        }
      }),
      !compact &&
        React.createElement(CardMedia, {
          component: 'img',
          className: classes.media,
          image: site.imageUrl,
          title: site.name,
          onError: (event) => (event.target.src = fallbackImageSrc)
        })
    ),
    React.createElement(
      CardActions,
      { className: classes.cardActions, disableSpacing: true },
      publishingStatus !== false &&
        React.createElement(PublishingStatusButtonUI, {
          isFetching: !publishingStatus,
          enabled: publishingStatus === null || publishingStatus === void 0 ? void 0 : publishingStatus.enabled,
          status: publishingStatus === null || publishingStatus === void 0 ? void 0 : publishingStatus.status,
          totalItems: publishingStatus === null || publishingStatus === void 0 ? void 0 : publishingStatus.totalItems,
          numberOfItems:
            publishingStatus === null || publishingStatus === void 0 ? void 0 : publishingStatus.numberOfItems,
          variant: 'icon',
          size: compact ? 'small' : 'medium',
          onClick: (e) => onPublishButtonClick(e, site)
        }),
      onEditSiteClick &&
        React.createElement(
          Tooltip,
          { title: React.createElement(FormattedMessage, { id: 'words.edit', defaultMessage: 'Edit' }) },
          React.createElement(
            IconButton,
            { onClick: () => onEditSiteClick(site), size: compact ? 'small' : 'medium' },
            React.createElement(EditRoundedIcon, null)
          )
        ),
      onDeleteSiteClick &&
        React.createElement(ConfirmDropdown, {
          size: compact ? 'small' : 'medium',
          cancelText: formatMessage(translations.confirmCancel),
          confirmText: formatMessage(translations.confirmOk),
          confirmHelperText: formatMessage(translations.confirmHelperText, { site: site.name }),
          iconTooltip: React.createElement(FormattedMessage, { id: 'words.delete', defaultMessage: 'Delete' }),
          icon: DeleteRoundedIcon,
          onConfirm: () => {
            onDeleteSiteClick(site);
          }
        })
    )
  );
}
export default SiteCard;