Merge pull request #28 from mohammadgharouni/develop

fix initial range from and to
alirezahematidev · Nov 26, 2023 · 0ee04b5 · 0ee04b5
2 parents 5e431c6 + f8a4858
commit 0ee04b5
Show file tree

Hide file tree

Showing 23 changed files with 43 additions and 147 deletions.
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "jalaali-react-date-picker",
   "description": "This package is a date picker component for React that supports the Jalaali (Iranian/Shamsi/Persian) calendar system. It provides an easy-to-use interface for selecting a date in the Jalaali calendar and is fully customizable with options for setting the start and end date range, localization, and more.",
   "author": "Alireza Hemati <alirezahematideveloper@gmail.com>, Mohamad Gharouni <mohammadgharouni@icloud.com>, Mehdi Samimi <samimi.dev@gmail.com>",
-  "version": "1.0.12",
+  "version": "1.0.17",
   "license": "MIT",
   "sideEffects": false,
   "private": false,

diff --git a/src/components/date/header/index.tsx b/src/components/date/header/index.tsx
@@ -31,16 +31,11 @@ const Header = ({ onSelectMonthPicker, onSelectYearPicker }: HeaderProps) => {
         <div className="center">
           <div
             className="iconItem"
-            onTouchStart={() =>
+            onClick={(e) => {
               isJalaali
                 ? onDecreaseYear(selectedDate)
-                : onIncreaseYear(selectedDate)
-            }
-            onClick={() =>
-              isJalaali
-                ? onDecreaseYear(selectedDate)
-                : onIncreaseYear(selectedDate)
-            }
+                : onIncreaseYear(selectedDate);
+            }}
           >
             {navigationIcons?.superPrevIcon || (
               <Icon.DoubleChevronRight hoverEffect />
@@ -53,11 +48,6 @@ const Header = ({ onSelectMonthPicker, onSelectYearPicker }: HeaderProps) => {
                 ? onDecreaseMonth(selectedDate)
                 : onIncreaseMonth(selectedDate)
             }
-            onTouchStart={() =>
-              isJalaali
-                ? onDecreaseMonth(selectedDate)
-                : onIncreaseMonth(selectedDate)
-            }
           >
             {navigationIcons?.prevIcon || <Icon.ChevronRight hoverEffect />}
           </div>
@@ -66,7 +56,6 @@ const Header = ({ onSelectMonthPicker, onSelectYearPicker }: HeaderProps) => {
           <div
             className="panel-date-holder-item clickable"
             onClick={onSelectMonthPicker}
-            onTouchStart={onSelectMonthPicker}
           >
             <span className="panel-header-item-text">
               {getMonthLabels(selectedDate.month, isJalaali)}
@@ -75,7 +64,6 @@ const Header = ({ onSelectMonthPicker, onSelectYearPicker }: HeaderProps) => {
           <div
             className="panel-date-holder-item clickable"
             onClick={onSelectYearPicker}
-            onTouchStart={onSelectYearPicker}
           >
             <span className="panel-header-item-text">{selectedDate.year}</span>
           </div>
@@ -88,11 +76,6 @@ const Header = ({ onSelectMonthPicker, onSelectYearPicker }: HeaderProps) => {
                 ? onIncreaseMonth(selectedDate)
                 : onDecreaseMonth(selectedDate)
             }
-            onTouchStart={() =>
-              isJalaali
-                ? onIncreaseMonth(selectedDate)
-                : onDecreaseMonth(selectedDate)
-            }
           >
             {navigationIcons?.nextIcon || <Icon.ChevronLeft hoverEffect />}
           </div>
@@ -103,11 +86,6 @@ const Header = ({ onSelectMonthPicker, onSelectYearPicker }: HeaderProps) => {
                 ? onIncreaseYear(selectedDate)
                 : onDecreaseYear(selectedDate)
             }
-            onTouchStart={() =>
-              isJalaali
-                ? onIncreaseYear(selectedDate)
-                : onDecreaseYear(selectedDate)
-            }
           >
             {navigationIcons?.superNextIcon || (
               <Icon.DoubleChevronLeft hoverEffect />

diff --git a/src/components/date/months/index.tsx b/src/components/date/months/index.tsx
@@ -18,13 +18,13 @@ const Months = () => {
           const isDisabled = item.isDisabled;
           return (
             <div
-              onClick={() => {
+              onMouseUp={(e) => {
                 if (!isDisabled) {
                   onMonthchange({ ...state, month: item.id });
                   onChangeMode?.("day");
                 }
               }}
-              onTouchStart={() => {
+              onTouchEnd={(e) => {
                 if (!isDisabled) {
                   onMonthchange({ ...state, month: item.id });
                   onChangeMode?.("day");

diff --git a/src/components/date/years/header.tsx b/src/components/date/years/header.tsx
@@ -33,9 +33,6 @@ const YearsHeader = ({
             onClick={() =>
               isJalaali ? onDecreaseDecade() : onIncreaseDecade()
             }
-            onTouchStart={() =>
-              isJalaali ? onDecreaseDecade() : onIncreaseDecade()
-            }
           >
             <Icon.DoubleChevronRight hoverEffect />
           </div>
@@ -54,15 +51,13 @@ const YearsHeader = ({
                 <span
                   className="clickable"
                   onClick={() => onYearPress?.(lowerDecade)}
-                  onTouchStart={() => onYearPress?.(lowerDecade)}
                 >
                   {lowerDecade}
                 </span>
                 <span>{"-"}</span>
                 <span
                   className="clickable"
                   onClick={() => onYearPress?.(upperDecade)}
-                  onTouchStart={() => onYearPress?.(upperDecade)}
                 >
                   {upperDecade}
                 </span>
@@ -72,15 +67,13 @@ const YearsHeader = ({
                 <span
                   className="clickable"
                   onClick={() => onYearPress?.(upperDecade)}
-                  onTouchStart={() => onYearPress?.(upperDecade)}
                 >
                   {upperDecade}
                 </span>
                 <span>{"-"}</span>
                 <span
                   className="clickable"
                   onClick={() => onYearPress?.(lowerDecade)}
-                  onTouchStart={() => onYearPress?.(lowerDecade)}
                 >
                   {lowerDecade}
                 </span>
@@ -94,9 +87,6 @@ const YearsHeader = ({
             onClick={() =>
               isJalaali ? onIncreaseDecade() : onDecreaseDecade()
             }
-            onTouchStart={() =>
-              isJalaali ? onIncreaseDecade() : onDecreaseDecade()
-            }
           >
             <Icon.DoubleChevronLeft hoverEffect />
           </div>

diff --git a/src/components/date/years/index.tsx b/src/components/date/years/index.tsx
@@ -33,12 +33,6 @@ const Years = () => {
                   onChangeMode?.("month");
                 }
               }}
-              onTouchStart={() => {
-                if (!isDisabled) {
-                  onYearchange({ ...state, year: item.id });
-                  onChangeMode?.("month");
-                }
-              }}
               className={classNames(
                 "year-item",
                 !isSelected && !isDisabled && "year-item-hovered",

diff --git a/src/components/dateInput/customWrapper.tsx b/src/components/dateInput/customWrapper.tsx
@@ -8,12 +8,7 @@ interface CustomWrapperProps {
 
 const CustomWrapper = ({ children, onOpen, inputRef }: CustomWrapperProps) => {
   return (
-    <div
-      ref={inputRef}
-      onClick={onOpen}
-      onTouchStart={onOpen}
-      className="custom-input-wrapper"
-    >
+    <div ref={inputRef} onClick={onOpen} className="custom-input-wrapper">
       {children}
     </div>
   );

diff --git a/src/components/dateInput/index.tsx b/src/components/dateInput/index.tsx
@@ -134,7 +134,6 @@ const InputDatePicker = forwardRef<HTMLInputElement, InputDatePickerProps>(
                 )}
                 style={wrapperStyle}
                 onClick={onOpen}
-                onTouchStart={onOpen}
                 onMouseEnter={() => value && setClearIconVisible(true)}
                 onMouseLeave={() => setClearIconVisible(false)}
               >

diff --git a/src/components/day/index.tsx b/src/components/day/index.tsx
@@ -61,10 +61,6 @@ const Day = ({
         if (isDisabled) return;
         onPress?.();
       }}
-      onTouchStart={() => {
-        if (isDisabled) return;
-        onPress?.();
-      }}
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
     >

diff --git a/src/components/footer/index.tsx b/src/components/footer/index.tsx
@@ -17,10 +17,6 @@ export const Footer = ({ footerRender, toggle }: FooterProps) => {
           goToToday();
           toggle?.();
         }}
-        onTouchStart={() => {
-          goToToday();
-          toggle?.();
-        }}
       >
         <span className="today-text clickable">{t("today")}</span>
       </div>

diff --git a/src/components/icon/index.tsx b/src/components/icon/index.tsx
@@ -15,7 +15,6 @@ const Forward = ({ size = 20, onClick }: IconProps) => {
     <div
       className={classNames("icon", "icon-forward")}
       onClick={onClick}
-      onTouchStart={() => onClick?.()}
       style={{ width: size, height: "100%", fontSize: size }}
     />
   );
@@ -26,7 +25,6 @@ const Calendar = ({ size = 20, onClick }: IconProps) => {
     <div
       className="icon icon-calendar"
       onClick={onClick}
-      onTouchStart={() => onClick?.()}
       style={{ width: size, height: "100%", fontSize: size }}
     />
   );
@@ -38,7 +36,6 @@ const CalendarToday = ({ size = 20, onClick }: IconProps) => {
       className="icon icon-calendar-today"
       style={{ width: size, height: "100%", fontSize: size }}
       onClick={onClick}
-      onTouchStart={() => onClick?.()}
     />
   );
 };
@@ -53,7 +50,6 @@ const ChevronLeft = ({ size = 20, onClick, hoverEffect }: IconProps) => {
       )}
       style={{ width: size + 4, height: size + 4, fontSize: size }}
       onClick={onClick}
-      onTouchStart={() => onClick?.()}
     />
   );
 };
@@ -68,7 +64,6 @@ const ChevronRight = ({ size = 20, onClick, hoverEffect }: IconProps) => {
       )}
       style={{ width: size + 4, height: size + 4, fontSize: size }}
       onClick={onClick}
-      onTouchStart={() => onClick?.()}
     />
   );
 };
@@ -83,7 +78,6 @@ const Chevron = ({ size = 20, onClick, isJalaali, hoverEffect }: IconProps) => {
       )}
       style={{ width: size + 4, height: size + 4, fontSize: size }}
       onClick={onClick}
-      onTouchStart={() => onClick?.()}
     />
   );
 };
@@ -94,7 +88,6 @@ const Clear = ({ size = 20, onClick }: IconProps) => {
       className="icon icon-highlight_off"
       style={{ width: size, height: "100%", fontSize: size }}
       onClick={onClick}
-      onTouchStart={() => onClick?.()}
     />
   );
 };
@@ -109,7 +102,6 @@ const DoubleChevronLeft = ({ size = 20, onClick, hoverEffect }: IconProps) => {
       )}
       style={{ width: size + 4, height: size + 4, fontSize: size }}
       onClick={onClick}
-      onTouchStart={() => onClick?.()}
     />
   );
 };
@@ -124,7 +116,6 @@ const DoubleChevronRight = ({ size = 20, onClick, hoverEffect }: IconProps) => {
       )}
       style={{ width: size + 4, height: size + 4, fontSize: size }}
       onClick={onClick}
-      onTouchStart={() => onClick?.()}
     />
   );
 };
@@ -146,7 +137,6 @@ const DoubleChevron = ({
       )}
       style={{ width: size + 4, height: size + 4, fontSize: size }}
       onClick={onClick}
-      onTouchStart={() => onClick?.()}
     />
   );
 };
@@ -157,7 +147,6 @@ const Back = ({ size = 20, onClick }: IconProps) => {
       className="icon icon-arrow_back"
       style={{ width: size, height: "100%", fontSize: size }}
       onClick={onClick}
-      onTouchStart={() => onClick?.()}
     />
   );
 };
@@ -171,7 +160,6 @@ const Dropdown = ({ size = 20, onClick, hoverEffect }: IconProps) => {
       )}
       style={{ width: size + 4, height: size + 4, fontSize: size }}
       onClick={onClick}
-      onTouchStart={() => onClick?.()}
     />
   );
 };
@@ -185,7 +173,6 @@ const Error = ({ size = 20, onClick, hoverEffect }: IconProps) => {
       )}
       style={{ width: size, height: "100%", fontSize: size }}
       onClick={onClick}
-      onTouchStart={() => onClick?.()}
     />
   );
 };

diff --git a/src/components/range/rangeDays/components/dateLabel.tsx b/src/components/range/rangeDays/components/dateLabel.tsx
@@ -24,10 +24,10 @@ export const DateLabel = ({
   if (shouldResponsive) {
     return (
       <div className="stretch">
-        <div onClick={onDecreaseMonth} onTouchStart={onDecreaseMonth}>
+        <div onClick={onDecreaseMonth}>
           <Icon.Chevron isJalaali={isJalaali} hoverEffect />
         </div>
-        <div onClick={onIncreaseMonth} onTouchStart={onIncreaseMonth}>
+        <div onClick={onIncreaseMonth}>
           <Icon.Chevron isJalaali={!isJalaali} hoverEffect />
         </div>
       </div>
@@ -39,14 +39,12 @@ export const DateLabel = ({
       <div
         className="panel-date-holder-item clickable"
         onClick={onSelectMonthPicker}
-        onTouchStart={onSelectMonthPicker}
       >
         <span className="panel-header-item-text">{monthLabel}</span>
       </div>
       <div
         className="panel-date-holder-item clickable"
         onClick={onSelectYearPicker}
-        onTouchStart={onSelectYearPicker}
       >
         <span className="panel-header-item-text">{yearLabel}</span>
       </div>

diff --git a/src/components/range/rangeDays/components/fromNavigator.tsx b/src/components/range/rangeDays/components/fromNavigator.tsx
@@ -31,7 +31,6 @@ export const FromNavigator = ({
         <div
           className="panel-date-holder-item clickable"
           onClick={onSelectYearPicker}
-          onTouchStart={onSelectYearPicker}
         >
           <span className="range-panel-header-item-text">{yearLabel}</span>
         </div>
@@ -44,18 +43,10 @@ export const FromNavigator = ({
 
   return (
     <div className="center">
-      <div
-        className="iconItem"
-        onClick={onDecreaseYear}
-        onTouchStart={onDecreaseYear}
-      >
+      <div className="iconItem" onClick={onDecreaseYear}>
         <Icon.DoubleChevron isJalaali={isJalaali} hoverEffect />
       </div>
-      <div
-        className="iconItem"
-        onClick={onDecreaseMonth}
-        onTouchStart={onDecreaseMonth}
-      >
+      <div className="iconItem" onClick={onDecreaseMonth}>
         <Icon.Chevron isJalaali={isJalaali} hoverEffect />
       </div>
     </div>

diff --git a/src/components/range/rangeDays/components/toNavigator.tsx b/src/components/range/rangeDays/components/toNavigator.tsx
@@ -21,10 +21,10 @@ export const ToNavigator = ({
 
   return (
     <div className="center">
-      <div onClick={onIncreaseMonth} onTouchStart={onIncreaseMonth}>
+      <div onClick={onIncreaseMonth}>
         <Icon.Chevron isJalaali={!isJalaali} hoverEffect />
       </div>
-      <div onClick={onIncreaseYear} onTouchStart={onIncreaseYear}>
+      <div onClick={onIncreaseYear}>
         <Icon.DoubleChevron isJalaali={!isJalaali} hoverEffect />
       </div>
     </div>

diff --git a/src/components/range/rangeMonths/header.tsx b/src/components/range/rangeMonths/header.tsx
@@ -28,7 +28,6 @@ const MonthsHeader = ({}: HeaderProps) => {
               <span
                 className="clickable"
                 onClick={() => onChangeMode?.("year")}
-                onTouchStart={() => onChangeMode?.("year")}
               >
                 {year}
               </span>
-Original file line number
+Diff line change
@@ Expand Up / @@ -28,7 +28,6 @@ const MonthsHeader = ({}: HeaderProps) => { @@
                   <span
                     className="clickable"
                     onClick={() => onChangeMode?.("year")}
-                    onTouchStart={() => onChangeMode?.("year")}
                   >
                     {year}
                   </span>
@@ Expand Down @@