14.0.0 BpkCalendar Migration Guide

This guide explains how to migrate use of BpkCalendar in the 14.0.0 release.

In common for all the scenarios described below is the fact that you'll need to provide more strings for accessibility purposes. These strings should be localised in the traveller's language.

Note: All of the relevant strings are required, this is enforced via prop types and Flow. The component will throw an error if any are missing or empty.

Single Selection

Single selection is the simplest case.

Before

import React, { Component } from 'react';
import BpkCalendar, { SELECTION_TYPES } from 'backpack-react-native/bpk-component-calendar';

const MyCalendar = (props) => <BpkCalendar selectionType={SELECTION_TYPES.single} {...rest} />;

After

import React, { Component } from 'react';
import BpkCalendar, { makeSingleSelection } from 'backpack-react-native/bpk-component-calendar';

const singleSelection = makeSingleSelection({

  // `CALENDAR_SINGLE_SELECT_HINT_LABEL` should be a string that provides a
  // hint to the user on how to select a date.
  //
  // English example: "Double tap to select date"
  selectHint: I18n.translate('CALENDAR_SINGLE_SELECT_HINT_LABEL'),
});

const MyCalendar = (props) => <BpkCalendar selectionType={singleSelection} {...rest} />;

Range Selection

Range selection is very complex and requires quite a few strings to provide a good screen reader experience.

Before

import React, { Component } from 'react';
import BpkCalendar, { SELECTION_TYPES } from 'backpack-react-native/bpk-component-calendar';

const MyCalendar = (props) => <BpkCalendar selectionType={SELECTION_TYPES.range} {...rest} />;

After

import React, { Component } from 'react';
import BpkCalendar, { makeRangeSelection } from 'backpack-react-native/bpk-component-calendar';

const rangeSelection = makeRangeSelection({

  // `CALENDAR_RANGE_SELECT_HINT_LABEL` should be
  // a hint that is read out to screen reader users
  // when no dates have been selected. Should explain how
  // to select the start date i.e. by double tapping.
  //
  // English example: "Double tap to select departure date"
  startDateSelectHint: I18n.translate('CALENDAR_RANGE_START_DATE_SELECT_HINT_LABEL'),

  // `CALENDAR_RANGE_END_DATE_SELECT_HINT_LABEL` should be
  // a hint that is read out to screen reader users
  // when only the start date has been selected. Should explain how
  // to select the end date i.e. by double tapping.
  //
  // English example: "Double tap to select return date"
  endDateSelectHint: I18n.translate('CALENDAR_RANGE_END_DATE_SELECT_HINT_LABEL'),

  // CALENDAR_RANGE_START_DATE_SELECTED_STATE_LABEL should be
  // a string that is read out to screen reader users
  // when the selected start date has focus.
  //
  // English example: "Selected as departure date"
  startDateSelectedState: I18n.translate('CALENDAR_RANGE_START_DATE_SELECTED_STATE_LABEL'),

  // CALENDAR_RANGE_END_DATE_SELECTED_STATE_LABEL should be
  // a string that is read out to screen reader users
  // when the selected end date has focus.
  //
  // English example: "Selected as return date"
  endDateSelectedState: I18n.translate('CALENDAR_RANGE_END_DATE_SELECTED_STATE_LABEL'),

  // CALENDAR_RANGE_END_AND_START_DATE_SELECTED_STATE_LABEL should be
  // a string that is read out to screen reader users
  // when the selected end date is the same as the start date and
  // this date has focus.
  //
  // English example: "Selected as both departure and return date"
  endAndStartDateSelectedState: I18n.translate('CALENDAR_RANGE_END_AND_START_DATE_SELECTED_STATE_LABEL'),

  // CALENDAR_RANGE_DATE_BETWEEN_START_AND_END_SELECTED_STATE_LABEL
  // should be a string that is read out to screen reader users
  // when a date between the start and end date has focus. e.g.
  // when the start date is 01/03/2021 and the end date is 05/03/2021
  // and the date with focus is 03/03/2021.
  //
  // English example: "Selected between departure and return date"
  dateBetweenStartAndEndSelectedState: I18n.translate('CALENDAR_RANGE_DATE_BETWEEN_START_AND_END_SELECTED_STATE_LABEL'),

  // CALENDAR_RANGE_NEXT_SELECTION_PROMPT_LABEL should be
  // a prompt that is read out to screen reader users
  // when a start date is selected. Should explain to the user
  // that they should select an end date for the range.
  //
  // English example: "Now select a return date (if required)"
  makeNextSelectionPrompt: I18n.translate('CALENDAR_RANGE_NEXT_SELECTION_PROMPT_LABEL'),
});

const MyCalendar = (props) => <BpkCalendar selectionType={rangeSelection} {...rest} />;

Multiple Selection

Before

import React, { Component } from 'react';
import BpkCalendar, { SELECTION_TYPES } from 'backpack-react-native/bpk-component-calendar';

const MyCalendar = (props) => <BpkCalendar selectionType={SELECTION_TYPES.multiple} {...rest} />;

After

import React, { Component } from 'react';
import BpkCalendar, { makeMultipleSelection } from 'backpack-react-native/bpk-component-calendar';

const multipleSelection = makeMultipleSelection({

  // `CALENDAR_SINGLE_SELECT_HINT_LABEL` should be a string that provides a
  // hint to the user on how to select a date.
  //
  // English example: "Double tap to select date"
  selectHint: I18n.translate('CALENDAR_SINGLE_SELECT_HINT_LABEL'),

  // `CALENDAR_SINGLE_DESELECT_HINT_LABEL` should be a string that provides a
  // hint to the user on how to deselect a selected date.
  //
  // English example: "Double tap to deselect date"
  selectHint: I18n.translate('CALENDAR_SINGLE_DESELECT_HINT_LABEL'),
});

const MyCalendar = (props) => <BpkCalendar selectionType={multipleSelection} {...rest} />;