hansjone/netx
1
0
Fork 0
mirror of https://github.com/hansjone/netx.git synced 2026-10-16 16:50:46 +08:00
Code Issues Projects Releases 1 Packages Wiki Activity Actions

Refine business compare configuration and history UI

Browse source
This commit is contained in:
oliver 2026-10-10 23:50:06 +08:00
parent 4d5101ec3a
commit 051a10ad95
16 changed files with 1107 additions and 236 deletions
Download patch file Download diff file Expand all files Collapse all files

23
web/src/components/ui/FieldSelect.tsx
View file

@ -1,4 +1,4 @@
import type { ReactNode, SelectHTMLAttributes } from "react";
import { useId, type ReactNode, type SelectHTMLAttributes } from "react";
import { Label } from "@heroui/react";
/** Compact labeled native select — HeroUI Select is heavy for dense ops forms. */
@ -9,6 +9,8 @@ export function FieldSelect({
fullWidth,
className = "",
children,
id,
"aria-describedby": describedBy,
...props
}: {
label?: ReactNode;
@ -18,17 +20,26 @@ export function FieldSelect({
className?: string;
children: ReactNode;
} & SelectHTMLAttributes<HTMLSelectElement>) {
const generatedId = useId();
const selectId = id || generatedId;
const hintId = `${selectId}-hint`;
return (
<label className={`ui-field${fullWidth ? " ui-field--full" : ""}${className ? ` ${className}` : ""}`}>
<div className={`ui-field${fullWidth ? " ui-field--full" : ""}${className ? ` ${className}` : ""}`}>
{label ? (
<Label isRequired={required} className="ui-field__label">
<Label htmlFor={selectId} isRequired={required} className="ui-field__label">
{label}
</Label>
) : null}
<select className="ui-field__select" required={required} {...props}>
<select
className="ui-field__select"
required={required}
{...props}
id={selectId}
aria-describedby={[describedBy, hint ? hintId : null].filter(Boolean).join(" ") || undefined}
>
{children}
</select>
{hint ? <span className="ui-field__hint">{hint}</span> : null}
</label>
{hint ? <span id={hintId} className="ui-field__hint">{hint}</span> : null}
</div>
);
}