mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2024-12-21 04:50:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(date-picker): shortcuts function value (#1415)

Browse Source 
* feat(date-picker): shortcuts function value

* feat(date-picker): Shortcuts remove data parameter

* Apply suggestions from code review

Co-authored-by: aaronz <aaron.bjym1011@outlook.com>
Co-authored-by: 07akioni <07akioni2@gmail.com>
This commit is contained in:
bjym 2021-10-27 01:31:50 +08:00 committed by GitHub
parent 0e8486dadf
commit f826003544
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 161 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
CHANGELOG.en-US.md
View File

@ -9,6 +9,10 @@
- Fix `n-log` `font-size` prop not working, closes [#1416](https://github.com/TuSimple/naive-ui/issues/1416).
- Fix `n-loading-bar` will show once even if `start` is not called when `loading-bar-style` is set.
### Feats
- `n-date-picker`'s `shortcuts` prop supports functional value.
## 2.19.11 (2021-10-21)
### Fixes

4
CHANGELOG.zh-CN.md
View File

@ -9,6 +9,10 @@
- 修复 `n-log` `font-size` 属性不生效，关闭 [#1416](https://github.com/TuSimple/naive-ui/issues/1416)
- 修复 `n-loading-bar` 设定 `loading-bar-style` 后不调用 `start` 也会显示一次
### Feats
- `n-date-picker` 的 `shortcuts` 属性支持传入回调函数
## 2.19.11 (2021-10-21)
### Fixes

2
src/date-picker/demos/enUS/index.demo-entry.md
View File

@ -32,7 +32,7 @@ update-on-close
| disabled | `boolean` | `false` | Whether the date picker is disabled. |
| first-day-of-week | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6` | `undefined` | The first day of a week on calendar, 0 means Monday. |
| input-readonly | `boolean` | `false` | Set the `readonly` attribute of the input (avoids virtual keyboard on touch devices). |
| shortcuts | `Record<string, number \| [number, number]>` | `undefined` | Shortcut button customizations. |
| shortcuts | `Record<string, number \| (() => number)> \| Record<string, [number, number] \| (() => [number, number])>` | `undefined` | Shortcut button customizations. |
| size | `'small' \| 'medium' \| 'large'` | `'medium'` | Date picker size. |
| type | `'date' \| 'datetime' \| 'daterange' \|'datetimerange' \|'month'` | `'date'` | Date picker type. |
| value | `number \| [number, number] \| null` | `undefined` | Value of the date picker when being manually set. |

8
src/date-picker/demos/enUS/shortcuts.demo.md
View File

@ -31,10 +31,14 @@ export default defineComponent({
range2: ref(null),
shortcuts: {
'Honey birthday': 1631203200000,
'Party day': 1629216000000
Yesterday: () => new Date().getTime() - 24 * 60 * 60 * 1000
},
rangeShortcuts: {
'Happy holiday': [1629216000000, 1631203200000]
'Happy holiday': [1629216000000, 1631203200000],
'Last 2 hours': () => {
const cur = new Date().getTime()
return [cur - 2 * 60 * 60 * 1000, cur]
}
}
}
}

2
src/date-picker/demos/zhCN/index.demo-entry.md
View File

@ -32,7 +32,7 @@ update-on-close
| disabled | `boolean` | `false` | 是否禁用 |
| first-day-of-week | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6` | `undefined` | 日历上一周的开始，0 代表周一 |
| input-readonly | `boolean` | `false` | 设置输入框为只读（避免在移动设备上打开虚拟键盘） |
| shortcuts | `Record<string, number \| [number, number]>` | `undefined` | 自定义快捷按钮 |
| shortcuts | `Record<string, number \| (() => number)> \| Record<string, [number, number] \| (() => [number, number])>` | `undefined` | 自定义快捷按钮 |
| size | `'small' \| 'medium' \| 'large'` | `'medium'` | 尺寸 |
| type | `'date' \| 'datetime' \| 'daterange' \|'datetimerange' \|'month'` | `'date'` | Date Picker 的类型 |
| value | `number \| [number, number] \| null` | `undefined` | Date Picker 的值 |

10
src/date-picker/demos/zhCN/shortcuts.demo.md
View File

@ -10,6 +10,7 @@
v-model:value="range1"
type="daterange"
:shortcuts="rangeShortcuts"
:update-value-on-close="true"
/>
<n-date-picker
v-model:value="range2"
@ -31,10 +32,15 @@ export default defineComponent({
range2: ref(null),
shortcuts: {
亲爱的生日: 1631203200000,
派对日: 1629216000000
派对日: 1629216000000,
昨天: () => new Date().getTime() - 24 * 60 * 60 * 1000
},
rangeShortcuts: {
快乐假期: [1629216000000, 1631203200000]
快乐假期: [1629216000000, 1631203200000],
近2小时: () => {
const cur = new Date().getTime()
return [cur - 2 * 60 * 60 * 1000, cur]
}
}
}
}

4
src/date-picker/src/interface.ts
View File

@ -17,8 +17,8 @@ import {
export type Value = number | [number, number]
export type Shortcuts =
| Record<string, number>
| Record<string, [number, number]>
| Record<string, number | (() => number)>
| Record<string, [number, number] | (() => [number, number])>
export type OnUpdateValue = (
value: number & (number | null) & [number, number] & ([number, number] | null)

9
src/date-picker/src/panel/date.tsx
View File

@ -127,16 +127,13 @@ export default defineComponent({
<NxButton
size="tiny"
onMouseenter={() => {
this.cachePendingValue()
this.doUpdateValue(shortcut, false)
this.handleSingleShortcutMouseenter(shortcut)
}}
onClick={() => {
this.doUpdateValue(shortcut, false)
this.clearPendingValue()
this.handleConfirmClick()
this.handleSingleShortcutClick(shortcut)
}}
onMouseleave={() => {
this.restorePendingValue()
this.handleShortcutMouseleave()
}}
>
{{ default: () => key }}

14
src/date-picker/src/panel/daterange.tsx
View File

@ -211,25 +211,23 @@ export default defineComponent({
{shortcuts &&
Object.keys(shortcuts).map((key) => {
const shortcut = shortcuts[key]
return Array.isArray(shortcut) ? (
return Array.isArray(shortcut) ||
typeof shortcut === 'function' ? (
<NxButton
size="tiny"
onMouseenter={() => {
this.cachePendingValue()
this.changeStartEndTime(...shortcut)
this.handleRangeShortcutMouseenter(shortcut)
}}
onClick={() => {
this.changeStartEndTime(...shortcut)
this.clearPendingValue()
this.handleConfirmClick()
this.handleRangeShortcutClick(shortcut)
}}
onMouseleave={() => {
this.restorePendingValue()
this.handleShortcutMouseleave()
}}
>
{{ default: () => key }}
</NxButton>
) : null
) : null
})}
</div>
<div class={`${mergedClsPrefix}-date-panel-actions__suffix`}>

9
src/date-picker/src/panel/datetime.tsx
View File

@ -147,16 +147,13 @@ export default defineComponent({
<NxButton
size="tiny"
onMouseenter={() => {
this.cachePendingValue()
this.doUpdateValue(shortcut, false)
this.handleSingleShortcutMouseenter(shortcut)
}}
onClick={() => {
this.doUpdateValue(shortcut, false)
this.clearPendingValue()
this.handleConfirmClick()
this.handleSingleShortcutClick(shortcut)
}}
onMouseleave={() => {
this.restorePendingValue()
this.handleShortcutMouseleave()
}}
>
{{ default: () => key }}

14
src/date-picker/src/panel/datetimerange.tsx
View File

@ -269,25 +269,23 @@ export default defineComponent({
{shortcuts &&
Object.keys(shortcuts).map((key) => {
const shortcut = shortcuts[key]
return Array.isArray(shortcut) ? (
return Array.isArray(shortcut) ||
typeof shortcut === 'function' ? (
<NxButton
size="tiny"
onMouseenter={() => {
this.cachePendingValue()
this.changeStartEndTime(...shortcut)
this.handleRangeShortcutMouseenter(shortcut)
}}
onClick={() => {
this.changeStartEndTime(...shortcut)
this.clearPendingValue()
this.handleConfirmClick()
this.handleRangeShortcutClick(shortcut)
}}
onMouseleave={() => {
this.restorePendingValue()
this.handleShortcutMouseleave()
}}
>
{{ default: () => key }}
</NxButton>
) : null
) : null
})}
</div>
<div class={`${mergedClsPrefix}-date-panel-actions__suffix`}>

9
src/date-picker/src/panel/month.tsx
View File

@ -135,16 +135,13 @@ export default defineComponent({
<NxButton
size="tiny"
onMouseenter={() => {
this.cachePendingValue()
this.doUpdateValue(shortcut, false)
this.handleSingleShortcutMouseenter(shortcut)
}}
onClick={() => {
this.doUpdateValue(shortcut, false)
this.clearPendingValue()
this.handleConfirmClick()
this.handleSingleShortcutClick(shortcut)
}}
onMouseleave={() => {
this.restorePendingValue()
this.handleShortcutMouseleave()
}}
>
{{ default: () => key }}

21
src/date-picker/src/panel/use-calendar.ts
View File

@ -16,7 +16,11 @@ import {
} from 'date-fns'
import { dateArray, monthArray, strictParse, yearArray } from '../utils'
import { usePanelCommon } from './use-panel-common'
import { IsSingleDateDisabled, datePickerInjectionKey } from '../interface'
import {
IsSingleDateDisabled,
datePickerInjectionKey,
Shortcuts
} from '../interface'
import type { DateItem, MonthItem, YearItem } from '../utils'
import { VirtualListInst } from 'vueuc'
import { ScrollbarInst } from '../../../_internal'
@ -280,6 +284,19 @@ function useCalendar (
function handleTimePickerChange (value: number): void {
panelCommon.doUpdateValue(value, false)
}
function handleSingleShortcutMouseenter (shortcut: Shortcuts[string]): void {
panelCommon.cachePendingValue()
const shortcutValue = panelCommon.getShortcutValue(shortcut)
if (typeof shortcutValue !== 'number') return
panelCommon.doUpdateValue(shortcutValue, false)
}
function handleSingleShortcutClick (shortcut: Shortcuts[string]): void {
const shortcutValue = panelCommon.getShortcutValue(shortcut)
if (typeof shortcutValue !== 'number') return
panelCommon.doUpdateValue(shortcutValue, false)
panelCommon.clearPendingValue()
handleConfirmClick()
}
return {
dateArray: dateArrayRef,
monthArray: monthArrayRef,
@ -294,6 +311,8 @@ function useCalendar (
prevMonth,
handleNowClick,
handleConfirmClick,
handleSingleShortcutMouseenter,
handleSingleShortcutClick,
...validation,
...panelCommon,
// datetime only

17
src/date-picker/src/panel/use-dual-calendar.ts
View File

@ -14,7 +14,7 @@ import {
} from 'date-fns'
import { dateArray, DateItem, strictParse } from '../utils'
import { usePanelCommon } from './use-panel-common'
import { datePickerInjectionKey } from '../interface'
import { datePickerInjectionKey, Shortcuts } from '../interface'
const useDualCalendarProps = {
...usePanelCommon.props,
@ -529,6 +529,19 @@ function useDualCalendar (
function handleEndTimePickerChange (value: number): void {
changeEndDateTime(value)
}
function handleRangeShortcutMouseenter (shortcut: Shortcuts[string]): void {
panelCommon.cachePendingValue()
const shortcutValue = panelCommon.getShortcutValue(shortcut)
if (!Array.isArray(shortcutValue)) return
changeStartEndTime(...shortcutValue)
}
function handleRangeShortcutClick (shortcut: Shortcuts[string]): void {
const shortcutValue = panelCommon.getShortcutValue(shortcut)
if (!Array.isArray(shortcutValue)) return
changeStartEndTime(...shortcutValue)
panelCommon.clearPendingValue()
handleConfirmClick()
}
return {
startDatesElRef,
endDatesElRef,
@ -554,6 +567,8 @@ function useDualCalendar (
weekdays: weekdaysRef,
startDateArray: startDateArrayRef,
endDateArray: endDateArrayRef,
handleRangeShortcutMouseenter,
handleRangeShortcutClick,
...panelCommon,
...validation,
// datetimerangeonly

13
src/date-picker/src/panel/use-panel-common.ts
View File

@ -132,6 +132,15 @@ function usePanelCommon (props: UsePanelCommonProps) {
cached = false
}
}
function getShortcutValue (
shortcut: Shortcuts[string]
): number | [number, number] {
if (typeof shortcut === 'function') {
return shortcut()
}
return shortcut
}
return {
mergedTheme: mergedThemeRef,
mergedClsPrefix: mergedClsPrefixRef,
@ -150,7 +159,9 @@ function usePanelCommon (props: UsePanelCommonProps) {
handlePanelFocus,
cachePendingValue,
clearPendingValue,
restorePendingValue
restorePendingValue,
getShortcutValue,
handleShortcutMouseleave: restorePendingValue
}
}

66
src/date-picker/tests/DatePicker.spec.ts
View File

@ -76,6 +76,72 @@ describe('n-date-picker', () => {
wrapper.unmount()
})
it('date type should work with shortcuts prop with function value', async () => {
const test = ref<Value>(0)
const wrapper = mount(NDatePicker, {
props: {
value: test.value,
type: 'date',
onUpdateValue: (value: Value) => {
test.value = value
},
shortcuts: {
'Honey birthday': () => 1631203200000
}
}
})
await wrapper.find('.n-input').trigger('click')
const button: HTMLElement = document
.querySelector('.n-date-panel-actions')
?.querySelector('.n-button') as HTMLElement
button.click()
expect(test.value).toEqual(1631203200000)
test.value = 0
wrapper.setProps({
type: 'datetime'
})
await wrapper.find('.n-input').trigger('click')
const timeButton: HTMLElement = document
.querySelector('.n-date-panel-actions')
?.querySelector('.n-button') as HTMLElement
timeButton.click()
expect(test.value).toEqual(1631203200000)
wrapper.unmount()
})
it('range type should work with shortcuts prop with function value', async () => {
const test = ref<Value>(0)
const wrapper = mount(NDatePicker, {
props: {
value: test.value,
type: 'daterange',
onUpdateValue: (value: Value) => {
test.value = value
},
shortcuts: {
'Honey birthday': () => [1629216000000, 1631203200000]
}
}
})
await wrapper.find('.n-input').trigger('click')
const button: HTMLElement = document
.querySelector('.n-date-panel-actions')
?.querySelector('.n-button') as HTMLElement
button.click()
expect(test.value).toEqual([1629216000000, 1631203200000])
test.value = 0
wrapper.setProps({
type: 'datetimerange'
})
await wrapper.find('.n-input').trigger('click')
const rangeButton: HTMLElement = document
.querySelector('.n-date-panel-actions')
?.querySelector('.n-button') as HTMLElement
rangeButton.click()
expect(test.value).toEqual([1629216000000, 1631203200000])
wrapper.unmount()
})
it('should work with `inputReadonly` prop', async () => {
const wrapper = mount(NDatePicker)
expect(wrapper.find('input').attributes('readonly')).not.toBe('')