main repo

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

@@ -0,0 +1,77 @@
+import { CaptionDropdowns } from 'components/CaptionDropdowns';
+import { CaptionLabel } from 'components/CaptionLabel';
+import { CaptionNavigation } from 'components/CaptionNavigation';
+import { useDayPicker } from 'contexts/DayPicker';
+
+/** Represent the props of the {@link Caption} component. */
+export interface CaptionProps {
+  /** The ID for the heading element. Must be the same as the labelled-by in Table. */
+  id?: string;
+  /** The month where the caption is displayed. */
+  displayMonth: Date;
+  /** The index of the month where the caption is displayed. Older custom components may miss this prop. */
+  displayIndex?: number | undefined;
+}
+
+/**
+ * The layout of the caption:
+ *
+ * - `dropdown`: display dropdowns for choosing the month and the year.
+ * - `buttons`: display previous month / next month buttons.
+ * - `dropdown-buttons`: display both month / year dropdowns and previous month / next month buttons.
+ */
+export type CaptionLayout = 'dropdown' | 'buttons' | 'dropdown-buttons';
+
+/**
+ * Render the caption of a month. The caption has a different layout when
+ * setting the {@link DayPickerBase.captionLayout} prop.
+ */
+export function Caption(props: CaptionProps): JSX.Element {
+  const { classNames, disableNavigation, styles, captionLayout, components } =
+    useDayPicker();
+
+  const CaptionLabelComponent = components?.CaptionLabel ?? CaptionLabel;
+
+  let caption: JSX.Element;
+  if (disableNavigation) {
+    caption = (
+      <CaptionLabelComponent id={props.id} displayMonth={props.displayMonth} />
+    );
+  } else if (captionLayout === 'dropdown') {
+    caption = (
+      <CaptionDropdowns displayMonth={props.displayMonth} id={props.id} />
+    );
+  } else if (captionLayout === 'dropdown-buttons') {
+    caption = (
+      <>
+        <CaptionDropdowns
+          displayMonth={props.displayMonth}
+          displayIndex={props.displayIndex}
+          id={props.id}
+        />
+        <CaptionNavigation
+          displayMonth={props.displayMonth}
+          displayIndex={props.displayIndex}
+          id={props.id}
+        />
+      </>
+    );
+  } else {
+    caption = (
+      <>
+        <CaptionLabelComponent
+          id={props.id}
+          displayMonth={props.displayMonth}
+          displayIndex={props.displayIndex}
+        />
+        <CaptionNavigation displayMonth={props.displayMonth} id={props.id} />
+      </>
+    );
+  }
+
+  return (
+    <div className={classNames.caption} style={styles.caption}>
+      {caption}
+    </div>
+  );
+}