68 lines
1.7 KiB
JavaScript
68 lines
1.7 KiB
JavaScript
// @flow
|
|
|
|
import * as React from 'react';
|
|
import {IconButton, List, withTheme} from 'react-native-paper';
|
|
import type {CustomTheme} from '../../../managers/ThemeManager';
|
|
import type {PlanexGroupType} from '../../../screens/Planex/GroupSelectionScreen';
|
|
|
|
type PropsType = {
|
|
theme: CustomTheme,
|
|
onPress: () => void,
|
|
onStarPress: () => void,
|
|
item: PlanexGroupType,
|
|
height: number,
|
|
};
|
|
|
|
type StateType = {
|
|
isFav: boolean,
|
|
};
|
|
|
|
class GroupListItem extends React.Component<PropsType, StateType> {
|
|
constructor(props: PropsType) {
|
|
super(props);
|
|
this.state = {
|
|
isFav: props.item.isFav !== undefined && props.item.isFav,
|
|
};
|
|
}
|
|
|
|
shouldComponentUpdate(prevProps: PropsType, prevState: StateType): boolean {
|
|
const {isFav} = this.state;
|
|
return prevState.isFav !== isFav;
|
|
}
|
|
|
|
onStarPress = () => {
|
|
const {props} = this;
|
|
this.setState((prevState: StateType): StateType => ({
|
|
isFav: !prevState.isFav,
|
|
}));
|
|
props.onStarPress();
|
|
};
|
|
|
|
render(): React.Node {
|
|
const {props, state} = this;
|
|
const {colors} = props.theme;
|
|
return (
|
|
<List.Item
|
|
title={props.item.name}
|
|
onPress={props.onPress}
|
|
left={({size}: {size: number}): React.Node => (
|
|
<List.Icon size={size} icon="chevron-right" />
|
|
)}
|
|
right={({size, color}: {size: number, color: string}): React.Node => (
|
|
<IconButton
|
|
size={size}
|
|
icon="star"
|
|
onPress={this.onStarPress}
|
|
color={state.isFav ? colors.tetrisScore : color}
|
|
/>
|
|
)}
|
|
style={{
|
|
height: props.height,
|
|
justifyContent: 'center',
|
|
}}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default withTheme(GroupListItem);
|