react-native-rue-wizard-stepper
Version:
167 lines (166 loc) • 5.99 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importDefault(require("react"));
const react_native_1 = require("react-native");
const hooks_1 = require("../hooks");
const StepIcon = ({ label, labelStyle, stepNumber, isActiveStep, isCompletedStep, completedStepIconColor = "#4BB543", inactiveStepIconColor = "lightgray", activeStepIconColor = "#87CEEB", activeStepNumColor = "white", completeStepNumColor = "white", disabledStepNumColor = "black", showLabelAboveSteps = false, }) => {
const { width } = (0, react_native_1.useWindowDimensions)();
const { totalSteps } = (0, hooks_1.useStepper)();
let stylesConfig = {};
if (isActiveStep) {
stylesConfig = {
circleStyle: {
backgroundColor: activeStepIconColor,
shadowColor: activeStepIconColor,
shadowOffset: {
width: 0,
height: 0,
},
shadowOpacity: 0.5,
shadowRadius: 4.65,
elevation: 6,
},
stepNum: {
color: activeStepNumColor,
fontSize: 12,
},
};
}
else if (isCompletedStep) {
stylesConfig = {
circleStyle: {
backgroundColor: completedStepIconColor,
},
stepNum: {
color: completeStepNumColor,
fontSize: 12,
},
};
}
else {
stylesConfig = {
circleStyle: {
backgroundColor: inactiveStepIconColor,
},
stepNum: {
color: disabledStepNumColor,
fontSize: 12,
},
};
}
return (<react_native_1.View style={styles.stepIconContainer}>
<react_native_1.View style={styles.stepIconInnerContainer}>
{showLabelAboveSteps && (<react_native_1.View style={[
styles.labelContainer,
{
paddingTop: "2%",
alignItems: "center",
flex: 1,
height: (width * 10) / 100,
maxHeight: 50,
},
]}>
<react_native_1.Text style={[
styles.label,
labelStyle,
{
width: totalSteps > 8 ? width / 7 - 4 : width / totalSteps - 4,
color: isActiveStep
? (labelStyle === null || labelStyle === void 0 ? void 0 : labelStyle.color)
? labelStyle === null || labelStyle === void 0 ? void 0 : labelStyle.color
: "black"
: "transparent",
},
]} numberOfLines={2} minimumFontScale={0.9} adjustsFontSizeToFit={react_native_1.Platform.OS === "ios" ? true : false}>
{label}
</react_native_1.Text>
</react_native_1.View>)}
<react_native_1.View style={[
styles.stepIconCircleContainer,
showLabelAboveSteps && {
paddingBottom: "4%",
},
]}>
<react_native_1.View style={[
{
width: (width * 10) / 100,
height: (width * 10) / 100,
borderRadius: (width * 10) / 100 / 2,
justifyContent: "center",
alignItems: "center",
maxHeight: 32,
maxWidth: 32,
},
stylesConfig.circleStyle,
]}>
<react_native_1.Text style={styles.circleText}>
<react_native_1.Text style={stylesConfig === null || stylesConfig === void 0 ? void 0 : stylesConfig.stepNum}>{stepNumber}</react_native_1.Text>
</react_native_1.Text>
</react_native_1.View>
</react_native_1.View>
{!showLabelAboveSteps && (<react_native_1.View style={[
styles.labelContainer,
{
alignItems: "center",
flex: 1,
height: (width * 10) / 100,
maxHeight: 50,
},
]}>
<react_native_1.Text style={[
styles.label,
labelStyle,
{
width: totalSteps > 8 ? width / 7 - 4 : width / totalSteps - 4,
color: isActiveStep
? (labelStyle === null || labelStyle === void 0 ? void 0 : labelStyle.color)
? labelStyle === null || labelStyle === void 0 ? void 0 : labelStyle.color
: "black"
: "transparent",
},
]} numberOfLines={2} minimumFontScale={0.9} adjustsFontSizeToFit={react_native_1.Platform.OS === "ios"}>
{label}
</react_native_1.Text>
</react_native_1.View>)}
</react_native_1.View>
</react_native_1.View>);
};
exports.default = StepIcon;
const styles = react_native_1.StyleSheet.create({
stepIconContainer: {
width: "100%",
height: "100%",
justifyContent: "center",
alignItems: "center",
},
stepIconInnerContainer: {
flex: 1,
width: "100%",
height: "100%",
justifyContent: "center",
alignItems: "center",
},
stepIconCircleContainer: {
width: "100%",
justifyContent: "center",
alignItems: "center",
maxHeight: 60,
maxWidth: 60,
},
labelContainer: {
width: "100%",
},
label: {
textAlign: "center",
flex: 1,
fontWeight: "bold",
fontSize: 12,
},
circleText: {
alignSelf: "center",
fontWeight: "bold",
},
});