feat(DatePickerView): support till now

src/components/date-picker-view/date-picker-view.tsx

@@ -14,21 +14,24 @@ import type {
   DatePickerFilter,
 } from '../date-picker/date-picker-utils'
 import useRenderLabel from './useRenderLabel'
+import { TILL_NOW } from '../date-picker/util'
+import type { PickerDate } from '../date-picker/util'
 
 export type RenderLabel = (type: Precision | 'now', data: number) => ReactNode
 
 export type DatePickerViewProps = Pick<
   PickerViewProps,
   'style' | 'mouseWheel' | 'loading' | 'loadingContent'
 > & {
-  value?: Date
-  defaultValue?: Date
-  onChange?: (value: Date) => void
-  min?: Date
-  max?: Date
+  value?: PickerDate
+  defaultValue?: PickerDate
+  onChange?: (value: PickerDate) => void
+  min?: PickerDate
+  max?: PickerDate
   precision?: Precision
   renderLabel?: RenderLabel
   filter?: DatePickerFilter
+  tillNow?: boolean
 } & NativeProps
 
 const thisYear = new Date().getFullYear()
@@ -43,17 +46,20 @@ export const DatePickerView: FC<DatePickerViewProps> = p => {
   const props = mergeProps(defaultProps, p)
   const { renderLabel } = props
 
-  const [value, setValue] = usePropsValue<Date | null>({
+  const [value, setValue] = usePropsValue<PickerDate | null>({
     value: props.value,
     defaultValue: props.defaultValue ?? null,
   })
 
   const mergedRenderLabel = useRenderLabel(renderLabel)
 
-  const pickerValue = useMemo(
-    () => convertDateToStringArray(value, props.precision),
-    [value, props.precision]
-  )
+  const pickerValue = useMemo(() => {
+    if (value?.tillNow) {
+      return [TILL_NOW, null, null]
+    }
+
+    return convertDateToStringArray(value, props.precision)
+  }, [value, props.precision])
 
   const onChange = useCallback(
     (val: PickerValue[]) => {
@@ -76,7 +82,8 @@ export const DatePickerView: FC<DatePickerViewProps> = p => {
           props.max,
           props.precision,
           mergedRenderLabel,
-          props.filter
+          props.filter,
+          props.tillNow
         )
       }
       loading={props.loading}

src/components/date-picker-view/demos/demo1.tsx

@@ -51,6 +51,15 @@ export default () => {
           filter={dateFilter}
         />
       </DemoBlock>
+
+      <DemoBlock title='至今' padding='0'>
+        <DatePickerView
+          defaultValue={now}
+          max={now}
+          tillNow
+          onChange={val => console.log(`Till Now: ${!!val.tillNow}`)}
+        />
+      </DemoBlock>
     </>
   )
 }

src/components/date-picker-view/tests/date-picker-view.test.tsx

@@ -0,0 +1,29 @@
+import { render, testA11y, fireEvent, screen, act } from 'testing'
+import React from 'react'
+import DatePickerView from '../'
+
+const now = new Date()
+
+describe('DatePickerView', () => {
+  test('passes a11y test', async () => {
+    await act(async () => {
+      await testA11y(<DatePickerView />)
+    })
+  })
+
+  test('till now should be work', async () => {
+    const fn = jest.fn()
+    render(
+      <DatePickerView defaultValue={now} max={now} tillNow onChange={fn} />
+    )
+
+    const nowEl = await screen.findByText('至今')
+    fireEvent.click(nowEl)
+    await act(async () => {
+      await Promise.resolve()
+    })
+    const res = fn.mock.calls[0][0]
+    expect(res.toDateString()).toEqual(now.toDateString())
+    expect(res.tillNow).toBeTruthy()
+  })
+})

src/components/picker-view/index.en.md

@@ -69,19 +69,26 @@ DatePickerView is the content area of [DatePicker](/components/picker/#datepicke
 
 ### Props
 
-| Name | Description | Type | Default |
-| --- | --- | --- | --- |
-| defaultValue | Default selected options | `Date` | - |
+```typescript
+type PickerDate = Date & {
+  tillNow?: boolean
+}
+```
+
+| Name | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| defaultValue | Default selected options | `PickerDate` | - |
 | filter | Filter available time | `DatePickerFilter` | - |
-| max | Max value | `Date` | ten years later |
-| min | Minimum value | `Date` | ten years ago |
+| max | Max value | `PickerDate` | ten years later |
+| min | Minimum value | `PickerDate` | ten years ago |
 | mouseWheel | Whether to allow interact with mouse wheel | `boolean` | `false` |
-| onChange | Triggered when the options are changed | `(value: Date) => void` | - |
+| onChange | Triggered when the options are changed | `(value: PickerDate) => void` | - |
 | precision | Precision | `'year' \| 'month' \| 'day' \| 'hour' \| 'minute' \| 'second' \| 'week' \| 'week-day'` | `'day'` |
 | renderLabel | The function to custom rendering the label shown on a column. `type` means any value in `precision`, `data` means the default number | `(type: string, data: number) => ReactNode` | - |
-| value | Selected options | `Date` | - |
+| value | Selected options | `PickerDate` | - |
 | loading | Should the Picker displays as loading state | `boolean` | `false` |
 | loadingContent | The loading content displayed in loading state | `ReactNode` | `provide a default SpinLoading content` |
+| tillNow | Show till now in list | `boolean` | - | 5.32.0 |
 
 For the type definition and usage of `DatePickerFilter`, please refer to the document of [DatePicker](/components/picker#datepicker).
 

src/components/picker-view/index.zh.md

@@ -69,19 +69,26 @@ DatePickerView 是 [DatePicker](/zh/components/picker/#datepicker) 的内容区
 
 ### 属性
 
-| 属性 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| defaultValue | 默认选中项 | `Date` | - |
+```typescript
+type PickerDate = Date & {
+  tillNow?: boolean
+}
+```
+
+| 属性 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| defaultValue | 默认选中项 | `PickerDate` | - |
 | filter | 过滤可供选择的时间 | `DatePickerFilter` | - |
-| max | 最大值 | `Date` | 十年后 |
-| min | 最小值 | `Date` | 十年前 |
+| max | 最大值 | `PickerDate` | 十年后 |
+| min | 最小值 | `PickerDate` | 十年前 |
 | mouseWheel | 是否允许通过鼠标滚轮进行选择 | `boolean` | `false` |
-| onChange | 选项改变时触发 | `(value: Date) => void` | - |
+| onChange | 选项改变时触发 | `(value: PickerDate) => void` | - |
 | precision | 精度 | `'year' \| 'month' \| 'day' \| 'hour' \| 'minute' \| 'second' \| 'week' \| 'week-day'` | `'day'` |
 | renderLabel | 自定义渲染每列展示的内容。其中 `type` 参数为 `precision` 中的任意值，`data` 参数为默认渲染的数字 | `(type: string, data: number) => ReactNode` | - |
-| value | 选中项 | `Date` | - |
+| value | 选中项 | `PickerDate` | - |
 | loading | 是否处于加载状态 | `boolean` | `false` |
 | loadingContent | 加载状态下展示的内容 | `ReactNode` | `默认提供了转圈加载中的加载效果` |
+| tillNow | 是否展示“至今” | `boolean` | - | 5.32.0 |
 
 关于 `DatePickerFilter` 的类型定义和使用，请参考 [DatePicker](/zh/components/picker#datepicker) 的文档。