Toolbar

Summary: _typescript_

Reviewed By: priteshrnandgaonkar

Differential Revision: D16830060

fbshipit-source-id: d9570a96fee61d2d6794c41a15aa8cbba23ae7c1

src/ui/components/Toolbar.js

@@ -1,38 +0,0 @@
-/**
- * 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 {colors} from './colors.tsx';
-import FlexRow from './FlexRow.js';
-import FlexBox from './FlexBox.js';
-import styled from '../styled/index.js';
-
-/**
- * A toolbar.
- */
-const Toolbar = styled(FlexRow)(props => ({
-  backgroundColor: colors.light02,
-  borderBottom:
-    props.position === 'bottom'
-      ? 'none'
-      : `1px solid ${colors.sectionHeaderBorder}`,
-  borderTop:
-    props.position === 'bottom'
-      ? `1px solid ${colors.sectionHeaderBorder}`
-      : 'none',
-  flexShrink: 0,
-  height: props.compact ? 28 : 42,
-  lineHeight: '32px',
-  alignItems: 'center',
-  padding: 6,
-  width: '100%',
-}));
-
-export const Spacer = styled(FlexBox)({
-  flexGrow: 1,
-});
-
-export default Toolbar;

src/ui/components/Toolbar.tsx

@@ -0,0 +1,40 @@
+/**
+ * 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 {colors} from './colors';
+import FlexRow from './FlexRow';
+import FlexBox from './FlexBox';
+import styled from 'react-emotion';
+
+/**
+ * A toolbar.
+ */
+const Toolbar = styled(FlexRow)(
+  (props: {position?: 'bottom' | 'top'; compact?: boolean}) => ({
+    backgroundColor: colors.light02,
+    borderBottom:
+      props.position === 'bottom'
+        ? 'none'
+        : `1px solid ${colors.sectionHeaderBorder}`,
+    borderTop:
+      props.position === 'bottom'
+        ? `1px solid ${colors.sectionHeaderBorder}`
+        : 'none',
+    flexShrink: 0,
+    height: props.compact ? 28 : 42,
+    lineHeight: '32px',
+    alignItems: 'center',
+    padding: 6,
+    width: '100%',
+  }),
+);
+
+export const Spacer = styled(FlexBox)({
+  flexGrow: 1,
+});
+
+export default Toolbar;

src/ui/components/searchable/Searchable.js

@@ -8,7 +8,7 @@
 import type {Filter} from 'flipper';
 import type {TableColumns} from '../table/types';
 import {PureComponent} from 'react';
-import Toolbar from '../Toolbar.js';
+import Toolbar from '../Toolbar.tsx';
 import FlexRow from '../FlexRow.js';
 import Input from '../Input.js';
 import {colors} from '../colors.tsx';

src/ui/index.js

@@ -123,7 +123,7 @@ export {default as FlexBox} from './components/FlexBox.js';
 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 Toolbar, Spacer} from './components/Toolbar.tsx';
 export {default as Panel} from './components/Panel.tsx';
 export {default as Text} from './components/Text.tsx';
 export {default as TextParagraph} from './components/TextParagraph.tsx';