forked from vergnet/application-amicale
Improve Dashboard edit components to match linter
This commit is contained in:
parent
93d12b27f8
commit
70365136ac
4 changed files with 312 additions and 271 deletions
|
|
@ -2,66 +2,83 @@
|
|||
|
||||
import * as React from 'react';
|
||||
import {withTheme} from 'react-native-paper';
|
||||
import {FlatList, Image, View} from "react-native";
|
||||
import DashboardEditItem from "./DashboardEditItem";
|
||||
import AnimatedAccordion from "../../Animations/AnimatedAccordion";
|
||||
import type {ServiceCategory, ServiceItem} from "../../../managers/ServicesManager";
|
||||
import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
|
||||
import type {CustomTheme} from "../../../managers/ThemeManager";
|
||||
import {FlatList, Image, View} from 'react-native';
|
||||
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
|
||||
import DashboardEditItem from './DashboardEditItem';
|
||||
import AnimatedAccordion from '../../Animations/AnimatedAccordion';
|
||||
import type {
|
||||
ServiceCategoryType,
|
||||
ServiceItemType,
|
||||
} from '../../../managers/ServicesManager';
|
||||
import type {CustomTheme} from '../../../managers/ThemeManager';
|
||||
|
||||
type Props = {
|
||||
item: ServiceCategory,
|
||||
type PropsType = {
|
||||
item: ServiceCategoryType,
|
||||
activeDashboard: Array<string>,
|
||||
onPress: (service: ServiceItem) => void,
|
||||
onPress: (service: ServiceItemType) => void,
|
||||
theme: CustomTheme,
|
||||
}
|
||||
};
|
||||
|
||||
const LIST_ITEM_HEIGHT = 64;
|
||||
|
||||
class DashboardEditAccordion extends React.Component<Props> {
|
||||
|
||||
renderItem = ({item}: { item: ServiceItem }) => {
|
||||
class DashboardEditAccordion extends React.Component<PropsType> {
|
||||
getRenderItem = ({item}: {item: ServiceItemType}): React.Node => {
|
||||
const {props} = this;
|
||||
return (
|
||||
<DashboardEditItem
|
||||
height={LIST_ITEM_HEIGHT}
|
||||
item={item}
|
||||
isActive={this.props.activeDashboard.includes(item.key)}
|
||||
onPress={() => this.props.onPress(item)}/>
|
||||
isActive={props.activeDashboard.includes(item.key)}
|
||||
onPress={() => {
|
||||
props.onPress(item);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
itemLayout = (data, index) => ({length: LIST_ITEM_HEIGHT, offset: LIST_ITEM_HEIGHT * index, index});
|
||||
getItemLayout = (
|
||||
data: ?Array<ServiceItemType>,
|
||||
index: number,
|
||||
): {length: number, offset: number, index: number} => ({
|
||||
length: LIST_ITEM_HEIGHT,
|
||||
offset: LIST_ITEM_HEIGHT * index,
|
||||
index,
|
||||
});
|
||||
|
||||
render() {
|
||||
const item = this.props.item;
|
||||
render(): React.Node {
|
||||
const {props} = this;
|
||||
const {item} = props;
|
||||
return (
|
||||
<View>
|
||||
<AnimatedAccordion
|
||||
title={item.title}
|
||||
left={props => typeof item.image === "number"
|
||||
? <Image
|
||||
{...props}
|
||||
left={(): React.Node =>
|
||||
typeof item.image === 'number' ? (
|
||||
<Image
|
||||
source={item.image}
|
||||
style={{
|
||||
width: 40,
|
||||
height: 40
|
||||
height: 40,
|
||||
}}
|
||||
/>
|
||||
: <MaterialCommunityIcons
|
||||
//$FlowFixMe
|
||||
) : (
|
||||
<MaterialCommunityIcons
|
||||
// $FlowFixMe
|
||||
name={item.image}
|
||||
color={this.props.theme.colors.primary}
|
||||
size={40}/>}
|
||||
>
|
||||
{/*$FlowFixMe*/}
|
||||
color={props.theme.colors.primary}
|
||||
size={40}
|
||||
/>
|
||||
)
|
||||
}>
|
||||
{/* $FlowFixMe */}
|
||||
<FlatList
|
||||
data={item.content}
|
||||
extraData={this.props.activeDashboard.toString()}
|
||||
renderItem={this.renderItem}
|
||||
extraData={props.activeDashboard.toString()}
|
||||
renderItem={this.getRenderItem}
|
||||
listKey={item.key}
|
||||
// Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration
|
||||
getItemLayout={this.itemLayout}
|
||||
removeClippedSubviews={true}
|
||||
getItemLayout={this.getItemLayout}
|
||||
removeClippedSubviews
|
||||
/>
|
||||
</AnimatedAccordion>
|
||||
</View>
|
||||
|
|
@ -69,4 +86,4 @@ class DashboardEditAccordion extends React.Component<Props> {
|
|||
}
|
||||
}
|
||||
|
||||
export default withTheme(DashboardEditAccordion)
|
||||
export default withTheme(DashboardEditAccordion);
|
||||
|
|
|
|||
|
|
@ -1,51 +1,57 @@
|
|||
// @flow
|
||||
|
||||
import * as React from 'react';
|
||||
import {Image} from "react-native";
|
||||
import {Image} from 'react-native';
|
||||
import {List, withTheme} from 'react-native-paper';
|
||||
import type {CustomTheme} from "../../../managers/ThemeManager";
|
||||
import type {ServiceItem} from "../../../managers/ServicesManager";
|
||||
import type {CustomTheme} from '../../../managers/ThemeManager';
|
||||
import type {ServiceItemType} from '../../../managers/ServicesManager';
|
||||
|
||||
type Props = {
|
||||
item: ServiceItem,
|
||||
type PropsType = {
|
||||
item: ServiceItemType,
|
||||
isActive: boolean,
|
||||
height: number,
|
||||
onPress: () => void,
|
||||
theme: CustomTheme,
|
||||
}
|
||||
};
|
||||
|
||||
class DashboardEditItem extends React.Component<Props> {
|
||||
|
||||
shouldComponentUpdate(nextProps: Props) {
|
||||
return (nextProps.isActive !== this.props.isActive);
|
||||
class DashboardEditItem extends React.Component<PropsType> {
|
||||
shouldComponentUpdate(nextProps: PropsType): boolean {
|
||||
const {isActive} = this.props;
|
||||
return nextProps.isActive !== isActive;
|
||||
}
|
||||
|
||||
render() {
|
||||
render(): React.Node {
|
||||
const {props} = this;
|
||||
return (
|
||||
<List.Item
|
||||
title={this.props.item.title}
|
||||
description={this.props.item.subtitle}
|
||||
onPress={this.props.isActive ? null : this.props.onPress}
|
||||
left={props =>
|
||||
title={props.item.title}
|
||||
description={props.item.subtitle}
|
||||
onPress={props.isActive ? null : props.onPress}
|
||||
left={(): React.Node => (
|
||||
<Image
|
||||
{...props}
|
||||
source={{uri: this.props.item.image}}
|
||||
source={{uri: props.item.image}}
|
||||
style={{
|
||||
width: 40,
|
||||
height: 40
|
||||
height: 40,
|
||||
}}
|
||||
/>}
|
||||
right={props => this.props.isActive
|
||||
? <List.Icon
|
||||
{...props}
|
||||
icon={"check"}
|
||||
color={this.props.theme.colors.success}
|
||||
/> : null}
|
||||
/>
|
||||
)}
|
||||
right={({size}: {size: number}): React.Node =>
|
||||
props.isActive ? (
|
||||
<List.Icon
|
||||
size={size}
|
||||
icon="check"
|
||||
color={props.theme.colors.success}
|
||||
/>
|
||||
) : null
|
||||
}
|
||||
style={{
|
||||
height: this.props.height,
|
||||
height: props.height,
|
||||
justifyContent: 'center',
|
||||
paddingLeft: 30,
|
||||
backgroundColor: this.props.isActive ? this.props.theme.colors.proxiwashFinishedColor : "transparent"
|
||||
backgroundColor: props.isActive
|
||||
? props.theme.colors.proxiwashFinishedColor
|
||||
: 'transparent',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -2,10 +2,10 @@
|
|||
|
||||
import * as React from 'react';
|
||||
import {TouchableRipple, withTheme} from 'react-native-paper';
|
||||
import {Dimensions, Image, View} from "react-native";
|
||||
import type {CustomTheme} from "../../../managers/ThemeManager";
|
||||
import {Dimensions, Image, View} from 'react-native';
|
||||
import type {CustomTheme} from '../../../managers/ThemeManager';
|
||||
|
||||
type Props = {
|
||||
type PropsType = {
|
||||
image: string,
|
||||
isActive: boolean,
|
||||
onPress: () => void,
|
||||
|
|
@ -15,44 +15,44 @@ type Props = {
|
|||
/**
|
||||
* Component used to render a small dashboard item
|
||||
*/
|
||||
class DashboardEditPreviewItem extends React.Component<Props> {
|
||||
|
||||
class DashboardEditPreviewItem extends React.Component<PropsType> {
|
||||
itemSize: number;
|
||||
|
||||
constructor(props: Props) {
|
||||
constructor(props: PropsType) {
|
||||
super(props);
|
||||
this.itemSize = Dimensions.get('window').width / 8;
|
||||
}
|
||||
|
||||
render() {
|
||||
const props = this.props;
|
||||
render(): React.Node {
|
||||
const {props} = this;
|
||||
return (
|
||||
<TouchableRipple
|
||||
onPress={this.props.onPress}
|
||||
borderless={true}
|
||||
onPress={props.onPress}
|
||||
borderless
|
||||
style={{
|
||||
marginLeft: 5,
|
||||
marginRight: 5,
|
||||
backgroundColor: this.props.isActive ? this.props.theme.colors.textDisabled : "transparent",
|
||||
borderRadius: 5
|
||||
}}
|
||||
>
|
||||
<View style={{
|
||||
backgroundColor: props.isActive
|
||||
? props.theme.colors.textDisabled
|
||||
: 'transparent',
|
||||
borderRadius: 5,
|
||||
}}>
|
||||
<View
|
||||
style={{
|
||||
width: this.itemSize,
|
||||
height: this.itemSize,
|
||||
}}>
|
||||
<Image
|
||||
source={{uri: props.image}}
|
||||
style={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
</TouchableRipple>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default withTheme(DashboardEditPreviewItem)
|
||||
export default withTheme(DashboardEditPreviewItem);
|
||||
|
|
|
|||
|
|
@ -1,27 +1,28 @@
|
|||
// @flow
|
||||
|
||||
import * as React from 'react';
|
||||
import {StackNavigationProp} from "@react-navigation/stack";
|
||||
import type {CustomTheme} from "../../../managers/ThemeManager";
|
||||
import {Button, Card, Paragraph, withTheme} from "react-native-paper";
|
||||
import type {ServiceCategory, ServiceItem} from "../../../managers/ServicesManager";
|
||||
import DashboardManager from "../../../managers/DashboardManager";
|
||||
import DashboardItem from "../../../components/Home/EventDashboardItem";
|
||||
import {FlatList} from "react-native";
|
||||
import {View} from "react-native-animatable";
|
||||
import DashboardEditAccordion from "../../../components/Lists/DashboardEdit/DashboardEditAccordion";
|
||||
import DashboardEditPreviewItem from "../../../components/Lists/DashboardEdit/DashboardEditPreviewItem";
|
||||
import AsyncStorageManager from "../../../managers/AsyncStorageManager";
|
||||
import i18n from "i18n-js";
|
||||
import CollapsibleFlatList from "../../../components/Collapsible/CollapsibleFlatList";
|
||||
import {StackNavigationProp} from '@react-navigation/stack';
|
||||
import {Button, Card, Paragraph, withTheme} from 'react-native-paper';
|
||||
import {FlatList} from 'react-native';
|
||||
import {View} from 'react-native-animatable';
|
||||
import i18n from 'i18n-js';
|
||||
import type {
|
||||
ServiceCategoryType,
|
||||
ServiceItemType,
|
||||
} from '../../../managers/ServicesManager';
|
||||
import DashboardManager from '../../../managers/DashboardManager';
|
||||
import DashboardItem from '../../../components/Home/EventDashboardItem';
|
||||
import DashboardEditAccordion from '../../../components/Lists/DashboardEdit/DashboardEditAccordion';
|
||||
import DashboardEditPreviewItem from '../../../components/Lists/DashboardEdit/DashboardEditPreviewItem';
|
||||
import AsyncStorageManager from '../../../managers/AsyncStorageManager';
|
||||
import CollapsibleFlatList from '../../../components/Collapsible/CollapsibleFlatList';
|
||||
|
||||
type Props = {
|
||||
type PropsType = {
|
||||
navigation: StackNavigationProp,
|
||||
theme: CustomTheme,
|
||||
};
|
||||
|
||||
type State = {
|
||||
currentDashboard: Array<ServiceItem>,
|
||||
type StateType = {
|
||||
currentDashboard: Array<ServiceItemType | null>,
|
||||
currentDashboardIdList: Array<string>,
|
||||
activeItem: number,
|
||||
};
|
||||
|
|
@ -29,120 +30,137 @@ type State = {
|
|||
/**
|
||||
* Class defining the Settings screen. This screen shows controls to modify app preferences.
|
||||
*/
|
||||
class DashboardEditScreen extends React.Component<Props, State> {
|
||||
class DashboardEditScreen extends React.Component<PropsType, StateType> {
|
||||
content: Array<ServiceCategoryType>;
|
||||
|
||||
initialDashboard: Array<ServiceItemType | null>;
|
||||
|
||||
content: Array<ServiceCategory>;
|
||||
initialDashboard: Array<ServiceItem>;
|
||||
initialDashboardIdList: Array<string>;
|
||||
|
||||
constructor(props: Props) {
|
||||
constructor(props: PropsType) {
|
||||
super(props);
|
||||
let dashboardManager = new DashboardManager(this.props.navigation);
|
||||
this.initialDashboardIdList = AsyncStorageManager.getObject(AsyncStorageManager.PREFERENCES.dashboardItems.key);
|
||||
const dashboardManager = new DashboardManager(props.navigation);
|
||||
this.initialDashboardIdList = AsyncStorageManager.getObject(
|
||||
AsyncStorageManager.PREFERENCES.dashboardItems.key,
|
||||
);
|
||||
this.initialDashboard = dashboardManager.getCurrentDashboard();
|
||||
this.state = {
|
||||
currentDashboard: [...this.initialDashboard],
|
||||
currentDashboardIdList: [...this.initialDashboardIdList],
|
||||
activeItem: 0,
|
||||
}
|
||||
};
|
||||
this.content = dashboardManager.getCategories();
|
||||
}
|
||||
|
||||
dashboardRowRenderItem = ({item, index}: { item: DashboardItem, index: number }) => {
|
||||
getDashboardRowRenderItem = ({
|
||||
item,
|
||||
index,
|
||||
}: {
|
||||
item: DashboardItem,
|
||||
index: number,
|
||||
}): React.Node => {
|
||||
const {activeItem} = this.state;
|
||||
return (
|
||||
<DashboardEditPreviewItem
|
||||
image={item.image}
|
||||
onPress={() => this.setState({activeItem: index})}
|
||||
isActive={this.state.activeItem === index}
|
||||
onPress={() => {
|
||||
this.setState({activeItem: index});
|
||||
}}
|
||||
isActive={activeItem === index}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
getDashboard(content: Array<DashboardItem>) {
|
||||
getDashboard(content: Array<DashboardItem>): React.Node {
|
||||
return (
|
||||
<FlatList
|
||||
data={content}
|
||||
extraData={this.state}
|
||||
renderItem={this.dashboardRowRenderItem}
|
||||
horizontal={true}
|
||||
renderItem={this.getDashboardRowRenderItem}
|
||||
horizontal
|
||||
contentContainerStyle={{
|
||||
marginLeft: 'auto',
|
||||
marginRight: 'auto',
|
||||
marginTop: 5,
|
||||
}}
|
||||
/>);
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
renderItem = ({item}: { item: ServiceCategory }) => {
|
||||
getRenderItem = ({item}: {item: ServiceCategoryType}): React.Node => {
|
||||
const {currentDashboardIdList} = this.state;
|
||||
return (
|
||||
<DashboardEditAccordion
|
||||
item={item}
|
||||
onPress={this.updateDashboard}
|
||||
activeDashboard={this.state.currentDashboardIdList}
|
||||
activeDashboard={currentDashboardIdList}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
updateDashboard = (service: ServiceItem) => {
|
||||
let currentDashboard = this.state.currentDashboard;
|
||||
let currentDashboardIdList = this.state.currentDashboardIdList;
|
||||
currentDashboard[this.state.activeItem] = service;
|
||||
currentDashboardIdList[this.state.activeItem] = service.key;
|
||||
this.setState({
|
||||
currentDashboard: currentDashboard,
|
||||
currentDashboardIdList: currentDashboardIdList,
|
||||
});
|
||||
AsyncStorageManager.set(AsyncStorageManager.PREFERENCES.dashboardItems.key, currentDashboardIdList);
|
||||
}
|
||||
|
||||
undoDashboard = () => {
|
||||
this.setState({
|
||||
currentDashboard: [...this.initialDashboard],
|
||||
currentDashboardIdList: [...this.initialDashboardIdList]
|
||||
});
|
||||
AsyncStorageManager.set(AsyncStorageManager.PREFERENCES.dashboardItems.key, this.initialDashboardIdList);
|
||||
}
|
||||
|
||||
getListHeader() {
|
||||
getListHeader(): React.Node {
|
||||
const {currentDashboard} = this.state;
|
||||
return (
|
||||
<Card style={{margin: 5}}>
|
||||
<Card.Content>
|
||||
<View style={{padding: 5}}>
|
||||
<Button
|
||||
mode={"contained"}
|
||||
mode="contained"
|
||||
onPress={this.undoDashboard}
|
||||
style={{
|
||||
marginLeft: "auto",
|
||||
marginRight: "auto",
|
||||
marginLeft: 'auto',
|
||||
marginRight: 'auto',
|
||||
marginBottom: 10,
|
||||
}}
|
||||
>
|
||||
{i18n.t("screens.settings.dashboardEdit.undo")}
|
||||
}}>
|
||||
{i18n.t('screens.settings.dashboardEdit.undo')}
|
||||
</Button>
|
||||
<View style={{height: 50}}>
|
||||
{this.getDashboard(this.state.currentDashboard)}
|
||||
{this.getDashboard(currentDashboard)}
|
||||
</View>
|
||||
</View>
|
||||
<Paragraph style={{textAlign: "center"}}>
|
||||
{i18n.t("screens.settings.dashboardEdit.message")}
|
||||
<Paragraph style={{textAlign: 'center'}}>
|
||||
{i18n.t('screens.settings.dashboardEdit.message')}
|
||||
</Paragraph>
|
||||
</Card.Content>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
updateDashboard = (service: ServiceItemType) => {
|
||||
const {currentDashboard, currentDashboardIdList, activeItem} = this.state;
|
||||
currentDashboard[activeItem] = service;
|
||||
currentDashboardIdList[activeItem] = service.key;
|
||||
this.setState({
|
||||
currentDashboard,
|
||||
currentDashboardIdList,
|
||||
});
|
||||
AsyncStorageManager.set(
|
||||
AsyncStorageManager.PREFERENCES.dashboardItems.key,
|
||||
currentDashboardIdList,
|
||||
);
|
||||
};
|
||||
|
||||
render() {
|
||||
undoDashboard = () => {
|
||||
this.setState({
|
||||
currentDashboard: [...this.initialDashboard],
|
||||
currentDashboardIdList: [...this.initialDashboardIdList],
|
||||
});
|
||||
AsyncStorageManager.set(
|
||||
AsyncStorageManager.PREFERENCES.dashboardItems.key,
|
||||
this.initialDashboardIdList,
|
||||
);
|
||||
};
|
||||
|
||||
render(): React.Node {
|
||||
return (
|
||||
<CollapsibleFlatList
|
||||
data={this.content}
|
||||
renderItem={this.renderItem}
|
||||
renderItem={this.getRenderItem}
|
||||
ListHeaderComponent={this.getListHeader()}
|
||||
style={{}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default withTheme(DashboardEditScreen);
|
||||
|
|
|
|||
Loading…
Reference in a new issue