fix(ui): calendar min-max navigation

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}
       />
     );
   };

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

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>
     );

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,

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,
+  },
+});

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';