add markings for 'inactive' state

src/calendar/day/basic/index.tsx

@@ -4,14 +4,14 @@ import PropTypes from 'prop-types';
 import React, {Component, Fragment} from 'react';
 import {TouchableOpacity, Text, View} from 'react-native';
 
-import {Theme, DateData} from '../../../types';
+import {Theme, DateData, DayState} from '../../../types';
 // @ts-expect-error
 import {shouldUpdate} from '../../../component-updater';
 import styleConstructor from './style';
 import Marking, {MarkingTypes, MarkingProps} from '../marking';
 
 export interface BasicDayProps {
-  state?: 'selected' | 'disabled' | 'inactive' | 'today';
+  state?: DayState;
   /** The marking object */
   marking?: MarkingProps;
   /** Date marking style [simple/period/multi-dot/multi-period]. Default = 'simple' */

src/calendar/day/period/index.tsx

@@ -10,10 +10,10 @@ import * as defaultStyle from '../../../style';
 import styleConstructor from './style';
 import Dot from '../dot';
 import {MarkingProps} from '../marking';
-import {Theme} from '../../../types';
+import {Theme, DayState} from '../../../types';
 
 interface PeriodDayProps {
-  state?: 'selected' | 'disabled' | 'today' | '';
+  state?: DayState;
   marking?: MarkingProps;
   theme?: Theme;
   onPress?: (date?: Date) => void;
@@ -27,7 +27,7 @@ export default class PeriodDay extends Component<PeriodDayProps> {
   static displayName = 'IGNORE';
 
   static propTypes = {
-    state: PropTypes.oneOf(['selected', 'disabled', 'today', '']),
+    state: PropTypes.oneOf(['selected', 'disabled', 'inactive', 'today', '']),
     marking: PropTypes.any,
     theme: PropTypes.object,
     onPress: PropTypes.func,
@@ -75,6 +75,8 @@ export default class PeriodDay extends Component<PeriodDayProps> {
 
     if (marking.disabled) {
       defaultStyle.textStyle.color = this.style.disabledText.color;
+    } else if (marking.inactive) {
+      defaultStyle.textStyle.color = this.style.inactiveText.color;
     } else if (marking.selected) {
       defaultStyle.textStyle.color = this.style.selectedText.color;
     }
@@ -141,6 +143,8 @@ export default class PeriodDay extends Component<PeriodDayProps> {
     // TODO: refactor - move all styling logic out of render()
     if (state === 'disabled') {
       textStyle.push(this.style.disabledText);
+    } else if (state === 'inactive') {
+      textStyle.push(this.style.inactiveText);
     } else if (state === 'today') {
       containerStyle.push(this.style.today);
       textStyle.push(this.style.todayText);

src/calendar/day/period/style.ts

@@ -55,7 +55,10 @@ export default function styleConstructor(theme: Theme = {}) {
     disabledText: {
       color: appStyle.textDisabledColor
     },
-
+    inactiveText: {
+      color: appStyle.textInactiveColor
+    },
+
     // quickAction: {
     //   backgroundColor: 'white',
     //   borderWidth: 1,

src/types.ts

@@ -12,6 +12,8 @@ export type DateData = {
   timestamp: number,
   dateString: string
 }
+export type DayState = 'selected' | 'disabled' | 'inactive' | 'today' | '';
+
 export interface Theme {
   container?: object;
   contentStyle?: ViewStyle;