saint-lo/application-amicale
1
0
Fork 0
forked from vergnet/application-amicale
Code Issues Pull requests Releases Wiki Activity

Improve list icon handling

Browse source
This commit is contained in:
Arnaud Vergnet 2020-08-07 13:19:38 +02:00
parent ee82589cae
commit d133ea30a5
23 changed files with 198 additions and 198 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/components/Amicale/Vote/VoteResults.js
View file

@ -13,6 +13,10 @@ import {FlatList, StyleSheet} from 'react-native';
import i18n from 'i18n-js';
import type {VoteTeamType} from '../../../screens/Amicale/VoteScreen';
import type {CustomThemeType} from '../../../managers/ThemeManager';
import type {
CardTitleIconPropsType,
ListIconPropsType,
} from '../../../constants/PaperStyles';
type PropsType = {
teams: Array<VoteTeamType>,
@ -78,10 +82,10 @@ class VoteResults extends React.Component<PropsType> {
<List.Item
title={item.name}
description={`${item.votes} ${i18n.t('screens.vote.results.votes')}`}
left={({size}: {size: number}): React.Node =>
left={(iconProps: ListIconPropsType): React.Node =>
isWinner ? (
<List.Icon
size={size}
style={iconProps.style}
icon={isDraw ? 'trophy-outline' : 'trophy'}
color={props.theme.colors.primary}
/>
@ -111,8 +115,8 @@ class VoteResults extends React.Component<PropsType> {
subtitle={`${i18n.t('screens.vote.results.subtitle')} ${
props.dateEnd
}`}
left={({size}: {size: number}): React.Node => (
<Avatar.Icon size={size} icon="podium-gold" />
left={(iconProps: CardTitleIconPropsType): React.Node => (
<Avatar.Icon size={iconProps.size} icon="podium-gold" />
)}
/>
<Card.Content>

5
src/components/Amicale/Vote/VoteSelect.js
View file

@ -8,6 +8,7 @@ import ConnectionManager from '../../../managers/ConnectionManager';
import LoadingConfirmDialog from '../../Dialogs/LoadingConfirmDialog';
import ErrorDialog from '../../Dialogs/ErrorDialog';
import type {VoteTeamType} from '../../../screens/Amicale/VoteScreen';
import type {CardTitleIconPropsType} from '../../../constants/PaperStyles';
type PropsType = {
teams: Array<VoteTeamType>,
@ -99,8 +100,8 @@ export default class VoteSelect extends React.PureComponent<
<Card.Title
title={i18n.t('screens.vote.select.title')}
subtitle={i18n.t('screens.vote.select.subtitle')}
left={({size}: {size: number}): React.Node => (
<Avatar.Icon size={size} icon="alert-decagram" />
left={(iconProps: CardTitleIconPropsType): React.Node => (
<Avatar.Icon size={iconProps.size} icon="alert-decagram" />
)}
/>
<Card.Content>

5
src/components/Amicale/Vote/VoteTease.js
View file

@ -4,6 +4,7 @@ import * as React from 'react';
import {Avatar, Card, Paragraph} from 'react-native-paper';
import {StyleSheet} from 'react-native';
import i18n from 'i18n-js';
import type {CardTitleIconPropsType} from '../../../constants/PaperStyles';
type PropsType = {
startDate: string,
@ -30,8 +31,8 @@ export default class VoteTease extends React.Component<PropsType> {
<Card.Title
title={i18n.t('screens.vote.tease.title')}
subtitle={i18n.t('screens.vote.tease.subtitle')}
left={({size}: {size: number}): React.Node => (
<Avatar.Icon size={size} icon="vote" />
left={(iconProps: CardTitleIconPropsType): React.Node => (
<Avatar.Icon size={iconProps.size} icon="vote" />
)}
/>
<Card.Content>

12
src/components/Amicale/Vote/VoteWait.js
View file

@ -1,15 +1,11 @@
// @flow
import * as React from 'react';
import {
ActivityIndicator,
Card,
Paragraph,
withTheme,
} from 'react-native-paper';
import {Avatar, Card, Paragraph, withTheme} from 'react-native-paper';
import {StyleSheet} from 'react-native';
import i18n from 'i18n-js';
import type {CustomThemeType} from '../../../managers/ThemeManager';
import type {CardTitleIconPropsType} from '../../../constants/PaperStyles';
type PropsType = {
startDate: string | null,
@ -45,8 +41,8 @@ class VoteWait extends React.Component<PropsType> {
: i18n.t('screens.vote.wait.titleEnded')
}
subtitle={i18n.t('screens.vote.wait.subtitle')}
left={({size}: {size: number}): React.Node => (
<ActivityIndicator size={size} />
left={(iconProps: CardTitleIconPropsType): React.Node => (
<Avatar.Icon size={iconProps.size} icon="progress-check" />
)}
/>
<Card.Content>

8
src/components/Animations/AnimatedAccordion.js
View file

@ -6,6 +6,7 @@ import {List, withTheme} from 'react-native-paper';
import Collapsible from 'react-native-collapsible';
import * as Animatable from 'react-native-animatable';
import type {CustomThemeType} from '../../managers/ThemeManager';
import type {ListIconPropsType} from '../../constants/PaperStyles';
type PropsType = {
theme: CustomThemeType,
@ -91,14 +92,13 @@ class AnimatedAccordion extends React.Component<PropsType, StateType> {
subtitle={props.subtitle}
titleStyle={state.expanded ? {color: colors.primary} : null}
onPress={this.toggleAccordion}
right={({size}: {size: number}): React.Node => (
right={(iconProps: ListIconPropsType): React.Node => (
<AnimatedListIcon
ref={this.chevronRef}
size={size}
style={iconProps.style}
icon={this.chevronIcon}
color={state.expanded ? colors.primary : null}
color={state.expanded ? colors.primary : iconProps.color}
useNativeDriver
style={{rotate: '0deg'}}
/>
)}
left={props.left}

21
src/components/Home/ActionsDashboardItem.js
View file

@ -6,6 +6,7 @@ import {View} from 'react-native';
import i18n from 'i18n-js';
import {StackNavigationProp} from '@react-navigation/stack';
import type {CustomThemeType} from '../../managers/ThemeManager';
import type {ListIconPropsType} from '../../constants/PaperStyles';
type PropsType = {
navigation: StackNavigationProp,
@ -19,19 +20,27 @@ class ActionsDashBoardItem extends React.Component<PropsType> {
}
render(): React.Node {
const {props} = this;
const {navigation} = this.props;
return (
<View>
<List.Item
title={i18n.t('screens.feedback.homeButtonTitle')}
description={i18n.t('screens.feedback.homeButtonSubtitle')}
left={({size}: {size: number}): React.Node => (
<List.Icon size={size} icon="comment-quote" />
left={(props: ListIconPropsType): React.Node => (
<List.Icon
color={props.color}
style={props.style}
icon="comment-quote"
/>
)}
right={({size}: {size: number}): React.Node => (
<List.Icon size={size} icon="chevron-right" />
right={(props: ListIconPropsType): React.Node => (
<List.Icon
color={props.color}
style={props.style}
icon="chevron-right"
/>
)}
onPress={(): void => props.navigation.navigate('feedback')}
onPress={(): void => navigation.navigate('feedback')}
style={{
paddingTop: 0,
paddingBottom: 0,

5
src/components/Home/EventDashboardItem.js
View file

@ -11,6 +11,7 @@ import {
import {StyleSheet, View} from 'react-native';
import i18n from 'i18n-js';
import type {CustomThemeType} from '../../managers/ThemeManager';
import type {CardTitleIconPropsType} from '../../constants/PaperStyles';
type PropsType = {
eventNumber: number,
@ -76,11 +77,11 @@ class EventDashBoardItem extends React.Component<PropsType> {
titleStyle={{color: textColor}}
subtitle={subtitle}
subtitleStyle={{color: textColor}}
left={(): React.Node => (
left={(iconProps: CardTitleIconPropsType): React.Node => (
<Avatar.Icon
icon="calendar-range"
color={iconColor}
size={60}
size={iconProps.size}
style={styles.avatar}
/>
)}

5
src/components/Lists/Clubs/ClubListHeader.js
View file

@ -7,6 +7,7 @@ import i18n from 'i18n-js';
import AnimatedAccordion from '../../Animations/AnimatedAccordion';
import {isItemInCategoryFilter} from '../../../utils/Search';
import type {ClubCategoryType} from '../../../screens/Amicale/Clubs/ClubListScreen';
import type {ListIconPropsType} from '../../../constants/PaperStyles';
type PropsType = {
categories: Array<ClubCategoryType>,
@ -74,8 +75,8 @@ class ClubListHeader extends React.Component<PropsType> {
<Card style={styles.card}>
<AnimatedAccordion
title={i18n.t('screens.clubs.categories')}
left={({size}: {size: number}): React.Node => (
<List.Icon size={size} icon="star" />
left={(props: ListIconPropsType): React.Node => (
<List.Icon color={props.color} style={props.style} icon="star" />
)}
opened>
<Text style={styles.text}>

25
src/components/Lists/DashboardEdit/DashboardEditItem.js
View file

@ -5,6 +5,7 @@ import {Image} from 'react-native';
import {List, withTheme} from 'react-native-paper';
import type {CustomThemeType} from '../../../managers/ThemeManager';
import type {ServiceItemType} from '../../../managers/ServicesManager';
import type {ListIconPropsType} from '../../../constants/PaperStyles';
type PropsType = {
item: ServiceItemType,
@ -21,36 +22,36 @@ class DashboardEditItem extends React.Component<PropsType> {
}
render(): React.Node {
const {props} = this;
const {item, onPress, height, isActive, theme} = this.props;
return (
<List.Item
title={props.item.title}
description={props.item.subtitle}
onPress={props.isActive ? null : props.onPress}
title={item.title}
description={item.subtitle}
onPress={isActive ? null : onPress}
left={(): React.Node => (
<Image
source={{uri: props.item.image}}
source={{uri: item.image}}
style={{
width: 40,
height: 40,
}}
/>
)}
right={({size}: {size: number}): React.Node =>
props.isActive ? (
right={(props: ListIconPropsType): React.Node =>
isActive ? (
<List.Icon
size={size}
style={props.style}
icon="check"
color={props.theme.colors.success}
color={theme.colors.success}
/>
) : null
}
style={{
height: props.height,
height,
justifyContent: 'center',
paddingLeft: 30,
backgroundColor: props.isActive
? props.theme.colors.proxiwashFinishedColor
backgroundColor: isActive
? theme.colors.proxiwashFinishedColor
: 'transparent',
}}
/>

5
src/components/Lists/PlanexGroups/GroupListAccordion.js
View file

@ -11,6 +11,7 @@ import type {
PlanexGroupCategoryType,
} from '../../../screens/Planex/GroupSelectionScreen';
import type {CustomThemeType} from '../../../managers/ThemeManager';
import type {ListIconPropsType} from '../../../constants/PaperStyles';
type PropsType = {
item: PlanexGroupCategoryType,
@ -87,10 +88,10 @@ class GroupListAccordion extends React.Component<PropsType> {
height: props.height,
justifyContent: 'center',
}}
left={({size}: {size: number}): React.Node =>
left={(iconProps: ListIconPropsType): React.Node =>
item.id === 0 ? (
<List.Icon
size={size}
style={iconProps.style}
icon="star"
color={props.theme.colors.tetrisScore}
/>

9
src/components/Lists/PlanexGroups/GroupListItem.js
View file

@ -5,6 +5,7 @@ import {IconButton, List, withTheme} from 'react-native-paper';
import * as Animatable from 'react-native-animatable';
import type {CustomThemeType} from '../../../managers/ThemeManager';
import type {PlanexGroupType} from '../../../screens/Planex/GroupSelectionScreen';
import type {ListIconPropsType} from '../../../constants/PaperStyles';
type PropsType = {
theme: CustomThemeType,
@ -61,8 +62,12 @@ class GroupListItem extends React.Component<PropsType> {
<List.Item
title={props.item.name.replace(REPLACE_REGEX, ' ')}
onPress={props.onPress}
left={({size}: {size: number}): React.Node => (
<List.Icon size={size} icon="chevron-right" />
left={(iconProps: ListIconPropsType): React.Node => (
<List.Icon
color={iconProps.color}
style={iconProps.style}
icon="chevron-right"
/>
)}
right={({size, color}: {size: number, color: string}): React.Node => (
<Animatable.View ref={this.starRef} useNativeDriver>

12
src/constants/PaperStyles.js Normal file
View file

@ -0,0 +1,12 @@
// @flow
import type {ViewStyleProp} from 'react-native/Libraries/StyleSheet/StyleSheet';
export type ListIconPropsType = {
color: string,
style: ViewStyleProp,
};
export type CardTitleIconPropsType = {
size: number,
};

35
src/screens/About/AboutScreen.js
View file

@ -8,6 +8,10 @@ import {StackNavigationProp} from '@react-navigation/stack';
import packageJson from '../../../package.json';
import CollapsibleFlatList from '../../components/Collapsible/CollapsibleFlatList';
import APP_LOGO from '../../../assets/android.icon.png';
import type {
CardTitleIconPropsType,
ListIconPropsType,
} from '../../constants/PaperStyles';
type ListItemType = {
onPressCallback: () => void,
@ -217,9 +221,9 @@ class AboutScreen extends React.Component<PropsType> {
<Card.Title
title="Campus"
subtitle={packageJson.version}
left={({size}: {size: number}): React.Node => (
left={(iconProps: CardTitleIconPropsType): React.Node => (
<Avatar.Image
size={size}
size={iconProps.size}
source={APP_LOGO}
style={{backgroundColor: 'transparent'}}
/>
@ -246,8 +250,8 @@ class AboutScreen extends React.Component<PropsType> {
<Card style={{marginBottom: 10}}>
<Card.Title
title={i18n.t('screens.about.team')}
left={({size, color}: {size: number, color: string}): React.Node => (
<Avatar.Icon size={size} color={color} icon="account-multiple" />
left={(iconProps: CardTitleIconPropsType): React.Node => (
<Avatar.Icon size={iconProps.size} icon="account-multiple" />
)}
/>
<Card.Content>
@ -296,14 +300,10 @@ class AboutScreen extends React.Component<PropsType> {
* @param props
* @return {*}
*/
static getChevronIcon({
size,
color,
}: {
size: number,
color: string,
}): React.Node {
return <List.Icon size={size} color={color} icon="chevron-right" />;
static getChevronIcon(props: ListIconPropsType): React.Node {
return (
<List.Icon color={props.color} style={props.style} icon="chevron-right" />
);
}
/**
@ -313,11 +313,10 @@ class AboutScreen extends React.Component<PropsType> {
* @param props
* @return {*}
*/
static getItemIcon(
item: ListItemType,
{size, color}: {size: number, color: string},
): React.Node {
return <List.Icon size={size} color={color} icon={item.icon} />;
static getItemIcon(item: ListItemType, props: ListIconPropsType): React.Node {
return (
<List.Icon color={props.color} style={props.style} icon={item.icon} />
);
}
/**
@ -326,7 +325,7 @@ class AboutScreen extends React.Component<PropsType> {
* @returns {*}
*/
getCardItem = ({item}: {item: ListItemType}): React.Node => {
const getItemIcon = (props: {size: number, color: string}): React.Node =>
const getItemIcon = (props: ListIconPropsType): React.Node =>
AboutScreen.getItemIcon(item, props);
if (item.showChevron) {
return (

38
src/screens/Amicale/AmicaleContactScreen.js
View file

@ -2,11 +2,15 @@
import * as React from 'react';
import {FlatList, Image, Linking, View} from 'react-native';
import {Card, List, Text, withTheme} from 'react-native-paper';
import {Card, List, Text, withTheme, Avatar} from 'react-native-paper';
import i18n from 'i18n-js';
import type {MaterialCommunityIconsGlyphs} from 'react-native-vector-icons/MaterialCommunityIcons';
import CollapsibleFlatList from '../../components/Collapsible/CollapsibleFlatList';
import AMICALE_LOGO from '../../../assets/amicale.png';
import type {
CardTitleIconPropsType,
ListIconPropsType,
} from '../../constants/PaperStyles';
type DatasetItemType = {
name: string,
@ -74,14 +78,12 @@ class AmicaleContactScreen extends React.Component<null> {
keyExtractor = (item: DatasetItemType): string => item.email;
getChevronIcon = ({
size,
color,
}: {
size: number,
color: string,
}): React.Node => (
<List.Icon size={size} color={color} icon="chevron-right" />
getChevronIcon = (iconProps: ListIconPropsType): React.Node => (
<List.Icon
color={iconProps.color}
style={iconProps.style}
icon="chevron-right"
/>
);
getRenderItem = ({item}: {item: DatasetItemType}): React.Node => {
@ -92,8 +94,12 @@ class AmicaleContactScreen extends React.Component<null> {
<List.Item
title={item.name}
description={item.email}
left={({size, color}: {size: number, color: string}): React.Node => (
<List.Icon size={size} color={color} icon={item.icon} />
left={(iconProps: ListIconPropsType): React.Node => (
<List.Icon
color={iconProps.color}
style={iconProps.style}
icon={item.icon}
/>
)}
right={this.getChevronIcon}
onPress={onPress}
@ -123,14 +129,8 @@ class AmicaleContactScreen extends React.Component<null> {
<Card.Title
title={i18n.t('screens.amicaleAbout.title')}
subtitle={i18n.t('screens.amicaleAbout.subtitle')}
left={({
size,
color,
}: {
size: number,
color: string,
}): React.Node => (
<List.Icon size={size} color={color} icon="information" />
left={(iconProps: CardTitleIconPropsType): React.Node => (
<Avatar.Icon size={iconProps.size} icon="information" />
)}
/>
<Card.Content>

7
src/screens/Amicale/Clubs/ClubAboutScreen.js
View file

@ -2,11 +2,12 @@
import * as React from 'react';
import {Image, View} from 'react-native';
import {Card, List, Text, withTheme} from 'react-native-paper';
import {Card, Avatar, Text, withTheme} from 'react-native-paper';
import i18n from 'i18n-js';
import Autolink from 'react-native-autolink';
import CollapsibleScrollView from '../../../components/Collapsible/CollapsibleScrollView';
import AMICALE_ICON from '../../../../assets/amicale.png';
import type {CardTitleIconPropsType} from '../../../constants/PaperStyles';
const CONTACT_LINK = 'clubs@amicale-insat.fr';
@ -35,8 +36,8 @@ class ClubAboutScreen extends React.Component<null> {
<Card.Title
title={i18n.t('screens.clubs.about.title')}
subtitle={i18n.t('screens.clubs.about.subtitle')}
left={({size}: {size: number}): React.Node => (
<List.Icon size={size} icon="information" />
left={(iconProps: CardTitleIconPropsType): React.Node => (
<Avatar.Icon size={iconProps.size} icon="information" />
)}
/>
<Card.Content>

5
src/screens/Amicale/Clubs/ClubDisplayScreen.js
View file

@ -21,6 +21,7 @@ import type {CustomThemeType} from '../../../managers/ThemeManager';
import {ERROR_TYPE} from '../../../utils/WebData';
import CollapsibleScrollView from '../../../components/Collapsible/CollapsibleScrollView';
import type {ApiGenericDataType} from '../../../utils/WebData';
import type {CardTitleIconPropsType} from '../../../constants/PaperStyles';
type PropsType = {
navigation: StackNavigationProp,
@ -133,9 +134,9 @@ class ClubDisplayScreen extends React.Component<PropsType> {
? i18n.t('screens.clubs.managersSubtitle')
: i18n.t('screens.clubs.managersUnavailable')
}
left={({size}: {size: number}): React.Node => (
left={(iconProps: CardTitleIconPropsType): React.Node => (
<Avatar.Icon
size={size}
size={iconProps.size}
style={{backgroundColor: 'transparent'}}
color={
hasManagers

38
src/screens/Amicale/ProfileScreen.js
View file

@ -25,6 +25,10 @@ import Mascot, {MASCOT_STYLE} from '../../components/Mascot/Mascot';
import ServicesManager, {SERVICES_KEY} from '../../managers/ServicesManager';
import CollapsibleFlatList from '../../components/Collapsible/CollapsibleFlatList';
import type {ServiceItemType} from '../../managers/ServicesManager';
import type {
CardTitleIconPropsType,
ListIconPropsType,
} from '../../constants/PaperStyles';
type PropsType = {
navigation: StackNavigationProp,
@ -229,11 +233,11 @@ class ProfileScreen extends React.Component<PropsType, StateType> {
<List.Item
title={title}
description={subtitle}
left={({size}: {size: number}): React.Node => (
left={(props: ListIconPropsType): React.Node => (
<List.Icon
size={size}
style={props.style}
icon={icon}
color={field != null ? null : theme.colors.textDisabled}
color={field != null ? props.color : theme.colors.textDisabled}
/>
)}
/>
@ -252,9 +256,9 @@ class ProfileScreen extends React.Component<PropsType, StateType> {
<Card.Title
title={`${this.data.first_name} ${this.data.last_name}`}
subtitle={this.data.email}
left={({size}: {size: number}): React.Node => (
left={(iconProps: CardTitleIconPropsType): React.Node => (
<Avatar.Icon
size={size}
size={iconProps.size}
icon="account"
color={theme.colors.primary}
style={styles.icon}
@ -305,9 +309,9 @@ class ProfileScreen extends React.Component<PropsType, StateType> {
<Card.Title
title={i18n.t('screens.profile.clubs')}
subtitle={i18n.t('screens.profile.clubsSubtitle')}
left={({size}: {size: number}): React.Node => (
left={(iconProps: CardTitleIconPropsType): React.Node => (
<Avatar.Icon
size={size}
size={iconProps.size}
icon="account-group"
color={theme.colors.primary}
style={styles.icon}
@ -334,9 +338,9 @@ class ProfileScreen extends React.Component<PropsType, StateType> {
<Card.Title
title={i18n.t('screens.profile.membership')}
subtitle={i18n.t('screens.profile.membershipSubtitle')}
left={({size}: {size: number}): React.Node => (
left={(iconProps: CardTitleIconPropsType): React.Node => (
<Avatar.Icon
size={size}
size={iconProps.size}
icon="credit-card"
color={theme.colors.primary}
style={styles.icon}
@ -366,9 +370,9 @@ class ProfileScreen extends React.Component<PropsType, StateType> {
? i18n.t('screens.profile.membershipPayed')
: i18n.t('screens.profile.membershipNotPayed')
}
left={({size}: {size: number}): React.Node => (
left={(props: ListIconPropsType): React.Node => (
<List.Icon
size={size}
style={props.style}
color={state ? theme.colors.success : theme.colors.danger}
icon={state ? 'check' : 'close'}
/>
@ -389,13 +393,17 @@ class ProfileScreen extends React.Component<PropsType, StateType> {
this.openClubDetailsScreen(item.id);
};
let description = i18n.t('screens.profile.isMember');
let icon = ({size, color}: {size: number, color: string}): React.Node => (
<List.Icon size={size} color={color} icon="chevron-right" />
let icon = (props: ListIconPropsType): React.Node => (
<List.Icon color={props.color} style={props.style} icon="chevron-right" />
);
if (item.is_manager) {
description = i18n.t('screens.profile.isManager');
icon = ({size}: {size: number}): React.Node => (
<List.Icon size={size} icon="star" color={theme.colors.primary} />
icon = (props: ListIconPropsType): React.Node => (
<List.Icon
style={props.style}
icon="star"
color={theme.colors.primary}
/>
);
}
return (

21
src/screens/Other/FeedbackScreen.js
View file

@ -6,6 +6,7 @@ import i18n from 'i18n-js';
import {Linking} from 'react-native';
import type {CustomThemeType} from '../../managers/ThemeManager';
import CollapsibleScrollView from '../../components/Collapsible/CollapsibleScrollView';
import type {CardTitleIconPropsType} from '../../constants/PaperStyles';
type PropsType = {
theme: CustomThemeType,
@ -91,14 +92,8 @@ class FeedbackScreen extends React.Component<PropsType> {
<Card.Title
title={i18n.t('screens.feedback.bugs')}
subtitle={i18n.t('screens.feedback.bugsSubtitle')}
left={({
size,
color,
}: {
size: number,
color: number,
}): React.Node => (
<Avatar.Icon size={size} color={color} icon="bug" />
left={(iconProps: CardTitleIconPropsType): React.Node => (
<Avatar.Icon size={iconProps.size} icon="bug" />
)}
/>
<Card.Content>
@ -114,14 +109,8 @@ class FeedbackScreen extends React.Component<PropsType> {
<Card.Title
title={i18n.t('screens.feedback.title')}
subtitle={i18n.t('screens.feedback.feedbackSubtitle')}
left={({
size,
color,
}: {
size: number,
color: number,
}): React.Node => (
<Avatar.Icon size={size} color={color} icon="comment" />
left={(iconProps: CardTitleIconPropsType): React.Node => (
<Avatar.Icon size={iconProps.size} icon="comment" />
)}
/>
<Card.Content>

45
src/screens/Other/Settings/SettingsScreen.js
View file

@ -11,6 +11,7 @@ import ThemeManager from '../../../managers/ThemeManager';
import AsyncStorageManager from '../../../managers/AsyncStorageManager';
import CustomSlider from '../../../components/Overrides/CustomSlider';
import CollapsibleScrollView from '../../../components/Collapsible/CollapsibleScrollView';
import type {ListIconPropsType} from '../../../constants/PaperStyles';
type PropsType = {
navigation: StackNavigationProp,
@ -171,8 +172,8 @@ class SettingsScreen extends React.Component<PropsType, StateType> {
<List.Item
title={title}
description={subtitle}
left={({size, color}: {size: number, color: number}): React.Node => (
<List.Icon size={size} color={color} icon={icon} />
left={(props: ListIconPropsType): React.Node => (
<List.Icon color={props.color} style={props.style} icon={icon} />
)}
right={(): React.Node => (
<Switch value={state} onValueChange={onPressCallback} />
@ -196,11 +197,15 @@ class SettingsScreen extends React.Component<PropsType, StateType> {
onPress={() => {
navigation.navigate(route);
}}
left={({size, color}: {size: number, color: number}): React.Node => (
<List.Icon size={size} color={color} icon={icon} />
left={(props: ListIconPropsType): React.Node => (
<List.Icon color={props.color} style={props.style} icon={icon} />
)}
right={({size, color}: {size: number, color: number}): React.Node => (
<List.Icon size={size} color={color} icon="chevron-right" />
right={(props: ListIconPropsType): React.Node => (
<List.Icon
color={props.color}
style={props.style}
icon="chevron-right"
/>
)}
onLongPress={onLongPress}
/>
@ -249,14 +254,12 @@ class SettingsScreen extends React.Component<PropsType, StateType> {
<List.Item
title={i18n.t('screens.settings.startScreen')}
description={i18n.t('screens.settings.startScreenSub')}
left={({
size,
color,
}: {
size: number,
color: number,
}): React.Node => (
<List.Icon size={size} color={color} icon="power" />
left={(props: ListIconPropsType): React.Node => (
<List.Icon
color={props.color}
style={props.style}
icon="power"
/>
)}
/>
{this.getStartScreenPicker()}
@ -274,14 +277,12 @@ class SettingsScreen extends React.Component<PropsType, StateType> {
<List.Item
title={i18n.t('screens.settings.proxiwashNotifReminder')}
description={i18n.t('screens.settings.proxiwashNotifReminderSub')}
left={({
size,
color,
}: {
size: number,
color: number,
}): React.Node => (
<List.Icon size={size} color={color} icon="washing-machine" />
left={(props: ListIconPropsType): React.Node => (
<List.Icon
color={props.color}
style={props.style}
icon="washing-machine"
/>
)}
/>
<View style={{marginLeft: 30}}>

43
src/screens/Proxiwash/ProxiwashAboutScreen.js
View file

@ -3,9 +3,10 @@
import * as React from 'react';
import {Image, View} from 'react-native';
import i18n from 'i18n-js';
import {Card, List, Paragraph, Text, Title} from 'react-native-paper';
import {Card, Avatar, Paragraph, Text, Title} from 'react-native-paper';
import CustomTabBar from '../../components/Tabbar/CustomTabBar';
import CollapsibleScrollView from '../../components/Collapsible/CollapsibleScrollView';
import type {CardTitleIconPropsType} from '../../constants/PaperStyles';
const LOGO = 'https://etud.insa-toulouse.fr/~amicale_app/images/Proxiwash.png';
@ -35,14 +36,8 @@ export default class ProxiwashAboutScreen extends React.Component<null> {
<Card style={{margin: 5}}>
<Card.Title
title={i18n.t('screens.proxiwash.dryer')}
left={({
size,
color,
}: {
size: number,
color: string,
}): React.Node => (
<List.Icon size={size} color={color} icon="tumble-dryer" />
left={(iconProps: CardTitleIconPropsType): React.Node => (
<Avatar.Icon size={iconProps.size} icon="tumble-dryer" />
)}
/>
<Card.Content>
@ -56,14 +51,8 @@ export default class ProxiwashAboutScreen extends React.Component<null> {
<Card style={{margin: 5}}>
<Card.Title
title={i18n.t('screens.proxiwash.washer')}
left={({
size,
color,
}: {
size: number,
color: string,
}): React.Node => (
<List.Icon size={size} color={color} icon="washing-machine" />
left={(iconProps: CardTitleIconPropsType): React.Node => (
<Avatar.Icon size={iconProps.size} icon="washing-machine" />
)}
/>
<Card.Content>
@ -77,14 +66,8 @@ export default class ProxiwashAboutScreen extends React.Component<null> {
<Card style={{margin: 5}}>
<Card.Title
title={i18n.t('screens.proxiwash.tariffs')}
left={({
size,
color,
}: {
size: number,
color: string,
}): React.Node => (
<List.Icon size={size} color={color} icon="circle-multiple" />
left={(iconProps: CardTitleIconPropsType): React.Node => (
<Avatar.Icon size={iconProps.size} icon="circle-multiple" />
)}
/>
<Card.Content>
@ -96,14 +79,8 @@ export default class ProxiwashAboutScreen extends React.Component<null> {
style={{margin: 5, marginBottom: CustomTabBar.TAB_BAR_HEIGHT + 20}}>
<Card.Title
title={i18n.t('screens.proxiwash.paymentMethods')}
left={({
size,
color,
}: {
size: number,
color: string,
}): React.Node => (
<List.Icon size={size} color={color} icon="cash" />
left={(iconProps: CardTitleIconPropsType): React.Node => (
<Avatar.Icon size={iconProps.size} icon="cash" />
)}
/>
<Card.Content>

23
src/screens/Services/Proximo/ProximoAboutScreen.js
View file

@ -3,9 +3,10 @@
import * as React from 'react';
import {Image, View} from 'react-native';
import i18n from 'i18n-js';
import {Card, List, Paragraph, Text} from 'react-native-paper';
import {Card, Avatar, Paragraph, Text} from 'react-native-paper';
import CustomTabBar from '../../../components/Tabbar/CustomTabBar';
import CollapsibleScrollView from '../../../components/Collapsible/CollapsibleScrollView';
import type {CardTitleIconPropsType} from '../../../constants/PaperStyles';
const LOGO = 'https://etud.insa-toulouse.fr/~amicale_app/images/Proximo.png';
@ -35,14 +36,8 @@ export default class ProximoAboutScreen extends React.Component<null> {
<Card style={{margin: 5}}>
<Card.Title
title={i18n.t('screens.proximo.openingHours')}
left={({
size,
color,
}: {
size: number,
color: string,
}): React.Node => (
<List.Icon size={size} color={color} icon="clock-outline" />
left={(iconProps: CardTitleIconPropsType): React.Node => (
<Avatar.Icon size={iconProps.size} icon="clock-outline" />
)}
/>
<Card.Content>
@ -53,14 +48,8 @@ export default class ProximoAboutScreen extends React.Component<null> {
style={{margin: 5, marginBottom: CustomTabBar.TAB_BAR_HEIGHT + 20}}>
<Card.Title
title={i18n.t('screens.proximo.paymentMethods')}
left={({
size,
color,
}: {
size: number,
color: string,
}): React.Node => (
<List.Icon size={size} color={color} icon="cash" />
left={(iconProps: CardTitleIconPropsType): React.Node => (
<Avatar.Icon size={iconProps.size} icon="cash" />
)}
/>
<Card.Content>

13
src/screens/Services/Proximo/ProximoMainScreen.js
View file

@ -10,6 +10,7 @@ import MaterialHeaderButtons, {
} from '../../../components/Overrides/CustomHeaderButton';
import type {CustomThemeType} from '../../../managers/ThemeManager';
import type {SectionListDataType} from '../../../components/Screens/WebSectionList';
import type {ListIconPropsType} from '../../../constants/PaperStyles';
const DATA_URL = 'https://etud.insa-toulouse.fr/~proximo/data/stock-v2.json';
const LIST_ITEM_HEIGHT = 84;
@ -199,15 +200,19 @@ class ProximoMainScreen extends React.Component<PropsType> {
title={item.type.name}
description={subtitle}
onPress={onPress}
left={({size}: {size: number}): React.Node => (
left={(props: ListIconPropsType): React.Node => (
<List.Icon
size={size}
style={props.style}
icon={item.type.icon}
color={theme.colors.primary}
/>
)}
right={({size, color}: {size: number, color: string}): React.Node => (
<List.Icon size={size} color={color} icon="chevron-right" />
right={(props: ListIconPropsType): React.Node => (
<List.Icon
color={props.color}
style={props.style}
icon="chevron-right"
/>
)}
style={{
height: LIST_ITEM_HEIGHT,

4
src/screens/Services/ServicesScreen.js
View file

@ -118,9 +118,7 @@ class ServicesScreen extends React.Component<PropsType> {
title={item.title}
subtitle={item.subtitle}
left={(): React.Node => this.getListTitleImage(item.image)}
right={({size}: {size: number}): React.Node => (
<List.Icon size={size} icon="chevron-right" />
)}
right={(): React.Node => <List.Icon icon="chevron-right" />}
/>
<CardList dataset={item.content} isHorizontal />
</View>