react-native-rue-wizard-stepper
Version:
154 lines (153 loc) • 6.5 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importStar(require("react"));
const react_native_1 = require("react-native");
const hooks_1 = require("../hooks");
const StepIcon_1 = __importDefault(require("./StepIcon"));
const StepperFlow = (_a) => {
var _b, _c, _d, _e;
var { children, onChangeStep, showLabelAboveSteps = true, completedBarColor, incompletedBarColor } = _a, props = __rest(_a, ["children", "onChangeStep", "showLabelAboveSteps", "completedBarColor", "incompletedBarColor"]);
const { width } = (0, react_native_1.useWindowDimensions)();
const [stepIconWidthOffSet, setStepIconWidthOffSet] = (0, react_1.useState)([]);
const { activeStep, totalSteps } = (0, hooks_1.useStepper)();
(0, react_1.useEffect)(() => {
if (onChangeStep) {
onChangeStep();
}
}, [activeStep]);
const renderChildren = (0, react_1.useMemo)(() => {
const tmp = react_1.Children.map(children, (ele) => {
var _a;
if (ele && (0, react_1.isValidElement)(ele) && !((_a = ele === null || ele === void 0 ? void 0 : ele.props) === null || _a === void 0 ? void 0 : _a.hide)) {
return (0, react_1.cloneElement)(ele);
}
});
return tmp;
}, [children]);
const renderStepIcons = () => {
var _a, _b, _c;
let step = [];
let i = 0;
while (i !== totalSteps) {
const isCompletedStep = i < activeStep;
const isActiveStep = i === activeStep;
step.push(<react_native_1.View key={i} style={{ flex: 1 }} onLayout={({ nativeEvent: offSet }) => {
setStepIconWidthOffSet((s) => {
return [...s, offSet].slice(-totalSteps).sort((a, b) => {
return a.layout.x - b.layout.x;
});
});
}}>
<StepIcon_1.default {...Object.assign(Object.assign({}, props), { showLabelAboveSteps })} stepNumber={i + 1} isCompletedStep={isCompletedStep} isActiveStep={isActiveStep} label={(_c = (_b = (_a = renderChildren[i]) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.label) !== null && _c !== void 0 ? _c : ""}/>
</react_native_1.View>);
i++;
}
return step;
};
const calculateIndicatorTop = (widthParam) => {
const threshold = (widthParam * 10) / 100;
const isThresholdMet = threshold >= 50;
if (showLabelAboveSteps) {
return isThresholdMet ? 77 : (width * 27) / 200;
}
else {
return isThresholdMet ? 30 : threshold / 2;
}
};
const indicatorTop = (0, react_1.useMemo)(() => calculateIndicatorTop(width), [width, showLabelAboveSteps]);
return (<react_native_1.SafeAreaView style={styles.container}>
<react_native_1.View style={{
maxHeight: 115,
backgroundColor: "transparent",
}}>
<react_native_1.View style={[
styles.stepIcons,
{
maxHeight: 115,
height: (width * 20) / 100,
width: width,
},
]}>
{renderStepIcons()}
<react_native_1.View style={[
styles.stepIndicatorOuter,
{
backgroundColor: incompletedBarColor,
top: indicatorTop,
width: (_c = (_b = stepIconWidthOffSet[totalSteps - 1]) === null || _b === void 0 ? void 0 : _b.layout) === null || _c === void 0 ? void 0 : _c.x,
},
]}>
<react_native_1.View style={{
borderColor: completedBarColor,
width: (_e = (_d = stepIconWidthOffSet[activeStep]) === null || _d === void 0 ? void 0 : _d.layout) === null || _e === void 0 ? void 0 : _e.x,
borderWidth: 1.5,
}}/>
</react_native_1.View>
</react_native_1.View>
</react_native_1.View>
{<react_native_1.View style={styles.bodyContainer}>
{(0, react_1.isValidElement)(renderChildren[activeStep]) &&
(0, react_1.cloneElement)(renderChildren[activeStep])}
</react_native_1.View>}
</react_native_1.SafeAreaView>);
};
exports.default = StepperFlow;
const styles = react_native_1.StyleSheet.create({
container: {
flex: 1,
backgroundColor: "transparent",
},
stepIndicatorOuter: {
zIndex: -1,
position: "absolute",
alignSelf: "center",
},
bodyContainer: {
flex: 1,
backgroundColor: "transparent",
},
stepIcons: {
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
alignSelf: "center",
backgroundColor: "transparent",
},
});