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

Refactor Listview to make it agnostic to the export logic

Browse Source 
Summary: This diff makes Listview agnostic to the logic of the sharing.

Reviewed By: mweststrate

Differential Revision: D18711095

fbshipit-source-id: 75541dee0b5740c9951c46118d96292e28979507
This commit is contained in:
Pritesh Nandgaonkar
2019-11-27 08:44:31 -08:00
committed by Facebook Github Bot
parent 32a02f7f99
commit 0a311def8f
2 changed files with 108 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
src/chrome/ListView.tsx
View File

@@ -18,7 +18,6 @@ import {
colors,
View,
} from 'flipper';
import {unsetShare} from '../reducers/application';
import React, {Component} from 'react';
import {ReactReduxContext} from 'react-redux';
@@ -38,7 +37,8 @@ type Props = {
onSelect: (elements: Array<string>) => void;
onHide: () => any;
elements: Array<string>;
title: string;
title?: string;
showNavButtons: boolean;
} & SubType;
const Title = styled(Text)({
@@ -51,8 +51,6 @@ type State = {
const Container = styled(FlexColumn)({
padding: 8,
width: 700,
maxHeight: 700,
});
const Line = styled(View)({
@@ -137,71 +135,69 @@ export default class ListView extends Component<Props, State> {
}
handleChange = (id: string, selected: boolean) => {
let selectedElements: Set<string> = new Set([]);
if (this.props.type === 'single') {
if (!selected) {
this.setState({selectedElements: new Set([])});
this.setState({selectedElements: selectedElements});
} else {
this.setState({selectedElements: new Set([id])});
selectedElements.add(id);
this.setState({selectedElements: selectedElements});
}
} else {
if (selected) {
selectedElements = new Set([...this.state.selectedElements, id]);
this.setState({
selectedElements: new Set([...this.state.selectedElements, id]),
selectedElements: selectedElements,
});
} else {
const selectedElements = new Set([...this.state.selectedElements]);
selectedElements = new Set([...this.state.selectedElements]);
selectedElements.delete(id);
this.setState({selectedElements});
}
}
if (!this.props.showNavButtons) {
this.props.onSelect([...selectedElements]);
}
};
render() {
return (
<ReactReduxContext.Consumer>
{({store}) => {
const onHide = () => {
store.dispatch(unsetShare());
this.props.onHide();
};
return (
<Container>
<FlexColumn>
<Title>{this.props.title}</Title>
<RowComponentContainer>
{this.props.elements.map(id => {
return (
<RowComponent
name={id}
key={id}
selected={this.state.selectedElements.has(id)}
onChange={this.handleChange}
/>
);
})}
</RowComponentContainer>
</FlexColumn>
<Padder paddingTop={8} paddingBottom={2}>
<FlexRow>
<Spacer />
<Button compact padded onClick={onHide}>
Close
</Button>
<Button
compact
padded
type="primary"
onClick={() => {
this.props.onSelect([...this.state.selectedElements]);
}}>
Submit
</Button>
</FlexRow>
</Padder>
</Container>
);
}}
</ReactReduxContext.Consumer>
<Container>
<FlexColumn>
{this.props.title && <Title>{this.props.title}</Title>}
<RowComponentContainer>
{this.props.elements.map(id => {
return (
<RowComponent
name={id}
key={id}
selected={this.state.selectedElements.has(id)}
onChange={this.handleChange}
/>
);
})}
</RowComponentContainer>
</FlexColumn>
{this.props.showNavButtons && (
<Padder paddingTop={8} paddingBottom={2}>
<FlexRow>
<Spacer />
<Button compact padded onClick={this.props.onHide}>
Close
</Button>
<Button
compact
padded
type="primary"
onClick={() => {
this.props.onSelect([...this.state.selectedElements]);
}}>
Submit
</Button>
</FlexRow>
</Padder>
)}
</Container>
);
}
}