jens/flipper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use Ant design for buttons if Sandy is enabled

Browse Source 
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
This commit is contained in:
Michel Weststrate
2020-09-22 12:01:46 -07:00
committed by Facebook GitHub Bot
parent b256bc68fa
commit a0d46bbb53
3 changed files with 69 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
desktop/app/src/sandy-chrome/SandyApp.tsx
View File

@@ -18,6 +18,7 @@ import {LeftRail} from './LeftRail';
import {TemporarilyTitlebar} from './TemporarilyTitlebar'; import {TemporarilyTitlebar} from './TemporarilyTitlebar';
import {registerStartupTime} from '../App'; import {registerStartupTime} from '../App';
import {useStore} from '../utils/useStore'; import {useStore} from '../utils/useStore';
import {SandyContext} from './SandyContext';
export function SandyApp({logger}: {logger: Logger}) { export function SandyApp({logger}: {logger: Logger}) {
useEffect(() => { useEffect(() => {
@@ -31,35 +32,37 @@ export function SandyApp({logger}: {logger: Logger}) {
); );
return ( return (
<Layout.Top> <SandyContext.Provider value={true}>
<TemporarilyTitlebar /> <Layout.Top>
<Layout.Left <TemporarilyTitlebar />
initialSize={mainMenuVisible ? 348 : undefined} <Layout.Left
minSize={200}> initialSize={mainMenuVisible ? 348 : undefined}
<LeftMenu collapsed={!mainMenuVisible}> minSize={200}>
<LeftRail /> <LeftMenu collapsed={!mainMenuVisible}>
{mainMenuVisible && ( <LeftRail />
<div style={{background: theme.backgroundDefault, width: '100%'}}> {mainMenuVisible && (
LeftMenu <div style={{background: theme.backgroundDefault, width: '100%'}}>
</div> LeftMenu
)} </div>
</LeftMenu> )}
<MainContainer> </LeftMenu>
<Layout.Right initialSize={300} minSize={200}> <MainContainer>
<MainContentWrapper> <Layout.Right initialSize={300} minSize={200}>
<ContentContainer> <MainContentWrapper>
<TemporarilyContent /> <ContentContainer>
</ContentContainer> <TemporarilyContent />
</MainContentWrapper> </ContentContainer>
<MainContentWrapper> </MainContentWrapper>
<ContentContainer> <MainContentWrapper>
<RightMenu /> <ContentContainer>
</ContentContainer> <RightMenu />
</MainContentWrapper> </ContentContainer>
</Layout.Right> </MainContentWrapper>
</MainContainer> </Layout.Right>
</Layout.Left> </MainContainer>
</Layout.Top> </Layout.Left>
</Layout.Top>
</SandyContext.Provider>
); );
} }

16
desktop/app/src/sandy-chrome/SandyContext.tsx Normal file
View File

@@ -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);
}

25
desktop/app/src/ui/components/Button.tsx
View File

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