burdy
Version:
Open Source Headless Platform
92 lines (91 loc) • 4.88 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const loading_bar_1 = __importDefault(require("../../../components/loading-bar"));
const react_1 = require("@fluentui/react");
const react_2 = __importDefault(require("react"));
const post_details_1 = __importDefault(require("../../posts/components/post-details"));
const dynamic_form_1 = require("../../../config-fields/dynamic-form");
const empty_1 = __importDefault(require("../../../components/empty"));
const posts_context_1 = require("../../posts/context/posts.context");
const dynamic_group_1 = __importDefault(require("../../../config-fields/dynamic-group"));
const react_hook_form_1 = require("react-hook-form");
const theme = (0, react_1.getTheme)();
const styles = (0, react_1.mergeStyleSets)({
card: {
margin: 24
},
mainWrapper: {
display: 'flex',
flexFlow: 'row nowrap',
alignItems: 'flex-start',
width: '100%',
height: '100%',
boxSizing: 'border-box'
},
content: {
flexGrow: 1,
height: '100%',
overflowY: 'auto',
position: 'relative',
padding: 24,
boxSizing: 'border-box'
},
side: {
maxWidth: 380,
minWidth: 380,
flexGrow: 1,
height: '100%',
overflowY: 'auto',
boxShadow: theme.effects.elevation16
},
cardHeading: {
padding: '0 14px',
boxShadow: theme.effects.elevation4,
display: 'flex',
position: 'relative',
height: 44,
alignItems: 'center'
},
editor: {
padding: '0 24px 24px 24px',
maxWidth: 960,
position: 'relative',
minHeight: 100,
marginLeft: 'auto',
marginRight: 'auto',
marginBottom: 48
},
messages: {
marginLeft: 'auto',
marginRight: 'auto',
marginBottom: 12,
maxWidth: 960,
width: '100%'
}
});
const HeadlessEditor = ({ methods, message, loading }) => {
var _a, _b, _c, _d;
const { post } = (0, posts_context_1.usePosts)();
return (react_2.default.createElement("div", { className: styles.mainWrapper },
react_2.default.createElement("div", { className: styles.content },
react_2.default.createElement("div", { className: `${styles.editor}` },
react_2.default.createElement(loading_bar_1.default, { loading: loading },
((_b = (_a = post === null || post === void 0 ? void 0 : post.contentType) === null || _a === void 0 ? void 0 : _a.fields) === null || _b === void 0 ? void 0 : _b.length) > 0 && (react_2.default.createElement(react_hook_form_1.FormProvider, Object.assign({}, methods),
react_2.default.createElement(dynamic_form_1.FormHelperContextProvider, { disabled: !!(post === null || post === void 0 ? void 0 : post.versionId) },
react_2.default.createElement(dynamic_group_1.default, { field: post === null || post === void 0 ? void 0 : post.contentType })))),
!(((_d = (_c = post === null || post === void 0 ? void 0 : post.contentType) === null || _c === void 0 ? void 0 : _c.fields) === null || _d === void 0 ? void 0 : _d.length) > 0) && (react_2.default.createElement(empty_1.default, { compact: true, title: 'No fields defined' }))))),
react_2.default.createElement("div", { className: styles.side },
react_2.default.createElement("div", { className: styles.cardHeading }, !post ? (react_2.default.createElement(react_1.Shimmer, { width: 50, shimmerElements: [{ type: react_1.ShimmerElementType.line, height: 8 }], style: {} })) : ('Details')),
react_2.default.createElement("div", { className: styles.card },
(post === null || post === void 0 ? void 0 : post.versionId) && (react_2.default.createElement("div", { className: styles.messages },
react_2.default.createElement(react_1.MessageBar, { messageBarType: react_1.MessageBarType.info }, "You are previewing historical version"))),
message === 'version_deleted' && (react_2.default.createElement("div", { className: styles.messages },
react_2.default.createElement(react_1.MessageBar, { messageBarType: react_1.MessageBarType.success }, "Version deleted"))),
message === 'version_restored' && (react_2.default.createElement("div", { className: styles.messages },
react_2.default.createElement(react_1.MessageBar, { messageBarType: react_1.MessageBarType.success }, "Version restored"))),
react_2.default.createElement(post_details_1.default, { loading: loading, post: post })))));
};
exports.default = HeadlessEditor;