diff --git a/components/Card.js b/components/Card.js index a2816c0b..47cdfd04 100644 --- a/components/Card.js +++ b/components/Card.js @@ -1,7 +1,8 @@ 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() { @@ -9,17 +10,8 @@ export default class Card extends React.Component { + onPress={this.props.onPress} + style={[styles.inner]}> {this.props.children} @@ -27,6 +19,13 @@ export default class Card extends React.Component { } } +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 index b830af64..660d2faa 100644 --- a/components/SingleColorCard.js +++ b/components/SingleColorCard.js @@ -32,33 +32,41 @@ const SingleColorCard = function (props) { - - - {props.color.color + (props.color.name ? ' (' + props.color.name + ')' : '')} - - - { - event.preventDefault(); - event.stopPropagation(); - setAnimationType('fadeOutRightBig'); - onColorDeleteLocal(); - }} - style={styles.actionButton}> - - + { + e.preventDefault(); + e.stopPropagation(); + }}> + + + {props.color.color + (props.color.name ? ' (' + props.color.name + ')' : '')} + + + { + event.preventDefault(); + event.stopPropagation(); + setAnimationType('fadeOutRightBig'); + onColorDeleteLocal(); + }} + style={styles.actionButton}> + + + + + { + props.onPressDrag(); + }}> + + + - - { - e.preventDefault(); - e.stopPropagation(); - props.onPressDrag(); - }}> - - - - + ) : ( @@ -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 index a9ca4c7a..5382f4ff 100644 --- 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 ( <> - - { - //notifyMessage(JSON.stringify(reorderedColors)); - updatePalette(palette.id, { ...palette, colors: reorderedColors }); - }} - /> - - - - + { + //notifyMessage(JSON.stringify(reorderedColors)); + updatePalette(palette.id, { ...palette, colors: reorderedColors }); + }} + />