diff --git a/src/chrome/ExportDataPluginSheet.tsx b/src/chrome/ExportDataPluginSheet.tsx index c9162c99f..dc04123b2 100644 --- a/src/chrome/ExportDataPluginSheet.tsx +++ b/src/chrome/ExportDataPluginSheet.tsx @@ -23,7 +23,8 @@ import { } from '../reducers/application'; import ListView from './ListView'; import {Dispatch, Action} from 'redux'; - +import {unsetShare} from '../reducers/application'; +import {FlexColumn, styled} from 'flipper'; type OwnProps = { onHide: () => void; }; @@ -41,57 +42,71 @@ type DispatchFromProps = { file: string; closeOnFinish: boolean; }) => void; + unsetShare: () => void; }; type Props = OwnProps & StateFromProps & DispatchFromProps; + +const Container = styled(FlexColumn)({ + width: 700, + maxHeight: 700, +}); + class ExportDataPluginSheet extends Component { render() { const {plugins, pluginStates, onHide} = this.props; + const onHideWithUnsettingShare = () => { + this.props.unsetShare(); + onHide(); + }; return ( - { - this.props.selectedPlugins(selectedArray); - const {share} = this.props; - if (!share) { - console.error( - 'applications.share is undefined, whereas it was expected to be defined', - ); - } else { - switch (share.type) { - case 'link': - this.props.setActiveSheet(ACTIVE_SHEET_SHARE_DATA); - break; - case 'file': { - const file = share.file; - if (file) { - this.props.setExportDataToFileActiveSheet({ - file, - closeOnFinish: true, - }); - } else { - console.error('share.file is undefined'); + + { + this.props.selectedPlugins(selectedArray); + const {share} = this.props; + if (!share) { + console.error( + 'applications.share is undefined, whereas it was expected to be defined', + ); + } else { + switch (share.type) { + case 'link': + this.props.setActiveSheet(ACTIVE_SHEET_SHARE_DATA); + break; + case 'file': { + const file = share.file; + if (file) { + this.props.setExportDataToFileActiveSheet({ + file, + closeOnFinish: true, + }); + } else { + console.error('share.file is undefined'); + } } } } - } - }} - elements={getActivePersistentPlugins(pluginStates, plugins)} - selectedElements={getActivePersistentPlugins( - pluginStates, - plugins, - ).reduce((acc, plugin) => { - if ( - plugins.selectedPlugins.length <= 0 || - plugins.selectedPlugins.includes(plugin) - ) { - acc.add(plugin); - } - return acc; - }, new Set([]) as Set)} - onHide={onHide} - /> + }} + elements={getActivePersistentPlugins(pluginStates, plugins)} + selectedElements={getActivePersistentPlugins( + pluginStates, + plugins, + ).reduce((acc, plugin) => { + if ( + plugins.selectedPlugins.length <= 0 || + plugins.selectedPlugins.includes(plugin) + ) { + acc.add(plugin); + } + return acc; + }, new Set([]) as Set)} + onHide={onHideWithUnsettingShare} + showNavButtons={true} + /> + ); } } @@ -115,5 +130,8 @@ export default connect( }) => { dispatch(getExportDataToFileActiveSheetAction(payload)); }, + unsetShare: () => { + dispatch(unsetShare()); + }, }), )(ExportDataPluginSheet); diff --git a/src/chrome/ListView.tsx b/src/chrome/ListView.tsx index ac9e5ec47..bf944e53a 100644 --- a/src/chrome/ListView.tsx +++ b/src/chrome/ListView.tsx @@ -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) => void; onHide: () => any; elements: Array; - 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 { } handleChange = (id: string, selected: boolean) => { + let selectedElements: Set = 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 ( - - {({store}) => { - const onHide = () => { - store.dispatch(unsetShare()); - this.props.onHide(); - }; - return ( - - - {this.props.title} - - {this.props.elements.map(id => { - return ( - - ); - })} - - - - - - - - - - - ); - }} - + + + {this.props.title && {this.props.title}} + + {this.props.elements.map(id => { + return ( + + ); + })} + + + {this.props.showNavButtons && ( + + + + + + + + )} + ); } }