-
-
Save esshka/6b3abd73e3435039d58fa6d2b1163c42 to your computer and use it in GitHub Desktop.
using flowtype with @Inject from 'mobx-react'
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import type File from "File"; | |
import type FileService from "FileService"; | |
type FileDetailProps = { | |
file: File | |
}; | |
class FileDetail extends React.Component<FileDetailProps> { | |
render() { | |
// remove the file prop and flow will complain! | |
return <FileDownload file={this.props.file} />; | |
} | |
} | |
type InjectedProps = { | |
fileService: FileService | |
}; | |
// for older flow versions | |
function typedInject<Props>( | |
WrappedComponent: React.ComponentType<InjectedProps & Props> | |
): React.ComponentType<Props> { | |
return inject("fileService")(WrappedComponent); | |
} | |
// for flow version > 60 (or so) | |
function typedInject<Props: {}>( | |
WrappedComponent: React.ComponentType<Props> | |
): React.ComponentType<$Diff<Props, InjectedProps>> { | |
return inject("fileService")(WrappedComponent); | |
} | |
// NOTE you can spread types from InjectedProps to reuse them | |
type FileDownloadProps = { | |
file: File, | |
...$Exact<InjectedProps> | |
}; | |
//NOTE using | |
//@typedInject | |
//class FileDownload extends ... will NOT work - why? (maybe related to `esproposal.decorators=ignore` in .flowconfig) | |
const FileDownload = typedInject( | |
class FileDownload extends React.Component<FileDownloadProps> { | |
download = () => { | |
// flow will happily access both file and fileService props! | |
this.props.fileService.downloadFile(this.props.file); | |
// flow will complain: [flow] property `foo` (Property not found in object type) | |
this.props.foo.bar(); | |
}; | |
render() { | |
return <Button onPress={this.download}>download file!</Button>; | |
} | |
} | |
); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment