Merge branch 'anu/datepicker' into anu/datepicker-docs

razorpay · May 16, 2024 · c76bece · c76bece
2 parents 92482cf + d4753e0
commit c76bece
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 7 deletions.
diff --git a/packages/blade/src/components/DatePicker/Calendar.web.tsx b/packages/blade/src/components/DatePicker/Calendar.web.tsx
@@ -35,7 +35,11 @@ const Calendar = <Type extends DateSelectionType>({
   onPreviousDecade,
   presets,
   ...props
-}: CalendarProps<Type>): React.ReactElement => {
+}: CalendarProps<Type> & {
+  date?: Date;
+  defaultDate?: Date;
+  onDateChange?: (date: Date) => void;
+}): React.ReactElement => {
   const isRange = selectionType === 'range';
 
   const [level, setLevel] = useControllableState<CalendarLevel>({

diff --git a/packages/blade/src/components/DatePicker/CalendarStyles.web.tsx b/packages/blade/src/components/DatePicker/CalendarStyles.web.tsx
@@ -21,9 +21,11 @@ const cell = {
   background: {
     default: 'transparent',
     hover: 'interactive.background.gray.highlighted',
+    disabled: 'transparent',
   },
   text: {
     default: 'interactive.text.gray.normal',
+    disabled: 'interactive.text.gray.disabled',
   },
 } as const;
 
@@ -281,6 +283,11 @@ const CalendarStyles = styled(BaseBox)<{ pickerType?: PickerType }>(({ theme, pi
       '&:hover': {
         backgroundColor: getIn(theme.colors, cell.background.hover),
       },
+      '&[data-disabled]': {
+        color: getIn(theme.colors, cell.text.disabled),
+        backgroundColor: getIn(theme.colors, cell.background.disabled),
+        cursor: 'not-allowed',
+      },
       '&[data-outside]': {
         color: theme.colors.interactive.text.gray.muted,
       },

diff --git a/packages/blade/src/components/DatePicker/DatePicker.web.tsx b/packages/blade/src/components/DatePicker/DatePicker.web.tsx
@@ -32,7 +32,6 @@ const DatePicker = <Type extends DateSelectionType = 'single'>({
   defaultValue,
   onChange,
   presets,
-  date,
   isOpen,
   defaultIsOpen,
   onOpenChange,
@@ -84,8 +83,7 @@ const DatePicker = <Type extends DateSelectionType = 'single'>({
     onChange: (isOpen) => onOpenChange?.({ isOpen }),
   });
 
-  const today = shiftTimezone('add', new Date(), ctx.getTimezone());
-  const currentDate = date ?? today;
+  const currentDate = shiftTimezone('add', new Date(), ctx.getTimezone());
   const [oldValue, setOldValue] = React.useState<DatesRangeValue | null>(controlledValue);
 
   const close = React.useCallback(() => {

diff --git a/packages/blade/src/components/DatePicker/types.ts b/packages/blade/src/components/DatePicker/types.ts
@@ -53,9 +53,6 @@ type CalendarProps<SelectionType extends DateSelectionType> = Pick<
   isOpen?: boolean;
   defaultIsOpen?: boolean;
   onOpenChange?: ({ isOpen }: { isOpen: boolean }) => void;
-  date?: Date;
-  defaultDate?: Date;
-  onDateChange?: (date: Date) => void;
 
   /**
    * Defines presets for the date picker
@@ -88,6 +85,7 @@ type CalendarProps<SelectionType extends DateSelectionType> = Pick<
    * Sets the maximum date that can be selected.
    */
   maxDate?: Date;
+  excludeDate?: (date: Date) => boolean;
   /**
    * Determines whether single date can be selected as range, applicable only when type="range"
    * @default false