feat: add highlight holidays and pass isHoliday in config prop functi…

…on methods

.gitignore

@@ -20,6 +20,7 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
+.rts2_cache_cjs
 #docs
 coverage
 

src/components/WheelPicker/styles.ts → src/components/WheelPicker/index.styles.ts

@@ -6,7 +6,7 @@ import styles from 'rmc-picker/assets/index.css';
 export const GlobalStyle = createGlobalStyle`${styles}`;
 
 export type CaptionProps = { columnSize: number };
-export const Caption = styled.div<CaptionProps>`
+export const StyledCaption = styled.div<CaptionProps>`
   display: inline-block;
   text-align: center;
   width: ${(props) => `${100 / props.columnSize}%`};
@@ -15,6 +15,13 @@ export const Caption = styled.div<CaptionProps>`
   font-size: 1.1em;
   border-bottom: 1px solid #ddd;
 `;
-
+export const StyledTitle = styled.div`
+  width: 100%;
+  text-align: center;
+  line-height: 55px;
+  color: #1672ec;
+  font-weight: bold;
+  font-size: 1.1em;
+`;
 export const PickerWithStyle = styled(Picker)``;
 export const PickerItemWithStyle = styled(Picker.Item)``;

src/components/WheelPicker/index.tsx

@@ -9,26 +9,36 @@ import React, {
 import MultiPicker from 'rmc-picker/es/MultiPicker';
 // Styles
 import {
-  Caption,
+  StyledCaption,
   GlobalStyle,
   PickerItemWithStyle,
   PickerWithStyle,
-} from './styles';
+  StyledTitle,
+} from './index.styles';
 // Hooks
 import { usePicker } from '../../hooks/usePicker';
 // Helpers
-import { convertSelectedDateToObject, isObjectEmpty } from '../../helpers';
+import {
+  convertSelectedDateObjectToArray,
+  convertSelectedDateToObject,
+  isObjectEmpty,
+} from '../../helpers';
 import {
   pickerData,
   convertDateObjectToDateInstance,
+  getDayOfYear,
 } from '../../helpers/date';
+// Events
+import { solarEvents } from '../../events/solar';
+import { persianEvents } from '../../events/persian';
 // Types
 import type {
   DateConfigTypes,
   PickerColumns,
   WheelPickerProps,
   PickerColumnCaption,
   PickerItemModel,
+  EventTypes,
 } from './index.types';
 
 export const WheelPicker: FC<WheelPickerProps> = (props) => {
@@ -46,6 +56,7 @@ export const WheelPicker: FC<WheelPickerProps> = (props) => {
     minYear,
 
     checkDayIsWeekend,
+    checkDateIsHoliday,
     getPickerColumnsCaption,
     filterAllowedColumnRows,
     getPickerItemClassNames,
@@ -120,6 +131,12 @@ export const WheelPicker: FC<WheelPickerProps> = (props) => {
     }
   }, [pickerColumns, selectedDate, props.defaultValue]);
 
+  React.useEffect(() => {
+    if (selectedDate && defaultPickerValueAsString.length) {
+      onChange(convertSelectedDateObjectToArray(selectedDate));
+    }
+  }, []);
+
   /**
    * Picker onChange event which includes every columns' selected value
    *
@@ -128,10 +145,32 @@ export const WheelPicker: FC<WheelPickerProps> = (props) => {
    */
   function onChange(value: Array<string>): void {
     const convertSelectedDate = convertSelectedDateToObject(value);
+    const dayOfYear = getDayOfYear(
+      convertSelectedDate.year!,
+      convertSelectedDate.month!,
+      convertSelectedDate.day!,
+    );
+    // Events
+    const events = [];
+    const solarEvent = solarEvents[dayOfYear];
+    if (solarEvent) {
+      events.push({
+        type: 'solar' as EventTypes,
+        title: solarEvent.title,
+      });
+    }
+    const persianEvent = persianEvents[dayOfYear];
+    if (persianEvent) {
+      events.push({
+        type: 'persian' as EventTypes,
+        title: persianEvent.title,
+      });
+    }
 
     setSelectedDate(convertSelectedDate);
     // Call onChange if presents
     props.onChange?.({
+      events,
       object: convertSelectedDate,
       date: convertDateObjectToDateInstance(convertSelectedDate),
     });
@@ -196,7 +235,7 @@ export const WheelPicker: FC<WheelPickerProps> = (props) => {
   );
 
   /**
-   * Get Picker's text content styles if the day is weekend
+   * Get Picker's text content styles if the day is weekend or holiday
    *
    * @param {PickerItemModel} pickerItem
    * @return {CSSProperties}
@@ -207,35 +246,56 @@ export const WheelPicker: FC<WheelPickerProps> = (props) => {
     (pickerItem: PickerItemModel) => CSSProperties
   >(
     (pickerItem) => {
-      return pickerItem.type === 'day' && checkDayIsWeekend(pickerItem.value)
-        ? {
+      const isDayItem = pickerItem.type === 'day';
+      if (isDayItem) {
+        // Highlight weekends if needed
+        if (props.highlightWeekends && checkDayIsWeekend(pickerItem.value)) {
+          return {
             color: '#de3f18',
+          };
+        }
+
+        // Highlight holidays if needed
+        if (props.highlightHolidays) {
+          const dayOfYear = getDayOfYear(
+            selectedDate.year!,
+            selectedDate.month!,
+            pickerItem.value,
+          );
+
+          if (checkDateIsHoliday(dayOfYear)) {
+            return {
+              color: '#de3f18',
+            };
           }
-        : {};
+        }
+      }
+      return {};
     },
     [selectedDate],
   );
 
   return (
     <React.Fragment>
+      {props.title && <StyledTitle>{props.title}</StyledTitle>}
       {pickerColumns.map((column, index) => {
         const caption = getPickerColumnsCaption(column.type);
         if (caption) {
           const { style = {}, text } = caption as PickerColumnCaption;
           return (
-            <Caption
+            <StyledCaption
               key={`Picker_Caption_${column.type}_${index}`}
               columnSize={pickerColumns.length}
               className={classNamePrefix('caption')}
               style={style}
             >
               {text}
-            </Caption>
+            </StyledCaption>
           );
         }
 
         return (
-          <Caption
+          <StyledCaption
             key={`Picker_Caption_${column.type}_${index}`}
             columnSize={pickerColumns.length}
             className={`${classNamePrefix('caption')} ${classNamePrefix(

src/components/WheelPicker/index.types.ts

@@ -1,8 +1,14 @@
 import { CSSProperties } from 'react';
 
+export type EventTypes = 'solar' | 'persian';
+export interface Event {
+  type: EventTypes;
+  title: string;
+}
 export interface WheelPickerSelectEvent {
-  object: PickerDateModel;
   date: Date;
+  events: Array<Event>;
+  object: PickerDateModel;
 }
 
 export interface WheelPickerProps {
@@ -60,6 +66,13 @@ export interface WheelPickerProps {
    * @type {boolean}
    */
   highlightWeekends?: boolean;
+  /**
+   * Determines whether to mark holidays in day column.
+   *
+   * @default false
+   * @type {boolean}
+   */
+  highlightHolidays?: boolean;
   // Add the name of the day of the week
   addDayName?: boolean;
 }
@@ -129,10 +142,19 @@ export interface PickerDateModel {
 export type RequiredPickerDateModel = Required<PickerDateModel>;
 
 export interface PickerExtraDateInfo extends PickerDateModel {
+  // The day of the week of the given date.
+  // 0 represents Saturday(شنبه)
   weekDay?: number;
+  // The day's name of the week of the given date
   weekDayText?: WeekDayText;
+  // The month's name of the given date
   monthText?: string;
+  // The day of the year of the given date.
+  dayOfYear?: number;
+  // Is the given date in the leap year?
   isLeapYear?: boolean;
+  // Is the given date holiday?
+  isHoliday?: boolean;
 }
 export type RequiredPickerExtraDateInfo = Required<PickerExtraDateInfo>;