93 lines
3.5 KiB
TypeScript
93 lines
3.5 KiB
TypeScript
import { Truck } from 'lucide-react';
|
|
import { SurfaceCard } from '../../../components/ui/surface';
|
|
import type { CustomerType, DateQuickPick } from '../types';
|
|
import { QUICK_PICK_OPTIONS, type RangeMode } from './model';
|
|
|
|
interface DailyRangeControlsProps {
|
|
pick: RangeMode;
|
|
dateRange: { start: string; end: string };
|
|
customer: CustomerType;
|
|
onQuickPick: (pick: DateQuickPick) => void;
|
|
onCustomPick: () => void;
|
|
onDateRangeChange: (field: 'start' | 'end', value: string) => void;
|
|
onCustomerChange: (customer: CustomerType) => void;
|
|
}
|
|
|
|
export default function DailyRangeControls({
|
|
pick,
|
|
dateRange,
|
|
customer,
|
|
onQuickPick,
|
|
onCustomPick,
|
|
onDateRangeChange,
|
|
onCustomerChange,
|
|
}: DailyRangeControlsProps) {
|
|
return (
|
|
<SurfaceCard className="p-2 md:p-3">
|
|
<div className="flex items-center gap-2 overflow-x-auto pb-1">
|
|
{QUICK_PICK_OPTIONS.map(opt => (
|
|
<button
|
|
key={opt.id}
|
|
onClick={() => onQuickPick(opt.id)}
|
|
className={`min-h-9 shrink-0 rounded-xl border px-3 text-[12px] font-black transition-colors ${
|
|
pick === opt.id
|
|
? 'border-blue-200 bg-blue-50 text-blue-600 shadow-sm'
|
|
: 'border-slate-100 bg-white text-slate-500 hover:bg-slate-50'
|
|
}`}
|
|
>
|
|
{opt.label}
|
|
</button>
|
|
))}
|
|
<button
|
|
onClick={onCustomPick}
|
|
className={`min-h-9 shrink-0 rounded-xl border px-3 text-[12px] font-black transition-colors ${
|
|
pick === 'custom'
|
|
? 'border-blue-200 bg-blue-50 text-blue-600 shadow-sm'
|
|
: 'border-slate-100 bg-white text-slate-500 hover:bg-slate-50'
|
|
}`}
|
|
>
|
|
自定义
|
|
</button>
|
|
</div>
|
|
|
|
<div className="mt-2 grid grid-cols-2 gap-2">
|
|
<label className="min-w-0 rounded-xl border border-slate-100 bg-slate-50 px-3 py-2">
|
|
<span className="block text-[10px] font-black text-slate-400">开始日期</span>
|
|
<input
|
|
type="date"
|
|
value={dateRange.start}
|
|
onChange={event => onDateRangeChange('start', event.target.value)}
|
|
onInput={event => onDateRangeChange('start', event.currentTarget.value)}
|
|
className="mt-1 h-6 w-full bg-transparent text-[12px] font-black text-slate-800 outline-none"
|
|
/>
|
|
</label>
|
|
<label className="min-w-0 rounded-xl border border-slate-100 bg-slate-50 px-3 py-2">
|
|
<span className="block text-[10px] font-black text-slate-400">结束日期</span>
|
|
<input
|
|
type="date"
|
|
value={dateRange.end}
|
|
onChange={event => onDateRangeChange('end', event.target.value)}
|
|
onInput={event => onDateRangeChange('end', event.currentTarget.value)}
|
|
className="mt-1 h-6 w-full bg-transparent text-[12px] font-black text-slate-800 outline-none"
|
|
/>
|
|
</label>
|
|
</div>
|
|
|
|
<div className="mt-2 grid grid-cols-2 gap-1 rounded-xl bg-slate-100 p-1">
|
|
{(['lingniu', 'external'] as const).map(option => (
|
|
<button
|
|
key={option}
|
|
onClick={() => onCustomerChange(option)}
|
|
className={`flex min-h-9 items-center justify-center gap-1.5 rounded-lg text-[12px] font-black transition-all ${
|
|
customer === option ? 'bg-white text-slate-900 shadow-sm' : 'text-slate-500 hover:text-slate-700'
|
|
}`}
|
|
>
|
|
<Truck size={14} />
|
|
{option === 'external' ? '外部车辆' : '羚牛车辆'}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</SurfaceCard>
|
|
);
|
|
}
|