How to use the @uifabric/utilities.classNamesFunction function in @uifabric/utilities

import {
  addDays,
  addWeeks,
  compareDates,
  compareDatePart,
  getDateRangeArray,
  isInDateRangeArray,
  getWeekNumbersInMonth
} from 'office-ui-fabric-react/lib/utilities/dateMath/DateMath';
import { ICalendarDayGridProps, ICalendarDayGridStyleProps, ICalendarDayGridStyles } from './CalendarDayGrid.types';
import { IProcessedStyleSet } from '@uifabric/styling';
import { DateRangeType, DayOfWeek } from '../Calendar/Calendar.types';

const DAYS_IN_WEEK = 7;

const getClassNames = classNamesFunction();

interface IWeekCorners {
  [key: string]: string;
}

export interface IDayInfo {
  key: string;
  date: string;
  originalDate: Date;
  isInMonth: boolean;
  isToday: boolean;
  isSelected: boolean;
  isInBounds: boolean;
  onSelected: () => void;
}

ICalendarIconStrings,
  ICalendarFormatDateCallbacks,
  ICalendarStyleProps,
  ICalendarStyles
} from './Calendar.types';
import { DayOfWeek, FirstWeekOfYear, DateRangeType } from 'office-ui-fabric-react/lib/utilities/dateValues/DateValues';
import { CalendarDay } from './CalendarDay/CalendarDay';
import { CalendarMonth } from './CalendarMonth/CalendarMonth';
import { ICalendarDay } from './CalendarDay/CalendarDay.types';
import { ICalendarMonth } from './CalendarMonth/CalendarMonth.types';
import { css, BaseComponent, KeyCodes, classNamesFunction, focusAsync, format } from '@uifabric/utilities';
import { IProcessedStyleSet } from '@uifabric/styling';
import { DayPickerStrings } from './defaults';
import { addMonths, addYears } from 'office-ui-fabric-react/lib/utilities/dateMath/DateMath';

const getClassNames = classNamesFunction();

const leftArrow = 'Up';
const rightArrow = 'Down';
const closeIcon = 'CalculatorMultiply';
export const defaultIconStrings: ICalendarIconStrings = {
  leftNavigation: leftArrow,
  rightNavigation: rightArrow,
  closeIcon: closeIcon
};

export const defaultWorkWeekDays: DayOfWeek[] = [
  DayOfWeek.Monday,
  DayOfWeek.Tuesday,
  DayOfWeek.Wednesday,
  DayOfWeek.Thursday,
  DayOfWeek.Friday

import { IWeeklyDayPickerProps, IWeeklyDayPickerStyleProps, IWeeklyDayPickerStyles } from './WeeklyDayPicker.types';
import {
  DateRangeType,
  DayOfWeek,
  FirstWeekOfYear,
  ICalendarFormatDateCallbacks,
  ICalendarStrings,
  ICalendarIconStrings,
  AnimationDirection
} from '../Calendar/Calendar.types';
import { CalendarDayGrid } from '../CalendarDayGrid/CalendarDayGrid';
import { ICalendarDayGrid } from '../CalendarDayGrid/CalendarDayGrid.types';
import { compareDatePart, getStartDateOfWeek, addDays, addMonths, compareDates } from '../../utilities/dateMath/DateMath';
import { Icon } from 'office-ui-fabric-react/lib/Icon';

const getClassNames = classNamesFunction();

const DEFAULT_STRINGS = {
  months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
  shortMonths: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
  days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
  shortDays: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
  goToToday: 'Go to today',
  prevMonthAriaLabel: 'Go to previous month',
  nextMonthAriaLabel: 'Go to next month',
  prevYearAriaLabel: 'Go to previous year',
  nextYearAriaLabel: 'Go to next year',
  prevYearRangeAriaLabel: 'Previous year range',
  nextYearRangeAriaLabel: 'Next year range',
  closeButtonAriaLabel: 'Close date picker',
  weekNumberFormatString: 'Week number {0}',
  prevWeekAriaLabel: 'Go to previous week',

getYearEnd,
  getMonthStart,
  getMonthEnd,
  compareDatePart
} from 'office-ui-fabric-react/lib/utilities/dateMath/DateMath';
import { Icon } from 'office-ui-fabric-react/lib/Icon';
import { ICalendarMonthProps, ICalendarMonthStyles, ICalendarMonthStyleProps } from './CalendarMonth.types';
import { getStyles } from './CalendarMonth.styles';
import { defaultIconStrings, defaultDateTimeFormatterCallbacks } from '../Calendar.base';
import { BaseComponent, css, getRTL, classNamesFunction, KeyCodes, format } from '@uifabric/utilities';
import { ICalendarYear, ICalendarYearRange } from '../CalendarYear/CalendarYear.types';
import { CalendarYear } from '../CalendarYear/CalendarYear';

const MONTHS_PER_ROW = 4;

const getClassNames = classNamesFunction();

export interface ICalendarMonthState {
  isYearPickerVisible?: boolean;
  animateBackwards?: boolean;
  previousNavigatedDate?: Date;
}

export class CalendarMonthBase extends BaseComponent {
  public static defaultProps: Partial = {
    styles: getStyles,
    strings: undefined,
    navigationIcons: defaultIconStrings,
    dateTimeFormatter: defaultDateTimeFormatterCallbacks,
    yearPickerHidden: false
  };

import * as React from 'react';
import { IDatePicker, IDatePickerProps, IDatePickerStrings, IDatePickerStyleProps, IDatePickerStyles } from './DatePicker.types';
import { BaseComponent, KeyCodes, classNamesFunction, getId, getNativeProps, divProperties, css } from '@uifabric/utilities';
import { Calendar, ICalendar, DayOfWeek } from '../../Calendar';
import { FirstWeekOfYear } from 'office-ui-fabric-react/lib/utilities/dateValues/DateValues';
import { Callout } from 'office-ui-fabric-react/lib/Callout';
import { DirectionalHint } from 'office-ui-fabric-react/lib/common/DirectionalHint';
import { TextField, ITextField } from 'office-ui-fabric-react/lib/TextField';
import { compareDates, compareDatePart } from 'office-ui-fabric-react/lib/utilities/dateMath/DateMath';
import { FocusTrapZone } from 'office-ui-fabric-react/lib/FocusTrapZone';

const getClassNames = classNamesFunction();

export interface IDatePickerState {
  selectedDate?: Date;
  formattedDate?: string;
  isDatePickerShown?: boolean;
  errorMessage?: string;
}

const DEFAULT_STRINGS: IDatePickerStrings = {
  months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
  shortMonths: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
  days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
  shortDays: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
  goToToday: 'Go to today',
  prevMonthAriaLabel: 'Go to previous month',
  nextMonthAriaLabel: 'Go to next month',

import * as React from 'react';
import { BaseComponent, KeyCodes, css, getId, classNamesFunction } from '@uifabric/utilities';
import { Icon } from 'office-ui-fabric-react/lib/Icon';
import { addMonths, compareDatePart, getMonthStart, getMonthEnd } from 'office-ui-fabric-react/lib/utilities/dateMath/DateMath';
import { ICalendarDayProps, ICalendarDayStyleProps, ICalendarDayStyles } from './CalendarDay.types';
import { IProcessedStyleSet } from '@uifabric/styling';
import { CalendarDayGrid } from '../../CalendarDayGrid/CalendarDayGrid';
import { ICalendarDayGrid } from '../../CalendarDayGrid/CalendarDayGrid.types';

const getClassNames = classNamesFunction();

export interface ICalendarDayState {
  previousNavigatedDate?: Date;
  animateBackwards?: boolean;
}

export class CalendarDayBase extends BaseComponent {
  private _dayGrid = React.createRef();

  public static getDerivedStateFromProps(
    nextProps: Readonly,
    prevState: Readonly
  ): Partial | null {
    const { dateTimeFormatter, strings } = nextProps;

    const previousDate = prevState && prevState.previousNavigatedDate;