@craftercms/studio-ui/components/VersionList/VersionList.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 { makeStyles } from 'tss-react/mui';
import { FormattedDateParts, FormattedMessage, FormattedTime } from 'react-intl';
import React from 'react';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemText from '@mui/material/ListItemText';
import Chip from '@mui/material/Chip';
import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
import IconButton from '@mui/material/IconButton';
import MoreVertIcon from '@mui/icons-material/MoreVertRounded';
import palette from '../../styles/palette';
import { useSelection } from '../../hooks/useSelection';
const versionListStyles = makeStyles()((theme) => ({
  list: {
    backgroundColor: theme.palette.background.paper,
    padding: 0,
    borderRadius: '5px 5px 0 0'
  },
  listItem: {
    padding: '15px 48px 15px 20px',
    '&.selected': {
      backgroundColor: palette.blue.highlight
    }
  },
  listItemTextMultiline: {
    margin: 0
  },
  listItemTextPrimary: {
    display: 'flex',
    alignItems: 'center'
  },
  listItemTextSecondary: {
    whiteSpace: 'nowrap',
    textOverflow: 'ellipsis',
    overflow: 'hidden'
  },
  chip: {
    padding: '1px',
    backgroundColor: palette.green.main,
    height: 'auto',
    color: palette.white,
    marginLeft: '10px'
  }
}));
export function AsDayMonthDateTime(props) {
  var _a, _b;
  const { date, locale } = props;
  const hour12 =
    (_b =
      (_a = locale === null || locale === void 0 ? void 0 : locale.dateTimeFormatOptions) === null || _a === void 0
        ? void 0
        : _a.hour12) !== null && _b !== void 0
      ? _b
      : true;
  return React.createElement(
    FormattedDateParts,
    { value: date, month: 'long', day: 'numeric', weekday: 'long', year: 'numeric' },
    (parts) =>
      React.createElement(
        React.Fragment,
        null,
        `${parts[0].value} ${parts[2].value} `,
        React.createElement(FormattedMessage, {
          id: 'dateTime.ordinals',
          defaultMessage: '{day, selectordinal, one {#st} two {#nd} few {#rd} other {#th}}',
          values: { day: parts[4].value }
        }),
        ' ',
        parts[6].value,
        ' @ ',
        React.createElement(FormattedTime, { value: date, hour12: hour12 })
      )
  );
}
export function VersionList(props) {
  const { classes, cx } = versionListStyles();
  const { versions: versionsResource, onOpenMenu, onItemClick, current, selected } = props;
  const versions = versionsResource.read();
  const locale = useSelection((state) => state.uiConfig.locale);
  return React.createElement(
    List,
    { component: 'div', className: classes.list, disablePadding: true },
    versions.map((version, i) => {
      return React.createElement(
        ListItem,
        {
          key: version.versionNumber,
          divider: versions.length - 1 !== i,
          button: true,
          onClick: () => onItemClick(version),
          className: cx(
            classes.listItem,
            (selected === null || selected === void 0 ? void 0 : selected.includes(version.versionNumber)) && 'selected'
          )
        },
        React.createElement(ListItemText, {
          classes: {
            multiline: classes.listItemTextMultiline,
            primary: classes.listItemTextPrimary,
            secondary: classes.listItemTextSecondary
          },
          primary: React.createElement(
            React.Fragment,
            null,
            React.createElement(AsDayMonthDateTime, { date: version.lastModifiedDate, locale: locale }),
            current === version.versionNumber &&
              React.createElement(Chip, {
                label: React.createElement(FormattedMessage, {
                  id: 'historyDialog.current',
                  defaultMessage: 'current'
                }),
                className: classes.chip
              })
          ),
          secondary: version.comment
        }),
        onOpenMenu &&
          React.createElement(
            ListItemSecondaryAction,
            null,
            React.createElement(
              IconButton,
              {
                edge: 'end',
                onClick: (e) =>
                  onOpenMenu(e.currentTarget, version, current === version.versionNumber, versions.length === i + 1),
                size: 'large'
              },
              React.createElement(MoreVertIcon, null)
            )
          )
      );
    })
  );
}
export default VersionList;