src/views/assessment/components/ColorSelectorHorizontal.js
import {View, StyleSheet, TouchableOpacity, FlatList} from 'react-native';
import React from 'react';
import Animated, {SlideInDown} from 'react-native-reanimated';
import {globalStyles} from '../../../styles/styles';
import {getColors} from '../../../utils/ColorUtils';
/**
* The menu used to select a color, with horizontal scroll.
* @param {Object} props - Properties
* @param {boolean} props.showsPaperColorMenu - Whether or not the color of paper is to be changed
* @param {boolean} props.showsBrushColorMenu - Whetehr or not the color of the brush is to be changed
* @param {function} props.updatePaperColor - The function to change the color of the paper
* @param {funciton} props.updateBrushColor - The function to change the color of the brush
* @returns {Object} Menu to pick color
*/
export default function ColorSelectorHorizontal(props) {
// Retrieve props
const showsPaperColorMenu = props.showsPaperColorMenu;
const showsBrushColorMenu = props.showsBrushColorMenu;
const updatePaperColor = props.updatePaperColor;
const updateBrushColor = props.updateBrushColor;
const colorList = getColors();
return (
<Animated.View
style={[styles.animatedContainer, globalStyles.lightShadow]}
entering={SlideInDown}>
<View style={styles.flatListContainer}>
<FlatList
horizontal={true}
data={colorList}
// showsHorizontalScrollIndicator={false}
legacyImplementation={false}
renderItem={({item}) => (
<TouchableOpacity
onPress={() => {
if (showsPaperColorMenu) {
updatePaperColor(item.name);
// props.toggleColorSelector();
} else if (showsBrushColorMenu) {
updateBrushColor(item.name);
// props.toggleColorSelector();
}
}}>
<View
style={[
styles.item,
{backgroundColor: item.name},
]}
/>
</TouchableOpacity>
)}
/>
</View>
</Animated.View>
);
}
/**
* Local styles
* @type {Object}
*/
const styles = StyleSheet.create({
animatedContainer: {
position: 'absolute',
flex: 1,
width: '70%',
height: 110,
left: '18%',
bottom: 0,
justifyContent: 'center',
alignItems: 'center',
borderTopLeftRadius: 30,
borderTopRightRadius: 30,
},
flatListContainer: {
width: '93%',
height: '100%',
justifyContent: 'center',
alignContent: 'center',
alignItems: 'center',
borderRadius: 40,
},
item: {
width: 96,
height: '100%',
borderTopLeftRadius: 48,
borderTopRightRadius: 48,
marginHorizontal: 6,
alignSelf: 'center',
borderWidth: 10,
borderColor: 'white',
borderBottomWidth: 0,
},
});