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

Question

Мне трудно использовать пользовательскую панель инструментов с реагирующим большим календарем и машинописью.Я пытаюсь получить доступ к оригинальным методам просмотра «следующий, предыдущий» «месяц, день, неделя».Я внимательно прочитал ... https://github.com/intljusticemission/react-big-calendar/issues/623 https://github.com/intljusticemission/react-big-calendar/issues/818 http://intljusticemission.github.io/react-big-calendar/examples/index.html#prop-components

Пользовательский интерфейс отображается нормально, без ошибок, Теперь мне нужен доступ к оригинальным методам, чтобы я мог манипулироватькалендарь.

Основная проблема в том, что моя кнопка срабатывает, но на самом деле ничего не перемещается.

Некоторые проблемы, которые я считаю ...

- Я на самом деле не использую navateMethod, как я думаю

- Дата и дата по умолчанию в BigCalendar isnне меняется, потому что я перезаписываю его одним и тем же днем ​​каждый раз, когда нажимаю?

- мне нужно реализовать этот пример из их документов?

Custom views can be any React component, that implements the following interface:

interface View {
  static title(date: Date, { formats: DateFormat[], culture: string?, ...props }): string
  static navigate(date: Date, action: 'PREV' | 'NEXT' | 'DATE'): Date
}

У кого-нибудь естьПример, на который я мог бы посмотреть ???

Вот мой полный исходный код.

import React from 'react'
import { MainContent } from '../../../common/templates/partials'
import BigCalendar from 'react-big-calendar'
import ToolBar from 'react-big-calendar'
import Icon from 'app/common/components/Icon'
import moment from 'moment'
const styles = require('./CalendarUI.scss')

BigCalendar.momentLocalizer(moment) // or globalizeLocalizer

const events = [
  {
    start: new Date(),
    end: new Date(),
    title: 'Some title',
  },
]

class CustomToolbar extends ToolBar {

  render() {
    // tslint:disable-next-line:no-console
    console.log(this.props, this)
    /* tslint:disable-next-line */
    const {label, onNavigate} = this.props as any
    return (
      <div className="rbc-toolbar">
        <div>
          {/* tslint:disable-next-line  */}
          <button onClick={() => this.props.onNavigate ? onNavigate(null as any, 'PREV') : undefined}>
            <Icon icon="B" />
          </button>
          <label className="label-date">{label}</label>
          {/* tslint:disable-next-line  */}
          <button onClick={() => this.props.onNavigate ? onNavigate(null, 'NEXT') : undefined}>
            <Icon icon="A" />
          </button>
        </div>

        <div>
        <span className="rbc-btn-group">
          <button>Month</button>
          <button>Day</button>
          <button>Week</button>
        </span>

        <button className="btn btn-back">
          <Icon icon="R" />
        </button>
        <button className="btn btn-back">
          <Icon icon="meet_now" />
        </button>
        </div>
      </div>
    )
  }
}

const logger = (data: string) =>
  // tslint:disable-next-line:no-console
  console.log(data)
const CalendarUI = () => (
  <MainContent>
    <div className={styles.calendarContainer}>
      <BigCalendar
        defaultDate={moment().toDate()}
        defaultView="month"
        events={events}
        components={{ toolbar: CustomToolbar }}
        startAccessor="startDate"
        endAccessor="endDate"
        onView={logger}
        date={moment().toDate()}
      />
    </div>
  </MainContent>
)

export default CalendarUI

Answer 1

Привет, я разобрался с созданием компонента 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 let navigateContants = {
  PREVIOUS: 'PREV',
  NEXT: 'NEXT',
  TODAY: 'TODAY',
  DATE: 'DATE',
}

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


const CustomToolbar: React.SFC<ICustomTooolbarProps> = (props) => {
    
  debugger;
 /*   const {
      localizer: { props.messages },
      label,
    } = props*/

    function navigate (action) {
      props.onNavigate(action)
    }
  
    function viewItem (view){
      props.onViewChange(view)
    }
  
    function viewNamesGroup(messages) {
      let 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 }}

                      />

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

Answer 2

Не позитивно для частей 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>
      ));
    }
  }
}