@craftercms/studio-ui
Version:
Services, components, models & utils to build CrafterCMS authoring extensions.
170 lines (168 loc) • 6.29 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/>.
*/
var __rest =
(this && this.__rest) ||
function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === 'function')
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
}
return t;
};
import * as React from 'react';
import { forwardRef } from 'react';
import { makeStyles } from 'tss-react/mui';
import palette from '../../styles/palette';
import Typography from '@mui/material/Typography';
import { isPreviewable } from '../PathNavigator/utils';
import ItemStateIcon from '../ItemStateIcon';
import ItemTypeIcon from '../ItemTypeIcon';
import ItemPublishingTargetIcon from '../ItemPublishingTargetIcon';
import { isInWorkflow } from './utils';
const useStyles = makeStyles()((theme, { root, label, labelPreviewable, icon, typeIcon } = {}) => ({
root: Object.assign(
{ display: 'inline-flex', alignItems: 'center', placeContent: 'left center', maxWidth: '100%' },
root
),
label: Object.assign({ marginLeft: 2, display: 'inline-block' }, label),
labelPreviewable: Object.assign(
{ color: theme.palette.mode === 'dark' ? palette.teal.tint : palette.teal.shade },
labelPreviewable
),
icon: Object.assign({ fontSize: '1.1rem' }, icon),
typeIcon: Object.assign({ marginRight: 3 }, typeIcon)
}));
const ItemDisplay = forwardRef((props, ref) => {
// region const { ... } = props;
const {
item,
styles,
classes: propClasses,
// @see https://github.com/craftercms/craftercms/issues/5442
// eslint-disable-next-line @typescript-eslint/no-unused-vars
showPublishingTarget = true,
showWorkflowState = true,
showItemType = true,
showNavigableAsLinks = true,
isNavigableFn = isPreviewable,
labelTypographyProps,
labelComponent = 'span',
stateIconProps,
publishingTargetIconProps,
itemTypeIconProps
} = props,
rest = __rest(props, [
'item',
'styles',
'classes',
'showPublishingTarget',
'showWorkflowState',
'showItemType',
'showNavigableAsLinks',
'isNavigableFn',
'labelTypographyProps',
'labelComponent',
'stateIconProps',
'publishingTargetIconProps',
'itemTypeIconProps'
]);
// endregion
const { classes, cx } = useStyles(props.styles);
if (!item) {
// Prevents crashing if the item is nullish
return null;
}
const inWorkflow = isInWorkflow(item.stateMap) || item.systemType === 'folder';
return React.createElement(
'span',
Object.assign({ ref: ref }, rest, {
className: cx(
classes.root,
propClasses === null || propClasses === void 0 ? void 0 : propClasses.root,
rest === null || rest === void 0 ? void 0 : rest.className
)
}),
inWorkflow
? showWorkflowState &&
React.createElement(
ItemStateIcon,
Object.assign({}, stateIconProps, {
item: item,
className: cx(
classes.icon,
propClasses === null || propClasses === void 0 ? void 0 : propClasses.icon,
stateIconProps === null || stateIconProps === void 0 ? void 0 : stateIconProps.className
)
})
)
: showPublishingTarget &&
React.createElement(
ItemPublishingTargetIcon,
Object.assign({}, publishingTargetIconProps, {
item: item,
className: cx(
classes.icon,
propClasses === null || propClasses === void 0 ? void 0 : propClasses.icon,
publishingTargetIconProps === null || publishingTargetIconProps === void 0
? void 0
: publishingTargetIconProps.className
)
})
),
showItemType &&
React.createElement(
ItemTypeIcon,
Object.assign({}, itemTypeIconProps, {
item: item,
className: cx(
classes.icon,
propClasses === null || propClasses === void 0 ? void 0 : propClasses.icon,
itemTypeIconProps === null || itemTypeIconProps === void 0 ? void 0 : itemTypeIconProps.className
)
})
),
React.createElement(
Typography,
Object.assign({ noWrap: true, component: labelComponent }, labelTypographyProps, {
className: cx(
classes.label,
showNavigableAsLinks && isNavigableFn(item) && classes.labelPreviewable,
labelTypographyProps === null || labelTypographyProps === void 0 ? void 0 : labelTypographyProps.className
),
title: item.label,
children: item.label
})
)
);
});
export default ItemDisplay;