import * as React from 'react' ; import { ILinkFilePickerTabProps } from './ILinkFilePickerTabProps' ; import { ILinkFilePickerTabState } from './ILinkFilePickerTabState' ; import { GeneralHelper } from '../../../common/utilities/GeneralHelper' ; import { IFilePickerResult } from '../FilePicker.types' ; import { PrimaryButton , DefaultButton } from 'office-ui-fabric-react/lib/components/Button' ; import { TextField } from 'office-ui-fabric-react/lib/TextField' ; import { css } from 'office-ui-fabric-react/lib/Utilities' ; import * as strings from 'ControlStrings' ; import styles from './LinkFilePickerTab.module.scss' ; export default class LinkFilePickerTab extends React . Component < ILinkFilePickerTabProps , ILinkFilePickerTabState > { constructor ( props ) { super ( props ) ; this . state = { isValid : false } ; } public render ( ) { const fileUrl = this . state . filePickerResult ? this . state . filePickerResult . fileAbsoluteUrl : null ; return ( < div className = { styles . tabContainer } > < div className = { styles . tabHeaderContainer } > < h2 className = { styles . tabHeader } > { strings . LinkHeader } < /h2> < /div> < div className = { css ( styles . tab , styles . tabOffset ) } > < TextField multiline = { true } required = { true } resizable = { false } deferredValidationTime = { 300 } className = { styles . linkTextField } label = { strings . LinkFileInstructions } ariaLabel = { strings . LinkFileInstructions } defaultValue = { "https://" } onGetErrorMessage = { ( value ) => this . _getErrorMessagePromise ( value ) } autoAdjustHeight = { false } underlined = { false } borderless = { false } validateOnFocusIn = { false } validateOnFocusOut = { false } validateOnLoad = { true } value = { fileUrl } onChange = { ( e , newValue ) => this . _handleChange ( newValue ) } /> { this . props . renderCustomLinkTabContent && this . props . renderCustomLinkTabContent ( this . state . filePickerResult ) } < /div> < div className = { styles . actionButtonsContainer } > < div className = { styles . actionButtons } > < PrimaryButton disabled = { ! this . state . isValid } onClick = { ( ) => this . _handleSave ( ) } className = { styles . actionButton } > { strings . OpenButtonLabel } < /PrimaryButton> < DefaultButton onClick = { ( ) => this . _handleClose ( ) } className = { styles . actionButton } > { strings . CancelButtonLabel } < /DefaultButton> < /div> < /div> < /div>); } private _handleChange = ( fileUrl ) => { const filePickerResult = fileUrl && this . _isUrl ( fileUrl ) ? { fileAbsoluteUrl : fileUrl , fileName : GeneralHelper . getFileNameFromUrl ( fileUrl ) , fileNameWithoutExtension : GeneralHelper . getFileNameWithoutExtension ( fileUrl ) , downloadFileContent : ( ) => { return this . props . fileSearchService . downloadBingContent ( fileUrl , GeneralHelper . getFileNameFromUrl ( fileUrl ) ) ; } } : null ; this . setState ( { filePickerResult } ) ; } ; private _getErrorMessagePromise = async ( value ) : Promise < string > => { if ( value === undefined || value === 'https://' ) { this . setState ( { isValid : false } ) ; return '' ; } if ( ! this . _isUrl ( value ) ) { this . setState ( { isValid : false } ) ; return '' ; } if ( ! this . props . allowExternalTenantLinks && ! this . _isSameDomain ( value ) ) { this . setState ( { isValid : false } ) ; return strings . NoExternalLinksValidationMessage ; } const fileExists = await this . props . fileSearchService . checkFileExists ( value ) ; this . setState ( { isValid : fileExists } ) ; const strResult = fileExists ? '' : strings . ProvidedValueIsInvalid ; return strResult ; } ; private _handleSave = ( ) => { this . props . onSave ( [ this . state . filePickerResult ] ) ; } ; private _handleClose = ( ) => { this . props . onClose ( ) ; } ; private _isUrl = ( fileUrl ) : boolean => { try { const myURL = new URL ( fileUrl . toLowerCase ( ) ) ; return myURL . host !== undefined ; } catch ( error ) { return false ; } } ; private _isSameDomain = ( fileUrl ) : boolean => { const siteUrl = this . props . context . pageContext . web . absoluteUrl ; return GeneralHelper . getAbsoluteDomainUrl ( siteUrl ) === GeneralHelper . getAbsoluteDomainUrl ( fileUrl ) ; } ; }