@pnp/spfx-property-controls
Version:
Reusable property pane controls for SharePoint Framework solutions
66 lines • 3.58 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.NewFolder = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const Icon_1 = require("@fluentui/react/lib/Icon");
const Button_1 = require("@fluentui/react/lib/Button");
const TextField_1 = require("@fluentui/react/lib/TextField");
const Spinner_1 = require("@fluentui/react/lib/Spinner");
const NewFolder_module_scss_1 = tslib_1.__importDefault(require("./NewFolder.module.scss"));
const strings = tslib_1.__importStar(require("PropertyControlStrings"));
const FolderExplorerService_1 = require("../../../../services/FolderExplorerService");
const addIcon = { iconName: 'CheckMark' };
class NewFolder extends React.Component {
constructor(props) {
super(props);
this._onFolderNameChange = (newValue) => {
this.setState({ folderName: newValue || '' });
};
this._onShowInputChange = (event) => {
this.setState({ showInput: true });
};
/**
* Add new subfolder to current folder
*/
this._addSubFolder = () => tslib_1.__awaiter(this, void 0, void 0, function* () {
let newFolder = null;
this.setState({ loading: true });
try {
const siteAbsoluteUrl = this.props.siteAbsoluteUrl || this.props.context.pageContext.web.absoluteUrl;
const folder = yield this._spService.addFolder(siteAbsoluteUrl, this.props.selectedFolder.ServerRelativeUrl, this.state.folderName);
// update folder variable to be used on the callback
newFolder = { Name: folder.Name, ServerRelativeUrl: folder.ServerRelativeUrl };
// update return variable
this.setState({ loading: false, folderName: '' });
}
catch (error) {
console.error('Error adding folder', error);
}
// callback
this.props.addSubFolder(newFolder).then(() => { }).catch(() => { });
});
this._spService = new FolderExplorerService_1.FolderExplorerService(this.props.context);
this.state = {
folderName: '',
showInput: false,
loading: false,
};
}
render() {
return (React.createElement("div", { className: NewFolder_module_scss_1.default.libraryItem },
this.state.loading &&
React.createElement("span", { className: NewFolder_module_scss_1.default.spinner },
React.createElement(Spinner_1.Spinner, { size: Spinner_1.SpinnerSize.xSmall })),
!this.state.loading &&
React.createElement(Icon_1.Icon, { iconName: "FabricNewFolder", className: NewFolder_module_scss_1.default.folderIcon }),
!this.state.showInput &&
React.createElement("div", { className: NewFolder_module_scss_1.default.defaultText, onClick: this._onShowInputChange }, "New folder"),
this.state.showInput &&
React.createElement(TextField_1.TextField, { placeholder: strings.NewFolderNamePlaceholder, value: this.state.folderName, onChange: (e, value) => this._onFolderNameChange(value) }),
this.state.folderName.length > 0 &&
React.createElement(Button_1.IconButton, { iconProps: addIcon, title: "Add", ariaLabel: "Add", className: NewFolder_module_scss_1.default.button, disabled: this.state.loading, onClick: this._addSubFolder })));
}
}
exports.NewFolder = NewFolder;
//# sourceMappingURL=NewFolder.js.map