Home Reference Source

src/views/assessment/components/buttons/DrawButton.js

import React from 'react';
import {StyleSheet} from 'react-native';

import BaseDrawingButton from './BaseDrawingButton';
import PenIconSvgr from '../../../../assets/iconsSvgr/PenIconSvgr';

import {ButtonPosition} from '../../../../utils/DimensionsConstants';

/**
 * The button clicked when activating the pen.
 * @param {Object} props - Properties
 * @param {ButtonPosition} props.position - Positioning of the button
 * @param {string} props.fillColor - Color to fill the tip of the pen
 * @param {function} props.onPress - Action for the button
 * @returns {Object} The button clicked when activating the pen
 */
export default function DrawButton(props) {
    // Retrieve props
    const position = props.position;
    const fillColor = props.fillColor; // the icon of the pen takes this color
    const onPressAction = props.onPress;

    return (
        <BaseDrawingButton position={position} onPress={onPressAction}>
            <PenIconSvgr style={styles.icon} fillColor={fillColor} />
        </BaseDrawingButton>
    );
}

/**
 * Local styles
 * @type {Object}
 */
const styles = StyleSheet.create({
    icon: {
        flex: 1,
        width: '100%',
        height: '100%',
    },
});