react-native-ui-lib/typings/components/stepper/index.js

[](https://travis-ci.org/wix/react-native-ui-lib) [](https://www.npmjs.com/package/react-native-ui-lib) [![NPM Down

import React from "react";
import { Text, View } from "react-native";
import _ from "lodash";
import createStyles from "./style";
import { BaseComponent } from "../../commons";
import StepperButton from "./StepperButton";
/**
 * @description: Stepper component with increase and decrease buttons
 * @gif: https://media.giphy.com/media/3oFzm47bk0v4WV15O8/giphy.gif
 * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/FormScreen.js
 */
export default class Stepper extends BaseComponent {
    constructor(props) {
        super(props);
        this.state = {
            value: props.initialValue
        };
    }
    generateStyles() {
        this.styles = createStyles(this.props.size);
    }
    getLabel() {
        return [this.state.value, this.props.label].join(" ");
    }
    getDisabledState() {
        const minusDisabled = this.state.value === this.props.min;
        const plusDisabled = this.state.value === this.props.max;
        return { minusDisabled, plusDisabled };
    }
    updateValue(value) {
        let newValue = _.max([value, this.props.min]);
        newValue = _.min([newValue, this.props.max]);
        if (this.state.value !== newValue) {
            this.setState({
                value: newValue
            }, () => {
                if (this.props.onValueChange) {
                    this.props.onValueChange(newValue);
                }
            });
        }
    }
    render() {
        const { minusDisabled, plusDisabled } = this.getDisabledState();
        return (<View style={[this.styles.container, this.props.containerStyle]}>
        <View style={this.styles.title}>
          <Text testID={"label"} style={this.styles.titleText}>
            {this.getLabel()}
          </Text>
        </View>
        <View style={this.styles.buttons}>
          <StepperButton label="-" testId={"decrease"} styles={this.styles} disabled={minusDisabled} onPress={() => this.updateValue(this.state.value - 1)}/>
          <View style={this.styles.separator}/>
          <StepperButton label="+" testId={"increase"} styles={this.styles} disabled={plusDisabled} onPress={() => this.updateValue(this.state.value + 1)}/>
        </View>
      </View>);
    }
}
Stepper.displayName = "Stepper";