Migrate DetailSidebar from js to tsx

Summary: Migrated DetailSidebar.js to DetailSidebar.tsx

Reviewed By: passy

Differential Revision: D16708503

fbshipit-source-id: 13090d6d44dbd01b162194c66724059d8e86a4c8

src/chrome/DetailSidebar.tsx

@@ -0,0 +1,75 @@
+/**
+ * Copyright 2018-present Facebook.
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * @format
+ */
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Sidebar from '../ui/components/Sidebar';
+import {connect} from 'react-redux';
+import {toggleRightSidebarAvailable} from '../reducers/application';
+
+type OwnProps = {
+  children: any;
+  width?: number;
+  minWidth?: number;
+};
+
+type StateFromProps = {
+  rightSidebarVisible: boolean;
+  rightSidebarAvailable: boolean;
+};
+
+type DispatchFromProps = {
+  toggleRightSidebarAvailable: (visible?: boolean) => any;
+};
+
+type Props = OwnProps & StateFromProps & DispatchFromProps;
+class DetailSidebar extends React.Component<Props> {
+  componentDidMount() {
+    this.updateSidebarAvailablility();
+  }
+
+  componentDidUpdate() {
+    this.updateSidebarAvailablility();
+  }
+
+  updateSidebarAvailablility() {
+    const available = Boolean(this.props.children);
+    if (available !== this.props.rightSidebarAvailable) {
+      this.props.toggleRightSidebarAvailable(available);
+    }
+  }
+
+  render() {
+    const domNode = document.getElementById('detailsSidebar');
+    return (
+      this.props.children &&
+      this.props.rightSidebarVisible &&
+      domNode &&
+      ReactDOM.createPortal(
+        <Sidebar
+          minWidth={this.props.minWidth}
+          width={this.props.width || 300}
+          position="right">
+          {this.props.children}
+        </Sidebar>,
+        domNode,
+      )
+    );
+  }
+}
+
+// @TODO: TS_MIGRATION
+type Store = any;
+export default connect<StateFromProps, DispatchFromProps, OwnProps, Store>(
+  ({application: {rightSidebarVisible, rightSidebarAvailable}}) => ({
+    rightSidebarVisible,
+    rightSidebarAvailable,
+  }),
+  {
+    toggleRightSidebarAvailable,
+  },
+)(DetailSidebar);