105 lines
3.3 KiB
Plaintext
105 lines
3.3 KiB
Plaintext
import React, { useState, useRef, useEffect } from 'react';
|
|
import './RangeQuickPicker.css';
|
|
|
|
function fmt(d) {
|
|
return d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0');
|
|
}
|
|
function presetRange(p) {
|
|
const end = new Date();
|
|
end.setHours(0, 0, 0, 0);
|
|
const start = new Date(end);
|
|
if (p.year === 'this') start.setMonth(0, 1);
|
|
else if (p.month === 'this') start.setDate(1);
|
|
else if (p.month === 'last') {
|
|
start = new Date(end.getFullYear(), end.getMonth() - 1, 1);
|
|
end.setDate(0);
|
|
} else {
|
|
start.setDate(end.getDate() + (p.days || 0));
|
|
if (p.len) start.setDate(end.getDate() - (p.len - 1));
|
|
}
|
|
return { start: fmt(start), end: fmt(end) };
|
|
}
|
|
|
|
const DEFAULT_PRESETS = [
|
|
{ label: '今天', days: 0 },
|
|
{ label: '昨天', days: -1, len: 1 },
|
|
{ label: '近7天', days: -6 },
|
|
{ label: '近30天', days: -29 },
|
|
{ label: '本月', month: 'this' },
|
|
{ label: '上月', month: 'last' },
|
|
{ label: '本年', year: 'this' }
|
|
];
|
|
|
|
export default function RangeQuickPicker({ modelValue = { start: '', end: '' }, presets = DEFAULT_PRESETS, onChange }) {
|
|
const root = useRef(null);
|
|
const [open, setOpen] = useState(false);
|
|
const [start, setStart] = useState(modelValue.start);
|
|
const [end, setEnd] = useState(modelValue.end);
|
|
const [activeIndex, setActiveIndex] = useState(-1);
|
|
|
|
useEffect(() => {
|
|
function onDoc(e) {
|
|
if (root.current && !root.current.contains(e.target)) {
|
|
setOpen(false);
|
|
setActiveIndex(-1);
|
|
}
|
|
}
|
|
document.addEventListener('click', onDoc);
|
|
return () => document.removeEventListener('click', onDoc);
|
|
}, []);
|
|
|
|
const applyPreset = (i) => {
|
|
const r = presetRange(presets[i]);
|
|
setStart(r.start);
|
|
setEnd(r.end);
|
|
setActiveIndex(i);
|
|
};
|
|
const confirm = () => {
|
|
if (onChange) onChange({ start, end });
|
|
setOpen(false);
|
|
setActiveIndex(-1);
|
|
};
|
|
|
|
return (
|
|
<div className="aa-range" ref={root}>
|
|
<div className={'aa-range-trigger' + (open ? ' is-focus' : '')} onClick={() => setOpen((o) => !o)}>
|
|
{modelValue.start && modelValue.end ? (
|
|
<span>
|
|
{modelValue.start} <span className="aa-range-sep">~</span> {modelValue.end}
|
|
</span>
|
|
) : (
|
|
<span className="aa-range-placeholder">请选择时间范围</span>
|
|
)}
|
|
</div>
|
|
{open && (
|
|
<div className="aa-range-pop">
|
|
<div className="aa-range-presets">
|
|
{presets.map((p, i) => (
|
|
<button
|
|
key={i}
|
|
className={'aa-range-preset' + (activeIndex === i ? ' is-active' : '')}
|
|
onClick={applyPreset.bind(null, i)}
|
|
>
|
|
{p.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
<div className="aa-range-custom">
|
|
<input type="date" value={start} onChange={(e) => setStart(e.target.value)} />
|
|
<span className="aa-range-tilde">~</span>
|
|
<input type="date" value={end} onChange={(e) => setEnd(e.target.value)} />
|
|
</div>
|
|
<div className="aa-range-actions">
|
|
<button className="aa-range-cancel" onClick={() => setOpen(false)}>
|
|
取消
|
|
</button>
|
|
<button className="aa-range-ok" onClick={confirm}>
|
|
确定
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|