Panel

Summary: _typescript_

Reviewed By: priteshrnandgaonkar

Differential Revision: D16828813

fbshipit-source-id: 9307391dc914ea10b458092b2ec72cd30e2eb0e9

src/ui/components/Panel.tsx

@@ -6,10 +6,10 @@
  */
 
 import React from 'react';
-import styled from '../styled/index.js';
+import styled from 'react-emotion';
 import FlexColumn from './FlexColumn.js';
 import FlexBox from './FlexBox.js';
-import {colors} from './colors.tsx';
+import {colors} from './colors';
 import Glyph from './Glyph.js';
 
 const BORDER = '1px solid #dddfe2';
@@ -24,96 +24,102 @@ const Chevron = styled(Glyph)({
  * A Panel component.
  */
 export default class Panel extends React.Component<
-  {|
+  {
     /**
      * Class name to customise styling.
      */
-    className?: string,
+    className?: string;
     /**
      * Whether this panel is floating from the rest of the UI. ie. if it has
      * margin and a border.
      */
-    floating?: boolean,
+    floating?: boolean;
     /**
      * Whether the panel takes up all the space it can. Equivalent to the following CSS:
      *
      *  height: 100%;
      *  width: 100%;
      */
-    grow?: boolean,
+    grow?: boolean;
     /**
      * Heading for this panel. If this is anything other than a string then no
      * padding is applied to the heading.
      */
-    heading: React$Node,
+    heading: React.ReactNode;
     /**
      * Contents of the panel.
      */
-    children?: React$Node,
+    children?: React.ReactNode;
     /**
      * Whether the panel header and body have padding.
      */
-    padded?: boolean,
+    padded?: boolean;
     /**
      * Whether the panel can be collapsed. Defaults to true
      */
-    collapsable: boolean,
+    collapsable: boolean;
     /**
      * Initial state for panel if it is collapsable
      */
-    collapsed?: boolean,
+    collapsed?: boolean;
     /**
      * Heading for this panel. If this is anything other than a string then no
      * padding is applied to the heading.
      */
-    accessory?: React$Node,
+    accessory?: React.ReactNode;
-  |},
-  {
-    collapsed: boolean,
   },
+  {
+    collapsed: boolean;
+  }
 > {
-  static defaultProps: {|
+  static defaultProps: {
-    floating: boolean,
+    floating: boolean;
-    grow: boolean,
+    grow: boolean;
-    collapsable: boolean,
+    collapsable: boolean;
-  |} = {
+  } = {
     grow: false,
     floating: true,
     collapsable: true,
   };
 
-  static PanelContainer = styled(FlexColumn)(props => ({
+  static PanelContainer = styled(FlexColumn)(
-    flexShrink: 0,
+    (props: {floating?: boolean; collapsed?: boolean}) => ({
-    padding: props.floating ? 10 : 0,
+      flexShrink: 0,
-    borderBottom: props.collapsed ? 'none' : BORDER,
+      padding: props.floating ? 10 : 0,
-  }));
+      borderBottom: props.collapsed ? 'none' : BORDER,
+    }),
+  );
 
-  static PanelHeader = styled(FlexBox)(props => ({
+  static PanelHeader = styled(FlexBox)(
-    backgroundColor: '#f6f7f9',
+    (props: {floating?: boolean; padded?: boolean}) => ({
-    border: props.floating ? BORDER : 'none',
+      backgroundColor: '#f6f7f9',
-    borderBottom: BORDER,
+      border: props.floating ? BORDER : 'none',
-    borderTopLeftRadius: 2,
+      borderBottom: BORDER,
-    borderTopRightRadius: 2,
+      borderTopLeftRadius: 2,
-    justifyContent: 'space-between',
+      borderTopRightRadius: 2,
-    lineHeight: '27px',
+      justifyContent: 'space-between',
-    fontWeight: 500,
+      lineHeight: '27px',
-    flexShrink: 0,
+      fontWeight: 500,
-    padding: props.padded ? '0 10px' : 0,
+      flexShrink: 0,
-    '&:not(:first-child)': {
+      padding: props.padded ? '0 10px' : 0,
-      borderTop: BORDER,
+      '&:not(:first-child)': {
-    },
+        borderTop: BORDER,
-  }));
+      },
+    }),
+  );
 
-  static PanelBody = styled(FlexColumn)(props => ({
+  static PanelBody = styled(FlexColumn)(
-    backgroundColor: '#fff',
+    (props: {floating?: boolean; padded?: boolean}) => ({
-    border: props.floating ? BORDER : 'none',
+      backgroundColor: '#fff',
-    borderBottomLeftRadius: 2,
+      border: props.floating ? BORDER : 'none',
-    borderBottomRightRadius: 2,
+      borderBottomLeftRadius: 2,
-    borderTop: 'none',
+      borderBottomRightRadius: 2,
-    flexGrow: 1,
+      borderTop: 'none',
-    padding: props.padded ? 10 : 0,
+      flexGrow: 1,
-    overflow: 'visible',
+      padding: props.padded ? 10 : 0,
-  }));
+      overflow: 'visible',
+    }),
+  );
   state = {
     collapsed: this.props.collapsed == null ? false : this.props.collapsed,
   };

src/ui/components/elements-inspector/sidebar.js

@@ -9,7 +9,7 @@ import type {Element} from './ElementsInspector.js';
 import type {PluginClient} from '../../../plugin.tsx';
 import type Client from '../../../Client.tsx';
 import type {Logger} from '../../../fb-interfaces/Logger.js';
-import Panel from '../Panel.js';
+import Panel from '../Panel.tsx';
 import ManagedDataInspector from '../data-inspector/ManagedDataInspector.js';
 import {Component} from 'react';
 import {Console} from '../console.tsx';

src/ui/index.js

@@ -124,7 +124,7 @@ export {default as FlexRow} from './components/FlexRow.js';
 export {default as FlexColumn} from './components/FlexColumn.js';
 export {default as FlexCenter} from './components/FlexCenter.js';
 export {default as Toolbar, Spacer} from './components/Toolbar.js';
-export {default as Panel} from './components/Panel.js';
+export {default as Panel} from './components/Panel.tsx';
 export {default as Text} from './components/Text.js';
 export {default as TextParagraph} from './components/TextParagraph.js';
 export {default as Link} from './components/Link.js';