burdy
Version:
Open Source Headless Platform
158 lines (157 loc) • 7.07 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 utility_1 = require("../../../helpers/utility");
const empty_1 = __importDefault(require("../../../components/empty"));
const react_file_type_icons_1 = require("@fluentui/react-file-type-icons");
const assets_dropzone_1 = __importDefault(require("./assets-dropzone"));
const assets_context_1 = require("../context/assets.context");
const assets_tiles_1 = __importDefault(require("./assets-tiles"));
const useStyles = (0, react_2.makeStyles)((theme) => ({
fileIconHeaderIcon: {
padding: 0,
fontSize: '16px',
},
fileIconCell: {
textAlign: 'center',
selectors: {
'&:before': {
content: '.',
display: 'inline-block',
verticalAlign: 'middle',
height: '100%',
width: '0px',
visibility: 'hidden',
},
},
},
link: {
'&:hover': {
textDecoration: 'underline !important',
cursor: 'pointer',
},
},
drop: {
position: 'absolute',
border: `2px dashed ${theme.palette.themePrimary}`,
top: 0,
left: 0,
bottom: 0,
right: 0,
zIndex: 100,
},
}));
const AssetsView = () => {
var _a;
const styles = useStyles();
const { view, getAssets, assets, selection, openItem, params } = (0, assets_context_1.useAssets)();
const onRenderRow = (props, defaultRender) => {
const asset = props.item;
return (react_1.default.createElement(assets_dropzone_1.default, { asset: asset }, defaultRender(props)));
};
const columns = (0, react_1.useMemo)(() => [
{
key: 'column1',
name: 'File Type',
className: styles.fileIconCell,
iconClassName: styles.fileIconHeaderIcon,
ariaLabel: 'Column operations for File type, Press to sort on File type',
iconName: 'Page',
isIconOnly: true,
fieldName: 'mimeType',
minWidth: 16,
maxWidth: 16,
onRender: (item) => {
let fileType = {};
switch (item === null || item === void 0 ? void 0 : item.mimeType) {
case assets_context_1.FOLDER_MIME_TYPE:
fileType = {
type: react_file_type_icons_1.FileIconType.folder,
};
break;
default: {
const components = item.name.split('.');
fileType = {
extension: components[components.length - 1],
};
}
}
return (react_1.default.createElement(react_2.Icon, Object.assign({}, (0, react_file_type_icons_1.getFileTypeIconProps)(Object.assign(Object.assign({}, fileType), { size: 20, imageFileType: 'svg' })))));
},
},
{
key: 'column2',
name: 'Name',
fieldName: 'name',
minWidth: 210,
isRowHeader: true,
isResizable: true,
data: 'string',
onRender: (item) => {
return (react_1.default.createElement("div", { onClick: () => {
openItem(item);
}, className: styles.link }, item.name));
},
isPadded: true,
},
{
key: 'column3',
name: 'Date Modified',
fieldName: 'modifiedAt',
minWidth: 200,
maxWidth: 200,
isResizable: true,
data: 'number',
onRender: ({ updatedAt }) => {
return (react_1.default.createElement("span", null, new Date(updatedAt).toLocaleDateString([], {
hour: '2-digit',
minute: '2-digit',
hour12: false,
})));
},
isPadded: true,
},
{
key: 'column4',
name: 'File Size',
fieldName: 'fileSize',
minWidth: 70,
maxWidth: 90,
isResizable: true,
isCollapsible: true,
data: 'number',
onRender: ({ mimeType, contentLength }) => {
return (mimeType !== assets_context_1.FOLDER_MIME_TYPE && (react_1.default.createElement("span", null, (0, utility_1.humanFileSize)(contentLength))));
},
},
], []);
return (react_1.default.createElement("div", null,
view === 'tiles' ? (react_1.default.createElement(assets_tiles_1.default, { selection: selection, onItemInvoked: (item) => openItem(item), loading: getAssets === null || getAssets === void 0 ? void 0 : getAssets.loading, items: assets })) : (react_1.default.createElement(react_2.ShimmeredDetailsList, { items: assets !== null && assets !== void 0 ? assets : [], columns: columns, enableShimmer: getAssets === null || getAssets === void 0 ? void 0 : getAssets.loading, selectionMode: react_2.SelectionMode.multiple, setKey: "multiple", layoutMode: react_2.DetailsListLayoutMode.justified, isHeaderVisible: true, onRenderRow: onRenderRow, selection: selection, selectionPreservedOnEmptyClick: true, enterModalSelectionOnTouch: true, ariaLabelForSelectionColumn: "Toggle selection", ariaLabelForSelectAllCheckbox: "Toggle selection for all items", checkButtonAriaLabel: "select row" })),
!(getAssets === null || getAssets === void 0 ? void 0 : getAssets.loading) && (!assets || 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'
: 'Drag files here', image: "files" }))));
};
exports.default = AssetsView;