@pnp/spfx-property-controls
Version:
Reusable property pane controls for SharePoint Framework solutions
55 lines • 5.46 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FolderTile = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const FolderTile_module_scss_1 = tslib_1.__importDefault(require("./FolderTile.module.scss"));
const Utilities_1 = require("@fluentui/react/lib/Utilities");
const Icon_1 = require("@fluentui/react/lib/Icon");
const strings = tslib_1.__importStar(require("PropertyControlStrings"));
const Styling_1 = require("@fluentui/react/lib/Styling");
class FolderTile extends React.Component {
render() {
const { isSelected, index, item, pageWidth } = this.props;
const isLarge = pageWidth >= Styling_1.ScreenWidthMinLarge;
//{item.name}, Folder, Modified {item.modified}, edited by {item.modifiedBy}, {item.totalFileCount} items, Private
const itemLabel = strings.FolderLabelTemplate
.replace('{0}', item.name)
.replace('{1}', item.modifiedFriendly)
.replace('{2}', item.modifiedBy)
.replace('{3}', `${item.totalFileCount}`);
// Get the user's locale
const userLocale = this.props.context.pageContext
? this.props.context.pageContext.cultureInfo.currentCultureName || this.props.context.pageContext.cultureInfo.currentUICultureName // gets the language / locale of the user
: "en-US"; // defaults to American English
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)(FolderTile_module_scss_1.default.tile, isLarge ? FolderTile_module_scss_1.default.isLarge : FolderTile_module_scss_1.default.isSmall, FolderTile_module_scss_1.default.invokable, isSelected ? FolderTile_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, onClick: (_event) => this.props.onItemInvoked(item) },
React.createElement("div", { className: FolderTile_module_scss_1.default.link, role: "link" },
React.createElement("span", { id: `Tile-label${index}`, className: FolderTile_module_scss_1.default.label }, itemLabel),
React.createElement("span", { role: "presentation", className: FolderTile_module_scss_1.default.aboveNameplate },
React.createElement("span", { role: "presentation", className: FolderTile_module_scss_1.default.content },
React.createElement("span", { role: "presentation", className: FolderTile_module_scss_1.default.foreground },
React.createElement("span", { className: FolderTile_module_scss_1.default.odItemTile2FolderCover },
React.createElement("div", { className: (0, Utilities_1.css)(FolderTile_module_scss_1.default.folderCover, FolderTile_module_scss_1.default.isLarge) },
React.createElement(Icon_1.Icon, { className: FolderTile_module_scss_1.default.folderCoverBack, iconType: Icon_1.IconType.image, imageProps: {
src: strings.FolderBackPlate
} }),
item.totalFileCount > 0 &&
React.createElement("span", { className: FolderTile_module_scss_1.default.folderCoverContent },
React.createElement("span", { className: FolderTile_module_scss_1.default.folderCoverFrame },
React.createElement("span", { className: FolderTile_module_scss_1.default.itemTileBlankCover, style: { width: 104, height: 72 } }))),
React.createElement(Icon_1.Icon, { className: FolderTile_module_scss_1.default.folderCoverFront, iconType: Icon_1.IconType.image, imageProps: {
src: strings.FolderFrontPlate
} }),
item.totalFileCount > 0 &&
React.createElement("span", { className: FolderTile_module_scss_1.default.metadata }, item.totalFileCount)))))),
React.createElement("span", { className: FolderTile_module_scss_1.default.namePlate },
React.createElement("span", { className: FolderTile_module_scss_1.default.name },
React.createElement("span", { className: (0, Utilities_1.css)(FolderTile_module_scss_1.default.signalField, FolderTile_module_scss_1.default.compact) },
React.createElement("span", { className: FolderTile_module_scss_1.default.signalFieldValue }, item.name))),
React.createElement("span", { className: FolderTile_module_scss_1.default.activity, id: `Tile-activity${index}` },
React.createElement("span", { className: (0, Utilities_1.css)(FolderTile_module_scss_1.default.signalField, FolderTile_module_scss_1.default.compact) },
React.createElement("span", { className: FolderTile_module_scss_1.default.signalFieldValue }, item.modified.toLocaleDateString(userLocale))))))));
}
}
exports.FolderTile = FolderTile;
//# sourceMappingURL=FolderTile.js.map