Use Ant design for buttons if Sandy is enabled

Summary: The Flipper `Button` component now uses Ant.design under the hood if available. This is detected using context

Reviewed By: cekkaewnumchai

Differential Revision: D23813166

fbshipit-source-id: 489a34d55c0b69d7b5bcd30f4275b89d0bb22c0d

desktop/app/src/sandy-chrome/SandyApp.tsx

@@ -18,6 +18,7 @@ import {LeftRail} from './LeftRail';
 import {TemporarilyTitlebar} from './TemporarilyTitlebar';
 import {registerStartupTime} from '../App';
 import {useStore} from '../utils/useStore';
+import {SandyContext} from './SandyContext';
 
 export function SandyApp({logger}: {logger: Logger}) {
   useEffect(() => {
@@ -31,6 +32,7 @@ export function SandyApp({logger}: {logger: Logger}) {
   );
 
   return (
+    <SandyContext.Provider value={true}>
       <Layout.Top>
         <TemporarilyTitlebar />
         <Layout.Left
@@ -60,6 +62,7 @@ export function SandyApp({logger}: {logger: Logger}) {
           </MainContainer>
         </Layout.Left>
       </Layout.Top>
+    </SandyContext.Provider>
   );
 }
 

desktop/app/src/sandy-chrome/SandyContext.tsx

@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import {createContext, useContext} from 'react';
+
+export const SandyContext = createContext(false);
+
+export function useIsSandy(): boolean {
+  return useContext(SandyContext);
+}

desktop/app/src/ui/components/Button.tsx

@@ -10,12 +10,16 @@
 import React, {useContext, useState, useRef, useCallback} from 'react';
 import electron, {MenuItemConstructorOptions} from 'electron';
 import styled from '@emotion/styled';
-import {colors} from './colors';
 import {findDOMNode} from 'react-dom';
 import {keyframes} from 'emotion';
+import {Button as AntdButton} from 'antd';
+
+import {colors} from './colors';
 import Glyph, {IconSize} from './Glyph';
 import {ButtonGroupContext} from './ButtonGroup';
 import {useStore} from '../../utils/useStore';
+import {useIsSandy} from '../../sandy-chrome/SandyContext';
+import type {ButtonProps} from 'antd/lib/button';
 
 type ButtonType = 'primary' | 'success' | 'warning' | 'danger';
 
@@ -254,7 +258,7 @@ type Props = {
    * Whether the button should have additional padding left and right.
    */
   padded?: boolean;
-} & React.HTMLProps<HTMLDivElement>;
+} & Omit<ButtonProps, 'type'>;
 
 /**
  * A simple button, used in many parts of the application.
@@ -264,10 +268,11 @@ export default function Button(props: Props) {
     (state) => state.application.windowIsFocused,
   );
   const inButtonGroup = useContext(ButtonGroupContext);
+  const isSandy = useIsSandy();
   const [active, setActive] = useState(false);
   const [wasClosed, setWasClosed] = useState(false);
 
-  const _ref = useRef<React.Component<typeof StyledButton>>();
+  const _ref = useRef<any>();
 
   const onMouseDown = useCallback(
     (e: React.MouseEvent) => {
@@ -354,7 +359,19 @@ export default function Button(props: Props) {
     );
   }
 
-  return (
+  return isSandy ? (
+    <AntdButton
+      {...restProps}
+      type={props.type === 'primary' ? 'primary' : 'default'}
+      danger={props.type === 'danger'}
+      ref={_ref}
+      onClick={onClick}
+      onMouseDown={onMouseDown}
+      onMouseUp={onMouseUp}
+      icon={iconComponent}>
+      {children}
+    </AntdButton>
+  ) : (
     <StyledButton
       {...restProps}
       ref={_ref as any}