convert to emotion

Summary: My benchmarks have shown react-emotion to be faster than the current implementation of `styled`. For this reason, I am converting all styling to [emotion](https://emotion.sh). Benchmark results: {F136839093} The syntax is very similar between the two libraries. The main difference is that emotion only allows a single function for the whole style attribute, whereas the old implementation had functions for every style-attirbute. Before: ``` { color: props => props.color, fontSize: props => props.size, } ``` After: ``` props => ({ color: props.color, fontSize: props.size, }) ``` Reviewed By: jknoxville Differential Revision: D9479893 fbshipit-source-id: 2c39e4618f7e52ceacb67bbec8ae26114025723f
2018-08-23 09:32:12 -07:00
parent 4151c73409
commit 726966fdc0
88 changed files with 886 additions and 4068 deletions
--- a/src/chrome/AutoUpdateVersion.js
+++ b/src/chrome/AutoUpdateVersion.js
@@ -5,19 +5,27 @@
 * @format
 */

-import {FlexRow, Text, colors, LoadingIndicator, Glyph, Component} from 'sonar';
+import {
+  FlexRow,
+  Text,
+  colors,
+  LoadingIndicator,
+  Glyph,
+  Component,
+  styled,
+} from 'sonar';
 import {remote} from 'electron';
 import isProduction from '../utils/isProduction.js';
 import config from '../fb-stubs/config.js';
 const version = remote.app.getVersion();

-const VersionText = Text.extends({
+const VersionText = styled(Text)({
  color: colors.light50,
  marginLeft: 4,
  marginTop: 2,
 });

-const Container = FlexRow.extends({
+const Container = styled(FlexRow)({
  alignItems: 'center',
 });

--- a/src/chrome/BugReporterDialog.js
+++ b/src/chrome/BugReporterDialog.js
@@ -20,7 +20,7 @@ import {
  styled,
 } from 'sonar';

-const Container = FlexColumn.extends({
+const Container = styled(FlexColumn)({
  padding: 10,
 });

@@ -29,7 +29,7 @@ const textareaStyle = {
  marginBottom: 10,
 };

-const DialogContainer = styled.view({
+const DialogContainer = styled('div')({
  width: 400,
  height: 300,
  position: 'absolute',
@@ -45,25 +45,25 @@ const DialogContainer = styled.view({
  boxShadow: '0 1px 10px rgba(0, 0, 0, 0.1)',
 });

-const TitleInput = Input.extends({
+const TitleInput = styled(Input)({
  ...textareaStyle,
  height: 30,
 });

-const DescriptionTextarea = Textarea.extends({
+const DescriptionTextarea = styled(Textarea)({
  ...textareaStyle,
  flexGrow: 1,
 });

-const SubmitButtonContainer = styled.view({
+const SubmitButtonContainer = styled('div')({
  marginLeft: 'auto',
 });

-const Footer = FlexRow.extends({
+const Footer = styled(FlexRow)({
  lineHeight: '24px',
 });

-const CloseDoneButton = Button.extends({
+const CloseDoneButton = styled(Button)({
  width: 50,
  margin: '10px auto',
 });
--- a/src/chrome/DevicesList.js
+++ b/src/chrome/DevicesList.js
@@ -16,7 +16,7 @@ import {
  colors,
 } from 'sonar';

-const Heading = Text.extends({
+const Heading = styled(Text)({
  display: 'block',
  backgroundColor: colors.white,
  color: colors.light30,
@@ -26,7 +26,7 @@ const Heading = Text.extends({
  padding: '4px 8px 0',
 });

-const PopoverItem = FlexRow.extends({
+const PopoverItem = styled(FlexRow)({
  alignItems: 'center',
  borderBottom: `1px solid ${colors.light05}`,
  height: 50,
@@ -35,7 +35,7 @@ const PopoverItem = FlexRow.extends({
  },
 });

-const ItemTitle = Text.extends({
+const ItemTitle = styled(Text)({
  display: 'block',
  fontSize: 14,
  fontWeight: 400,
@@ -46,7 +46,7 @@ const ItemTitle = Text.extends({
  marginBottom: 1,
 });

-const ItemSubtitle = Text.extends({
+const ItemSubtitle = styled(Text)({
  display: 'block',
  fontWeight: 400,
  fontSize: 11,
@@ -57,20 +57,20 @@ const ItemSubtitle = Text.extends({
  whiteSpace: 'nowrap',
 });

-const ItemImage = FlexBox.extends({
+const ItemImage = styled(FlexBox)({
  alignItems: 'center',
  justifyContent: 'center',
  width: 40,
  flexShrink: 0,
 });

-const ItemContent = styled.view({
+const ItemContent = styled('div')({
  minWidth: 0,
  paddingRight: 5,
  flexGrow: 1,
 });

-const Section = styled.view({
+const Section = styled('div')({
  maxWidth: 260,
  borderBottom: `1px solid ${colors.light05}`,
  '&:last-child': {
@@ -78,7 +78,7 @@ const Section = styled.view({
  },
 });

-const Action = Button.extends({
+const Action = styled(Button)({
  border: `1px solid ${colors.macOSTitleBarButtonBorder}`,
  background: 'transparent',
  color: colors.macOSTitleBarIconSelected,
--- a/src/chrome/ErrorBar.js
+++ b/src/chrome/ErrorBar.js
@@ -7,7 +7,7 @@

 import {styled, colors} from 'sonar';

-const ErrorBarContainer = styled.view({
+const ErrorBarContainer = styled('div')({
  backgroundColor: colors.cherry,
  bottom: 0,
  color: '#fff',
--- a/src/chrome/MainSidebar.js
+++ b/src/chrome/MainSidebar.js
@@ -17,11 +17,11 @@ import {
  Component,
  Sidebar,
  FlexBox,
-  ClickableListItem,
  colors,
  brandColors,
  Text,
  Glyph,
+  styled,
 } from 'sonar';
 import React from 'react';
 import {devicePlugins} from '../device-plugins/index.js';
@@ -29,15 +29,22 @@ import plugins from '../plugins/index.js';
 import {selectPlugin} from '../reducers/connections.js';
 import {connect} from 'react-redux';

-const CustomClickableListItem = ClickableListItem.extends({
+const ListItem = styled('div')(({active}) => ({
  paddingLeft: 10,
  display: 'flex',
  alignItems: 'center',
  marginBottom: 2,
  flexShrink: 0,
-});
+  backgroundColor: active ? colors.macOSTitleBarIconSelected : 'none',
+  color: active ? colors.white : colors.macOSSidebarSectionItem,
+  lineHeight: '25px',
+  padding: '0 10px',
+  '&[disabled]': {
+    color: 'rgba(0, 0, 0, 0.5)',
+  },
+}));

-const SidebarHeader = FlexBox.extends({
+const SidebarHeader = styled(FlexBox)({
  display: 'block',
  alignItems: 'center',
  padding: 3,
@@ -51,23 +58,18 @@ const SidebarHeader = FlexBox.extends({
  flexShrink: 0,
 });

-const PluginShape = FlexBox.extends(
-  {
-    marginRight: 5,
-    backgroundColor: props => props.backgroundColor,
-    borderRadius: 3,
-    flexShrink: 0,
-    width: 18,
-    height: 18,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  {
-    ignoreAttributes: ['backgroundColor'],
-  },
-);
+const PluginShape = styled(FlexBox)(({backgroundColor}) => ({
+  marginRight: 5,
+  backgroundColor,
+  borderRadius: 3,
+  flexShrink: 0,
+  width: 18,
+  height: 18,
+  justifyContent: 'center',
+  alignItems: 'center',
+}));

-const PluginName = Text.extends({
+const PluginName = styled(Text)({
  minWidth: 0,
  textOverflow: 'ellipsis',
  whiteSpace: 'nowrap',
@@ -75,17 +77,19 @@ const PluginName = Text.extends({
 });

 function PluginIcon({
+  isActive,
  backgroundColor,
  name,
  color,
 }: {
+  isActive: boolean,
  backgroundColor: string,
  name: string,
  color: string,
 }) {
  return (
    <PluginShape backgroundColor={backgroundColor}>
-      <Glyph size={12} name={name} color={color} />
+      <Glyph size={12} name={name} color={isActive ? colors.white : color} />
    </PluginShape>
  );
 }
@@ -118,14 +122,15 @@ class PluginSidebarListItem extends Component<{
    }

    return (
-      <CustomClickableListItem active={isActive} onClick={this.props.onClick}>
+      <ListItem active={isActive} onClick={this.props.onClick}>
        <PluginIcon
+          isActive={isActive}
          name={plugin.icon}
          backgroundColor={iconColor}
          color={colors.white}
        />
        <PluginName>{plugin.title}</PluginName>
-      </CustomClickableListItem>
+      </ListItem>
    );
  }
 }
--- a/src/chrome/PluginManager.js
+++ b/src/chrome/PluginManager.js
@@ -63,18 +63,18 @@ type State = {
  searchCompleted: boolean,
 };

-const Container = FlexBox.extends({
+const Container = styled(FlexBox)({
  width: '100%',
  flexGrow: 1,
  background: colors.light02,
  overflowY: 'scroll',
 });

-const Title = Text.extends({
+const Title = styled(Text)({
  fontWeight: 500,
 });

-const Plugin = FlexColumn.extends({
+const Plugin = styled(FlexColumn)({
  backgroundColor: colors.white,
  borderRadius: 4,
  padding: 15,
@@ -82,20 +82,20 @@ const Plugin = FlexColumn.extends({
  boxShadow: '0 1px 2px rgba(0,0,0,0.05)',
 });

-const SectionTitle = styled.text({
+const SectionTitle = styled('span')({
  fontWeight: 'bold',
  fontSize: 24,
  margin: 15,
  marginLeft: 20,
 });

-const Loading = FlexBox.extends({
+const Loading = styled(FlexBox)({
  padding: 50,
  alignItems: 'center',
  justifyContent: 'center',
 });

-const RestartRequired = FlexBox.extends({
+const RestartRequired = styled(FlexBox)({
  textAlign: 'center',
  justifyContent: 'center',
  fontWeight: 500,
@@ -105,22 +105,22 @@ const RestartRequired = FlexBox.extends({
  cursor: 'pointer',
 });

-const TitleRow = FlexRow.extends({
+const TitleRow = styled(FlexRow)({
  alignItems: 'center',
  marginBottom: 10,
  fontSize: '1.1em',
 });

-const Description = FlexRow.extends({
+const Description = styled(FlexRow)({
  marginBottom: 15,
  lineHeight: '130%',
 });

-const PluginGlyph = Glyph.extends({
+const PluginGlyph = styled(Glyph)({
  marginRight: 5,
 });

-const PluginLoading = LoadingIndicator.extends({
+const PluginLoading = styled(LoadingIndicator)({
  marginLeft: 5,
  marginTop: 5,
 });
--- a/src/chrome/Popover.js
+++ b/src/chrome/Popover.js
@@ -16,7 +16,7 @@ import {
  colors,
 } from 'sonar';

-const Anchor = styled.image({
+const Anchor = styled('img')({
  zIndex: 6,
  position: 'absolute',
  bottom: 0,
@@ -24,7 +24,7 @@ const Anchor = styled.image({
  transform: 'translate(-50%, calc(100% + 2px))',
 });

-const PopoverContainer = FlexColumn.extends({
+const PopoverContainer = styled(FlexColumn)({
  backgroundColor: colors.white,
  borderRadius: 7,
  border: '1px solid rgba(0,0,0,0.3)',
@@ -50,7 +50,7 @@ const PopoverContainer = FlexColumn.extends({
  },
 });

-const Heading = Text.extends({
+const Heading = styled(Text)({
  display: 'block',
  backgroundColor: colors.white,
  color: colors.light30,
@@ -60,7 +60,7 @@ const Heading = Text.extends({
  padding: '4px 8px 0',
 });

-const PopoverItem = FlexRow.extends({
+const PopoverItem = styled(FlexRow)({
  alignItems: 'center',
  borderBottom: `1px solid ${colors.light05}`,
  height: 50,
@@ -69,7 +69,7 @@ const PopoverItem = FlexRow.extends({
  },
 });

-const ItemTitle = Text.extends({
+const ItemTitle = styled(Text)({
  display: 'block',
  fontSize: 14,
  fontWeight: 400,
@@ -80,7 +80,7 @@ const ItemTitle = Text.extends({
  marginBottom: 1,
 });

-const ItemSubtitle = Text.extends({
+const ItemSubtitle = styled(Text)({
  display: 'block',
  fontWeight: 400,
  fontSize: 11,
@@ -91,27 +91,27 @@ const ItemSubtitle = Text.extends({
  whiteSpace: 'nowrap',
 });

-const ItemImage = FlexBox.extends({
+const ItemImage = styled(FlexBox)({
  alignItems: 'center',
  justifyContent: 'center',
  width: 40,
  flexShrink: 0,
 });

-const ItemContent = styled.view({
+const ItemContent = styled('div')({
  minWidth: 0,
  paddingRight: 5,
  flexGrow: 1,
 });

-const Section = styled.view({
+const Section = styled('div')({
  borderBottom: `1px solid ${colors.light05}`,
  '&:last-child': {
    borderBottom: 'none',
  },
 });

-const Action = Button.extends({
+const Action = styled(Button)({
  border: `1px solid ${colors.macOSTitleBarButtonBorder}`,
  background: 'transparent',
  color: colors.macOSTitleBarIconSelected,
--- a/src/chrome/SonarTitleBar.js
+++ b/src/chrome/SonarTitleBar.js
@@ -13,6 +13,7 @@ import {
  Component,
  Spacer,
  GK,
+  styled,
 } from 'sonar';
 import {connect} from 'react-redux';
 import {
@@ -26,34 +27,24 @@ import ScreenCaptureButtons from './ScreenCaptureButtons.js';
 import AutoUpdateVersion from './AutoUpdateVersion.js';
 import config from '../fb-stubs/config.js';

-const TitleBar = FlexRow.extends(
-  {
-    background: props =>
-      props.focused
-        ? `linear-gradient(to bottom, ${
-            colors.macOSTitleBarBackgroundTop
-          } 0%, ${colors.macOSTitleBarBackgroundBottom} 100%)`
-        : colors.macOSTitleBarBackgroundBlur,
-    borderBottom: props =>
-      `1px solid ${
-        props.focused
-          ? colors.macOSTitleBarBorder
-          : colors.macOSTitleBarBorderBlur
-      }`,
-    height: 38,
-    flexShrink: 0,
-    width: '100%',
-    alignItems: 'center',
-    paddingLeft: 80,
-    paddingRight: 10,
-    justifyContent: 'space-between',
-    // $FlowFixMe
-    WebkitAppRegion: 'drag',
-  },
-  {
-    ignoreAttributes: ['focused'],
-  },
-);
+const TitleBar = styled(FlexRow)(({focused}) => ({
+  background: focused
+    ? `linear-gradient(to bottom, ${colors.macOSTitleBarBackgroundTop} 0%, ${
+        colors.macOSTitleBarBackgroundBottom
+      } 100%)`
+    : colors.macOSTitleBarBackgroundBlur,
+  borderBottom: `1px solid ${
+    focused ? colors.macOSTitleBarBorder : colors.macOSTitleBarBorderBlur
+  }`,
+  height: 38,
+  flexShrink: 0,
+  width: '100%',
+  alignItems: 'center',
+  paddingLeft: 80,
+  paddingRight: 10,
+  justifyContent: 'space-between',
+  WebkitAppRegion: 'drag',
+}));

 type Props = {|
  windowIsFocused: boolean,
--- a/src/chrome/Version.js
+++ b/src/chrome/Version.js
@@ -5,7 +5,7 @@
 * @format
 */

-import {Component, FlexRow, colors, LoadingIndicator} from 'sonar';
+import {Component, FlexRow, colors, LoadingIndicator, styled} from 'sonar';
 import {version} from '../../package.json';
 import {remote} from 'electron';
 import * as path from 'path';
@@ -24,7 +24,7 @@ export default class Version extends Component<{}, VersionState> {
    status: 'unknown',
  };

-  static Container = FlexRow.extends({
+  static Container = styled(FlexRow)({
    alignItems: 'center',
    marginRight: 7,
    marginLeft: 7,
@@ -32,7 +32,7 @@ export default class Version extends Component<{}, VersionState> {
    color: colors.light50,
  });

-  static UpdatedContainer = FlexRow.extends({
+  static UpdatedContainer = styled(FlexRow)({
    backgroundColor: colors.blackAlpha10,
    borderRadius: '999em',
    padding: '2px 6px',
--- a/src/chrome/WelcomeScreen.js
+++ b/src/chrome/WelcomeScreen.js
@@ -18,7 +18,7 @@ import {
 import isProduction from '../utils/isProduction.js';
 import {shell, remote} from 'electron';

-const Container = FlexColumn.extends({
+const Container = styled(FlexColumn)({
  height: '100%',
  width: '100%',
  justifyContent: 'center',
@@ -26,23 +26,18 @@ const Container = FlexColumn.extends({
  backgroundColor: colors.light02,
 });

-const Welcome = FlexColumn.extends(
-  {
-    width: 460,
-    background: colors.white,
-    borderRadius: 10,
-    boxShadow: '0 1px 3px rgba(0,0,0,0.25)',
-    overflow: 'hidden',
-    opacity: props => (props.isMounted ? 1 : 0),
-    transform: props => `translateY(${props.isMounted ? 0 : 20}px)`,
-    transition: '0.6s all ease-out',
-  },
-  {
-    ignoreAttributes: ['isMounted'],
-  },
-);
+const Welcome = styled(FlexColumn)(({isMounted}) => ({
+  width: 460,
+  background: colors.white,
+  borderRadius: 10,
+  boxShadow: '0 1px 3px rgba(0,0,0,0.25)',
+  overflow: 'hidden',
+  opacity: isMounted ? 1 : 0,
+  transform: `translateY(${isMounted ? 0 : 20}px)`,
+  transition: '0.6s all ease-out',
+}));

-const Title = Text.extends({
+const Title = styled(Text)({
  fontSize: 24,
  fontWeight: 300,
  textAlign: 'center',
@@ -50,7 +45,7 @@ const Title = Text.extends({
  marginBottom: 16,
 });

-const Version = Text.extends({
+const Version = styled(Text)({
  textAlign: 'center',
  fontSize: 11,
  fontWeight: 300,
@@ -58,7 +53,7 @@ const Version = Text.extends({
  marginBottom: 60,
 });

-const Item = FlexRow.extends({
+const Item = styled(FlexRow)({
  padding: 10,
  cursor: 'pointer',
  alignItems: 'center',
@@ -69,23 +64,23 @@ const Item = FlexRow.extends({
  },
 });

-const ItemTitle = Text.extends({
+const ItemTitle = styled(Text)({
  color: colors.light50,
  fontSize: 15,
 });

-const ItemSubTitle = Text.extends({
+const ItemSubTitle = styled(Text)({
  color: colors.light30,
  fontSize: 11,
  marginTop: 2,
 });

-const Icon = Glyph.extends({
+const Icon = styled(Glyph)({
  marginRight: 11,
  marginLeft: 6,
 });

-const Logo = styled.image({
+const Logo = styled('img')({
  width: 128,
  height: 128,
  alignSelf: 'center',