forked from vergnet/application-amicale
Improved debug and dependencies performances
This commit is contained in:
parent
48fdca72c0
commit
46dbdb0740
2 changed files with 70 additions and 68 deletions
|
@ -32,23 +32,40 @@ type Props = {
|
||||||
route: Object
|
route: Object
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const LIST_ITEM_HEIGHT = 64;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Class defining a screen showing the list of libraries used by the app, taken from package.json
|
* Class defining a screen showing the list of libraries used by the app, taken from package.json
|
||||||
*/
|
*/
|
||||||
export default class AboutDependenciesScreen extends React.Component<Props> {
|
export default class AboutDependenciesScreen extends React.Component<Props> {
|
||||||
|
|
||||||
render() {
|
data: Array<Object>;
|
||||||
const data = generateListFromObject(packageJson.dependencies);
|
|
||||||
return (
|
constructor() {
|
||||||
<FlatList
|
super();
|
||||||
data={data}
|
this.data = generateListFromObject(packageJson.dependencies);
|
||||||
keyExtractor={(item) => item.name}
|
}
|
||||||
style={{minHeight: 300, width: '100%'}}
|
|
||||||
renderItem={({item}) =>
|
keyExtractor = (item: Object) => item.name;
|
||||||
|
|
||||||
|
renderItem = ({item}: Object) =>
|
||||||
<List.Item
|
<List.Item
|
||||||
title={item.name}
|
title={item.name}
|
||||||
description={item.version.replace('^', '').replace('~', '')}
|
description={item.version.replace('^', '').replace('~', '')}
|
||||||
/>}
|
style={{height: LIST_ITEM_HEIGHT}}
|
||||||
|
/>;
|
||||||
|
|
||||||
|
itemLayout = (data, index) => ({length: LIST_ITEM_HEIGHT, offset: LIST_ITEM_HEIGHT * index, index});
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<FlatList
|
||||||
|
data={this.data}
|
||||||
|
keyExtractor={this.keyExtractor}
|
||||||
|
renderItem={this.renderItem}
|
||||||
|
// Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration
|
||||||
|
removeClippedSubviews={true}
|
||||||
|
getItemLayout={this.itemLayout}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,10 +1,10 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import {ScrollView, View} from "react-native";
|
import {FlatList, View} from "react-native";
|
||||||
import AsyncStorageManager from "../../managers/AsyncStorageManager";
|
import AsyncStorageManager from "../../managers/AsyncStorageManager";
|
||||||
import CustomModal from "../../components/Custom/CustomModal";
|
import CustomModal from "../../components/Custom/CustomModal";
|
||||||
import {Button, Card, List, Subheading, TextInput, Title, withTheme} from 'react-native-paper';
|
import {Button, List, Subheading, TextInput, Title, withTheme} from 'react-native-paper';
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
navigation: Object,
|
navigation: Object,
|
||||||
|
@ -12,7 +12,7 @@ type Props = {
|
||||||
|
|
||||||
type State = {
|
type State = {
|
||||||
modalCurrentDisplayItem: Object,
|
modalCurrentDisplayItem: Object,
|
||||||
currentPreferences: Object,
|
currentPreferences: Array<Object>,
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -23,10 +23,6 @@ class DebugScreen extends React.Component<Props, State> {
|
||||||
|
|
||||||
modalRef: Object;
|
modalRef: Object;
|
||||||
modalInputValue = '';
|
modalInputValue = '';
|
||||||
state = {
|
|
||||||
modalCurrentDisplayItem: {},
|
|
||||||
currentPreferences: JSON.parse(JSON.stringify(AsyncStorageManager.getInstance().preferences))
|
|
||||||
};
|
|
||||||
|
|
||||||
onModalRef: Function;
|
onModalRef: Function;
|
||||||
|
|
||||||
|
@ -36,40 +32,20 @@ class DebugScreen extends React.Component<Props, State> {
|
||||||
super(props);
|
super(props);
|
||||||
this.onModalRef = this.onModalRef.bind(this);
|
this.onModalRef = this.onModalRef.bind(this);
|
||||||
this.colors = props.theme.colors;
|
this.colors = props.theme.colors;
|
||||||
|
let copy = {...AsyncStorageManager.getInstance().preferences};
|
||||||
|
console.log(copy);
|
||||||
|
let currentPreferences = [];
|
||||||
|
Object.values(copy).map((object) => {
|
||||||
|
currentPreferences.push(object);
|
||||||
|
});
|
||||||
|
this.state = {
|
||||||
|
modalCurrentDisplayItem: {},
|
||||||
|
currentPreferences: currentPreferences
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Gets a clickable list item
|
* Show the edit modal
|
||||||
*
|
|
||||||
* @param onPressCallback The function to call when clicking on the item
|
|
||||||
* @param icon The item's icon
|
|
||||||
* @param title The item's title
|
|
||||||
* @param subtitle The item's subtitle
|
|
||||||
* @return {*}
|
|
||||||
*/
|
|
||||||
static getGeneralItem(onPressCallback: Function, icon: ?string, title: string, subtitle: string) {
|
|
||||||
if (icon !== undefined) {
|
|
||||||
return (
|
|
||||||
<List.Item
|
|
||||||
title={title}
|
|
||||||
description={subtitle}
|
|
||||||
left={() => <List.Icon icon={icon}/>}
|
|
||||||
onPress={onPressCallback}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
return (
|
|
||||||
<List.Item
|
|
||||||
title={title}
|
|
||||||
description={subtitle}
|
|
||||||
onPress={onPressCallback}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Show the
|
|
||||||
* @param item
|
* @param item
|
||||||
*/
|
*/
|
||||||
showEditModal(item: Object) {
|
showEditModal(item: Object) {
|
||||||
|
@ -123,6 +99,17 @@ class DebugScreen extends React.Component<Props, State> {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
findIndexOfKey(key: string) {
|
||||||
|
let index = -1;
|
||||||
|
for (let i = 0; i < this.state.currentPreferences.length; i++) {
|
||||||
|
if (this.state.currentPreferences[i].key === key) {
|
||||||
|
index = i;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return index;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Saves the new value of the given preference
|
* Saves the new value of the given preference
|
||||||
*
|
*
|
||||||
|
@ -131,11 +118,12 @@ class DebugScreen extends React.Component<Props, State> {
|
||||||
*/
|
*/
|
||||||
saveNewPrefs(key: string, value: string) {
|
saveNewPrefs(key: string, value: string) {
|
||||||
this.setState((prevState) => {
|
this.setState((prevState) => {
|
||||||
let currentPreferences = {...prevState.currentPreferences};
|
let currentPreferences = [...prevState.currentPreferences];
|
||||||
currentPreferences[key].current = value;
|
currentPreferences[this.findIndexOfKey(key)].current = value;
|
||||||
return {currentPreferences};
|
return {currentPreferences};
|
||||||
});
|
});
|
||||||
AsyncStorageManager.getInstance().savePref(key, value);
|
AsyncStorageManager.getInstance().savePref(key, value);
|
||||||
|
this.modalRef.close();
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -147,31 +135,28 @@ class DebugScreen extends React.Component<Props, State> {
|
||||||
this.modalRef = ref;
|
this.modalRef = ref;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
renderItem = ({item}: Object) => {
|
||||||
|
return (
|
||||||
|
<List.Item
|
||||||
|
title={item.key}
|
||||||
|
description={'Click to edit'}
|
||||||
|
onPress={() => this.showEditModal(item)}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<View>
|
<View>
|
||||||
<CustomModal onRef={this.onModalRef}>
|
<CustomModal onRef={this.onModalRef}>
|
||||||
{this.getModalContent()}
|
{this.getModalContent()}
|
||||||
</CustomModal>
|
</CustomModal>
|
||||||
<ScrollView style={{padding: 5}}>
|
{/*$FlowFixMe*/}
|
||||||
<Card style={{margin: 5}}>
|
<FlatList
|
||||||
<Card.Title
|
data={this.state.currentPreferences}
|
||||||
title={'Preferences'}
|
extraData={this.state.currentPreferences}
|
||||||
|
renderItem={this.renderItem}
|
||||||
/>
|
/>
|
||||||
<Card.Content>
|
|
||||||
{Object.values(this.state.currentPreferences).map((object) =>
|
|
||||||
<View>
|
|
||||||
{DebugScreen.getGeneralItem(
|
|
||||||
() => this.showEditModal(object),
|
|
||||||
undefined,
|
|
||||||
//$FlowFixMe
|
|
||||||
object.key,
|
|
||||||
'Click to edit')}
|
|
||||||
</View>
|
|
||||||
)}
|
|
||||||
</Card.Content>
|
|
||||||
</Card>
|
|
||||||
</ScrollView>
|
|
||||||
</View>
|
</View>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue