burdy
Version:
Open Source Headless Platform
124 lines (123 loc) • 8.65 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 rhf_components_1 = require("../components/rhf-components");
const controlled_components_dropdown_1 = __importDefault(require("../features/content-types/components/controlled-components-dropdown"));
const controlled_post_types_dropdown_1 = __importDefault(require("../features/content-types/components/controlled-post-types-dropdown"));
const react_2 = require("@fluentui/react");
const react_hook_form_1 = require("react-hook-form");
const hooks_1 = __importDefault(require("../../shared/features/hooks"));
const dynamic_component_1 = __importDefault(require("./dynamic-component"));
const dynamic_group_1 = __importDefault(require("./dynamic-group"));
const dynamic_repeatable_1 = __importDefault(require("./dynamic-repeatable"));
const dynamic_relation_1 = __importDefault(require("./dynamic-relation"));
const dynamic_zone_1 = __importDefault(require("./dynamic-zone"));
const dynamic_assets_1 = __importDefault(require("./dynamic-assets"));
const dynamic_richtext_1 = __importDefault(require("./dynamic-richtext"));
const dynamic_form_1 = require("./dynamic-form");
const error_boundary_1 = __importDefault(require("../components/error-boundary"));
const utility_1 = require("../helpers/utility");
const dynamic_text_editor_1 = __importDefault(require("./dynamic-text-editor"));
const dynamic_references_1 = __importDefault(require("./dynamic-references"));
const dynamic_reference_1 = __importDefault(require("./dynamic-reference"));
const Field = ({ field, name }) => {
var _a, _b, _c;
const { disabled, control } = (0, dynamic_form_1.useExtendedFormContext)();
switch (field === null || field === void 0 ? void 0 : field.type) {
case 'group':
return react_1.default.createElement(dynamic_group_1.default, { field: field, name: name });
case 'repeatable':
return react_1.default.createElement(dynamic_repeatable_1.default, { field: field, name: name });
case 'custom':
return react_1.default.createElement(dynamic_component_1.default, { field: field, name: name });
case 'relation':
return react_1.default.createElement(dynamic_relation_1.default, { field: field, name: name });
case 'reference_single':
return react_1.default.createElement(dynamic_reference_1.default, { field: field, name: name });
case 'reference_multiple':
return react_1.default.createElement(dynamic_references_1.default, { field: field, name: name });
case 'zone':
return react_1.default.createElement(dynamic_zone_1.default, { field: field, name: name });
case 'images':
case 'assets':
return (react_1.default.createElement(dynamic_assets_1.default, { field: field, selectionMode: (0, utility_1.isTrue)(field.multiSelect) ? react_2.SelectionMode.multiple : react_2.SelectionMode.single, mimeTypes: (field === null || field === void 0 ? void 0 : field.type) === 'images'
? ['image/jpeg', 'image/webp', 'image/png', 'image/gif', 'image/svg+xml']
: null, name: name }));
case 'richtext':
return (react_1.default.createElement(dynamic_richtext_1.default, { field: field, control: control, name: name }));
// Controlled
case 'checkbox':
return (react_1.default.createElement(rhf_components_1.ControlledCheckbox, Object.assign({ control: control }, field, { name: name, disabled: disabled })));
case 'text':
case 'number':
return (react_1.default.createElement(rhf_components_1.ControlledTextField, Object.assign({ control: control }, field, { rules: {
required: (field === null || field === void 0 ? void 0 : field.required) == 'true' ? 'Field is required' : false
}, name: name, disabled: disabled })));
case 'datepicker':
return (react_1.default.createElement(rhf_components_1.ControlledDatePicker, Object.assign({ control: control }, field, { rules: {
required: (field === null || field === void 0 ? void 0 : field.required) ? 'Field is required' : false
}, name: name, disabled: disabled })));
case 'colorpicker':
return (react_1.default.createElement(rhf_components_1.ControlledColorPicker, Object.assign({ control: control }, field, { rules: {
required: (field === null || field === void 0 ? void 0 : field.required) ? 'Field is required' : false
}, name: name, disabled: disabled })));
case 'dropdown':
return (react_1.default.createElement(rhf_components_1.ControlledDropdown, Object.assign({ control: control }, field, { rules: {
required: (field === null || field === void 0 ? void 0 : field.required) ? 'Field is required' : false
}, options: ((_a = field === null || field === void 0 ? void 0 : field.options) !== null && _a !== void 0 ? _a : '')
.split('\n')
.map((val) => ({ key: val, text: val })), name: name, disabled: disabled })));
case 'choicegroup':
return (react_1.default.createElement(rhf_components_1.ControlledChoiceGroup, Object.assign({ control: control }, field, { options: ((_b = field === null || field === void 0 ? void 0 : field.options) !== null && _b !== void 0 ? _b : '')
.split('\n')
.map((val) => ({ key: val, text: val })), name: name, disabled: disabled })));
case 'text-editor':
return (react_1.default.createElement(dynamic_text_editor_1.default, { control: control, field: field, name: name, disabled: disabled }));
// Helper
case 'post_type_dropdown':
return (react_1.default.createElement(controlled_post_types_dropdown_1.default, Object.assign({ control: control }, field, { name: name })));
case 'components_dropdown':
return (react_1.default.createElement(controlled_components_dropdown_1.default, Object.assign({ control: control }, field, { rules: {
required: (field === null || field === void 0 ? void 0 : field.required) ? 'Field is required' : false
}, name: name })));
default: {
const Component = (_c = hooks_1.default.applySyncFilters(`admin/field/${field.type}`, null, field)) !== null && _c !== void 0 ? _c : null;
if (!Component)
return null;
return react_1.default.createElement(Component, { field: field, name: name });
}
}
};
const DynamicField = ({ field, name }) => {
const fieldName = (0, react_1.useMemo)(() => {
return (name === null || name === void 0 ? void 0 : name.length) ? `${name}.${field === null || field === void 0 ? void 0 : field.name}` : field === null || field === void 0 ? void 0 : field.name;
}, [name, field === null || field === void 0 ? void 0 : field.name]);
const { control } = (0, dynamic_form_1.useExtendedFormContext)();
return (react_1.default.createElement("div", null,
react_1.default.createElement(react_hook_form_1.Controller, { name: `${fieldName}_$type`, control: control, defaultValue: field === null || field === void 0 ? void 0 : field.type, render: () => null }),
react_1.default.createElement(error_boundary_1.default, { message: `Field ${fieldName} errored. Please check console for more details` },
react_1.default.createElement(Field, { name: fieldName, field: field }))));
};
exports.default = DynamicField;