@pnp/spfx-controls-react
Version:
Reusable React controls for SharePoint Framework solutions
71 lines • 4.51 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FileCommandBar = void 0;
var tslib_1 = require("tslib");
/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable @typescript-eslint/no-floating-promises */
/* eslint-disable @typescript-eslint/no-use-before-define */
var React = tslib_1.__importStar(require("react"));
var ControlStrings_1 = tslib_1.__importDefault(require("ControlStrings"));
var jotai_1 = require("jotai");
var Button_1 = require("@fluentui/react/lib/Button");
var Checkbox_1 = require("@fluentui/react/lib/Checkbox");
var CommandBar_1 = require("@fluentui/react/lib/CommandBar");
var Stack_1 = require("@fluentui/react/lib/Stack");
var atoms_1 = require("../../jotai/atoms");
var UploadButton_1 = require("../UploadButton/UploadButton");
var useFileCommandBarStyles_1 = require("./useFileCommandBarStyles");
var FileCommandBar = function (props) {
var _a = (0, useFileCommandBarStyles_1.useFileCommandBarStyles)(), stackContainerStyles = _a.stackContainerStyles, commandBarStyles = _a.commandBarStyles, controlStyles = _a.controlStyles, commandbarButtonStyles = _a.commandbarButtonStyles, checkBoxStyles = _a.checkBoxStyles, buttonIconStyles = _a.buttonIconStyles;
var _b = (0, jotai_1.useAtom)(atoms_1.globalState), appGlobalState = _b[0], setGlobalState = _b[1];
var selectedFiles = appGlobalState.selectedFiles, files = appGlobalState.files;
var _c = React.useState([]), commandbarItems = _c[0], setCOmmandBarItems = _c[1];
var _d = React.useState(false), isAllSelected = _d[0], setIsAllSelected = _d[1];
var onUpload = props.onUpload, onDelete = props.onDelete, onSelectedAll = props.onSelectedAll;
var commandDeleteButton = React.useCallback(function (props) {
return (React.createElement(Button_1.ActionButton, { iconProps: { iconName: "Delete", styles: buttonIconStyles }, styles: commandbarButtonStyles, onClick: function () {
setIsAllSelected(false);
onDelete();
}, text: ControlStrings_1.default.UpLoadFilesDeleteButtonLabel }));
}, [selectedFiles, commandbarButtonStyles]);
React.useEffect(function () {
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: [] });
});
}
}, [isAllSelected, files]);
var commanbarSelectAllButton = React.useCallback(function (props) {
var selectedAll = files.length > 0 && files.length === selectedFiles.length;
return (React.createElement(Stack_1.Stack, { horizontal: true, verticalAlign: "center", horizontalAlign: "start", tokens: { childrenGap: 15 } },
files.length > 0 ? (React.createElement(Checkbox_1.Checkbox, { styles: checkBoxStyles, label: ControlStrings_1.default.UpLoadFilesSelectAllLabel, checked: selectedAll, onChange: function (ev, checked) {
setIsAllSelected(checked);
onSelectedAll(checked);
} })) : null,
selectedFiles.length ? React.createElement("div", { className: controlStyles.separatorVertrical }) : null));
}, [files.length, selectedFiles.length, checkBoxStyles, controlStyles.separatorVertrical, onSelectedAll]);
React.useEffect(function () {
var items = [];
items.push({
key: "selectedFiles",
commandBarButtonAs: commanbarSelectAllButton,
});
items.push({
key: "delete",
commandBarButtonAs: commandDeleteButton,
});
setCOmmandBarItems(items);
}, [commanbarSelectAllButton, commandDeleteButton]);
return (React.createElement(React.Fragment, null,
React.createElement(Stack_1.Stack, { horizontal: true, horizontalAlign: "space-between", verticalAlign: "center", styles: stackContainerStyles },
React.createElement(CommandBar_1.CommandBar, { items: commandbarItems, styles: commandBarStyles }),
React.createElement(UploadButton_1.UploadButton, { text: ControlStrings_1.default.UploadFilesButtonLabel, onUpload: onUpload, iconName: "Add" })),
React.createElement("div", { className: controlStyles.separator })));
};
exports.FileCommandBar = FileCommandBar;
//# sourceMappingURL=FileCommandBar.js.map