From 75e42dd984952e9fbec6e1c4d6107cb9f1168dd3 Mon Sep 17 00:00:00 2001
From: Artur Yorsh <10753921+artyorsh@users.noreply.github.com>
Date: Thu, 17 Oct 2019 15:17:52 +0300
Subject: [PATCH] fix(ui): calendar min-max navigation

---
 .../ui/calendar/baseCalendar.component.tsx    | 34 +++++++---------
 .../ui/calendar/calendar.component.tsx        |  2 +
 .../components/calendarHeader.component.tsx   |  8 ++--
 src/playground/src/ui/screen/calendar/type.ts | 29 ++++----------
 .../calendar/calendarBounds.component.tsx     | 39 +++++++++++++++++++
 .../src/ui/screen/showcases/calendar/index.ts |  1 +
 6 files changed, 66 insertions(+), 47 deletions(-)
 create mode 100644 src/playground/src/ui/screen/showcases/calendar/calendarBounds.component.tsx

diff --git a/src/framework/ui/calendar/baseCalendar.component.tsx b/src/framework/ui/calendar/baseCalendar.component.tsx
index ab87b7565..1ac6f508f 100644
--- a/src/framework/ui/calendar/baseCalendar.component.tsx
+++ b/src/framework/ui/calendar/baseCalendar.component.tsx
@@ -155,9 +155,8 @@ export abstract class BaseCalendarComponent<D, P> extends React.Component<BaseCa
   };
 
   private onDayPickerPagerSelect = (index: number): void => {
-    const yearStart: D = this.dateService.getYearStart(this.min);
     this.setState({
-      visibleDate: this.dateService.addMonth(yearStart, index),
+      visibleDate: this.dateService.addMonth(this.min, index),
     });
   };
 
@@ -174,27 +173,20 @@ export abstract class BaseCalendarComponent<D, P> extends React.Component<BaseCa
     });
   };
 
-  private onCalendarPagerLeft = (): void => {
-    this.onCalendarPagerMove(-1);
-  };
-
-  private onCalendarPagerRight = (): void => {
-    this.onCalendarPagerMove(1);
-  };
+  private onHeaderNavigationLeftPress = (): void => {
+    const pagerRef: React.RefObject<CalendarPager<D>> = this.getCurrentPagerRef();
 
-  private onCalendarPagerMove = (step: number): void => {
-    const ref: React.RefObject<CalendarPager<D>> = this.getCurrentPagerRef();
-    const index: number = this.getCalendarPagerIndex();
-
-    this.onCalendarPagerMoveStart(ref, index, step);
+    pagerRef.current.scrollToIndex({
+      index: pagerRef.current.props.selectedIndex - 1,
+      animated: true,
+    });
   };
 
-  private onCalendarPagerMoveStart = (ref: React.RefObject<CalendarPager<D>>,
-                                      index: number,
-                                      step: number): void => {
+  private onHeaderNavigationRightPress = (): void => {
+    const pagerRef: React.RefObject<CalendarPager<D>> = this.getCurrentPagerRef();
 
-    ref.current.scrollToIndex({
-      index: index + step,
+    pagerRef.current.scrollToIndex({
+      index: pagerRef.current.props.selectedIndex + 1,
       animated: true,
     });
   };
@@ -524,8 +516,8 @@ export abstract class BaseCalendarComponent<D, P> extends React.Component<BaseCa
         iconStyle={icon}
         lateralNavigationAllowed={this.isLateralNavigationAllowed()}
         onTitlePress={this.onPickerNavigationPress}
-        onLeft={this.onCalendarPagerLeft}
-        onRight={this.onCalendarPagerRight}
+        onNavigationLeftPress={this.onHeaderNavigationLeftPress}
+        onNavigationRightPress={this.onHeaderNavigationRightPress}
       />
     );
   };
diff --git a/src/framework/ui/calendar/calendar.component.tsx b/src/framework/ui/calendar/calendar.component.tsx
index e5b8467ec..928ccf0fe 100644
--- a/src/framework/ui/calendar/calendar.component.tsx
+++ b/src/framework/ui/calendar/calendar.component.tsx
@@ -60,6 +60,8 @@ export type CalendarElement<D> = React.ReactElement<CalendarProps<D>>;
  *
  * @overview-example CalendarFilter
  *
+ * @overview-example CalendarBounds
+ *
  * @overview-example CalendarCustomLocale
  *
  * @example CalendarMoment
diff --git a/src/framework/ui/calendar/components/calendarHeader.component.tsx b/src/framework/ui/calendar/components/calendarHeader.component.tsx
index f69048707..6b18936e2 100644
--- a/src/framework/ui/calendar/components/calendarHeader.component.tsx
+++ b/src/framework/ui/calendar/components/calendarHeader.component.tsx
@@ -20,8 +20,8 @@ interface ComponentProps extends ViewProps {
   iconStyle?: ImageStyle;
   lateralNavigationAllowed: boolean;
   onTitlePress?: () => void;
-  onRight?: () => void;
-  onLeft?: () => void;
+  onNavigationLeftPress?: () => void;
+  onNavigationRightPress?: () => void;
 }
 
 export type CalendarHeaderProps = ComponentProps;
@@ -64,14 +64,14 @@ export class CalendarHeader extends React.Component<CalendarHeaderProps> {
           appearance='ghost'
           // @ts-ignore
           icon={this.renderLeftIcon}
-          onPress={this.props.onLeft}
+          onPress={this.props.onNavigationLeftPress}
         />
         <Button
           style={styles.headerButton}
           appearance='ghost'
           // @ts-ignore
           icon={this.renderRightIcon}
-          onPress={this.props.onRight}
+          onPress={this.props.onNavigationRightPress}
         />
       </View>
     );
diff --git a/src/playground/src/ui/screen/calendar/type.ts b/src/playground/src/ui/screen/calendar/type.ts
index 5a609efd3..cbbf0c4f7 100644
--- a/src/playground/src/ui/screen/calendar/type.ts
+++ b/src/playground/src/ui/screen/calendar/type.ts
@@ -39,17 +39,10 @@ const startViewCalendar: ComponentShowcaseItem = {
   },
 };
 
-const lowerBoundCalendar: ComponentShowcaseItem = {
+const minMaxCalendar: ComponentShowcaseItem = {
   props: {
-    min: now,
-    max: now,
-  },
-};
-
-const higherBoundCalendar: ComponentShowcaseItem = {
-  props: {
-    min: new Date(now.getFullYear() - 12, 0, 1),
-    max: new Date(now.getFullYear() + 12, 0, 1),
+    min: new Date(now.getFullYear(), now.getMonth(), 15),
+    max: new Date(now.getFullYear(), now.getMonth() + 1, 15),
   },
 };
 
@@ -116,17 +109,10 @@ const startViewSection: ComponentShowcaseSection = {
   ],
 };
 
-const lowerBoundedSection: ComponentShowcaseSection = {
-  title: 'Lower Bounds',
-  items: [
-    lowerBoundCalendar,
-  ],
-};
-
-const higherBoundedSection: ComponentShowcaseSection = {
-  title: 'Higher Bounds',
+const minMaxSection: ComponentShowcaseSection = {
+  title: 'Date Bounds',
   items: [
-    higherBoundCalendar,
+    minMaxCalendar,
   ],
 };
 
@@ -165,8 +151,7 @@ export const calendarShowcase: ComponentShowcase = {
     // momentSection,
     // dateFnsSection,
     // startViewSection,
-    // lowerBoundedSection,
-    // higherBoundedSection,
+    // minMaxSection,
     // boundingMonthSection,
     // filterSection,
     // customTitlesSection,
diff --git a/src/playground/src/ui/screen/showcases/calendar/calendarBounds.component.tsx b/src/playground/src/ui/screen/showcases/calendar/calendarBounds.component.tsx
new file mode 100644
index 000000000..f450b2468
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/calendar/calendarBounds.component.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  Calendar,
+  Layout,
+} from 'react-native-ui-kitten';
+
+const now = new Date();
+
+export class CalendarBoundsShowcase extends React.Component {
+
+  state = {
+    date: new Date(),
+  };
+
+  onSelect = (date) => {
+    this.setState({ date });
+  };
+
+  render() {
+    return (
+      <Layout style={styles.container}>
+        <Calendar
+          min={new Date(now.getFullYear(), now.getMonth(), 15)}
+          max={new Date(now.getFullYear(), now.getMonth() + 1, 15)}
+          date={this.state.date}
+          onSelect={this.onSelect}
+        />
+      </Layout>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 16,
+    minHeight: 376,
+  },
+});
diff --git a/src/playground/src/ui/screen/showcases/calendar/index.ts b/src/playground/src/ui/screen/showcases/calendar/index.ts
index 80208c293..ddb4a14fb 100644
--- a/src/playground/src/ui/screen/showcases/calendar/index.ts
+++ b/src/playground/src/ui/screen/showcases/calendar/index.ts
@@ -1,4 +1,5 @@
 export { CalendarBoundingMonthShowcase } from './calendarBoundingMonth.component';
+export { CalendarBoundsShowcase } from './calendarBounds.component';
 export { CalendarCustomDayShowcase } from './calendarCustomDay.component';
 export { CalendarCustomLocaleShowcase } from './calendarCustomLocale.component';
 export { CalendarFilterShowcase } from './calendarFilterShowcase.component';