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