Skip to content

Commit

Permalink
feat: Allow dynamic value change for date picker #1154 (#2091)
Browse files Browse the repository at this point in the history
  • Loading branch information
marek-mihok committed Jan 15, 2024
1 parent 5db0507 commit 3562bf4
Show file tree
Hide file tree
Showing 2 changed files with 25 additions and 2 deletions.
19 changes: 19 additions & 0 deletions ui/src/date_picker.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,25 @@ describe('Datepicker.tsx', () => {
expect(wave.args[name]).toBeTruthy()
})

it('Set args when value is updated to different value', () => {
const { rerender } = render(<XDatePicker model={{ name, value: '1999-12-30' }} />)
expect(wave.args[name]).toBe('1999-12-30')
rerender(<XDatePicker model={{ name, value: '1999-12-31' }} />)
expect(wave.args[name]).toBe('1999-12-31')
})

it('Set args when value is updated to intial value', () => {
const { getAllByRole, getAllByText, rerender } = render(<XDatePicker model={{ name, value: '1999-12-30' }} />)
expect(wave.args[name]).toBe('1999-12-30')

fireEvent.click(getAllByRole('combobox')[0])
fireEvent.click(getAllByText('1')[0])
expect(wave.args[name]).not.toBe('1999-12-30')

rerender(<XDatePicker model={{ name, value: '1999-12-30' }} />)
expect(wave.args[name]).toBe('1999-12-30')
})

it('Calls sync when trigger specified', () => {
const pushMock = jest.fn()
const { getAllByRole, getAllByText } = render(<XDatePicker model={{ ...datepickerProps, trigger: true }} />)
Expand Down
8 changes: 6 additions & 2 deletions ui/src/date_picker.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -70,11 +70,15 @@ export const
const val = (d === null || d === undefined) ? defaultVal : formatDate(d)
wave.args[m.name] = val
setValue(val ? new Date(`${val}T00:00:00`) : undefined)
m.value = val || undefined
if (m.trigger) wave.push()
}

// eslint-disable-next-line react-hooks/exhaustive-deps
React.useEffect(() => { wave.args[m.name] = defaultVal }, [])
React.useEffect(() => {
wave.args[m.name] = defaultVal
setValue(parsedVal ? new Date(parsedVal) : undefined)
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [m.value])

return (
<Fluent.DatePicker
Expand Down

0 comments on commit 3562bf4

Please sign in to comment.