Browse Source

Improve favorite buttons

Arnaud Vergnet 3 years ago
parent
commit
c522a410ab
1 changed files with 33 additions and 18 deletions
  1. 33
    18
      src/components/Lists/PlanexGroups/GroupListItem.js

+ 33
- 18
src/components/Lists/PlanexGroups/GroupListItem.js View File

@@ -1,8 +1,9 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import {IconButton, List, withTheme} from 'react-native-paper';
4
+import {List, TouchableRipple, withTheme} from 'react-native-paper';
5 5
 import * as Animatable from 'react-native-animatable';
6
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
6 7
 import type {CustomThemeType} from '../../../managers/ThemeManager';
7 8
 import type {PlanexGroupType} from '../../../screens/Planex/GroupSelectionScreen';
8 9
 import type {ListIconPropsType} from '../../../constants/PaperStyles';
@@ -21,7 +22,7 @@ const REPLACE_REGEX = /_/g;
21 22
 class GroupListItem extends React.Component<PropsType> {
22 23
   isFav: boolean;
23 24
 
24
-  starRef = {current: null | IconButton};
25
+  starRef: null | Animatable.View;
25 26
 
26 27
   constructor(props: PropsType) {
27 28
     super(props);
@@ -38,6 +39,16 @@ class GroupListItem extends React.Component<PropsType> {
38 39
     return shouldUpdate;
39 40
   }
40 41
 
42
+  onStarPress = () => {
43
+    const {props} = this;
44
+    const ref = this.starRef;
45
+    if (ref != null) {
46
+      if (this.isFav) ref.rubberBand();
47
+      else ref.swing();
48
+    }
49
+    props.onStarPress();
50
+  };
51
+
41 52
   isGroupInFavorites(favorites: Array<PlanexGroupType>): boolean {
42 53
     const {item} = this.props;
43 54
     for (let i = 0; i < favorites.length; i += 1) {
@@ -46,15 +57,6 @@ class GroupListItem extends React.Component<PropsType> {
46 57
     return false;
47 58
   }
48 59
 
49
-  onStarPress = () => {
50
-    const {props} = this;
51
-    if (this.starRef.current != null) {
52
-      if (this.isFav) this.starRef.current.rubberBand();
53
-      else this.starRef.current.swing();
54
-    }
55
-    props.onStarPress();
56
-  };
57
-
58 60
   render(): React.Node {
59 61
     const {props} = this;
60 62
     const {colors} = props.theme;
@@ -69,14 +71,27 @@ class GroupListItem extends React.Component<PropsType> {
69 71
             icon="chevron-right"
70 72
           />
71 73
         )}
72
-        right={({size, color}: {size: number, color: string}): React.Node => (
73
-          <Animatable.View ref={this.starRef} useNativeDriver>
74
-            <IconButton
75
-              size={size}
76
-              icon="star"
74
+        right={(iconProps: ListIconPropsType): React.Node => (
75
+          <Animatable.View
76
+            ref={(ref: Animatable.View) => {
77
+              this.starRef = ref;
78
+            }}
79
+            useNativeDriver>
80
+            <TouchableRipple
77 81
               onPress={this.onStarPress}
78
-              color={this.isFav ? colors.tetrisScore : color}
79
-            />
82
+              style={{
83
+                marginRight: 10,
84
+                marginLeft: 'auto',
85
+                marginTop: 'auto',
86
+                marginBottom: 'auto',
87
+              }}>
88
+              <MaterialCommunityIcons
89
+                size={30}
90
+                style={{padding: 10}}
91
+                name="star"
92
+                color={this.isFav ? colors.tetrisScore : iconProps.color}
93
+              />
94
+            </TouchableRipple>
80 95
           </Animatable.View>
81 96
         )}
82 97
         style={{

Loading…
Cancel
Save