@madeja-studio/telar/lib/module/component/AnimatedSwitch/AnimatedSwitch.js

UI component library by Madeja Studio

"use strict";

import { animated } from '@react-spring/native';
import React from 'react';
import { View } from 'react-native';
import tw from "../../tailwind/index.js";
import useAnimatedSwitch from "./useAnimatedSwitch.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * A higher-order component that shows only one of the two provided children.
 * The transition between the two is animated.
 *
 * @param props.children Components to switch in place. Two children must be provided (not one, not three).
 * @param props.visibleComponent The index of the children to show
 */
export const AnimatedSwitch = ({
  children,
  style,
  visibleComponent,
  ...props
}) => {
  const {
    aCompStyle,
    bCompStyle
  } = useAnimatedSwitch({
    visibleComponent
  });
  return /*#__PURE__*/_jsxs(View, {
    style: [tw`flex flex-shrink`, style],
    ...props,
    children: [/*#__PURE__*/_jsx(animated.View, {
      pointerEvents: visibleComponent === 0 ? 'auto' : 'none',
      style: [tw`relative fill center`, aCompStyle],
      children: children[0]
    }), /*#__PURE__*/_jsx(animated.View, {
      pointerEvents: visibleComponent === 1 ? 'auto' : 'none',
      style: [tw`absolute fill center`, bCompStyle],
      children: children[1]
    })]
  });
};
//# sourceMappingURL=AnimatedSwitch.js.map