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.

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
Open
Changes from 2 commits
Commits
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
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}

Large diffs are not rendered by default.

9 changes: 7 additions & 2 deletions src/components/calendar-picker/calendar-picker.tsx
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

Large diffs are not rendered by default.


Unchanged files with check annotations Beta

// 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,
})
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' },
})
).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
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
})
})
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')