Merge pull request #9 from Toprent-app/feature/add-props-for-close-button

Feature/add props for close button

Author: MrsLecter

packages/styled/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@power-rent/react-datepicker-modern",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "A React datepicker build with styled-components.",
   "keywords": [
     "datepicker",

packages/styled/src/components/Close/Close.tsx

@@ -83,16 +83,18 @@ function Close({onClick, rtl, closeText}: CloseProps) {
       aria-label="Close"
     >
       <CloseIcon width="15px" height="16px" color="#ADADAD" />
-      <Text
-        m={theme.closeMargin}
-        // @ts-ignore
-        color={theme.closeColor}
-        fontSize={theme.closeFontSize}
-        fontFamily={theme.fontFamily}
-        fontWeight={theme.closeFontWeight}
-      >
-        {closeText}
-      </Text>
+      {closeText && (
+        <Text
+          m={theme.closeMargin}
+          // @ts-ignore
+          color={theme.closeColor}
+          fontSize={theme.closeFontSize}
+          fontFamily={theme.fontFamily}
+          fontWeight={theme.closeFontWeight}
+        >
+          {closeText}
+        </Text>
+      )}
     </Wrapper>
   )
 }

packages/styled/src/components/DateRangeInputModern/DateRangeInputModern.stories.tsx

@@ -53,6 +53,8 @@ interface AppProps {
   onDayRender?(date: Date): React.ReactNode
   unavailableDates?: Date[]
   initialVisibleMonth?: Date
+  datepickerCloseWrapperRightCustom?: string | null
+  datepickerPaddingCustom?: string | null
 }
 
 function App({
@@ -76,6 +78,8 @@ function App({
   monthLabelFormat = monthLabelFormatFn,
   onDayRender = undefined,
   unavailableDates = [],
+  datepickerCloseWrapperRightCustom = null,
+  datepickerPaddingCustom = null,
 }: AppProps) {
   const [state, dispatch] = useReducer(reducer, initialState)
 
@@ -111,6 +115,8 @@ function App({
       onDayRender={onDayRender}
       unavailableDates={unavailableDates}
       initialVisibleMonth={initialVisibleMonth}
+      datepickerCloseWrapperRightCustom={datepickerCloseWrapperRightCustom}
+      datepickerPaddingCustom={datepickerPaddingCustom}
     />
   )
 }
@@ -124,5 +130,7 @@ storiesOf('DateRangeInputModern', module).add('Simple demo', () => (
     showClose={boolean('showClose', true)}
     showSelectedDates={boolean('showSelectedDates', true)}
     displayFormat={text('displayFormat', 'MM/dd/yyyy')}
+    datepickerCloseWrapperRightCustom={text('datepickerCloseWrapperRightCustom', '10px')}
+    datepickerPaddingCustom={text('datepickerPaddingCustom', '10px')}
   />
 ))

packages/styled/src/components/DateRangeInputModern/DateRangeInputModern.tsx

@@ -115,6 +115,8 @@ export interface DateRangeInputModernProps extends UseDatepickerProps {
   datepickerLeftCustom?: string
   datepickerTopCustom?: string
   datepickerZIndexCustom?: number | null
+  datepickerPaddingCustom?: string | null
+  datepickerCloseWrapperRightCustom?: string | null
 }
 
 function DateRangeInputModern({
@@ -157,7 +159,8 @@ function DateRangeInputModern({
   datepickerHeightCustom,
   datepickerLeftCustom,
   datepickerTopCustom,
-  datepickerZIndexCustom,
+  datepickerPaddingCustom,
+  datepickerCloseWrapperRightCustom,
 }: DateRangeInputModernProps) {
   const ref = useRef(null)
   const datepickerWrapperRef = useRef<HTMLDivElement>(null)
@@ -306,7 +309,8 @@ function DateRangeInputModern({
               datepickerBorderRadius={datepickerBorderRadiusCustom}
               datepickerWidth={datepickerWidthCustom}
               datepickerHeight={datepickerHeightCustom}
-              datepickerZIndex={datepickerZIndexCustom}
+              datepickerPadding={datepickerPaddingCustom}
+              datepickerCloseWrapperRight={datepickerCloseWrapperRightCustom}
             />
           )}
         </Box>

packages/styled/src/components/Datepicker/Datepicker.stories.tsx

@@ -41,6 +41,8 @@ interface AppProps {
   onDayRender?(date: Date): React.ReactNode
   unavailableDates?: Date[]
   initialVisibleMonth?: Date
+  datepickerPadding?: string | null
+  datepickerCloseWrapperRight?: string | null
 }
 
 function App({
@@ -64,6 +66,8 @@ function App({
   monthLabelFormat = monthLabelFormatFn,
   onDayRender = undefined,
   unavailableDates = [],
+  datepickerPadding = null,
+  datepickerCloseWrapperRight = null,
 }: AppProps) {
   const [state, setState] = useState<OnDatesChangeProps>({
     startDate: null,
@@ -107,6 +111,8 @@ function App({
       onDayRender={onDayRender}
       unavailableDates={unavailableDates}
       initialVisibleMonth={initialVisibleMonth}
+      datepickerPadding={datepickerPadding}
+      datepickerCloseWrapperRight={datepickerCloseWrapperRight}
     />
   )
 }
@@ -121,6 +127,8 @@ storiesOf('Datepicker', module)
       showClose={boolean('showClose', true)}
       showSelectedDates={boolean('showSelectedDates', true)}
       displayFormat={text('displayFormat', 'MM/dd/yyyy')}
+      datepickerPadding={text('datepickerPadding', '10px')}
+      datepickerCloseWrapperRight={text('datepickerCloseWrapperRight', '10px')}
     />
   ))
   .add('Initial visible month', () => (

packages/styled/src/components/Datepicker/Datepicker.tsx

@@ -153,7 +153,8 @@ export interface DatepickerProps extends UseDatepickerProps {
   datepickerHeight?: string
   datepickerLeft?: string
   datepickerTop?: string
-  datepickerZIndex?: number | null
+  datepickerPadding?: string | null
+  datepickerCloseWrapperRight?: string | null
 }
 
 function Datepicker(
@@ -189,7 +190,8 @@ function Datepicker(
     datepickerHeight = 'unset',
     datepickerLeft = '0px',
     datepickerTop = '0px',
-    datepickerZIndex = null,
+    datepickerPadding = null,
+    datepickerCloseWrapperRight = null,
   }: DatepickerProps,
   ref?: React.Ref<unknown>,
 ) {
@@ -311,13 +313,13 @@ function Datepicker(
       >
         <StyledDatepicker
           background={theme.datepickerBackground}
-          p={theme.datepickerPadding}
+          p={datepickerPadding || theme.datepickerPadding}
           borderRadius={datepickerBorderRadius || theme.datepickerBorderRadius}
           position={theme.datepickerPosition}
           boxShadow={theme.datepickerBoxShadow}
           width={theme.datepickerWidth}
           height={datepickerHeight}
-          zIndex={datepickerZIndex || theme.datepickerZIndex}
+          zIndex={theme.datepickerZIndex}
           rtl={rtl}
           left={datepickerLeft}
           top={datepickerTop}
@@ -328,7 +330,7 @@ function Datepicker(
               display={theme.datepickerCloseWrapperDisplay}
               justifyContent={theme.datepickerCloseWrapperJustifyContent}
               position={theme.datepickerCloseWrapperPosition}
-              right={theme.datepickerCloseWrapperRight}
+              right={datepickerCloseWrapperRight || theme.datepickerCloseWrapperRight}
               top={theme.datepickerCloseWrapperTop}
               left={theme.datepickerCloseWrapperLeft}
               bottom={theme.datepickerCloseWrapperBottom}