12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091 |
- // @flow
-
- import * as React from 'react';
- 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,
- onPress: () => void,
- onStarPress: () => void,
- item: PlanexGroupType,
- favorites: Array<PlanexGroupType>,
- height: number,
- };
-
- const REPLACE_REGEX = /_/g;
-
- class GroupListItem extends React.Component<PropsType> {
- isFav: boolean;
-
- starRef = {current: null | IconButton};
-
- constructor(props: PropsType) {
- super(props);
- this.isFav = this.isGroupInFavorites(props.favorites);
- }
-
- shouldComponentUpdate(nextProps: PropsType): boolean {
- const {favorites} = this.props;
- const favChanged = favorites.length !== nextProps.favorites.length;
- let newFavState = this.isFav;
- if (favChanged) newFavState = this.isGroupInFavorites(nextProps.favorites);
- const shouldUpdate = this.isFav !== newFavState;
- this.isFav = newFavState;
- return shouldUpdate;
- }
-
- isGroupInFavorites(favorites: Array<PlanexGroupType>): boolean {
- const {item} = this.props;
- for (let i = 0; i < favorites.length; i += 1) {
- if (favorites[i].id === item.id) return true;
- }
- return false;
- }
-
- onStarPress = () => {
- const {props} = this;
- if (this.starRef.current != null) {
- if (this.isFav) this.starRef.current.rubberBand();
- else this.starRef.current.swing();
- }
- props.onStarPress();
- };
-
- render(): React.Node {
- const {props} = this;
- const {colors} = props.theme;
- return (
- <List.Item
- title={props.item.name.replace(REPLACE_REGEX, ' ')}
- onPress={props.onPress}
- 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>
- <IconButton
- size={size}
- icon="star"
- onPress={this.onStarPress}
- color={this.isFav ? colors.tetrisScore : color}
- />
- </Animatable.View>
- )}
- style={{
- height: props.height,
- justifyContent: 'center',
- }}
- />
- );
- }
- }
-
- export default withTheme(GroupListItem);
|