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

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

import React, { memo, useState } from "react";
import {
  View,
  StyleSheet,
  TouchableOpacity,
  Text,
  Dimensions
} from "react-native";
import { colors, MAX_FORM_WIDTH } from "../theme";
import { StarIcon } from "../assets/icons";
import QuestionHeader from "../components/QuestionHeader";
const STAR_SIZE = 64;
const STARS_COUNT = [1, 2, 3, 4, 5];
const { width } = Dimensions.get("window");

const Stars = ({
  block,
  form,
  isPreview,
  currentPageIndex,
  blockIndex,
  allBlocks
}) => {
  const { min, max } = block;
  const [stars, selectStars] = useState(
    block.value ? parseInt(block.value.charAt(0), 10) : 0
  );
  const isMobile = width < 500;

  const onStarSelected = index => () => {
    if (isPreview) return;
    selectStars(index);
    block.value = index + " stars";
  };

  const starStyle = {
    marginHorizontal: isMobile ? 4 : 14,
    marginVertical: isMobile ? 4 : 12
  };
  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.starsContainer
      },
      STARS_COUNT.map(i =>
        React.createElement(
          TouchableOpacity,
          {
            key: stars + "star" + i,
            onPress: onStarSelected(i),
            activeOpacity: 0.8,
            style: [styles.starContainer, starStyle]
          },
          React.createElement(StarIcon, {
            size: isMobile ? STAR_SIZE * 0.9 : STAR_SIZE,
            selected: stars >= i
          }),
          i === 1 &&
            min &&
            React.createElement(
              Text,
              {
                style: styles.placeholder
              },
              min
            ),
          i === STARS_COUNT.length &&
            max &&
            React.createElement(
              Text,
              {
                style: styles.placeholder
              },
              max
            )
        )
      )
    )
  );
};

const styles = StyleSheet.create({
  container: {
    display: "flex",
    flexDirection: "column",
    alignItems: "center"
  },
  starsContainer: {
    display: "flex",
    flexDirection: "row",
    justifyContent: "center",
    flexShrink: 0,
    width: "100%",
    backgroundColor: "transparent",
    maxWidth: MAX_FORM_WIDTH,
    paddingVertical: 32,
    paddingHorizontal: 16
  },
  starContainer: {
    display: "flex",
    flexDirection: "column",
    alignItems: "center"
  },
  placeholder: {
    fontSize: 13,
    color: colors.grey,
    padding: 6
  }
});
export default memo(Stars);