import * as React from 'react' ; import { Icon , IIconProps } from 'office-ui-fabric-react/lib/Icon' ; import { IconButton } from 'office-ui-fabric-react/lib/Button' ; import { TextField } from 'office-ui-fabric-react/lib/TextField' ; import { Spinner , SpinnerSize } from "office-ui-fabric-react/lib/Spinner" ; import styles from './NewFolder.module.scss' ; import * as strings from 'ControlStrings' ; import { INewFolderProps , INewFolderState } from '.' ; import { FolderExplorerService } from '../../../services/FolderExplorerService' ; import { IFolder , IFolderExplorerService } from '../../../services/IFolderExplorerService' ; const addIcon = { iconName : 'CheckMark' } ; export class NewFolder extends React . Component < INewFolderProps , INewFolderState > { private _spService : IFolderExplorerService ; constructor ( props ) { super ( props ) ; this . _spService = new FolderExplorerService ( this . props . context . serviceScope ) ; this . state = { folderName : '' , showInput : false , loading : false , } ; } public render ( ) { const { folderName , errorMessage } = this . state ; const hasError = folderName && /["*:<>?/\\|]/gmi . test ( folderName ) ; return ( < div className = { styles . libraryItem } > { this . state . loading && < span className = { styles . spinner } > < Spinner size = { SpinnerSize . xSmall } styles = { { root : { height : '32px' } } } /></span > } { ! this . state . loading && < Icon iconName = "FabricNewFolder" className = { styles . folderIcon } > < /Icon>} { ! this . state . showInput && < div className = { styles . defaultText } onClick = { this . _onShowInputChange } > New folder < /div>} { this . state . showInput && < TextField styles = { { errorMessage : { paddingTop : 0 } , root : { width : '100%' } } } placeholder = { strings . NewFolderNamePlaceholder } value = { folderName } onChange = { ( e , value ) => this . _onFolderNameChange ( value ) } errorMessage = { hasError ? strings . NewFolderIncorrectSymbolsError : errorMessage } / > } { this . state . folderName . length > 0 && < IconButton iconProps = { addIcon } title = "Add" ariaLabel = "Add" className = { styles . button } disabled = { this . state . loading || hasError } onClick = { this . _addSubFolder } / > } < /div>); } private _onFolderNameChange = ( newValue ? ) => { this . setState ( { folderName : newValue || '' , errorMessage : '' } ) ; } ; private _onShowInputChange = ( event ) => { this . setState ( { showInput : true } ) ; } ; private _addSubFolder = async ( ) : Promise < void > => { let newFolder = null ; this . setState ( { loading : true } ) ; try { const siteAbsoluteUrl = this . props . siteAbsoluteUrl || this . props . context . pageContext . web . absoluteUrl ; const folder = await this . _spService . AddFolder ( siteAbsoluteUrl , this . props . selectedFolder . ServerRelativeUrl , this . state . folderName ) ; newFolder = { Name : folder . Name , ServerRelativeUrl : folder . ServerRelativeUrl } ; this . setState ( { loading : false , folderName : '' } ) ; } catch ( error ) { console . error ( 'Error adding folder' , error ) ; this . setState ( { loading : false , errorMessage : strings . SomethingWentWrong } ) ; } this . props . addSubFolder ( newFolder ) ; } ; }