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

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

import React, { memo, useState, useEffect } from "react";
import { View, StyleSheet, TextInput, Text } from "react-native";
import { colors, MAX_FORM_WIDTH } from "../theme";
import QuestionHeader from "../components/QuestionHeader";

const Open = ({
  block,
  form,
  isPreview,
  currentPageIndex,
  blockIndex,
  onFocus,
  onBlur,
  allBlocks
}) => {
  const [error, setError] = useState(false);
  const [input, setInput] = useState(block.value);
  const { color = colors.main, textColor = colors.primary } = form;
  const { placeholder = "", isRequired } = block;
  useEffect(() => {
    if (!input && block.value) {
      setInput(block.value);
    }
  }, [block.value, input]);

  const updateInput = value => {
    block.value = value;
    setInput(value);
  };

  const onInputFocus = () => {
    if (onFocus) onFocus();
    setError(false);
  };

  const onInputBlur = () => {
    if (onBlur) onBlur();

    if (isRequired && !block.value) {
      setError("This field is required");
    }
  };

  const inputStyle = {
    color: textColor
  };
  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
      },
      React.createElement(TextInput, {
        editable: !isPreview,
        style: [inputStyle, styles.textArea],
        onChangeText: updateInput,
        value: input,
        onFocus: onInputFocus,
        onBlur: onInputBlur,
        multiline: true,
        numberOfLines: 5,
        placeholder: placeholder,
        selectionColor: color,
        underlineColorAndroid: "transparent",
        textAlignVertical: "top"
      }),
      error &&
        React.createElement(
          Text,
          {
            style: styles.error
          },
          error
        )
    )
  );
};

const styles = StyleSheet.create({
  container: {
    display: "flex",
    flexDirection: "column",
    alignItems: "center"
  },
  inputContainer: {
    display: "flex",
    width: "100%",
    backgroundColor: "transparent",
    alignItems: "flex-start",
    maxWidth: MAX_FORM_WIDTH,
    paddingHorizontal: 24,
    paddingVertical: 24
  },
  textArea: {
    borderColor: colors.buttonBorder,
    borderWidth: 1,
    borderStyle: "solid",
    borderRadius: 6,
    fontSize: 15,
    lineHeight: 20,
    padding: 12,
    width: "100%",
    marginVertical: 4,
    backgroundColor: colors.white,
    minHeight: 120
  },
  error: {
    fontSize: 12,
    backgroundColor: colors.required,
    color: colors.white,
    paddingHorizontal: 12,
    paddingVertical: 4,
    borderRadius: 20,
    marginTop: 4
  }
});
export default memo(Open);