Skip to content

Commit

Permalink
Merge pull request wix#1548 from klazbaba/fix-export-issue-in-dateuti…
Browse files Browse the repository at this point in the history 
…ls.js

fixed issue with dateutils export
  • Loading branch information
@Inbal-Tish
Inbal-Tish authored Aug 9, 2021
2 parents 87b0b9c + b499813 commit 2f0cc93
Show file tree
Hide file tree
Showing 12 changed files with 110 additions and 108 deletions.
101 changes: 55 additions & 46 deletions src/agenda/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,22 +4,28 @@ 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,
ViewStyle,
LayoutChangeEvent,
NativeSyntheticEvent,
NativeScrollEvent
} from 'react-native';

// @ts-expect-error
import {extractComponentProps} from '../component-updater.js';
// @ts-expect-error
import {parseDate, xdateToData, toMarkingFormat} from '../interface';
// @ts-expect-error
import dateutils from '../dateutils';
// @ts-expect-error
import {weekDayNames, sameDate, sameMonth} from '../dateutils';
import {AGENDA_CALENDAR_KNOB} from '../testIDs';
// @ts-expect-error
import {VelocityTracker} from '../input';
import CalendarList, {CalendarListProps} from '../calendar-list';
import styleConstructor from './style';
import ReservationList, {ReservationListProps} from './reservation-list';

import ReservationList, {ReservationListProps} from './reservation-list';

const HEADER_HEIGHT = 104;
const KNOB_HEIGHT = 24;
Expand All @@ -28,36 +34,37 @@ export type ReservationItemType = {
name: string;
height: number;
day: XDate;
}
};

export type ReservationsType = {
[date: string]: ReservationItemType[]
}
[date: string]: ReservationItemType[];
};

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
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 */
items: ReservationsType;
/** callback that gets called when items for a certain month should be loaded (month became visible) */
loadItemsForMonth?: (data: any) => void;
/** 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;
/** callback that gets called when day changes while scrolling agenda list */
onDaychange?: (data: any) => void; //TODO: Should be renamed 'onDayChange'
/** specify how agenda knob should look like */
renderKnob?: () => JSX.Element;
/** initially selected day */
selected: boolean, //TODO: Should be renamed 'selectedDay'
/** Hide knob button. Default = false */
hideKnob: boolean,
/** When `true` and `hideKnob` prop is `false`, the knob will always be visible and the user will be able to drag the knob up and close the calendar. Default = false */
showClosingKnob: boolean
}
items: ReservationsType;
/** callback that gets called when items for a certain month should be loaded (month became visible) */
loadItemsForMonth?: (data: any) => void;
/** 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;
/** callback that gets called when day changes while scrolling agenda list */
onDaychange?: (data: any) => void; //TODO: Should be renamed 'onDayChange'
/** specify how agenda knob should look like */
renderKnob?: () => JSX.Element;
/** initially selected day */
selected: boolean; //TODO: Should be renamed 'selectedDay'
/** Hide knob button. Default = false */
hideKnob: boolean;
/** When `true` and `hideKnob` prop is `false`, the knob will always be visible and the user will be able to drag the knob up and close the calendar. Default = false */
showClosingKnob: boolean;
};

type AgendaState = {
scrollY: Animated.Value;
Expand All @@ -66,7 +73,7 @@ type AgendaState = {
firstReservationLoad: boolean;
selectedDay: XDate;
topDay: XDate;
}
};

/**
* @description: Agenda component
Expand Down Expand Up @@ -103,7 +110,7 @@ export default class Agenda extends Component<AgendaProps, AgendaState> {
hideKnob: PropTypes.bool,
/** When `true` and `hideKnob` prop is `false`, the knob will always be visible and the user will be able to drag the knob up and close the calendar. Default = false */
showClosingKnob: PropTypes.bool
}
};

private style: {[key: string]: ViewStyle};
private viewHeight: number;
Expand Down Expand Up @@ -156,7 +163,7 @@ export default class Agenda extends Component<AgendaProps, AgendaState> {
}

componentDidUpdate(prevProps: AgendaProps) {
if (this.props.selected && !dateutils.sameDate(parseDate(this.props.selected), parseDate(prevProps.selected))) {
if (this.props.selected && !sameDate(parseDate(this.props.selected), parseDate(prevProps.selected))) {
this.setState({selectedDay: parseDate(this.props.selected)});
} else if (!prevProps.items) {
this.loadReservations(this.props);
Expand Down Expand Up @@ -339,7 +346,7 @@ export default class Agenda extends Component<AgendaProps, AgendaState> {

onDayChange = (day: any) => {
const newDate = parseDate(day);
const withAnimation = dateutils.sameMonth(newDate, this.state.selectedDay);
const withAnimation = sameMonth(newDate, this.state.selectedDay);

this.calendar.scrollToDay(day, this.calendarOffset(), withAnimation);
this.setState({
Expand Down Expand Up @@ -388,15 +395,16 @@ export default class Agenda extends Component<AgendaProps, AgendaState> {

renderKnob() {
const {showClosingKnob, hideKnob, renderKnob} = this.props;
let knob: JSX.Element | null = <View style={this.style.knobContainer}/>;
let knob: JSX.Element | null = <View style={this.style.knobContainer} />;

if (!hideKnob) {
const knobView = renderKnob ? renderKnob() : <View style={this.style.knob}/>;
knob = !this.state.calendarScrollable || showClosingKnob ? (
<View style={this.style.knobContainer}>
<View ref={c => (this.knob = c)}>{knobView}</View>
</View>
) : null;
const knobView = renderKnob ? renderKnob() : <View style={this.style.knob} />;
knob =
!this.state.calendarScrollable || showClosingKnob ? (
<View style={this.style.knobContainer}>
<View ref={c => (this.knob = c)}>{knobView}</View>
</View>
) : null;
}
return knob;
}
Expand All @@ -410,12 +418,12 @@ export default class Agenda extends Component<AgendaProps, AgendaState> {
});

renderWeekNumbersSpace = () => {
return this.props.showWeekNumbers && <View style={this.style.weekday}/>;
return this.props.showWeekNumbers && <View style={this.style.weekday} />;
};

render() {
const {firstDay, hideKnob, style, testID} = this.props;
const weekDaysNames = dateutils.weekDayNames(firstDay);
const weekDaysNames = weekDayNames(firstDay);
const agendaHeight = this.initialScrollPadPosition();
const weekdaysStyle = [
this.style.weekdays,
Expand Down Expand Up @@ -461,13 +469,14 @@ export default class Agenda extends Component<AgendaProps, AgendaState> {
weekdaysStyle.push({height: HEADER_HEIGHT});
}

const openCalendarScrollPadPosition = !hideKnob && this.state.calendarScrollable && this.props.showClosingKnob ? agendaHeight + HEADER_HEIGHT : 0;
const openCalendarScrollPadPosition =
!hideKnob && this.state.calendarScrollable && this.props.showClosingKnob ? agendaHeight + HEADER_HEIGHT : 0;
const shouldAllowDragging = !hideKnob && !this.state.calendarScrollable;
const scrollPadPosition = (shouldAllowDragging ? HEADER_HEIGHT : openCalendarScrollPadPosition) - KNOB_HEIGHT;
const scrollPadStyle = {
height: KNOB_HEIGHT,
top: scrollPadPosition,
left: (this.viewWidth - 80) / 2,
left: (this.viewWidth - 80) / 2
};

return (
Expand Down
38 changes: 22 additions & 16 deletions src/agenda/reservation-list/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,25 @@ 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,
ViewStyle,
TextStyle,
NativeSyntheticEvent,
NativeScrollEvent,
LayoutChangeEvent
} from 'react-native';

// @ts-expect-error
import {extractComponentProps} from '../../component-updater';
// @ts-expect-error
import dateutils from '../../dateutils';
// @ts-expect-error
import {sameDate} from '../../dateutils';
import {toMarkingFormat} from '../../interface';
import styleConstructor from './style';
import Reservation, {ReservationProps} from './reservation';
import {ReservationItemType, ReservationsType} from 'agenda';


export interface DayReservations {
reservation?: ReservationItemType;
date?: XDate;
Expand Down Expand Up @@ -50,10 +56,10 @@ export type ReservationListProps = ReservationProps & {
/** A RefreshControl component, used to provide pull-to-refresh functionality for the ScrollView */
refreshControl?: JSX.Element;
/** Set this true while waiting for new data from a refresh */
refreshing?: boolean,
refreshing?: boolean;
/** If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make sure to also set the refreshing prop correctly */
onRefresh?: () => void;
}
};

interface ReservationsListState {
reservations: DayReservations[];
Expand Down Expand Up @@ -93,11 +99,11 @@ class ReservationList extends Component<ReservationListProps, ReservationsListSt
refreshing: PropTypes.bool,
/** If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make sure to also set the refreshing prop correctly */
onRefresh: PropTypes.func
}
};

static defaultProps = {
refreshing: false,
selectedDay: new XDate(true),
selectedDay: new XDate(true)
};
private style: {[key: string]: ViewStyle | TextStyle};
private heights: number[];
Expand Down Expand Up @@ -125,7 +131,7 @@ class ReservationList extends Component<ReservationListProps, ReservationsListSt

componentDidUpdate(prevProps: ReservationListProps) {
if (prevProps !== this.props) {
if (!dateutils.sameDate(prevProps.topDay, this.props.topDay)) {
if (!sameDate(prevProps.topDay, this.props.topDay)) {
this.setState(
{
reservations: []
Expand All @@ -147,7 +153,7 @@ class ReservationList extends Component<ReservationListProps, ReservationsListSt
updateReservations(props: ReservationListProps) {
const {selectedDay} = props;
const reservations = this.getReservations(props);
if (this.list && !dateutils.sameDate(selectedDay, this.selectedDay)) {
if (this.list && !sameDate(selectedDay, this.selectedDay)) {
let scrollPosition = 0;
for (let i = 0; i < reservations.scrollPosition; i++) {
scrollPosition += this.heights[i] || 0;
Expand Down Expand Up @@ -244,8 +250,8 @@ class ReservationList extends Component<ReservationListProps, ReservationsListSt
if (!row) return;

const day = row.day;
const sameDate = dateutils.sameDate(day, this.selectedDay);
if (!sameDate && this.scrollOver) {
const dateIsSame = sameDate(day, this.selectedDay);
if (!dateIsSame && this.scrollOver) {
this.selectedDay = day.clone();
_.invoke(this.props, 'onDayChange', day.clone());
}
Expand All @@ -264,12 +270,12 @@ class ReservationList extends Component<ReservationListProps, ReservationsListSt
return false;
};

renderRow = ({item, index}: {item: DayReservations, index: number}) => {
renderRow = ({item, index}: {item: DayReservations; index: number}) => {
const reservationProps = extractComponentProps(Reservation, this.props);

return (
<View onLayout={this.onRowLayoutChange.bind(this, index)}>
<Reservation {...reservationProps} item={item}/>
<Reservation {...reservationProps} item={item} />
</View>
);
};
Expand All @@ -283,7 +289,7 @@ class ReservationList extends Component<ReservationListProps, ReservationsListSt
return _.invoke(this.props, 'renderEmptyData');
}

return <ActivityIndicator style={this.style.indicator} color={theme?.indicatorColor}/>;
return <ActivityIndicator style={this.style.indicator} color={theme?.indicatorColor} />;
}

return (
Expand Down
14 changes: 5 additions & 9 deletions src/agenda/reservation-list/reservation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,12 @@ import {View, Text} from 'react-native';

// @ts-expect-error
import {xdateToData} from '../../interface';
// @ts-expect-error
import dateutils from '../../dateutils';
// @ts-expect-error
import {isToday} from '../../dateutils';
import {RESERVATION_DATE} from '../../testIDs';
import styleConstructor from './style';
import {Theme} from '../../commons/types';
import {DayReservations} from './index';


export interface ReservationProps {
item: DayReservations;
/** Specify theme properties to override specific styles for reservation parts. Default = {} */
Expand All @@ -27,7 +24,7 @@ export interface ReservationProps {
/** specify how each item should be rendered in agenda */
renderItem?: (reservation: any, isFirst: boolean) => React.Component;
/** specify how empty date content with no items should be rendered */
renderEmptyDate?: (date?: XDate) => React.Component
renderEmptyDate?: (date?: XDate) => React.Component;
}

class Reservation extends Component<ReservationProps> {
Expand All @@ -45,7 +42,7 @@ class Reservation extends Component<ReservationProps> {
renderItem: PropTypes.func,
/** specify how empty date content with no items should be rendered */
renderEmptyDate: PropTypes.func
}
};

style;

Expand Down Expand Up @@ -82,7 +79,7 @@ class Reservation extends Component<ReservationProps> {
return this.props.renderDay(date ? xdateToData(date) : undefined, item);
}

const today = dateutils.isToday(date) ? this.style.today : undefined;
const today = isToday(date) ? this.style.today : undefined;
const dayNames = XDate.locales[XDate.defaultLocale].dayNamesShort;

if (date) {
Expand All @@ -97,11 +94,10 @@ class Reservation extends Component<ReservationProps> {
</View>
);
} else {
return <View style={this.style.day}/>;
return <View style={this.style.day} />;
}
}


render() {
const {reservation, date} = this.props.item;
let content;
Expand Down
Loading

0 comments on commit 2f0cc93

Please sign in to comment.