burdy
Version:
Open Source Headless Platform
245 lines (244 loc) • 13.8 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 __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_experiments_1 = require("@fluentui/react-experiments");
const react_1 = __importStar(require("react"));
const react_2 = require("@fluentui/react");
const react_file_type_icons_1 = require("@fluentui/react-file-type-icons");
const utility_1 = require("../../../helpers/utility");
const assets_dropzone_1 = __importDefault(require("./assets-dropzone"));
const assets_context_1 = require("../context/assets.context");
const useStyles = (0, react_2.makeStyles)((theme) => ({
tile: {
':global(.ms-Tile-name)': {
display: 'block !important',
},
},
folderTile: {
':global(.ms-FolderCover-metadata)': {
paddingLeft: 8,
},
},
}));
const FolderCell = (_a) => {
var { item, selection, compact } = _a, props = __rest(_a, ["item", "selection", "compact"]);
const styles = useStyles();
const { assetSrc } = (0, assets_context_1.useAssets)();
const folderCover = (react_1.default.createElement(react_experiments_1.FolderCover, { folderCoverSize: compact ? 'small' : 'large', folderCoverType: (item === null || item === void 0 ? void 0 : item.thumbnail) ? 'media' : 'default' }));
return (react_1.default.createElement(assets_dropzone_1.default, { asset: item, className: styles.tile },
react_1.default.createElement(react_experiments_1.Tile, Object.assign({ role: "gridcell", "aria-colindex": item.index, className: react_2.AnimationClassNames.fadeIn400, selection: selection, selectionIndex: item.index, isFluentStyling: true, invokeSelection: true, foreground: react_1.default.createElement("span", { className: styles.folderTile }, (0, react_experiments_1.renderFolderCoverWithLayout)(folderCover, {
children: (item === null || item === void 0 ? void 0 : item.thumbnail) ? (react_1.default.createElement("img", { style: { width: '100%', height: '100%' }, src: assetSrc(item), alt: "placeholder" })) : null,
})), itemName: item.name, itemActivity: react_1.default.createElement("span", null), tileSize: "large" }, props))));
};
const DocumentCell = (_a) => {
var { item, selection, compact } = _a, props = __rest(_a, ["item", "selection", "compact"]);
const styles = useStyles();
const components = item === null || item === void 0 ? void 0 : item.name.split('.');
const fileType = {
extension: components[components.length - 1],
};
return (react_1.default.createElement("div", { className: styles.tile },
react_1.default.createElement(react_experiments_1.Tile, Object.assign({ role: "gridcell", className: react_2.AnimationClassNames.fadeIn400, selection: selection, selectionIndex: item.index, isFluentStyling: true, invokeSelection: true, foreground: react_1.default.createElement(react_2.Icon, Object.assign({}, (0, react_file_type_icons_1.getFileTypeIconProps)(Object.assign(Object.assign({}, fileType), { size: compact ? 64 : 96, imageFileType: 'svg' })))), showForegroundFrame: true, itemName: item.name, itemActivity: react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("div", { style: {
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
} },
(0, utility_1.humanFileSize)(item.contentLength),
"\u2002\u00B7\u2002",
item.mimeType,
"\u00A0")), tileSize: "large" }, props))));
};
const ShimmerCell = (_a) => {
var { finalSize } = _a, props = __rest(_a, ["finalSize"]);
return (react_1.default.createElement(react_experiments_1.ShimmerTile, Object.assign({ role: "presentation", contentSize: finalSize, itemName: true, itemActivity: true, itemThumbnail: true, tileSize: "large" }, props)));
};
const MediaCell = (_a) => {
var { finalSize, item, selection } = _a, props = __rest(_a, ["finalSize", "item", "selection"]);
const heightMeta = item.meta.find((meta) => meta.key === 'height');
const widthMeta = item.meta.find((meta) => meta.key === 'width');
const { assetSrc } = (0, assets_context_1.useAssets)();
const width = widthMeta ? Number(widthMeta === null || widthMeta === void 0 ? void 0 : widthMeta.value) : 0;
const height = heightMeta ? Number(heightMeta === null || heightMeta === void 0 ? void 0 : heightMeta.value) : 0;
const tile = (react_1.default.createElement(react_experiments_1.Tile, Object.assign({ role: "gridcell", "aria-colindex": item.index, contentSize: finalSize, className: react_2.AnimationClassNames.fadeIn400, selection: selection, selectionIndex: item.index, invokeSelection: true, showBackgroundFrame: true, itemName: item.name, itemActivity: react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("div", { style: {
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
} },
width,
"\u205F\u00D7\u205F",
height,
"\u2002\u00B7\u2002",
(0, utility_1.humanFileSize)(item.contentLength),
"\u00A0")), nameplateOnlyOnHover: false }, props)));
return (0, react_experiments_1.renderTileWithLayout)(tile, {
background: (react_1.default.createElement("img", { style: {
height: '100%',
width: '100%',
}, alt: "placeholder", src: assetSrc(item) })),
});
};
const SvgCell = (_a) => {
var { finalSize, item, selection } = _a, props = __rest(_a, ["finalSize", "item", "selection"]);
const { assetSrc } = (0, assets_context_1.useAssets)();
const tile = (react_1.default.createElement(react_experiments_1.Tile, Object.assign({ role: "gridcell", "aria-colindex": item.index, contentSize: finalSize, className: react_2.AnimationClassNames.fadeIn400, selection: selection, selectionIndex: item.index, invokeSelection: true, showBackgroundFrame: true, itemName: item.name, itemActivity: react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("div", { style: {
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
} }, (0, utility_1.humanFileSize)(item.contentLength))), nameplateOnlyOnHover: false }, props)));
return (0, react_experiments_1.renderTileWithLayout)(tile, {
background: (react_1.default.createElement("img", { style: {
height: '100%',
width: '100%',
}, alt: "placeholder", src: assetSrc(item) })),
});
};
const AssetsTiles = ({ selectionMode = react_2.SelectionMode.multiple, selection, compact, loading, items, onItemInvoked, }) => {
const generateTiles = (0, react_1.useCallback)(() => {
var _a, _b;
const folder = {
items: [],
spacing: 8,
marginBottom: 40,
minRowHeight: compact ? 136 : 171,
mode: react_experiments_1.TilesGridMode.stack,
key: 'folders-group',
isPlaceholder: false,
};
const file = {
items: [],
spacing: 8,
marginBottom: 40,
minRowHeight: compact ? 136 : 171,
mode: react_experiments_1.TilesGridMode.stack,
key: 'files-group',
isPlaceholder: false,
};
(_b = (_a = (items || [])).forEach) === null || _b === void 0 ? void 0 : _b.call(_a, (asset, index) => {
const desiredSize = {
height: compact ? 136 : 171,
width: compact ? 141 : 176,
};
if (assets_context_1.IMAGE_MIME_TYPES.includes(asset.mimeType)) {
const heightMeta = asset.meta.find((meta) => meta.key === 'height');
const widthMeta = asset.meta.find((meta) => meta.key === 'width');
if (heightMeta) {
desiredSize.height = Number(heightMeta === null || heightMeta === void 0 ? void 0 : heightMeta.value);
}
if (widthMeta) {
desiredSize.width = Number(widthMeta === null || widthMeta === void 0 ? void 0 : widthMeta.value);
}
}
const defaultProps = {
id: asset.id,
key: asset.id,
content: Object.assign(Object.assign({}, asset), { key: asset.id, index }),
desiredSize,
isPlaceholder: false,
};
if (asset.mimeType === assets_context_1.FOLDER_MIME_TYPE) {
folder.items.push(Object.assign(Object.assign({}, defaultProps), { onRenderCell: (props) => (react_1.default.createElement(FolderCell, Object.assign({}, props, { selection: selection, compact: compact }))) }));
}
else {
file.items.push(Object.assign(Object.assign({}, defaultProps), { onRenderCell: (props) => {
switch (true) {
case assets_context_1.IMAGE_MIME_TYPES.includes(asset.mimeType):
return react_1.default.createElement(MediaCell, Object.assign({}, props, { selection: selection }));
case asset.mimeType === 'image/svg+xml' || asset.mimeType === 'image/svg':
return react_1.default.createElement(SvgCell, Object.assign({}, props, { selection: selection }));
default:
return react_1.default.createElement(DocumentCell, Object.assign({}, props, { selection: selection, compact: compact }));
}
} }));
}
});
const list = [];
if (folder.items.length > 0) {
list.push(folder);
}
if (file.items.length > 0) {
list.push(file);
}
return list;
}, [items, compact]);
const shimmerTiles = (0, react_1.useMemo)(() => [
{
items: [
{
key: 'shimmerParent',
content: {
key: 'shimmerItem-1',
name: 'name',
index: 0,
aspectRatio: 1,
},
desiredSize: {
width: compact ? 136 : 171,
height: compact ? 136 : 171,
},
onRenderCell: (props) => (react_1.default.createElement(ShimmerCell, Object.assign({ selection: null }, props))),
isPlaceholder: true,
},
],
spacing: 8,
marginBottom: 0,
minRowHeight: compact ? 136 : 171,
mode: react_experiments_1.TilesGridMode.stack,
key: 'group1',
isPlaceholder: true,
},
], [compact]);
return (react_1.default.createElement(react_1.default.Fragment, null, loading ? (react_1.default.createElement(react_experiments_1.TilesList, { items: shimmerTiles, role: "grid" })) : (react_1.default.createElement(react_2.MarqueeSelection, { selection: selection },
react_1.default.createElement(react_2.SelectionZone, { onItemInvoked: (item) => {
if (onItemInvoked) {
onItemInvoked(item);
}
}, selection: selection, selectionMode: selectionMode, enterModalOnTouch: true },
react_1.default.createElement(react_experiments_1.TilesList, { items: generateTiles(), role: "grid" }),
react_1.default.createElement("div", { style: {
display: 'none',
} },
react_1.default.createElement(react_2.DetailsList, { items: items || [], selection: selection, columns: [
{
key: 'name',
name: 'Name',
fieldName: 'name',
minWidth: 100,
},
] })))))));
};
exports.default = AssetsTiles;