Desktop Toolbar

Summary: _typescript_

Reviewed By: priteshrnandgaonkar

Differential Revision: D16828106

fbshipit-source-id: 449b238ac709bbbd26086a054cd9b996385bd29b

src/ui/components/desktop-toolbar.tsx

@@ -5,10 +5,9 @@
  * @format
  */
 
-import styled from '../styled/index.js';
+import styled from 'react-emotion';
-import {colors, darkColors} from './colors.js';
+import {colors, darkColors} from './colors';
-
+import React from 'react';
-const React = require('react');
 
 const DesktopDropdownContainer = styled('div')({
   borderBottom: `1px solid ${darkColors.dividers}`,
@@ -27,10 +26,10 @@ const DesktopDropdownContainer = styled('div')({
   },
 });
 
-export function DesktopDropdown(props: {|
+export function DesktopDropdown(props: {
-  deactivate?: () => void,
+  deactivate?: () => void;
-  children?: any,
+  children?: any;
-|}) {
+}) {
   return (
     <DesktopDropdownContainer>
       {React.Children.map(props.children, child => {
@@ -45,28 +44,30 @@ export function DesktopDropdown(props: {|
   );
 }
 
-const DesktopDropdownItemContainer = styled('div')(props => ({
+const DesktopDropdownItemContainer = styled('div')(
-  listStyle: 'none',
+  (props: {onClick?: Function; onHover?: Function}) => ({
-  opacity: props.onClick || props.onHover ? 1 : 0.5,
+    listStyle: 'none',
-  padding: '0 20px',
+    opacity: props.onClick || props.onHover ? 1 : 0.5,
-  '&:hover': {
+    padding: '0 20px',
-    backgroundColor: props.onClick || props.onHover ? colors.highlight : '',
+    '&:hover': {
-    color: props.onClick || props.onHover ? '#fff' : 'inherit',
+      backgroundColor: props.onClick || props.onHover ? colors.highlight : '',
-  },
+      color: props.onClick || props.onHover ? '#fff' : 'inherit',
-}));
+    },
+  }),
+);
 
-type DesktopDropdownItemState = {|hovered: boolean|};
+type DesktopDropdownItemState = {hovered: boolean};
 
 type DesktopDropdownItemProps = {
-  onClick?: false | ?((event: SyntheticMouseEvent<>) => void),
+  onClick?: false | ((event: React.MouseEvent) => void);
-  onHover?: false | ?(() => React$Node),
+  onHover?: false | (() => React.ReactNode);
-  children?: React$Node,
+  children?: React.ReactNode;
-  deactivate?: () => void,
+  deactivate?: () => void;
 };
 
 export class DesktopDropdownItem extends React.Component<
   DesktopDropdownItemProps,
-  DesktopDropdownItemState,
+  DesktopDropdownItemState
 > {
   constructor(props: DesktopDropdownItemProps, context: Object) {
     super(props, context);
@@ -81,7 +82,7 @@ export class DesktopDropdownItem extends React.Component<
     this.setState({hovered: false});
   };
 
-  onClick = (event: SyntheticMouseEvent<>) => {
+  onClick = (event: React.MouseEvent) => {
     const {deactivate, onClick} = this.props;
     if (typeof onClick === 'function') {
       if (deactivate) {

src/ui/index.js

@@ -109,7 +109,7 @@ export {
   DesktopDropdownItem,
   DesktopDropdownSelectedItem,
   DesktopDropdown,
-} from './components/desktop-toolbar.js';
+} from './components/desktop-toolbar.tsx';
 
 // utility elements
 export {default as View} from './components/View.js';