Home Reference Source

src/views/assessment/drawing/components/StrokeWidthIndicator.js

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

import {ColorPalette} from '../../../../utils/ColorConstants';

/**
 * Component displaying the size of the drawing stroke.
 * @param {Object} props - Properties
 * @param {number} props.strokeWidth - How wide the stroke of the brush currently is
 * @param {number} props.maximumStrokeWidth - The maximum width the stroke can be
 * @param {string} props.brushColor - Current color of the brush
 * @returns {Object} An indicator showing the size of the brush stroke
 */
export default function StrokeWidthIndicator(props) {
    // Retrieve props
    const strokeWidth = props.strokeWidth;
    const maximumStrokeWidth = props.maximumStrokeWidth;
    const brushColor = props.brushColor;

    return (
        <View style={[styles.container, {width: maximumStrokeWidth}]}>
            <View
                style={[
                    styles.indicator,
                    {
                        width: strokeWidth,
                        borderRadius: strokeWidth / 2,
                        backgroundColor: brushColor,
                    },
                ]}
            />
        </View>
    );
}

/**
 * Local styles
 * @type {Object}
 */
const styles = StyleSheet.create({
    container: {
        alignItems: 'center',
        justifyContent: 'center',
        width: 80,
        aspectRatio: 1,
        borderRadius: 40,
        backgroundColor: ColorPalette.PLATINUM,
    },
    indicator: {
        aspectRatio: 1,
    },
});