@@ -2,6 +2,7 @@ import React, {
22 MutableRefObject ,
33 forwardRef ,
44 useCallback ,
5+ useEffect ,
56 useImperativeHandle ,
67 useRef ,
78 useState ,
@@ -121,6 +122,23 @@ const TimerPickerModal = forwardRef<TimerPickerModalRef, TimerPickerModalProps>(
121122 seconds : initialSeconds ,
122123 } ) ;
123124
125+ const reset = ( options ?: { animated ?: boolean } ) => {
126+ const initialDuration = {
127+ hours : initialHours ,
128+ minutes : initialMinutes ,
129+ seconds : initialSeconds ,
130+ } ;
131+ setSelectedDuration ( initialDuration ) ;
132+ setConfirmedDuration ( initialDuration ) ;
133+ timerPickerRef . current ?. reset ( options ) ;
134+ } ;
135+
136+ // reset state if the initial times change
137+ useEffect ( ( ) => {
138+ reset ( ) ;
139+ // eslint-disable-next-line react-hooks/exhaustive-deps
140+ } , [ initialHours , initialMinutes , initialSeconds ] ) ;
141+
124142 const hideModalHandler = ( ) => {
125143 setSelectedDuration ( {
126144 hours : confirmedDuration . hours ,
@@ -161,16 +179,7 @@ const TimerPickerModal = forwardRef<TimerPickerModalRef, TimerPickerModalProps>(
161179 ) ;
162180
163181 useImperativeHandle ( ref , ( ) => ( {
164- reset : ( options ) => {
165- const initialDuration = {
166- hours : initialHours ,
167- minutes : initialMinutes ,
168- seconds : initialSeconds ,
169- } ;
170- setSelectedDuration ( initialDuration ) ;
171- setConfirmedDuration ( initialDuration ) ;
172- timerPickerRef . current ?. reset ( options ) ;
173- } ,
182+ reset,
174183 setValue : ( value , options ) => {
175184 setSelectedDuration ( value ) ;
176185 setConfirmedDuration ( value ) ;
0 commit comments