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

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

import React, { memo, useState } from "react";
import { View, StyleSheet, Text, Platform } from "react-native";
import KeyboardAwareScrollView from "../components/KeyboardAwareScrollView";
import {
  renderBlocks,
  returnPageCompletionStatus,
  returnQuestionsCount
} from "../blocks/helpers";
import PoweredBy from "./PoweredBy";
import { colors } from "../theme";
import Footer from "./Footer";
import { getOperatingSystem } from "../utils";

const FormContainer = ({
  onFormSubmit,
  form,
  isSending,
  setSendingError,
  isPreview,
  iframe
}) => {
  const [paddingBottom, setPadding] = useState(0);
  const {
    pages,
    color,
    poweredBy,
    backgroundColor,
    button,
    submitButton
  } = form;
  const currentPageIndex = 0;
  const page = pages[currentPageIndex];
  const questionsCount = returnQuestionsCount(pages);

  const sendForm = () => {
    if (isSending) return;
    let canSend = true;
    let hasAnyValues = false;
    pages.forEach(page => {
      const { isCompleted, hasValues } = returnPageCompletionStatus(page);

      if (!hasAnyValues && hasValues) {
        hasAnyValues = true;
      }

      if (!isCompleted) {
        canSend = false;
      }
    });

    if (!canSend || !hasAnyValues) {
      setSendingError("Fill up all required fields.");
      return;
    }

    onFormSubmit();
  };

  const background = {
    backgroundColor: backgroundColor || "#ffffff"
  };
  const blocksBackground = {
    backgroundColor: color ? `${color}03` : `${colors.main}03`
  };

  const onInputFocus = () => {
    if (Platform.OS === "web" && getOperatingSystem() === "Android" && iframe) {
      setPadding(275);
    }

    if (
      Platform.OS === "web" &&
      getOperatingSystem() === "Android" &&
      window.ReactNativeWebView
    ) {
      setPadding(275);
    }
  };

  const onInputBlur = () => paddingBottom > 0 && setPadding(0);

  return React.createElement(
    KeyboardAwareScrollView,
    {
      style: [
        background,
        styles.container,
        {
          paddingBottom
        }
      ],
      extraScrollHeight: 120,
      enableOnAndroid: true,
      bounces: false
    },
    questionsCount <= 0 &&
      React.createElement(
        View,
        {
          style: styles.emptyContainer
        },
        React.createElement(
          Text,
          {
            style: styles.emptyText
          },
          "This form is empty."
        )
      ),
    React.createElement(
      View,
      {
        style: [blocksBackground, styles.blocksContainer]
      },
      renderBlocks({
        page,
        form,
        isPreview,
        onFocus: onInputFocus,
        onBlur: onInputBlur,
        currentPageIndex
      }),
      React.createElement(Footer, {
        page: page,
        sendForm: sendForm,
        setSendingError: setSendingError,
        color: color,
        isSending: isSending,
        isPreview: isPreview,
        button: button,
        submitButton: submitButton
      })
    ),
    poweredBy !== "hide" && !isPreview && React.createElement(PoweredBy, null)
  );
};

const styles = StyleSheet.create({
  container: {
    display: "flex",
    flexDirection: "column",
    flex: 1,
    width: "100%"
  },
  emptyContainer: {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    paddingTop: 32,
    paddingBottom: 24
  },
  blocksContainer: {
    display: "flex",
    flexDirection: "column",
    flex: 1
  },
  emptyText: {
    fontSize: 16,
    color: colors.primary
  }
});
export default memo(FormContainer);