fix(web): kategori ağacını eski yapısına döndür + toggle tree ikonunu anında tepki verir yap
- category-tree: kılavuz çizgileri + grid-rows aç/kapa animasyonu geri alındı, orijinal smooth yapı (paddingLeft girinti) restore edildi - TreeViewIcon: 80ms gecikmeli/2px küçük hareket yerine gövdeden gecikmesiz scaleX büyüme (tree-grow keyframe, origin-left); grid/list ile aynı anında tepki Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -40,6 +40,7 @@ export function CategoryTree({
|
||||
key={cat.id}
|
||||
category={cat}
|
||||
vehicleId={vehicleId}
|
||||
level={0}
|
||||
parentPrefetching={false}
|
||||
catalogMode={catalogMode}
|
||||
brandName={brandName}
|
||||
@@ -53,6 +54,7 @@ export function CategoryTree({
|
||||
function CategoryNode({
|
||||
category,
|
||||
vehicleId,
|
||||
level,
|
||||
parentPrefetching,
|
||||
catalogMode,
|
||||
brandName,
|
||||
@@ -60,6 +62,7 @@ function CategoryNode({
|
||||
}: {
|
||||
category: Category;
|
||||
vehicleId: string;
|
||||
level: number;
|
||||
parentPrefetching: boolean;
|
||||
catalogMode?: boolean;
|
||||
brandName?: string;
|
||||
@@ -164,6 +167,8 @@ function CategoryNode({
|
||||
category.unavailable && "pointer-events-none opacity-40",
|
||||
);
|
||||
|
||||
const indentStyle = { paddingLeft: `${level * 16 + 12}px` };
|
||||
|
||||
const rowInner = (
|
||||
<>
|
||||
<span aria-hidden className="flex h-5 w-5 shrink-0 items-center justify-center">
|
||||
@@ -184,7 +189,7 @@ function CategoryNode({
|
||||
name={category.name}
|
||||
shimmer={isShimmering}
|
||||
/>
|
||||
<span className="min-w-0 flex-1 break-words leading-snug">{category.name}</span>
|
||||
<span className="min-w-0 flex-1 truncate">{category.name}</span>
|
||||
{category.partCount != null && category.partCount > 0 && (
|
||||
<span className="shrink-0 tabular-nums text-xs text-muted-foreground">
|
||||
{category.partCount}
|
||||
@@ -209,38 +214,35 @@ function CategoryNode({
|
||||
}
|
||||
search={catalogMode && variantSearch ? variantSearch : undefined}
|
||||
className={cn(rowClass, "no-underline")}
|
||||
style={indentStyle}
|
||||
>
|
||||
{rowInner}
|
||||
</Link>
|
||||
) : (
|
||||
<button type="button" onClick={handleExpand} aria-expanded={expanded} className={rowClass}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleExpand}
|
||||
aria-expanded={expanded}
|
||||
className={rowClass}
|
||||
style={indentStyle}
|
||||
>
|
||||
{rowInner}
|
||||
</button>
|
||||
)}
|
||||
{hasChildren && (
|
||||
// Yumuşak aç/kapa: grid-rows 0fr↔1fr (içerik yüksekliği bilmeye gerek yok, JS animasyon yok)
|
||||
<div
|
||||
className={cn(
|
||||
"grid transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none",
|
||||
expanded ? "grid-rows-[1fr]" : "grid-rows-[0fr]",
|
||||
)}
|
||||
>
|
||||
<div className="overflow-hidden">
|
||||
{/* Girinti + kılavuz çizgisi: çizgi parent satırın chevron merkezine (≈22px) hizalanır */}
|
||||
<div className="ml-[22px] border-l border-border">
|
||||
{children.map((child) => (
|
||||
<CategoryNode
|
||||
key={child.id}
|
||||
category={child}
|
||||
vehicleId={vehicleId}
|
||||
parentPrefetching={prefetching}
|
||||
catalogMode={catalogMode}
|
||||
brandName={brandName}
|
||||
variantSearch={variantSearch}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{hasChildren && expanded && (
|
||||
<div>
|
||||
{children.map((child) => (
|
||||
<CategoryNode
|
||||
key={child.id}
|
||||
category={child}
|
||||
vehicleId={vehicleId}
|
||||
level={level + 1}
|
||||
parentPrefetching={prefetching}
|
||||
catalogMode={catalogMode}
|
||||
brandName={brandName}
|
||||
variantSearch={variantSearch}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -75,8 +75,8 @@ export function ListViewIcon({ isActive, className }: ViewIconProps) {
|
||||
);
|
||||
}
|
||||
|
||||
// ── Tree → kök + iki dal; aktifken dallar gövdeden dışarı kayar ──
|
||||
// Diğer ikonlar gibi transition tabanlı (anında tepki); dallar her zaman görünür.
|
||||
// ── Tree → kök + iki dal; aktifte dallar gövdeden anında "büyüyerek" çıkar ──
|
||||
// Gecikme yok, dallar her zaman görünür: tıklama anında belirgin tepki verir.
|
||||
export function TreeViewIcon({ isActive, className }: ViewIconProps) {
|
||||
return (
|
||||
<span className={cn("relative inline-block h-4 w-4", className)} aria-hidden="true">
|
||||
@@ -90,17 +90,15 @@ export function TreeViewIcon({ isActive, className }: ViewIconProps) {
|
||||
className="absolute rounded bg-current/50"
|
||||
style={{ left: 3, top: 5, width: 1.5, height: 7.5 }}
|
||||
/>
|
||||
{/* iki çocuk dal: dirsek + düğüm */}
|
||||
{/* iki çocuk dal: dirsek + düğüm — origin-left ile gövdeden büyür */}
|
||||
{[0, 1].map((i) => (
|
||||
<span
|
||||
key={i}
|
||||
className="absolute inline-flex items-center transition-transform duration-[340ms] ease-out motion-reduce:transition-none"
|
||||
style={{
|
||||
left: 3,
|
||||
top: i === 0 ? 6.25 : 10.25,
|
||||
transform: isActive ? "translateX(0)" : "translateX(-2px)",
|
||||
transitionDelay: `${i * 80}ms`,
|
||||
}}
|
||||
className={cn(
|
||||
"absolute inline-flex origin-left items-center",
|
||||
isActive && "animate-tree-grow",
|
||||
)}
|
||||
style={{ left: 3, top: i === 0 ? 6.25 : 10.25 }}
|
||||
>
|
||||
<span className="rounded bg-current/50" style={{ width: 3.5, height: 1.5 }} />
|
||||
<span
|
||||
|
||||
@@ -168,6 +168,18 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes tree-grow {
|
||||
0% {
|
||||
transform: scaleX(0.35);
|
||||
}
|
||||
70% {
|
||||
transform: scaleX(1.05);
|
||||
}
|
||||
100% {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes icon-pop {
|
||||
0% {
|
||||
opacity: 0;
|
||||
@@ -221,6 +233,10 @@
|
||||
.animate-icon-pop {
|
||||
animation: icon-pop 0.32s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
.animate-tree-grow {
|
||||
animation: tree-grow 0.24s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
transform-origin: left center;
|
||||
}
|
||||
.carousel-track:hover .animate-scroll-left {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user