@pnp/spfx-property-controls
Version:
Reusable property pane controls for SharePoint Framework solutions
73 lines • 6.72 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DocumentTile = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const DocumentTile_module_scss_1 = tslib_1.__importDefault(require("./DocumentTile.module.scss"));
const Utilities_1 = require("@fluentui/react/lib/Utilities");
const Image_1 = require("@fluentui/react/lib/Image");
const strings = tslib_1.__importStar(require("PropertyControlStrings"));
const Check_1 = require("@fluentui/react/lib/Check");
const Styling_1 = require("@fluentui/react/lib/Styling");
const MAX_ASPECT_RATIO = 3;
class DocumentTile extends React.Component {
render() {
const { isSelected, index, item, pageWidth, tileDimensions } = this.props;
const isLarge = pageWidth >= Styling_1.ScreenWidthMinLarge;
// Find the dimensions that are biggest
let thumbnailWidth = tileDimensions.width;
let thumbnailHeight = tileDimensions.height;
if (item.dimensions) {
const contentAspectRatio = item.dimensions.width / item.dimensions.height;
const boundsAspectRatio = tileDimensions.width / tileDimensions.height;
let scale;
if (contentAspectRatio > boundsAspectRatio) {
scale = tileDimensions.width / item.dimensions.width;
}
else {
scale = tileDimensions.height / item.dimensions.height;
}
const finalScale = Math.min(MAX_ASPECT_RATIO, scale);
thumbnailWidth = item.dimensions.width * finalScale;
thumbnailHeight = item.dimensions.height * finalScale;
}
// Check extension and get preview
const thumbnail = this.props.fileBrowserService.getFileThumbnailUrl(this.props.item, thumbnailWidth, thumbnailHeight);
const ariaLabel = strings.ImageAriaLabelTemplate.replace('{0}', item.fileIcon);
const itemLabel = strings.DocumentLabelTemplate
.replace('{0}', item.name)
.replace('{1}', item.modifiedFriendly)
.replace('{2}', item.modifiedBy);
return (React.createElement("div", { "aria-selected": isSelected, "data-is-draggable": false, role: "listitem", "aria-labelledby": `Tile-label${index}`, "aria-describedby": `Tile-activity${index}`, className: (0, Utilities_1.css)(DocumentTile_module_scss_1.default.tile, isLarge ? DocumentTile_module_scss_1.default.isLarge : DocumentTile_module_scss_1.default.isSmall, DocumentTile_module_scss_1.default.invokable, DocumentTile_module_scss_1.default.selectable, isSelected ? DocumentTile_module_scss_1.default.selected : undefined), "data-is-focusable": true, "data-is-sub-focuszone": true, "data-disable-click-on-enter": true, "data-selection-index": index,
//data-selection-invoke={true}
onClick: (_event) => this.props.onItemInvoked(item) },
React.createElement("div", { className: DocumentTile_module_scss_1.default.link, role: "link" },
React.createElement("span", { id: `Tile-label${index}`, className: DocumentTile_module_scss_1.default.label }, itemLabel),
React.createElement("span", { role: "presentation", className: DocumentTile_module_scss_1.default.aboveNameplate },
React.createElement("span", { role: "presentation", className: DocumentTile_module_scss_1.default.content },
React.createElement("span", { role: "presentation", className: DocumentTile_module_scss_1.default.foreground },
React.createElement("span", { className: DocumentTile_module_scss_1.default.odItemTile2Image },
React.createElement("span", { className: DocumentTile_module_scss_1.default.odImageFrame2, style: { width: thumbnailWidth, height: thumbnailHeight } },
React.createElement("span", { className: DocumentTile_module_scss_1.default.odImageFrame2Image },
React.createElement("span", { className: DocumentTile_module_scss_1.default.odImageFrame },
React.createElement("span", { className: DocumentTile_module_scss_1.default.odImageStack },
React.createElement("span", { className: DocumentTile_module_scss_1.default.odImageStackTile },
React.createElement("span", { className: DocumentTile_module_scss_1.default.odImageTile },
React.createElement("span", { className: DocumentTile_module_scss_1.default.odImageTileBackground },
React.createElement(Image_1.Image, { src: thumbnail, width: thumbnailWidth, height: thumbnailHeight, imageFit: Image_1.ImageFit.contain })))))))))),
React.createElement("span", { className: DocumentTile_module_scss_1.default.odItemTile2SmallIcon },
React.createElement("div", { className: DocumentTile_module_scss_1.default.fileTypeIcon, "aria-label": ariaLabel, title: ariaLabel },
React.createElement("img", { className: DocumentTile_module_scss_1.default.fileTypeIconIcon, src: strings.ODPhotoIconUrl, style: { width: 16, height: 16 } }))))),
React.createElement("span", { className: DocumentTile_module_scss_1.default.namePlate },
React.createElement("span", { className: DocumentTile_module_scss_1.default.name },
React.createElement("span", { className: (0, Utilities_1.css)(DocumentTile_module_scss_1.default.signalField, DocumentTile_module_scss_1.default.compact) },
React.createElement("span", { className: DocumentTile_module_scss_1.default.signalFieldValue }, item.name))),
React.createElement("span", { className: DocumentTile_module_scss_1.default.activity, id: `Tile-activity${index}` },
React.createElement("span", { className: (0, Utilities_1.css)(DocumentTile_module_scss_1.default.signalField, DocumentTile_module_scss_1.default.compact) },
React.createElement("span", { className: DocumentTile_module_scss_1.default.signalFieldValue }, item.modifiedFriendly))))),
React.createElement("span", { role: "checkbox", className: DocumentTile_module_scss_1.default.check, "data-selection-toggle": true, "aria-checked": isSelected },
React.createElement(Check_1.Check, { checked: isSelected }))));
}
}
exports.DocumentTile = DocumentTile;
//# sourceMappingURL=DocumentTile.js.map