@craftercms/studio-ui
Version:
Services, components, models & utils to build CrafterCMS authoring extensions.
165 lines (163 loc) • 5.95 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 { makeStyles } from 'tss-react/mui';
import { FormattedDateParts, FormattedMessage, FormattedTime } from 'react-intl';
import React from 'react';
import List from '@mui/material/List';
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';
import ListItemButton from '@mui/material/ListItemButton';
import Checkbox from '@mui/material/Checkbox';
import { createPresenceTable } from '../../utils/array';
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) {
const { date, locale } = props;
const hour12 = locale?.dateTimeFormatOptions?.hour12 ?? 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, onOpenMenu, onItemClick, current, selected, isSelectMode = false } = props;
const locale = useSelection((state) => state.uiConfig.locale);
const selectedLookup = createPresenceTable(selected);
return React.createElement(
List,
{ component: 'div', className: classes.list, disablePadding: true },
versions.map((version, i) => {
const isSelected = Boolean(selectedLookup[version.versionNumber]);
return React.createElement(
ListItemButton,
{
key: version.versionNumber,
divider: versions.length - 1 !== i,
onClick: () => onItemClick(version),
className: cx(classes.listItem, isSelected && '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.modifiedDate, locale: locale }),
current === version.versionNumber &&
React.createElement(Chip, {
label: React.createElement(FormattedMessage, {
id: 'historyDialog.current',
defaultMessage: 'current'
}),
className: classes.chip
})
),
secondary: version.comment
}),
(onOpenMenu || isSelectMode) &&
React.createElement(
ListItemSecondaryAction,
null,
isSelectMode && React.createElement(Checkbox, { checked: isSelected }),
!isSelectMode &&
onOpenMenu &&
React.createElement(
IconButton,
{
edge: 'end',
size: 'large',
onClick: (e) => {
e.stopPropagation();
onOpenMenu(e.currentTarget, version, current === version.versionNumber, versions.length === i + 1);
}
},
React.createElement(MoreVertIcon, null)
)
)
);
})
);
}
export default VersionList;