Scroll problem palette list (#183)

* Fixed linting isses * Fixed scroll problem in paletter list
croma-app · Mar 30, 2023 · 1420b1a · 1420b1a
1 parent 6b7eec8
commit 1420b1a
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 60 deletions.
diff --git a/components/Card.js b/components/Card.js
@@ -1,32 +1,31 @@
 import * as React from 'react';
 import * as Animatable from 'react-native-animatable';
-import { StyleSheet, Platform, View, TouchableOpacity } from 'react-native';
+import { StyleSheet, View, TouchableOpacity } from 'react-native';
 import Colors from '../constants/Colors';
+import PropTypes from 'prop-types';
 
 export default class Card extends React.Component {
   render() {
     return (
       <Animatable.View animation={this.props.animationType} duration={500} useNativeDriver={true}>
         <TouchableOpacity
           onLongPress={this.props.onLongPress}
-          {...(Platform.OS === 'web'
-            ? {
-                // When scrolling the document body, the touchables might be triggered
-                // see  https://github.com/necolas/react-native-web/issues/1219
-                onClick: this.props.onPress
-              }
-            : {
-                onPress: this.props.onPress
-              })}
-          style={[styles.inner, Platform.OS === 'web' ? { boxShadow: '0px 1px 4px #888888' } : {}]}
-        >
+          onPress={this.props.onPress}
+          style={[styles.inner]}>
           <View {...this.props}>{this.props.children}</View>
         </TouchableOpacity>
       </Animatable.View>
     );
   }
 }
 
+Card.propTypes = {
+  animationType: PropTypes.string,
+  onLongPress: PropTypes.func,
+  onPress: PropTypes.func,
+  children: PropTypes.children
+};
+
 const styles = StyleSheet.create({
   inner: {
     backgroundColor: Colors.white,

diff --git a/components/SingleColorCard.js b/components/SingleColorCard.js
@@ -32,33 +32,41 @@ const SingleColorCard = function (props) {
         <Card {...props} animationType={animationType}>
           <View>
             <View style={{ backgroundColor: props.color.color, height: 100 }} />
-            <View style={styles.bottom}>
-              <Text style={styles.label}>
-                {props.color.color + (props.color.name ? ' (' + props.color.name + ')' : '')}
-              </Text>
-              <View style={styles.actionButtonsView}>
-                <TouchableOpacity
-                  onPress={(event) => {
-                    event.preventDefault();
-                    event.stopPropagation();
-                    setAnimationType('fadeOutRightBig');
-                    onColorDeleteLocal();
-                  }}
-                  style={styles.actionButton}>
-                  <FontAwesome size={20} name="trash" />
-                </TouchableOpacity>
+            <TouchableOpacity
+              onPress={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+              }}>
+              <View style={styles.bottom}>
+                <Text style={styles.label}>
+                  {props.color.color + (props.color.name ? ' (' + props.color.name + ')' : '')}
+                </Text>
+                <View style={styles.actionButtonsView}>
+                  <TouchableOpacity
+                    onPress={(event) => {
+                      event.preventDefault();
+                      event.stopPropagation();
+                      setAnimationType('fadeOutRightBig');
+                      onColorDeleteLocal();
+                    }}
+                    style={styles.actionButton}>
+                    <FontAwesome size={20} name="trash" />
+                  </TouchableOpacity>
+                </View>
+                <View style={[styles.actionButtonsView, styles.dragDropButton]}>
+                  <TouchableOpacity
+                    onPressIn={(e) => {
+                      props.onPressDrag();
+                    }}>
+                    <MaterialIcons
+                      style={{ alignItems: 'center' }}
+                      size={20}
+                      name="drag-indicator"
+                    />
+                  </TouchableOpacity>
+                </View>
               </View>
-              <View style={[styles.actionButtonsView, styles.dragDropButton]}>
-                <TouchableOpacity
-                  onPressIn={(e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    props.onPressDrag();
-                  }}>
-                  <MaterialIcons style={{ alignItems: 'center' }} size={20} name="drag-indicator" />
-                </TouchableOpacity>
-              </View>
-            </View>
+            </TouchableOpacity>
           </View>
         </Card>
       ) : (
@@ -87,10 +95,11 @@ const styles = StyleSheet.create({
   actionButtonsView: {
     flexDirection: 'row',
     alignItems: 'flex-end',
-    padding: 10
+    padding: 5
   },
   dragDropButton: {
-    marginRight: 14
+    marginRight: 10,
+    padding: 10
   },
   label: {
     flex: 1,

diff --git a/screens/PaletteScreen.js b/screens/PaletteScreen.js
@@ -14,16 +14,11 @@ import { CromaContext } from '../store/store';
 import ActionButton from 'react-native-action-button';
 import Colors from '../constants/Colors';
 import { useHeaderHeight } from '@react-navigation/elements';
-import EmptyView from '../components/EmptyView';
 import { logEvent } from '../libs/Helpers';
 import Feather from 'react-native-vector-icons/Feather';
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import { notifyMessage } from '../libs/Helpers';
-import {
-  NestableScrollContainer,
-  NestableDraggableFlatList,
-  ScaleDecorator
-} from 'react-native-draggable-flatlist';
+import DraggableFlatList, { ScaleDecorator } from 'react-native-draggable-flatlist';
 import PropTypes from 'prop-types';
 
 export default function PaletteScreen({ navigation }) {
@@ -85,20 +80,16 @@ export default function PaletteScreen({ navigation }) {
   return (
     <>
       <View style={(styles.container, { minHeight: height - useHeaderHeight() - 16 })}>
-        <NestableScrollContainer style={styles.listview} showsVerticalScrollIndicator={false}>
-          <NestableDraggableFlatList
-            data={colorsToShow}
-            renderItem={renderItem}
-            keyExtractor={keyExtractor}
-            onDragEnd={({ data: reorderedColors }) => {
-              //notifyMessage(JSON.stringify(reorderedColors));
-              updatePalette(palette.id, { ...palette, colors: reorderedColors });
-            }}
-          />
-          <EmptyView />
-          <EmptyView />
-          <EmptyView />
-        </NestableScrollContainer>
+        <DraggableFlatList
+          data={colorsToShow}
+          renderItem={renderItem}
+          keyExtractor={keyExtractor}
+          style={styles.listview}
+          onDragEnd={({ data: reorderedColors }) => {
+            //notifyMessage(JSON.stringify(reorderedColors));
+            updatePalette(palette.id, { ...palette, colors: reorderedColors });
+          }}
+        />
         <ActionButton
           offsetY={76}
           bgColor="rgba(68, 68, 68, 0.6)"