react-native-surveys/Forms/components/DatePicker/index.js

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

import React, { Component } from "react";
import { View, Text, StyleSheet } from "react-native";
import DatePickerItem from "./DatePickerItem.js";
import PureRender from "./pureRender.js";
import { nextDate } from "./time.js";
import { dateConfigMap, defaultProps } from "./dataSource";

const capitalize = ([first, ...rest]) => first.toUpperCase() + rest.join("");

const isArray = val =>
  Object.prototype.toString.apply(val) === "[object Array]";

class DatePicker extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: nextDate(this.props.value)
    };
    this.handleDateSelect = this.handleDateSelect.bind(this);
  }

  componentWillReceiveProps(nextProps) {
    // update value of state
    const date = nextDate(nextProps.value);

    if (date.getTime() !== this.state.value.getTime()) {
      this.setState({
        value: date
      });
    }
  }

  componentDidUpdate() {
    const value = this.state.value;
    const { min, max } = this.props;

    if (value.getTime() > max.getTime()) {
      this.setState({
        value: max
      });
    }

    if (value.getTime() < min.getTime()) {
      this.setState({
        value: min
      });
    }
  }

  shouldComponentUpdate(nextProps, nextState) {
    const date = nextDate(nextState.value);
    return (
      date.getTime() !== this.state.value.getTime() ||
      PureRender.shouldComponentUpdate(
        nextProps,
        nextState,
        this.props,
        this.state
      )
    );
  }

  handleDateSelect(value) {
    this.setState(
      {
        value
      },
      () => {
        this.props.onChange(value);
      }
    );
  }

  normalizeDateConfig(dataConfig) {
    const configList = [];

    if (isArray(dataConfig)) {
      for (let i = 0; i < dataConfig.length; i++) {
        const value = dataConfig[i];

        if (typeof value === "string") {
          const lowerCaseKey = value.toLocaleLowerCase();
          configList.push({
            ...dateConfigMap[lowerCaseKey],
            type: capitalize(lowerCaseKey)
          });
        }
      }
    } else {
      for (const key in dataConfig) {
        if (dataConfig.hasOwnProperty(key)) {
          const lowerCaseKey = key.toLocaleLowerCase();

          if (dateConfigMap.hasOwnProperty(lowerCaseKey)) {
            configList.push({
              ...dateConfigMap[lowerCaseKey],
              ...dataConfig[key],
              type: capitalize(lowerCaseKey)
            });
          }
        }
      }
    }

    return configList;
  }

  render() {
    const { min, max, dateConfig, color, textColor, isPreview } = this.props;
    const value = this.state.value;
    const dataConfigList = this.normalizeDateConfig(dateConfig);
    const captionStyle = {
      color: textColor + "99"
    };
    return React.createElement(
      View,
      {
        style: styles.container
      },
      React.createElement(
        View,
        {
          style: styles.captionContainer
        },
        dataConfigList.map((item, index) =>
          React.createElement(
            Text,
            {
              key: index,
              style: [styles.caption, captionStyle]
            },
            item.caption
          )
        )
      ),
      React.createElement(
        View,
        {
          style: styles.content
        },
        dataConfigList.map((item, index) =>
          React.createElement(DatePickerItem, {
            key: index,
            value: value,
            min: min,
            max: max,
            step: item.step,
            type: item.type,
            format: item.format,
            color: color,
            textColor: textColor,
            onSelect: this.handleDateSelect,
            isPreview: isPreview
          })
        )
      )
    );
  }
}

const styles = StyleSheet.create({
  container: {
    width: "100%"
  },
  captionContainer: {
    display: "flex",
    flexDirection: "row",
    paddingTop: 8,
    paddingHorizontal: 4
  },
  caption: {
    flex: 1,
    marginHorizontal: 4,
    textAlign: "center",
    height: 30,
    lineHeight: 30,
    fontSize: 16
  },
  content: {
    display: "flex",
    flexDirection: "row",
    paddingVertical: 8,
    paddingHorizontal: 4
  }
});
DatePicker.defaultProps = defaultProps;
export default DatePicker;