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

Customizable multi-date range datetime picker for React Native

import React from 'react';
import { View, Text, Pressable, StyleSheet } from 'react-native';
import { CALENDAR_HEIGHT } from '../enums';
function EmptyDayPure() {
  return /*#__PURE__*/React.createElement(View, {
    style: styles.dayCell
  });
}
export const EmptyDay = /*#__PURE__*/React.memo(EmptyDayPure);
const Day = ({
  date,
  text,
  disabled,
  isCurrentMonth,
  isToday,
  isSelected,
  isSelectedTo,
  onSelectDate,
  theme
}) => {
  const dayContainerStyle = isCurrentMonth ? theme === null || theme === void 0 ? void 0 : theme.dayContainerStyle : {
    opacity: 0.3
  };
  const todayItemStyle = isToday ? {
    borderWidth: 2,
    borderColor: (theme === null || theme === void 0 ? void 0 : theme.selectedItemColor) || '#0047FF',
    ...(theme === null || theme === void 0 ? void 0 : theme.todayContainerStyle)
  } : null;
  const selectedStyle = isSelected ? {
    borderColor: (theme === null || theme === void 0 ? void 0 : theme.selectedItemColor) || '#0047FF',
    backgroundColor: (theme === null || theme === void 0 ? void 0 : theme.selectedItemColor) || '#0047FF'
  } : null;
  const selectedToStyle = isSelectedTo ? {
    borderColor: (theme === null || theme === void 0 ? void 0 : theme.selectedItemColor) || '#0047FF',
    backgroundColor: (theme === null || theme === void 0 ? void 0 : theme.selectedItemColor) || '#0047FF'
  } : null;
  const textStyle = isSelected || isSelectedTo ? {
    color: '#fff',
    ...(theme === null || theme === void 0 ? void 0 : theme.selectedTextStyle)
  } : isToday ? {
    ...(theme === null || theme === void 0 ? void 0 : theme.calendarTextStyle),
    color: (theme === null || theme === void 0 ? void 0 : theme.selectedItemColor) || '#0047FF',
    ...(theme === null || theme === void 0 ? void 0 : theme.todayTextStyle)
  } : theme === null || theme === void 0 ? void 0 : theme.calendarTextStyle;
  return /*#__PURE__*/React.createElement(View, {
    style: styles.dayCell
  }, /*#__PURE__*/React.createElement(Pressable, {
    disabled: disabled,
    onPress: () => onSelectDate(date),
    style: [styles.dayContainer, dayContainerStyle, todayItemStyle, selectedStyle, selectedToStyle, disabled && styles.disabledDay],
    testID: date,
    accessibilityRole: "button",
    accessibilityLabel: text
  }, /*#__PURE__*/React.createElement(View, {
    style: styles.dayTextContainer
  }, /*#__PURE__*/React.createElement(Text, {
    style: textStyle
  }, text))));
};
const styles = StyleSheet.create({
  dayCell: {
    width: '14.2%',
    height: CALENDAR_HEIGHT / 7 - 1
  },
  dayContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    margin: 1.5,
    borderRadius: 100
  },
  dayTextContainer: {
    justifyContent: 'center',
    alignItems: 'center'
  },
  disabledDay: {
    opacity: 0.3
  }
});
export default /*#__PURE__*/React.memo(Day);
//# sourceMappingURL=Day.js.map