From a0d46bbb53ac97123553dd34ab1ac954b81f0c05 Mon Sep 17 00:00:00 2001
From: Michel Weststrate <mweststrate@fb.com>
Date: Tue, 22 Sep 2020 12:01:46 -0700
Subject: [PATCH] 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     | 61 ++++++++++---------
 desktop/app/src/sandy-chrome/SandyContext.tsx | 16 +++++
 desktop/app/src/ui/components/Button.tsx      | 25 ++++++--
 3 files changed, 69 insertions(+), 33 deletions(-)
 create mode 100644 desktop/app/src/sandy-chrome/SandyContext.tsx

diff --git a/desktop/app/src/sandy-chrome/SandyApp.tsx b/desktop/app/src/sandy-chrome/SandyApp.tsx
index f3509376e..9a0f714d9 100644
--- a/desktop/app/src/sandy-chrome/SandyApp.tsx
+++ b/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,35 +32,37 @@ export function SandyApp({logger}: {logger: Logger}) {
   );
 
   return (
-    <Layout.Top>
-      <TemporarilyTitlebar />
-      <Layout.Left
-        initialSize={mainMenuVisible ? 348 : undefined}
-        minSize={200}>
-        <LeftMenu collapsed={!mainMenuVisible}>
-          <LeftRail />
-          {mainMenuVisible && (
-            <div style={{background: theme.backgroundDefault, width: '100%'}}>
-              LeftMenu
-            </div>
-          )}
-        </LeftMenu>
-        <MainContainer>
-          <Layout.Right initialSize={300} minSize={200}>
-            <MainContentWrapper>
-              <ContentContainer>
-                <TemporarilyContent />
-              </ContentContainer>
-            </MainContentWrapper>
-            <MainContentWrapper>
-              <ContentContainer>
-                <RightMenu />
-              </ContentContainer>
-            </MainContentWrapper>
-          </Layout.Right>
-        </MainContainer>
-      </Layout.Left>
-    </Layout.Top>
+    <SandyContext.Provider value={true}>
+      <Layout.Top>
+        <TemporarilyTitlebar />
+        <Layout.Left
+          initialSize={mainMenuVisible ? 348 : undefined}
+          minSize={200}>
+          <LeftMenu collapsed={!mainMenuVisible}>
+            <LeftRail />
+            {mainMenuVisible && (
+              <div style={{background: theme.backgroundDefault, width: '100%'}}>
+                LeftMenu
+              </div>
+            )}
+          </LeftMenu>
+          <MainContainer>
+            <Layout.Right initialSize={300} minSize={200}>
+              <MainContentWrapper>
+                <ContentContainer>
+                  <TemporarilyContent />
+                </ContentContainer>
+              </MainContentWrapper>
+              <MainContentWrapper>
+                <ContentContainer>
+                  <RightMenu />
+                </ContentContainer>
+              </MainContentWrapper>
+            </Layout.Right>
+          </MainContainer>
+        </Layout.Left>
+      </Layout.Top>
+    </SandyContext.Provider>
   );
 }
 
diff --git a/desktop/app/src/sandy-chrome/SandyContext.tsx b/desktop/app/src/sandy-chrome/SandyContext.tsx
new file mode 100644
index 000000000..3a263ce21
--- /dev/null
+++ b/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);
+}
diff --git a/desktop/app/src/ui/components/Button.tsx b/desktop/app/src/ui/components/Button.tsx
index cca6759df..dfcb579b7 100644
--- a/desktop/app/src/ui/components/Button.tsx
+++ b/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}