Sidebar components

Summary: _typescript_

Reviewed By: priteshrnandgaonkar

Differential Revision: D16828870

fbshipit-source-id: b343b28b3dd1700919df3fcfde659f7fe99cadff

src/ui/components/Sidebar.tsx

@@ -7,9 +7,16 @@
 
 import Interactive from './Interactive.js';
 import FlexColumn from './FlexColumn.js';
-import {colors} from './colors.tsx';
+import {colors} from './colors';
 import {Component} from 'react';
-import styled from '../styled/index.js';
+import styled from 'react-emotion';
+import {
+  BackgroundClipProperty,
+  HeightProperty,
+  WidthProperty,
+  BackgroundColorProperty,
+} from 'csstype';
+import React from 'react';
 
 const SidebarInteractiveContainer = styled(Interactive)({
   flex: 'none',
@@ -17,74 +24,81 @@ const SidebarInteractiveContainer = styled(Interactive)({
 
 type SidebarPosition = 'left' | 'top' | 'right' | 'bottom';
 
-const SidebarContainer = styled(FlexColumn)(props => ({
-  backgroundColor: props.backgroundColor || colors.macOSTitleBarBackgroundBlur,
-  borderLeft: props.position === 'right' ? '1px solid #b3b3b3' : 'none',
-  borderTop: props.position === 'bottom' ? '1px solid #b3b3b3' : 'none',
-  borderRight: props.position === 'left' ? '1px solid #b3b3b3' : 'none',
-  borderBottom: props.position === 'top' ? '1px solid #b3b3b3' : 'none',
-  height: '100%',
-  overflowX: 'hidden',
-  overflowY: 'auto',
-  textOverflow: props.overflow ? 'ellipsis' : 'auto',
-  whiteSpace: props.overflow ? 'nowrap' : 'normal',
-}));
+const SidebarContainer = styled(FlexColumn)(
+  (props: {
+    position: 'right' | 'top' | 'left' | 'bottom';
+    backgroundColor?: BackgroundClipProperty;
+    overflow?: boolean;
+  }) => ({
+    backgroundColor:
+      props.backgroundColor || colors.macOSTitleBarBackgroundBlur,
+    borderLeft: props.position === 'right' ? '1px solid #b3b3b3' : 'none',
+    borderTop: props.position === 'bottom' ? '1px solid #b3b3b3' : 'none',
+    borderRight: props.position === 'left' ? '1px solid #b3b3b3' : 'none',
+    borderBottom: props.position === 'top' ? '1px solid #b3b3b3' : 'none',
+    height: '100%',
+    overflowX: 'hidden',
+    overflowY: 'auto',
+    textOverflow: props.overflow ? 'ellipsis' : 'auto',
+    whiteSpace: props.overflow ? 'nowrap' : 'normal',
+  }),
+);
 
 type SidebarProps = {
   /**
    * Position of the sidebar.
    */
-  position: SidebarPosition,
+  position: SidebarPosition;
 
   /**
    * Default width of the sidebar.  Only used for left/right sidebars.
    */
-  width?: number,
+  width?: number;
   /**
    * Minimum sidebar width. Only used for left/right sidebars.
    */
-  minWidth?: number,
+  minWidth?: number;
   /**
    * Maximum sidebar width. Only used for left/right sidebars.
    */
-  maxWidth?: number,
+  maxWidth?: number;
 
   /**
    * Default height of the sidebar.
    */
-  height?: number,
+  height?: number;
   /**
    * Minimum sidebar height. Only used for top/bottom sidebars.
    */
-  minHeight?: number,
+  minHeight?: number;
   /**
    * Maximum sidebar height. Only used for top/bottom sidebars.
    */
-  maxHeight?: number,
+  maxHeight?: number;
 
   /**
    * Background color.
    */
-  backgroundColor?: string,
+  backgroundColor?: BackgroundColorProperty;
   /**
    * Callback when the sidebar size ahs changed.
    */
-  onResize?: (width: number, height: number) => void,
+  onResize?: (width: number, height: number) => void;
   /**
    * Contents of the sidebar.
    */
-  children?: React$Node,
+  children?: React.ReactNode;
   /**
    * Class name to customise styling.
    */
-  className?: string,
+  className?: string;
 };
 
-type SidebarState = {|
-  width?: number,
-  height?: number,
-  userChange: boolean,
-|};
+type SidebarState = {
+  width?: WidthProperty<number>;
+  height?: HeightProperty<number>;
+  userChange: boolean;
+};
 
 /**
  * A resizable sidebar.
@@ -120,7 +134,12 @@ export default class Sidebar extends Component<SidebarProps, SidebarState> {
 
   render() {
     const {backgroundColor, onResize, position, children} = this.props;
-    let height, minHeight, maxHeight, width, minWidth, maxWidth;
+    let height: number;
+    let minHeight: number;
+    let maxHeight: number;
+    let width: number;
+    let minWidth: number;
+    let maxWidth: number;
 
     const resizable: {[key: string]: boolean} = {};
     if (position === 'left') {

src/ui/components/SidebarLabel.tsx

@@ -5,9 +5,9 @@
  * @format
  */
 
-import {colors} from './colors.tsx';
+import {colors} from './colors';
 import Label from './Label.js';
-import styled from '../styled/index.js';
+import styled from 'react-emotion';
 
 export default styled(Label)({
   color: colors.blackAlpha30,

src/ui/index.js

@@ -116,8 +116,8 @@ export {default as View} from './components/View.js';
 export {default as ViewWithSize} from './components/ViewWithSize.js';
 export {default as Block} from './components/Block.js';
 export {default as FocusableBox} from './components/FocusableBox.js';
-export {default as Sidebar} from './components/Sidebar.js';
-export {default as SidebarLabel} from './components/SidebarLabel.js';
+export {default as Sidebar} from './components/Sidebar.tsx';
+export {default as SidebarLabel} from './components/SidebarLabel.tsx';
 export {default as Box} from './components/Box.js';
 export {default as FlexBox} from './components/FlexBox.js';
 export {default as FlexRow} from './components/FlexRow.js';