fix: прокрутка колёсиком и tooltip для длинных названий в поле справочника
This commit is contained in:
@@ -172,7 +172,19 @@ export default function TableFieldMultiSelect({
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div className="max-h-60 overflow-auto">
|
||||
<div
|
||||
className="max-h-60 overflow-auto"
|
||||
onWheel={(e) => {
|
||||
const el = e.currentTarget;
|
||||
const isUp = e.deltaY < 0;
|
||||
const isDown = e.deltaY > 0;
|
||||
const atTop = el.scrollTop <= 0;
|
||||
const atBottom = el.scrollTop + el.clientHeight >= el.scrollHeight - 1;
|
||||
if ((isUp && atTop) || (isDown && atBottom)) return;
|
||||
e.preventDefault();
|
||||
el.scrollTop += e.deltaY;
|
||||
}}
|
||||
>
|
||||
{hasTree ? (
|
||||
<DirectoryTreeMultiSelect
|
||||
nodes={nodes}
|
||||
@@ -189,6 +201,7 @@ export default function TableFieldMultiSelect({
|
||||
<li
|
||||
key={row.id}
|
||||
className="flex items-center gap-2 px-3 py-2 hover:bg-accent cursor-pointer text-sm"
|
||||
title={label}
|
||||
onMouseDown={(e) => { e.preventDefault(); toggle(rowId); }}
|
||||
>
|
||||
<Checkbox checked={selectedSet.has(rowId)} />
|
||||
|
||||
@@ -157,7 +157,19 @@ export default function TableFieldSelect({
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div className="max-h-60 overflow-auto">
|
||||
<div
|
||||
className="max-h-60 overflow-auto"
|
||||
onWheel={(e) => {
|
||||
const el = e.currentTarget;
|
||||
const isUp = e.deltaY < 0;
|
||||
const isDown = e.deltaY > 0;
|
||||
const atTop = el.scrollTop <= 0;
|
||||
const atBottom = el.scrollTop + el.clientHeight >= el.scrollHeight - 1;
|
||||
if ((isUp && atTop) || (isDown && atBottom)) return;
|
||||
e.preventDefault();
|
||||
el.scrollTop += e.deltaY;
|
||||
}}
|
||||
>
|
||||
{hasTree ? (
|
||||
<DirectoryTreeSelect
|
||||
nodes={nodes}
|
||||
@@ -173,18 +185,22 @@ export default function TableFieldSelect({
|
||||
>
|
||||
—
|
||||
</li>
|
||||
{filtered.map((row) => (
|
||||
{filtered.map((row) => {
|
||||
const label = row.values[displayColumnIndex!] || row.values[0] || '';
|
||||
return (
|
||||
<li
|
||||
key={row.id}
|
||||
className="cursor-pointer px-3 py-2 hover:bg-accent"
|
||||
title={label}
|
||||
onMouseDown={(e) => { e.preventDefault(); handleSelect(row.id.toString()); }}
|
||||
>
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<Table className="w-3 h-3 text-muted-foreground" />
|
||||
{row.values[displayColumnIndex!] || row.values[0]}
|
||||
{label}
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
);
|
||||
})}
|
||||
{filtered.length === 0 && (
|
||||
<li className="px-3 py-2 text-sm text-muted-foreground">Нет совпадений</li>
|
||||
)}
|
||||
|
||||
@@ -74,6 +74,7 @@ function TreeNode({
|
||||
className="flex items-center gap-1.5 px-2 py-1.5 text-sm rounded hover:bg-accent cursor-pointer"
|
||||
style={{ paddingLeft: `${node.level * 16 + 28}px` }}
|
||||
onMouseDown={(e) => { e.preventDefault(); onToggle(rowId); }}
|
||||
title={node.label}
|
||||
>
|
||||
<Checkbox checked={selected.has(rowId)} />
|
||||
<FileText className="w-4 h-4 shrink-0 text-muted-foreground" />
|
||||
@@ -94,6 +95,7 @@ function TreeNode({
|
||||
e.preventDefault();
|
||||
onToggleExpand(node.id);
|
||||
}}
|
||||
title={node.label}
|
||||
>
|
||||
{isExpanded ? (
|
||||
<ChevronDown className="w-3.5 h-3.5 shrink-0" />
|
||||
|
||||
@@ -80,7 +80,7 @@ function TreeNode({
|
||||
onClick={() => onChange(rowId)}
|
||||
>
|
||||
<FileText className="w-4 h-4 shrink-0 text-muted-foreground" />
|
||||
<span className="flex-1 truncate">{node.label}</span>
|
||||
<span className="flex-1 truncate" title={node.label}>{node.label}</span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
@@ -93,6 +93,7 @@ function TreeNode({
|
||||
className="w-full flex items-center gap-1.5 px-2 py-1.5 text-sm rounded hover:bg-accent text-left font-medium"
|
||||
style={{ paddingLeft: `${node.level * 16 + 8}px` }}
|
||||
onClick={() => onToggle(node.id)}
|
||||
title={node.label}
|
||||
>
|
||||
{isExpanded ? (
|
||||
<ChevronDown className="w-3.5 h-3.5 shrink-0" />
|
||||
|
||||
Reference in New Issue
Block a user