Доступ к методам навигации React-Big-Calendar и Typescript

Не положительно по части TS, но я недавно сам реализовал настраиваемую панель инструментов. Я скопировал исходную панель инструментов, а затем настроил ее так, чтобы она соответствовала моим требованиям. Мои нестандартные вещи не так уж и важны, но это должно показать вам, как они изначально реализовали биты navigate.

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import cn from 'classnames';
import ToolbarDateHeader from './ToolbarDateHeader.component';
import { Icon, Button, ButtonGroup, ButtonToolbar } from '../app';

const navigate = {
  PREVIOUS: 'PREV',
  NEXT: 'NEXT',
  TODAY: 'TODAY',
  DATE: 'DATE'
};

const propTypes = {
  view: PropTypes.string.isRequired,
  views: PropTypes.arrayOf(PropTypes.string).isRequired,
  label: PropTypes.node.isRequired,
  localizer: PropTypes.object,
  onNavigate: PropTypes.func.isRequired,
  onView: PropTypes.func.isRequired
};

export default class Toolbar extends Component {
  static propTypes = propTypes;
  render() {
    let {
      localizer: { messages },
      label,
      date
    } = this.props;

    return (
      <ButtonToolbar>
        <ButtonGroup>
          <Button onClick = {this.navigate.bind(null, navigate.TODAY)}>
            {messages.today}
          </Button>
          <Button onClick = {this.navigate.bind(null, navigate.PREVIOUS)}>
            <Icon glyph = "caret-left" />
          </Button>
          <Button onClick = {this.navigate.bind(null, navigate.NEXT)}>
            <Icon glyph = "caret-right" />
          </Button>
        </ButtonGroup>

        <ToolbarDateHeader date = {date} onChange = {this.toThisDay}>
          {label}
        </ToolbarDateHeader>

        <ButtonGroup className = "pull-right">
          {this.viewNamesGroup(messages)}
        </ButtonGroup>
      </ButtonToolbar>
    );
  }

  toThisDay = date => {
    this.props.onView('day');
    // give it just a tick to 'set' the view, prior to navigating to the proper date
    setTimeout(() => {
      this.props.onNavigate(navigate.DATE, date);
    }, 100);
  };

  navigate = action => {
    this.props.onNavigate(action);
  };

  view = view => {
    this.props.onView(view);
  };

  viewNamesGroup(messages) {
    let viewNames = this.props.views;
    const view = this.props.view;

    if (viewNames.length > 1) {
      return viewNames.map(name => (
        <Button
          key = {name}
          className = {cn({
            active: view === name,
            'btn-primary': view === name
          })}
          onClick = {this.view.bind(null, name)}
        >
          {messages[name]}
        </Button>
      ));
    }
  }
}

Я понял это, создав компонент CustomToolbar. Посмотрите следующий код:

import * as React from 'react';
import { css } from 'office-ui-fabric-react';

export interface ICustomTooolbarProps {
    view: string;
    views: string[];
    label: any;
    localizer: any;
    onNavigate: (action: any) => void;
    onView: (view: any) => void;
    onViewChange: (view: any) => void;
    messages: any;
}

export const navigateContants = {
    PREVIOUS: 'PREV',
    NEXT: 'NEXT',
    TODAY: 'TODAY',
    DATE: 'DATE'
};

export const views = {
    MONTH: 'month',
    WEEK: 'week',
    WORK_WEEK: 'work_week',
    DAY: 'day',
    AGENDA: 'agenda'
};

const CustomToolbar: React.SFC<ICustomTooolbarProps> = (props) => {
    function navigate(action) {
        props.onNavigate(action);
    }

    function viewItem(view) {
        props.onViewChange(view);
    }

    function viewNamesGroup(messages) {
        const viewNames = props.views;
        const view = props.view;

        if (viewNames.length > 1) {
            return viewNames.map((name) => (
                <button
                    type = "button"
                    key = {name}
                    className = {css({ 'rbc-active': view === name })}
                    onClick = {viewItem.bind(null, name)}>
                    {messages[name]}
                </button>
            ));
        }
    }

    return (
        <div className = "rbc-toolbar">
            <span className = "rbc-btn-group">
                <button type = "button" onClick = {navigate.bind(null, navigateContants.TODAY)}>
                    Current month
                </button>
                <button type = "button" onClick = {navigate.bind(null, navigateContants.PREVIOUS)}>
                    Previous month
                </button>
                <button type = "button" onClick = {navigate.bind(null, navigateContants.NEXT)}>
                    Next month
                </button>
            </span>

            <span className = "rbc-toolbar-label">{props.label}</span>

            <span className = "rbc-btn-group">{viewNamesGroup(props.messages)}</span>
        </div>
    );
};

export default CustomToolbar;

А вот код BigCalendar, использующий этот компонент

<BigCalendar
    popup
    onNavigate = {(focusDate, flipUnit, prevOrNext) => this.updateCalendarData(focusDate, prevOrNext)}
    onSelectEvent = {(data) => this.showModalInfo(data)}
    events = {this.state.data}
    views = {['month', 'week', 'agenda']}
    components = {{ toolbar: CustomToolbar }} // <- Custom toolbar
/>

Надеюсь, поможет ;)