Skip to content

Commit 5f90043

Browse files
shivani170shivani170
committed
code refactoring
1 parent 0caffbc commit 5f90043

File tree

6 files changed

+126
-37
lines changed

6 files changed

+126
-37
lines changed

‎src/Shared/Components/DatePicker/DateTimePicker.tsx

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ import {
2828
updateTime,
2929
} from './utils'
3030
import { DateTimePickerProps } from './types'
31-
import { customDayStyles } from './constants'
31+
import { DATE_PICKER_IDS, DATE_PICKER_PLACEHOLDER, customDayStyles } from './constants'
3232
import './datePicker.scss'
3333
import { ReactComponent as CalendarIcon } from '../../../Assets/Icon/ic-calendar.svg'
3434
import { DATE_TIME_FORMATS } from '../../../Common'
@@ -47,6 +47,8 @@ const DateTimePicker = ({
4747
readOnly = false,
4848
isOutsideRangeEnabled = false,
4949
startDate,
50+
dataTestIdForTime = DATE_PICKER_IDS.TIME,
51+
dataTestidForDate = DATE_PICKER_IDS.DATE,
5052
}: DateTimePickerProps) => {
5153
const time = getTimeValue(dateObject)
5254
const selectedTimeOption = DEFAULT_TIME_OPTIONS.find((option) => option.value === time) ?? DEFAULT_TIME_OPTIONS[0]
@@ -88,13 +90,15 @@ const DateTimePicker = ({
8890
inputIconPosition="after"
8991
displayFormat={DATE_TIME_FORMATS.DD_MMM_YYYY}
9092
isOutsideRange={isOutsideRangeEnabled ? isOutsideRange : undefined}
93+
data-testid={dataTestidForDate}
9194
/>
9295
{!hideTimeSelect && (
9396
<div className="dc__no-shrink">
9497
<ReactSelect
95-
placeholder="12:00 AM"
98+
placeholder={DATE_PICKER_PLACEHOLDER.DEFAULT_TIME}
9699
options={DEFAULT_TIME_OPTIONS}
97100
menuPlacement="auto"
101+
menuPosition="fixed"
98102
components={{
99103
IndicatorSeparator: null,
100104
ClearIndicator: null,
@@ -106,6 +110,7 @@ const DateTimePicker = ({
106110
{...timePickerProps}
107111
value={selectedTimeOption}
108112
onChange={handleTimeChange}
113+
data-testid={dataTestIdForTime}
109114
/>
110115
</div>
111116
)}

‎src/Shared/Components/DatePicker/MonthlySelect.tsx

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,22 @@
1515
*/
1616

1717
import ReactSelect from 'react-select'
18-
import { DateSelectProps } from './types'
1918
import { MONTHLY_DATE_OPTIONS, getTimePickerStyles } from './utils'
2019
import { DropdownIndicator } from '../../../Common'
20+
import { MonthlySelectProps } from './types'
21+
import { DATE_PICKER_IDS } from './constants'
2122

22-
export const MonthlySelect = ({ selectedDate, handleOnChange }: DateSelectProps) => (
23+
const timePickerStyles = getTimePickerStyles()
24+
25+
export const MonthlySelect = ({
26+
selectedMonthlyDate,
27+
onChange,
28+
dataTestId = DATE_PICKER_IDS.MONTH,
29+
}: MonthlySelectProps) => (
2330
<div className="dc__no-shrink">
31+
{console.log('MonthlySelect.tsx')}
2432
<ReactSelect
25-
placeholder="12:00 AM"
33+
placeholder="Day 1"
2634
options={MONTHLY_DATE_OPTIONS}
2735
menuPlacement="auto"
2836
components={{
@@ -31,9 +39,11 @@ export const MonthlySelect = ({ selectedDate, handleOnChange }: DateSelectProps)
3139
DropdownIndicator,
3240
}}
3341
isSearchable={false}
34-
styles={getTimePickerStyles()}
35-
value={selectedDate}
36-
onChange={handleOnChange}
42+
styles={timePickerStyles}
43+
value={selectedMonthlyDate}
44+
onChange={onChange}
45+
data-testid={dataTestId}
46+
menuPosition="fixed"
3747
/>
3848
</div>
3949
)

‎src/Shared/Components/DatePicker/SingleDatePickerComponent.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ const SingleDatePickerComponent = ({
4141
readOnly,
4242
isTodayBlocked,
4343
displayFormat,
44+
dataTestId,
4445
}: SingleDatePickerProps) => {
4546
const [focused, setFocused] = useState(false)
4647

@@ -69,6 +70,7 @@ const SingleDatePickerComponent = ({
6970
customInputIcon={<CalenderIcon />}
7071
inputIconPosition="after"
7172
displayFormat={displayFormat}
73+
data-testid={dataTestId}
7274
/>
7375
)
7476
}

‎src/Shared/Components/DatePicker/TimeSelect.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,10 @@
1616

1717
import ReactSelect from 'react-select'
1818
import { useState } from 'react'
19-
import { DEFAULT_TIME_OPTIONS, DropdownIndicatorTimePicker, getTimePickerStyles, updateTime } from './utils'
19+
import { DEFAULT_TIME_OPTIONS, DropdownIndicatorTimePicker, updateTime } from './utils'
2020
import { TimeSelectProps } from './types'
2121
import { ReactComponent as ErrorIcon } from '../../../Assets/Icon/ic-warning.svg'
22+
import { DATE_PICKER_IDS, reactSelectStyles } from './constants'
2223

2324
export const TimePickerSelect = ({
2425
disabled = false,
@@ -27,6 +28,7 @@ export const TimePickerSelect = ({
2728
timePickerProps,
2829
error,
2930
default12HourTime,
31+
dataTestIdForTime = DATE_PICKER_IDS.TIME,
3032
}: TimeSelectProps) => {
3133
const [selectedTimeOption, setSelectedTimeOption] = useState(default12HourTime)
3234

@@ -41,17 +43,19 @@ export const TimePickerSelect = ({
4143
placeholder="12:00 AM"
4244
options={DEFAULT_TIME_OPTIONS}
4345
menuPlacement="auto"
46+
menuPosition="fixed"
4447
components={{
4548
IndicatorSeparator: null,
4649
ClearIndicator: null,
4750
DropdownIndicator: DropdownIndicatorTimePicker,
4851
}}
4952
isSearchable={false}
50-
styles={getTimePickerStyles()}
53+
styles={reactSelectStyles}
5154
isDisabled={disabled}
5255
{...timePickerProps}
5356
value={selectedTimeOption}
5457
onChange={handleTimeChange}
58+
data-testid={dataTestIdForTime}
5559
/>
5660
</div>
5761
{error && (

‎src/Shared/Components/DatePicker/constants.ts

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -131,3 +131,76 @@ export const TIME_OPTIONS_CONFIG = {
131131
'11:00 PM': '23:00:00',
132132
'11:30 PM': '23:30:00',
133133
}
134+
135+
export const DATE_PICKER_PLACEHOLDER = {
136+
DATE: 'Select date',
137+
TIME: 'Select time',
138+
MONTH: 'Select month',
139+
DEFAULT_TIME: '12:00 AM',
140+
DEFAULT_MONTHLY_DATE: 'Day 1',
141+
}
142+
143+
export const DATE_PICKER_IDS = {
144+
DATE: 'date_picker',
145+
MONTH: 'month_picker',
146+
TIME: 'time_picker',
147+
}
148+
149+
export const reactSelectStyles = {
150+
container: (base) => ({
151+
...base,
152+
height: '36px',
153+
}),
154+
control: (base, state) => ({
155+
...base,
156+
boxShadow: 'none',
157+
minHeight: '36px',
158+
cursor: 'pointer',
159+
borderColor: 'var(--N200)',
160+
backgroundColor: 'var(--N50)',
161+
162+
...(state.isDisabled
163+
? {
164+
borderColor: 'var(--N200)',
165+
backgroundColor: 'var(--N100)',
166+
cursor: 'not-allowed',
167+
}
168+
: {}),
169+
170+
'&:hover': {
171+
borderColor: 'var(--N400)',
172+
},
173+
'&:focus, &:focus-within': {
174+
borderColor: 'var(--B500)',
175+
outline: 'none',
176+
},
177+
}),
178+
valueContainer: (base) => ({
179+
...base,
180+
padding: 0,
181+
width: '180px',
182+
}),
183+
input: (base) => ({
184+
...base,
185+
padding: 0,
186+
margin: 0,
187+
}),
188+
dropdownIndicator: (base, state) => ({
189+
...base,
190+
transition: 'all .2s ease',
191+
transform: state.selectProps.menuIsOpen ? 'rotate(180deg)' : 'rotate(0deg)',
192+
padding: 0,
193+
}),
194+
option: (base) => ({
195+
...base,
196+
fontSize: '13px',
197+
cursor: 'pointer',
198+
}),
199+
menuList: (base) => ({
200+
...base,
201+
position: 'relative',
202+
paddingBottom: '0px',
203+
maxHeight: '250px',
204+
width: '200px',
205+
}),
206+
}

‎src/Shared/Components/DatePicker/types.ts

Lines changed: 22 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -43,19 +43,23 @@ export interface SingleDatePickerProps {
4343
* Display format for the date
4444
*/
4545
displayFormat?: string
46+
/**
47+
* Data test id for date picker
48+
*/
49+
dataTestId?: string
4650
}
4751

48-
export interface DateSelectProps {
52+
export interface MonthlySelectProps extends Pick<SingleDatePickerProps, 'dataTestId'> {
4953
/**
5054
* Current selected date object
5155
*
5256
* @default 'new Date()'
5357
*/
54-
selectedDate: OptionType
58+
selectedMonthlyDate: OptionType
5559
/**
56-
* Handler for updating the date from the parent component
60+
* Onchange handle picker type
5761
*/
58-
handleOnChange: (date: OptionType) => void
62+
onChange?: (event) => void
5963
}
6064

6165
export interface TimeSelectProps {
@@ -85,35 +89,21 @@ export interface TimeSelectProps {
8589
* Id for the component
8690
*/
8791
default12HourTime: OptionType
88-
}
89-
90-
export interface DateTimePickerProps {
9192
/**
92-
* Current selected date object
93-
*
94-
* @default 'new Date()'
93+
* Data test id for time picker
9594
*/
96-
date?: Date
97-
/**
98-
* Handler for updating the date from the parent component
99-
*/
100-
onChange: (date: Date) => void
95+
dataTestIdForTime?: string
96+
}
97+
98+
export interface DateTimePickerProps
99+
extends Pick<
100+
TimeSelectProps,
101+
'date' | 'onChange' | 'timePickerProps' | 'error' | 'disabled' | 'dataTestIdForTime'
102+
> {
101103
/**
102104
* Props for the date picker
103105
*/
104106
datePickerProps?: any
105-
/**
106-
* Props for the time picker
107-
*/
108-
timePickerProps?: SelectInstance
109-
/**
110-
* Error message for the DateTime picker component
111-
*/
112-
error?: string
113-
/**
114-
* If true, both the date and time picker are disabled
115-
*/
116-
disabled?: boolean
117107
/**
118108
* Id for the component
119109
*/
@@ -146,4 +136,9 @@ export interface DateTimePickerProps {
146136
* Start date for the date picker
147137
*/
148138
startDate?: Date
139+
140+
/**
141+
* Data test id for date picker
142+
*/
143+
dataTestidForDate?: string
149144
}

0 commit comments

Comments
 (0)