Merge branch 'master' into add-docs

samsam-ahmadi · Jan 1, 2023 · f5a2575 · f5a2575
2 parents 90504cf + a8db0f4
commit f5a2575
Show file tree

Hide file tree

Showing 13 changed files with 70 additions and 7 deletions.
diff --git a/src/components/DisplayMonths.tsx b/src/components/DisplayMonths.tsx
@@ -37,7 +37,7 @@ export const DisplayMonths = ({
       );
     });
   };
-  return <Wrapper jalali={jalali}>{renderMonths()}</Wrapper>;
+  return <Wrapper className="tp-calendar-month-select" jalali={jalali}>{renderMonths()}</Wrapper>;
 };
 
 type StyleProps = {

diff --git a/src/components/DisplayYears.tsx b/src/components/DisplayYears.tsx
@@ -27,7 +27,7 @@ export const DisplayYears = ({ setDisplayYears, setSource }: Props) => {
     );
   }
 
-  return <Wrapper ref={ref}> {years} </Wrapper>;
+  return <Wrapper className="tp-calendar-year-select" ref={ref}> {years} </Wrapper>;
 };
 
 const Wrapper = styled.div`

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -96,6 +96,7 @@ export const Header = ({
 
   return (
     <Wrapper
+      className="tp-calendar-header"
       numberOfMonths={numberOfMonths}
       jalali={jalali}
       displayMonths={displayMonths}

diff --git a/src/components/TitleOfWeek.tsx b/src/components/TitleOfWeek.tsx
@@ -30,7 +30,7 @@ export const TitleOfWeek: React.FunctionComponent<Props> = ({
   }
 
   return (
-    <Wrapper jalali={jalali} startOfWeek={startOfWeek}>
+    <Wrapper className="tp-calendar-week-titles" jalali={jalali} startOfWeek={startOfWeek}>
       {titles.map(item => (
         <p key={item}>{item}</p>
       ))}

diff --git a/src/constant/types.ts b/src/constant/types.ts
@@ -1,5 +1,6 @@
 import { DefaultTheme } from "styled-components";
 import { ElementType, ReactNode } from "react";
+import { Dayjs } from "dayjs";
 
 type HeaderIconsPosition = {
   right: ReactNode;
@@ -35,6 +36,7 @@ export interface InitialProps {
   numberOfMonths?: number;
   initialMonthAndYear?: string;
   onRangeDateInScreen?: DatePickerWindowUpdated;
+  dayClasses?: (day: Dayjs) => string[];
 }
 
 type DatePickerWindow = { start: string; end: string };

diff --git a/src/datePicker/DatePicker.tsx b/src/datePicker/DatePicker.tsx
@@ -27,6 +27,7 @@ export const DatePicker = ({
   onChange,
   initialMonthAndYear,
   onRangeDateInScreen,
+  dayClasses,
 }: DatePickerProps) => {
   const [selectedDays, setSelectedDays] = useState(selectedDaysProps || []);
   const [numberOfMonths, setNumberOfMonths] = useState(numberOfMonthsProps);
@@ -130,6 +131,7 @@ export const DatePicker = ({
             disabledBeforeDate={disabledBeforeDate}
             disabledBeforeToday={disabledBeforeToday}
             numberOfSelectableDays={numberOfSelectableDays}
+            dayClasses={dayClasses}
           />
         )}
       </ThemeProvider>

diff --git a/src/datePicker/Day.tsx b/src/datePicker/Day.tsx
@@ -23,6 +23,7 @@ type Props = {
   components?: DatePickerComponents;
   onChange: DatePickerOnChange;
   setSelectedDays: Dispatch<SetStateAction<string[]>>;
+  dayClasses?: (day: Dayjs) => string[];
 };
 
 export const Day: React.FC<Props> = ({
@@ -40,6 +41,7 @@ export const Day: React.FC<Props> = ({
   numberOfSelectableDays,
   disabledBeforeDate,
   disabledAfterDate,
+  dayClasses,
 }) => {
   if (disabledBeforeToday) {
     const today = dayjs().format(FORMAT_DATE);
@@ -134,6 +136,10 @@ export const Day: React.FC<Props> = ({
   };
 
   const DayComponent = components?.days;
+  let extraDayClasses = "";
+  if (dayClasses) {
+    extraDayClasses = dayClasses(day).join(" ");
+  }
   return (
     <Wrapper
       data-test={day.format(FORMAT_DATE)}
@@ -147,7 +153,7 @@ export const Day: React.FC<Props> = ({
           dayjs()
             .calendar(jalali ? "jalali" : "gregory")
             .format(FORMAT_DATE) === day.format(FORMAT_DATE),
-      })}
+      }, extraDayClasses, "tp-calendar-day")}
     >
       {DayComponent && (
         <DayComponent day={day.format(FORMAT_DATE)} jalali={jalali} />

diff --git a/src/datePicker/Months.tsx b/src/datePicker/Months.tsx
@@ -24,6 +24,7 @@ interface Props {
   components?: DatePickerComponents;
   setSource: Dispatch<SetStateAction<Dayjs>>;
   setSelectedDays: Dispatch<SetStateAction<string[]>>;
+  dayClasses?: (day: Dayjs) => string[];
 }
 
 export const Months = ({
@@ -41,6 +42,7 @@ export const Months = ({
   disabled,
   onChange,
   source: sourceProp,
+  dayClasses,
 }: Props) => {
   const renderMonths = () => {
     let months = [];
@@ -55,6 +57,7 @@ export const Months = ({
       );
       months.push(
         <Month
+          className="tp-calendar-month"
           numberOfMonths={numberOfMonths || 1}
           key={dayjs().set("month", 1).set("day", 1).diff(source, "d")}
           data-test={dayjs().set("month", 1).set("day", 1).diff(source, "d")}
@@ -66,6 +69,7 @@ export const Months = ({
           />
           {weeksDays.map(week => (
             <Weeks
+              className="tp-calendar-week"
               jalali={jalali}
               data-test={dayjs()
                 .set("month", 1)
@@ -90,6 +94,7 @@ export const Months = ({
                   disabledBeforeDate={disabledBeforeDate}
                   disabledAfterDate={disabledAfterDate}
                   numberOfSelectableDays={numberOfSelectableDays}
+                  dayClasses={dayClasses}
                 />
               ))}
             </Weeks>
@@ -99,5 +104,5 @@ export const Months = ({
     }
     return months;
   };
-  return <Wrapper jalali={jalali}>{renderMonths()}</Wrapper>;
+  return <Wrapper className="tp-calendar-months" jalali={jalali}>{renderMonths()}</Wrapper>;
 };
diff --git a/src/rangePicker/Day.tsx b/src/rangePicker/Day.tsx
@@ -33,6 +33,7 @@ interface Props {
   setSelectedDays: Dispatch<
     SetStateAction<RangePickerSelectedDays | undefined>
   >;
+  dayClasses?: (day: Dayjs) => string[];
 }
 
 export const Day = ({
@@ -52,6 +53,7 @@ export const Day = ({
   disabledBeforeToday,
   disabledBeforeDate,
   disabledAfterDate,
+  dayClasses,
 }: Props) => {
   if (disabledBeforeToday) {
     const today = dayjs().format(FORMAT_DATE);
@@ -199,6 +201,10 @@ export const Day = ({
   };
 
   const DayComponent = components?.days;
+  let extraDayClasses = "";
+  if (dayClasses) {
+    extraDayClasses = dayClasses(day).join(" ");
+  }
   return (
     <Wrapper
       data-test={day.format(FORMAT_DATE)}
@@ -228,7 +234,7 @@ export const Day = ({
           dayjs()
             .calendar(jalali ? "jalali" : "gregory")
             .format(FORMAT_DATE) === day.format(FORMAT_DATE),
-      })}
+      }, extraDayClasses, "tp-calendar-day")}
     >
       {DayComponent && (
         <DayComponent day={day.format(FORMAT_DATE)} jalali={jalali} />

diff --git a/src/rangePicker/Months.tsx b/src/rangePicker/Months.tsx
@@ -33,6 +33,7 @@ interface Props {
   setSelectedDays: Dispatch<
     SetStateAction<RangePickerSelectedDays | undefined>
   >;
+  dayClasses?: (day: Dayjs) => string[];
 }
 
 export const Months = ({
@@ -52,6 +53,7 @@ export const Months = ({
   disabled,
   onChange,
   source: sourceProp,
+  dayClasses,
 }: Props) => {
   const renderMonths = () => {
     let months = [];
@@ -66,6 +68,7 @@ export const Months = ({
       );
       months.push(
         <Month
+          className="tp-calendar-month"
           numberOfMonths={numberOfMonths || 1}
           key={dayjs().set("month", 1).set("day", 1).diff(source, "d")}
           data-test={dayjs().set("month", 1).set("day", 1).diff(source, "d")}
@@ -77,6 +80,7 @@ export const Months = ({
           />
           {weeksDays.map(week => (
             <Weeks
+              className="tp-calendar-week"
               jalali={jalali}
               data-test={dayjs()
                 .set("month", 1)
@@ -103,6 +107,7 @@ export const Months = ({
                   allowDisabledDaysSpan={allowDisabledDaysSpan}
                   disabledBeforeDate={disabledBeforeDate}
                   disabledAfterDate={disabledAfterDate}
+                  dayClasses={dayClasses}
                 />
               ))}
             </Weeks>
@@ -113,5 +118,5 @@ export const Months = ({
     return months;
   };
 
-  return <Wrapper jalali={jalali}>{renderMonths()}</Wrapper>;
+  return <Wrapper className="tp-calendar-months" jalali={jalali}>{renderMonths()}</Wrapper>;
 };
diff --git a/src/rangePicker/RangePicker.tsx b/src/rangePicker/RangePicker.tsx
@@ -27,6 +27,7 @@ export const RangePicker = ({
   onChange,
   initialMonthAndYear,
   onRangeDateInScreen,
+  dayClasses,
 }: RangePickerProps) => {
   const [selectedDays, setSelectedDays] = useState(selectedDaysProps);
   const [hoverDay, setHoverDay] = useState<string>();
@@ -133,6 +134,7 @@ export const RangePicker = ({
             disabledBeforeDate={disabledBeforeDate}
             disabledAfterDate={disabledAfterDate}
             allowDisabledDaysSpan={allowDisabledDaysSpan}
+            dayClasses={dayClasses}
           />
         )}
       </ThemeProvider>

diff --git a/src/stories/DatePicker.stories.tsx b/src/stories/DatePicker.stories.tsx
@@ -176,6 +176,23 @@ stories.add("Selected Days", () => {
   );
 });
 
+stories.add("Custom Day Classes", () => {
+  return (
+    <>
+      <style type="text/css">{`
+        .odd { transform: rotate(-10deg); } .even { transform: rotate(10deg); }
+      `}</style>
+      <DatePicker
+        numberOfMonths={1}
+        autoResponsive={false}
+        initialMonthAndYear="2021-08"
+        onChange={dates => window.console.log(dates)}
+        dayClasses={day => [parseInt(day.format('D')) % 2 == 1 ? 'odd' : 'even' ]}
+      />
+    </>
+  );
+});
+
 stories.add("Number of Selectable Days", () => {
   return (
     <DatePicker

diff --git a/src/stories/RangePicker.stories.tsx b/src/stories/RangePicker.stories.tsx
@@ -215,6 +215,23 @@ stories.add("Allow Disabled Days Span", () => {
   );
 });
 
+stories.add("Custom Day Classes", () => {
+  return (
+    <>
+      <style type="text/css">{`
+        .odd { transform: rotate(-10deg); } .even { transform: rotate(10deg); }
+      `}</style>
+      <RangePicker
+        numberOfMonths={1}
+        autoResponsive={false}
+        initialMonthAndYear="2021-08"
+        onChange={dates => window.console.log(dates)}
+        dayClasses={day => [parseInt(day.format('D')) % 2 == 1 ? 'odd' : 'even' ]}
+      />
+    </>
+  );
+});
+
 stories.add("Custom components - Title of weeks Component", () => {
   return (
     <RangePicker