burdy
Version:
Open Source Headless Platform
78 lines (77 loc) • 4.84 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 empty_1 = __importDefault(require("../../../components/empty"));
const assets_context_1 = require("../context/assets.context");
const hoc_1 = require("../../../helpers/hoc");
const assets_command_bar_1 = __importDefault(require("./assets-command-bar"));
const assets_create_folder_dialog_1 = __importDefault(require("./assets-create-folder-dialog"));
const assets_dropzone_1 = __importDefault(require("./assets-dropzone"));
const assets_breadcrumb_1 = __importDefault(require("./assets-breadcrumb"));
const assets_tiles_1 = __importDefault(require("./assets-tiles"));
const assets_delete_dialog_1 = __importDefault(require("./assets-delete-dialog"));
const AssetsSelectPanel = ({ isOpen, onDismiss, onSubmit, selectionMode, mimeTypes, }) => {
var _a;
const { getAssets, assets, getAncestors, setParams, selection, params, selectedAssets, openItem, } = (0, assets_context_1.useAssets)();
(0, react_1.useEffect)(() => {
if (isOpen) {
const mimeType = (mimeTypes || []).join(',');
setParams({
mimeType,
});
getAssets.execute({
mimeType,
});
getAncestors.execute();
}
}, [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: !((selectedAssets === null || selectedAssets === void 0 ? void 0 : selectedAssets.length) > 0) ||
(selectedAssets || []).some((asset) => (asset === null || asset === void 0 ? void 0 : asset.mimeType) === assets_context_1.FOLDER_MIME_TYPE), onClick: () => {
onSubmit(selectedAssets);
} }, "Select"),
react_1.default.createElement(react_2.DefaultButton, { onClick: onDismiss }, "Cancel"))), [isOpen, selectedAssets]);
return (react_1.default.createElement(react_2.Panel, { isOpen: isOpen, headerText: "Select assets", isFooterAtBottom: true, onRenderFooterContent: Footer, onDismiss: onDismiss, type: react_2.PanelType.custom, customWidth: 712 },
react_1.default.createElement(assets_dropzone_1.default, null,
react_1.default.createElement(assets_breadcrumb_1.default, null),
react_1.default.createElement(assets_command_bar_1.default, { visibleColumns: ['new', 'upload', 'delete', 'refresh', 'search'], style: {}, styles: {
root: {
padding: 0,
marginBottom: 24,
},
} }),
react_1.default.createElement(assets_tiles_1.default, { loading: getAssets === null || getAssets === void 0 ? void 0 : getAssets.loading, selection: selection, selectionMode: selectionMode, items: assets, onItemInvoked: (item) => {
openItem(item);
}, compact: true }),
!(getAssets === null || getAssets === void 0 ? void 0 : getAssets.loading) && (!assets || (assets === null || assets === void 0 ? void 0 : assets.length) === 0) && (react_1.default.createElement(empty_1.default, { title: ((_a = params === null || params === void 0 ? void 0 : params.search) === null || _a === void 0 ? void 0 : _a.length) > 0
? 'No files match criteria'
: 'No files', image: "files" }))),
react_1.default.createElement(assets_create_folder_dialog_1.default, null),
react_1.default.createElement(assets_delete_dialog_1.default, null)));
};
exports.default = (0, hoc_1.composeWrappers)({
assetsContext: assets_context_1.AssetsContextProvider,
})(AssetsSelectPanel);