diff --git a/src/agenda/index.tsx b/src/agenda/index.tsx index ba68d7d882..344402dde0 100644 --- a/src/agenda/index.tsx +++ b/src/agenda/index.tsx @@ -4,7 +4,7 @@ import XDate from 'xdate'; import memoize from 'memoize-one'; import React, {Component} from 'react'; -import {Text, View, Dimensions, Animated, ViewStyle, LayoutChangeEvent, NativeSyntheticEvent, NativeScrollEvent} from 'react-native'; +import {Text, View, Dimensions, Animated, StyleProp, ViewStyle, LayoutChangeEvent, NativeSyntheticEvent, NativeScrollEvent} from 'react-native'; // @ts-expect-error import {extractComponentProps} from '../component-updater.js'; @@ -36,8 +36,6 @@ export type ReservationsType = { } export type AgendaProps = CalendarListProps & ReservationListProps & { - /** agenda container style */ - style?: ViewStyle; /** the list of items that have to be displayed in agenda. If you want to render item as empty date the value of date key has to be an empty array []. If there exists no value for date key it is considered that the date in question is not yet loaded */ @@ -47,9 +45,9 @@ export type AgendaProps = CalendarListProps & ReservationListProps & { /** callback that fires when the calendar is opened or closed */ onCalendarToggled?: (enabled: boolean) => void; /** callback that gets called on day press */ - onDayPress?: (data: any) => void; + onDayPress?: (data: any) => DateData; /** callback that gets called when day changes while scrolling agenda list */ - onDaychange?: (data: any) => void; //TODO: Should be renamed 'onDayChange' + onDayChange?: (data: any) => void; /** specify how agenda knob should look like */ renderKnob?: () => JSX.Element; /** initially selected day */ @@ -95,7 +93,7 @@ export default class Agenda extends Component { /** callback that gets called on day press */ onDayPress: PropTypes.func, /** callback that gets called when day changes while scrolling agenda list */ - onDaychange: PropTypes.func, //TODO: Should be renamed 'onDayChange' + onDayChange: PropTypes.func, /** specify how agenda knob should look like */ renderKnob: PropTypes.func, /** initially selected day */ diff --git a/src/agenda/reservation-list/index.tsx b/src/agenda/reservation-list/index.tsx index b940c3d0a0..4663753ffc 100644 --- a/src/agenda/reservation-list/index.tsx +++ b/src/agenda/reservation-list/index.tsx @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import XDate from 'xdate'; import React, {Component} from 'react'; -import {ActivityIndicator, View, FlatList, ViewStyle, TextStyle, NativeSyntheticEvent, NativeScrollEvent, LayoutChangeEvent} from 'react-native'; +import {ActivityIndicator, View, FlatList, StyleProp, ViewStyle, TextStyle, NativeSyntheticEvent, NativeScrollEvent, LayoutChangeEvent} from 'react-native'; // @ts-expect-error import {extractComponentProps} from '../../component-updater'; @@ -35,7 +35,7 @@ export type ReservationListProps = ReservationProps & { onDayChange?: (day: Date) => void; /** specify what should be rendered instead of ActivityIndicator */ renderEmptyData: () => JSX.Element; - style?: ViewStyle; + style?: StyleProp; /** onScroll ListView event */ onScroll?: (yOffset: number) => void; diff --git a/src/calendar-list/index.tsx b/src/calendar-list/index.tsx index e431b81f70..9aaeeb9d69 100644 --- a/src/calendar-list/index.tsx +++ b/src/calendar-list/index.tsx @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import XDate from 'xdate'; import React, {Component} from 'react'; -import {FlatList, Platform, Dimensions, View, ViewStyle, LayoutChangeEvent} from 'react-native'; +import {FlatList, Platform, Dimensions, View, ViewStyle, LayoutChangeEvent, FlatListProps} from 'react-native'; // @ts-expect-error import {extractComponentProps} from '../component-updater'; @@ -24,7 +24,7 @@ const CALENDAR_HEIGHT = 360; const PAST_SCROLL_RANGE = 50; const FUTURE_SCROLL_RANGE = 50; -export type CalendarListProps = CalendarProps & { +interface Props extends CalendarProps, FlatListProps { /** Max amount of months allowed to scroll to the past. Default = 50 */ pastScrollRange?: number; /** Max amount of months allowed to scroll to the future. Default = 50 */ @@ -60,11 +60,12 @@ export type CalendarListProps = CalendarProps & { /** onLayout event */ onLayout?: (event: LayoutChangeEvent) => void; removeClippedSubviews: boolean; -}; +} +export type CalendarListProps = Props; type XDateAndBump = XDate & {propBump?: number} ; -type CalendarListState = { +type State = { rows: Array; texts: Array; openDate: XDate; @@ -78,7 +79,7 @@ type CalendarListState = { * @example: https://github.com/wix/react-native-calendars/blob/master/example/src/screens/calendarsList.js * @gif: https://github.com/wix/react-native-calendars/blob/master/demo/calendar-list.gif */ -class CalendarList extends Component { +class CalendarList extends Component { static displayName = 'CalendarList'; static propTypes = { @@ -136,7 +137,7 @@ class CalendarList extends Component { itemVisiblePercentThreshold: 20 }; - constructor(props: CalendarListProps) { + constructor(props: Props) { super(props); this.style = styleConstructor(props.theme); @@ -172,7 +173,7 @@ class CalendarList extends Component { }; } - componentDidUpdate(prevProps: CalendarListProps) { + componentDidUpdate(prevProps: Props) { const prevCurrent = parseDate(prevProps.current); const current = parseDate(this.props.current); @@ -181,7 +182,7 @@ class CalendarList extends Component { } } - static getDerivedStateFromProps(_: CalendarListProps, prevState: CalendarListState) { + static getDerivedStateFromProps(_: Props, prevState: State) { const rowClone = prevState.rows; const newRows = []; diff --git a/src/calendar/header/index.tsx b/src/calendar/header/index.tsx index 9f5e73a5db..2248e7d012 100644 --- a/src/calendar/header/index.tsx +++ b/src/calendar/header/index.tsx @@ -4,7 +4,7 @@ import memoize from 'memoize-one'; import XDate from 'xdate'; import React, {Component, Fragment, ReactNode} from 'react'; -import {ActivityIndicator, Platform, View, Text, TouchableOpacity, Image, ViewStyle, AccessibilityActionEvent, ColorValue} from 'react-native'; +import {ActivityIndicator, Platform, View, Text, TouchableOpacity, Image, StyleProp, ViewStyle, AccessibilityActionEvent, ColorValue} from 'react-native'; // @ts-expect-error import {shouldUpdate} from '../../component-updater'; // @ts-expect-error @@ -21,7 +21,7 @@ import styleConstructor from './style'; import {Theme} from '../../types'; type Direction = 'left' | 'right'; -export interface CalendarHeaderProps { +interface Props { theme?: Theme; firstDay?: number; displayLoadingIndicator?: boolean; @@ -51,12 +51,13 @@ export interface CalendarHeaderProps { /** Provide aria-level for calendar heading for proper accessibility when used with web (react-native-web) */ webAriaLevel?: number; testID?: string; - style?: ViewStyle; + style?: StyleProp; accessibilityElementsHidden?: boolean; importantForAccessibility?: 'auto' | 'yes' | 'no' | 'no-hide-descendants'; } +export type CalendarHeaderProps = Props; -class CalendarHeader extends Component { +class CalendarHeader extends Component { static displayName = 'IGNORE'; static propTypes = { @@ -96,13 +97,13 @@ class CalendarHeader extends Component { }; style: any; - constructor(props: CalendarHeaderProps) { + constructor(props: Props) { super(props); this.style = styleConstructor(props.theme); } - shouldComponentUpdate(nextProps: CalendarHeaderProps) { + shouldComponentUpdate(nextProps: Props) { if (nextProps.month?.toString('yyyy MM') !== this.props.month?.toString('yyyy MM')) { return true; } diff --git a/src/calendar/index.tsx b/src/calendar/index.tsx index 091bf2983f..dc967cb8a4 100644 --- a/src/calendar/index.tsx +++ b/src/calendar/index.tsx @@ -4,7 +4,7 @@ import XDate from 'xdate'; import memoize from 'memoize-one'; import React, {Component, RefObject} from 'react'; -import {View, ViewStyle} from 'react-native'; +import {View, ViewStyle, StyleProp} from 'react-native'; // @ts-expect-error import GestureRecognizer, {swipeDirections} from 'react-native-swipe-gestures'; @@ -19,12 +19,12 @@ import {getState} from '../day-state-manager'; import {extractComponentProps} from '../component-updater'; // @ts-expect-error import {WEEK_NUMBER} from '../testIDs'; +import {Theme, DateData} from '../types'; import styleConstructor from './style'; import CalendarHeader, {CalendarHeaderProps} from './header'; import Day, {DayProps} from './day/index'; import BasicDay from './day/basic'; import {MarkingProps} from './day/marking'; -import {Theme, DateData} from '../types'; type MarkedDatesType = { @@ -35,7 +35,7 @@ export interface CalendarProps extends CalendarHeaderProps, DayProps { /** Specify theme properties to override specific styles for calendar parts */ theme?: Theme; /** Specify style for calendar container element */ - style?: ViewStyle; + style?: StyleProp; /** Initially visible month */ current?: XDate; /** Minimum date that can be selected, dates before minDate will be grayed out */ @@ -55,7 +55,7 @@ export interface CalendarProps extends CalendarHeaderProps, DayProps { /** Always show six weeks on each month (only when hideExtraDays = false) */ showSixWeeks?: boolean; /** Handler which gets executed on day press */ - onDayPress?: (date: Date) => any; + onDayPress?: (date: Date) => DateData; /** Handler which gets executed on day long press */ onDayLongPress?: (date: Date) => any; /** Handler which gets executed when month changes in calendar */