Home Reference Source

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,
    },
});