forked from vueuse/vueuse
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.ts
212 lines (180 loc) · 6.31 KB
/
index.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
import type { MaybeComputedRef, Pausable } from '@vueuse/shared'
import { resolveUnref } from '@vueuse/shared'
import type { ComputedRef } from 'vue-demi'
import { computed, unref } from 'vue-demi'
import { useNow } from '../useNow'
export type UseTimeAgoFormatter<T = number> = (value: T, isPast: boolean) => string
export type UseTimeAgoUnitNamesDefault = 'second' | 'minute' | 'hour' | 'day' | 'week' | 'month' | 'year'
export interface UseTimeAgoMessagesBuiltIn {
justNow: string
past: string | UseTimeAgoFormatter<string>
future: string | UseTimeAgoFormatter<string>
invalid: string
}
export type UseTimeAgoMessages<UnitNames extends string = UseTimeAgoUnitNamesDefault>
= UseTimeAgoMessagesBuiltIn
& Record<UnitNames, string | UseTimeAgoFormatter<number>>
export interface FormatTimeAgoOptions<UnitNames extends string = UseTimeAgoUnitNamesDefault> {
/**
* Maximum unit (of diff in milliseconds) to display the full date instead of relative
*
* @default undefined
*/
max?: UnitNames | number
/**
* Formatter for full date
*/
fullDateFormatter?: (date: Date) => string
/**
* Messages for formatting the string
*/
messages?: UseTimeAgoMessages<UnitNames>
/**
* Minimum display time unit (default is minute)
*
* @default false
*/
showSecond?: boolean
/**
* Rounding method to apply.
*
* @default 'round'
*/
rounding?: 'round' | 'ceil' | 'floor' | number
/**
* Custom units
*/
units?: UseTimeAgoUnit<UseTimeAgoUnitNamesDefault>[]
}
export interface UseTimeAgoOptions<Controls extends boolean, UnitNames extends string = UseTimeAgoUnitNamesDefault> extends FormatTimeAgoOptions<UnitNames> {
/**
* Expose more controls
*
* @default false
*/
controls?: Controls
/**
* Intervals to update, set 0 to disable auto update
*
* @default 30_000
*/
updateInterval?: number
}
export interface UseTimeAgoUnit<Unit extends string = UseTimeAgoUnitNamesDefault> {
max: number
value: number
name: Unit
}
const DEFAULT_UNITS: UseTimeAgoUnit<UseTimeAgoUnitNamesDefault>[] = [
{ max: 60000, value: 1000, name: 'second' },
{ max: 2760000, value: 60000, name: 'minute' },
{ max: 72000000, value: 3600000, name: 'hour' },
{ max: 518400000, value: 86400000, name: 'day' },
{ max: 2419200000, value: 604800000, name: 'week' },
{ max: 28512000000, value: 2592000000, name: 'month' },
{ max: Infinity, value: 31536000000, name: 'year' },
]
const DEFAULT_MESSAGES: UseTimeAgoMessages<UseTimeAgoUnitNamesDefault> = {
justNow: 'just now',
past: n => n.match(/\d/) ? `${n} ago` : n,
future: n => n.match(/\d/) ? `in ${n}` : n,
month: (n, past) => n === 1
? past
? 'last month'
: 'next month'
: `${n} month${n > 1 ? 's' : ''}`,
year: (n, past) => n === 1
? past
? 'last year'
: 'next year'
: `${n} year${n > 1 ? 's' : ''}`,
day: (n, past) => n === 1
? past
? 'yesterday'
: 'tomorrow'
: `${n} day${n > 1 ? 's' : ''}`,
week: (n, past) => n === 1
? past
? 'last week'
: 'next week'
: `${n} week${n > 1 ? 's' : ''}`,
hour: n => `${n} hour${n > 1 ? 's' : ''}`,
minute: n => `${n} minute${n > 1 ? 's' : ''}`,
second: n => `${n} second${n > 1 ? 's' : ''}`,
invalid: '',
}
const DEFAULT_FORMATTER = (date: Date) => date.toISOString().slice(0, 10)
export type UseTimeAgoReturn<Controls extends boolean = false> = Controls extends true ? { timeAgo: ComputedRef<string> } & Pausable : ComputedRef<string>
/**
* Reactive time ago formatter.
*
* @see https://vueuse.org/useTimeAgo
* @param options
*/
export function useTimeAgo<UnitNames extends string = UseTimeAgoUnitNamesDefault>(time: MaybeComputedRef<Date | number | string>, options?: UseTimeAgoOptions<false, UnitNames>): UseTimeAgoReturn<false>
export function useTimeAgo<UnitNames extends string = UseTimeAgoUnitNamesDefault>(time: MaybeComputedRef<Date | number | string>, options: UseTimeAgoOptions<true, UnitNames>): UseTimeAgoReturn<true>
export function useTimeAgo<UnitNames extends string = UseTimeAgoUnitNamesDefault>(time: MaybeComputedRef<Date | number | string>, options: UseTimeAgoOptions<boolean, UnitNames> = {}) {
const {
controls: exposeControls = false,
updateInterval = 30_000,
} = options
const { now, ...controls } = useNow({ interval: updateInterval, controls: true })
const timeAgo = computed(() => formatTimeAgo(new Date(resolveUnref(time)), options, unref(now.value)))
if (exposeControls) {
return {
timeAgo,
...controls,
}
}
else {
return timeAgo
}
}
export function formatTimeAgo<UnitNames extends string = UseTimeAgoUnitNamesDefault>(from: Date, options: FormatTimeAgoOptions<UnitNames> = {}, now: Date | number = Date.now()): string {
const {
max,
messages = DEFAULT_MESSAGES as UseTimeAgoMessages<UnitNames>,
fullDateFormatter = DEFAULT_FORMATTER,
units = DEFAULT_UNITS,
showSecond = false,
rounding = 'round',
} = options
const roundFn = typeof rounding === 'number'
? (n: number) => +n.toFixed(rounding)
: Math[rounding]
const diff = +now - +from
const absDiff = Math.abs(diff)
function getValue(diff: number, unit: UseTimeAgoUnit) {
return roundFn(Math.abs(diff) / unit.value)
}
function format(diff: number, unit: UseTimeAgoUnit) {
const val = getValue(diff, unit)
const past = diff > 0
const str = applyFormat(unit.name as UnitNames, val, past)
return applyFormat(past ? 'past' : 'future', str, past)
}
function applyFormat(name: UnitNames | keyof UseTimeAgoMessagesBuiltIn, val: number | string, isPast: boolean) {
const formatter = messages[name]
if (typeof formatter === 'function')
return formatter(val as never, isPast)
return formatter.replace('{0}', val.toString())
}
// less than a minute
if (absDiff < 60000 && !showSecond)
return messages.justNow
if (typeof max === 'number' && absDiff > max)
return fullDateFormatter(new Date(from))
if (typeof max === 'string') {
const unitMax = units.find(i => i.name === max)?.max
if (unitMax && absDiff > unitMax)
return fullDateFormatter(new Date(from))
}
for (const [idx, unit] of units.entries()) {
const val = getValue(diff, unit)
if (val <= 0 && units[idx - 1])
return format(diff, units[idx - 1])
if (absDiff < unit.max)
return format(diff, unit)
}
return messages.invalid
}