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

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

import React, { memo, useState, useEffect } from "react";
import { View, StyleSheet } from "react-native";
import { colors, MAX_FORM_WIDTH } from "../theme";
import QuestionHeader from "../components/QuestionHeader";
import DatePicker from "../components/DatePicker";
import { getDayFormat, returnTimeZone } from "../components/DatePicker/time";
import {
  DATE_HOURS_CONFIG,
  DEFAULT_DATE_CONFIG
} from "../components/DatePicker/dataSource";

const DatePickerBlock = ({
  block,
  form,
  isPreview,
  currentPageIndex,
  blockIndex,
  allBlocks
}) => {
  const [date, updateDate] = useState(block.time || new Date().getTime());
  const { color = colors.main, textColor = colors.primary } = form;
  const { hours } = block;
  const timezone = block.timezone || returnTimeZone();
  useEffect(() => {
    const pickedDate = block.time || new Date().getTime();
    block.value = getDayFormat(new Date(pickedDate), hours, timezone);
    block.time = pickedDate;
    block.timezone = timezone;
    updateDate(pickedDate);
  }, [block, hours, timezone]);

  const _onDateSelect = date => {
    const pickedDate = date.getTime();
    block.value = getDayFormat(date, hours, timezone);
    block.time = pickedDate;
    block.timezone = timezone;
    updateDate(pickedDate);
  };

  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(DatePicker, {
        value: new Date(date),
        onChange: _onDateSelect,
        dateConfig: hours ? DATE_HOURS_CONFIG : DEFAULT_DATE_CONFIG,
        color: color,
        textColor: textColor,
        isPreview: isPreview
      })
    )
  );
};

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: 12,
    paddingVertical: 24
  }
});
export default memo(DatePickerBlock);