ToggleSwitch

Summary: _typescript_

Reviewed By: priteshrnandgaonkar

Differential Revision: D16830056

fbshipit-source-id: 8bc1e93d781691a6f20f842422b06ec281cf688f

src/ui/components/ToggleSwitch.tsx

@@ -6,11 +6,11 @@
  */
 
 import React from 'react';
-import styled from '../styled/index.js';
-import {colors} from './colors.tsx';
-import Text from './Text.tsx';
+import styled from 'react-emotion';
+import {colors} from './colors';
+import Text from './Text';
 
-export const StyledButton = styled('div')(props => ({
+export const StyledButton = styled('div')((props: {toggled: boolean}) => ({
   cursor: 'pointer',
   width: '30px',
   height: '16px',
@@ -41,13 +41,13 @@ type Props = {
   /**
    * onClick handler.
    */
-  onClick?: (event: SyntheticMouseEvent<>) => void,
+  onClick?: (event: React.MouseEvent) => void;
   /**
    * whether the button is toggled
    */
-  toggled?: boolean,
-  className?: string,
-  label?: string,
+  toggled?: boolean;
+  className?: string;
+  label?: string;
 };
 
 /**

src/ui/components/searchable/Searchable.js

@@ -18,7 +18,7 @@ import Glyph from '../Glyph.js';
 import FilterToken from './FilterToken.js';
 import styled from '../../styled/index.js';
 import debounce from 'lodash.debounce';
-import ToggleSwitch from '../ToggleSwitch';
+import ToggleSwitch from '../ToggleSwitch.tsx';
 
 const SearchBar = styled(Toolbar)({
   height: 42,

src/ui/index.js

@@ -7,7 +7,7 @@
 
 export {default as styled} from 'react-emotion';
 export {default as Button} from './components/Button.js';
-export {default as ToggleButton} from './components/ToggleSwitch.js';
+export {default as ToggleButton} from './components/ToggleSwitch.tsx';
 export {
   default as ButtonNavigationGroup,
 } from './components/ButtonNavigationGroup.js';