Summary: Mainly convert `js` to `tsx` Additional change: - Try not to directly change object value in reduce function - Add emotion styled when there is error using style prop directly Reviewed By: nikoant Differential Revision: D21406943 fbshipit-source-id: 30312fa0b0d2d70fa52c5ff9db747e1a83beb270
50 lines
1.3 KiB
TypeScript
50 lines
1.3 KiB
TypeScript
/**
|
|
* 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 {Button, ButtonGroup, Glyph, colors} from 'flipper';
|
|
import React from 'react';
|
|
|
|
export default function ButtonNavigation(props: {
|
|
/** Back button is enabled */
|
|
canGoBack: boolean;
|
|
/** Forwards button is enabled */
|
|
canGoForward: boolean;
|
|
/** Callback when back button is clicked */
|
|
onBack: () => void;
|
|
/** Callback when forwards button is clicked */
|
|
onForward: () => void;
|
|
}) {
|
|
return (
|
|
<ButtonGroup>
|
|
<Button disabled={!props.canGoBack} onClick={props.onBack}>
|
|
<Glyph
|
|
name="chevron-left"
|
|
size={16}
|
|
color={
|
|
props.canGoBack
|
|
? colors.macOSTitleBarIconActive
|
|
: colors.macOSTitleBarIconBlur
|
|
}
|
|
/>
|
|
</Button>
|
|
<Button disabled={!props.canGoForward} onClick={props.onForward}>
|
|
<Glyph
|
|
name="chevron-right"
|
|
size={16}
|
|
color={
|
|
props.canGoForward
|
|
? colors.macOSTitleBarIconActive
|
|
: colors.macOSTitleBarIconBlur
|
|
}
|
|
/>
|
|
</Button>
|
|
</ButtonGroup>
|
|
);
|
|
}
|