Introduces data management section redesign
This commit is contained in:
@@ -1,18 +1,22 @@
|
||||
import React, { Component } from 'react'
|
||||
import { ScrollView, View } from 'react-native'
|
||||
import AppText from '../../common/app-text'
|
||||
import Segment from '../../common/segment'
|
||||
|
||||
import AppLoadingView from '../../common/app-loading'
|
||||
import SettingsButton from '../shared/settings-button'
|
||||
import AppPage from '../../common/app-page'
|
||||
import AppText from '../../common/app-text'
|
||||
import Button from '../../common/button'
|
||||
import Segment from '../../common/segment'
|
||||
|
||||
import { openImportDialog, getFileContent, importData } from './import-dialog'
|
||||
import openShareDialogAndExport from './export-dialog'
|
||||
import DeleteData from './delete-data'
|
||||
|
||||
import labels from '../../../i18n/en/settings'
|
||||
|
||||
export default class DataManagement extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props)
|
||||
|
||||
this.state = {
|
||||
isLoading: false,
|
||||
currentAction: null
|
||||
@@ -51,41 +55,36 @@ export default class DataManagement extends Component {
|
||||
}
|
||||
|
||||
render() {
|
||||
const { currentAction } = this.state
|
||||
const { currentAction, isLoading } = this.state
|
||||
const isDeletingData = currentAction === 'delete'
|
||||
|
||||
return (
|
||||
<View flex={1}>
|
||||
{this.state.isLoading && <AppLoadingView />}
|
||||
{!this.state.isLoading &&
|
||||
<ScrollView>
|
||||
<View>
|
||||
<Segment title={labels.export.button}>
|
||||
<AppText>{labels.export.segmentExplainer}</AppText>
|
||||
<SettingsButton onPress={this.startExport}>
|
||||
{labels.export.button}
|
||||
</SettingsButton>
|
||||
</Segment>
|
||||
<Segment title={labels.import.button}>
|
||||
<AppText>{labels.import.segmentExplainer}</AppText>
|
||||
<SettingsButton
|
||||
onPress= {this.startImport}
|
||||
>
|
||||
{labels.import.button}
|
||||
</SettingsButton>
|
||||
</Segment>
|
||||
<Segment
|
||||
title={labels.deleteSegment.title}
|
||||
last
|
||||
>
|
||||
<AppText>{labels.deleteSegment.explainer}</AppText>
|
||||
<DeleteData
|
||||
isDeletingData = { currentAction === 'delete' }
|
||||
onStartDeletion = {() => this.setCurrentAction('delete')}
|
||||
/>
|
||||
</Segment>
|
||||
</View>
|
||||
</ScrollView>
|
||||
<AppPage>
|
||||
{isLoading && <AppLoadingView />}
|
||||
{!isLoading &&
|
||||
<React.Fragment>
|
||||
<Segment title={labels.export.button}>
|
||||
<AppText>{labels.export.segmentExplainer}</AppText>
|
||||
<Button isCTA onPress={this.startExport}>
|
||||
{labels.export.button}
|
||||
</Button>
|
||||
</Segment>
|
||||
<Segment title={labels.import.button}>
|
||||
<AppText>{labels.import.segmentExplainer}</AppText>
|
||||
<Button isCTA onPress= {this.startImport}>
|
||||
{labels.import.button}
|
||||
</Button>
|
||||
</Segment>
|
||||
<Segment title={labels.deleteSegment.title} last>
|
||||
<AppText>{labels.deleteSegment.explainer}</AppText>
|
||||
<DeleteData
|
||||
isDeletingData = {isDeletingData}
|
||||
onStartDeletion = {() => this.setCurrentAction('delete')}
|
||||
/>
|
||||
</Segment>
|
||||
</React.Fragment>
|
||||
}
|
||||
</View>
|
||||
</AppPage>
|
||||
)
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user