react-native-multistep/lib/commonjs/index.js

Create multi-step forms with ease in your React Native app

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.MultiStepForm = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _constants = require("./constants.js");
var _styles = require("./styles.js");
var _jsxRuntime = require("react/jsx-runtime");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
const MultiStepForm = exports.MultiStepForm = /*#__PURE__*/(0, _react.forwardRef)(({
  stepsContent,
  onStepChange,
  onStepForward,
  onStepBackward,
  backButtonLabel = _constants.BACK,
  nextButtonLabel = _constants.NEXT,
  doneButtonLabel = _constants.DONE,
  onComplete,
  style,
  nextButtonStyle,
  previousButtonStyle,
  doneButtonStyle,
  stepsContainerStyle,
  activeStepStyle,
  inactiveStepStyle,
  contentContainerStyle,
  buttonsContainerStyle,
  lineColor,
  activeLineColor
}, ref) => {
  const totalSteps = stepsContent.length;
  const [step, setStep] = (0, _react.useState)(1);
  if (totalSteps === 0 || !stepsContent) {
    throw new Error('Missing steps content');
  }

  // Step transition animations
  const [scaleAnim] = (0, _react.useState)(new _reactNative.Animated.Value(1));
  const changeStep = direction => {
    setStep(prevStep => {
      const newStep = direction === 'next' ? Math.min(prevStep + 1, totalSteps) : Math.max(prevStep - 1, 1);
      _reactNative.Animated.timing(scaleAnim, {
        toValue: 1.1,
        duration: 200,
        useNativeDriver: true
      }).start(() => {
        _reactNative.Animated.timing(scaleAnim, {
          toValue: 1,
          duration: 200,
          useNativeDriver: true
        }).start();
      });
      direction === 'next' ? onStepForward?.(newStep) : onStepBackward?.(newStep);
      onStepChange?.(newStep);
      if (newStep === totalSteps) onComplete?.(newStep);
      return newStep;
    });
  };

  // Expose methods to parent component via ref
  (0, _react.useImperativeHandle)(ref, () => ({
    goToStep: targetStep => {
      setStep(Math.min(Math.max(targetStep, 1), totalSteps));
      onStepChange?.(targetStep);
    }
  }));
  const stepIndicators = _react.default.useMemo(() => {
    return Array.from({
      length: totalSteps
    }, (_, i) => {
      const isActive = i + 1 <= step;
      const isCurrent = i + 1 === step;
      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
        style: [_styles.styles.stepContainer, stepsContainerStyle],
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
          style: [_styles.styles.stepIndicator, isActive ? [_styles.styles.activeStep, activeStepStyle, {
            transform: [{
              scale: isCurrent ? scaleAnim : 1
            }]
          }] : inactiveStepStyle],
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
            style: [_styles.styles.stepText, isActive && _styles.styles.activeStepText],
            children: i + 1
          })
        }), i + 1 < totalSteps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
          style: [_styles.styles.line, {
            backgroundColor: lineColor
          }, i + 1 < step && [_styles.styles.activeLine, {
            backgroundColor: activeLineColor
          }]]
        })]
      }, i);
    });
  }, [totalSteps, step, stepsContainerStyle, activeStepStyle, scaleAnim, inactiveStepStyle, lineColor, activeLineColor]);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
    style: [_styles.styles.container, style],
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
      style: _styles.styles.indicatorContainer,
      children: stepIndicators
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
      style: [_styles.styles.contentContainer, contentContainerStyle],
      children: stepsContent[step - 1]
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
      style: [_styles.styles.fixedFooter, buttonsContainerStyle],
      children: [step > 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
        onPress: () => changeStep('previous'),
        style: [_styles.styles.button, _styles.styles.backButton, previousButtonStyle],
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
          style: _styles.styles.backButtonText,
          children: backButtonLabel
        })
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
        onPress: () => changeStep('next'),
        style: [_styles.styles.button, _styles.styles.nextButton, step < totalSteps ? nextButtonStyle : doneButtonStyle],
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
          style: _styles.styles.nextButtonText,
          children: step < totalSteps ? nextButtonLabel : doneButtonLabel
        })
      })]
    })]
  });
});
//# sourceMappingURL=index.js.map