react-native-surveys/Forms/blocks/Contact.js

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

function _extends() {
  _extends =
    Object.assign ||
    function(target) {
      for (var i = 1; i < arguments.length; i++) {
        var source = arguments[i];
        for (var key in source) {
          if (Object.prototype.hasOwnProperty.call(source, key)) {
            target[key] = source[key];
          }
        }
      }
      return target;
    };
  return _extends.apply(this, arguments);
}

import React, { memo, useState } from "react";
import { View, StyleSheet } from "react-native";
import { colors, MAX_FORM_WIDTH, validateEmail } from "../theme";
import QuestionHeader from "../components/QuestionHeader";
import { returnInputName } from "../helpers";
import InputField from "../components/Form/InputField";

const Contact = ({
  block,
  form,
  isPreview,
  currentPageIndex,
  blockIndex,
  onFocus,
  onBlur,
  allBlocks
}) => {
  const { color = colors.main, textColor = colors.primary } = form;
  const { value } = block;
  const [fields, updateFields] = useState(
    value.map(field => field.value || "")
  );
  const [error, setError] = useState({});

  const checkForError = (name, field, index) => () => {
    if (onBlur) onBlur();
    if (isPreview) return;

    if (name === "email") {
      const isValid = validateEmail(field.value);

      if (!isValid) {
        error[index] = "Invalid email address format.";
        setError({ ...error });
      } else {
        setError({});
      }
    }
  };

  const updateInput = index => value => {
    block.value[index].value = value;
    fields[index] = value;
    updateFields([...fields]);
  };

  return React.createElement(
    View,
    {
      style: styles.container
    },
    React.createElement(QuestionHeader, {
      form: form,
      block: block,
      currentPageIndex: currentPageIndex,
      blockIndex: blockIndex,
      allBlocks: allBlocks
    }),
    React.createElement(
      View,
      {
        style: styles.inputContainer
      },
      value.map((field, i) => {
        const { isRequired, question, multiline, select, ...restProps } = field;
        const name = returnInputName(question);
        const inputProps = {
          onChangeText: updateInput(i),
          onValueChange: updateInput(i),
          onFocus,
          value: fields[i],
          required: isRequired,
          editable: !isPreview,
          enabled: !isPreview,
          onBlur: checkForError(name, field, i),
          error: error[i],
          name,
          label: question,
          textColor,
          color,
          ...restProps
        };
        return React.createElement(
          InputField,
          _extends(
            {
              select: select,
              multiline: multiline,
              key: i
            },
            inputProps
          )
        );
      })
    )
  );
};

const styles = StyleSheet.create({
  container: {
    display: "flex",
    flexDirection: "column",
    alignItems: "center"
  },
  inputContainer: {
    width: "100%",
    backgroundColor: "transparent",
    paddingVertical: 22,
    paddingHorizontal: 24,
    maxWidth: MAX_FORM_WIDTH
  }
});
export default memo(Contact);