@primer/components 0.0.0-2021104155230 → 0.0.0-2021104181937

package/lib-esm/DatePicker/dateParser.js

@@ -0,0 +1,179 @@
+import { eachDayOfInterval, format, isBefore } from 'date-fns';
+import { isRangeSelection } from './useDatePicker';
+const INVALID_DATE = 'Invalid Date';
+const DATE_REGEX = new RegExp(/(\d{1,2}[-/.]\d{1,2}[-/.](?:\d{2}){1,2})(?:\s?-\s?)?(\d{1,2}[-/.]\d{1,2}[-/.](?:\d{2}){1,2})?/g);
+
+const sanitizeDate = dateString => {
+  return dateString.replaceAll('.', '/').replaceAll('-', '/');
+};
+
+export const parseDate = (dateString, variant = 'single') => {
+  const dateItems = dateString.matchAll(DATE_REGEX);
+  const parsedDateItems = []; // Determine Format
+
+  for (const d of dateItems) {
+    const tempD1 = new Date(sanitizeDate(d[1]));
+    const tempD2 = d[2] ? new Date(sanitizeDate(d[2])) : null;
+
+    if (tempD2) {
+      // Range
+      if (tempD1.toString() !== INVALID_DATE && tempD2.toString() !== INVALID_DATE) {
+        parsedDateItems.push(isBefore(tempD1, tempD2) ? {
+          from: tempD1,
+          to: tempD2
+        } : {
+          from: tempD2,
+          to: tempD1
+        });
+      } else if (tempD1.toString() !== INVALID_DATE) {
+        parsedDateItems.push(tempD1);
+      } else if (tempD2.toString() !== INVALID_DATE) {
+        parsedDateItems.push(tempD2);
+      }
+    } else {
+      if (tempD1.toString() !== INVALID_DATE) {
+        parsedDateItems.push(tempD1);
+      }
+    }
+  }
+
+  if (parsedDateItems.length === 0) {
+    // No Valid Dates
+    return null;
+  } // Cast Format based on variant
+
+
+  switch (variant) {
+    case 'single':
+      {
+        return parsedDateItems[0];
+      }
+
+    case 'multi':
+      {
+        const expandedParsedItems = [];
+
+        for (const item of parsedDateItems) {
+          if (isRangeSelection(item)) {
+            if (item.to) {
+              eachDayOfInterval({
+                start: item.from,
+                end: item.to
+              }).map(d => expandedParsedItems.push(d));
+            } else {
+              expandedParsedItems.push(item.from);
+            }
+          } else {
+            if (item) {
+              if (Array.isArray(item)) {
+                item.map(d => expandedParsedItems.push(d));
+              } else {
+                expandedParsedItems.push(item);
+              }
+            }
+          }
+        }
+
+        return expandedParsedItems;
+      }
+
+    case 'range':
+      {
+        return parsedDateItems.filter(d => isRangeSelection(d))[0];
+      }
+
+    default:
+      {
+        return parsedDateItems[0];
+      }
+  }
+};
+export const formatDate = ({
+  selection,
+  dateFormat = 'short',
+  placeholder = 'Choose Date',
+  rawFormat = false,
+  variant = 'single'
+}) => {
+  if (!selection) {
+    if (rawFormat) return '';
+    return placeholder;
+  }
+
+  let template = 'MMM d';
+
+  if (!rawFormat && dateFormat) {
+    switch (dateFormat) {
+      case 'short':
+        template = 'MMM d';
+        break;
+
+      case 'long':
+        template = 'MMM d, yyyy';
+        break;
+
+      default:
+        template = dateFormat;
+        break;
+    }
+  } else {
+    template = 'MM/dd/yyyy';
+  }
+
+  switch (variant) {
+    case 'single':
+      {
+        if (selection instanceof Date) {
+          return format(selection, template);
+        } else if (Array.isArray(selection)) {
+          return format(selection[0], template);
+        } else if (isRangeSelection(selection)) {
+          return format(selection.from, template);
+        } else {
+          return 'Invalid Selection';
+        }
+      }
+
+    case 'multi':
+      {
+        if (Array.isArray(selection)) {
+          if (selection.length > 3 && !rawFormat) return `${selection.length} Selected`;
+          if (selection.length === 0 && !rawFormat) return placeholder;
+          const formatted = selection.map(d => format(d, template)).join(', ');
+          return formatted;
+        } else if (selection instanceof Date) {
+          return [selection].map(d => format(d, template)).join(', ');
+        } else if (isRangeSelection(selection)) {
+          return [selection.to, selection.from].map(d => d ? format(d, template) : '').join(', ');
+        } else {
+          return 'Invalid Selection';
+        }
+      }
+
+    case 'range':
+      {
+        if (isRangeSelection(selection)) {
+          return Object.entries(selection).map(([_, date]) => date ? format(date, template) : '').join(' - ');
+        } else if (selection instanceof Date) {
+          return Object.entries({
+            from: selection,
+            to: null
+          }).map(([_, date]) => date ? format(date, template) : '').join(' - ');
+        } else if (Array.isArray(selection)) {
+          return Object.entries({
+            from: selection[0],
+            to: selection[1]
+          }) // to date can still be null
+          // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+          .map(([_, date]) => date ? format(date, template) : '').join(' - ');
+        } else {
+          return 'Invalid Selection';
+        }
+      }
+
+    default:
+      {
+        return 'Invalid Configuration';
+      }
+  }
+};

package/lib-esm/DatePicker/index.d.ts

@@ -0,0 +1,2 @@
+export { DatePicker } from './DatePicker';
+export type { DatePickerProps } from './DatePicker';

package/lib-esm/DatePicker/index.js

@@ -0,0 +1 @@
+export { DatePicker } from './DatePicker';

package/lib-esm/DatePicker/useDatePicker.d.ts

@@ -0,0 +1,107 @@
+import React from 'react';
+export declare type AnchorVariant = 'input' | 'button' | 'icon-only';
+export declare type DateFormat = 'short' | 'long' | string;
+export declare type SelectionVariant = 'single' | 'multi' | 'range';
+export interface DatePickerConfiguration {
+    anchorVariant?: AnchorVariant;
+    blockedDates?: Array<Date>;
+    confirmation?: boolean;
+    confirmUnsavedClose?: boolean;
+    compressedHeader?: boolean;
+    dateFormat?: DateFormat;
+    disableWeekends?: boolean;
+    iconPlacement?: 'start' | 'end' | 'none';
+    maxDate?: Date | null;
+    maxSelections?: number;
+    maxRangeSize?: number;
+    minDate?: Date | null;
+    placeholder?: string;
+    rangeIncrement?: number;
+    showInputPrompt?: boolean;
+    variant?: SelectionVariant;
+    view?: '1-month' | '2-month';
+    weekStartsOn?: 'Sunday' | 'Monday' | 'Tuesday' | 'Wednesday' | 'Thursday' | 'Friday' | 'Saturday';
+}
+export declare type RangeSelection = {
+    from: Date;
+    to: Date | null;
+};
+export declare type StringRangeSelection = {
+    from: string;
+    to: string;
+};
+export interface DatePickerContext {
+    disabled?: boolean;
+    configuration: DatePickerConfiguration;
+    currentViewingDate: Date;
+    dialogOpen: boolean;
+    focusDate: Date;
+    formattedDate: string;
+    goToMonth: (date: Date) => void;
+    inputDate: string;
+    hoverRange?: RangeSelection | null;
+    nextMonth: () => void;
+    onClose: () => void;
+    onDateInput: (updatedSelection: Selection) => void;
+    onDayFocus: (date: Date) => void;
+    onSelection: (date: Date) => void;
+    previousMonth: () => void;
+    revertValue: () => void;
+    saveValue: (selection?: Selection) => void;
+    selection?: Selection;
+    selectionActive?: boolean;
+    setFocusDate: React.Dispatch<React.SetStateAction<Date>>;
+    setHoverRange: React.Dispatch<React.SetStateAction<RangeSelection | null>>;
+    softSelection?: Partial<RangeSelection> | null;
+    setDialogOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    viewMode: '1-month' | '2-month';
+}
+export declare type Selection = Date | Array<Date> | RangeSelection | null;
+export declare type StringSelection = string | Array<string> | {
+    to: string;
+    from: string;
+} | null;
+export declare type DaySelection = boolean | 'start' | 'middle' | 'end';
+declare const useDatePicker: (date?: Date | undefined) => {
+    blocked: boolean | undefined;
+    disabled: boolean;
+    focused: boolean;
+    selected: DaySelection;
+    today: boolean;
+    configuration: DatePickerConfiguration;
+    currentViewingDate: Date;
+    dialogOpen: boolean;
+    focusDate: Date;
+    formattedDate: string;
+    goToMonth: (date: Date) => void;
+    inputDate: string;
+    hoverRange?: RangeSelection | null | undefined;
+    nextMonth: () => void;
+    onClose: () => void;
+    onDateInput: (updatedSelection: Selection) => void;
+    onDayFocus: (date: Date) => void;
+    onSelection: (date: Date) => void;
+    previousMonth: () => void;
+    revertValue: () => void;
+    saveValue: (selection?: Selection | undefined) => void;
+    selection?: Selection | undefined;
+    selectionActive?: boolean | undefined;
+    setFocusDate: React.Dispatch<React.SetStateAction<Date>>;
+    setHoverRange: React.Dispatch<React.SetStateAction<RangeSelection | null>>;
+    softSelection?: Partial<RangeSelection> | null | undefined;
+    setDialogOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    viewMode: '1-month' | '2-month';
+};
+export default useDatePicker;
+export interface DatePickerProviderProps {
+    closePicker?: () => void;
+    configuration?: DatePickerConfiguration;
+    isOpen?: boolean;
+    value?: Selection | StringSelection;
+}
+export declare function isSingleSelection(selection: Selection): selection is Date;
+export declare function isMultiSelection(selection: Selection | StringSelection): selection is Array<Date> | Array<string>;
+export declare function isRangeSelection(selection: Selection | StringSelection): selection is RangeSelection | StringRangeSelection;
+export declare function isStringRangeSelection(selection: StringSelection): selection is StringRangeSelection;
+export declare const normalizeDate: (date: Date | string) => Date;
+export declare const DatePickerProvider: React.FC<DatePickerProviderProps>;