react-day-picker 8.0.2 → 8.0.5

package/src/components/Root/Root.test.tsx

@@ -0,0 +1,123 @@
+import React from 'react';
+
+import { RenderResult } from '@testing-library/react';
+import { addDays } from 'date-fns';
+import { DayPickerProps } from 'DayPicker';
+
+import { focusDay } from 'test/actions';
+import { getDayButton, queryMonthGrids } from 'test/po';
+import { customRender } from 'test/render';
+import { freezeBeforeAll } from 'test/utils';
+
+import { defaultClassNames } from 'contexts/DayPicker/defaultClassNames';
+import { ClassNames } from 'types/Styles';
+
+import { Root } from './Root';
+
+const today = new Date(2020, 10, 4);
+freezeBeforeAll(today);
+
+let container: HTMLElement;
+let view: RenderResult;
+
+function setup(dayPickerProps: DayPickerProps = {}) {
+  view = customRender(<Root />, dayPickerProps);
+  container = view.container;
+}
+
+describe('when the number of months is 1', () => {
+  const props: DayPickerProps = { numberOfMonths: 1 };
+  beforeEach(() => {
+    setup(props);
+  });
+  test('should display one month grid', () => {
+    expect(queryMonthGrids()).toHaveLength(1);
+  });
+});
+
+describe('when the number of months is greater than 1', () => {
+  const props: DayPickerProps = { numberOfMonths: 3 };
+  beforeEach(() => {
+    setup(props);
+  });
+  test('should display the specified number of month grids', () => {
+    expect(queryMonthGrids()).toHaveLength(3);
+  });
+});
+
+describe('when using the "classNames" prop', () => {
+  const classNames: ClassNames = {
+    root: 'foo'
+  };
+  beforeEach(() => {
+    setup({ classNames });
+  });
+  test('should display the specified number of month grids', () => {
+    expect(container.firstChild).toHaveClass('foo');
+  });
+});
+
+describe('when using the "className" prop', () => {
+  const props: DayPickerProps = { className: 'foo' };
+  beforeEach(() => {
+    setup(props);
+  });
+  test('should append the class name to the root element', () => {
+    expect(container.firstChild).toHaveClass('foo');
+  });
+});
+
+describe('when the "numberOfMonths" is greater than 1', () => {
+  const props: DayPickerProps = { numberOfMonths: 3 };
+  const expectedClassName = defaultClassNames.multiple_months;
+  beforeEach(() => {
+    setup(props);
+  });
+  test(`should have the ${expectedClassName} class name`, () => {
+    expect(container.firstChild).toHaveClass(expectedClassName);
+  });
+});
+
+describe('when showing the week numbers', () => {
+  const props: DayPickerProps = { showWeekNumber: true };
+  const expectedClassName = defaultClassNames.with_weeknumber;
+  beforeEach(() => {
+    setup(props);
+  });
+  test(`should have the ${expectedClassName} class name`, () => {
+    expect(container.firstChild).toHaveClass(expectedClassName);
+  });
+});
+
+describe('when "initialFocus" is set', () => {
+  const baseProps: DayPickerProps = {
+    initialFocus: true,
+    mode: 'single'
+  };
+  describe('when a day is not selected', () => {
+    beforeEach(() => {
+      setup(baseProps);
+    });
+    test('should focus today', () => {
+      expect(getDayButton(today)).toHaveFocus();
+    });
+    describe('when a new day is focused', () => {
+      beforeEach(() => {
+        focusDay(addDays(today, 1));
+      });
+      describe('and the calendar is rerendered', () => {
+        test.todo('should focus the new day');
+      });
+    });
+  });
+  describe('when a day is selected', () => {
+    const selected = addDays(today, 1);
+    const props: DayPickerProps = { ...baseProps, selected };
+    beforeEach(() => {
+      setup(props);
+    });
+    test('should focus the selected day', () => {
+      expect(getDayButton(selected)).toHaveFocus();
+    });
+  });
+});

package/src/components/Root/Root.tsx

@@ -0,0 +1,58 @@
+import React, { useEffect, useState } from 'react';
+
+import { Month } from 'components/Month';
+import { useDayPicker } from 'contexts/DayPicker';
+import { useFocusContext } from 'contexts/Focus';
+import { useNavigation } from 'contexts/Navigation';
+
+/** Render the container with the months according to the number of months to display. */
+export function Root(): JSX.Element {
+  const dayPicker = useDayPicker();
+  const focusContext = useFocusContext();
+  const navigation = useNavigation();
+
+  const [hasInitialFocus, setHasInitialFocus] = useState(false);
+
+  // Focus the focus target when initialFocus is passed in
+  useEffect(() => {
+    if (!dayPicker.initialFocus) return;
+    if (!focusContext.focusTarget) return;
+    if (hasInitialFocus) return;
+
+    focusContext.focus(focusContext.focusTarget);
+    setHasInitialFocus(true);
+  }, [
+    dayPicker.initialFocus,
+    hasInitialFocus,
+    focusContext.focus,
+    focusContext.focusTarget,
+    focusContext
+  ]);
+
+  // Apply classnames according to props
+  const classNames = [dayPicker.className ?? dayPicker.classNames.root];
+  if (dayPicker.numberOfMonths > 1) {
+    classNames.push(dayPicker.classNames.multiple_months);
+  }
+  if (dayPicker.showWeekNumber) {
+    classNames.push(dayPicker.classNames.with_weeknumber);
+  }
+
+  const style = {
+    ...dayPicker.styles.root,
+    ...dayPicker.style
+  };
+
+  return (
+    <div className={classNames.join(' ')} style={style} dir={dayPicker.dir}>
+      <div
+        className={dayPicker.classNames.months}
+        style={dayPicker.styles.months}
+      >
+        {navigation.displayMonths.map((month, i) => (
+          <Month key={i} displayIndex={i} displayMonth={month} />
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/components/Root/index.ts

@@ -0,0 +1 @@
+export * from './Root';

package/src/components/Row/Row.test.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+
+import { screen } from '@testing-library/react';
+import { DayPickerProps } from 'DayPicker';
+
+import { customRender } from 'test/render/customRender';
+
+import { CustomComponents } from 'types/DayPickerBase';
+
+import { Row, RowProps } from './Row';
+
+function setup(props: RowProps, dayPickerProps?: DayPickerProps) {
+  customRender(<Row {...props} />, dayPickerProps);
+}
+
+const props: RowProps = {
+  displayMonth: new Date(2020, 1),
+  weekNumber: 4,
+  dates: [new Date(2020, 1, 1), new Date(2020, 1, 2), new Date(2020, 1, 3)]
+};
+
+describe('when "showWeekNumber" is set', () => {
+  const dayPickerProps = {
+    showWeekNumber: true,
+    classNames: { cell: 'cell' },
+    styles: { cell: { background: 'red' } }
+  };
+  beforeEach(() => {
+    setup(props, dayPickerProps);
+  });
+  test('should display the cell with the week number', () => {
+    const cell = screen.getByRole('cell', { name: `${props.weekNumber}` });
+    expect(cell).toBeInTheDocument();
+  });
+  test('the cell should have the "cell" class name', () => {
+    const cell = screen.getByRole('cell', { name: `${props.weekNumber}` });
+    expect(cell).toHaveClass(dayPickerProps.classNames.cell);
+  });
+  test('the cell should have the "cell" style', () => {
+    const cell = screen.getByRole('cell', { name: `${props.weekNumber}` });
+    expect(cell).toHaveStyle(dayPickerProps.styles.cell);
+  });
+});
+
+describe('when using a custom Day component', () => {
+  const components: CustomComponents = {
+    Day: () => <div>CustomDay</div>
+  };
+  const dayPickerProps = { components };
+  beforeEach(() => {
+    setup(props, dayPickerProps);
+  });
+  test('it should render the custom component instead', () => {
+    expect(screen.getAllByText('CustomDay')).toHaveLength(props.dates.length);
+  });
+});
+
+describe('when using a custom WeekNumber component', () => {
+  const components: CustomComponents = {
+    WeekNumber: () => <div>WeekNumber</div>
+  };
+  const dayPickerProps: DayPickerProps = { components, showWeekNumber: true };
+  beforeEach(() => {
+    setup(props, dayPickerProps);
+  });
+  test('it should render the custom component instead', () => {
+    expect(screen.getByText('WeekNumber')).toBeInTheDocument();
+  });
+});

package/src/components/Row/Row.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+
+import getUnixTime from 'date-fns/getUnixTime';
+
+import { Day } from 'components/Day';
+import { WeekNumber } from 'components/WeekNumber';
+import { useDayPicker } from 'contexts/DayPicker';
+
+/**
+ * The props for the [[Row]] component.
+ */
+export interface RowProps {
+  /** The month where the row is displayed. */
+  displayMonth: Date;
+  /** The number of the week to render. */
+  weekNumber: number;
+  /** The days contained in the week. */
+  dates: Date[];
+}
+
+/** Render a row in the calendar, with the days and the week number. */
+export function Row(props: RowProps): JSX.Element {
+  const { styles, classNames, showWeekNumber, components } = useDayPicker();
+
+  const DayComponent = components?.Day ?? Day;
+  const WeeknumberComponent = components?.WeekNumber ?? WeekNumber;
+
+  let weekNumberCell;
+  if (showWeekNumber) {
+    weekNumberCell = (
+      <td className={classNames.cell} style={styles.cell}>
+        <WeeknumberComponent number={props.weekNumber} dates={props.dates} />
+      </td>
+    );
+  }
+
+  return (
+    <tr className={classNames.row} style={styles.row}>
+      {weekNumberCell}
+      {props.dates.map((date) => (
+        <td
+          className={classNames.cell}
+          style={styles.cell}
+          key={getUnixTime(date)}
+        >
+          <DayComponent displayMonth={props.displayMonth} date={date} />
+        </td>
+      ))}
+    </tr>
+  );
+}

package/src/components/Row/index.ts

@@ -0,0 +1 @@
+export * from './Row';

package/src/components/Table/Table.test.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+
+import { DayPickerProps } from 'DayPicker';
+
+import { customRender } from 'test/render/customRender';
+
+import { Table, TableProps } from './Table';
+
+function setup(props: TableProps, dayPickerProps?: DayPickerProps) {
+  return customRender(<Table {...props} />, dayPickerProps);
+}
+
+const props: TableProps = {
+  displayMonth: new Date(2020, 1)
+};
+
+test('should render correctly', () => {
+  const { container } = setup(props);
+  expect(container.firstChild).toMatchSnapshot();
+});
+
+describe('when showing the week numbers', () => {
+  const dayPickerProps = { showWeekNumber: true };
+  test('should render correctly', () => {
+    const { container } = setup(props, dayPickerProps);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});
+
+describe('when using custom components', () => {
+  const dayPickerProps: DayPickerProps = {
+    components: {
+      Head: () => <div>CustomHead </div>,
+      Row: () => <div>CustomRow </div>,
+      Footer: () => <div>CustomFooter</div>
+    }
+  };
+  test('should render correctly', () => {
+    const { container } = setup(props, dayPickerProps);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

package/src/components/Table/Table.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+
+import { Footer } from 'components/Footer';
+import { Head } from 'components/Head';
+import { Row } from 'components/Row';
+import { useDayPicker } from 'contexts/DayPicker';
+
+import { getMonthWeeks } from './utils/getMonthWeeks';
+
+/** The props for the [[Table]] component. */
+export interface TableProps {
+  /** The ID of the label of the table (the same given to the Caption). */
+  ['aria-labelledby']?: string;
+  /** The month where the table is displayed. */
+  displayMonth: Date;
+}
+
+/** Render the table with the calendar. */
+export function Table(props: TableProps): JSX.Element {
+  const {
+    locale,
+    classNames,
+    styles,
+    hideHead,
+    fixedWeeks,
+    components,
+    weekStartsOn
+  } = useDayPicker();
+
+  const weeks = getMonthWeeks(props.displayMonth, {
+    useFixedWeeks: Boolean(fixedWeeks),
+    locale,
+    weekStartsOn
+  });
+
+  const HeadComponent = components?.Head ?? Head;
+  const RowComponent = components?.Row ?? Row;
+  const FooterComponent = components?.Footer ?? Footer;
+  return (
+    <table
+      className={classNames.table}
+      style={styles.table}
+      role="grid"
+      aria-labelledby={props['aria-labelledby']}
+    >
+      {!hideHead && <HeadComponent />}
+      <tbody className={classNames.tbody} style={styles.tbody}>
+        {weeks.map((week) => (
+          <RowComponent
+            displayMonth={props.displayMonth}
+            key={week.weekNumber}
+            dates={week.dates}
+            weekNumber={week.weekNumber}
+          />
+        ))}
+      </tbody>
+      <FooterComponent />
+    </table>
+  );
+}