react-native-progress-steps
Version:
A simple and fully customizable React Native component that implements a progress stepper UI.
72 lines (71 loc) • 4.04 kB
JavaScript
import React from 'react';
import { View, ScrollView, Text, Pressable } from 'react-native';
const ProgressStep = ({ errors = false, removeBtnRow = false, scrollable = true, activeStep = 0, stepCount = 0, buttonNextText = 'Next', buttonPreviousText = 'Previous', buttonFinishText = 'Submit', buttonNextDisabled = false, buttonPreviousDisabled = false, buttonFinishDisabled = false, buttonBottomOffset = 20, buttonTopOffset = 12, buttonHorizontalOffset = 30, buttonFillColor = '#2D2D2D', buttonNextTextColor = '#FFFFFF', buttonPreviousTextColor = '#2D2D2D', buttonFinishTextColor = '#FFFFFF', buttonBorderColor = '#2D2D2D', buttonDisabledColor = '#CDCDCD', buttonDisabledTextColor = '#FFFFFF', ...props }) => {
const isPreviousBtnHidden = activeStep === 0;
const isFirstStep = activeStep === 0;
const onNextStep = () => {
props.onNext?.();
if (!errors && props.setActiveStep) {
props.setActiveStep(activeStep + 1);
}
};
const onPreviousStep = () => {
props.onPrevious?.();
if (props.setActiveStep) {
props.setActiveStep(activeStep - 1);
}
};
const baseButtonStyle = {
height: 48,
minWidth: 120,
borderRadius: 6,
justifyContent: 'center',
alignItems: 'center',
};
const baseTextStyle = {
fontSize: 16,
fontWeight: '500',
};
const renderNextButton = () => (React.createElement(Pressable, { style: ({ pressed }) => [
baseButtonStyle,
{
backgroundColor: buttonFillColor,
opacity: pressed ? 0.8 : 1,
},
buttonNextDisabled && { backgroundColor: buttonDisabledColor },
], onPress: onNextStep, disabled: buttonNextDisabled },
React.createElement(Text, { style: [baseTextStyle, { color: buttonNextTextColor }] }, buttonNextText)));
const renderPreviousButton = () => (React.createElement(Pressable, { style: ({ pressed }) => [
baseButtonStyle,
{
borderWidth: 1,
borderColor: buttonPreviousDisabled ? 'transparent' : buttonBorderColor,
opacity: pressed ? 0.8 : 1,
},
buttonPreviousDisabled && { backgroundColor: buttonDisabledColor },
], onPress: onPreviousStep, disabled: buttonPreviousDisabled },
React.createElement(Text, { style: [baseTextStyle, { color: buttonPreviousDisabled ? buttonDisabledTextColor : buttonPreviousTextColor }] }, isFirstStep ? '' : buttonPreviousText)));
const renderSubmitButton = () => (React.createElement(Pressable, { style: ({ pressed }) => [
baseButtonStyle,
{
backgroundColor: buttonFillColor,
opacity: pressed ? 0.8 : 1,
},
buttonFinishDisabled && { backgroundColor: buttonDisabledColor },
], onPress: props.onSubmit, disabled: buttonFinishDisabled },
React.createElement(Text, { style: [baseTextStyle, { color: buttonFinishTextColor }] }, buttonFinishText)));
const Container = scrollable ? ScrollView : View;
const containerProps = scrollable ? props.scrollViewProps : props.viewProps;
return (React.createElement(View, { style: { flex: 1 } },
React.createElement(Container, { ...containerProps, style: { flex: 1, marginHorizontal: 20 } }, props.children),
!removeBtnRow && (React.createElement(View, { style: {
flexDirection: 'row',
marginTop: buttonTopOffset,
marginBottom: buttonBottomOffset,
marginHorizontal: buttonHorizontalOffset,
justifyContent: 'space-between',
} },
React.createElement(View, { style: { flex: 1, alignItems: 'flex-start' } }, !isPreviousBtnHidden && renderPreviousButton()),
React.createElement(View, { style: { flex: 1, alignItems: 'flex-end' } }, activeStep === stepCount - 1 ? renderSubmitButton() : renderNextButton())))));
};
export default ProgressStep;