src/views/assessment/drawing/components/StrokeWidthSlider.js
import React from 'react';
import {StyleSheet, View} from 'react-native';
import Slider from '@react-native-community/slider';
import StrokeWidthIndicator from './StrokeWidthIndicator';
import {ColorPalette} from '../../../../utils/ColorConstants';
import {globalStyles} from '../../../../styles/styles';
/**
* Component with slider controlling the width of the pen stroke, and an
* indicator displaying the stroke size.
* @param {Object} props - Properties
* @param {Object} props.componentStyle - The style for this component
* @param {string} props.brushColor - The current color of the brush
* @param {number} props.strokeWidth - The current width of the stroke
* @param {number} props.minimumStrokeWidth - The minimum width of the stroke
* @param {number} props.maximumStrokeWidth - The maximum width of the stroke
* @param {function} props.updateStrokeWidth - Function to update stroke width
* @returns {Object} The slider with indicator
*/
export default function StrokeWidthSlider(props) {
// Retrieve props
const componentStyle = props.componentStyle;
const brushColor = props.brushColor;
const strokeWidth = props.strokeWidth;
const minimumStrokeWidth = props.minimumStrokeWidth;
const maximumStrokeWidth = props.maximumStrokeWidth;
const updateStrokeWidth = props.updateStrokeWidth;
return (
<View
style={[
styles.container,
globalStyles.lightShadow,
componentStyle,
]}>
<StrokeWidthIndicator
strokeWidth={strokeWidth}
maximumStrokeWidth={maximumStrokeWidth}
brushColor={brushColor}
/>
<Slider
style={styles.slider}
onValueChange={value => {
updateStrokeWidth(parseInt(value));
}}
value={strokeWidth}
minimumValue={minimumStrokeWidth}
maximumValue={maximumStrokeWidth}
minimumTrackImage={require('../../../../assets/slider/minTrackSlider.png')}
maximumTrackImage={require('../../../../assets/slider/maxTrackSlider.png')}
thumbImage={require('../../../../assets/slider/sliderThumb.png')}
/>
</View>
);
}
/**
* Local styles
* @type {Object}
*/
const styles = StyleSheet.create({
container: {
alignSelf: 'flex-end',
alignItems: 'center',
justifyContent: 'flex-start',
width: 110,
maxHeight: 260,
marginVertical: 10,
paddingTop: 20,
backgroundColor: ColorPalette.ALMOST_WHITE,
borderTopLeftRadius: 30,
borderBottomLeftRadius: 30,
},
slider: {
transform: [{rotate: '270deg'}],
position: 'relative',
width: 160,
height: 40,
top: '27%',
},
});