burdy
Version:
Open Source Headless Platform
142 lines (141 loc) • 7.35 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_ace_1 = __importDefault(require("react-ace"));
const uuid_1 = require("uuid");
const react_1 = require("@fluentui/react");
const react_2 = __importStar(require("react"));
const rhf_components_1 = require("../../../components/rhf-components");
const react_hook_form_1 = require("react-hook-form");
const utility_1 = require("../../../helpers/utility");
const settings_1 = require("../../../context/settings");
const copy_text_to_clipboard_1 = __importDefault(require("copy-text-to-clipboard"));
const lodash_1 = __importDefault(require("lodash"));
const snackbar_1 = require("../../../context/snackbar");
const useStyles = (0, react_1.makeStyles)((theme) => ({
editor: {
width: '100%',
border: `1px solid ${theme.palette.neutralPrimaryAlt}`,
},
}));
const PreviewEditorSettings = () => {
const classes = useStyles();
const { updateSettings, settingsArray } = (0, settings_1.useSettings)();
const { openSnackbar } = (0, snackbar_1.useSnackbar)();
(0, react_2.useEffect)(() => {
if (updateSettings === null || updateSettings === void 0 ? void 0 : updateSettings.result) {
openSnackbar({
message: 'Settings updated',
messageBarType: react_1.MessageBarType.success
});
updateSettings.reset();
}
}, [updateSettings === null || updateSettings === void 0 ? void 0 : updateSettings.result]);
const id = (0, react_2.useMemo)(() => (0, uuid_1.v4)(), []);
const defaultValues = (0, react_2.useMemo)(() => {
let state = {
enabled: false,
rewrites: '',
};
const previewEditor = (0, utility_1.findSettingsValue)(settingsArray, 'previewEditor');
if (previewEditor) {
try {
const tempState = JSON.parse(previewEditor);
state = {
enabled: tempState === null || tempState === void 0 ? void 0 : tempState.enabled,
rewrites: (typeof (tempState === null || tempState === void 0 ? void 0 : tempState.rewrites) === 'object') ? JSON.stringify(tempState === null || tempState === void 0 ? void 0 : tempState.rewrites, null, 2) : ''
};
}
catch (_a) {
//
}
}
return state;
}, [JSON.stringify(settingsArray)]);
const { control, watch, handleSubmit } = (0, react_hook_form_1.useForm)({
defaultValues,
});
const [values, setValues] = (0, react_2.useState)(defaultValues);
(0, react_2.useEffect)(() => {
watch((val) => {
setValues(val);
});
}, []);
return (react_2.default.createElement(react_1.Stack, { tokens: { childrenGap: 8, maxWidth: 600 } },
react_2.default.createElement(rhf_components_1.ControlledCheckbox, { control: control, name: "enabled", label: "Enable Preview Editor" }),
react_2.default.createElement(react_1.Stack, { tokens: { childrenGap: 4 } },
react_2.default.createElement("div", { style: {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
} },
react_2.default.createElement(react_1.Label, null, "Preview Editor Rewrites (json)"),
react_2.default.createElement(react_1.ActionButton, { text: "Copy example", onClick: () => {
(0, copy_text_to_clipboard_1.default)(JSON.stringify([
{
source: 'website/en',
rewrite: 'http://localhost:3000/',
},
{
source: 'website/en/:path*',
rewrite: 'http://localhost:3000/{path}',
},
{
source: 'website/:path*',
rewrite: 'http://localhost:3000/{path}',
},
], null, 2));
openSnackbar({
message: 'Copied to clipboard',
messageBarType: react_1.MessageBarType.success
});
} })),
react_2.default.createElement(react_hook_form_1.Controller, { name: "rewrites", control: control, render: ({ field: { onChange, value } }) => (react_2.default.createElement(react_ace_1.default, { className: classes.editor, name: id, readOnly: !(0, utility_1.isTrue)(values === null || values === void 0 ? void 0 : values.enabled), mode: "json", style: {
marginLeft: 0,
marginRight: 0,
width: '100%',
}, defaultValue: value, theme: "github", onChange: onChange, height: "300px", editorProps: { $blockScrolling: true }, setOptions: {
useWorker: false,
} })) })),
react_2.default.createElement(react_1.Stack, { horizontal: true, horizontalAlign: 'end' },
react_2.default.createElement(react_1.PrimaryButton, { disabled: lodash_1.default.isEqual(values, defaultValues), onClick: () => {
handleSubmit((val) => {
try {
const rewrites = lodash_1.default.isEmpty(val === null || val === void 0 ? void 0 : val.rewrites) ? '' : JSON.parse(val === null || val === void 0 ? void 0 : val.rewrites);
const stringified = JSON.stringify({
enabled: val === null || val === void 0 ? void 0 : val.enabled,
rewrites
});
updateSettings.execute('previewEditor', stringified);
}
catch (err) {
openSnackbar({
message: 'Invalid JSON type',
messageBarType: react_1.MessageBarType.error
});
}
})();
} }, "Update"))));
};
exports.default = PreviewEditorSettings;