burdy
Version:
Open Source Headless Platform
105 lines (104 loc) • 6.07 kB
JavaScript
;
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 dynamic_field_1 = __importDefault(require("./dynamic-field"));
const styles = (0, react_2.mergeStyleSets)({
hide: {
display: 'none !important',
},
fields: {
paddingTop: 10,
},
});
const Tabs = ({ items, onSelected }) => {
const [selectedKey, setSelectedKey] = (0, react_1.useState)(null);
(0, react_1.useEffect)(() => {
var _a;
if (!selectedKey && (items === null || items === void 0 ? void 0 : items.length) > 0) {
setSelectedKey((_a = items === null || items === void 0 ? void 0 : items[0]) === null || _a === void 0 ? void 0 : _a.key);
}
}, [items]);
(0, react_1.useEffect)(() => {
onSelected(selectedKey);
}, [selectedKey]);
return (react_1.default.createElement("div", null,
react_1.default.createElement(react_2.Pivot, { selectedKey: selectedKey, headersOnly: true, "aria-label": "Basic Pivot", onLinkClick: (item) => {
var _a;
setSelectedKey((_a = item === null || item === void 0 ? void 0 : item.props) === null || _a === void 0 ? void 0 : _a.itemKey);
} }, items.map((item) => {
var _a;
return (react_1.default.createElement(react_2.PivotItem, { key: item.key, itemKey: item.key, headerText: ((_a = item === null || item === void 0 ? void 0 : item.name) === null || _a === void 0 ? void 0 : _a.length) > 0 ? item === null || item === void 0 ? void 0 : item.name : item === null || item === void 0 ? void 0 : item.key, style: { paddingTop: 20 } }));
}))));
};
const DynamicGroup = ({ field, name }) => {
var _a, _b;
const [selectedTab, setSelectedTab] = (0, react_1.useState)(null);
const tabs = (0, react_1.useMemo)(() => {
var _a, _b, _c, _d;
if (((_a = field === null || field === void 0 ? void 0 : field.fields) !== null && _a !== void 0 ? _a : []).find((field) => (field === null || field === void 0 ? void 0 : field.type) === 'tab')) {
const tmpTabs = [];
let i = -1;
if (((_c = (_b = field === null || field === void 0 ? void 0 : field.fields) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.type) !== 'tab') {
tmpTabs.push({
name: 'default',
label: 'Default',
fields: [],
});
i++;
}
((_d = field === null || field === void 0 ? void 0 : field.fields) !== null && _d !== void 0 ? _d : []).forEach((fld) => {
if ((fld === null || fld === void 0 ? void 0 : fld.type) === 'tab') {
i++;
tmpTabs.push({
name: fld === null || fld === void 0 ? void 0 : fld.name,
label: fld === null || fld === void 0 ? void 0 : fld.label,
fields: [],
});
}
else {
tmpTabs[i].fields.push(fld);
}
});
return tmpTabs;
}
return [];
}, [field === null || field === void 0 ? void 0 : field.fields]);
return (react_1.default.createElement(react_1.default.Fragment, null,
((_a = field === null || field === void 0 ? void 0 : field.label) === null || _a === void 0 ? void 0 : _a.length) > 0 && react_1.default.createElement("div", null,
react_1.default.createElement(react_2.Label, null, field === null || field === void 0 ? void 0 : field.label),
react_1.default.createElement(react_2.Separator, null)),
(tabs === null || tabs === void 0 ? void 0 : tabs.length) > 0 && (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(Tabs, { items: tabs.map((tab) => ({
key: tab.name,
name: tab.label,
})), onSelected: (e) => setSelectedTab(e) }),
tabs.map((tab) => {
var _a;
return (react_1.default.createElement(react_2.Stack, { key: tab.name, className: `${styles.fields} ${(tab === null || tab === void 0 ? void 0 : tab.name) !== selectedTab ? styles.hide : ''}`, tokens: { childrenGap: 18 } }, ((_a = tab === null || tab === void 0 ? void 0 : tab.fields) !== null && _a !== void 0 ? _a : []).map((field) => (react_1.default.createElement(dynamic_field_1.default, { key: field.name, field: field, name: name })))));
}))),
(tabs === null || tabs === void 0 ? void 0 : tabs.length) === 0 && (react_1.default.createElement(react_2.Stack, { tokens: { childrenGap: 10 } }, ((_b = field === null || field === void 0 ? void 0 : field.fields) !== null && _b !== void 0 ? _b : []).map((field) => (react_1.default.createElement(dynamic_field_1.default, { key: field.name, field: field, name: name })))))));
};
exports.default = DynamicGroup;