burdy
Version:
Open Source Headless Platform
77 lines (76 loc) • 5.21 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 = __importStar(require("react"));
const react_2 = require("@fluentui/react");
const react_hook_form_1 = require("react-hook-form");
const rhf_components_1 = require("../../../components/rhf-components");
const content_types_context_1 = require("../context/content-types.context");
const loading_bar_1 = __importDefault(require("../../../components/loading-bar"));
const dynamic_group_1 = __importDefault(require("../../../config-fields/dynamic-group"));
const camelcase_1 = __importDefault(require("camelcase"));
const dynamic_form_1 = require("../../../config-fields/dynamic-form");
const FieldsConfigurePanel = ({ isOpen, onDismiss, error, onSubmit, field, type }) => {
var _a, _b;
const methods = (0, react_hook_form_1.useForm)({
mode: 'all',
defaultValues: field
});
(0, react_1.useEffect)(() => {
var _a, _b;
if (!((_b = (_a = methods.formState) === null || _a === void 0 ? void 0 : _a.dirtyFields) === null || _b === void 0 ? void 0 : _b.name) && methods.watch('label')) {
const cc = (0, camelcase_1.default)(methods.watch('label'));
methods.setValue('name', cc);
}
}, [methods.watch('label')]);
const { getField } = (0, content_types_context_1.useContentTypes)();
(0, react_1.useEffect)(() => {
if (isOpen) {
methods.reset(field);
getField.execute(type);
}
}, [isOpen]);
const onSave = () => {
methods.handleSubmit((data) => {
const obj = Object.assign(Object.assign({ type }, data), { index: field === null || field === void 0 ? void 0 : field.index });
onSubmit(obj);
})();
};
const Footer = (0, react_1.useCallback)(() => (react_1.default.createElement(react_2.Stack, { horizontal: true, tokens: { childrenGap: 10 } },
react_1.default.createElement(react_2.PrimaryButton, { onClick: onSave, "data-cy": 'contentTypes-fieldsConfig-confirm' }, field ? 'Update ' : 'Add'),
react_1.default.createElement(react_2.DefaultButton, { onClick: onDismiss, "data-cy": 'contentTypes-fieldsConfig-cancel' }, "Cancel"))), [getField === null || getField === void 0 ? void 0 : getField.result, field]);
return (react_1.default.createElement(react_2.Panel, { isOpen: isOpen, headerText: field ? `Update ${type}` : `Add new ${type}`, isFooterAtBottom: true, onRenderFooterContent: Footer, onDismiss: onDismiss, type: react_2.PanelType.medium, "data-cy": 'contentTypes-fieldsConfig' },
react_1.default.createElement("div", null,
react_1.default.createElement(loading_bar_1.default, { loading: getField.loading },
error && (react_1.default.createElement(react_2.MessageBar, { messageBarType: react_2.MessageBarType.error }, error)),
react_1.default.createElement(react_hook_form_1.FormProvider, Object.assign({}, methods),
react_1.default.createElement(dynamic_form_1.FormHelperContextProvider, null,
react_1.default.createElement(react_2.Stack, { tokens: { childrenGap: 10 } },
react_1.default.createElement(rhf_components_1.ControlledTextField, { defaultValue: (_a = field === null || field === void 0 ? void 0 : field.label) !== null && _a !== void 0 ? _a : '', control: methods.control, name: 'label', label: 'Label', "data-cy": 'contentTypes-fieldsConfig-label', autoFocus: true }),
react_1.default.createElement(rhf_components_1.ControlledTextField, { defaultValue: (_b = field === null || field === void 0 ? void 0 : field.name) !== null && _b !== void 0 ? _b : '', control: methods.control, name: 'name', label: 'Name', "data-cy": 'contentTypes-fieldsConfig-name', rules: {
required: 'Name is required'
} }),
(getField === null || getField === void 0 ? void 0 : getField.result) && react_1.default.createElement(dynamic_group_1.default, { field: getField === null || getField === void 0 ? void 0 : getField.result }))))))));
};
exports.default = FieldsConfigurePanel;