@react-fabric/date 1.0.0-beta.5 → 1.0.0-beta.52

package/src/components/TimeSliders.tsx

@@ -24,7 +24,6 @@
 import { useDebounce } from "@react-fabric/core";
 import classNames from "classnames";
 import { useCallback, useEffect, useRef, useState } from "react";
-import classes from "./Date.module.css";
 
 interface Props {
   hour: number;
@@ -80,7 +79,7 @@ export const TimeSlider = ({ hour = 0, minute = 0, onTimeChange }: Props) => {
       <div className="flex">
         <div
           className={classNames(
-            classes.dateHeader,
+            "fabric-dateHeader",
             "flex-1 font-medium text-muted text-sm p-1 mx-px text-center bg-tint-50",
           )}
         >
@@ -88,18 +87,18 @@ export const TimeSlider = ({ hour = 0, minute = 0, onTimeChange }: Props) => {
         </div>
         <div
           className={classNames(
-            classes.dateHeader,
+            "fabric-dateHeader",
             "flex-1 font-medium text-muted text-sm p-1 mx-px text-center bg-tint-50",
           )}
         >
           M
         </div>
       </div>
-      <div className="flex flex-1 flex-nowrap overflow-hidden relative">
+      <div className="flex flex-1 flex-nowrap items-stretch overflow-hidden relative">
         <div
           className={classNames(
             "flex-1 overflow-auto scroll-hide snap-y snap-mandatory",
-            classes.timeSlider,
+            "fabric-date-timeSlider",
           )}
           onScroll={calculateTime}
           ref={hourRef}
@@ -144,7 +143,7 @@ export const TimeSlider = ({ hour = 0, minute = 0, onTimeChange }: Props) => {
         <div
           className={classNames(
             "flex-1 overflow-auto scroll-hide snap-y snap-mandatory",
-            classes.timeSlider,
+            "fabric-date-timeSlider",
           )}
           onScroll={calculateTime}
           ref={minuteRef}

package/src/display/DateDisplay.tsx

@@ -22,7 +22,7 @@
  */
 
 import { Dropdown, Tooltip, useGlobals } from "@react-fabric/core";
-import { type MenuItemProps } from "@react-fabric/core/dist/types/components/menu/types";
+import { type MenuProps } from "@react-fabric/core/dist/types/components/menu/types";
 import {
   type AriaProps,
   type ChildrenProp,
@@ -32,12 +32,13 @@ import {
 import { type ElementType } from "react";
 import { type DateLike } from "../types";
 import { DateUtil } from "../utils/dateUtil";
+import classNames from "classnames";
 
 export interface Props
   extends CssProp,
     AriaProps,
     TestProps,
-    Partial<ChildrenProp<ElementType<MenuItemProps>>> {
+    Partial<ChildrenProp<ElementType<MenuProps>>> {
   /**
    * date like value
    */
@@ -46,19 +47,40 @@ export interface Props
    * date format
    */
   format?: string;
+
+  showAlternateDate?: boolean;
 }
 
+/**
+ * DateDisplay component to display a formatted gregorian or hijri date with optional tooltip and dropdown.
+ * It uses the current calendar and locale from the global context.
+ * It formats the date using the provided format or a default format.
+ * If `showAlternateDate` is true, it shows a tooltip with the formatted date.
+ * If `children` are provided, it wraps the date in a dropdown.
+ *
+ * @param {Object} props - The component props.
+ * @returns {JSX.Element} - The rendered component.
+ *
+ * @example
+ * ```jsx
+ * <DateDisplay date={new Date()} />
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/date-date-display--docs}
+ */
 export const DateDisplay = ({
   date,
   className,
   format = "eee, PPpp",
   children,
+  showAlternateDate,
   ...aria
 }: Props) => {
   const { currentCalendar, currentLocale } = useGlobals();
 
   const dtLabel = (
     <Tooltip
+      disabled={!showAlternateDate}
       content={DateUtil.format(
         date,
         format,
@@ -66,7 +88,13 @@ export const DateDisplay = ({
         currentCalendar !== "hijri",
       )}
     >
-      <span className={className} {...aria}>
+      <span
+        className={classNames(
+          className,
+          !!children && "underline decoration-dotted cursor-pointer",
+        )}
+        {...aria}
+      >
         {DateUtil.format(
           date,
           format,
@@ -78,7 +106,7 @@ export const DateDisplay = ({
   );
 
   return children ? (
-    <Dropdown>
+    <Dropdown showArrow closeOnClick>
       {dtLabel}
       {children}
     </Dropdown>

package/src/display/DateDuration.tsx

@@ -0,0 +1,180 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2025 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { Dropdown, Tooltip } from "@react-fabric/core";
+import { type MenuProps } from "@react-fabric/core/dist/types/components/menu/types";
+import {
+  type AriaProps,
+  type ChildrenProp,
+  type CssProp,
+  type TestProps,
+} from "@react-fabric/core/dist/types/types";
+import { Format } from "@react-fabric/utilities";
+import classNames from "classnames";
+import { intervalToDuration, isBefore } from "date-fns";
+import { useMemo, type ElementType } from "react";
+import { useTranslation } from "react-i18next";
+import { type DateLike } from "../types";
+import { DateUtil } from "../utils/dateUtil";
+
+export interface Props
+  extends CssProp,
+    AriaProps,
+    TestProps,
+    Partial<ChildrenProp<ElementType<MenuProps>>> {
+  /**
+   * date like value
+   */
+  date: DateLike;
+  /**
+   * date format
+   */
+  format?: string;
+}
+
+/**
+ * DateDuration component to display the duration from a given date to now.
+ * It calculates the difference in years, months, weeks, days, hours, minutes, and seconds,
+ * and displays it in a human-readable format.
+ * It uses the current locale for translations.
+ *
+ * @param {Props} props - The properties for the component.
+ * @returns {JSX.Element} The rendered component.
+ *
+ * @example
+ * ```jsx
+ * <DateDuration date={new Date("2020-01-01")} />
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/date-date-display--docs}
+ */
+export const DateDuration = ({
+  date,
+  children,
+  className,
+  format = "PPpp",
+  ...props
+}: Props) => {
+  const { t } = useTranslation("date");
+
+  const interval = useMemo(() => {
+    return intervalToDuration({ start: new Date(date), end: new Date() });
+  }, [date]);
+
+  const label = useMemo(() => {
+    const before = isBefore(DateUtil.parseDate(date), new Date());
+    const tkey = before ? "relative.before" : "relative.after";
+    let part = "now";
+    let count = 0;
+    if (interval.years && interval.years > 0) {
+      part = "years";
+      count = interval.years;
+      if ((interval.months ?? 0) > 10) {
+        part = "yearsX";
+        count += 1;
+      }
+    } else if (interval.months && interval.months > 0) {
+      part = "months";
+      count = interval.months;
+      if (interval.months > 10) {
+        part = "yearsX";
+        count = 1;
+      } else if ((interval.weeks ?? 0) > 3) {
+        part = "monthsX";
+        count += 1;
+      }
+    } else if (interval.weeks && interval.weeks > 0) {
+      part = "weeks";
+      count = interval.weeks;
+      if (interval.weeks > 3) {
+        part = "monthsX";
+        count = 1;
+      } else if ((interval.days ?? 0) > 5) {
+        part = "weeksX";
+        count += 1;
+      }
+    } else if (interval.days && interval.days > 0) {
+      part = "days";
+      count = interval.days;
+      if (interval.days > 5) {
+        part = "weeksX";
+        count = 1;
+      } else if ((interval.hours ?? 0) > 20) {
+        part = "daysX";
+        count += 1;
+      }
+    } else if (interval.hours && interval.hours > 0) {
+      part = "hours";
+      count = interval.hours;
+      if (interval.hours > 20) {
+        part = "daysX";
+        count = 1;
+      } else if ((interval.minutes ?? 0) > 45) {
+        part = "hoursX";
+        count += 1;
+      }
+    } else if (interval.minutes && interval.minutes > 0) {
+      part = "minutes";
+      count = interval.minutes;
+      if (interval.minutes > 45) {
+        part = "hoursX";
+        count = 1;
+      } else if ((interval.seconds ?? 0) > 45) {
+        part = "minuteX";
+        count += 1;
+      }
+    } else if (interval.seconds && interval.seconds > 15) {
+      part = "seconds";
+      count = interval.seconds;
+      if (interval.seconds > 45) {
+        part = "minutesX";
+        count = 1;
+      }
+    }
+
+    return t(`${tkey}.${part}`, { count });
+  }, [interval, date]);
+
+  const dtLabel = (
+    <Tooltip content={Format.date(date, format)}>
+      <span
+        className={classNames(
+          className,
+          !!children && "underline decoration-dotted cursor-pointer",
+        )}
+        {...props}
+      >
+        {label}
+      </span>
+    </Tooltip>
+  );
+
+  return children ? (
+    <Dropdown showArrow closeOnClick>
+      {dtLabel}
+      {children}
+    </Dropdown>
+  ) : (
+    dtLabel
+  );
+};

package/src/hijri/DateConverter.js

@@ -0,0 +1,175 @@
+function intPart(floatNum) {
+  if (floatNum < -0.0000001) {
+    return Math.ceil(floatNum - 0.0000001)
+  }
+  return Math.floor(floatNum + 0.0000001)
+}
+var delta = 1
+
+function GregToIsl(arg) {
+
+  let d = parseInt(arg.CDay.value)
+  let m = parseInt(arg.CMonth.value)
+  let y = parseInt(arg.CYear.value)
+  let jd, l, jd1, n, j, delta = 1;
+  if ((y > 1582) || ((y == 1582) && (m > 10)) || ((y == 1582) && (m == 10) && (d > 14))) {
+    //added delta=1 on jd to comply isna rulling 2007
+    jd = intPart((1461 * (y + 4800 + intPart((m - 14) / 12))) / 4) + intPart((367 * (m - 2 - 12 * (intPart((m - 14) / 12)))) / 12) -
+      intPart((3 * (intPart((y + 4900 + intPart((m - 14) / 12)) / 100))) / 4) + d - 32075 + delta
+  } else {
+    //added +1 on jd to comply isna rulling
+    jd = 367 * y - intPart((7 * (y + 5001 + intPart((m - 9) / 7))) / 4) + intPart((275 * m) / 9) + d + 1729777 + delta
+  }
+
+    //added -1 on jd1 to comply isna rulling
+  jd1 = jd - delta
+  l = jd - 1948440 + 10632
+  n = intPart((l - 1) / 10631)
+  l = l - 10631 * n + 354
+  j = (intPart((10985 - l) / 5316)) * (intPart((50 * l) / 17719)) + (intPart(l / 5670)) * (intPart((43 * l) / 15238))
+  l = l - (intPart((30 - j) / 15)) * (intPart((17719 * j) / 50)) - (intPart(j / 16)) * (intPart((15238 * j) / 43)) + 29
+  m = intPart((24 * l) / 709)
+  d = l - intPart((709 * m) / 24)
+  y = 30 * n + j - 30
+
+  return {
+    d,
+    m,
+    y,
+    dateOfWeek: jd1 % 7,
+    dayName:weekDay(jd1 % 7),
+  };
+
+}
+
+function IslToGreg(arg) {
+
+
+  let d = parseInt(arg.HDay.value)
+  let m = parseInt(arg.HMonth.value)
+  let y = parseInt(arg.HYear.value)
+    //added - delta=1 on jd to comply isna rulling
+  let jd = intPart((11 * y + 3) / 30) + 354 * y + 30 * m - intPart((m - 1) / 2) + d + 1948440 - 385 - delta
+
+  let l,n ,i ,j,k ;
+
+  if (jd > 2299160) {
+    l = jd + 68569
+    n = intPart((4 * l) / 146097)
+    l = l - intPart((146097 * n + 3) / 4)
+    i = intPart((4000 * (l + 1)) / 1461001)
+    l = l - intPart((1461 * i) / 4) + 31
+    j = intPart((80 * l) / 2447)
+    d = l - intPart((2447 * j) / 80)
+    l = intPart(j / 11)
+    m = j + 2 - 12 * l
+    y = 100 * (n - 49) + i + l
+  } else {
+    j = jd + 1402
+    k = intPart((j - 1) / 1461)
+    l = j - 1461 * k
+    n = intPart((l - 1) / 365) - intPart(l / 1461)
+    i = l - 365 * n + 30
+    j = intPart((80 * i) / 2447)
+    d = i - intPart((2447 * j) / 80)
+    i = intPart(j / 11)
+    m = j + 2 - 12 * i
+    y = 4 * k + n + i - 4716
+  }
+
+  //arg.CDay.value=d
+  //arg.CMonth.value=m
+  //arg.CYear.value=y
+
+  return {
+    d,
+    m,
+    y,
+    dateOfWeek: jd % 7,
+    dayName: weekDay(jd % 7),
+  };
+}
+
+
+
+
+export function weekDay(wdn) {
+  if (wdn == 0) {
+    return "Mon"
+  }
+  if (wdn == 1) {
+    return "Tue"
+  }
+  if (wdn == 2) {
+    return "Wed"
+  }
+  if (wdn == 3) {
+    return "Thu"
+  }
+  if (wdn == 4) {
+    return "Fri"
+  }
+  if (wdn == 5) {
+    return "Sat"
+  }
+  if (wdn == 6) {
+    return "Sun"
+  }
+  return ""
+
+}
+
+function GregToHijri(gregDate) {
+  const hijriDate = GregToIsl({
+    CDay: {
+      value: gregDate.getDate()
+    },
+    CYear: {
+      value: gregDate.getFullYear()
+    },
+    CMonth: {
+      value: gregDate.getMonth() + 1
+    }
+  });
+
+  return {
+    year: hijriDate.y,
+    month: hijriDate.m,
+    date: hijriDate.d,
+    hours: gregDate.getHours(),
+    minutes: gregDate.getMinutes(),
+    seconds: gregDate.getSeconds(),
+    milliseconds: gregDate.getMilliseconds(),
+    day: hijriDate.dateOfWeek,
+    dayName: hijriDate.dayName
+  };
+
+};
+
+function HijriToGreg(hijriDate) {
+  const gregDate =  IslToGreg({
+    HDay: {
+      value: hijriDate._date || hijriDate.date
+    },
+    HYear: {
+      value: hijriDate._year || hijriDate.year
+    },
+    HMonth: {
+      value: hijriDate._month || hijriDate.month
+    }
+  });
+
+  return new Date(gregDate.y,
+    gregDate.m -1 ,
+    gregDate.d,
+    hijriDate.getHours(),
+    hijriDate.getMinutes() ,
+    hijriDate.getSeconds(),
+    hijriDate.getMilliseconds()
+  )
+
+};
+
+export {GregToHijri};
+
+export {HijriToGreg};

package/src/hijri/FormatDate.js

@@ -0,0 +1,134 @@
+import HijriDate from "./HijriDate";
+
+const dateFormat = (function () {
+  const token =
+      /P{1,4}|p{1,4}|d{1,2}|e{3,6}|M{1,4}|yy(?:yy)?|([Hhms])\1?|[a]{1,4}|[LloSZ]|('at')|"[^"]*"|'[^']*'/g,
+    timezone =
+      /\b(?:[PMCEA][SDP]T|(?:Pacific|Mountain|Central|Eastern|Atlantic) (?:Standard|Daylight|Prevailing) Time|(?:GMT|UTC)(?:[-+]\d{4})?)\b/g,
+    timezoneClip = /[^-+\dA-Z]/g,
+    pad = function (val, len) {
+      val = String(val);
+      len = len || 2;
+      while (val.length < len) val = "0" + val;
+      return val;
+    };
+
+  // Regexes and supporting functions are cached through closure
+  return function (
+    date,
+    mask,
+    options = {
+      utc: false,
+    },
+  ) {
+    const { locales, defaultLocale } = HijriDate;
+    options.locale = options.locale || defaultLocale;
+    if (!locales[options.locale]) {
+      throw new Error(`Locale ${options.locale} is not supported yet .
+          Please, try to extend "HijriDate.locales" :
+             i.e: HijriDate.locales.${options.locale} = {dayNames:[..14 items..], monthNames:[..24 items..]}
+        `);
+      return;
+    }
+    // You can't provide utc if you skip other args (use the "UTC:" mask prefix)
+    if (
+      arguments.length == 1 &&
+      Object.prototype.toString.call(date) == "[object String]" &&
+      !/\d/.test(date)
+    ) {
+      mask = date;
+      date = undefined;
+    }
+
+    mask = String(masks[mask] || mask || masks["default"]);
+
+    // Allow setting the utc argument via the mask
+    if (mask.slice(0, 4) == "UTC:") {
+      mask = mask.slice(4);
+      options.utc = true;
+    }
+
+    var _ = options.utc ? "getUTC" : "get",
+      d = date[_ + "Date"](),
+      D = date[_ + "Day"](),
+      M = date[_ + "Month"](),
+      mIndex = date[_ + "MonthIndex"](),
+      y = date[_ + "FullYear"](),
+      H = date[_ + "Hours"](),
+      m = date[_ + "Minutes"](),
+      s = date[_ + "Seconds"](),
+      L = date[_ + "Milliseconds"](),
+      o = options.utc ? 0 : date.getTimezoneOffset(),
+      flags = {
+        d: d,
+        dd: pad(d),
+        ddd: locales[options.locale].dayNames[D === 7 ? 0 : D + 1],
+        dddd: locales[options.locale].dayNames[(D === 7 ? 0 : D + 1) + 7],
+        ee: locales[options.locale].dayNames[D],
+        eee: locales[options.locale].dayNames[D + 7],
+        eeee: locales[options.locale].dayNames[D + 14],
+        eeeeee: locales[options.locale].dayNames[D],
+        M,
+        MM: pad(M),
+        MMM: locales[options.locale].monthNames[mIndex],
+        MMMM: locales[options.locale].monthNames[mIndex + 12],
+        yy: String(y).slice(2),
+        yyyy: y,
+        h: H % 12 || 12,
+        hh: pad(H % 12 || 12),
+        H: H,
+        HH: pad(H),
+        m,
+        mm: pad(m),
+        s: s,
+        ss: pad(s),
+        l: pad(L, 3),
+        L: pad(L > 99 ? Math.round(L / 10) : L),
+        a: H < 12 ? locales[options.locale].am : locales[options.locale].pm,
+        aa: H < 12 ? locales[options.locale].am : locales[options.locale].pm,
+        aaa: H < 12 ? locales[options.locale].am : locales[options.locale].pm,
+        aaaa: H < 12 ? locales[options.locale].am : locales[options.locale].pm,
+        aaaaa: H < 12 ? locales[options.locale].am : locales[options.locale].pm,
+        "'at'": locales[options.locale].separator,
+        t: H < 12 ? "a" : "p",
+        tt: H < 12 ? "am" : "pm",
+        T: H < 12 ? "A" : "P",
+        TT: H < 12 ? "AM" : "PM",
+        //  Z: options.utc ? "UTC" : (String(date).match(timezone) || [""]).pop().replace(timezoneClip, ""),
+        o:
+          (o > 0 ? "-" : "+") +
+          pad(Math.floor(Math.abs(o) / 60) * 100 + (Math.abs(o) % 60), 4),
+        S: ["th", "st", "nd", "rd"][
+          d % 10 > 3 ? 0 : (((d % 100) - (d % 10) != 10) * d) % 10
+        ],
+      };
+
+    return mask.replace(token, function ($0) {
+      if ($0 === "P") return `${flags.d}/${flags.M}/${flags.yyyy} `;
+      if ($0.startsWith("PP"))
+        return `${flags.MMM} ${flags.dd}, ${flags.yyyy} `;
+      if ($0 === "p") return `${flags.h}:${flags.m} ${flags.a}`;
+      if ($0.startsWith("pp"))
+        return `${flags.hh}:${flags.mm}:${flags.ss} ${flags.a}`;
+      return $0 in flags ? flags[$0] : $0.slice(1, $0.length - 1);
+    });
+  };
+})();
+
+// Some common format strings
+export const masks = {
+  default: "ddd MMM dd yyyy HH:mm:ss",
+  shortDate: "M/d/yy",
+  mediumDate: "MMM d, yyyy",
+  longDate: "MMMM d, yyyy",
+  fullDate: "dddd, MMMM d, yyyy",
+  shortTime: "h:mm TT",
+  mediumTime: "h:mm:ss TT",
+  longTime: "h:mm:ss TT Z",
+  isoDate: "yyyy-MM-dd",
+  isoTime: "HH:mm:ss",
+  isoDateTime: "yyyy-MM-dd'T'HH:mm:ss",
+  isoUtcDateTime: "UTC:yyyy-MM-dd'T'HH:mm:ss'Z'",
+};
+
+export default dateFormat;