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