@cleartrip/ct-design-calendar 4.0.0 → 5.0.0

package/src/WeekDays.tsx

@@ -0,0 +1,20 @@
+import { memo } from 'react';
+
+import { Text, View } from 'react-native';
+
+import { staticDayNameStyles } from './styles';
+import { DAY_LIST } from './util';
+
+const WeekDays = () => {
+  return (
+    <View style={staticDayNameStyles?.root}>
+      {DAY_LIST?.map(({ day, isWeekend }, index) => (
+        <Text key={index} style={isWeekend ? staticDayNameStyles?.weekEnd : staticDayNameStyles?.weekDay}>
+          {day}
+        </Text>
+      ))}
+    </View>
+  );
+};
+
+export default memo(WeekDays);

package/src/constants.ts

@@ -0,0 +1,54 @@
+export const PAST_DATE = '2000-01-01';
+
+export const MONTHS = [
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December',
+];
+
+export const ELEMENTS_HEIGHT = {
+  HEADING: 64,
+  DATE: 52,
+  FOOTER: 40,
+  HOLIDAY: 20,
+};
+
+export const DAY_LIST = [
+  {
+    day: 'Mon',
+    isWeekend: false,
+  },
+  {
+    day: 'Tue',
+    isWeekend: false,
+  },
+  {
+    day: 'Wed',
+    isWeekend: false,
+  },
+  {
+    day: 'Thu',
+    isWeekend: false,
+  },
+  {
+    day: 'Fri',
+    isWeekend: false,
+  },
+  {
+    day: 'Sat',
+    isWeekend: true,
+  },
+  {
+    day: 'Sun',
+    isWeekend: true,
+  },
+];

package/src/event/EventEmitter/index.ts

@@ -0,0 +1,34 @@
+import { ICustomEventEmitter, ICustomEventListener } from './type';
+class CustomEventEmitter implements ICustomEventEmitter {
+  private events: Record<string, ICustomEventListener<unknown>[]> = {};
+
+  on<T>(eventName: string, callback: ICustomEventListener<T>) {
+    this.events[eventName] = this.events[eventName] || [];
+    this.events[eventName].push(callback as ICustomEventListener<unknown>);
+
+    return () => this.off(eventName, callback);
+  }
+
+  emit<T>(eventName: string, data: T): void {
+    if (this.events[eventName]) {
+      this.events[eventName].slice().forEach((callback) => callback(data)); // Avoid modifying original array during iteration
+    }
+  }
+
+  off<T>(eventName: string, callback: ICustomEventListener<T>): void {
+    if (!this.events[eventName]) {
+      return;
+    }
+    this.events[eventName] = this.events[eventName].filter((cb) => cb !== callback);
+  }
+
+  once<T>(eventName: string, callback: ICustomEventListener<T>): void {
+    const wrappedCallback = (data: T) => {
+      callback(data);
+      this.off(eventName, wrappedCallback);
+    };
+    this.on(eventName, wrappedCallback);
+  }
+}
+
+export default CustomEventEmitter;

package/src/event/EventEmitter/type.ts

@@ -0,0 +1,10 @@
+export interface ICustomEventListener<T> {
+  (data: T): void;
+}
+
+export interface ICustomEventEmitter {
+  on<T>(eventName: string, callback: ICustomEventListener<T>): void;
+  emit<T>(eventName: string, data: T): void;
+  off<T>(eventName: string, callback: ICustomEventListener<T>): void;
+  once<T>(eventName: string, callback: ICustomEventListener<T>): void;
+}

package/src/event/constants.ts

@@ -0,0 +1,5 @@
+export const PUB_SUB_IDS = {
+  FLAT_LIST_VIEWABLE_ITEM_CHANGED: 'FLAT_LIST/VIEWABLE_ITEM_CHANGED',
+  FLASH_LIST_VISIBLE_ITEMS: 'FLASH_LIST_VISIBLE_ITEMS',
+  MARKER_CLICKED: 'MARKER_CLICKED',
+};

package/src/event/index.tsx

@@ -0,0 +1,21 @@
+import { useCallback, useEffect } from 'react';
+
+import CustomEventEmitter from './EventEmitter';
+import { ICustomEventListener } from './EventEmitter/type';
+
+export const eventEmitter = new CustomEventEmitter(); // Create a single instance
+
+export function usePubEvent<T>(eventName: string): (data?: T) => void {
+  const publishEvent = useCallback((data?: T) => eventEmitter.emit(eventName, data), [eventName]);
+
+  return publishEvent;
+}
+
+export function useSubEvent<T>(eventName: string, callback: ICustomEventListener<T>, options: { once?: boolean } = {}) {
+  const { once = false } = options; // Allow specifying "once" behavior in options
+
+  useEffect(() => {
+    const listener = once ? eventEmitter.once(eventName, callback) : eventEmitter.on(eventName, callback);
+    return listener; // Cleanup on unmount
+  }, [eventName, callback, once]);
+}

package/src/globalStyle.ts

@@ -0,0 +1,351 @@
+import { injectGlobal } from '@emotion/css';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-expressions
+injectGlobal`
+.rdp {
+  --rdp-cell-height: 30px;
+  --rdp-cell-width: 54px;
+  --rdp-day-size: 30px;
+  --rdp-day-height-custom: 30px;
+  --rdp-day-width-custom: 30px;
+  --rdp-caption-font-size: 16px;
+  --rdp-accent-color: #1a1a1a;
+  --rdp-selected-range-color: #d7d7d7;
+  --rdp-background-color: #e7edff;
+  --rdp-outline: 1.5px solid var(--rdp-accent-color); /* Outline border for focused elements */
+  --rdp-outline-selected: 3px solid var(--rdp-accent-color); /* Outline border for focused _and_ selected elements */
+}
+
+/* Hide elements for devices that are not screen readers */
+.rdp-vhidden {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: 0;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  position: absolute !important;
+  top: 0;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  overflow: hidden !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  border: 0 !important;
+}
+
+/* Buttons */
+.rdp-button_reset {
+  appearance: none;
+  position: relative;
+  margin: 0;
+  padding: 0;
+  cursor: default;
+  color: inherit;
+  background: none;
+  font: inherit;
+
+  -moz-appearance: none;
+  -webkit-appearance: none;
+}
+
+.rdp-button_reset:focus-visible {
+  /* Make sure to reset outline only when :focus-visible is supported */
+  outline: none;
+}
+
+.rdp-button {
+  border: 1.5px solid transparent;
+}
+
+.rdp-button[disabled]:not(.rdp-day_selected) {
+  opacity: 0.25;
+}
+
+.rdp-button:not([disabled]) {
+  cursor: pointer;
+}
+
+.rdp-button:focus-visible:not([disabled]) {
+  color: inherit;
+  background-color: var(--rdp-background-color);
+  // border: var(--rdp-outline);
+}
+
+.rdp-button:hover:not([disabled]):not(.rdp-day_selected) {
+  // border: var(--rdp-outline);
+}
+
+.rdp-months {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.rdp-month {
+  margin: unset !important;
+  // margin: 0 1em;
+}
+
+.rdp-month:first-child {
+  margin-left: 12px;
+}
+
+.rdp-month:last-child {
+  margin-right: 12px;
+}
+
+.rdp-table {
+  margin: 0;
+  max-width: calc(var(--rdp-cell-width) * 7);
+  border-spacing: 0 10px;
+}
+
+.rdp-with_weeknumber .rdp-table {
+  max-width: calc(var(--rdp-cell-width) * 8);
+  border-collapse: collapse;
+}
+
+.rdp-caption {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0;
+  text-align: left;
+}
+
+.rdp-multiple_months .rdp-caption {
+  position: relative;
+  display: block;
+  text-align: center;
+}
+
+.rdp-caption_dropdowns {
+  position: relative;
+  display: inline-flex;
+}
+
+.rdp-caption_label {
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  margin: 0;
+  padding: 0 0.25em;
+  white-space: nowrap;
+  color: currentColor;
+  border: 0;
+  border: 1.5px solid transparent;
+  font-family: inherit;
+  font-size: var(--rdp-caption-font-size);
+  font-weight: bold;
+}
+
+.rdp-nav {
+  white-space: nowrap;
+}
+
+.rdp-multiple_months .rdp-caption_start .rdp-nav {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  transform: translateY(-50%);
+}
+
+.rdp-multiple_months .rdp-caption_end .rdp-nav {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  transform: translateY(-50%);
+}
+
+.rdp-nav_button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--rdp-cell-width);
+  height: var(--rdp-cell-height);
+  padding: 0.25em;
+  border-radius: 100%;
+}
+
+/* ---------- */
+/* Dropdowns  */
+/* ---------- */
+
+.rdp-dropdown_year,
+.rdp-dropdown_month {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+.rdp-dropdown {
+  appearance: none;
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  cursor: inherit;
+  opacity: 0;
+  border: none;
+  background-color: transparent;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.rdp-dropdown[disabled] {
+  opacity: unset;
+  color: unset;
+}
+
+.rdp-dropdown:focus-visible:not([disabled]) + .rdp-caption_label {
+  background-color: var(--rdp-background-color);
+  // border: var(--rdp-outline);
+  border-radius: 6px;
+}
+
+.rdp-dropdown_icon {
+  margin: 0 0 0 5px;
+}
+
+.rdp-head {
+  border: 0;
+}
+
+.rdp-head_row,
+.rdp-row {
+  height: 100%;
+}
+
+.rdp-head_cell {
+  vertical-align: middle;
+  font-size: 0.75em;
+  font-weight: 700;
+  text-align: center;
+  height: 100%;
+  height: var(--rdp-cell-height);
+  padding: 0;
+  text-transform: uppercase;
+}
+
+.rdp-tbody {
+  border: 0;
+}
+
+.rdp-tfoot {
+  margin: 0.5em;
+}
+
+.rdp-cell {
+  width: var(--rdp-cell-width);
+  // height: 100%;
+  // height: var(--rdp-cell-height);
+  height: var(--rdp-day-height-custom);
+  padding: 10;
+  text-align: center;
+}
+
+.rdp-weeknumber {
+  font-size: 0.75em;
+}
+
+.rdp-weeknumber,
+.rdp-day {
+  display: flex;
+  overflow: hidden;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: var(--rdp-day-width-custom);
+  height: var(--rdp-day-height-custom);
+  max-width: var(--rdp-day-size);
+  line-height: 20px;
+  color: #212121;
+  margin: auto;
+  border: 1.5px solid transparent;
+  border-radius: var(--rdp-day-borderRadius-custom);
+  font-size: 16px;
+  z-index: 100; // just needs to be > than ::after's z-index
+}
+
+.rdp-day_selected,
+.rdp-day_selected:focus-visible {
+  color: white;
+  opacity: 1;
+  background-color: var(--rdp-accent-color);
+}
+
+.rdp-day_outside {
+  opacity: 0.5;
+}
+
+.rdp-day_selected:focus-visible {
+  /* Since the background is the same use again the outline */
+  // outline: var(--rdp-outline);
+  outline-offset: 1.5px;
+  z-index: 1;
+}
+
+.rdp-cell:has(.rdp-day_range_start) {
+  background-color: var(--rdp-selected-range-color);
+  border-top-left-radius: 50%;
+  border-bottom-left-radius: 50%;
+  position: relative;
+}
+
+.rdp-cell:has(.rdp-day_range_end)::after {
+  background-color: white;
+  content: '';
+  position: absolute;
+  width: 50%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  transform: translate(100%, 0px);
+}
+
+.rdp-cell:has(.rdp-day_range_start)::before {
+  background-color: white;
+  content: '';
+  position: absolute;
+  width: 50%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+
+.rdp-cell:has(.rdp-day_range_end) {
+  background-color: var(--rdp-selected-range-color);
+  border-top-right-radius: 50%;
+  border-bottom-right-radius: 50%;
+  position: relative;
+}
+
+.rdp-day_range_end.rdp-day_range_start {
+  border-radius: var(--rdp-day-borderRadius-custom);
+  padding: 4px;
+}
+
+.rdp-cell:has(.rdp-day_range_middle) {
+  background-color: var(--rdp-selected-range-color);
+}
+
+.rdp-day_range_middle {
+  border-radius: 0;
+  color: var(--rdp-accent-color);
+  background-color: var(--rdp-selected-range-color);
+  padding: 4px;
+}
+
+.weekendColor {
+  color: #ff0000;
+}
+ 
+`;

package/src/index.ts

@@ -0,0 +1,3 @@
+export { default as Calendar } from './Calendar';
+export type * from './type';
+export * from './constants';