@pnp/spfx-controls-react/lib-commonjs/controls/uploadFiles/components/DocumentList/DocumentList.js

Reusable React controls for SharePoint Framework solutions

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DocumentList = void 0;
var tslib_1 = require("tslib");
/* eslint-disable no-undef */
/* eslint-disable @typescript-eslint/explicit-function-return-type */
/* eslint-disable @typescript-eslint/no-explicit-any */
var React = tslib_1.__importStar(require("react"));
var ControlStrings_1 = tslib_1.__importDefault(require("ControlStrings"));
var jotai_1 = require("jotai");
var lodash_1 = require("lodash");
var Button_1 = require("@fluentui/react/lib/Button");
var Stack_1 = require("@fluentui/react/lib/Stack");
var ScrollablePane_1 = require("@fluentui/react/lib/ScrollablePane");
var dragDropFiles_1 = require("../../../dragDropFiles");
var atoms_1 = require("../../jotai/atoms");
var FileInfo_1 = require("../File/FileInfo");
var FileCommandBar_1 = require("../FileCommandBar/FileCommandBar");
var NoDocuments_1 = require("../NoDocuments/NoDocuments");
var useDocumentListStyles_1 = require("./useDocumentListStyles");
var DocumentList = function (props) {
    var _a = (0, useDocumentListStyles_1.useDocumentListStyles)(), documentListStyles = _a.documentListStyles, scollableContainerStyles = _a.scollableContainerStyles, bootomContainerStyles = _a.bootomContainerStyles;
    var _b = (0, jotai_1.useAtom)(atoms_1.globalState), appGlobalState = _b[0], setGlobalState = _b[1];
    var _c = React.useState([]), renderFiles = _c[0], setRenderFiles = _c[1];
    var selectedFiles = appGlobalState.selectedFiles, files = appGlobalState.files, containerWidth = appGlobalState.containerWidth;
    var currentPage = React.useRef(0);
    var currentFiles = React.useRef([]);
    var onUploadFiles = props.onUploadFiles;
    var currentDivWidth = React.useRef(0);
    var divRef = React.useRef();
    var isSelected = React.useCallback(function (file) {
        return selectedFiles.some(function (selectedFile) { return (0, lodash_1.isEqual)(selectedFile, file); });
    }, [selectedFiles]);
    var onFileSelected = React.useCallback(function (isChecked, file) {
        var copySelectedFiles = selectedFiles.slice();
        if (!isChecked) {
            var newFiles_1 = (0, lodash_1.pullAllWith)(copySelectedFiles, [file], lodash_1.isEqual);
            setGlobalState(function (prevState) {
                return tslib_1.__assign(tslib_1.__assign({}, prevState), { selectedFiles: newFiles_1 });
            });
        }
        else {
            setGlobalState(function (prevState) {
                return tslib_1.__assign(tslib_1.__assign({}, prevState), { selectedFiles: tslib_1.__spreadArray(tslib_1.__spreadArray([], copySelectedFiles, true), [file], false) });
            });
        }
    }, [setGlobalState, selectedFiles]);
    var renderFilesPerPage = React.useCallback(function () {
        var renderfiles = [];
        for (var i = 0; i < files.length; i++) {
            var file = files[i];
            renderfiles.push(React.createElement(FileInfo_1.FileInfo, { key: "".concat(file.name, "-").concat(i), fileInfo: file, onSelected: onFileSelected, isSelected: isSelected(file) }));
        }
        setRenderFiles(renderfiles);
    }, [files, onFileSelected, isSelected]);
    var onDrop = React.useCallback(function (acceptedFiles) { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
        var copyFiles, newsFiles;
        return tslib_1.__generator(this, function (_a) {
            copyFiles = files.slice();
            newsFiles = tslib_1.__spreadArray(tslib_1.__spreadArray([], copyFiles, true), acceptedFiles, true);
            currentFiles.current = newsFiles;
            setGlobalState(function (prevState) {
                return tslib_1.__assign(tslib_1.__assign({}, prevState), { files: newsFiles });
            });
            return [2 /*return*/];
        });
    }); }, [files, setGlobalState]);
    var onDelete = React.useCallback(function () {
        currentPage.current = 0;
        var newFiles = (0, lodash_1.pullAllWith)(files, selectedFiles, lodash_1.isEqual);
        setGlobalState(function (prevState) {
            return tslib_1.__assign(tslib_1.__assign({}, prevState), { files: newFiles, selectedFiles: [] });
        });
    }, [files, selectedFiles, setGlobalState]);
    var onUpload = React.useCallback(function (file) {
        var newFiles = tslib_1.__spreadArray(tslib_1.__spreadArray([], currentFiles.current, true), [file], false);
        setGlobalState(function (prevState) {
            return tslib_1.__assign(tslib_1.__assign({}, prevState), { files: newFiles });
        });
    }, [setGlobalState]);
    var onSelectAll = React.useCallback(function (isAllSelected) {
        if (isAllSelected) {
            setGlobalState(function (prevState) {
                return tslib_1.__assign(tslib_1.__assign({}, prevState), { selectedFiles: files });
            });
        }
        else {
            setGlobalState(function (prevState) {
                return tslib_1.__assign(tslib_1.__assign({}, prevState), { selectedFiles: [] });
            });
        }
    }, [files, setGlobalState]);
    var getContainerWidth = React.useCallback(function () {
        var _a, _b, _c, _d;
        if (currentDivWidth.current !== ((_a = divRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) && ((_b = divRef.current) === null || _b === void 0 ? void 0 : _b.offsetWidth) !== undefined) {
            currentDivWidth.current = (_d = (_c = divRef.current) === null || _c === void 0 ? void 0 : _c.offsetWidth) !== null && _d !== void 0 ? _d : 0;
            setGlobalState(function (prevState) {
                return tslib_1.__assign(tslib_1.__assign({}, prevState), { containerWidth: currentDivWidth.current });
            });
        }
    }, [setGlobalState]);
    React.useEffect(function () {
        renderFilesPerPage();
        document.addEventListener("change", function () {
            getContainerWidth();
        });
        window.addEventListener("resize", function () {
            getContainerWidth();
        });
    }, [files, selectedFiles, containerWidth, renderFilesPerPage, getContainerWidth]);
    getContainerWidth();
    return (React.createElement(React.Fragment, null,
        React.createElement("div", { ref: divRef },
            React.createElement(FileCommandBar_1.FileCommandBar, { onDelete: onDelete, onSelectedAll: onSelectAll, onUpload: onUpload }),
            React.createElement(ScrollablePane_1.ScrollablePane, { scrollbarVisibility: ScrollablePane_1.ScrollbarVisibility.auto, styles: scollableContainerStyles },
                React.createElement("div", { className: documentListStyles.documentList },
                    React.createElement(dragDropFiles_1.DragDropFiles, { enable: true, onDrop: onDrop },
                        React.createElement(Stack_1.Stack, { tokens: { padding: 20 } }, renderFiles.length ? (React.createElement("div", { className: documentListStyles.filesContainerGrid }, renderFiles)) : (React.createElement(NoDocuments_1.NoDocuments, null)))))),
            React.createElement(Stack_1.Stack, { styles: bootomContainerStyles, horizontalAlign: "end", tokens: { childrenGap: 20 } },
                React.createElement("div", { className: documentListStyles.separator }),
                React.createElement(React.Fragment, null,
                    React.createElement(Button_1.PrimaryButton, { disabled: !selectedFiles.length, iconProps: { iconName: "upload" }, text: ControlStrings_1.default.UploadFilesUploadButtonLabel, onClick: function () { return onUploadFiles(selectedFiles); } }))))));
};
exports.DocumentList = DocumentList;
//# sourceMappingURL=DocumentList.js.map