reactjs - وارد کردن نوع RangeValue از Ant Design

در حال کار روی یک بهروزرسانی برای جایگزینی Moment.js با date-fns برای Ant Design's DatePicker بر اساس مستنداتی که به نظر میرسد درست کار میکند.

اصولاً پیشنهاد میکند که موارد زیر را ایجاد کنید:

import dateFnsGenerateConfig from 'rc-picker/lib/generate/dateFns'
import generatePicker from 'antd/es/date-picker/generatePicker'

const DatePicker = generatePicker<Date>(dateFnsGenerateConfig)

سپس از کامپوننت به صورت زیر استفاده کنید:

<DatePicker.RangePicker
          placeholder={['From', 'To']}
          onChange={range => setRange(range)}
          value={range}
/>

برای موارد فوق، وضعیت زیر با نوع RangeValue ایجاد شده است:

const [range, setRange] = useState<RangeValue<Date>>(
   [from, to]
)

نوع RangeValue به صورت زیر وارد شده است:

import { RangeValue } from 'rc-picker/lib/interface'

// technically:
// import { RangeValue } from '../../../../node_modules/rc-picker/lib/interface'

سؤال:

من فقط این نظر را در یکی از سوالات اینجا پیدا کردم که در آنجا گفتگوی مشابهی داشتیم.

آیا راهی وجود دارد تا نوع RangeValue را وارد کنیم، شاید از Ant Design؟ ممنون!

پاسخ شماره ۱

من در وارد کردن مقادیر antd مشکل داشتم. به نظر میرسد آنها هیچ گزینه آسانی ارائه نمیدهند. در نهایت به استفاده از این روش رسیدم:

type RangeValue = Parameters<NonNullable<React.ComponentProps<typeof DatePicker.RangePicker>['onChange']>>[0]

این نوع اولین آرگومانی را که به تابع onChange ارسال میشود، استخراج میکند. همچنین با رویدادهای دیگر (مثل onClick، onBlur و غیره) نیز کار میکند. شما همچنین میتوانید انواع دیگر آرگومانها را به سادگی با افزایش شماره داخل کروشهها استخراج کنید. حالا میتوانید این نوع را به handler تابع onChange خود اختصاص دهید:

const handleOnChange = (dates: RangeValue, formattedDates: string[]) => {
//do something
return dates 
}

پاسخ شماره ۲

متأسفانه، در پاسخ @mateusz-bacherycz، نوعها به صورت "any" تعریف شدهاند، که منجر به از دست رفتن پشتیبانی TypeScript میشود.

نوعها در اینجا تعریف شدهاند: rc-picker/lib/interface.d.ts

فقط خطوط را برای نیازهای خود اضافه کنید:

// copied from rc-picker/lib/interface.d.ts
declare type EventValue<DateType> = DateType | null;
declare type RangeValue<DateType> = [EventValue<DateType>, EventValue<DateType>] | null;

طرز استفاده :

const handleOnChange = (dates: RangeValue, formattedDates: string[]) => {
  //do something
  return dates 
}

اگر میخواهید از انتخابکننده بازه در فرم خود استفاده کنید و مقادیر را به صورت رشته دریافت کنید، این چیزی است که من استفاده میکنم:

import dayjs, {Dayjs} from "dayjs";
import React from "react";
import {RangePickerDateProps} from "antd/es/date-picker/generatePicker";
import {DatePicker} from "antd";

export const DISPLAY_DATE = 'DD.MM.YYYY'
export const SERVER_DATE_FORMAT = "YYYY-MM-DD"

// copied from rc-picker/lib/interface.d.ts
declare type EventValue<DateType> = DateType | null;
declare type RangeValue<DateType> = [EventValue<DateType>, EventValue<DateType>] | null;

const datePickerValue = (value: RangeValue<string> | undefined): RangeValue<Dayjs> | undefined => {
    if (value == undefined) return value
    if (value[0] == undefined || value[1] == undefined) return undefined
    return [dayjs(value[0]), dayjs(value[1])]
}

const FormDateRangePicker: React.FC<RangePickerDateProps<string>> = ({...props}) => {
    const {value, onChange, ...remainingProps} = props

    const onChangeHandler = (value: RangeValue<Dayjs> | undefined, formatString: [string, string]) => {
        const from = value?.[0]?.format(SERVER_DATE_FORMAT) ?? null
        const to = value?.[1]?.format(SERVER_DATE_FORMAT) ?? null
        onChange?.([from, to], formatString)
    }

    return <DatePicker.RangePicker style={{width: "100%"}}
                                   {...remainingProps as RangePickerDateProps<Dayjs>}
                                   format={DISPLAY_DATE}
                                   value={datePickerValue(value)}
                                   onChange={onChangeHandler}
    />
}

export default FormDateRangePicker