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

Migrate SelectPluginSheet from js to tsx

Browse Source 
Summary: Migrated SelectPluginSheet.js to SelectPluginSheet.tsx

Reviewed By: jknoxville

Differential Revision: D16733361

fbshipit-source-id: c48e921761f4008a76a5000dd58aa2dd1aa42d2c
This commit is contained in:
Benjamin Elo
2019-08-12 05:49:44 -07:00
committed by Facebook Github Bot
parent 11e817e1f2
commit d9cb55c8ae
1 changed files with 23 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/chrome/SelectPluginSheet.js → src/chrome/SelectPluginSheet.tsx
View File

@@ -6,7 +6,6 @@
*/ */
import { import {
Component,
Text, Text,
FlexColumn, FlexColumn,
styled, styled,
@@ -17,21 +16,22 @@ import {
colors, colors,
View, View,
} from 'flipper'; } from 'flipper';
import React, {Component} from 'react';
export type PluginSelection = Map<string, boolean>; export type PluginSelection = Map<string, boolean>;
type Props = {| type Props = {
onSelect: (plugins: Array<string>) => void, onSelect: (plugins: Array<string>) => void;
onHide: () => mixed, onHide: () => any;
plugins: PluginSelection, plugins: PluginSelection;
|}; };
const Title = styled(Text)({ const Title = styled(Text)({
margin: 6, margin: 6,
}); });
type State = { type State = {
plugins: PluginSelection, plugins: PluginSelection;
}; };
const Container = styled(FlexColumn)({ const Container = styled(FlexColumn)({
@@ -64,9 +64,9 @@ const Padder = styled('div')(
); );
type PluginRowComponentProps = { type PluginRowComponentProps = {
name: string, name: string;
selected: boolean, selected: boolean;
onChange: (name: string, selected: boolean) => void, onChange: (name: string, selected: boolean) => void;
}; };
class PluginRowComponent extends Component<PluginRowComponentProps> { class PluginRowComponent extends Component<PluginRowComponentProps> {
@@ -97,7 +97,7 @@ class PluginRowComponent extends Component<PluginRowComponentProps> {
} }
export default class SelectPluginSheet extends Component<Props, State> { export default class SelectPluginSheet extends Component<Props, State> {
state = {plugins: new Map()}; state = {plugins: new Map<string, boolean>()};
static getDerivedStateFromProps(props: Props, state: State) { static getDerivedStateFromProps(props: Props, state: State) {
if (state.plugins.size > 0) { if (state.plugins.size > 0) {
return null; return null;
@@ -128,20 +128,18 @@ export default class SelectPluginSheet extends Component<Props, State> {
Select the plugins for which you want to export the data Select the plugins for which you want to export the data
</Title> </Title>
<PluginRowComponentContainer> <PluginRowComponentContainer>
{Array.from(plugins.entries()).map( {Array.from(plugins.entries()).map(([pluginID, selected]) => {
([pluginID: string, selected: boolean]) => { return (
return ( <PluginRowComponent
<PluginRowComponent name={pluginID}
name={pluginID} selected={selected}
selected={selected} onChange={(id: string, selected: boolean) => {
onChange={(id: string, selected: boolean) => { plugins.set(id, selected);
plugins.set(id, selected); this.setState({plugins});
this.setState({plugins}); }}
}} />
/> );
); })}
},
)}
</PluginRowComponentContainer> </PluginRowComponentContainer>
</FlexColumn> </FlexColumn>
<Padder paddingTop={8} paddingBottom={2}> <Padder paddingTop={8} paddingBottom={2}>