burdy
Version:
Open Source Headless Platform
121 lines (120 loc) • 7.26 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 draft_js_1 = require("draft-js");
const dynamic_richtext_context_1 = require("../../dynamic-richtext.context");
const react_1 = require("@fluentui/react");
const react_2 = __importStar(require("react"));
const hoc_1 = require("../../../helpers/hoc");
const content_types_context_1 = require("../../../features/content-types/context/content-types.context");
const dynamic_group_1 = __importDefault(require("../../dynamic-group"));
const loading_bar_1 = __importDefault(require("../../../components/loading-bar"));
const react_hook_form_1 = require("react-hook-form");
const dynamic_form_1 = require("../../dynamic-form");
const useStyles = (0, react_1.makeStyles)((theme) => ({
form: {
boxShadow: theme.effects.elevation16,
padding: 24,
maxWidth: 960,
position: 'relative',
marginLeft: 'auto',
marginRight: 'auto',
},
}));
const DraftComponentBlockFormWrapper = (props) => {
const { name, value, field, open, onDismiss, onSave } = props;
const { disabled } = (0, dynamic_form_1.useExtendedFormContext)();
const methods = (0, react_hook_form_1.useForm)({
mode: 'all',
shouldUnregister: true,
});
(0, react_2.useEffect)(() => {
if (open) {
methods.reset(value);
}
}, [open]);
return (react_2.default.createElement(react_1.Panel, { isOpen: open, headerText: name, isFooterAtBottom: true, onRenderFooterContent: () => (react_2.default.createElement(react_1.Stack, { horizontal: true, tokens: { childrenGap: 10 } },
react_2.default.createElement(react_1.PrimaryButton, { onClick: () => {
methods.handleSubmit((val) => {
onSave === null || onSave === void 0 ? void 0 : onSave(val);
})();
} }, "Save"),
react_2.default.createElement(react_1.DefaultButton, { onClick: () => {
onDismiss();
} }, "Cancel"))), onDismiss: () => onDismiss(), type: react_1.PanelType.custom, customWidth: 400 },
react_2.default.createElement(react_hook_form_1.FormProvider, Object.assign({}, methods),
react_2.default.createElement(dynamic_form_1.FormHelperContextProvider, { disabled: disabled, narrow: true },
react_2.default.createElement(dynamic_group_1.default, { field: field })))));
};
const DraftComponentBlock = (props) => {
const ref = (0, react_2.useRef)();
const classes = useStyles();
const contentState = props.contentState;
const contentBlock = props.block;
const entityKey = contentBlock.getEntityAt(0);
const [panelOpened, setPanelOpened] = (0, react_2.useState)(false);
const { name, value } = contentState.getEntity(entityKey).getData();
const { setEditorProps, editorProps, forceUpdate, editorState, setEditorState } = (0, dynamic_richtext_context_1.useRichtext)();
const setReadOnly = (readOnly) => {
setEditorProps(Object.assign(Object.assign({}, editorProps), { readOnly }));
};
const { getSingleContentType } = (0, content_types_context_1.useContentTypes)();
(0, react_2.useEffect)(() => {
if (name) {
getSingleContentType.execute({ name });
}
}, [name]);
(0, react_2.useEffect)(() => {
setReadOnly(panelOpened);
}, [panelOpened]);
return (react_2.default.createElement("div", { ref: ref, className: classes.form },
react_2.default.createElement(react_1.Stack, { horizontal: true, horizontalAlign: "space-between" },
react_2.default.createElement(react_1.Label, null, name),
react_2.default.createElement(react_1.Stack, { horizontal: true, tokens: { childrenGap: 8 } },
react_2.default.createElement(react_1.IconButton, { iconProps: { iconName: 'Edit' }, disabled: (getSingleContentType === null || getSingleContentType === void 0 ? void 0 : getSingleContentType.loading) || !!(getSingleContentType === null || getSingleContentType === void 0 ? void 0 : getSingleContentType.error), title: "Edit", ariaLabel: "Edit", onClick: () => setPanelOpened(true) }),
react_2.default.createElement(react_1.IconButton, { iconProps: { iconName: 'Delete' }, disabled: getSingleContentType === null || getSingleContentType === void 0 ? void 0 : getSingleContentType.loading, title: "Delete", ariaLabel: "Delete", onClick: () => {
const blockKey = contentBlock.getKey();
const previousSelection = editorState.getSelection();
const selection = draft_js_1.SelectionState.createEmpty(blockKey).merge({ focusOffset: contentBlock.getLength() });
const newContentState = draft_js_1.Modifier.removeRange(contentState, selection, 'backward');
const blockMap = newContentState.getBlockMap().delete(contentBlock.getKey());
const withoutAtomic = newContentState.merge({
blockMap,
selectionAfter: selection,
});
const newEditorState = draft_js_1.EditorState.push(editorState, withoutAtomic, 'remove-range');
setEditorState(draft_js_1.EditorState.forceSelection(newEditorState, previousSelection));
} }))),
react_2.default.createElement(loading_bar_1.default, { loading: getSingleContentType === null || getSingleContentType === void 0 ? void 0 : getSingleContentType.loading },
react_2.default.createElement(DraftComponentBlockFormWrapper, { open: panelOpened, name: name, value: value, onSave: (val) => {
contentState.mergeEntityData(entityKey, { value: val });
forceUpdate();
setPanelOpened(false);
}, onDismiss: () => {
setPanelOpened(false);
}, field: getSingleContentType === null || getSingleContentType === void 0 ? void 0 : getSingleContentType.result }))));
};
exports.default = (0, hoc_1.composeWrappers)({
contentTypesContext: content_types_context_1.ContentTypesContextProvider,
})(DraftComponentBlock);