react-native-easy-calendar/lib/module/Components/Day.js

Customizable, easy-to-use, performant calendar components for React Native

import React from 'react';
import dayjs from 'dayjs';
import localizedFormat from 'dayjs/plugin/localizedFormat';
import { Text, TouchableOpacity } from 'react-native';
import { ThemeContext } from '../Contexts';
dayjs.extend(localizedFormat);

const Day = ({
  date,
  onPress,
  showExtraDates = false,
  isDisabled = false,
  isSelected = false,
  isStartOfWeek = false,
  isEndOfWeek = false,
  isStartOfMonth = false,
  isEndOfMonth = false,
  isExtraDay = false
}) => {
  const theme = React.useContext(ThemeContext);

  const _onPress = () => {
    onPress(date);
  };

  if (isExtraDay) {
    return /*#__PURE__*/React.createElement(TouchableOpacity, {
      disabled: true,
      testID: 'extra-day-container',
      accessibilityLabel: "".concat(dayjs(date).format('LL')),
      accessibilityState: {
        disabled: true,
        selected: false
      },
      onPress: _onPress,
      style: [theme.normalDayContainer, theme.extraDayContainer]
    }, /*#__PURE__*/React.createElement(Text, {
      testID: 'extra-day-text',
      style: [theme.normalDayText, theme.extraDayText]
    }, showExtraDates && dayjs(date).date()));
  }

  return /*#__PURE__*/React.createElement(TouchableOpacity, {
    testID: 'day-container',
    accessibilityLabel: "".concat(dayjs(date).format('LL')),
    accessibilityState: {
      disabled: !!(isDisabled || isExtraDay),
      selected: isSelected
    },
    disabled: isDisabled || isExtraDay,
    onPress: _onPress,
    style: [theme.normalDayContainer, isDisabled && theme.disabledDayContainer, isSelected && theme.selectedDayContainer, isStartOfWeek && theme.startOfWeekDayContainer, isEndOfWeek && theme.endOfWeekDayContainer, isStartOfMonth && theme.startOfMonthDayContainer, isEndOfMonth && theme.endOfMonthDayContainer]
  }, /*#__PURE__*/React.createElement(Text, {
    testID: 'day-text',
    style: [theme.normalDayText, isDisabled && theme.disabledDayText, isSelected && theme.selectedDayText, isStartOfWeek && theme.startOfWeekDayText, isEndOfWeek && theme.endOfWeekDayText, isStartOfMonth && theme.startOfMonthDayText, isEndOfMonth && theme.endOfMonthDayText]
  }, "\b", dayjs(date).date()));
};

export default /*#__PURE__*/React.memo(Day);
//# sourceMappingURL=Day.js.map