143 lines
3.8 KiB
TypeScript
143 lines
3.8 KiB
TypeScript
import { useId, useState, type ReactNode } from 'react';
|
|
import { Button } from '@/components/ui/Button';
|
|
import { Select } from '@/components/ui/Select';
|
|
|
|
type QueryPanelProps = {
|
|
title: ReactNode;
|
|
summary?: ReactNode;
|
|
children: ReactNode;
|
|
};
|
|
|
|
type PaginationProps = {
|
|
total?: number;
|
|
page?: number;
|
|
totalPages?: number;
|
|
previousDisabled?: boolean;
|
|
nextDisabled?: boolean;
|
|
onPrevious?: () => void;
|
|
onNext?: () => void;
|
|
onPageChange?: (page: number) => void;
|
|
pageSize?: number;
|
|
pageSizeOptions?: number[];
|
|
onPageSizeChange?: (pageSize: number) => void;
|
|
};
|
|
|
|
type InlineTextPreviewProps = {
|
|
label: ReactNode;
|
|
leading?: ReactNode;
|
|
children: ReactNode;
|
|
};
|
|
|
|
export function QueryPanel({ title, summary, children }: QueryPanelProps) {
|
|
return (
|
|
<div className="surface ui-query-panel">
|
|
<h2>{title}</h2>
|
|
<div className="ui-query-panel__grid">{children}</div>
|
|
{summary ? <p className="ui-query-panel__summary">{summary}</p> : null}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function PaginationJump({
|
|
page,
|
|
pages,
|
|
onPageChange,
|
|
}: {
|
|
page: number;
|
|
pages: number;
|
|
onPageChange: (page: number) => void;
|
|
}) {
|
|
const [targetPage, setTargetPage] = useState(String(page));
|
|
return (
|
|
<label className="ui-pagination__jump">
|
|
第{' '}
|
|
<input
|
|
aria-label="跳转页码"
|
|
min="1"
|
|
max={pages}
|
|
onChange={(event) => setTargetPage(event.target.value)}
|
|
onKeyDown={(event) => {
|
|
if (event.key === 'Enter') onPageChange(Number(targetPage));
|
|
}}
|
|
type="number"
|
|
value={targetPage}
|
|
/>{' '}
|
|
/ {pages} 页
|
|
</label>
|
|
);
|
|
}
|
|
|
|
export function Pagination({
|
|
total,
|
|
page = 1,
|
|
totalPages,
|
|
previousDisabled = true,
|
|
nextDisabled = true,
|
|
onPrevious,
|
|
onNext,
|
|
onPageChange,
|
|
pageSize,
|
|
pageSizeOptions = [10, 25, 50, 100],
|
|
onPageSizeChange,
|
|
}: PaginationProps) {
|
|
const pageSizeId = useId();
|
|
const pages = Math.max(1, totalPages ?? (typeof total === 'number' ? Math.ceil(total / (pageSize ?? 10)) : page));
|
|
|
|
function changePage(nextPage: number) {
|
|
onPageChange?.(Math.min(pages, Math.max(1, nextPage)));
|
|
}
|
|
|
|
return (
|
|
<div className="ui-pagination">
|
|
{typeof total === 'number' ? <span>显示 {total} 条记录</span> : <span />}
|
|
<div>
|
|
{typeof pageSize === 'number' && onPageSizeChange ? (
|
|
<>
|
|
<label className="sr-only" htmlFor={pageSizeId}>
|
|
每页数量
|
|
</label>
|
|
<Select
|
|
id={pageSizeId}
|
|
value={String(pageSize)}
|
|
options={pageSizeOptions.map((value) => ({ value: String(value), label: `${value} 条/页` }))}
|
|
onChange={(event) => onPageSizeChange(Number(event.target.value))}
|
|
/>
|
|
</>
|
|
) : null}
|
|
<Button disabled={previousDisabled} onClick={onPrevious} size="sm" variant="ghost">
|
|
上一页
|
|
</Button>
|
|
{onPageChange ? (
|
|
<Button disabled={page <= 1} onClick={() => changePage(1)} size="sm" variant="ghost">
|
|
首页
|
|
</Button>
|
|
) : null}
|
|
<Button size="sm" variant="secondary">
|
|
{page}
|
|
</Button>
|
|
{onPageChange ? <PaginationJump key={page} page={page} pages={pages} onPageChange={changePage} /> : null}
|
|
{onPageChange ? (
|
|
<Button disabled={page >= pages} onClick={() => changePage(pages)} size="sm" variant="ghost">
|
|
末页
|
|
</Button>
|
|
) : null}
|
|
<Button disabled={nextDisabled} onClick={onNext} size="sm" variant="ghost">
|
|
下一页
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function InlineTextPreview({ label, leading, children }: InlineTextPreviewProps) {
|
|
return (
|
|
<div className="ui-inline-text-preview">
|
|
<span>{label}</span>
|
|
<p>
|
|
{leading}
|
|
{children}
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|