@quillsql/react 1.7.5 → 1.7.6

package/src/DateRangePicker/dateRangePickerUtils.tsx

@@ -1,480 +0,0 @@
-import {
-  addDays,
-  format,
-  isEqual,
-  isToday,
-  max,
-  min,
-  startOfDay,
-  startOfMonth,
-  startOfToday,
-  startOfWeek,
-  startOfYear,
-  sub,
-} from 'date-fns';
-import { DateRangePickerOption } from './DateRangePicker';
-import { hexToRgbaWith10PercentAlpha } from '../BarList';
-
-export const getWeekdays = (locale: Locale) => {
-  const firstDayOfWeek = startOfWeek(new Date());
-  return Array.from(Array(7)).map((e, i) =>
-    format(addDays(firstDayOfWeek, i), 'EEEEEE', { locale })
-  );
-};
-
-export const capitalize = (s: string, locale: Locale) => {
-  return s.charAt(0).toLocaleUpperCase(locale.code) + s.substring(1);
-};
-
-export const getStartDateByDropdownValue = (
-  dropdownValue: string | null | undefined,
-  dropdownOptions: DateRangePickerOption[]
-) => {
-  const startDate =
-    dropdownOptions.find(
-      (option: DateRangePickerOption) => option.value === dropdownValue
-    )?.startDate ?? null;
-  return startDate ? startOfDay(startDate) : null;
-};
-
-export const getEndDateByDropdownValue = (
-  dropdownValue: string | null | undefined,
-  dropdownOptions: DateRangePickerOption[]
-) =>
-  startOfDay(
-    dropdownOptions.find(
-      (option: DateRangePickerOption) => option.value === dropdownValue
-    )?.endDate ?? startOfToday()
-  );
-
-export const parseStartDate = (
-  startDate: Date | null | undefined,
-  minDate: Date | null | undefined,
-  selectedDropdownValue: string | null | undefined,
-  dropdownOptions: DateRangePickerOption[]
-) => {
-  if (selectedDropdownValue) {
-    startDate = getStartDateByDropdownValue(
-      selectedDropdownValue,
-      dropdownOptions
-    );
-  }
-  if (!startDate) return null;
-  if (startDate && !minDate) return startOfDay(startDate);
-  return startOfDay(max([startDate as Date, minDate as Date]));
-};
-
-export const parseEndDate = (
-  endDate: Date | null | undefined,
-  maxDate: Date | null | undefined,
-  selectedDropdownValue: string | null | undefined,
-  dropdownOptions: DateRangePickerOption[]
-) => {
-  if (selectedDropdownValue) {
-    endDate = getEndDateByDropdownValue(selectedDropdownValue, dropdownOptions);
-  }
-  if (!endDate) return null;
-  if (endDate && !maxDate) return startOfDay(endDate);
-
-  return startOfDay(min([endDate as Date, maxDate as Date]));
-};
-
-export const defaultOptions: DateRangePickerOption[] = [
-  // {
-  //   value: 'tdy',
-  //   text: 'Today',
-  //   startDate: startOfToday(),
-  // },
-  {
-    value: 'w',
-    text: 'Last 7 days',
-    startDate: sub(startOfToday(), { days: 7 }),
-  },
-  {
-    value: 't',
-    text: 'Last 30 days',
-    startDate: sub(startOfToday(), { days: 30 }),
-  },
-  {
-    value: '90d',
-    text: 'Last 90 days',
-    startDate: sub(startOfToday(), { days: 90 }),
-  },
-  {
-    value: '6m',
-    text: 'Last 6 months',
-    startDate: sub(startOfToday(), { months: 6 }),
-  },
-  {
-    value: 'm',
-    text: 'This month',
-    startDate: startOfMonth(startOfToday()),
-  },
-  {
-    value: 'y',
-    text: 'This year',
-    startDate: startOfYear(startOfToday()),
-  },
-  // {
-  //   value: 'tw',
-  //   text: 'This week',
-  //   startDate: startOfWeek(startOfToday()),
-  // },
-  // {
-  //   value: '2w',
-  //   text: 'Last 2 weeks',
-  //   startDate: sub(startOfToday(), { weeks: 2 }),
-  // },
-  {
-    value: 'at',
-    text: 'All time',
-    startDate: sub(startOfToday(), { years: 100 }),
-  },
-];
-
-export const getDateStyles = (
-  theme: any,
-  date: Date,
-  finalStartDate: Date | null,
-  finalEndDate: Date | null,
-  hoveredDate: Date | undefined,
-  isDateDisabled: boolean
-) => {
-  return {
-    ...getDayTextClassNames(
-      theme,
-      date,
-      finalStartDate,
-      finalEndDate,
-      hoveredDate as Date | null,
-      isDateDisabled
-    ),
-    // ...getDayHoverBgColorClassName(
-    //   date,
-    //   finalStartDate,
-    //   finalEndDate,
-    //   isDateDisabled
-    // ),
-    ...getDayRoundedClassName(
-      date,
-      finalStartDate,
-      finalEndDate,
-      hoveredDate as Date | null
-    ),
-    ...getDayBgColorClassName(
-      theme,
-      date,
-      finalStartDate,
-      finalEndDate,
-      hoveredDate as Date | null,
-      isDateDisabled
-    ),
-  };
-};
-
-const getDayRoundedClassName = (
-  day: Date,
-  selectedStartDay: Date | null,
-  selectedEndDay: Date | null,
-  hoveredDay: Date | null
-): any => {
-  if (!selectedStartDay && !selectedEndDay) {
-    return { borderRadius: '0.375rem' };
-  }
-  if (
-    selectedStartDay &&
-    selectedEndDay &&
-    isEqual(day, selectedStartDay) &&
-    isEqual(day, selectedEndDay)
-  ) {
-    return { borderRadius: '0.375rem' };
-  }
-  if (selectedStartDay && selectedEndDay && isEqual(day, selectedStartDay)) {
-    return {
-      borderBottomLeftRadius: '0.375rem',
-      borderTopLeftRadius: '0.375rem',
-    };
-  }
-  if (
-    selectedStartDay &&
-    !selectedEndDay &&
-    !hoveredDay &&
-    isEqual(day, selectedStartDay)
-  ) {
-    return { borderRadius: '0.375rem' };
-  }
-  if (
-    selectedStartDay &&
-    !selectedEndDay &&
-    hoveredDay &&
-    day < selectedStartDay
-  ) {
-    return { borderRadius: '0.375rem' };
-  }
-  if (
-    selectedStartDay &&
-    !selectedEndDay &&
-    hoveredDay &&
-    isEqual(day, selectedStartDay) &&
-    hoveredDay > selectedStartDay
-  ) {
-    return {
-      borderBottomLeftRadius: '0.375rem',
-      borderTopLeftRadius: '0.375rem',
-    };
-  }
-  if (
-    selectedStartDay &&
-    !selectedEndDay &&
-    hoveredDay &&
-    day > selectedStartDay &&
-    day < hoveredDay
-  ) {
-    return { borderRadius: 0 };
-  }
-  if (
-    selectedStartDay &&
-    selectedEndDay &&
-    day > selectedStartDay &&
-    day < selectedEndDay
-  ) {
-    return { borderRadius: 0 };
-  }
-  if (
-    selectedStartDay &&
-    !selectedEndDay &&
-    hoveredDay &&
-    isEqual(day, hoveredDay) &&
-    !isEqual(day, selectedStartDay)
-  ) {
-    return {
-      borderBottomRightRadius: '0.375rem',
-      borderTopRightRadius: '0.375rem',
-    };
-  }
-  if (selectedStartDay && selectedEndDay && isEqual(day, selectedEndDay)) {
-    return {
-      borderBottomRightRadius: '0.375rem',
-      borderTopRightRadius: '0.375rem',
-    };
-  }
-  if (
-    selectedStartDay &&
-    selectedEndDay &&
-    (day < selectedStartDay || day > selectedEndDay)
-  ) {
-    return { borderRadius: '0.375rem' };
-  }
-  return { borderRadius: '0.375rem' };
-};
-
-export const displaySelected = (
-  selectedStartDay: Date | null,
-  selectedEndDay: Date | null
-) => {
-  if (!selectedStartDay && !selectedEndDay) {
-    return '';
-  } else if (selectedStartDay && !selectedEndDay) {
-    const options: Intl.DateTimeFormatOptions = {
-      year: 'numeric',
-      month: 'short',
-      day: 'numeric',
-    };
-    return selectedStartDay.toLocaleDateString('en-US', options);
-  } else if (selectedStartDay && selectedEndDay) {
-    if (isEqual(selectedStartDay, selectedEndDay)) {
-      const options: Intl.DateTimeFormatOptions = {
-        year: 'numeric',
-        month: 'short',
-        day: 'numeric',
-      };
-      return selectedStartDay.toLocaleDateString('en-US', options);
-    } else if (
-      selectedStartDay.getMonth() === selectedEndDay.getMonth() &&
-      selectedStartDay.getFullYear() === selectedEndDay.getFullYear()
-    ) {
-      const optionsStartDate: Intl.DateTimeFormatOptions = {
-        month: 'short',
-        day: 'numeric',
-      };
-      return `${selectedStartDay.toLocaleDateString(
-        'en-US',
-        optionsStartDate
-      )} - 
-                    ${selectedEndDay.getDate()}, ${selectedEndDay.getFullYear()}`;
-    } else {
-      const options: Intl.DateTimeFormatOptions = {
-        year: 'numeric',
-        month: 'short',
-        day: 'numeric',
-      };
-      return `${selectedStartDay.toLocaleDateString('en-US', options)} - 
-                    ${selectedEndDay.toLocaleDateString('en-US', options)}`;
-    }
-  }
-};
-
-const getDayBgColorClassName = (
-  theme: any,
-  day: Date,
-  selectedStartDay: Date | null,
-  selectedEndDay: Date | null,
-  hoveredDay: Date | null,
-  isDayDisabled = false
-) => {
-  const styles = {
-    background: 'transparent',
-  };
-
-  if (!isDayDisabled) {
-    if (selectedStartDay && isEqual(day, selectedStartDay)) {
-      styles.background = theme?.chartColors[0] || '#6269E9';
-    }
-    if (
-      selectedStartDay &&
-      !selectedEndDay &&
-      hoveredDay &&
-      day > selectedStartDay &&
-      day < hoveredDay
-    ) {
-      styles.background =
-        hexToRgbaWith10PercentAlpha(theme?.chartColors[0]) ||
-        hexToRgbaWith10PercentAlpha('#6269E9');
-    }
-    if (selectedEndDay && isEqual(day, selectedEndDay)) {
-      styles.background = theme?.chartColors[0] || '#6269E9';
-    }
-    if (
-      selectedStartDay &&
-      selectedEndDay &&
-      day > selectedStartDay &&
-      day < selectedEndDay
-    ) {
-      styles.background =
-        hexToRgbaWith10PercentAlpha(theme?.chartColors[0]) ||
-        hexToRgbaWith10PercentAlpha('#6269E9');
-    }
-  }
-
-  return styles;
-};
-
-const getDayTextClassNames = (
-  theme: any,
-  day: Date,
-  selectedStartDay: Date | null,
-  selectedEndDay: Date | null,
-  hoveredDay: Date | null,
-  isDayDisabled = false
-) => {
-  const styles = {
-    color: theme?.primaryTextColor || '#364153',
-  };
-
-  if (!isDayDisabled) {
-    if (isToday(day)) {
-      if (
-        (selectedStartDay && isEqual(day, selectedStartDay)) ||
-        (selectedEndDay && isEqual(day, selectedEndDay))
-      ) {
-        styles.color = 'white';
-      } else {
-        styles.color = theme?.primaryTextColor || '#364153';
-      }
-    } else {
-      if (selectedStartDay && isEqual(day, selectedStartDay)) {
-        styles.color = 'white';
-      }
-      if (
-        selectedStartDay &&
-        !selectedEndDay &&
-        hoveredDay &&
-        day > selectedStartDay &&
-        day < hoveredDay
-      ) {
-        styles.color = theme?.primaryTextColor || '#364153';
-      }
-      if (selectedEndDay && isEqual(day, selectedEndDay)) {
-        styles.color = 'white';
-      }
-      if (
-        selectedStartDay &&
-        selectedEndDay &&
-        day > selectedStartDay &&
-        day < selectedEndDay
-      ) {
-        styles.color = theme?.primaryTextColor || '#364153';
-      }
-    }
-  }
-
-  return styles;
-};
-
-const getDayHoverBgColorClassName = (
-  day: Date,
-  selectedStartDay: Date | null,
-  selectedEndDay: Date | null,
-  isDayDisabled = false
-) => {
-  const styles = {
-    background: 'transparent',
-  };
-
-  if (!isDayDisabled) {
-    if (selectedStartDay && isEqual(day, selectedStartDay)) {
-      styles.background = '';
-    }
-    if (selectedEndDay && isEqual(day, selectedEndDay)) {
-      styles.background = '';
-    }
-  }
-
-  return styles;
-};
-
-export const formatSelectedDates = (
-  startDate: Date | null,
-  endDate: Date | null,
-  locale?: Locale
-) => {
-  const localeCode = locale?.code || 'en-US';
-  if (!startDate && !endDate) {
-    return '';
-  } else if (startDate && !endDate) {
-    const options: Intl.DateTimeFormatOptions = {
-      year: 'numeric',
-      month: 'short',
-      day: 'numeric',
-    };
-    return startDate.toLocaleDateString(localeCode, options);
-  } else if (startDate && endDate) {
-    if (isEqual(startDate, endDate)) {
-      const options: Intl.DateTimeFormatOptions = {
-        year: 'numeric',
-        month: 'short',
-        day: 'numeric',
-      };
-      return startDate.toLocaleDateString(localeCode, options);
-    } else if (
-      startDate.getMonth() === endDate.getMonth() &&
-      startDate.getFullYear() === endDate.getFullYear()
-    ) {
-      const optionsStartDate: Intl.DateTimeFormatOptions = {
-        month: 'short',
-        day: 'numeric',
-      };
-      return `${startDate.toLocaleDateString(localeCode, optionsStartDate)} - 
-                    ${endDate.getDate()}, ${endDate.getFullYear()}`;
-    } else {
-      const options: Intl.DateTimeFormatOptions = {
-        year: 'numeric',
-        month: 'short',
-        day: 'numeric',
-      };
-      return `${startDate.toLocaleDateString(localeCode, options)} - 
-                    ${endDate.toLocaleDateString(localeCode, options)}`;
-    }
-  }
-  return '';
-};

package/src/DateRangePicker/index.ts

@@ -1,4 +0,0 @@
-// @ts-nocheck
-export { default as DateRangePicker } from './DateRangePicker';
-
-export { DateRangePickerValue } from './DateRangePicker';