@pnp/spfx-controls-react
Version:
Reusable React controls for SharePoint Framework solutions
66 lines • 4 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FileInfo = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var date_fns_1 = require("date-fns");
var Checkbox_1 = require("@fluentui/react/lib/Checkbox");
var DocumentCard_1 = require("@fluentui/react/lib/DocumentCard");
var Image_1 = require("@fluentui/react/lib/Image");
var Stack_1 = require("@fluentui/react/lib/Stack");
var Text_1 = require("@fluentui/react/lib/Text");
var react_file_type_icons_1 = require("@fluentui/react-file-type-icons");
var useUtils_1 = require("../../hooks/useUtils");
var useFileStyles_1 = require("./useFileStyles");
(0, react_file_type_icons_1.initializeFileTypeIcons)();
var FileInfo = function (props) {
var fileInfo = props.fileInfo, onSelected = props.onSelected, isSelected = props.isSelected;
var name = fileInfo.name, size = fileInfo.size, lastModified = fileInfo.lastModified;
var _a = (0, useFileStyles_1.useFileStyles)(), checkBoxStyles = _a.checkBoxStyles, documentCardStyles = _a.documentCardStyles, stackCheckboxStyles = _a.stackCheckboxStyles, fileNameStyles = _a.fileNameStyles, documentImageStyles = _a.documentImageStyles;
var _b = (0, useUtils_1.useUtils)(), getShortText = _b.getShortText, getFileExtension = _b.getFileExtension, getFileSize = _b.getFileSize;
var fileSize = getFileSize(size);
var fileExtension = getFileExtension(name);
var fileModified = (0, date_fns_1.format)(new Date(lastModified), "dd, MMM yyyy");
var _c = React.useState(false), isChecked = _c[0], setIsChecked = _c[1];
var fileIcon = React.useMemo(function () {
return tslib_1.__assign(tslib_1.__assign({}, (0, react_file_type_icons_1.getFileTypeIconProps)({ extension: fileExtension, size: 48, imageFileType: "svg" })), { styles: { root: { fontSize: 0 } } });
}, [fileExtension]);
var onCheckboxChange = React.useCallback(function (ev, checked) {
setIsChecked(checked);
if (onSelected) {
onSelected(checked, fileInfo);
}
}, [fileInfo, onSelected]);
React.useEffect(function () {
setIsChecked(isSelected);
}, [isSelected]);
var renderNormalCard = React.useCallback(function () {
return (React.createElement(React.Fragment, null,
React.createElement(Stack_1.Stack, null,
React.createElement(DocumentCard_1.DocumentCard, { styles: documentCardStyles, title: name },
React.createElement(DocumentCard_1.DocumentCardImage, { height: 100, imageFit: Image_1.ImageFit.cover, iconProps: fileIcon, styles: documentImageStyles }),
React.createElement(Stack_1.Stack, { horizontal: true, horizontalAlign: "end", tokens: { childrenGap: 5, padding: 7 }, styles: stackCheckboxStyles },
React.createElement(Checkbox_1.Checkbox, { styles: checkBoxStyles, checked: isChecked, onChange: onCheckboxChange })),
React.createElement(DocumentCard_1.DocumentCardDetails, null,
React.createElement(Stack_1.Stack, { tokens: { padding: 10, childrenGap: 5 }, horizontalAlign: "center", verticalAlign: "center" },
React.createElement(Text_1.Text, { title: name, styles: fileNameStyles, variant: "medium" }, getShortText(name, 15)),
React.createElement(Text_1.Text, { variant: "small" }, fileSize),
React.createElement(Text_1.Text, { block: true, nowrap: true, variant: "small" }, fileModified)))))));
}, [
documentCardStyles,
name,
fileIcon,
documentImageStyles,
stackCheckboxStyles,
checkBoxStyles,
isChecked,
onCheckboxChange,
fileNameStyles,
getShortText,
fileSize,
fileModified,
]);
return React.createElement(React.Fragment, null, renderNormalCard());
};
exports.FileInfo = FileInfo;
//# sourceMappingURL=FileInfo.js.map