feat: collapse/expand all — toggle icon in ArrayEditor + pricing sections
- ArrayEditor shows ChevronsUpDown toggle when collapsible with 2+ items - Toggle appears even without label prop (fixes pricing missing icon) - Pricing: centralized section state with toggle-all button for all 3 sections
This commit is contained in:
@@ -2,7 +2,7 @@
|
||||
|
||||
import { useState, useRef, useCallback, useEffect } from "react";
|
||||
import { createPortal } from "react-dom";
|
||||
import { Plus, Trash2, GripVertical, ChevronDown } from "lucide-react";
|
||||
import { Plus, Trash2, GripVertical, ChevronDown, ChevronsUpDown } from "lucide-react";
|
||||
|
||||
interface ArrayEditorProps<T> {
|
||||
items: T[];
|
||||
@@ -293,8 +293,23 @@ export function ArrayEditor<T>({
|
||||
|
||||
return (
|
||||
<div>
|
||||
{label && (
|
||||
<h3 className="text-sm font-medium text-neutral-300 mb-3">{label}</h3>
|
||||
{(label || (collapsible && items.length > 1)) && (
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
{label ? <h3 className="text-sm font-medium text-neutral-300">{label}</h3> : <div />}
|
||||
{collapsible && items.length > 1 && (() => {
|
||||
const allCollapsed = collapsed.size >= items.length;
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => allCollapsed ? setCollapsed(new Set()) : setCollapsed(new Set(items.map((_, i) => i)))}
|
||||
className="rounded p-1 text-neutral-500 hover:text-white transition-colors"
|
||||
title={allCollapsed ? "Развернуть все" : "Свернуть все"}
|
||||
>
|
||||
<ChevronsUpDown size={16} className={`transition-transform duration-200 ${allCollapsed ? "" : "rotate-90"}`} />
|
||||
</button>
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{addPosition === "top" && (
|
||||
|
||||
Reference in New Issue
Block a user