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 ? (
|
{hasTree ? (
|
||||||
<DirectoryTreeMultiSelect
|
<DirectoryTreeMultiSelect
|
||||||
nodes={nodes}
|
nodes={nodes}
|
||||||
@@ -189,6 +201,7 @@ export default function TableFieldMultiSelect({
|
|||||||
<li
|
<li
|
||||||
key={row.id}
|
key={row.id}
|
||||||
className="flex items-center gap-2 px-3 py-2 hover:bg-accent cursor-pointer text-sm"
|
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); }}
|
onMouseDown={(e) => { e.preventDefault(); toggle(rowId); }}
|
||||||
>
|
>
|
||||||
<Checkbox checked={selectedSet.has(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 ? (
|
{hasTree ? (
|
||||||
<DirectoryTreeSelect
|
<DirectoryTreeSelect
|
||||||
nodes={nodes}
|
nodes={nodes}
|
||||||
@@ -173,18 +185,22 @@ export default function TableFieldSelect({
|
|||||||
>
|
>
|
||||||
—
|
—
|
||||||
</li>
|
</li>
|
||||||
{filtered.map((row) => (
|
{filtered.map((row) => {
|
||||||
|
const label = row.values[displayColumnIndex!] || row.values[0] || '';
|
||||||
|
return (
|
||||||
<li
|
<li
|
||||||
key={row.id}
|
key={row.id}
|
||||||
className="cursor-pointer px-3 py-2 hover:bg-accent"
|
className="cursor-pointer px-3 py-2 hover:bg-accent"
|
||||||
|
title={label}
|
||||||
onMouseDown={(e) => { e.preventDefault(); handleSelect(row.id.toString()); }}
|
onMouseDown={(e) => { e.preventDefault(); handleSelect(row.id.toString()); }}
|
||||||
>
|
>
|
||||||
<div className="flex items-center gap-2 text-sm">
|
<div className="flex items-center gap-2 text-sm">
|
||||||
<Table className="w-3 h-3 text-muted-foreground" />
|
<Table className="w-3 h-3 text-muted-foreground" />
|
||||||
{row.values[displayColumnIndex!] || row.values[0]}
|
{label}
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
))}
|
);
|
||||||
|
})}
|
||||||
{filtered.length === 0 && (
|
{filtered.length === 0 && (
|
||||||
<li className="px-3 py-2 text-sm text-muted-foreground">Нет совпадений</li>
|
<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"
|
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` }}
|
style={{ paddingLeft: `${node.level * 16 + 28}px` }}
|
||||||
onMouseDown={(e) => { e.preventDefault(); onToggle(rowId); }}
|
onMouseDown={(e) => { e.preventDefault(); onToggle(rowId); }}
|
||||||
|
title={node.label}
|
||||||
>
|
>
|
||||||
<Checkbox checked={selected.has(rowId)} />
|
<Checkbox checked={selected.has(rowId)} />
|
||||||
<FileText className="w-4 h-4 shrink-0 text-muted-foreground" />
|
<FileText className="w-4 h-4 shrink-0 text-muted-foreground" />
|
||||||
@@ -94,6 +95,7 @@ function TreeNode({
|
|||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
onToggleExpand(node.id);
|
onToggleExpand(node.id);
|
||||||
}}
|
}}
|
||||||
|
title={node.label}
|
||||||
>
|
>
|
||||||
{isExpanded ? (
|
{isExpanded ? (
|
||||||
<ChevronDown className="w-3.5 h-3.5 shrink-0" />
|
<ChevronDown className="w-3.5 h-3.5 shrink-0" />
|
||||||
|
|||||||
@@ -80,7 +80,7 @@ function TreeNode({
|
|||||||
onClick={() => onChange(rowId)}
|
onClick={() => onChange(rowId)}
|
||||||
>
|
>
|
||||||
<FileText className="w-4 h-4 shrink-0 text-muted-foreground" />
|
<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>
|
</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"
|
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` }}
|
style={{ paddingLeft: `${node.level * 16 + 8}px` }}
|
||||||
onClick={() => onToggle(node.id)}
|
onClick={() => onToggle(node.id)}
|
||||||
|
title={node.label}
|
||||||
>
|
>
|
||||||
{isExpanded ? (
|
{isExpanded ? (
|
||||||
<ChevronDown className="w-3.5 h-3.5 shrink-0" />
|
<ChevronDown className="w-3.5 h-3.5 shrink-0" />
|
||||||
|
|||||||
Reference in New Issue
Block a user