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

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

import React, { Fragment, memo } from "react";
import { View, Text, StyleSheet } from "react-native";
import { colors, MAX_FORM_WIDTH } from "../theme";
import Badge from "./Badge";

const QuestionHeader = ({
  form,
  block,
  currentPageIndex = 0,
  blockIndex = 0,
  allBlocks = []
}) => {
  const {
    pages,
    backgroundColor,
    color = colors.main,
    textColor = colors.primary
  } = form;
  const { question, isRequired, badge, type } = block;
  let questionNumber = blockIndex + 1;

  for (let i = 0; i < currentPageIndex; i++) {
    questionNumber += pages[i].blocks.length;
  }

  for (let i = 0; i < questionNumber; i++) {
    if (allBlocks[i] && allBlocks[i].type === "description") {
      questionNumber -= 1;
    }
  }

  const containerStyle = {
    backgroundColor: backgroundColor || "#ffffff",
    marginBottom: type === "description" ? -1 : 0,
    borderBottomColor: colors.border,
    borderBottomWidth: 1,
    borderBottomStyle: "solid",
    borderTopWidth: blockIndex === 0 ? 0 : 1,
    borderTopColor: colors.border,
    borderTopStyle: "solid"
  };
  const questionStyle = {
    color: textColor || colors.primary
  };
  return React.createElement(
    Fragment,
    null,
    React.createElement(
      View,
      {
        style: [containerStyle, styles.container]
      },
      React.createElement(
        View,
        {
          style: styles.questionContainer
        },
        React.createElement(
          Text,
          {
            style: [questionStyle, styles.question]
          },
          question,
          " ",
          isRequired &&
            React.createElement(
              Text,
              {
                style: styles.required
              },
              "*"
            )
        )
      )
    ),
    badge !== false &&
      React.createElement(Badge, {
        color: color,
        value: badge
      })
  );
};

const styles = StyleSheet.create({
  container: {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "center",
    position: "relative",
    width: "100%"
  },
  questionContainer: {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "center",
    width: "100%",
    maxWidth: MAX_FORM_WIDTH,
    paddingVertical: 20,
    paddingHorizontal: 28
  },
  question: {
    fontSize: 17,
    lineHeight: 24,
    fontWeight: "400",
    textAlign: "center",
    maxWidth: MAX_FORM_WIDTH
  },
  required: {
    color: colors.required,
    fontWeight: "bold"
  }
});
export default memo(QuestionHeader);