react-native-surveys/Forms/components/IFrameContainer.js

Build your own forms, surveys and polls for your React Native apps.

import React, { memo, useEffect, useCallback, useState } from "react";
import {
  StyleSheet,
  TouchableOpacity,
  Animated,
  Easing,
  Platform
} from "react-native";
import { LoadingError } from "./LoadingError";
import Forms from "../index";
import { CloseIcon } from "../assets/icons";
import { form_closed, form_loaded } from "../api/event-emitter";
import MobileContainer from "./MobileContainer";
import { Toast } from "./Toast/Toast";
import ToastWrapper from "./Toast/ToastWrapper";

const IFrameContainer = ({
  error,
  form,
  onClose,
  onSend,
  livePreview,
  onBeforeSend
}) => {
  const [sendingError, setSendingError] = useState(false);
  const [opacityAnimation] = useState(new Animated.Value(0));
  const [translateAnimation] = useState(new Animated.Value(500));
  const onFormClose = useCallback(() => {
    onClose();
    form_closed();
  }, [onClose]);

  const onOverlayClick = event =>
    event.target === event.currentTarget && onFormClose();

  useEffect(() => {
    const onKeyUp = event => event.keyCode === 27 && onFormClose();

    document.addEventListener("keyup", onKeyUp, true);
    return () => {
      document.removeEventListener("keyup", onKeyUp, true);
    };
  }, [onFormClose]);
  useEffect(() => {
    if (form || error) {
      form_loaded();
      Animated.parallel([
        Animated.timing(opacityAnimation, {
          toValue: 1,
          duration: 500,
          easing: Easing.out(Easing.quad)
        }),
        Animated.timing(translateAnimation, {
          toValue: 0,
          duration: 500,
          easing: Easing.out(Easing.quad)
        })
      ]).start();
    }
  }, [error, form, opacityAnimation, translateAnimation]);

  if (window.innerWidth <= 500) {
    return React.createElement(MobileContainer, {
      onSend: onSend,
      onBeforeSend: onBeforeSend,
      error: error,
      form: form,
      onClose: onFormClose,
      livePreview: livePreview,
      iframe: true
    });
  }

  return React.createElement(
    TouchableOpacity,
    {
      onPress: onOverlayClick,
      activeOpacity: 1,
      style: styles.overlay
    },
    React.createElement(
      TouchableOpacity,
      {
        onPress: onFormClose,
        style: styles.closeButton
      },
      React.createElement(CloseIcon, {
        size: 24,
        white: true
      })
    ),
    error &&
      React.createElement(
        Animated.View,
        {
          style: [
            {
              opacity: opacityAnimation,
              transform: [
                {
                  translateY: translateAnimation
                }
              ]
            },
            styles.container
          ]
        },
        React.createElement(LoadingError, {
          iframe: true,
          error: error
        })
      ),
    !error &&
      form &&
      React.createElement(
        Animated.View,
        {
          style: [
            {
              opacity: opacityAnimation,
              transform: [
                {
                  translateY: translateAnimation
                }
              ]
            },
            styles.container
          ]
        },
        React.createElement(Forms, {
          onSend: onSend,
          onBeforeSend: onBeforeSend,
          form: form,
          iframe: true,
          livePreview: livePreview,
          showError: setSendingError
        })
      ),
    React.createElement(
      ToastWrapper,
      {
        verticalPosition: "top",
        horizontalPosition: "center"
      },
      sendingError &&
        React.createElement(
          Toast,
          {
            variant: "error",
            onClose: () => setSendingError(false),
            duration: 2000,
            removable: true
          },
          sendingError
        )
    )
  );
};

const cursor =
  Platform.OS === "web"
    ? {
        cursor: "default"
      }
    : {};
const styles = StyleSheet.create({
  overlay: {
    position: Platform.OS === "web" ? "fixed" : "absolute",
    overflow: "scroll",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "flex-start",
    backgroundColor: "transparent",
    zIndex: 900000,
    ...cursor
  },
  container: {
    position: "relative",
    backgroundColor: "white",
    width: "94%",
    maxWidth: 750,
    borderRadius: 8,
    marginVertical: 40,
    paddingHorizontal: 8
  },
  closeButton: {
    position: Platform.OS === "web" ? "fixed" : "absolute",
    right: 8,
    top: 8,
    display: "flex",
    alignItems: "center",
    justifyContent: "center"
  }
});
IFrameContainer.defaultProps = {
  onClose: () => {}
};
export default memo(IFrameContainer);