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

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

import React, { Fragment, memo, useState } from "react";
import {
  View,
  TouchableOpacity,
  Text,
  StyleSheet,
  TextInput,
  Platform
} from "react-native";
import { colors, MAX_FORM_WIDTH } from "../theme";
import { CheckIcon } from "../assets/icons";
import QuestionHeader from "../components/QuestionHeader";

const MultiSelection = ({
  form,
  block,
  isPreview,
  currentPageIndex,
  blockIndex,
  allBlocks
}) => {
  const {
    backgroundColor = colors.white,
    color = colors.main,
    textColor = colors.primary
  } = form;
  const { answers, other = {} } = block;
  const otherValue = block.value
    ? Array.isArray(block.value)
      ? block.value.filter(a => answers.map(v => v.value).indexOf(a) < 0)[0]
      : ""
    : "";
  const [isOtherSelected, selectOther] = useState(otherValue || false);
  const [otherInputValue, updateOtherValue] = useState(otherValue);
  let [selectedAnswers, selectAnswer] = useState(block.value || []);

  const onAnswerSelected = answer => () => {
    if (isPreview) return;

    if (selectedAnswers.includes(answer)) {
      selectedAnswers = selectedAnswers.filter(a => a !== answer);
    } else {
      selectedAnswers.push(answer);
    }

    block.value = selectedAnswers;
    selectAnswer([...selectedAnswers]);
  };

  const updateInput = value => {
    const otherPosition = selectedAnswers.indexOf(otherInputValue);

    if (otherPosition === -1) {
      selectedAnswers.push(value);
    } else {
      selectedAnswers[otherPosition] = value;
    }

    block.value = selectedAnswers;
    updateOtherValue(value);
  };

  const otherStyle = {
    borderColor: isOtherSelected ? color + "80" : colors.border,
    borderWidth: 1,
    borderStyle: "solid",
    backgroundColor: isOtherSelected ? `${color}10` : backgroundColor
  };
  const otherBoxStyle = {
    backgroundColor: isOtherSelected ? color : colors.background,
    borderColor: isOtherSelected ? "transparent" : colors.lightgrey,
    borderWidth: 1,
    borderStyle: "solid"
  };
  const otherTextStyle = {
    fontWeight: isOtherSelected
      ? "bold"
      : Platform.OS === "android"
      ? "400"
      : "500",
    color: isOtherSelected ? color : textColor,
    opacity: isOtherSelected ? 1 : 0.9,
    fontSize: 15
  };
  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.answersContainer
      },
      answers.map((answer, i) => {
        const value = answer.value;
        const isSelected = selectedAnswers.includes(value);
        const answerStyle = {
          borderColor: isSelected ? color + "80" : colors.border,
          borderWidth: 1,
          borderStyle: "solid",
          backgroundColor: isSelected ? `${color}10` : backgroundColor
        };
        const boxStyle = {
          backgroundColor: isSelected ? color : colors.background,
          borderColor: isSelected ? "transparent" : colors.lightgrey,
          borderWidth: 1,
          borderStyle: "solid"
        };
        const answerTextStyle = {
          fontWeight: isSelected
            ? "bold"
            : Platform.OS === "android"
            ? "400"
            : "500",
          color: isSelected ? color : textColor,
          opacity: isSelected ? 1 : 0.9,
          fontSize: 15
        };
        return React.createElement(
          TouchableOpacity,
          {
            key: value + i,
            onPress: onAnswerSelected(value),
            activeOpacity: 0.8,
            style: [styles.answer, answerStyle]
          },
          React.createElement(
            View,
            {
              style: [styles.box, boxStyle]
            },
            isSelected &&
              React.createElement(CheckIcon, {
                size: 12,
                color: colors.white
              })
          ),
          React.createElement(
            Text,
            {
              style: answerTextStyle
            },
            value
          )
        );
      }),
      other.label &&
        React.createElement(
          Fragment,
          null,
          React.createElement(
            TouchableOpacity,
            {
              onPress: () => {
                if (isPreview) return;

                if (isOtherSelected) {
                  updateInput("");
                }

                selectOther(!isOtherSelected);
              },
              activeOpacity: 0.8,
              style: [styles.answer, otherStyle]
            },
            React.createElement(
              View,
              {
                style: [styles.box, otherBoxStyle]
              },
              isOtherSelected &&
                React.createElement(CheckIcon, {
                  size: 12,
                  color: colors.white
                })
            ),
            React.createElement(
              Text,
              {
                style: otherTextStyle
              },
              other.label
            )
          ),
          isOtherSelected &&
            React.createElement(TextInput, {
              editable: !isPreview,
              maxLength: 500,
              style: [inputStyle, styles.input],
              onChangeText: updateInput,
              value: otherInputValue,
              placeholder: other.placeholder || "Enter here..."
            })
        )
    )
  );
};

const styles = StyleSheet.create({
  container: {
    display: "flex",
    flexDirection: "column",
    alignItems: "center"
  },
  answersContainer: {
    display: "flex",
    flexDirection: "column",
    width: "100%",
    backgroundColor: "transparent",
    maxWidth: MAX_FORM_WIDTH,
    paddingVertical: 24,
    paddingHorizontal: 24
  },
  answer: {
    display: "flex",
    flexDirection: "row",
    width: "100%",
    alignItems: "center",
    padding: 16,
    borderRadius: 6,
    marginBottom: 20
  },
  box: {
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    width: 16,
    height: 16,
    borderRadius: 2,
    marginRight: 16
  },
  input: {
    borderColor: colors.buttonBorder,
    borderWidth: 1,
    borderStyle: "solid",
    borderRadius: 6,
    fontSize: 15,
    minHeight: 46,
    maxHeight: 46,
    padding: 16,
    width: "100%",
    backgroundColor: colors.white
  }
});
export default memo(MultiSelection);