burdy
Version:
Open Source Headless Platform
59 lines (58 loc) • 3.28 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;
};
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 ContentTypesComponentsSelectPanel = ({ isOpen, onDismiss, selectionMode = react_2.SelectionMode.single, onSubmit, filter, }) => {
const { getContentTypes } = (0, content_types_context_1.useContentTypes)();
const [selectedItems, setSelectedItems] = (0, react_1.useState)(null);
const selection = (0, react_1.useMemo)(() => new react_2.Selection({
onSelectionChanged: () => {
setSelectedItems(selection.getSelection());
},
}), []);
(0, react_1.useEffect)(() => {
if (isOpen) {
getContentTypes.execute(filter);
}
}, [isOpen]);
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, { disabled: !((selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) > 0), onClick: () => {
onSubmit(selectedItems);
} }, "Select"),
react_1.default.createElement(react_2.DefaultButton, { onClick: onDismiss }, "Cancel"))), [isOpen, selectedItems]);
const columns = (0, react_1.useMemo)(() => [
{
key: 'name',
name: 'Name',
fieldName: 'name',
minWidth: 100,
isPadded: true,
},
], []);
return (react_1.default.createElement(react_2.Panel, { isOpen: isOpen, headerText: "Select components", isFooterAtBottom: true, onRenderFooterContent: Footer, onDismiss: onDismiss, type: react_2.PanelType.medium },
react_1.default.createElement(react_2.ShimmeredDetailsList, { setKey: "items", items: (getContentTypes === null || getContentTypes === void 0 ? void 0 : getContentTypes.result) || [], columns: columns, selectionMode: selectionMode, selection: selection, enableShimmer: getContentTypes.loading, ariaLabelForShimmer: "Components are being fetched", ariaLabelForGrid: "Item details" })));
};
exports.default = (0, hoc_1.composeWrappers)({
contentTypesContext: content_types_context_1.ContentTypesContextProvider,
})(ContentTypesComponentsSelectPanel);