burdy
Version:
Open Source Headless Platform
271 lines (270 loc) • 13.2 kB
JavaScript
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = require("@fluentui/react");
const react_2 = __importStar(require("react"));
const react_router_1 = require("react-router");
const query_string_1 = __importDefault(require("query-string"));
const posts_context_1 = require("../../posts/context/posts.context");
const auth_context_1 = require("../../authentication/context/auth.context");
const utility_1 = require("../../../helpers/utility");
const snackbar_1 = require("../../../context/snackbar");
const EditorCommandBar = ({ handleSubmit, editor, device, onDeviceChange, menuOpened, toggleMenu, loading, enableEditor }) => {
const { getPost, post, updatePost, updatePostContent, publishPosts, setStateData, stateData, getVersionsCount, loadingContent } = (0, posts_context_1.usePosts)();
const history = (0, react_router_1.useHistory)();
const location = (0, react_router_1.useLocation)();
const snackbar = (0, snackbar_1.useSnackbar)();
const { filterPermissions } = (0, auth_context_1.useAuth)();
(0, react_2.useEffect)(() => {
if (post === null || post === void 0 ? void 0 : post.id) {
getVersionsCount.execute(post === null || post === void 0 ? void 0 : post.id);
}
}, [post]);
const apiLoading = updatePost.loading || (updatePostContent === null || updatePostContent === void 0 ? void 0 : updatePostContent.loading) || (publishPosts === null || publishPosts === void 0 ? void 0 : publishPosts.loading) || loadingContent;
const commandItems = (0, react_2.useMemo)(() => {
const items = [
{
key: 'back',
text: 'Back',
'data-cy': 'editor-commandBar-back',
iconProps: { iconName: 'Back' },
onClick: () => {
if ((post === null || post === void 0 ? void 0 : post.type) === 'post' && (post === null || post === void 0 ? void 0 : post.parentId)) {
history.push(`/sites/post-container/${post.parentId}`);
}
else {
history.push({
pathname: '/sites',
search: query_string_1.default.stringify({ id: post === null || post === void 0 ? void 0 : post.id }),
});
}
},
},
];
if (enableEditor && !loading) {
items.push({
key: 'switchEditor',
text: editor === 'preview' ? 'Preview' : 'Headless',
iconProps: { iconName: 'ChangeEntitlements' },
subMenuProps: {
items: [
{
key: 'headless',
text: 'Headless',
onClick: () => {
history.push({
search: query_string_1.default.stringify(Object.assign(Object.assign({}, (query_string_1.default.parse(location.search) || {})), { editor: undefined }))
});
}
},
{
key: 'preview',
text: 'Preview',
onClick: () => {
history.push({
search: query_string_1.default.stringify(Object.assign(Object.assign({}, (query_string_1.default.parse(location.search) || {})), { editor: 'preview' }))
});
}
}
]
}
});
}
if (enableEditor && editor === 'preview' && !loading) {
items.push({
key: 'deviceSize',
onRender: () => {
return (react_2.default.createElement(react_1.Stack, { horizontal: true, tokens: { childrenGap: 4 }, verticalAlign: "center", style: { marginLeft: 18 } },
react_2.default.createElement(react_1.IconButton, { iconProps: { iconName: 'TVMonitor' }, title: "Desktop", ariaLabel: "Desktop", checked: !device || device === 'desktop', onClick: () => {
onDeviceChange('desktop');
} }),
react_2.default.createElement(react_1.IconButton, { iconProps: { iconName: 'Tablet' }, title: "Tablet", ariaLabel: "Tablet", checked: device === 'tablet', onClick: () => {
onDeviceChange('tablet');
} }),
react_2.default.createElement(react_1.IconButton, { iconProps: { iconName: 'CellPhone' }, title: "Mobile", ariaLabel: "Mobile", checked: device === 'mobile', onClick: () => {
onDeviceChange('mobile');
} })));
},
});
}
return items;
}, [getPost === null || getPost === void 0 ? void 0 : getPost.result, device, loading, editor, location]);
const farToolbarItems = (0, react_2.useMemo)(() => {
var _a, _b;
if (loading) {
return [
{
key: 'loader',
onRender: () => {
return (react_2.default.createElement(react_1.Stack, { horizontal: true, tokens: { childrenGap: 12 }, verticalAlign: "center", style: { height: '100%' } },
react_2.default.createElement(react_1.Shimmer, { width: 100, shimmerElements: [
{ type: react_1.ShimmerElementType.line, height: 8 },
], style: {} }),
react_2.default.createElement(react_1.Shimmer, { width: 100, shimmerElements: [
{ type: react_1.ShimmerElementType.line, height: 8 },
], style: {} })));
},
},
];
}
if (post === null || post === void 0 ? void 0 : post.versionId) {
return [
{
key: 'history',
text: (getVersionsCount === null || getVersionsCount === void 0 ? void 0 : getVersionsCount.result)
? `History (${(_a = getVersionsCount === null || getVersionsCount === void 0 ? void 0 : getVersionsCount.result) === null || _a === void 0 ? void 0 : _a.count})`
: 'History',
iconProps: { iconName: 'History' },
'data-cy': 'editor-commandBar-history',
onClick: () => {
setStateData('versionsOpen', true);
},
},
{
key: 'restore',
text: 'Restore',
'data-cy': 'editor-commandBar-restore',
iconProps: { iconName: 'Edit' },
onClick: () => {
setStateData('versionRestoreOpen', true);
},
},
{
key: 'delete',
text: 'Delete',
'data-cy': 'editor-commandBar-delete',
iconProps: { iconName: 'Delete' },
onClick: () => {
setStateData('versionsDeleteOpen', true);
},
},
{
key: 'cancel',
text: 'Cancel',
'data-cy': 'editor-commandBar-cancel',
iconProps: { iconName: 'Cancel' },
onClick: () => {
history.push({
search: query_string_1.default.stringify(Object.assign(Object.assign({}, (query_string_1.default.parse(location.search) || {})), { versionId: undefined, action: undefined }))
});
},
},
];
}
const items = filterPermissions([
{
key: 'copyUrl',
text: 'Copy API URL',
iconProps: { iconName: 'ClipboardList' },
onClick: () => {
(0, utility_1.copyToClipboard)(`${window.location.origin}/api/content/${post.slugPath}`);
snackbar.openSnackbar({
message: 'Successfully copied URL to clipboard!',
messageBarType: react_1.MessageBarType.success,
duration: 3000,
});
},
},
{
key: 'history',
text: (getVersionsCount === null || getVersionsCount === void 0 ? void 0 : getVersionsCount.result)
? `History (${(_b = getVersionsCount === null || getVersionsCount === void 0 ? void 0 : getVersionsCount.result) === null || _b === void 0 ? void 0 : _b.count})`
: 'History',
'data-cy': 'editor-commandBar-history',
disabled: apiLoading,
iconProps: { iconName: 'History' },
onClick: () => {
setStateData('versionsOpen', true);
},
},
{
key: 'contentType',
text: 'Edit Content Type',
'data-cy': 'editor-commandBar-editContentType',
iconProps: { iconName: 'Edit' },
disabled: apiLoading,
permissions: ['content_types_update'],
onClick: () => {
setStateData('updateContentTypeOpen', true);
},
},
{
key: 'settings',
text: 'Settings',
'data-cy': 'editor-commandBar-settings',
iconProps: { iconName: 'Settings' },
disabled: apiLoading,
onClick: () => {
setStateData('updatePostOpen', true);
},
},
{
key: 'publish',
text: 'Publish',
'data-cy': 'editor-commandBar-publish',
iconProps: { iconName: 'WebPublish' },
disabled: apiLoading,
onClick: () => {
setStateData('publishPostOpen', true);
},
},
{
key: 'save',
'data-cy': 'editor-commandBar-save',
iconProps: { iconName: 'Save' },
disabled: apiLoading,
text: 'Save',
onClick: () => {
handleSubmit();
},
},
]);
if (post === null || post === void 0 ? void 0 : post.publishedAt) {
items.splice(2, 0, {
key: 'unpublish',
text: 'Unpublish',
'data-cy': 'editor-commandBar-unpublish',
iconProps: { iconName: 'UnpublishContent' },
disabled: apiLoading,
onClick: () => {
setStateData('unpublishPostOpen', true);
},
});
}
if (enableEditor && editor === 'preview') {
items.push({
key: 'toggle',
'data-cy': 'editor-commandBar-toggle-menu',
iconProps: { iconName: 'SidePanelMirrored' },
checked: menuOpened,
onClick: () => {
toggleMenu(!menuOpened);
},
});
}
return items;
}, [getPost === null || getPost === void 0 ? void 0 : getPost.result, apiLoading, post, editor, loading, stateData, getVersionsCount === null || getVersionsCount === void 0 ? void 0 : getVersionsCount.result, menuOpened]);
return (react_2.default.createElement(react_1.CommandBar, { items: commandItems, style: { borderBottom: `1px solid ${react_1.NeutralColors.gray30}` }, farItems: farToolbarItems }));
};
exports.default = EditorCommandBar;