@pnp/spfx-property-controls
Version:
Reusable property pane controls for SharePoint Framework solutions
62 lines • 3.16 kB
JavaScript
import { __awaiter } from "tslib";
import * as React from 'react';
import { Icon } from '@fluentui/react/lib/Icon';
import { IconButton } from '@fluentui/react/lib/Button';
import { TextField } from '@fluentui/react/lib/TextField';
import { Spinner, SpinnerSize } from "@fluentui/react/lib/Spinner";
import styles from './NewFolder.module.scss';
import * as strings from 'PropertyControlStrings';
import { FolderExplorerService } from '../../../../services/FolderExplorerService';
const addIcon = { iconName: 'CheckMark' };
export 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 = () => __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(this.props.context);
this.state = {
folderName: '',
showInput: false,
loading: false,
};
}
render() {
return (React.createElement("div", { className: styles.libraryItem },
this.state.loading &&
React.createElement("span", { className: styles.spinner },
React.createElement(Spinner, { size: SpinnerSize.xSmall })),
!this.state.loading &&
React.createElement(Icon, { iconName: "FabricNewFolder", className: styles.folderIcon }),
!this.state.showInput &&
React.createElement("div", { className: styles.defaultText, onClick: this._onShowInputChange }, "New folder"),
this.state.showInput &&
React.createElement(TextField, { placeholder: strings.NewFolderNamePlaceholder, value: this.state.folderName, onChange: (e, value) => this._onFolderNameChange(value) }),
this.state.folderName.length > 0 &&
React.createElement(IconButton, { iconProps: addIcon, title: "Add", ariaLabel: "Add", className: styles.button, disabled: this.state.loading, onClick: this._addSubFolder })));
}
}
//# sourceMappingURL=NewFolder.js.map