resolved conflict from main

aboveyunhai · Jan 22, 2024 · 966dd73 · 966dd73
2 parents 4d446a3 + eb09a11
commit 966dd73
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 22 deletions.
diff --git a/example/index.tsx b/example/index.tsx
@@ -43,7 +43,7 @@ const offsets: FirstDayOfWeek[] = [0, 1, 2, 3, 4, 5, 6];
 const App = () => {
   const { colorMode, toggleColorMode } = useColorMode();
   const demoDate = new Date();
-  const [date, setDate] = useState(demoDate);
+  const [date, setDate] = useState<Date | undefined>(demoDate);
   const [selectedDates, setSelectedDates] = useState<Date[]>([
     new Date(),
     new Date(),
@@ -138,12 +138,20 @@ const App = () => {
           <TabPanel>
             <Panel>
               <Section title="Single:">
-                <Flex alignItems={'center'}>
+                <Flex alignItems={'center'} gap={2}>
                   <Box marginRight={'1rem'}>closeOnSelect:</Box>
                   <Switch
                     isChecked={isSingleChecked}
                     onChange={(e) => setSingleCheck(e.currentTarget.checked)}
                   />
+                  <Button
+                    size={'sm'}
+                    onClick={() => {
+                      setDate(undefined);
+                    }}
+                  >
+                    Set Empty (undefined)
+                  </Button>
                 </Flex>
                 {/* chakra ui add prefix for the trigger for some reasons? */}
                 <Flex style={{ gap: '1rem' }} alignItems="center">
@@ -186,12 +194,20 @@ const App = () => {
                 </Flex>
               </Section>
               <Section title="Range:">
-                <Flex alignItems={'center'}>
+                <Flex alignItems={'center'} gap={2}>
                   <Box marginRight={'1rem'}>closeOnSelect:</Box>
                   <Switch
                     isChecked={isRangeChecked}
                     onChange={(e) => setRangeCheck(e.currentTarget.checked)}
                   />
+                  <Button
+                    size={'sm'}
+                    onClick={() => {
+                      setSelectedDates([]);
+                    }}
+                  >
+                    Set Empty (Empty Array: "[]")
+                  </Button>
                 </Flex>
                 <Flex style={{ gap: '1rem' }} alignItems="center">
                   <label htmlFor={`popover-trigger-default-range`}>

diff --git a/src/range.tsx b/src/range.tsx
@@ -100,11 +100,12 @@ interface RangeProps extends DatepickerProps {
 
 export type RangeDatepickerProps = RangeProps & VariantProps;
 
-const DefaultConfigs: CalendarConfigs = {
+const DefaultConfigs: Required<DatepickerConfigs> = {
   dateFormat: 'MM/dd/yyyy',
   monthNames: Month_Names_Short,
   dayNames: Weekday_Names_Short,
   firstDayOfWeek: 0,
+  monthsToDisplay: 2,
 };
 
 const defaultProps = {
@@ -144,7 +145,7 @@ export const RangeDatepicker: React.FC<RangeDatepickerProps> = (props) => {
       <CalendarIcon />
     );
 
-  const calendarConfigs: CalendarConfigs = {
+  const datepickerConfigs = {
     ...DefaultConfigs,
     ...configs,
   };
@@ -186,11 +187,11 @@ export const RangeDatepicker: React.FC<RangeDatepickerProps> = (props) => {
 
   // eventually we want to allow user to freely type their own input and parse the input
   let intVal = selectedDates[0]
-    ? `${format(selectedDates[0], calendarConfigs.dateFormat)}`
-    : '';
+    ? `${format(selectedDates[0], datepickerConfigs.dateFormat)}`
+    : `${datepickerConfigs.dateFormat}`;
   intVal += selectedDates[1]
-    ? ` - ${format(selectedDates[1], calendarConfigs.dateFormat)}`
-    : ` - ${calendarConfigs.dateFormat}`;
+    ? ` - ${format(selectedDates[1], datepickerConfigs.dateFormat)}`
+    : ` - ${datepickerConfigs.dateFormat}`;
 
   const PopoverContentWrapper = usePortal ? Portal : React.Fragment;
 
@@ -211,6 +212,7 @@ export const RangeDatepicker: React.FC<RangeDatepickerProps> = (props) => {
             variant={'outline'}
             lineHeight={1}
             paddingX="1rem"
+            fontSize={'sm'}
             disabled={disabled}
             {...propsConfigs?.triggerBtnProps}
           >
@@ -267,15 +269,15 @@ export const RangeDatepicker: React.FC<RangeDatepickerProps> = (props) => {
                 dayzedHookProps={{
                   onDateSelected: handleOnDateSelected,
                   selected: selectedDates,
-                  monthsToDisplay: 2,
+                  monthsToDisplay: datepickerConfigs.monthsToDisplay,
                   date: dateInView,
                   minDate: minDate,
                   maxDate: maxDate,
                   offset: offset,
                   onOffsetChanged: setOffset,
-                  firstDayOfWeek: calendarConfigs.firstDayOfWeek,
+                  firstDayOfWeek: datepickerConfigs.firstDayOfWeek,
                 }}
-                configs={calendarConfigs}
+                configs={datepickerConfigs}
                 propsConfigs={propsConfigs}
                 selected={selectedDates}
               />

diff --git a/src/single.tsx b/src/single.tsx
@@ -19,7 +19,6 @@ import FocusLock from 'react-focus-lock';
 import { Month_Names_Short, Weekday_Names_Short } from './utils/calanderUtils';
 import { CalendarPanel } from './components/calendarPanel';
 import {
-  CalendarConfigs,
   DatepickerConfigs,
   DatepickerProps,
   OnDateSelected,
@@ -63,11 +62,12 @@ export type VariantProps =
 
 export type SingleDatepickerProps = SingleProps & VariantProps;
 
-const DefaultConfigs: CalendarConfigs = {
+const DefaultConfigs: Required<DatepickerConfigs> = {
   dateFormat: 'yyyy-MM-dd',
   monthNames: Month_Names_Short,
   dayNames: Weekday_Names_Short,
   firstDayOfWeek: 0,
+  monthsToDisplay: 1,
 };
 
 const defaultProps = {
@@ -108,12 +108,13 @@ export const SingleDatepicker: React.FC<SingleDatepickerProps> = (props) => {
       <CalendarIcon />
     );
 
-  const calendarConfigs: CalendarConfigs = {
+  const datepickerConfigs = {
     ...DefaultConfigs,
     ...configs,
   };
+
   const [tempInput, setInputVal] = useState(
-    selectedDate ? format(selectedDate, calendarConfigs.dateFormat) : ''
+    selectedDate ? format(selectedDate, datepickerConfigs.dateFormat) : ''
   );
 
   const onPopoverClose = () => {
@@ -136,7 +137,7 @@ export const SingleDatepicker: React.FC<SingleDatepickerProps> = (props) => {
     setInputVal(event.target.value);
     const newDate = parse(
       event.target.value,
-      calendarConfigs.dateFormat,
+      datepickerConfigs.dateFormat,
       new Date()
     );
     if (!(newDate instanceof Date && !isNaN(newDate.getTime()))) {
@@ -151,9 +152,9 @@ export const SingleDatepicker: React.FC<SingleDatepickerProps> = (props) => {
 
   useEffect(() => {
     if (selectedDate) {
-      setInputVal(format(selectedDate, calendarConfigs.dateFormat));
+      setInputVal(format(selectedDate, datepickerConfigs.dateFormat));
     }
-  }, [selectedDate, calendarConfigs.dateFormat]);
+  }, [selectedDate, datepickerConfigs.dateFormat]);
 
   return (
     <Popover
@@ -173,10 +174,11 @@ export const SingleDatepicker: React.FC<SingleDatepickerProps> = (props) => {
             lineHeight={1}
             paddingX="1rem"
             disabled={disabled}
+            fontSize={'sm'}
             {...propsConfigs?.triggerBtnProps}
           >
             {selectedDate
-              ? format(selectedDate, calendarConfigs.dateFormat)
+              ? format(selectedDate, datepickerConfigs.dateFormat)
               : ''}
           </Button>
         </PopoverTrigger>
@@ -193,6 +195,7 @@ export const SingleDatepicker: React.FC<SingleDatepickerProps> = (props) => {
               }}
               id={id}
               autoComplete="off"
+              width={'10rem'}
               disabled={disabled}
               isDisabled={disabled}
               name={name}
@@ -230,16 +233,17 @@ export const SingleDatepicker: React.FC<SingleDatepickerProps> = (props) => {
               <CalendarPanel
                 dayzedHookProps={{
                   showOutsideDays: true,
+                  monthsToDisplay: datepickerConfigs.monthsToDisplay,
                   onDateSelected: handleOnDateSelected,
                   selected: selectedDate,
                   date: dateInView,
                   minDate: minDate,
                   maxDate: maxDate,
                   offset: offset,
                   onOffsetChanged: setOffset,
-                  firstDayOfWeek: calendarConfigs.firstDayOfWeek,
+                  firstDayOfWeek: datepickerConfigs.firstDayOfWeek,
                 }}
-                configs={calendarConfigs}
+                configs={datepickerConfigs}
                 propsConfigs={propsConfigs}
                 disabledDates={disabledDates}
               />

diff --git a/src/utils/commonTypes.ts b/src/utils/commonTypes.ts
@@ -58,6 +58,7 @@ export interface DatepickerConfigs {
   monthNames?: string[];
   dayNames?: string[];
   firstDayOfWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+  monthsToDisplay?: number;
 }
 
 export interface CalendarConfigs {