@primer/components 0.0.0-202192422618 → 0.0.0-20219256296

package/lib-esm/DatePicker/useDatePicker.js

@@ -1,329 +0,0 @@
-import { format, isEqual, isAfter, isBefore } from 'date-fns';
-import deepmerge from 'deepmerge';
-import React, { createContext, useCallback, useContext, useMemo, useEffect, useState } from 'react';
-const DatePickerContext = /*#__PURE__*/createContext(null);
-
-const useDatePicker = date => {
-  const value = useContext(DatePickerContext);
-  const [selected, setSelected] = useState(false);
-
-  if (!value) {
-    throw new Error('useDatePicker must be used inside a DatePickerProvider');
-  }
-
-  useEffect(() => {
-    if (date) {
-      if (value.hoverRange) {
-        if (isRangeSelection(value.hoverRange)) {
-          if (isEqual(date, value.hoverRange.from)) {
-            setSelected('start');
-          } else if (value.hoverRange.to && isEqual(date, value.hoverRange.to)) {
-            setSelected('end');
-          } else if (isAfter(date, value.hoverRange.from) && value.hoverRange.to && isBefore(date, value.hoverRange.to)) {
-            setSelected('middle');
-          } else {
-            setSelected(false);
-          }
-        }
-      } else if (value.selection) {
-        if (isMultiSelection(value.selection)) {
-          setSelected(!!value.selection.find(d => isEqual(d, date)));
-        } else if (isRangeSelection(value.selection)) {
-          if (isEqual(date, value.selection.from)) {
-            setSelected('start');
-          } else if (value.selection.to && isEqual(date, value.selection.to)) {
-            setSelected('end');
-          } else if (isAfter(date, value.selection.from) && value.selection.to && isBefore(date, value.selection.to)) {
-            setSelected('middle');
-          } else {
-            setSelected(false);
-          }
-        } else {
-          setSelected(isEqual(date, value.selection));
-        }
-      }
-    }
-  }, [date, value.hoverRange, value.selection]);
-  let blocked,
-      disabled = false;
-
-  if (date) {
-    // Determine if date is blocked out
-    if (value.configuration.blockedDates) {
-      blocked = !!value.configuration.blockedDates.find(d => isEqual(d, date));
-    } // Determine if date is disabled
-
-
-    if (value.configuration.minDate || value.configuration.maxDate) {
-      disabled = (value.configuration.minDate ? isBefore(date, value.configuration.minDate) : false) || (value.configuration.maxDate ? isAfter(date, value.configuration.maxDate) : false);
-    }
-  }
-
-  return { ...value,
-    blocked,
-    disabled,
-    selected
-  };
-};
-
-export default useDatePicker;
-export function isSingleSelection(selection) {
-  return selection instanceof Date;
-}
-export function isMultiSelection(selection) {
-  return Array.isArray(selection);
-}
-export function isRangeSelection(selection) {
-  return !!selection.from;
-}
-export function isStringRangeSelection(selection) {
-  return !!selection.from;
-}
-
-function parseSelection(selection, variant) {
-  if (!selection) return;
-
-  if (variant === 'multi') {
-    if (isMultiSelection(selection)) {
-      const parsedSelection = [];
-
-      for (const d of selection) {
-        parsedSelection.push(new Date(new Date(d).toDateString()));
-      }
-
-      return parsedSelection.sort((a, b) => a.getTime() - b.getTime());
-    } else if (selection instanceof Date) {
-      return [new Date(new Date(selection).toDateString())];
-    } else if (isRangeSelection(selection)) {
-      const parsedSelection = [];
-      parsedSelection.push(new Date(new Date(selection.from).toDateString()));
-
-      if (selection.to) {
-        parsedSelection.push(new Date(new Date(selection.to).toDateString()));
-      }
-
-      return parsedSelection.sort((a, b) => a.getTime() - b.getTime());
-    }
-  } else if (variant === 'range') {
-    if (isRangeSelection(selection)) {
-      return {
-        from: new Date(new Date(selection.from).toDateString()),
-        to: selection.to ? new Date(new Date(selection.to).toDateString()) : null
-      };
-    } else if (isMultiSelection(selection)) {
-      return {
-        from: new Date(new Date(selection[0]).toDateString()),
-        to: selection[1] ? new Date(new Date(selection[1]).toDateString()) : null
-      };
-    } else if (selection instanceof Date) {
-      return {
-        from: new Date(new Date(selection).toDateString()),
-        to: null
-      };
-    }
-  } else {
-    if (selection instanceof Date) {
-      return new Date(new Date(selection).toDateString());
-    } else if (isMultiSelection(selection)) {
-      return new Date(new Date(selection[0]).toDateString());
-    } else if (isRangeSelection(selection)) {
-      return new Date(new Date(selection.from).toDateString());
-    } else {
-      return;
-    }
-  }
-}
-
-const defaultConfiguration = {
-  anchorVariant: 'button',
-  confirmation: false,
-  contiguousSelection: false,
-  dimWeekends: false,
-  placeholder: 'Select a Date...',
-  selection: 'single',
-  view: '2-month'
-};
-export const DatePickerProvider = ({
-  configuration: externalConfig = {},
-  children,
-  closePicker,
-  value
-}) => {
-  const [configuration, setConfiguration] = useState(deepmerge(defaultConfiguration, externalConfig));
-  const [previousSelection, setPreviousSelection] = useState(parseSelection(value, configuration.selection));
-  const [selection, setSelection] = useState(parseSelection(value, configuration.selection));
-  const [hoverRange, setHoverRange] = useState(null);
-  useEffect(() => {
-    setConfiguration(deepmerge(defaultConfiguration, externalConfig));
-    setSelection(parseSelection(selection, configuration.selection)); // Don't want this to run every time selection gets updated
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [configuration.selection, externalConfig]);
-  const getFormattedDate = useMemo(() => {
-    if (!selection) {
-      return configuration.placeholder;
-    }
-
-    let template = 'MMM d';
-
-    if (configuration.dateFormat) {
-      switch (configuration.dateFormat) {
-        case 'short':
-          template = 'MMM d';
-          break;
-
-        case 'long':
-          template = 'MMM d, yyyy';
-          break;
-
-        default:
-          template = configuration.dateFormat;
-          break;
-      }
-    }
-
-    switch (configuration.selection) {
-      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) return `${selection.length} Selected`;
-            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';
-        }
-    }
-  }, [configuration.dateFormat, configuration.placeholder, configuration.selection, selection]);
-  const saveValue = useCallback(updatedSelection => {
-    setPreviousSelection(updatedSelection !== null && updatedSelection !== void 0 ? updatedSelection : selection);
-    closePicker === null || closePicker === void 0 ? void 0 : closePicker();
-  }, [closePicker, selection]);
-  const selectionHandler = useCallback(date => {
-    if (configuration.selection === 'multi') {
-      const selections = [...selection];
-      const existingIndex = selections.findIndex(s => isEqual(s, date));
-
-      if (existingIndex > -1) {
-        selections.splice(existingIndex, 1);
-        setSelection(selections.sort((a, b) => a.getTime() - b.getTime()));
-      } else {
-        setSelection([...selections, date].sort((a, b) => a.getTime() - b.getTime()));
-      }
-    } else if (configuration.selection === 'range') {
-      if (selection && isRangeSelection(selection) && !selection.to) {
-        const updatedSelection = isBefore(date, selection.from) ? {
-          from: date,
-          to: selection.from
-        } : {
-          from: selection.from,
-          to: date
-        };
-        setSelection(updatedSelection);
-        setHoverRange(null);
-
-        if (!configuration.confirmation) {
-          saveValue(updatedSelection);
-        }
-      } else {
-        setHoverRange({
-          from: date,
-          to: date
-        });
-        setSelection({
-          from: date,
-          to: null
-        });
-      }
-    } else {
-      setSelection(date);
-
-      if (!configuration.confirmation) {
-        saveValue(date);
-      }
-    }
-  }, [configuration.confirmation, configuration.selection, saveValue, selection]);
-  const focusHnadler = useCallback(date => {
-    if (!selection) return;
-
-    if (configuration.selection === 'range' && isRangeSelection(selection) && hoverRange) {
-      setHoverRange(isBefore(date, selection.from) ? {
-        from: date,
-        to: selection.from
-      } : {
-        from: selection.from,
-        to: date
-      });
-    }
-  }, [configuration.selection, hoverRange, selection]);
-  const blurHnadler = useCallback(date => {
-    if (!selection || !hoverRange) return;
-
-    if (configuration.selection === 'range' && isRangeSelection(selection) && (hoverRange.from === date || hoverRange.to === date)) {// setHoverRange({from: hoverRange.from, to: hoverRange.from})
-    }
-  }, [configuration.selection, hoverRange, selection]);
-  const revertValue = useCallback(() => {
-    setSelection(previousSelection);
-  }, [previousSelection]);
-  const datePickerCtx = useMemo(() => {
-    return {
-      configuration,
-      disabled: false,
-      formattedDate: getFormattedDate,
-      hoverRange,
-      onDayBlur: blurHnadler,
-      onDayFocus: focusHnadler,
-      onSelection: selectionHandler,
-      revertValue,
-      saveValue,
-      selectionActive: false,
-      selection
-    };
-  }, [blurHnadler, configuration, focusHnadler, getFormattedDate, hoverRange, revertValue, saveValue, selection, selectionHandler]);
-  return /*#__PURE__*/React.createElement(DatePickerContext.Provider, {
-    value: datePickerCtx
-  }, children);
-};
-DatePickerProvider.displayName = "DatePickerProvider";