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

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

import React, { memo, useEffect, useMemo } from "react";
import {
  View,
  StyleSheet,
  TouchableOpacity,
  Animated,
  Easing,
  ActivityIndicator,
  Platform,
  Dimensions,
  Text
} from "react-native";
import { LoadingError } from "./LoadingError";
import Forms from "../index";
import { CloseIcon } from "../assets/icons";
import { colors } from "../theme";
import { getStatusBarHeight } from "../utils/status-bar-height";
const { width, height } = Dimensions.get("window");
const HEADER_HEIGHT = 49;

const MobileContainer = ({
  error,
  form,
  onClose,
  onSend,
  onBeforeSend,
  livePreview,
  iframe
}) => {
  const opacityAnimation = useMemo(() => new Animated.Value(0), []);
  const translateAnimation = useMemo(() => new Animated.Value(height), []);
  const statusBarHeight = getStatusBarHeight();
  useEffect(() => {
    Animated.parallel([
      Animated.timing(opacityAnimation, {
        toValue: 1,
        duration: 250,
        easing: Easing.out(Easing.quad)
      }),
      Animated.timing(translateAnimation, {
        toValue: 0,
        duration: 500,
        easing: Easing.out(Easing.quad)
      })
    ]).start();
  }, [opacityAnimation, translateAnimation]);
  const containerHeight = {
    height: height - HEADER_HEIGHT - statusBarHeight
  };
  const headerPadding = {
    marginTop: statusBarHeight
  };
  return React.createElement(
    Animated.View,
    {
      style: [
        {
          opacity: opacityAnimation,
          transform: [
            {
              translateY: translateAnimation
            }
          ]
        },
        styles.overlay
      ]
    },
    React.createElement(
      View,
      {
        style: [styles.header, headerPadding]
      },
      React.createElement(
        Text,
        {
          style: styles.name,
          numberOfLines: 1,
          ellipsizeMode: "head"
        },
        form && form.label
      ),
      React.createElement(
        TouchableOpacity,
        {
          onPress: onClose,
          style: styles.closeButton
        },
        React.createElement(CloseIcon, {
          size: 22
        })
      )
    ),
    error &&
      React.createElement(
        View,
        {
          style: [containerHeight, styles.container]
        },
        React.createElement(LoadingError, {
          iframe: true,
          error: error
        })
      ),
    !error &&
      !form &&
      React.createElement(
        View,
        {
          style: [containerHeight, styles.container]
        },
        React.createElement(ActivityIndicator, {
          size: "large",
          color: colors.main
        })
      ),
    !error &&
      form &&
      React.createElement(
        View,
        {
          style: [containerHeight, styles.container]
        },
        React.createElement(Forms, {
          onSend: onSend,
          onBeforeSend: onBeforeSend,
          form: form,
          livePreview: livePreview,
          iframe: iframe
        })
      )
  );
};

const styles = StyleSheet.create({
  overlay: {
    position: Platform.OS === "web" ? "fixed" : "absolute",
    overflow: "scroll",
    height,
    width,
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "flex-start",
    backgroundColor: "white",
    zIndex: 900000,
    elevation: 9
  },
  container: {
    backgroundColor: "white",
    alignItems: "center",
    justifyContent: "center",
    width: "100%"
  },
  header: {
    display: "flex",
    width: "100%",
    flexDirection: "row",
    alignItems: "center",
    paddingHorizontal: 16,
    paddingVertical: 13,
    borderBottomColor: colors.border,
    borderBottomWidth: 1,
    borderStyle: "solid",
    zIndex: 9
  },
  name: {
    color: colors.primary,
    fontWeight: "bold",
    fontSize: 15,
    flex: 1
  },
  closeButton: {
    display: "flex",
    alignItems: "center",
    justifyContent: "center"
  }
});
MobileContainer.defaultProps = {
  onClose: () => {}
};
export default memo(MobileContainer);