Home Reference Source

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