feat: add highlightWeekends and fix reported issues

persian-tools · Jun 5, 2021 · a84e9b0 · a84e9b0
1 parent bf4ad6c
commit a84e9b0
Show file tree

Hide file tree

Showing 6 changed files with 312 additions and 176 deletions.
diff --git a/src/components/WheelPicker/index.tsx b/src/components/WheelPicker/index.tsx
@@ -1,33 +1,23 @@
-import React, { useState } from 'react';
+import React, { useLayoutEffect, useMemo } from 'react';
 // Global Components
 import Picker from 'rmc-picker/es/Picker';
 import MultiPicker from 'rmc-picker/es/MultiPicker';
 // Styles
 import { GlobalStyle } from './styles';
-// Helpers
-import {
-  convertSelectedDateToObject,
-  isObjectEmpty,
-  prefixClassName,
-} from '../../helpers';
-import {
-  convertDateToObject,
-  daysInMonth as calculateDaysInMonth,
-  isValid,
-  pickerData,
-} from '../../helpers/date';
 // Hooks
-import { usePrevious } from '../../hooks/previous';
-// Types
-import type {
-  PickerColumns,
-  PickerDateModel,
-  WheelPickerProps,
-} from './index.types';
 import { usePicker } from '../../hooks/usePicker';
+// Helpers
+import { convertSelectedDateToObject, isObjectEmpty } from '../../helpers';
+import { pickerData } from '../../helpers/date';
+// Types
+import type { PickerColumns, WheelPickerProps } from './index.types';
+import type { FC } from 'react';
 
-export const WheelPicker: React.FC<WheelPickerProps> = (props) => {
+export const WheelPicker: FC<WheelPickerProps> = (props) => {
   const {
+    prefix,
+
+    daysInMonth,
     selectedDate,
     setSelectedDate,
     defaultPickerValues,
@@ -39,16 +29,6 @@ export const WheelPicker: React.FC<WheelPickerProps> = (props) => {
     handlePickerItemTextContent,
     handlePickerItemClassNames,
   } = usePicker(props);
-  // Local States
-  const [daysInMonth, setDaysInMonth] = useState<number>(29);
-
-  // Hooks
-  const previousSelectedDate = usePrevious<PickerDateModel>(selectedDate);
-  // Local Variables
-  /**
-   * Picker CSS classnames prefix name
-   */
-  const prefix = prefixClassName(props.prefix!);
 
   // Memo list
   /**
@@ -57,7 +37,7 @@ export const WheelPicker: React.FC<WheelPickerProps> = (props) => {
    * @category watchers
    * @return {PickerColumns}
    */
-  const pickerColumns = React.useMemo<PickerColumns>(() => {
+  const pickerColumns = useMemo<PickerColumns>(() => {
     return Object.keys(props.config).map((column) => {
       switch (column) {
         case 'year':
@@ -103,7 +83,7 @@ export const WheelPicker: React.FC<WheelPickerProps> = (props) => {
   /**
    * Prepare the default value of DatePicker when the Developer has not passed a defaultValue
    */
-  React.useLayoutEffect(() => {
+  useLayoutEffect(() => {
     if (
       pickerColumns.length &&
       isObjectEmpty(selectedDate) &&
@@ -116,33 +96,6 @@ export const WheelPicker: React.FC<WheelPickerProps> = (props) => {
       setSelectedDate(defaultDate);
     }
   }, [pickerColumns, selectedDate, props.defaultValue]);
-  /**
-   * * Local Watchers
-   */
-  // Calculate days in selected months
-  React.useEffect(() => {
-    if (!isObjectEmpty(selectedDate)) {
-      if (
-        previousSelectedDate?.month !== selectedDate?.month ||
-        previousSelectedDate?.year !== selectedDate?.year
-      ) {
-        setDaysInMonth(
-          calculateDaysInMonth(
-            Number(selectedDate.year),
-            Number(selectedDate.month),
-          ),
-        );
-      }
-    }
-  }, [selectedDate, previousSelectedDate?.year, previousSelectedDate?.month]);
-  /**
-   * Derived Selected Date from Prop's defaultValue
-   */
-  React.useEffect(() => {
-    if (isValid(props.defaultValue!)) {
-      setSelectedDate(convertDateToObject(props.defaultValue!));
-    }
-  }, [props.defaultValue]);
 
   /**
    * Picker onChange event which includes every columns' selected value
@@ -197,6 +150,6 @@ export const WheelPicker: React.FC<WheelPickerProps> = (props) => {
 };
 
 WheelPicker.defaultProps = {
-  minDecade: 30, // past 30 years
-  maxDecade: 30, // next 30 years
+  startYear: 30, // past 30 years
+  endYear: 30, // next 30 years
 };
diff --git a/src/components/WheelPicker/index.types.ts b/src/components/WheelPicker/index.types.ts
@@ -3,25 +3,18 @@ export interface WheelPickerSelectEvent extends PickerDateModel {}
 export interface WheelPickerProps {
   // CSS classnames prefix
   prefix?: string;
-  // Min Year value
-  minYear?: number;
-  // Max Year value
-  maxYear?: number;
-  // Min Month value
-  minMonth?: number;
-  // Max Month value
-  maxMonth?: number;
-  // Min Day value
-  minDay?: number;
-  // Max Day value
-  maxDay?: number;
   // Default column value
   defaultValue?: Date;
   // Title
   title?: string;
   // Triggered when the component DOM is generated, the parameter is the component element
   onRender?: () => void;
-  // Triggered when the value changes due to scrolling, the parameter is the index value of the entry array and the changed column
+  /**
+   * Gets called when value of the picker changes
+   *
+   * @param {WheelPickerSelectEvent} selected
+   * @return {void}
+   */
   onChange?: (selected: WheelPickerSelectEvent) => void;
   // Triggered when you click OK
   onSelect?: (selected: WheelPickerSelectEvent) => void;
@@ -31,14 +24,43 @@ export interface WheelPickerProps {
   disabled?: boolean;
   // Set config to configure year, month, day, hour, minute and seconds
   config: DateConfig;
-  // Min Date value
+  /**
+   * Specifies the minimum selectable day by user
+   *
+   * @default null
+   * @type {Date}
+   */
   minDate?: Date;
-  // Max Date value
+  /**
+   * Specifies the maximum selectable day by user
+   *
+   * @default null
+   * @type {Date}
+   */
   maxDate?: Date;
-  // Max decade
-  maxDecade?: number;
-  // Min decade
-  minDecade?: number;
+  /**
+   * The Minimum selectable year
+   *
+   * @description Picker will calculate the StartYear by this approach: currentYear + startYear
+   * @default 30
+   * @type {number}
+   */
+  endYear?: number;
+  /**
+   * The Maximum selectable year
+   *
+   * @description Picker will calculate the StartYear by this approach: currentYear + startYear
+   * @default 30
+   * @type {number}
+   */
+  startYear?: number;
+  /**
+   * Determines whether to mark weekend days with red or not. (weekend day is Friday)
+   *
+   * @default false
+   * @type {boolean}
+   */
+  highlightWeekends?: boolean;
 }
 
 export type DateConfigTypes =
@@ -56,14 +78,23 @@ export type DateConfigFormats =
   | 'hh'
   | 'mm'
   | 'ss';
+export type WeekDayText =
+  | 'شنبه'
+  | 'یک‌شنبه'
+  | 'دو‌شنبه'
+  | 'سه‌شنبه'
+  | 'چهار‌شنبه'
+  | 'پنج‌شنبه'
+  | 'جمعه';
+
 export type PickerSelectedDateValue = number;
 export interface DateConfigValuesModel {
   caption?: string;
   formatter?: (
     value: PickerSelectedDateValue,
   ) => PickerSelectedDateValue | string;
-  classname?: (value: PickerClassNameFormatter) => string | string[];
-  shouldRender?: (value: PickerClassNameFormatter) => boolean;
+  classname?: (value: PickerExtraDateInfo) => string | string[];
+  shouldRender?: (value: PickerExtraDateInfo) => boolean;
 }
 
 export type DateConfig = Partial<
@@ -82,9 +113,11 @@ export type PickerDateModel = {
 };
 export type RequiredPickerDateModel = Required<PickerDateModel>;
 
-export interface PickerClassNameFormatter extends PickerDateModel {
+export interface PickerExtraDateInfo extends PickerDateModel {
   weekDay?: number;
-  weekDayName?: WeekDaysName;
+  weekDayText?: WeekDayText;
+  monthText?: string;
+  isLeapYear?: boolean;
 }
 
 export interface PickerItemModel<V = PickerSelectedDateValue> {
@@ -93,12 +126,3 @@ export interface PickerItemModel<V = PickerSelectedDateValue> {
 }
 
 export type PickerColumns = Array<PickerItemModel<Array<PickerItemModel>>>;
-
-export type WeekDaysName =
-  | 'شنبه'
-  | 'یک‌شنبه'
-  | 'دو‌شنبه'
-  | 'سه‌شنبه'
-  | 'چهار‌شنبه'
-  | 'پنج‌شنبه'
-  | 'جمعه';
diff --git a/src/helpers/date.ts b/src/helpers/date.ts
@@ -21,12 +21,12 @@ import { createAnArrayOfNumbers, generateArrayInRangeOfNumbers } from './';
 // Types
 import type {
   PickerItemModel,
-  WeekDaysName,
+  WeekDayText,
 } from '../components/WheelPicker/index.types';
 import type { PickerDateModel } from '../components/WheelPicker/index.types';
-import { RequiredPickerDateModel } from '../components/WheelPicker/index.types';
+import type { RequiredPickerDateModel } from '../components/WheelPicker/index.types';
 
-export const weekDays: Record<number, WeekDaysName> = {
+export const weekDays: Record<number, WeekDayText> = {
   0: 'شنبه',
   1: 'یک‌شنبه',
   2: 'دو‌شنبه',
@@ -119,19 +119,23 @@ export function getWeekDay(year: number, month: number, day: number): number {
   return (dateGetDay(setDate(year, month, day)) + 1) % 7;
 }
 
+export function isWeekend(year: number, month: number, day: number): boolean {
+  return getWeekDay(year, month, day) === 6;
+}
+
 /**
  * Get weekday's name by date
  *
  * @param {number} year
  * @param {number} month
  * @param {number} day
- * @return {WeekDaysName} شنبه،...
+ * @return {WeekDayText} شنبه،...
  */
-export function getWeekDayName(
+export function getWeekDayText(
   year: number,
   month: number,
   day: number,
-): WeekDaysName {
+): WeekDayText {
   const result = getWeekDay(year, month, day);
 
   return weekDays[result];
@@ -206,7 +210,7 @@ export function generateYearsRange(min: number, max: number): Array<number> {
  * @returns {boolean}
  */
 export function isLeapYear(year: number): boolean {
-  return dateIsLeapYear(year);
+  return dateIsLeapYear(setDate(year, 1, 1));
 }
 
 /**