Latest repo

node_modules/react-day-picker/src/components/HeadRow/HeadRow.test.tsx

@@ -0,0 +1,85 @@
+import { RenderResult } from '@testing-library/react';
+import { DayPickerProps } from 'DayPicker';
+
+import { customRender } from 'test/render';
+
+import { HeadRow } from './HeadRow';
+
+let container: HTMLElement;
+let view: RenderResult;
+
+let thElements: HTMLTableCellElement[];
+
+function setup(dayPickerProps: DayPickerProps = {}) {
+  view = customRender(
+    <table>
+      <thead>
+        <HeadRow />
+      </thead>
+    </table>,
+    dayPickerProps
+  );
+  container = view.container.firstChild?.firstChild as HTMLTableRowElement;
+  thElements = Array.from(container.getElementsByTagName('th'));
+}
+
+const dayPickerProps = {
+  styles: {
+    head: { color: 'red' },
+    head_row: { color: 'blue' },
+    head_cell: { color: 'green' }
+  },
+  classNames: {
+    head: 'foo',
+    head_row: 'foo_row',
+    head_cell: 'foo_head-cell'
+  }
+};
+
+describe('when rendered', () => {
+  beforeEach(() => {
+    setup(dayPickerProps);
+  });
+
+  test('tr element should have the `head_row` style', () => {
+    expect(container.firstChild).toHaveStyle(dayPickerProps.styles.head_row);
+  });
+
+  test('tr element should have the `head_row` class', () => {
+    expect(container.firstChild).toHaveClass(
+      dayPickerProps.classNames.head_row
+    );
+  });
+  test('should render 7 head elements', () => {
+    expect(thElements).toHaveLength(7);
+  });
+  test('should render the head elements with the "head_cell" class name', () => {
+    thElements.forEach((el) => {
+      expect(el).toHaveClass(dayPickerProps.classNames.head_cell);
+    });
+  });
+});
+
+describe('when showing the week numbers', () => {
+  beforeEach(() => {
+    setup({ ...dayPickerProps, showWeekNumber: true });
+  });
+  test('should render 8 head elements', () => {
+    expect(thElements).toHaveLength(7);
+  });
+  test('should render the head elements with the "head_cell" class name', () => {
+    thElements.forEach((el) => {
+      expect(el).toHaveClass(dayPickerProps.classNames.head_cell);
+    });
+  });
+  test('should render the head elements with the "head_cell" style', () => {
+    thElements.forEach((el) => {
+      expect(el).toHaveStyle(dayPickerProps.styles.head_cell);
+    });
+  });
+  test('should render the head elements with the "col" scope', () => {
+    thElements.forEach((el) => {
+      expect(el).toHaveAttribute('scope', 'col');
+    });
+  });
+});

node_modules/react-day-picker/src/components/HeadRow/HeadRow.tsx

@@ -0,0 +1,40 @@
+import { useDayPicker } from 'contexts/DayPicker';
+
+import { getWeekdays } from './utils';
+
+/**
+ * Render the HeadRow component - i.e. the table head row with the weekday names.
+ */
+export function HeadRow(): JSX.Element {
+  const {
+    classNames,
+    styles,
+    showWeekNumber,
+    locale,
+    weekStartsOn,
+    ISOWeek,
+    formatters: { formatWeekdayName },
+    labels: { labelWeekday }
+  } = useDayPicker();
+
+  const weekdays = getWeekdays(locale, weekStartsOn, ISOWeek);
+
+  return (
+    <tr style={styles.head_row} className={classNames.head_row}>
+      {showWeekNumber && (
+        <td style={styles.head_cell} className={classNames.head_cell}></td>
+      )}
+      {weekdays.map((weekday, i) => (
+        <th
+          key={i}
+          scope="col"
+          className={classNames.head_cell}
+          style={styles.head_cell}
+          aria-label={labelWeekday(weekday, { locale })}
+        >
+          {formatWeekdayName(weekday, { locale })}
+        </th>
+      ))}
+    </tr>
+  );
+}

node_modules/react-day-picker/src/components/HeadRow/index.ts

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

node_modules/react-day-picker/src/components/HeadRow/utils/getWeekdays.test.ts

@@ -0,0 +1,46 @@
+import { es } from 'date-fns/locale';
+
+import { freezeBeforeAll } from 'test/utils';
+
+import { getWeekdays } from './getWeekdays';
+
+const today = new Date(2022, 1, 12);
+const prevSunday = new Date(2022, 1, 6);
+const prevMonday = new Date(2022, 1, 7);
+
+freezeBeforeAll(today);
+
+let result: Date[];
+
+describe('when rendered without a locale', () => {
+  beforeEach(() => {
+    result = getWeekdays();
+  });
+  test('should return 7 days', () => {
+    expect(result).toHaveLength(7);
+  });
+  test('should return Sunday as first day', () => {
+    expect(result[0]).toEqual(prevSunday);
+  });
+});
+
+describe.each<0 | 1 | 2 | 3 | 4 | 5 | 6>([0, 1, 2, 3, 4, 5, 6])(
+  'when week start on %s',
+  (weekStartsOn) => {
+    beforeEach(() => {
+      result = getWeekdays(es, weekStartsOn);
+    });
+    test('the first date should be weekStartsOn', () => {
+      expect(result[0].getDay()).toBe(weekStartsOn);
+    });
+  }
+);
+
+describe('when using ISO week', () => {
+  beforeEach(() => {
+    result = getWeekdays(es, 3, true);
+  });
+  test('should return Monday as first day', () => {
+    expect(result[0]).toEqual(prevMonday);
+  });
+});

node_modules/react-day-picker/src/components/HeadRow/utils/getWeekdays.ts

@@ -0,0 +1,24 @@
+import { addDays, Locale, startOfISOWeek, startOfWeek } from 'date-fns';
+
+/**
+ * Generate a series of 7 days, starting from the week, to use for formatting
+ * the weekday names (Monday, Tuesday, etc.).
+ */
+export function getWeekdays(
+  locale?: Locale,
+  /** The index of the first day of the week (0 - Sunday). */
+  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6,
+  /** Use ISOWeek instead of locale/ */
+  ISOWeek?: boolean
+): Date[] {
+  const start = ISOWeek
+    ? startOfISOWeek(new Date())
+    : startOfWeek(new Date(), { locale, weekStartsOn });
+
+  const days = [];
+  for (let i = 0; i < 7; i++) {
+    const day = addDays(start, i);
+    days.push(day);
+  }
+  return days;
+}

node_modules/react-day-picker/src/components/HeadRow/utils/index.ts

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