text: // @flow
  
  import React, { Component } from 'react';
  import { View } from 'react-native';
  
  import { MeetingList } from '../../calendar-sync';
  import { RecentList } from '../../recent-list';
  
  import styles from './styles';
  
  /**
   * The page to be displayed on render.
   */
  export const DEFAULT_PAGE = 0;
  
  type Props = {
  
      /**
       * Indicates if the list is disabled or not.
       */
      disabled: boolean,
  
      /**
       * The Redux dispatch function.
       */
      dispatch: Function,
  
      /**
       * The i18n translate function
       */
      t: Function
  };
  
  type State = {
  
      /**
       * The currently selected page.
       */
      pageIndex: number
  };
  
  /**
   * Abstract class for the platform specific paged lists.
   */
  export default class AbstractPagedList extends Component<Props, State> {
      /**
       * The list of pages displayed in the component, referenced by page index.
       */
      _pages: Array<Object>;
  
      /**
       * Constructor of the component.
       *
       * @inheritdoc
       */
      constructor(props: Props) {
          super(props);
  
          this._pages = [];
          for (const component of [ RecentList, MeetingList ]) {
              // XXX Certain pages may be contributed by optional features. For
              // example, MeetingList is contributed by the calendar feature and
              // apps i.e. SDK consumers may not enable the calendar feature.
              component && this._pages.push(component);
          }
  
          this.state = {
              pageIndex: DEFAULT_PAGE
          };
      }
  
      /**
       * Renders the component.
       *
       * @inheritdoc
       */
      render() {
          const { disabled } = this.props;
  
          return (
              <View
                  style = { [
                      styles.pagedListContainer,
                      disabled ? styles.pagedListContainerDisabled : null
                  ] }>
                  {
                      this._pages.length > 1
                          ? this._renderPagedList(disabled)
                          : React.createElement(
                              /* type */ this._pages[0],
                              /* props */ {
                                  disabled,
                                  style: styles.pagedList
                              })
                  }
              </View>
          );
      }
  
      _renderPagedList: boolean => React$Node;
  
      _selectPage: number => void;
  
      /**
       * Sets the selected page.
       *
       * @param {number} pageIndex - The index of the active page.
       * @protected
       * @returns {void}
       */
      _selectPage(pageIndex: number) {
          this.setState({
              pageIndex
          });
  
          // The page's Component may have a refresh(dispatch) function which we
          // invoke when the page is selected.
          const selectedPageComponent = this._pages[pageIndex];
  
          if (selectedPageComponent) {
              const { refresh } = selectedPageComponent;
  
              typeof refresh === 'function' && refresh(this.props.dispatch);
          }
      }
  }
  