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

Jump to bottom

feat(datepicker): 支持 onPresetClick 事件触发 #2342

Merged
merged 3 commits into from
Apr 18, 2023
Merged

feat(datepicker): 支持 onPresetClick 事件触发 #2342

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
89cbbd2
feat(datepicker): 支持 onPresetClick 事件触发
honkinglin Apr 18, 2023
af997e3
fix: 修复类型问题
honkinglin Apr 18, 2023
2a0a1a0
fix: 修复类型问题
honkinglin Apr 18, 2023
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
4 changes: 3 additions & 1 deletion src/date-picker/DatePicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -193,7 +193,7 @@ export default defineComponent({
}

// 预设
function onPresetClick(presetValue: DateValue | (() => DateValue)) {
function onPresetClick(presetValue: any, context: any) {
const presetVal = typeof presetValue === 'function' ? presetValue() : presetValue;
onChange?.(
formatDate(presetVal, {
Expand All @@ -205,6 +205,8 @@ export default defineComponent({
trigger: 'preset',
},
);
props.onPresetClick?.(context);
emit('preset-click', context);
popupVisible.value = false;
}

Expand Down
6 changes: 3 additions & 3 deletions src/date-picker/DatePickerPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,14 +168,14 @@ export default defineComponent({
}

// 预设
function onPresetClick(presetValue: DateValue | (() => DateValue), { e, preset }: any) {
function onPresetClick(presetValue: any, context: any) {
const presetVal = typeof presetValue === 'function' ? presetValue() : presetValue;
onChange?.(formatDate(presetVal, { format: formatRef.value.format }) as DateValue, {
dayjsValue: parseToDayjs(presetVal, formatRef.value.format),
trigger: 'preset',
});
props.onPresetClick?.({ e, preset });
emit('preset-click', { e, preset });
props.onPresetClick?.(context);
emit('preset-click', context);
}

function onYearChange(nextYear: number) {
Expand Down
4 changes: 3 additions & 1 deletion src/date-picker/DateRangePicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -326,7 +326,7 @@ export default defineComponent({
}

// 预设
function onPresetClick(preset: any) {
function onPresetClick(preset: any, context: any) {
let presetValue = preset;
if (typeof preset === 'function') {
presetValue = preset();
Expand All @@ -346,6 +346,8 @@ export default defineComponent({
},
);
popupVisible.value = false;
props.onPresetClick?.(context);
emit('preset-click', context);
}
}

Expand Down
4 changes: 3 additions & 1 deletion src/date-picker/DateRangePickerPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -274,7 +274,7 @@ export default defineComponent({
}

// 预设
function onPresetClick(preset: any) {
function onPresetClick(preset: any, context: any) {
let presetValue = preset;
if (typeof preset === 'function') {
presetValue = preset();
Expand All @@ -292,6 +292,8 @@ export default defineComponent({
trigger: 'preset',
},
);
props.onPresetClick?.(context);
emit('preset-click', context);
}
}

Expand Down
3 changes: 2 additions & 1 deletion src/date-picker/base/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,8 @@ export default defineComponent({
key={key}
size="small"
variant="text"
onClick={(e: MouseEvent) => this.onPresetClick?.(this.presets[key], { e })}
onClick={(e: MouseEvent) => this.onPresetClick?.(this.presets[key], { e, preset: { [key]: this.presets[key] } })
}
>
{key}
</TButton>
Expand Down
2 changes: 1 addition & 1 deletion src/date-picker/date-picker-panel-props.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export default {
onMonthChange: Function as PropType<TdDatePickerPanelProps['onMonthChange']>,
/** 点击面板时触发 */
onPanelClick: Function as PropType<TdDatePickerPanelProps['onPanelClick']>,
/** 如果存在“确认”按钮，则点击“确认”按钮时触发 */
/** 点击预设按钮后触发 */
onPresetClick: Function as PropType<TdDatePickerPanelProps['onPresetClick']>,
/** 时间切换发生变化时触发 */
onTimeChange: Function as PropType<TdDatePickerPanelProps['onTimeChange']>,
Expand Down
4 changes: 4 additions & 0 deletions src/date-picker/date-picker.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ onBlur | Function | | Typescript：`(context: { value: DateValue; e: FocusEvent
onChange | Function | | Typescript：`(value: DateValue, context: { dayjsValue?: Dayjs, trigger?: DatePickerTriggerSource }) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。<br/>`import { Dayjs } from 'dayjs'`<br/><br/>`type DatePickerTriggerSource = 'confirm' \| 'pick' \| 'enter' \| 'preset' \| 'clear'`<br/> | N
onFocus | Function | | Typescript：`(context: { value: DateValue; e: FocusEvent }) => void`<br/> | N
onPick | Function | | Typescript：`(value: DateValue) => void`<br/> | N
onPresetClick | Function | | Typescript：`(context: { preset: PresetDate, e: MouseEvent }) => void`<br/> | N

### DatePicker Events

Expand All @@ -41,6 +42,7 @@ blur | `(context: { value: DateValue; e: FocusEvent })` | \-
change | `(value: DateValue, context: { dayjsValue?: Dayjs, trigger?: DatePickerTriggerSource })` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。<br/>`import { Dayjs } from 'dayjs'`<br/><br/>`type DatePickerTriggerSource = 'confirm' \| 'pick' \| 'enter' \| 'preset' \| 'clear'`<br/>
focus | `(context: { value: DateValue; e: FocusEvent })` | \-
pick | `(value: DateValue)` | \-
preset-click | `(context: { preset: PresetDate, e: MouseEvent })` | \-

### DateRangePicker Props

Expand Down Expand Up @@ -76,6 +78,7 @@ onChange | Function | | Typescript：`(value: DateRangeValue, context: { dayjsV
onFocus | Function | | Typescript：`(context: { value: DateRangeValue; partial: DateRangePickerPartial; e: FocusEvent }) => void`<br/> | N
onInput | Function | | Typescript：`(context: { input: string; value: DateRangeValue; partial: DateRangePickerPartial; e: InputEvent }) => void`<br/> | N
onPick | Function | | Typescript：`(value: DateValue, context: PickContext) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。<br/>`interface PickContext { e: MouseEvent; partial: DateRangePickerPartial }`<br/> | N
onPresetClick | Function | | Typescript：`(context: { preset: PresetDate, e: MouseEvent }) => void`<br/> | N

### DateRangePicker Events

Expand All @@ -86,6 +89,7 @@ change | `(value: DateRangeValue, context: { dayjsValue?: Dayjs[], trigger?: Dat
focus | `(context: { value: DateRangeValue; partial: DateRangePickerPartial; e: FocusEvent })` | \-
input | `(context: { input: string; value: DateRangeValue; partial: DateRangePickerPartial; e: InputEvent })` | \-
pick | `(value: DateValue, context: PickContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。<br/>`interface PickContext { e: MouseEvent; partial: DateRangePickerPartial }`<br/>
preset-click | `(context: { preset: PresetDate, e: MouseEvent })` | \-

### DatePickerPanel Props

Expand Down
12 changes: 8 additions & 4 deletions src/date-picker/date-picker.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ onBlur | Function | | TS 类型：`(context: { value: DateValue; e: FocusEvent
onChange | Function | | TS 类型：`(value: DateValue, context: { dayjsValue?: Dayjs, trigger?: DatePickerTriggerSource }) => void`<br/>选中值发生变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。<br/>`import { Dayjs } from 'dayjs'`<br/><br/>`type DatePickerTriggerSource = 'confirm' \| 'pick' \| 'enter' \| 'preset' \| 'clear'`<br/> | N
onFocus | Function | | TS 类型：`(context: { value: DateValue; e: FocusEvent }) => void`<br/>输入框获得焦点时触发 | N
onPick | Function | | TS 类型：`(value: DateValue) => void`<br/>面板选中值后触发 | N
onPresetClick | Function | | TS 类型：`(context: { preset: PresetDate, e: MouseEvent }) => void`<br/>点击预设按钮后触发 | N

### DatePicker Events

Expand All @@ -41,6 +42,7 @@ blur | `(context: { value: DateValue; e: FocusEvent })` | 当输入框失去焦
change | `(value: DateValue, context: { dayjsValue?: Dayjs, trigger?: DatePickerTriggerSource })` | 选中值发生变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。<br/>`import { Dayjs } from 'dayjs'`<br/><br/>`type DatePickerTriggerSource = 'confirm' \| 'pick' \| 'enter' \| 'preset' \| 'clear'`<br/>
focus | `(context: { value: DateValue; e: FocusEvent })` | 输入框获得焦点时触发
pick | `(value: DateValue)` | 面板选中值后触发
preset-click | `(context: { preset: PresetDate, e: MouseEvent })` | 点击预设按钮后触发

### DateRangePicker Props

Expand Down Expand Up @@ -76,6 +78,7 @@ onChange | Function | | TS 类型：`(value: DateRangeValue, context: { dayjsVa
onFocus | Function | | TS 类型：`(context: { value: DateRangeValue; partial: DateRangePickerPartial; e: FocusEvent }) => void`<br/>输入框获得焦点时触发 | N
onInput | Function | | TS 类型：`(context: { input: string; value: DateRangeValue; partial: DateRangePickerPartial; e: InputEvent }) => void`<br/>输入框数据发生变化时触发，参数 input 表示输入内容，value 表示组件当前有效值 | N
onPick | Function | | TS 类型：`(value: DateValue, context: PickContext) => void`<br/>选中日期时触发，可能是开始日期，也可能是结束日期，第二个参数可以区分是开始日期或是结束日期。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。<br/>`interface PickContext { e: MouseEvent; partial: DateRangePickerPartial }`<br/> | N
onPresetClick | Function | | TS 类型：`(context: { preset: PresetDate, e: MouseEvent }) => void`<br/>点击预设按钮后触发 | N

### DateRangePicker Events

Expand All @@ -86,6 +89,7 @@ change | `(value: DateRangeValue, context: { dayjsValue?: Dayjs[], trigger?: Dat
focus | `(context: { value: DateRangeValue; partial: DateRangePickerPartial; e: FocusEvent })` | 输入框获得焦点时触发
input | `(context: { input: string; value: DateRangeValue; partial: DateRangePickerPartial; e: InputEvent })` | 输入框数据发生变化时触发，参数 input 表示输入内容，value 表示组件当前有效值
pick | `(value: DateValue, context: PickContext)` | 选中日期时触发，可能是开始日期，也可能是结束日期，第二个参数可以区分是开始日期或是结束日期。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。<br/>`interface PickContext { e: MouseEvent; partial: DateRangePickerPartial }`<br/>
preset-click | `(context: { preset: PresetDate, e: MouseEvent })` | 点击预设按钮后触发

### DatePickerPanel Props

Expand All @@ -98,7 +102,7 @@ onChange | Function | | TS 类型：`(value: DateValue, context: { dayjsValue?:
onConfirm | Function | | TS 类型：`(context: { date: Date, e: MouseEvent }) => void`<br/>如果存在“确认”按钮，则点击“确认”按钮时触发 | N
onMonthChange | Function | | TS 类型：`(context: { month: number, date: Date, e?: MouseEvent, trigger: DatePickerMonthChangeTrigger }) => void`<br/>月份切换发生变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。<br/>`type DatePickerMonthChangeTrigger = 'month-select' \| 'month-arrow-next' \| 'month-arrow-previous' \| 'today'`<br/> | N
onPanelClick | Function | | TS 类型：`(context: { e: MouseEvent }) => void`<br/>点击面板时触发 | N
onPresetClick | Function | | TS 类型：`(context: { preset: PresetDate, e: MouseEvent }) => void`<br/>如果存在“确认”按钮，则点击“确认”按钮时触发 | N
onPresetClick | Function | | TS 类型：`(context: { preset: PresetDate, e: MouseEvent }) => void`<br/>点击预设按钮后触发 | N
onTimeChange | Function | | TS 类型：`(context: { time: string, date: Date, trigger: DatePickerTimeChangeTrigger, e?: MouseEvent }) => void`<br/>时间切换发生变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。<br/>`type DatePickerTimeChangeTrigger = 'time-hour' \| 'time-minute' \| 'time-second'`<br/> | N
onYearChange | Function | | TS 类型：`(context: { year: number, date: Date, trigger: DatePickerYearChangeTrigger, e?: MouseEvent }) => void`<br/>年份切换发生变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。<br/>`type DatePickerYearChangeTrigger = 'year-select' \| 'year-arrow-next' \| 'year-arrow-previous' \| 'today'`<br/> | N

Expand All @@ -111,7 +115,7 @@ change | `(value: DateValue, context: { dayjsValue?: Dayjs, e?: MouseEvent, trig
confirm | `(context: { date: Date, e: MouseEvent })` | 如果存在“确认”按钮，则点击“确认”按钮时触发
month-change | `(context: { month: number, date: Date, e?: MouseEvent, trigger: DatePickerMonthChangeTrigger })` | 月份切换发生变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。<br/>`type DatePickerMonthChangeTrigger = 'month-select' \| 'month-arrow-next' \| 'month-arrow-previous' \| 'today'`<br/>
panel-click | `(context: { e: MouseEvent })` | 点击面板时触发
preset-click | `(context: { preset: PresetDate, e: MouseEvent })` | 如果存在“确认”按钮，则点击“确认”按钮时触发
preset-click | `(context: { preset: PresetDate, e: MouseEvent })` | 点击预设按钮后触发
time-change | `(context: { time: string, date: Date, trigger: DatePickerTimeChangeTrigger, e?: MouseEvent })` | 时间切换发生变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。<br/>`type DatePickerTimeChangeTrigger = 'time-hour' \| 'time-minute' \| 'time-second'`<br/>
year-change | `(context: { year: number, date: Date, trigger: DatePickerYearChangeTrigger, e?: MouseEvent })` | 年份切换发生变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。<br/>`type DatePickerYearChangeTrigger = 'year-select' \| 'year-arrow-next' \| 'year-arrow-previous' \| 'today'`<br/>

Expand All @@ -126,7 +130,7 @@ onChange | Function | | TS 类型：`(value: DateRangeValue, context: { dayjsVa
onConfirm | Function | | TS 类型：`(context: { date: Date[], e: MouseEvent }) => void`<br/>如果存在“确认”按钮，则点击“确认”按钮时触发 | N
onMonthChange | Function | | TS 类型：`(context: { month: number, date: Date[], partial: DateRangePickerPartial, e?: MouseEvent, trigger: DatePickerMonthChangeTrigger }) => void`<br/>月份切换发生变化时触发 | N
onPanelClick | Function | | TS 类型：`(context: { e: MouseEvent }) => void`<br/>点击面板时触发 | N
onPresetClick | Function | | TS 类型：`(context: { preset: PresetDate, e: MouseEvent }) => void`<br/>如果存在“确认”按钮，则点击“确认”按钮时触发 | N
onPresetClick | Function | | TS 类型：`(context: { preset: PresetDate, e: MouseEvent }) => void`<br/>点击预设按钮后触发 | N
onTimeChange | Function | | TS 类型：`(context: { time: string, date: Date[], partial: DateRangePickerPartial, trigger: DatePickerTimeChangeTrigger, e?: MouseEvent }) => void`<br/>时间切换发生变化时触发 | N
onYearChange | Function | | TS 类型：`(context: { year: number, date: Date[], partial: DateRangePickerPartial, trigger: DatePickerYearChangeTrigger, e?: MouseEvent }) => void`<br/>年份切换发生变化时触发 | N

Expand All @@ -139,6 +143,6 @@ change | `(value: DateRangeValue, context: { dayjsValue?: Dayjs[], partial: Date
confirm | `(context: { date: Date[], e: MouseEvent })` | 如果存在“确认”按钮，则点击“确认”按钮时触发
month-change | `(context: { month: number, date: Date[], partial: DateRangePickerPartial, e?: MouseEvent, trigger: DatePickerMonthChangeTrigger })` | 月份切换发生变化时触发
panel-click | `(context: { e: MouseEvent })` | 点击面板时触发
preset-click | `(context: { preset: PresetDate, e: MouseEvent })` | 如果存在“确认”按钮，则点击“确认”按钮时触发
preset-click | `(context: { preset: PresetDate, e: MouseEvent })` | 点击预设按钮后触发
time-change | `(context: { time: string, date: Date[], partial: DateRangePickerPartial, trigger: DatePickerTimeChangeTrigger, e?: MouseEvent })` | 时间切换发生变化时触发
year-change | `(context: { year: number, date: Date[], partial: DateRangePickerPartial, trigger: DatePickerYearChangeTrigger, e?: MouseEvent })` | 年份切换发生变化时触发
2 changes: 1 addition & 1 deletion src/date-picker/date-range-picker-panel-props.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export default {
onMonthChange: Function as PropType<TdDateRangePickerPanelProps['onMonthChange']>,
/** 点击面板时触发 */
onPanelClick: Function as PropType<TdDateRangePickerPanelProps['onPanelClick']>,
/** 如果存在“确认”按钮，则点击“确认”按钮时触发 */
/** 点击预设按钮后触发 */
onPresetClick: Function as PropType<TdDateRangePickerPanelProps['onPresetClick']>,
/** 时间切换发生变化时触发 */
onTimeChange: Function as PropType<TdDateRangePickerPanelProps['onTimeChange']>,
Expand Down
2 changes: 2 additions & 0 deletions src/date-picker/date-range-picker-props.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,4 +154,6 @@ export default {
onInput: Function as PropType<TdDateRangePickerProps['onInput']>,
/** 选中日期时触发，可能是开始日期，也可能是结束日期，第二个参数可以区分是开始日期或是结束日期 */
onPick: Function as PropType<TdDateRangePickerProps['onPick']>,
/** 点击预设按钮后触发 */
onPresetClick: Function as PropType<TdDateRangePickerProps['onPresetClick']>,
};
2 changes: 2 additions & 0 deletions src/date-picker/props.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,4 +130,6 @@ export default {
onFocus: Function as PropType<TdDatePickerProps['onFocus']>,
/** 面板选中值后触发 */
onPick: Function as PropType<TdDatePickerProps['onPick']>,
/** 点击预设按钮后触发 */
onPresetClick: Function as PropType<TdDatePickerProps['onPresetClick']>,
};
12 changes: 10 additions & 2 deletions src/date-picker/type.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,6 +131,10 @@ export interface TdDatePickerProps {
* 面板选中值后触发
*/
onPick?: (value: DateValue) => void;
/**
* 点击预设按钮后触发
*/
onPresetClick?: (context: { preset: PresetDate; e: MouseEvent }) => void;
}

export interface TdDateRangePickerProps {
Expand Down Expand Up @@ -276,6 +280,10 @@ export interface TdDateRangePickerProps {
* 选中日期时触发，可能是开始日期，也可能是结束日期，第二个参数可以区分是开始日期或是结束日期
*/
onPick?: (value: DateValue, context: PickContext) => void;
/**
* 点击预设按钮后触发
*/
onPresetClick?: (context: { preset: PresetDate; e: MouseEvent }) => void;
}

export interface TdDatePickerPanelProps
Expand Down Expand Up @@ -326,7 +334,7 @@ export interface TdDatePickerPanelProps
*/
onPanelClick?: (context: { e: MouseEvent }) => void;
/**
* 如果存在“确认”按钮，则点击“确认”按钮时触发
* 点击预设按钮后触发
*/
onPresetClick?: (context: { preset: PresetDate; e: MouseEvent }) => void;
/**
Expand Down Expand Up @@ -394,7 +402,7 @@ export interface TdDateRangePickerPanelProps
*/
onPanelClick?: (context: { e: MouseEvent }) => void;
/**
* 如果存在“确认”按钮，则点击“确认”按钮时触发
* 点击预设按钮后触发
*/
onPresetClick?: (context: { preset: PresetDate; e: MouseEvent }) => void;
/**
Expand Down