@react-fabric/date 1.0.0-beta.4 → 1.0.0-beta.41

package/src/hijri/initializer.js

@@ -0,0 +1,96 @@
+import {
+  GregToHijri
+} from './DateConverter';
+import StringDateParser from './StringDateParser';
+
+const defaultFormat = 'yyyy/mm/dd';
+const defaultProps ={
+  month:1,
+  date:1,
+  hours:0,
+  minutes:0,
+  seconds:0,
+  milliseconds:0
+};
+
+class Initializer {
+
+   static initDefault() {
+      return GregToHijri(new Date());
+   }
+
+   static init_number (number) {
+     return GregToHijri(new Date(number));
+   }
+
+   static init_number_number (year, month) {
+
+     return this.init_number_number_number(year, month, 1);
+   }
+   static init_number_number_number () {
+     return this.initFromNumbers(...arguments);
+   }
+   static init_number_number_number_number () {
+     return this.initFromNumbers(...arguments);
+   }
+   static init_number_number_number_number_number () {
+     return this.initFromNumbers(...arguments);
+   }
+   static init_number_number_number_number_number_number () {
+     return this.initFromNumbers(...arguments);
+   }
+   static init_number_number_number_number_number_number_number () {
+     return this.initFromNumbers(...arguments);
+   }
+
+   static init_string() {
+     return this.initFromStrings(...arguments);
+   }
+
+   static init_string_string() {
+     return this.initFromStrings(...arguments);
+   }
+
+   static init_object(object) {
+     return Object.assign({}, defaultProps, object);
+   }
+   static initFromNumbers(year,
+     month,
+     date,
+     hours = 0,
+     minutes = 0,
+     seconds = 0,
+     milliseconds = 0)
+   {
+     Array.from(arguments).forEach((arg, index) => {
+       arguments[index] = parseInt(arg);
+     });
+
+     return {
+       year,
+       month,
+       date,
+       hours,
+       minutes,
+       seconds,
+       milliseconds
+     }
+   }
+
+
+   //TODO
+   static initFromStrings(dateString, format = defaultFormat) {
+      const props = {};
+      props.year= StringDateParser.extractYear(dateString, format);
+      props.month= StringDateParser.extractMonth(dateString, format);
+      props.date= StringDateParser.extractDate(dateString, format);
+      return Object.assign({}, defaultProps, props);
+   }
+
+
+
+}
+
+Initializer.defaultFormat = defaultFormat;
+
+export default Initializer;

package/src/hijri/locales.js

@@ -0,0 +1,109 @@
+export const ar = {
+  dayNames: [
+    "ح",
+    "ن",
+    "ث",
+    "ر",
+    "خ",
+    "ج",
+    "س",
+    "أحد",
+    "اثن",
+    "ثلا",
+    "ارب",
+    "خم",
+    "جم",
+    "سبت",
+    "الأحد",
+    "الإثنين",
+    "الثلاثاء",
+    "الإربعاء",
+    "الخميس",
+    "الجمعة",
+    "السبت",
+  ],
+  monthNames: [
+    "مح",
+    "صف",
+    "ربع١",
+    "ربع٢",
+    "جم١",
+    "جم٢",
+    "رجب",
+    "شعب",
+    "رمض",
+    "شو",
+    "ذو ق",
+    "ذو ح",
+    "محرّم",
+    "صفر",
+    "ربيع أول",
+    "ربيع الآخر",
+    "جمادى أولى",
+    "جمادى الآخرة",
+    "رجب",
+    "شعبان",
+    "رمضان",
+    "شوال",
+    "ذو القعدة",
+    "ذو الحجّة",
+  ],
+  separator: "عند",
+  am: "ص",
+  pm: "م",
+};
+
+export const en = {
+  dayNames: [
+    "Su",
+    "Mo",
+    "Tu",
+    "We",
+    "Th",
+    "Fr",
+    "Sa",
+    "Sun",
+    "Mon",
+    "Tue",
+    "Wed",
+    "Thu",
+    "Fri",
+    "Sat",
+    "Sunday",
+    "Monday",
+    "Tuesday",
+    "Wednesday",
+    "Thursday",
+    "Friday",
+    "Saturday",
+  ],
+  monthNames: [
+    "Muha",
+    "Saf",
+    "Rab1",
+    "Rab2",
+    "Jumd1",
+    "Jumd2",
+    "Rajb",
+    "Shbn",
+    "Rmdn",
+    "Shwl",
+    "Qada",
+    "Hija",
+    "Muharram",
+    "Safar",
+    "Rabi'ul Awwal",
+    "Rabi'ul Akhir",
+    "Jumadal Ula",
+    "Jumadal Akhira",
+    "Rajab",
+    "Sha'ban",
+    "Ramadan",
+    "Shawwal",
+    "Dhul Qa'ada",
+    "Dhul Hijja",
+  ],
+  separator: "at",
+  am: "am",
+  pm: "pm",
+};

package/src/hijri/safe.js

@@ -0,0 +1,16 @@
+import HijriDate from './HijriDate';
+import {GregToHijri} from './DateConverter';
+
+export const toHijri = ((gregDate) => {
+  const {year, month, date} = GregToHijri(gregDate);
+  return new HijriDate(
+    year,
+    month,
+    date,
+    gregDate.getHours(),
+    gregDate.getMinutes(),
+    gregDate.getSeconds(),
+    gregDate.getMilliseconds()
+  );
+});
+export default HijriDate;

package/src/i18n/index.ts

@@ -24,8 +24,5 @@
 import { addTranslationBundle } from "@react-fabric/core";
 import ar from "./ar.json";
 import en from "./en.json";
-import arSuper from "./superdate/ar.json";
-import enSuper from "./superdate/en.json";
 
 addTranslationBundle("date", { en, ar });
-addTranslationBundle("superdate", { en: enSuper, ar: arSuper });

package/src/index.ts

@@ -24,9 +24,14 @@
 import "./hijri";
 import "./i18n";
 
+export { DateHeader } from "./components/DateHeader";
+export { DecadePage } from "./components/DecadePage";
+export { YearPage } from "./components/YearPage";
 export { DateDisplay } from "./display/DateDisplay";
 export { DatePanel } from "./panels/DatePanel";
+export { EventPanel } from "./panels/EventPanel";
 export { RangePanel } from "./panels/RangePanel";
-export { SuperDate } from "./superdate/Superdate";
 
 export { DateUtil } from "./utils/dateUtil";
+
+export * from "./types";

package/src/{superdate → panels}/EventPanel.tsx

@@ -23,14 +23,14 @@
 
 import { Content, Section } from "@react-fabric/core";
 import { EMPTY_ARRAY } from "@react-fabric/utilities";
-import { endOfDay, isSameMonth, startOfDay } from "date-fns";
+import { endOfDay, isSameMonth, setYear, startOfDay } from "date-fns";
 import i18next from "i18next";
 import { useEffect, useReducer, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { DateHeader } from "../components/DateHeader";
 import { DecadePage } from "../components/DecadePage";
 import { YearPage } from "../components/YearPage";
-import { type EventType, PageType, type SuperDateProps } from "../types";
+import { type EventType, PageType } from "../types";
 import { DateUtil } from "../utils/dateUtil";
 
 interface EventState {
@@ -44,8 +44,21 @@ type EventActions =
   | { type: "changePage"; page: PageType }
   | { type: "changePageDate"; date: Date; changePage?: boolean };
 
-const makeList = (year: number, predefined: Array<EventType<Date>> = []) => {
+const makeList = (
+  year: number,
+  recurring: EventType[] = [],
+  predefined: Array<EventType<Date>> = [],
+) => {
   const list = [...predefined];
+  recurring.forEach((evt) =>
+    list.push({
+      label: evt.label,
+      hijri: evt.hijri,
+      icon: evt.icon,
+      start: setYear(DateUtil.parseDate(evt.start), year),
+      end: setYear(DateUtil.parseDate(evt.end), year),
+    }),
+  );
   list.push({
     label: "superdate:event.newYear",
     start: startOfDay(new Date(`${year - 1}-12-31`)),
@@ -77,11 +90,29 @@ const makeList = (year: number, predefined: Array<EventType<Date>> = []) => {
   });
 };
 
+export interface EventProps {
+  isHijri?: boolean;
+  /**
+   * list of calendar events
+   */
+  events?: EventType[];
+  /**
+   * list of calendar events
+   */
+  recurringEvents?: EventType[];
+
+  /**
+   * change handler
+   */
+  onChange?: (value: string, dates: [string, string]) => void;
+}
+
 export const EventPanel = ({
   isHijri,
   onChange,
   events = EMPTY_ARRAY,
-}: { isHijri: boolean } & Partial<SuperDateProps>) => {
+  recurringEvents = EMPTY_ARRAY,
+}: EventProps) => {
   const { t } = useTranslation();
   const [predefined, setPredefined] = useState<
     KeyValue<Array<EventType<Date>>>
@@ -100,13 +131,17 @@ export const EventPanel = ({
       if (action.type === "changePageDate") {
         resetList = true;
         state.pageDate = action.date;
-        if (action.changePage !== false) {
+        if (action.changePage) {
           state.page = Math.max(state.page - 1, PageType.MONTH);
         }
       }
       if (resetList) {
         const year = state.pageDate.getFullYear();
-        state.events = makeList(year, predefined[year] ?? []);
+        state.events = makeList(
+          year,
+          recurringEvents ?? [],
+          predefined[year] ?? [],
+        );
       }
       return { ...state };
     },

package/src/types/index.ts

@@ -22,7 +22,6 @@
  */
 
 import {
-  type ColorType,
   type CssProp,
   type TestProps,
 } from "@react-fabric/core/dist/types/types";
@@ -63,6 +62,14 @@ format?:
     | string;
     */
 
+export interface EventType<D = DateLike> {
+  label: string;
+  icon?: string;
+  start: D;
+  end: D;
+  hijri?: boolean;
+}
+
 export interface BaseProps {
   min?: DateLike;
   max?: DateLike;
@@ -82,40 +89,3 @@ export interface RangeProps extends BaseProps, CssProp, TestProps {
   onChange?: (dates: [start: string, end: string]) => void;
   presets?: Record<string, [DateLike, DateLike]>;
 }
-
-export interface EventType<D = DateLike> {
-  label: string;
-  icon?: string;
-  start: D;
-  end: D;
-  hijri?: boolean;
-}
-
-export interface PresetType {
-  value: string;
-  label: string;
-}
-
-export interface SuperDateProps {
-  as?: "button" | "chip";
-  color?: ColorType;
-  variant?: "solid" | "outline" | "link";
-  /**
-   * relative date value
-   */
-  value?: string;
-  /**
-   * change handler
-   */
-  onChange?: (value: string, dates: [string, string]) => void;
-  /**
-   * list of calendar events
-   */
-  events?: EventType[];
-  /**
-   * list of relative presets
-   *
-   * {value:'$year-5|$year', label:'last 5 years'}
-   */
-  presets?: PresetType[];
-}

package/src/utils/dateUtil.ts

@@ -52,7 +52,6 @@ import {
   startOfQuarter,
 } from "date-fns";
 import { DatePart, PageType, type DateLike } from "../types";
-// import { parseDate } from "./dateMath";
 import { isNil, isString } from "@react-fabric/utilities";
 import {
   arSA as ar,
@@ -157,7 +156,7 @@ export namespace DateUtil {
   };
 
   export const isRelative = (date: DateLike): date is string => {
-    return isString(date) && date.match(/^(\$\w+)([+-])(\d+)?$/) !== null;
+    return isString(date) && date.match(/^(\$\w+)([+-])?(\d+)?$/) !== null;
   };
 
   export const isRelativeRange = (date: DateLike): date is string => {
@@ -407,7 +406,7 @@ export namespace DateUtil {
     );
   };
 
-  export const parseDate = (datelike: string): Date => {
+  export const parseDate = (datelike: DateLike): Date => {
     return _parse(datelike);
   };
 
@@ -490,7 +489,8 @@ export namespace DateUtil {
     }
   };
 
-  const _parse = (dt: string, rounded?: "start" | "end") => {
+  const _parse = (dt: DateLike, rounded?: "start" | "end") => {
+    if (!isRelative(dt)) return new Date(dt);
     const [, part, diff = "0"] = dt.match(/^(\$\w+)([+-]\d+)?$/) ?? [];
     if (part) {
       let date = startOfMinute(new Date());
@@ -546,6 +546,3 @@ export namespace DateUtil {
     return new Date(dt);
   };
 }
-
-// @ts-expect-error ignore
-window.DateUtil = DateUtil;

package/dist/cjs/components/Date.module.css

@@ -1 +0,0 @@
-@layer comp{.dateHeader{box-shadow:inset 0 -1px 0 theme(colors.tint.200/50%)}.timeSlider{height:11.25rem;&:after,&:before{box-shadow:0 0 3rem .25rem theme(colors.tint.600);content:"";display:block;z-index:10}&:before{position:sticky;top:0}&:after{bottom:0;position:sticky}&>:first-child,&>:last-child{height:calc(50% - .75rem)}& [data-skew="1"]>div{opacity:.9;transform:scaleY(.9)}& [data-skew="2"]>div{opacity:.75;transform:scaleY(.75)}& [data-skew="3"]>div{opacity:.65;transform:scaleY(.65)}& [data-skew="4"]>div{opacity:.5;transform:scaleY(.5)}}}

package/dist/cjs/i18n/superdate/ar.json.js

@@ -1,86 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var separator = " ⇽ ";
-var label = {
-	quick: "حدد مسرعا",
-	relative: "نسبيا",
-	events: "الأحداث",
-	absolute: "مطلق",
-	preset: "المسبقة",
-	current: "تيار",
-	previous: "السابق",
-	from: "من عند",
-	to: "إلى",
-	"+": "من الان",
-	"-": "منذ",
-	apply: "يتقدم",
-	$now: "الآن",
-	$minute: "دقيقة",
-	$hour: "ساعة",
-	$day: "يوم",
-	$week: "أسبوع",
-	$month: "شهر",
-	$quarter: "ربع",
-	$year: "عام",
-	$decade: "عقد"
-};
-var now = {
-	$day: "اليوم",
-	$week: "هذا الاسبوع",
-	$month: "هذا الشهر",
-	$quarter: "هذا الربع",
-	$year: "هذه السنة",
-	$decade: "هذا العقد"
-};
-var next = {
-	$day: "غدا",
-	$week: "الاسبوع القادم",
-	$month: "الشهر القادم",
-	$quarter: "الربع القادم",
-	$year: "العام القادم",
-	$decade: "العقد القادم",
-	$minute: "بعد دقيقة",
-	$hour: "بعد ساعة",
-	$minute_plural: "بعد {{count}} دقائق",
-	$hour_plural: "بعد {{count}} ساعات",
-	$day_plural: "بعد {{count}} أيام",
-	$week_plural: "بعد {{count}} أسابيع",
-	$month_plural: "بعد {{count}} أشهر",
-	$quarter_plural: "بعد {{count}} أرباع",
-	$year_plural: "بعد {{count}} سنوات",
-	$decade_plural: "بعد {{count}} عقود"
-};
-var prev = {
-	$day: "في الامس",
-	$week: "الاسبوع الماضي",
-	$month: "الشهر الماضي",
-	$quarter: "الربع الأخير",
-	$year: "العام الماضي",
-	$decade: "العقد الماضي",
-	$minute: "منذ دقيقة",
-	$hour: "منذ ساعة",
-	$minute_plural: "منذ {{count}} دقيقة",
-	$hour_plural: "منذ {{count}} ساعات",
-	$day_plural: "منذ {{count}} أيام",
-	$week_plural: "من {{count}} اسابيع",
-	$month_plural: "قبل {{count}} أشهر",
-	$quarter_plural: "منذ {{count}} أرباع",
-	$year_plural: "منذ {{count}} سنوات",
-	$decade_plural: "منذ {{count}} عقود"
-};
-var arSuper = {
-	separator: separator,
-	label: label,
-	now: now,
-	next: next,
-	prev: prev
-};
-
-exports.default = arSuper;
-exports.label = label;
-exports.next = next;
-exports.now = now;
-exports.prev = prev;
-exports.separator = separator;

package/dist/cjs/i18n/superdate/en.json.js

@@ -1,93 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var separator = " ⇾ ";
-var event = {
-	ramadan: "Ramadan",
-	christmas: "Christmas",
-	newYear: "New Year"
-};
-var label = {
-	quick: "Quick Select",
-	relative: "Relative",
-	absolute: "Absolute",
-	events: "Events",
-	preset: "Presets",
-	current: "Current",
-	previous: "Previous",
-	from: "From",
-	to: "To",
-	"+": "From now",
-	"-": "Ago",
-	apply: "Apply",
-	$now: "Now",
-	$minute: "Minute",
-	$hour: "Hour",
-	$day: "Day",
-	$week: "Week",
-	$month: "Month",
-	$quarter: "Quarter",
-	$year: "Year",
-	$decade: "Decade"
-};
-var now = {
-	$day: "Today",
-	$week: "This week",
-	$month: "This month",
-	$quarter: "This quarter",
-	$year: "This year",
-	$decade: "This decade"
-};
-var next = {
-	$day: "Tomorrow",
-	$week: "Next week",
-	$month: "Next month",
-	$quarter: "Next quarter",
-	$year: "Next year",
-	$decade: "Next decade",
-	$minute: "A minute later",
-	$hour: "An hour later",
-	$minute_other: "{{count}} minutes later",
-	$hour_other: "{{count}} hours later",
-	$day_other: "{{count}} days later",
-	$week_other: "{{count}} weeks later",
-	$month_other: "{{count}} months later",
-	$quarter_other: "{{count}} quarters later",
-	$year_other: "{{count}} years later",
-	$decade_other: "{{count}} decades later"
-};
-var prev = {
-	$day: "Yesterday",
-	$week: "Last week",
-	$month: "Last month",
-	$quarter: "Last quarter",
-	$year: "Last year",
-	$decade: "Last decade",
-	$minute: "A minute ago",
-	$hour: "An hour ago",
-	$minute_other: "{{count}} minutes ago",
-	$hour_other: "{{count}} hours ago",
-	$day_other: "{{count}} days ago",
-	$week_other: "{{count}} weeks ago",
-	$month_other: "{{count}} months ago",
-	$quarter_other: "{{count}} quarters ago",
-	$year_other: "{{count}} years ago",
-	$decade_other: "{{count}} decades ago"
-};
-var enSuper = {
-	separator: separator,
-	event: event,
-	label: label,
-	now: now,
-	next: next,
-	prev: prev
-};
-
-exports.default = enSuper;
-exports.event = event;
-exports.label = label;
-exports.next = next;
-exports.now = now;
-exports.prev = prev;
-exports.separator = separator;