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

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

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

const NumberScale = ({
  block,
  form,
  isPreview,
  currentPageIndex,
  blockIndex,
  allBlocks
}) => {
  const [selectedNumber, selectNumber] = useState(block.value);
  const {
    backgroundColor = colors.white,
    color = colors.main,
    textColor = colors.primary
  } = form;
  const { scale, min, max } = block;

  const onNumberSelect = number => {
    if (isPreview) return;
    block.value = number;
    selectNumber(number);
  };

  const strongStyle = {
    color: color,
    fontWeight: "bold"
  };
  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.numbersContainer
      },
      scale.map(number => {
        const selected = number === selectedNumber;
        const numberStyle = {
          zIndex: selected ? 2 : 1,
          borderColor: selected ? color : colors.border,
          backgroundColor: selected ? color : backgroundColor,
          borderWidth: 1,
          borderStyle: "solid"
        };
        const numberTextStyle = {
          fontWeight: selected ? "bold" : "400",
          color: selected ? backgroundColor : textColor
        };
        return React.createElement(
          TouchableOpacity,
          {
            key: number,
            activeOpacity: 0.8,
            style: [styles.number, numberStyle],
            onPress: () => onNumberSelect(number)
          },
          React.createElement(
            Text,
            {
              style: [styles.numberText, numberTextStyle]
            },
            number
          )
        );
      })
    ),
    React.createElement(
      View,
      {
        style: styles.legendContainer
      },
      min &&
        scale[0] &&
        React.createElement(
          Text,
          {
            style: styles.placeholder
          },
          React.createElement(
            Text,
            {
              style: strongStyle
            },
            scale[0]
          ),
          " - ",
          min,
          ","
        ),
      max &&
        scale[scale.length - 1] &&
        React.createElement(
          Text,
          {
            style: styles.placeholder
          },
          React.createElement(
            Text,
            {
              style: strongStyle
            },
            scale[scale.length - 1]
          ),
          " - ",
          max
        )
    )
  );
};

const styles = StyleSheet.create({
  container: {
    display: "flex",
    flexDirection: "column",
    alignItems: "center"
  },
  numbersContainer: {
    display: "flex",
    flexWrap: "wrap",
    flexShrink: 0,
    flexDirection: "row",
    justifyContent: "center",
    width: "100%",
    backgroundColor: "transparent",
    paddingVertical: 20,
    paddingHorizontal: 16,
    maxWidth: MAX_FORM_WIDTH
  },
  number: {
    alignItems: "center",
    justifyContent: "center",
    marginLeft: -1,
    marginTop: 16,
    width: 56,
    height: 56
  },
  numberText: {
    textAlign: "center",
    fontSize: 16
  },
  legendContainer: {
    flexDirection: "row",
    width: "100%",
    paddingHorizontal: 18,
    paddingTop: 4,
    paddingBottom: 24,
    maxWidth: MAX_FORM_WIDTH,
    backgroundColor: "transparent"
  },
  placeholder: {
    fontSize: 13,
    color: colors.darkgrey,
    padding: 6
  }
});
export default memo(NumberScale);