fix: highlightWeekend bugs

.npmignore

@@ -0,0 +1 @@
+node_modules

package.json

@@ -40,10 +40,10 @@
   "homepage": "https://github.com/persian-tools/persian-mobile-datepicker#readme",
   "dependencies": {
     "@persian-tools/persian-tools": "^1.6.1",
-    "date-fns-jalali": "^2.21.3-1",
+    "date-fns-jalali": "^2.22.1-0",
     "framer-motion": "^4.1.17",
     "react": "^17.0.2",
-    "react-modal-sheet": "^1.3.2",
+    "react-modal-sheet": "^1.4.0",
     "rmc-picker": "^5.0.10",
     "styled-components": "^5.3.0"
   },
@@ -54,32 +54,32 @@
     "@storybook/addon-links": "^6.2.9",
     "@storybook/preset-create-react-app": "^3.1.7",
     "@storybook/react": "^6.2.9",
-    "@testing-library/jest-dom": "^5.12.0",
+    "@testing-library/jest-dom": "^5.13.0",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^13.1.9",
     "@types/jest": "^26.0.23",
-    "@types/node": "^15.6.1",
-    "@types/react": "^17.0.7",
-    "@types/react-dom": "^17.0.5",
+    "@types/node": "^15.12.2",
+    "@types/react": "^17.0.9",
+    "@types/react-dom": "^17.0.6",
     "@types/styled-components": "^5.1.9",
-    "@typescript-eslint/eslint-plugin": "^4.25.0",
-    "@typescript-eslint/parser": "^4.25.0",
+    "@typescript-eslint/eslint-plugin": "^4.26.1",
+    "@typescript-eslint/parser": "^4.26.1",
     "babel-eslint": "^10.0.3",
     "babel-loader": "^8.2.2",
-    "eslint": "^7.27.0",
+    "eslint": "^7.28.0",
     "eslint-config-react-app": "^6.0.0",
     "gh-pages": "^3.2.0",
     "microbundle-crl": "^0.13.11",
-    "prettier": "^2.3.0",
+    "prettier": "^2.3.1",
     "react-dom": "^17.0.2",
-    "typescript": "^4.2.4"
+    "typescript": "^4.3.2"
   },
   "resolutions": {
     "**/react": "17.0.2"
   },
   "peerDependencies": {
-    "react": "^16.8.0",
-    "framer-motion": "^4.1.17"
+    "framer-motion": "^4.1.17",
+    "react": "^17.0.2"
   },
   "browserslist": {
     "production": [

src/components/WheelPicker/index.tsx

@@ -1,25 +1,40 @@
-import React, { useLayoutEffect, useMemo } from 'react';
+import React, {
+  CSSProperties,
+  useLayoutEffect,
+  useMemo,
+  useCallback,
+  FC,
+} from 'react';
 // Global Components
-import Picker from 'rmc-picker/es/Picker';
 import MultiPicker from 'rmc-picker/es/MultiPicker';
 // Styles
-import { Caption, GlobalStyle } from './styles';
+import {
+  Caption,
+  GlobalStyle,
+  PickerItemWithStyle,
+  PickerWithStyle,
+} from './styles';
 // Hooks
 import { usePicker } from '../../hooks/usePicker';
 // Helpers
 import { convertSelectedDateToObject, isObjectEmpty } from '../../helpers';
 import {
   convertDateObjectToDateInstance,
+  isWeekend,
   pickerData,
 } from '../../helpers/date';
 // Types
-import type { FC } from 'react';
-import type { PickerColumns, WheelPickerProps } from './index.types';
-import { PickerColumnCaption } from './index.types';
+import type {
+  DateConfigTypes,
+  PickerColumns,
+  WheelPickerProps,
+  PickerColumnCaption,
+} from './index.types';
 
 export const WheelPicker: FC<WheelPickerProps> = (props) => {
   const {
     prefix,
+    configs,
 
     daysInMonth,
     selectedDate,
@@ -110,16 +125,45 @@ export const WheelPicker: FC<WheelPickerProps> = (props) => {
    * @param { Array<string>} value date
    * @return {void}
    */
-  function onChange(value: Array<string>) {
+  function onChange(value: Array<string>): void {
     const convertSelectedDate = convertSelectedDateToObject(value);
 
     setSelectedDate(convertSelectedDate);
+    // Call onChange if presents
     props.onChange?.({
       object: convertSelectedDate,
       date: convertDateObjectToDateInstance(convertSelectedDate),
     });
   }
 
+  const columnStyles = useCallback<(type: DateConfigTypes) => CSSProperties>(
+    (type) => {
+      return configs[type].columnStyle || {};
+    },
+    [configs],
+  );
+
+  const columnItemStyles = useCallback<
+    (type: DateConfigTypes) => CSSProperties
+  >(
+    (type) => {
+      return {
+        ...{ color: '#3f3f3e' },
+        ...(configs[type].itemStyle || {}),
+      };
+    },
+    [configs],
+  );
+
+  const columnSelectedItemStyles = useCallback<
+    (type: DateConfigTypes) => CSSProperties
+  >(
+    (type) => {
+      return configs[type].selectedItemStyle || {};
+    },
+    [configs],
+  );
+
   return (
     <React.Fragment>
       {pickerColumns.map((column, index) => {
@@ -152,33 +196,57 @@ export const WheelPicker: FC<WheelPickerProps> = (props) => {
       >
         {pickerColumns.map((column, index) => {
           return (
-            <Picker
+            <PickerWithStyle
               key={`${index}`}
-              indicatorClassName={prefix(
-                `indicator ${prefix(`${column.type}-column`)}`,
-              )}
+              style={columnStyles(column.type)}
+              indicatorClassName={`${prefix(`indicator`)} ${prefix(
+                `${column.type}-column`,
+              )}`}
             >
               {filterAllowedColumnRows(column.value, column.type).map(
                 (pickerItem) => {
+                  const isSelectedItem =
+                    pickerItem.value ===
+                    defaultSelectedDateObject[pickerItem.type];
                   return (
-                    <Picker.Item
+                    <PickerItemWithStyle
+                      // @ts-ignore
+                      style={{
+                        ...{ unicodeBidi: 'plaintext', direction: 'rtl' },
+                        ...columnItemStyles(column.type),
+                        ...(isSelectedItem
+                          ? columnSelectedItemStyles(column.type)
+                          : {}),
+                      }}
                       key={`${pickerItem.type}_${pickerItem.value}`}
                       className={`${
-                        pickerItem.value ===
-                        defaultSelectedDateObject[pickerItem.type]
-                          ? prefix('active-selected')
-                          : ''
+                        isSelectedItem ? prefix('active-selected') : ''
                       } ${prefix('view-item')} ${getPickerItemClassNames(
                         pickerItem,
                       )}`}
                       value={`${pickerItem.type}-${pickerItem.value}`}
                     >
-                      {handlePickerItemTextContent(pickerItem)}
-                    </Picker.Item>
+                      <div
+                        style={
+                          pickerItem.type === 'day' &&
+                          isWeekend(
+                            selectedDate.year!,
+                            selectedDate.month!,
+                            pickerItem.value,
+                          )
+                            ? {
+                                color: '#de3f18',
+                              }
+                            : {}
+                        }
+                      >
+                        {handlePickerItemTextContent(pickerItem)}
+                      </div>
+                    </PickerItemWithStyle>
                   );
                 },
               )}
-            </Picker>
+            </PickerWithStyle>
           );
         })}
       </MultiPicker>

src/components/WheelPicker/index.types.ts

@@ -12,8 +12,6 @@ export interface WheelPickerProps {
   defaultValue?: Date;
   // Title
   title?: string;
-  // Triggered when the component DOM is generated, the parameter is the component element
-  onRender?: () => void;
   /**
    * Gets called when value of the picker changes
    *
@@ -94,12 +92,20 @@ export interface PickerColumnCaption {
 }
 export type PickerSelectedDateValue = number;
 export interface DateConfigValuesModel {
+  // Columns Caption with text and style
   caption?: PickerColumnCaption;
-  formatter?: (
-    value: PickerSelectedDateValue,
-  ) => PickerSelectedDateValue | string;
+  // Format the Columns content
+  formatter?: (value: PickerExtraDateInfo) => PickerSelectedDateValue | string;
+  // Items className
   classname?: (value: PickerExtraDateInfo) => string | string[];
+  // Allow to render an Item
   shouldRender?: (value: PickerExtraDateInfo) => boolean;
+  // Column Styles
+  columnStyle?: CSSProperties;
+  // Column's Items Styles
+  itemStyle?: CSSProperties;
+  // Active Selected Column's Items Styles
+  selectedItemStyle?: CSSProperties;
 }
 
 export type DateConfig = Partial<

src/components/WheelPicker/styles.ts

@@ -1,4 +1,5 @@
 import styled, { createGlobalStyle } from 'styled-components';
+import Picker from 'rmc-picker/es/Picker';
 // @ts-ignore
 import styles from 'rmc-picker/assets/index.css';
 
@@ -9,4 +10,11 @@ export const Caption = styled.div<CaptionProps>`
   display: inline-block;
   text-align: center;
   width: ${(props) => `${100 / props.columnSize}%`};
+  color: #3f3f3e;
+  padding-bottom: 5px;
+  font-size: 1.1em;
+  border-bottom: 1px solid #ddd;
 `;
+
+export const PickerWithStyle = styled(Picker)``;
+export const PickerItemWithStyle = styled(Picker.Item)``;

src/hooks/usePicker.ts

@@ -1,3 +1,5 @@
+import { useState, useRef, useMemo, useEffect } from 'react';
+
 import {
   convertDateInstanceToDateObject,
   convertDateObjectToDateInstance,
@@ -21,7 +23,6 @@ import {
   toPositive,
 } from '../helpers';
 // Hooks
-import { useState, useRef, useMemo, useEffect } from 'react';
 import { usePrevious } from './usePrevious';
 // Types
 import type {
@@ -34,7 +35,7 @@ import type {
   RequiredPickerDateModel,
   WheelPickerProps,
 } from '../components/WheelPicker/index.types';
-import { PickerColumnCaption } from '../components/WheelPicker/index.types';
+import type { PickerColumnCaption } from '../components/WheelPicker/index.types';
 
 export function usePicker(props: WheelPickerProps) {
   const selectedDateRef = useRef<PickerDateModel>();
@@ -47,7 +48,7 @@ export function usePicker(props: WheelPickerProps) {
   const configs = useMemo<Required<DateConfig>>(() => {
     const config = { ...props.config } as Required<DateConfig>;
     if (config.month && !config.month.formatter) {
-      config.month.formatter = (value) => jalaliMonths[value];
+      config.month.formatter = (value) => jalaliMonths[value.month!];
     }
 
     return config;
@@ -410,9 +411,9 @@ export function usePicker(props: WheelPickerProps) {
   function pickerItemTextFormatter(
     pickerItem: PickerItemModel,
   ): PickerSelectedDateValue | string {
+    const dateValues = addExtraDateInfo(selectedDate, pickerItem);
     return (
-      configs[pickerItem.type]?.formatter?.(pickerItem.value) ??
-      pickerItem.value
+      configs[pickerItem.type]?.formatter?.(dateValues) ?? pickerItem.value
     );
   }
 
@@ -516,6 +517,7 @@ export function usePicker(props: WheelPickerProps) {
 
   return {
     prefix,
+    configs,
 
     daysInMonth,
     selectedDate,

src/index.styles.ts

@@ -34,4 +34,5 @@ export const Footer = styled.div`
   justify-content: space-between;
   align-content: space-between;
   align-items: center;
+  border-top: 1px solid #ddd;
 `;

src/index.tsx

@@ -39,7 +39,6 @@ const Picker: React.FC<PickerProps> = (props) => {
             endYear={props.endYear}
             startYear={props.startYear}
             onChange={props.onChange}
-            onRender={props.onRender}
             disabled={props.disabled}
           />
 
@@ -67,7 +66,6 @@ Picker.defaultProps = {
   disableSheetDrag: true,
 };
 
-export default Picker;
 export { Picker, WheelPicker };
 export * from './helpers/date';
-export * from './components/WheelPicker/index.types';
+export type {DateConfig, WheelPickerSelectEvent} from './components/WheelPicker/index.types';