mui-spfx-controls
Version:
SPFx component library built with MUI
461 lines • 28.3 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var icons_material_1 = require("@mui/icons-material");
var material_1 = require("@mui/material");
var logging_1 = require("@pnp/logging");
var dayjs_1 = tslib_1.__importDefault(require("dayjs"));
var advancedFormat_1 = tslib_1.__importDefault(require("dayjs/plugin/advancedFormat"));
var react_1 = tslib_1.__importStar(require("react"));
var react_file_icon_1 = require("react-file-icon");
var LibraryService_1 = require("../../services/LibraryService");
dayjs_1.default.extend(advancedFormat_1.default);
var MESSAGE_TIMEOUT = 3000;
var Toolbar = function (_a) {
var displayType = _a.displayType, permissions = _a.permissions, selected = _a.selected, message = _a.message, onNewFolderCreate = _a.onNewFolderCreate, onDisplayTypeChange = _a.onDisplayTypeChange, onSelectionCancel = _a.onSelectionCancel, onDelete = _a.onDelete;
return (react_1.default.createElement(material_1.Box, { sx: {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
} },
react_1.default.createElement(material_1.Box, null,
react_1.default.createElement(material_1.Stack, { direction: "row", spacing: 1 },
permissions.includes(LibraryService_1.Permission.Add) ? (react_1.default.createElement(material_1.Button, { startIcon: react_1.default.createElement(icons_material_1.Add, null), size: "small", onClick: onNewFolderCreate }, "New Folder")) : null,
permissions.includes(LibraryService_1.Permission.Delete) && selected.length !== 0 ? (react_1.default.createElement(material_1.Fade, { in: true },
react_1.default.createElement(material_1.Button, { startIcon: react_1.default.createElement(icons_material_1.Delete, null), size: "small", color: "error", onClick: onDelete }, "Delete"))) : null,
react_1.default.createElement(material_1.ToggleButtonGroup, { size: "small", "aria-label": "display-type", value: displayType, exclusive: true, onChange: function (event, newValue) { return onDisplayTypeChange(newValue); } },
react_1.default.createElement(material_1.ToggleButton, { value: "grid" },
react_1.default.createElement(icons_material_1.Grid3x3, null)),
react_1.default.createElement(material_1.ToggleButton, { value: "list" },
react_1.default.createElement(icons_material_1.List, null))))),
react_1.default.createElement(material_1.Box, null,
message ? (react_1.default.createElement(material_1.Fade, { in: Boolean(message), unmountOnExit: true },
react_1.default.createElement(material_1.Typography, { color: message.type }, message.message))) : null,
selected.length !== 0 && !message ? (react_1.default.createElement(material_1.Box, { sx: { display: 'flex', alignItems: 'center', gap: 0.5 } },
react_1.default.createElement(material_1.IconButton, { onClick: onSelectionCancel, size: "small" },
react_1.default.createElement(icons_material_1.Close, null)),
react_1.default.createElement(material_1.Typography, null,
selected.length,
" selected"))) : null)));
};
var NewFolder = function (_a) {
var displayType = _a.displayType, value = _a.value, onChange = _a.onChange, onCancel = _a.onCancel, onSave = _a.onSave;
return (react_1.default.createElement(react_1.default.Fragment, null,
displayType === 'grid' ? (react_1.default.createElement(material_1.Fade, { in: true, timeout: 300 },
react_1.default.createElement(material_1.Grid, { size: { xs: 12, sm: 6, md: 4, lg: 3, xl: 2 } },
react_1.default.createElement(material_1.Card, { variant: "outlined", sx: {
borderWidth: 2,
borderColor: 'primary.main',
height: '100%',
}, onBlur: function () {
onCancel();
} },
react_1.default.createElement(material_1.CardContent, { sx: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
textAlign: 'center',
height: '100%',
} },
react_1.default.createElement(icons_material_1.Folder, { fontSize: "large", color: "primary" }),
react_1.default.createElement(material_1.InputBase, { value: value, onChange: onChange, onKeyDown: function (event) {
if (event.key === 'Enter') {
onSave();
}
if (event.key === 'Escape') {
onCancel();
}
}, autoFocus: true, fullWidth: true, sx: {
width: '100%',
} })))))) : null,
displayType === 'list' ? (react_1.default.createElement(material_1.Fade, { in: true, timeout: 300 },
react_1.default.createElement(material_1.ListItemButton, { disableRipple: true, selected: true, onBlur: function (event) {
event.preventDefault();
onCancel();
} },
react_1.default.createElement(material_1.ListItemIcon, null,
react_1.default.createElement(icons_material_1.Folder, { color: "primary" })),
react_1.default.createElement(material_1.InputBase, { value: value, onChange: onChange, onKeyDown: function (event) {
if (event.key === 'Enter') {
onSave();
}
if (event.key === 'Escape') {
onCancel();
}
}, fullWidth: true, autoFocus: true })))) : null));
};
var Explorer = (0, react_1.forwardRef)(function (_a, ref) {
var context = _a.context, library = _a.library, defaultDisplayType = _a.defaultDisplayType, height = _a.height, onFileOpen = _a.onFileOpen;
var _b = (0, react_1.useState)(defaultDisplayType !== null && defaultDisplayType !== void 0 ? defaultDisplayType : 'grid'), displayType = _b[0], setDisplayType = _b[1];
var _c = (0, react_1.useState)([]), items = _c[0], setItems = _c[1];
var _d = (0, react_1.useState)(!!library), loading = _d[0], setLoading = _d[1];
var _e = (0, react_1.useState)(null), error = _e[0], setError = _e[1];
var _f = (0, react_1.useState)([]), breadcrumbData = _f[0], setBreadcrumbData = _f[1];
var _g = (0, react_1.useState)(null), message = _g[0], setMessage = _g[1];
var _h = (0, react_1.useState)([]), permissions = _h[0], setPermissions = _h[1];
var _j = (0, react_1.useState)(true), initial = _j[0], setInitial = _j[1];
var _k = (0, react_1.useState)(false), isFadingOut = _k[0], setIsFadingOut = _k[1];
var _l = (0, react_1.useState)({
open: false,
value: '',
}), createNewFolder = _l[0], setCreateNewFolder = _l[1];
var cardRef = (0, react_1.useRef)(null);
var _m = (0, react_1.useState)([]), selected = _m[0], setSelected = _m[1];
var libraryService = new LibraryService_1.LibraryService(context);
var handleSelectionCancel = function () {
setSelected([]);
};
var fetchItems = function (libraryUrl) { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
var items_1, error_1;
return tslib_1.__generator(this, function (_a) {
switch (_a.label) {
case 0:
setLoading(true);
_a.label = 1;
case 1:
_a.trys.push([1, 3, 4, 5]);
return [4 /*yield*/, libraryService.getLibraryItems(libraryUrl)];
case 2:
items_1 = _a.sent();
setItems(items_1);
if (initial) {
setBreadcrumbData(tslib_1.__spreadArray(tslib_1.__spreadArray([], breadcrumbData, true), [
{
Name: library === null || library === void 0 ? void 0 : library.title,
ServerRelativeUrl: library === null || library === void 0 ? void 0 : library.url,
},
], false));
setInitial(false);
}
setError(null);
handleSelectionCancel();
return [3 /*break*/, 5];
case 3:
error_1 = _a.sent();
setError(error_1.message);
logging_1.Logger.error(error_1);
return [3 /*break*/, 5];
case 4:
setLoading(false);
return [7 /*endfinally*/];
case 5: return [2 /*return*/];
}
});
}); };
var fetchPermissions = function () { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
var tempPermissions, error_2;
return tslib_1.__generator(this, function (_a) {
switch (_a.label) {
case 0:
setLoading(true);
_a.label = 1;
case 1:
_a.trys.push([1, 3, 4, 5]);
return [4 /*yield*/, libraryService.getEffectivePermissions(library.id)];
case 2:
tempPermissions = _a.sent();
setPermissions(tempPermissions);
return [3 /*break*/, 5];
case 3:
error_2 = _a.sent();
setError(error_2.message);
logging_1.Logger.error(error_2);
return [3 /*break*/, 5];
case 4:
setLoading(false);
return [7 /*endfinally*/];
case 5: return [2 /*return*/];
}
});
}); };
var createFolder = function () { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
var error_3;
return tslib_1.__generator(this, function (_a) {
switch (_a.label) {
case 0:
setLoading(true);
setIsFadingOut(true);
_a.label = 1;
case 1:
_a.trys.push([1, 3, 4, 5]);
return [4 /*yield*/, libraryService.createNewFolder(breadcrumbData[breadcrumbData.length - 1].ServerRelativeUrl, createNewFolder.value)];
case 2:
_a.sent();
handleSelectionCancel();
return [3 /*break*/, 5];
case 3:
error_3 = _a.sent();
setError(error_3.message);
logging_1.Logger.error(error_3);
return [3 /*break*/, 5];
case 4:
setLoading(false);
return [7 /*endfinally*/];
case 5: return [2 /*return*/];
}
});
}); };
var deleteItem = function () { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
var error_4;
return tslib_1.__generator(this, function (_a) {
switch (_a.label) {
case 0:
setLoading(true);
_a.label = 1;
case 1:
_a.trys.push([1, 3, 4, 5]);
return [4 /*yield*/, libraryService.recycleItems(library === null || library === void 0 ? void 0 : library.id, selected)];
case 2:
_a.sent();
handleSelectionCancel();
setMessage({ type: 'success', message: 'Item(s) deleted' });
setTimeout(function () {
setMessage(null);
}, MESSAGE_TIMEOUT);
return [3 /*break*/, 5];
case 3:
error_4 = _a.sent();
setError(error_4.message);
logging_1.Logger.error(error_4);
return [3 /*break*/, 5];
case 4:
setLoading(false);
return [7 /*endfinally*/];
case 5: return [2 /*return*/];
}
});
}); };
var handleDisplayTypeChange = function (newValue) {
if (newValue) {
setDisplayType(newValue);
setCreateNewFolder(tslib_1.__assign(tslib_1.__assign({}, createNewFolder), { open: false, value: '' }));
}
};
var handleFolderClick = function (item) {
fetchItems(item.ServerRelativeUrl);
setBreadcrumbData(tslib_1.__spreadArray(tslib_1.__spreadArray([], breadcrumbData, true), [item], false));
};
var handleFileClick = function (item) {
if (onFileOpen && typeof onFileOpen === 'function') {
onFileOpen(item);
}
else {
window.open("".concat(item.ServerRelativeUrl, "?web=1"));
}
};
var handleBreadcrumbClick = function (item, index) {
var tempBreadcrumbData = tslib_1.__spreadArray([], breadcrumbData, true);
tempBreadcrumbData.splice(index + 1);
fetchItems(item.ServerRelativeUrl);
setBreadcrumbData(tempBreadcrumbData);
};
var handleNewFolderClick = function () {
if (isFadingOut) {
setCreateNewFolder(function () { return ({
open: false,
value: '',
}); });
}
else {
setCreateNewFolder(function (prevValue) { return ({
open: !prevValue.open,
value: '',
}); });
}
};
var handleItemsDelete = function () { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
return tslib_1.__generator(this, function (_a) {
switch (_a.label) {
case 0: return [4 /*yield*/, deleteItem()];
case 1:
_a.sent();
return [4 /*yield*/, fetchItems(breadcrumbData[breadcrumbData.length - 1].ServerRelativeUrl)];
case 2:
_a.sent();
return [2 /*return*/];
}
});
}); };
var handleItemSelection = function (id) {
var currentIndex = selected.indexOf(id);
var newSelected = tslib_1.__spreadArray([], selected, true);
if (currentIndex === -1) {
newSelected.push(id);
}
else {
newSelected.splice(currentIndex, 1);
}
setSelected(newSelected);
};
var handleNewFolderNameChange = function (newName) {
setCreateNewFolder(tslib_1.__assign(tslib_1.__assign({}, createNewFolder), { value: newName }));
};
var handleNewFolderSave = function () { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
return tslib_1.__generator(this, function (_a) {
switch (_a.label) {
case 0: return [4 /*yield*/, createFolder()];
case 1:
_a.sent();
setIsFadingOut(false);
setCreateNewFolder(tslib_1.__assign(tslib_1.__assign({}, createNewFolder), { open: false, value: '' }));
return [4 /*yield*/, fetchItems(breadcrumbData[breadcrumbData.length - 1].ServerRelativeUrl)];
case 2:
_a.sent();
return [2 /*return*/];
}
});
}); };
var handleNewFolderDismiss = function () {
setIsFadingOut(true);
setTimeout(function () {
setCreateNewFolder({ open: false, value: '' });
setIsFadingOut(false);
}, 300);
};
(0, react_1.useEffect)(function () {
if (library) {
Promise.all([fetchPermissions(), fetchItems(library === null || library === void 0 ? void 0 : library.url)]);
}
}, [library]);
var errorOrLoading = error !== null && error !== void 0 ? error : loading;
var itemsHaveValue = items && items.length !== 0;
var itemsDoNotHaveValue = !loading && items && items.length === 0;
return (react_1.default.createElement(material_1.Paper, { "data-testid": "mui-spfx-explorer", ref: ref, variant: "outlined" },
react_1.default.createElement(material_1.Stack, { flexDirection: "column", spacing: 2, padding: 2 },
react_1.default.createElement(Toolbar, { displayType: displayType, permissions: permissions, selected: selected, message: message, onNewFolderCreate: handleNewFolderClick, onDisplayTypeChange: handleDisplayTypeChange, onDelete: handleItemsDelete, onSelectionCancel: handleSelectionCancel }),
react_1.default.createElement(material_1.Divider, null),
breadcrumbData && breadcrumbData.length !== 0 ? (react_1.default.createElement(material_1.Box, { sx: { width: '100%' } },
react_1.default.createElement(material_1.Breadcrumbs, null, breadcrumbData.map(function (item, index) {
return index === breadcrumbData.length - 1 ? (react_1.default.createElement(material_1.Typography, { key: "".concat(item.Name, "-").concat(index), color: "textDisabled", sx: { display: 'flex', alignItems: 'center' } },
index === 0 ? (react_1.default.createElement(icons_material_1.Home, { fontSize: "inherit", sx: { mr: 0.5 } })) : null,
item.Name)) : (react_1.default.createElement(material_1.Link, { href: "#", underline: "hover", key: "".concat(item.Name, "-").concat(index), sx: { display: 'flex', alignItems: 'center' }, onClick: function () { return handleBreadcrumbClick(item, index); } },
index === 0 ? (react_1.default.createElement(icons_material_1.Home, { fontSize: "inherit", sx: { mr: 0.5 } })) : null,
item.Name));
})))) : null,
react_1.default.createElement(material_1.Box, { sx: {
display: 'flex',
flexDirection: 'column',
height: height || 500,
} },
loading ? (react_1.default.createElement(material_1.Box, { sx: {
display: 'flex',
width: '100%',
height: '100%',
justifyContent: 'center',
alignItems: 'center',
} },
react_1.default.createElement(material_1.CircularProgress, { thickness: 4 }))) : null,
error ? (react_1.default.createElement(material_1.Box, { sx: {
display: 'flex',
width: '100%',
height: '100%',
justifyContent: 'center',
alignItems: 'center',
} },
react_1.default.createElement(material_1.Typography, { color: "error" }, error))) : null,
!errorOrLoading && itemsHaveValue && displayType === 'grid' ? (react_1.default.createElement(material_1.Grid, { container: true, spacing: 1, width: "100%", sx: { overflowY: 'auto' } },
createNewFolder.open && !isFadingOut ? (react_1.default.createElement(NewFolder, { displayType: "grid", value: createNewFolder.value, onChange: function (event) {
return handleNewFolderNameChange(event.target.value);
}, onSave: handleNewFolderSave, onCancel: handleNewFolderDismiss })) : null,
items.map(function (item) {
var _a;
var props = {
onClick: undefined,
};
if (item.Type === 'folder') {
props = tslib_1.__assign(tslib_1.__assign({}, props), { onClick: function () {
return handleFolderClick({
Name: item.Name,
ServerRelativeUrl: item.ServerRelativeUrl,
});
} });
}
if (item.Type === 'file') {
props = tslib_1.__assign(tslib_1.__assign({}, props), { onClick: function () {
return handleFileClick({
Name: item.Name,
ServerRelativeUrl: item.ServerRelativeUrl,
});
} });
}
var renderIcon = function () {
return item.Extension === 'unknown' ? (react_1.default.createElement(icons_material_1.InsertDriveFile, { color: "primary" })) : (react_1.default.createElement(material_1.SvgIcon, { fontSize: "large" },
react_1.default.createElement(react_file_icon_1.FileIcon, tslib_1.__assign({ extension: item.Extension, type: "vector" }, react_file_icon_1.defaultStyles[item.Extension]))));
};
return (react_1.default.createElement(material_1.Grid, { key: item.Name, size: { xs: 12, sm: 6, md: 4, lg: 3, xl: 2 } },
react_1.default.createElement(material_1.Card, { ref: cardRef, variant: "outlined" },
react_1.default.createElement(material_1.CardActions, null,
react_1.default.createElement(material_1.Checkbox, { size: "small", edge: "end", checked: selected.includes((_a = item === null || item === void 0 ? void 0 : item.ListItemAllFields) === null || _a === void 0 ? void 0 : _a.Id), onChange: function () { var _a; return handleItemSelection((_a = item === null || item === void 0 ? void 0 : item.ListItemAllFields) === null || _a === void 0 ? void 0 : _a.Id); } })),
react_1.default.createElement(material_1.CardContent, null,
react_1.default.createElement(material_1.Box, { sx: {
display: 'flex',
width: '100%',
flexDirection: 'column',
justifyContent: 'center',
textAlign: 'center',
} },
react_1.default.createElement(material_1.Box, null,
item.Type === 'folder' ? (react_1.default.createElement(icons_material_1.Folder, { fontSize: "large", color: "primary" })) : null,
item.Type === 'file' ? renderIcon() : null),
react_1.default.createElement(material_1.Link, tslib_1.__assign({ noWrap: true, sx: {
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
width: '100%',
}, underline: "hover", href: "#" }, props), item.Name),
react_1.default.createElement(material_1.Typography, { variant: "body2", color: "textSecondary", sx: {
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
width: '100%',
} }, (0, dayjs_1.default)(item.TimeLastModified).format('Do MMMM')))))));
}))) : null,
!errorOrLoading && itemsHaveValue && displayType === 'list' ? (react_1.default.createElement(material_1.List, { sx: {
overflow: 'auto',
} },
createNewFolder.open && !isFadingOut ? (react_1.default.createElement(NewFolder, { displayType: "list", value: createNewFolder.value, onChange: function (event) {
return handleNewFolderNameChange(event.target.value);
}, onSave: handleNewFolderSave, onCancel: handleNewFolderDismiss })) : null,
items.map(function (item) {
var _a;
var props = {
onClick: undefined,
};
if (item.Type === 'folder') {
props = tslib_1.__assign(tslib_1.__assign({}, props), { onClick: function () {
return handleFolderClick({
Name: item.Name,
ServerRelativeUrl: item.ServerRelativeUrl,
});
} });
}
if (item.Type === 'file') {
props = tslib_1.__assign(tslib_1.__assign({}, props), { onClick: function () {
return handleFileClick({
Name: item.Name,
ServerRelativeUrl: item.ServerRelativeUrl,
});
} });
}
var renderIcon = function () {
return item.Extension !== 'unknown' ? (react_1.default.createElement(material_1.SvgIcon, null,
react_1.default.createElement(react_file_icon_1.FileIcon, tslib_1.__assign({ extension: item.Extension, type: "vector" }, react_file_icon_1.defaultStyles[item.Extension])))) : (react_1.default.createElement(icons_material_1.InsertDriveFile, { color: "primary" }));
};
return (react_1.default.createElement(material_1.ListItem, { key: item.UniqueId, disablePadding: true, secondaryAction: react_1.default.createElement(material_1.Checkbox, { size: "small", edge: "end", checked: selected.includes((_a = item === null || item === void 0 ? void 0 : item.ListItemAllFields) === null || _a === void 0 ? void 0 : _a.Id), onChange: function () { var _a; return handleItemSelection((_a = item === null || item === void 0 ? void 0 : item.ListItemAllFields) === null || _a === void 0 ? void 0 : _a.Id); } }) },
react_1.default.createElement(material_1.ListItemButton, tslib_1.__assign({}, props, { disableRipple: true }),
react_1.default.createElement(material_1.ListItemIcon, null,
item.Type === 'folder' ? (react_1.default.createElement(icons_material_1.Folder, { color: "primary" })) : null,
item.Type === 'file' ? renderIcon() : null),
react_1.default.createElement(material_1.ListItemText, { primary: item.Name, secondary: (0, dayjs_1.default)(item.TimeLastModified).format('Do MMMM') }))));
}))) : null,
!errorOrLoading && itemsDoNotHaveValue ? (react_1.default.createElement(material_1.Box, { sx: {
display: 'flex',
width: '100%',
height: '100%',
justifyContent: 'center',
alignItems: 'center',
} },
react_1.default.createElement(material_1.Typography, null, "This folder is empty"))) : null))));
});
exports.default = Explorer;
//# sourceMappingURL=Explorer.js.map