feat: add new isDisabled and isInCurrentMonth for items and deprecate…

…d disabled
aliakbarazizi · Jan 2, 2024 · 4d75e17 · 4d75e17
1 parent 2e690ef
commit 4d75e17
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 2 deletions.
diff --git a/src/components/datepicker/item/Item.stories.tsx b/src/components/datepicker/item/Item.stories.tsx
@@ -32,6 +32,8 @@ export const DateItem = {
  args: {
  item: {
  type: 'day',
+ isInCurrentMonth: true,
+ isDisabled: false,
  disabled: false,
  isSelected: false,
  isHeader: false,

diff --git a/src/components/datepicker/items/Items.stories.tsx b/src/components/datepicker/items/Items.stories.tsx
@@ -82,7 +82,7 @@ export const DateItems = {
  className={classNames(
  'grid items-center justify-center rounded-full py-1.5 text-sm font-medium select-none',
  item.isHeader ? 'cursor-default' : 'hover:bg-gray-700',
- item.disabled ? 'text-gray-500' : 'hover:text-white',
+ 'isInCurrentMonth' in item && item.isInCurrentMonth ? 'text-gray-500' : 'hover:text-white',
  item.type === 'day' && 'h-8 w-8',
  item.isSelected && 'bg-gray-600',
  item.isToday && 'border border-gray-500',

diff --git a/src/components/datepicker/picker/Picker.stories.tsx b/src/components/datepicker/picker/Picker.stories.tsx
@@ -252,7 +252,9 @@ export const Calendar: Story = {
  className={classNames(
  'flex items-center justify-center rounded-md py-1.5 text-sm font-medium select-none',
  item.isHeader ? 'cursor-default' : 'hover:bg-gray-700',
- item.disabled ? 'text-gray-500' : 'hover:text-white',
+ 'isInCurrentMonth' in item && item.isInCurrentMonth
+ ? 'text-gray-500'
+ : 'hover:text-white',
  item.isSelected && 'bg-gray-600',
  item.isToday && 'border border-gray-500',
  )}

diff --git a/src/context/context.ts b/src/context/context.ts
@@ -22,10 +22,15 @@ export type DateItemType =
  */
  isToday: boolean;
 
+ isDisabled: boolean;
+
  isSelected: boolean;
 
  isHeader: true;
 
+ /**
+ * @deprecated
+ */
  disabled: boolean;
 
  text: string;
@@ -45,10 +50,17 @@ export type DateItemType =
  */
  isToday: boolean;
 
+ isInCurrentMonth: boolean;
+
  isSelected: boolean;
 
  isHeader: false;
 
+ isDisabled: boolean;
+
+ /**
+ * @deprecated
+ */
  disabled: boolean;
 
  text: string;
@@ -72,6 +84,11 @@ export type DateItemType =
 
  isHeader: boolean;
 
+ isDisabled: boolean;
+
+ /**
+ * @deprecated
+ */
  disabled: boolean;
 
  text: string;
@@ -95,6 +112,11 @@ export type DateItemType =
 
  isHeader: boolean;
 
+ isDisabled: boolean;
+
+ /**
+ * @deprecated
+ */
  disabled: boolean;
 
  text: string;
@@ -114,6 +136,11 @@ export type HourItemType =
 
  isHeader: false;
 
+ isDisabled: boolean;
+
+ /**
+ * @deprecated
+ */
  disabled: false;
 
  value: number;
@@ -131,6 +158,11 @@ export type HourItemType =
 
  isHeader: false;
 
+ isDisabled: boolean;
+
+ /**
+ * @deprecated
+ */
  disabled: false;
 
  value: number;

diff --git a/src/jalali/config.ts b/src/jalali/config.ts
@@ -83,6 +83,7 @@ export const config: DatepickerConfig = {
  isToday: todayYear === value + 1300,
  isSelected: year === value + 1300,
  isHeader: false,
+ isDisabled: false,
  disabled: false,
 
  value: value + 1300,
@@ -97,6 +98,7 @@ export const config: DatepickerConfig = {
  isToday: todayMonth === value + 1,
  isSelected: month === value + 1,
  isHeader: false,
+ isDisabled: false,
  disabled: false,
 
  value: value + 1,
@@ -125,6 +127,7 @@ export const config: DatepickerConfig = {
  isToday: false,
  isSelected: false,
  isHeader: true,
+ isDisabled: false,
  disabled: false,
 
  value: i,
@@ -142,6 +145,8 @@ export const config: DatepickerConfig = {
  isSelected: selectedDate === date.getTime(),
 
  isHeader: false,
+ isDisabled: false,
+ isInCurrentMonth: date < end && date >= start,
  disabled: date < start || date > end,
 
  value: date,
@@ -158,6 +163,7 @@ export const config: DatepickerConfig = {
  isToday: false,
  isSelected: hour === value,
  isHeader: false,
+ isDisabled: false,
  disabled: false,
  })),
  minutes: ({ type, minute }) =>
@@ -169,6 +175,7 @@ export const config: DatepickerConfig = {
  isToday: false,
  isSelected: minute === value,
  isHeader: false,
+ isDisabled: false,
  disabled: false,
  })),
 };

diff --git a/src/utils/config.ts b/src/utils/config.ts
@@ -68,6 +68,7 @@ export const config: DatepickerConfig = {
  isToday: todayYear === value + 1900,
  isSelected: year === value + 1900,
  isHeader: false,
+ isDisabled: false,
  disabled: false,
 
  value: value + 1900,
@@ -83,6 +84,7 @@ export const config: DatepickerConfig = {
  isToday: todayMonth === value,
  isSelected: month === value + 1,
  isHeader: false,
+ isDisabled: false,
  disabled: false,
 
  value: value + 1,
@@ -109,6 +111,7 @@ export const config: DatepickerConfig = {
  isToday: false,
  isSelected: false,
  isHeader: true,
+ isDisabled: false,
  disabled: false,
 
  value: i,
@@ -125,6 +128,8 @@ export const config: DatepickerConfig = {
  isToday: todayDate === date.getTime(),
  isSelected: selectedDate === date.getTime(),
  isHeader: false,
+ isInCurrentMonth: date < start || date > end,
+ isDisabled: date < start || date > end,
  disabled: date < start || date > end,
 
  value: date,
@@ -141,6 +146,7 @@ export const config: DatepickerConfig = {
  isToday: false,
  isSelected: hour === value,
  isHeader: false,
+ isDisabled: false,
  disabled: false,
  })),
 
@@ -153,6 +159,7 @@ export const config: DatepickerConfig = {
  isToday: false,
  isSelected: minute === value,
  isHeader: false,
+ isDisabled: false,
  disabled: false,
  })),
 };