Skip to content

Instantly share code, notes, and snippets.

@esshka
Forked from vonovak/FlowTypedMobxInject.js
Created June 23, 2018 10:24
Show Gist options
  • Save esshka/6b3abd73e3435039d58fa6d2b1163c42 to your computer and use it in GitHub Desktop.
Save esshka/6b3abd73e3435039d58fa6d2b1163c42 to your computer and use it in GitHub Desktop.
using flowtype with @Inject from 'mobx-react'
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