feat: added onCancel click event and minor improvements

src/components/WheelPicker/index.styles.ts

@@ -42,6 +42,8 @@ export const StyledTitle = styled.div`
   color: #1672ec;
   font-weight: bold;
   font-size: 1.1em;
+  cursor: default;
+  user-select: none;
 `;
 StyledTitle.displayName = 'PersianTools(WheelPicker)(Title)';
 

src/components/WheelPicker/index.tsx

@@ -20,6 +20,7 @@ import {
   pickerData,
   getDayOfYear,
   convertDateObjectToDateInstance,
+  getCurrentYear,
 } from '../../helpers/date';
 // Events
 import { solarEvents } from '../../events/solar';
@@ -304,8 +305,8 @@ export const WheelPicker: FC<WheelPickerProps> = (props) => {
 
 WheelPicker.displayName = 'PersianTools(WheelPicker)';
 WheelPicker.defaultProps = {
-  startYear: 30, // past 30 years
-  endYear: 30, // next 30 years
+  startYear: getCurrentYear() - 30, // since 30 years ago
+  endYear: getCurrentYear() + 30, // up to next 30 years
   addDayName: false,
   classNamePrefix: 'persian-datepicker',
 };

src/components/WheelPicker/index.types.ts

@@ -1,4 +1,4 @@
-import { CSSProperties } from 'react';
+import { CSSProperties, ReactNode } from 'react';
 
 export type EventTypes = 'solar' | 'persian';
 export interface Event {
@@ -19,7 +19,7 @@ export interface WheelPickerProps {
   // Current picker value
   value?: WheelPickerSelectEvent;
   // WheelPicker title
-  title?: string;
+  title?: ReactNode;
   /**
    * Gets called when value of the picker changes
    */
@@ -43,16 +43,16 @@ export interface WheelPickerProps {
   /**
    * The Minimum selectable year
    *
-   * @description Picker will calculate the StartYear by this approach: currentYear + startYear
-   * @default 30
+   * @description Picker will calculate the StartYear by this approach: currentYear + endYear
+   * @default currentYear + 30 next year
    * @type {number}
    */
   endYear?: number;
   /**
    * The Maximum selectable year
    *
-   * @description Picker will calculate the StartYear by this approach: currentYear + startYear
-   * @default 30
+   * @description Picker will calculate the StartYear by this approach: currentYear - startYear
+   * @default currentYear - 30 years ago
    * @type {number}
    */
   startYear?: number;

src/helpers/date.ts

@@ -233,19 +233,6 @@ export function currentDateObject(): CurrentDateObject {
   };
 }
 
-/**
- * Generate a Range of Years to show into the Date Picker
- *
- * @private
- */
-function generateYearsRange(min: number, max: number): Array<number> {
-  const currentYear = getCurrentYear();
-  const minRange = currentYear - min;
-  const maxRange = currentYear + max;
-
-  return generateArrayInRangeOfNumbers(minRange, maxRange);
-}
-
 /**
  * Check if the entered year is Leap
  *
@@ -289,7 +276,6 @@ export function endYear(year: number) {
       `[PersianMobileDatePicker] Invalid Year, Usage: endYearTo(1410), means Year picker's column should end in 1410`,
     );
   }
-
   return toPositive(currentYear - year);
 }
 
@@ -301,7 +287,7 @@ export function endYear(year: number) {
 export const pickerData: Record<string, (inp?: any) => Array<PickerItemModel>> =
   {
     getYears: ({ min, max } = {}) =>
-      generateYearsRange(min, max).map((year) => ({
+      generateArrayInRangeOfNumbers(min, max).map((year) => ({
         value: year,
         type: 'year',
       })),

src/index.styles.ts

@@ -17,14 +17,12 @@ export const StyledFooter = styled.div`
 `;
 StyledFooter.displayName = 'PersianTools(Picker)(Footer)';
 
-export const StyledSubmitButton = styled.button`
-  width: 140px;
+const StyledButton = styled.button`
   height: 45px;
   color: #c5dcfa;
   background: #1672ec;
   border-radius: 8px;
   border: none;
-  display: inline-block;
   text-align: center;
   vertical-align: middle;
   user-select: none;
@@ -35,9 +33,15 @@ export const StyledSubmitButton = styled.button`
   margin-right: 15px;
   margin-left: 15px;
 `;
+export const StyledSubmitButton = styled(StyledButton)<{ fullWidth: boolean }>`
+  width: ${(props) => (props.fullWidth ? '100%' : '140px')};
+  display: ${(props) => (props.fullWidth ? 'block' : 'inline-block')};
+`;
 StyledSubmitButton.displayName = 'PersianTools(Picker)(SubmitButton)';
 
-export const StyledCancelButton = styled(StyledSubmitButton)`
+export const StyledCancelButton = styled(StyledButton)`
+  width: 140px;
+  display: inline-block;
   color: #616161;
   background-color: transparent;
   border: 1px solid #c0c0c0;

src/index.tsx

@@ -57,6 +57,11 @@ const Picker: React.FC<PickerProps> = (props) => {
     setIsOpen(props.isOpen);
   }, [props.isOpen]);
 
+  function handleCancel() {
+    props.onCancel?.();
+    handleClose();
+  }
+
   function handleClose() {
     setIsOpen(false);
     props.onClose?.();
@@ -68,21 +73,21 @@ const Picker: React.FC<PickerProps> = (props) => {
   }
 
   function handleSubmit() {
-    handleClose();
     props.onSubmit(selectedDate!);
+    handleClose();
   }
 
   return (
     <StyledSheet
       isOpen={isOpen}
-      onClose={() => handleClose()}
+      onClose={() => handleCancel()}
       snapPoints={[props.height! + (props.title ? 55 : 0)]}
       initialSnap={0}
       style={props.sheetStyles!}
       theme={theme}
     >
       <Sheet.Container>
-        <Sheet.Header />
+        <Sheet.Header disableDrag={props.disableSheetHeaderDrag} />
         <Sheet.Content disableDrag={props.disableSheetDrag}>
           <WheelPicker
             title={props.title}
@@ -104,12 +109,13 @@ const Picker: React.FC<PickerProps> = (props) => {
             {props.showCancelButton && (
               <StyledCancelButton
                 className="sheet-footer__cancel"
-                onClick={handleClose}
+                onClick={handleCancel}
               >
                 {props.cancelText}
               </StyledCancelButton>
             )}
             <StyledSubmitButton
+              fullWidth={!props.showCancelButton}
               className="sheet-footer__submit"
               onClick={handleSubmit}
             >
@@ -132,6 +138,7 @@ Picker.defaultProps = {
   cancelText: 'انصراف',
   showCancelButton: true,
   disableSheetDrag: true,
+  disableSheetHeaderDrag: true,
   addDayName: false,
   height: 385,
   sheetStyles: {},

src/index.types.ts

@@ -12,20 +12,22 @@ export interface PickerProps extends WheelPickerProps {
   classNamePrefix?: string;
   // Picker open status
   isOpen: boolean;
-  // Call when Picker Sheet modal has closed
+  // Call when Picker Sheet modal has closed or User clicked on Cancel Button or User manually closed the Sheet modal by drag and drop
   onClose?: () => void;
+  // Call when user clicked on Cancel Button
+  onCancel?: () => void;
   // Submit button text
   submitText?: string;
   // Cancel button text
   cancelText?: string;
   // Triggered when you click OK
   onSubmit: (selected: WheelPickerSelectEvent) => void;
-  // Triggered when click Cancel,
-  onCancel?: () => void;
   // Display Cancel button
   showCancelButton?: boolean;
-  // Disable drag for the whole sheet.
+  // Disable drag for the sheet content.
   disableSheetDrag?: boolean;
+  // Disable drag for the sheet header.
+  disableSheetHeaderDrag?: boolean;
   /**
    * Height of Picker Sheet modal
    *