Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: calendar picker view scroll #6521

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
+4,223 −4
Open

feat: calendar picker view scroll #6521

Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
477b31b
feat: add calendar scrollTo
Yueyanc Jan 11, 2024
f293aee
feat: add calendar-picker-view scrollTo
Yueyanc Jan 11, 2024
47ca7a4
Merge branch 'ant-design:master' into feat/calendar-picker-view-scroll
Yueyanc Jan 13, 2024
45cd1d1
feat: add calendar scrollTo
Yueyanc Jan 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 18 additions & 2 deletions src/components/calendar-picker-view/calendar-picker-view.tsx
View file
Original file line number Diff line number Diff line change
@@ -3,6 +3,7 @@ import React, {
useState,
useImperativeHandle,
useMemo,
useRef,
} from 'react'
import type { ReactNode } from 'react'
import { NativeProps, withNativeProps } from '../../utils/native-props'
@@ -28,6 +29,7 @@ const classPrefix = 'adm-calendar-picker-view'
export type CalendarPickerViewRef = {
jumpTo: (page: Page | ((page: Page) => Page)) => void
jumpToToday: () => void
scrollTo: (date: Date) => void
getDateRange: () => DateRange
}

@@ -76,6 +78,7 @@ export const CalendarPickerView = forwardRef<
CalendarPickerViewRef,
CalendarPickerViewProps
>((p, ref) => {
const rootRef = useRef<HTMLDivElement>(null)
const today = dayjs()
const props = mergeProps(defaultProps, p)
const { locale } = useConfig()
@@ -123,6 +126,14 @@ export const CalendarPickerView = forwardRef<
setCurrent(dayjs().date(1))
},
getDateRange: () => dateRange,
scrollTo: (date: Date) => {
const cell = rootRef.current?.querySelector(
`.${classPrefix}-cell-${dayjs(date).format('YYYY-MM-DD')}`
)
if (cell) {
cell.scrollIntoView({ block: 'center' })
}
},
}))

const header = (
@@ -286,7 +297,12 @@ export const CalendarPickerView = forwardRef<
<div className={`${classPrefix}-cell-top`}>
{renderTop()}
</div>
<div className={`${classPrefix}-cell-date`}>
<div
className={classNames(
`${classPrefix}-cell-date`,
`${classPrefix}-cell-${d.format('YYYY-MM-DD')}`
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

不要加到 className 里，可以加个 data-date。

)}
>
{props.renderDate
? props.renderDate(d.toDate())
: d.date()}
@@ -320,7 +336,7 @@ export const CalendarPickerView = forwardRef<

return withNativeProps(
props,
<div className={classPrefix}>
<div ref={rootRef} className={classPrefix}>
{header}
{mark}
{body}
1,100 changes: 550 additions & 550 deletions src/components/calendar-picker-view/tests/__snapshots__/calendar-picker-view.test.tsx.snap
View file

Large diffs are not rendered by default.

9 changes: 7 additions & 2 deletions src/components/calendar-picker/calendar-picker.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { forwardRef, useRef } from 'react'
import React, { forwardRef, useEffect, useRef } from 'react'
import { withNativeProps } from '../../utils/native-props'
import classNames from 'classnames'
import Button from '../button'
@@ -73,7 +73,12 @@ export const CalendarPicker = forwardRef<
getContainer,
...calendarViewProps
} = props

useEffect(() => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more. 

useEffect(() => {
    setImmediate(() => {
      const dateRange = calendarRef.current?.getDateRange() ?? null
      if (dateRange && dateRange[0]) {
        calendarRef.current?.scrollTo(dateRange[0])
      }
    })
  }, [visible])

加setImmediate， 当 visible 为 true 时，calendarRef.current不能立刻取到

const dateRange = calendarRef.current?.getDateRange() ?? null
if (dateRange && dateRange[0]) {
calendarRef.current?.scrollTo(dateRange[0])
}
}, [visible])
const footer = (
<div className={`${classPrefix}-footer`}>
<Divider />
7,276 changes: 3,638 additions & 3,638 deletions src/components/config-provider/tests/__snapshots__/config-provider.test.tsx.snap
View file

Large diffs are not rendered by default.

Unchanged files with check annotations Beta

View file
src/components/date-picker/date-picker-date-utils.ts
// Till Now
if (tillNow) {
ret[0].push({
label: renderLabel('now', null!),

Check warning on line 173 in src/components/date-picker/date-picker-date-utils.ts

GitHub Actions / check 

Forbidden non-null assertion
value: TILL_NOW,
})
View file
src/components/input/tests/input.test.tsx
test('numbers that start with 0 should be work', () => {
const ref = createRef<InputRef>()
render(<Input type='number' ref={ref} />)
const input = document.querySelector('input')!

Check warning on line 197 in src/components/input/tests/input.test.tsx

GitHub Actions / check 

Forbidden non-null assertion
fireEvent.change(input, {
target: { value: '012' },
})
View file
src/components/popover/tests/popover.test.tsx
).toEqual('Bamboo')
// Not close
fireEvent.touchMove(document.querySelector('.adm-popover-inner-content')!)

Check warning on line 20 in src/components/popover/tests/popover.test.tsx

GitHub Actions / check 

Forbidden non-null assertion
expect(document.querySelector('.adm-popover-hidden')).toBeFalsy()
// Close
View file
src/components/stepper/tests/stepper.test.tsx
fireEvent.click(plusButton)
expect(onChange).toHaveBeenCalledWith('0.000000000000003')
expect(container.querySelector('input')!.value).toEqual('0.000000000000003')

Check warning on line 255 in src/components/stepper/tests/stepper.test.tsx

GitHub Actions / check 

Forbidden non-null assertion
})
})
View file
src/components/text-area/tests/text-area.test.tsx
const maxRows = 5
const { getByRole } = render(<TextArea autoSize={{ minRows, maxRows }} />)
const textarea = getByRole('textbox')
const hiddenTextarea = document.querySelector(

Check warning on line 36 in src/components/text-area/tests/text-area.test.tsx

GitHub Actions / check 

Forbidden non-null assertion
`.${classPrefix}-element-hidden`
)!
// mock
test('set rows should be work', () => {
const { getByRole } = render(<TextArea rows={1} autoSize />)
const hiddenTextarea = document.querySelector(

Check warning on line 126 in src/components/text-area/tests/text-area.test.tsx

GitHub Actions / check 

Forbidden non-null assertion
`.${classPrefix}-element-hidden`
)!
const textarea = getByRole('textbox')