File components

Summary: _typescript_

Reviewed By: passy

Differential Revision: D16830536

fbshipit-source-id: 979ee7d0ced339ff5c0d200c209d34656827e152

src/ui/components/File.tsx

@@ -5,33 +5,31 @@
  * @format
  */
 
-import {Component} from 'react';
+import React, {Component} from 'react';
+import fs from 'fs';
 
-const React = require('react');
+type FileProps = {
-const fs = require('fs');
-
-type FileProps = {|
   /** Path to the file in the file system */
-  src: string,
+  src: string;
   /** Initial content that should be shown while the file is loading */
-  buffer?: ?string,
+  buffer?: string | null | undefined;
   /** Encoding to parse the contents of the file. Defaults to UTF-8. */
-  encoding: string,
+  encoding: string;
   /** Content that should be rendered, when the file loading failed. */
-  onError?: (err: Error) => React.Element<any>,
+  onError?: (err: Error) => React.ReactNode;
   /** Content that should be rendered, while the file is loaded. */
-  onLoading?: () => React.Element<any>,
+  onLoading?: () => React.ReactNode;
   /** Callback when the data is successfully loaded. */
-  onData?: (content: string) => void,
+  onData?: (content: string) => void;
   /** Content that should be rendered, when the file is successfully loaded. This ususally should render the file's contents. */
-  onLoad: (content: string) => React.Element<any>,
+  onLoad: (content: string) => React.ReactNode;
-|};
+};
 
-type FileState = {|
+type FileState = {
-  error: ?Error,
+  error: Error | null | undefined;
-  loaded: boolean,
+  loaded: boolean;
-  content: string,
+  content: string;
-|};
+};
 
 /**
  * Wrapper for loading file content from the file system.

src/ui/components/FileList.tsx

@@ -6,43 +6,42 @@
  */
 
 import {Component} from 'react';
-
+import path from 'path';
-const path = require('path');
+import fs from 'fs';
-const fs = require('fs');
 
 const EMPTY_MAP = new Map();
 const EMPTY_FILE_LIST_STATE = {error: null, files: EMPTY_MAP};
 
 export type FileListFileType = 'file' | 'folder';
 
-export type FileListFile = {|
+export type FileListFile = {
-  name: string,
+  name: string;
-  src: string,
+  src: string;
-  type: FileListFileType,
+  type: FileListFileType;
-  size: number,
+  size: number;
-  mtime: number,
+  mtime: number;
-  atime: number,
+  atime: number;
-  ctime: number,
+  ctime: number;
-  birthtime: number,
+  birthtime: number;
-|};
+};
 
 export type FileListFiles = Array<FileListFile>;
 
 type FileListProps = {
   /** Path to the folder */
-  src: string,
+  src: string;
   /** Content to be rendered in case of an error */
-  onError?: ?(err: Error) => React$Node,
+  onError?: (err: Error) => React.ReactNode | null | undefined;
   /** Content to be rendered while loading */
-  onLoad?: () => void,
+  onLoad?: () => void;
   /** Content to be rendered when the file list is loaded */
-  onFiles: (files: FileListFiles) => React$Node,
+  onFiles: (files: FileListFiles) => React.ReactNode;
 };
 
-type FileListState = {|
+type FileListState = {
-  files: Map<string, FileListFile>,
+  files: Map<string, FileListFile>;
-  error: ?Error,
+  error: Error | null | undefined;
-|};
+};
 
 /**
  * List the contents of a folder from the user's file system. The file system is watched for
@@ -54,7 +53,7 @@ export default class FileList extends Component<FileListProps, FileListState> {
     this.state = EMPTY_FILE_LIST_STATE;
   }
 
-  watcher: ?fs.FSWatcher;
+  watcher: fs.FSWatcher | null | undefined;
 
   fetchFile(name: string): Promise<FileListFile> {
     return new Promise((resolve, reject) => {

src/ui/index.js

@@ -100,9 +100,9 @@ export {
 export {default as ContextMenu} from './components/ContextMenu.js';
 
 // file
-export type {FileListFile, FileListFiles} from './components/FileList.js';
+export type {FileListFile, FileListFiles} from './components/FileList.tsx';
-export {default as FileList} from './components/FileList.js';
+export {default as FileList} from './components/FileList.tsx';
-export {default as File} from './components/File.js';
+export {default as File} from './components/File.tsx';
 
 // context menu items
 export {