react-day-picker 8.0.1 → 8.0.4

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>
+  );
+}