@craftercms/studio-ui
Version:
Services, components, models & utils to build CrafterCMS authoring extensions.
168 lines (166 loc) • 7.14 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 NewStateIcon from '@mui/icons-material/NewReleasesOutlined';
import EditedStateIcon from '@mui/icons-material/EditOutlined';
import DeletedStateIcon from '@mui/icons-material/DeleteOutlineRounded';
import LockedStateIcon from '../../icons/Lock';
import SystemProcessingStateIcon from '@mui/icons-material/HourglassEmptyRounded';
import SubmittedStateIcon from '../../icons/PaperPlane';
import ScheduledStateIcon from '@mui/icons-material/AccessTimeRounded';
import CloudUploadOutlinedIcon from '@mui/icons-material/CloudUploadOutlined';
import BlockRoundedIcon from '@mui/icons-material/BlockRounded';
import NotInWorkflowIcon from '@mui/icons-material/PanoramaFishEyeRounded';
import Tooltip from '@mui/material/Tooltip';
import * as React from 'react';
import { useMemo } from 'react';
import { getItemStateId, getItemStateText } from '../ItemDisplay/utils';
import { makeStyles } from 'tss-react/mui';
import palette from '../../styles/palette';
// region makeStyles()
const useStyles = makeStyles()(
(
_theme,
{
root,
stateNewIcon,
stateModifiedIcon,
stateDeletedIcon,
stateLockedIcon,
stateSystemProcessingIcon,
stateSubmittedIcon,
stateSubmittedToStagingIcon,
stateSubmittedToLiveIcon,
stateScheduledIcon,
statePublishingIcon,
stateDisabledIcon,
stateNotInWorkflow
} = {}
) => ({
root: Object.assign({}, root),
stateNewIcon: Object.assign({ color: palette.teal.main }, stateNewIcon),
stateModifiedIcon: Object.assign({ color: palette.yellow.main }, stateModifiedIcon),
stateDeletedIcon: Object.assign({ color: palette.red.main }, stateDeletedIcon),
stateLockedIcon: Object.assign({ color: palette.orange.main }, stateLockedIcon),
stateSystemProcessingIcon: Object.assign({ color: palette.indigo.main }, stateSystemProcessingIcon),
stateSubmittedIcon: Object.assign({ color: palette.purple.main }, stateSubmittedIcon),
stateSubmittedToStagingIcon: Object.assign({ color: palette.blue.main }, stateSubmittedToStagingIcon),
stateSubmittedToLiveIcon: Object.assign({ color: palette.green.main }, stateSubmittedToLiveIcon),
stateScheduledIcon: Object.assign({ color: palette.green.main }, stateScheduledIcon),
statePublishingIcon: Object.assign({ color: palette.indigo.main }, statePublishingIcon),
stateDisabledIcon: Object.assign({ color: palette.pink.main }, stateDisabledIcon),
stateNotInWorkflow: Object.assign({ color: palette.gray.medium4 }, stateNotInWorkflow)
})
);
// endregion
export function ItemStateIcon(props) {
const { item, classes: propClasses, styles, className, displayTooltip = true, fontSize } = props;
const { classes, cx } = useStyles(styles);
const { Icon, stateSpecificClass } = useMemo(() => {
var _a;
if (item.systemType === 'folder') {
return { Icon: NotInWorkflowIcon, stateSpecificClass: classes.stateNotInWorkflow };
}
let map;
map = {
new: { Icon: NewStateIcon, stateSpecificClass: classes.stateNewIcon },
modified: { Icon: EditedStateIcon, stateSpecificClass: classes.stateModifiedIcon },
deleted: { Icon: DeletedStateIcon, stateSpecificClass: classes.stateDeletedIcon },
locked: { Icon: LockedStateIcon, stateSpecificClass: classes.stateLockedIcon },
systemProcessing: { Icon: SystemProcessingStateIcon, stateSpecificClass: classes.stateSystemProcessingIcon },
submitted: { Icon: SubmittedStateIcon, stateSpecificClass: classes.stateSubmittedIcon },
scheduled: { Icon: ScheduledStateIcon, stateSpecificClass: classes.stateScheduledIcon },
publishing: { Icon: CloudUploadOutlinedIcon, stateSpecificClass: classes.statePublishingIcon },
submittedToStaging: {
Icon: item.stateMap.submitted ? SubmittedStateIcon : ScheduledStateIcon,
stateSpecificClass: classes.stateSubmittedToStagingIcon
},
submittedToLive: {
Icon: item.stateMap.submitted ? SubmittedStateIcon : ScheduledStateIcon,
stateSpecificClass: classes.stateSubmittedToLiveIcon
},
staged: null,
live: null,
disabled: { Icon: BlockRoundedIcon, stateSpecificClass: classes.stateDisabledIcon },
translationUpToDate: null,
translationPending: null,
translationInProgress: null
};
return (_a = map[getItemStateId(item.stateMap)]) !== null && _a !== void 0
? _a
: {
Icon: NotInWorkflowIcon,
stateSpecificClass: classes.stateNotInWorkflow
};
}, [
classes.stateDeletedIcon,
classes.stateLockedIcon,
classes.stateModifiedIcon,
classes.stateNewIcon,
classes.stateScheduledIcon,
classes.stateSubmittedIcon,
classes.stateSystemProcessingIcon,
classes.statePublishingIcon,
classes.stateSubmittedToStagingIcon,
classes.stateSubmittedToLiveIcon,
classes.stateDisabledIcon,
classes.stateNotInWorkflow,
item
]);
return Icon === null
? null
: item.systemType === 'folder'
? React.createElement(Icon, {
className: cx(
classes.root,
propClasses === null || propClasses === void 0 ? void 0 : propClasses.root,
className,
stateSpecificClass
),
fontSize: fontSize
})
: React.createElement(
Tooltip,
{
title: displayTooltip ? getItemStateText(item.stateMap, { user: item.lockOwner }) : '',
open: displayTooltip ? void 0 : false
},
React.createElement(Icon, {
className: cx(
classes.root,
propClasses === null || propClasses === void 0 ? void 0 : propClasses.root,
className,
stateSpecificClass
),
fontSize: fontSize
})
);
}
export default ItemStateIcon;