ba5f067320
Summary: When trying to refactor some components, did once again run into circular imports that cause the flipper startup sequence to fail. Added linting rules to make sure this is much less likely to happen in the future, and fixed all resulting errors Reviewed By: nikoant Differential Revision: D24390583 fbshipit-source-id: 9b20cf6a4d3555dc68f0069c2950dd7162b17e67
125 lines
3.1 KiB
TypeScript
125 lines
3.1 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 React, {useCallback, useEffect, useState} from 'react';
|
|
import {Button, ButtonGroup, colors} from '../ui';
|
|
import {State} from '../reducers';
|
|
import MetroDevice, {MetroReportableEvent} from '../devices/MetroDevice';
|
|
import styled from '@emotion/styled';
|
|
import {connect} from 'react-redux';
|
|
|
|
type LogEntry = {};
|
|
|
|
export type PersistedState = {
|
|
logs: LogEntry[];
|
|
};
|
|
|
|
type Props = {
|
|
device: MetroDevice;
|
|
};
|
|
|
|
function ProgressBar({
|
|
progress,
|
|
width,
|
|
color,
|
|
}: {
|
|
progress: number;
|
|
width: number;
|
|
color: string;
|
|
}) {
|
|
return (
|
|
<ProgressBarContainer width={width} color={color}>
|
|
<ProgressBarBar progress={progress} color={color} />
|
|
</ProgressBarContainer>
|
|
);
|
|
}
|
|
|
|
const ProgressBarContainer = styled.div<{width: number; color: string}>(
|
|
({width, color}) => ({
|
|
border: `1px solid ${color}`,
|
|
borderRadius: 4,
|
|
height: 6,
|
|
width: width,
|
|
}),
|
|
);
|
|
|
|
const ProgressBarBar = styled.div<{progress: number; color: string}>(
|
|
({progress, color}) => ({
|
|
background: color,
|
|
width: `${Math.min(100, Math.round(progress * 100))}%`,
|
|
height: 4,
|
|
}),
|
|
);
|
|
|
|
function MetroButton({device}: Props) {
|
|
const sendCommand = useCallback(
|
|
(command: string) => {
|
|
device.sendCommand(command);
|
|
},
|
|
[device],
|
|
);
|
|
const [progress, setProgress] = useState(1);
|
|
const [hasBuildError, setHasBuildError] = useState(false);
|
|
|
|
useEffect(() => {
|
|
function metroEventListener(event: MetroReportableEvent) {
|
|
if (event.type === 'bundle_build_started') {
|
|
setHasBuildError(false);
|
|
setProgress(0);
|
|
} else if (event.type === 'bundle_build_failed') {
|
|
setHasBuildError(true);
|
|
setProgress(1);
|
|
} else if (event.type === 'bundle_build_done') {
|
|
setHasBuildError(false);
|
|
setProgress(1);
|
|
} else if (event.type === 'bundle_transform_progressed') {
|
|
setProgress(event.transformedFileCount / event.totalFileCount);
|
|
}
|
|
}
|
|
device.metroEventEmitter.on('event', metroEventListener);
|
|
return () => {
|
|
device.metroEventEmitter.off('event', metroEventListener);
|
|
};
|
|
}, [device]);
|
|
|
|
return (
|
|
<ButtonGroup>
|
|
<Button
|
|
title="Reload React Native App"
|
|
icon="arrows-circle"
|
|
compact
|
|
onClick={() => {
|
|
sendCommand('reload');
|
|
}}>
|
|
{progress < 1 ? (
|
|
<ProgressBar
|
|
progress={100 * progress}
|
|
color={hasBuildError ? colors.red : colors.cyan}
|
|
width={20}
|
|
/>
|
|
) : null}
|
|
</Button>
|
|
<Button
|
|
title="Open the React Native Dev Menu on the device"
|
|
icon="navicon"
|
|
compact
|
|
onClick={() => {
|
|
sendCommand('devMenu');
|
|
}}
|
|
/>
|
|
</ButtonGroup>
|
|
);
|
|
}
|
|
|
|
export default connect<Props, {}, {}, State>(({connections: {devices}}) => ({
|
|
device: devices.find(
|
|
(device) => device.os === 'Metro' && !device.isArchived,
|
|
) as MetroDevice,
|
|
}))(MetroButton);
|