import * as React from 'react' ; import { getDownloadURL , fromTask } from 'rxfire/storage' ; import { ReactFireOptions , useObservable , ObservableStatus , useStorage } from './' ; import { useSuspenseEnabledFromConfigAndContext } from './firebaseApp' ; import { ref } from 'firebase/storage' ; import type { UploadTask , UploadTaskSnapshot , StorageReference , FirebaseStorage } from 'firebase/storage' ; param task param ref param options export function useStorageTask < T = unknown > ( task , ref , options ? ) { const observableId = `storage:task:${ ref . toString ( ) }` ; const observable$ = fromTask ( task ) ; return useObservable ( observableId , observable$ , options ) ; } param ref param options export function useStorageDownloadURL < T = string > ( ref , options ? ) { const observableId = `storage:downloadUrl:${ ref . toString ( ) }` ; const observable$ = getDownloadURL ( ref ) ; return useObservable ( observableId , observable$ , options ) ; } type StorageImageProps = { storagePath : string ; storage ? : FirebaseStorage ; suspense ? : boolean ; placeHolder ? : JSX . Element ; } ; function StorageFromContext ( props ) { const storage = useStorage ( ) ; props = { ... props , storage } ; return < INTERNALStorageImage { ... props } / > ; } function INTERNALStorageImage ( props ) { let { storage , storagePath , suspense , placeHolder , ... imgProps } = props ; const reactfireOptions = { suspense : useSuspenseEnabledFromConfigAndContext ( suspense ) , } ; if ( ! storage ) { throw new Error ( 'Storage was not passed to component INTERNALStorageImage. This should not be possible' ) ; } const { status , data : imgSrc } = useStorageDownloadURL ( ref ( storage , storagePath ) , reactfireOptions ) ; if ( status === 'success' ) { if ( ! ( imgProps . alt || imgProps . alt === '' ) ) { console . warn ( `No alt prop provided for StorageImage with storagePath "${ storagePath }"` , 'img elements must have an alt prop, either with meaningful text, or an empty string for decorative images' ) ; } return < img src = { imgSrc } alt = { imgProps . alt } { ... imgProps } />; } else { return placeHolder ?? < > '' < />; } } export function StorageImage ( props ) { let { storage } = props ; if ( storage ) { return < INTERNALStorageImage { ... props } / > ; } else { return < StorageFromContext { ... props } / > ; } }