txend-react-native-ui-datepicker/lib/module/components/Footer.js

Customizable multi-date range datetime picker for React Native

import React from 'react';
import { View, Text, Pressable, StyleSheet } from 'react-native';
import { useCalendarContext } from '../CalendarContext';
import { CalendarViews } from '../enums';
import { formatTimeWithAmPm } from '../utils';
const Footer = () => {
  const {
    selectedDate,
    selectedDateTo,
    calendarView,
    setCalendarView,
    mode,
    theme
  } = useCalendarContext();
  const {
    formattedTime,
    period
  } = formatTimeWithAmPm(selectedDateTo ? selectedDateTo : selectedDate);
  return /*#__PURE__*/React.createElement(View, {
    style: [styles.footerContainer, theme === null || theme === void 0 ? void 0 : theme.footerContainerStyle],
    accessibilityRole: "header"
  }, /*#__PURE__*/React.createElement(Text, {
    style: [styles.text, theme === null || theme === void 0 ? void 0 : theme.footerTextStyle]
  }, "Ends"), /*#__PURE__*/React.createElement(View, {
    style: styles.timeContainer
  }, mode === 'datetime' && calendarView !== CalendarViews.year ? /*#__PURE__*/React.createElement(Pressable, {
    onPress: () => setCalendarView(calendarView === CalendarViews.time ? CalendarViews.day : CalendarViews.time),
    accessibilityRole: "button",
    accessibilityLabel: formattedTime
  }, /*#__PURE__*/React.createElement(View, {
    style: [styles.textContainer, theme === null || theme === void 0 ? void 0 : theme.footerTextContainerStyle]
  }, /*#__PURE__*/React.createElement(Text, {
    style: [styles.text, theme === null || theme === void 0 ? void 0 : theme.footerTextStyle]
  }, formattedTime))) : null, mode === 'datetime' && calendarView !== CalendarViews.year ? /*#__PURE__*/React.createElement(Pressable, {
    onPress: () => setCalendarView(calendarView === CalendarViews.time ? CalendarViews.day : CalendarViews.time),
    accessibilityRole: "button",
    accessibilityLabel: formattedTime
  }, /*#__PURE__*/React.createElement(View, {
    style: [styles.periodTextContainer, theme === null || theme === void 0 ? void 0 : theme.footerTextContainerStyle]
  }, /*#__PURE__*/React.createElement(View, {
    style: period === "AM" ? styles.periodActiveCardContainer : styles.periodInactiveCardContainer
  }, /*#__PURE__*/React.createElement(Text, {
    style: [styles.text, theme === null || theme === void 0 ? void 0 : theme.footerTextStyle]
  }, "AM")), /*#__PURE__*/React.createElement(View, {
    style: period === "AM" ? styles.periodInactiveCardContainer : styles.periodActiveCardContainer
  }, /*#__PURE__*/React.createElement(Text, {
    style: [styles.text, theme === null || theme === void 0 ? void 0 : theme.footerTextStyle]
  }, "PM")))) : null));
};
const styles = StyleSheet.create({
  timeContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    width: 180
  },
  footerContainer: {
    width: '100%',
    marginTop: 10,
    height: 55,
    borderTopWidth: 1,
    borderColor: 'rgba(84, 84, 88, 0.65)',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: 12
  },
  selectorContainer: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  textContainer: {
    backgroundColor: 'rgba(118, 118, 128, 0.24)',
    alignItems: 'center',
    justifyContent: 'center',
    marginHorizontal: 0,
    paddingHorizontal: 0,
    paddingVertical: 5,
    borderRadius: 10,
    height: 40,
    width: 80
  },
  text: {
    fontWeight: 'bold',
    fontSize: 15,
    color: '#FFFFFF'
  },
  periodTextContainer: {
    backgroundColor: 'rgba(118, 118, 128, 0.24)',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginHorizontal: 0,
    borderRadius: 10,
    height: 40,
    width: 90,
    flexDirection: 'row'
  },
  periodActiveCardContainer: {
    backgroundColor: 'rgba(99, 99, 102, 1)',
    alignItems: 'center',
    justifyContent: 'center',
    marginHorizontal: 0,
    paddingHorizontal: 0,
    paddingVertical: 5,
    borderRadius: 10,
    height: 39,
    width: 44
  },
  periodInactiveCardContainer: {
    backgroundColor: 'transparent',
    alignItems: 'center',
    justifyContent: 'center',
    marginHorizontal: 0,
    paddingHorizontal: 0,
    paddingVertical: 5,
    borderRadius: 10,
    height: 39,
    width: 44
  },
  iconContainer: {
    padding: 4
  },
  prev: {
    marginRight: 3
  },
  next: {
    marginLeft: 3
  },
  row: {
    flexDirection: 'row'
  }
});
export default Footer;
//# sourceMappingURL=Footer.js.map