burdy
Version:
Open Source Headless Platform
161 lines (160 loc) • 7.35 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 hoc_1 = require("../../../helpers/hoc");
const content_types_context_1 = require("../context/content-types.context");
const fields_configure_panel_1 = __importDefault(require("./fields-configure-panel"));
const theme = (0, react_2.getTheme)();
const styles = (0, react_2.mergeStyleSets)({
iconCell: {
height: 30,
width: 30,
fontSize: 16,
backgroundColor: theme.palette.neutralLight,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
},
infoCell: {
display: 'flex',
alignItems: 'center',
fontSize: 15,
height: '100%'
}
});
const FieldsSelectPanel = ({ isOpen, onDismiss, onSubmit, error, }) => {
const { getFields } = (0, content_types_context_1.useContentTypes)();
const [selectedItem, setSelectedItem] = (0, react_1.useState)(null);
const [search, setSearch] = (0, react_1.useState)('');
(0, react_1.useEffect)(() => {
if (isOpen) {
setSearch('');
getFields.execute();
}
else {
setSelectedItem(null);
}
}, [isOpen]);
const { groups, components } = (0, react_1.useMemo)(() => {
var _a;
if (!(getFields === null || getFields === void 0 ? void 0 : getFields.result)) {
return {
groups: [],
components: [],
};
}
const groups = [];
const sortedComponents = ((_a = getFields === null || getFields === void 0 ? void 0 : getFields.result) !== null && _a !== void 0 ? _a : [])
.sort((a, b) => {
const compare = a.group.localeCompare(b.group);
if (!compare)
return a.type.localeCompare(b.type);
return compare;
})
.filter((cmp) => {
var _a, _b;
if ((search !== null && search !== void 0 ? search : '').trim().length === 0)
return true;
if (((_a = cmp.name) !== null && _a !== void 0 ? _a : '').indexOf(search) > -1)
return true;
if (((_b = cmp.type) !== null && _b !== void 0 ? _b : '').indexOf(search) > -1)
return true;
return false;
});
sortedComponents.forEach((component, index) => {
const group = groups.find((group) => group.key === component.group);
if (!group) {
groups.push({
key: component.group,
count: 1,
index,
});
}
else {
group.count++;
if (index < group.index) {
group.index = index;
}
}
});
return {
groups: groups.map((group) => ({
count: group.count,
key: group.key,
name: group.key,
startIndex: group.index,
})),
components: sortedComponents.map((cmp) => (Object.assign(Object.assign({}, cmp), { key: cmp.type }))),
};
}, [getFields === null || getFields === void 0 ? void 0 : getFields.result, search]);
const Footer = (0, react_1.useCallback)(() => (react_1.default.createElement(react_2.Stack, { horizontal: true, tokens: { childrenGap: 10 } },
react_1.default.createElement(react_2.DefaultButton, { onClick: onDismiss, "data-cy": "contentTypes-fieldsSelect-cancel" }, "Back"))), []);
const columns = (0, react_1.useMemo)(() => [
{
key: 'icon',
name: '',
minWidth: 40,
maxWidth: 40,
onRender: ({ iconProps }) => (react_1.default.createElement("div", { className: styles.iconCell, style: {
height: 40,
width: 40,
fontSize: 16,
backgroundColor: theme.palette.neutralLight,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
} },
react_1.default.createElement(react_2.Icon, Object.assign({}, iconProps)))),
},
{
key: 'name',
name: 'Name',
fieldName: 'name',
minWidth: 100,
maxWidth: 180,
isPadded: true,
onRender: ({ name }) => (react_1.default.createElement("div", { className: styles.infoCell }, name))
},
{
key: 'description',
name: 'Description',
fieldName: 'description',
minWidth: 100,
data: 'string',
isPadded: true,
},
], []);
const handleSubmit = (e) => {
onSubmit(e);
};
return (react_1.default.createElement(react_2.Panel, { isOpen: isOpen, headerText: "Select field", isFooterAtBottom: true, onRenderFooterContent: Footer, onDismiss: onDismiss, type: react_2.PanelType.medium, "data-cy": "contentTypes-fieldsSelect" },
react_1.default.createElement(react_2.SearchBox, { placeholder: "Search components...", onChange: (_event, newValue) => setSearch(newValue), autoFocus: true }),
react_1.default.createElement(react_2.ShimmeredDetailsList, { setKey: "items", groups: groups, items: components, columns: columns, selectionMode: react_2.SelectionMode.none, enableShimmer: getFields.loading, ariaLabelForShimmer: "Content is being fetched", ariaLabelForGrid: "Item details", onRenderRow: (props, defaultRender) => (react_1.default.createElement("div", { onClick: () => setSelectedItem(props === null || props === void 0 ? void 0 : props.item) }, defaultRender(props))) }),
react_1.default.createElement(fields_configure_panel_1.default, { isOpen: Boolean(selectedItem), type: selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.type, onDismiss: () => setSelectedItem(null), onSubmit: handleSubmit, component: selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id, error: error })));
};
exports.default = (0, hoc_1.composeWrappers)({
contentTypesContext: content_types_context_1.ContentTypesContextProvider,
})(FieldsSelectPanel);