From 1ae87e954bb352910267c15b5ba773d185bca9d2 Mon Sep 17 00:00:00 2001 From: c00b3r Date: Mon, 16 Jun 2025 15:21:03 +0500 Subject: [PATCH 1/2] feat: enhance NewSelect component with reset functionality and improved styling --- src/components/NewSelect.tsx | 60 +++++++++++++++++++++++------------- src/pages/DashboardPage.tsx | 1 + 2 files changed, 39 insertions(+), 22 deletions(-) diff --git a/src/components/NewSelect.tsx b/src/components/NewSelect.tsx index 32c67c0..968aa81 100644 --- a/src/components/NewSelect.tsx +++ b/src/components/NewSelect.tsx @@ -3,18 +3,26 @@ import ChevronDownIcon from "./icons/ChevronDownIcon"; import ChevronUpIcon from "./icons/ChevronUpIcon"; import clsx from "clsx"; import CloseIcon from "./icons/CloseIcon"; +import Button from "./Button"; +import CheckIcon from "./icons/CheckIcon"; +import { useClickAway } from "@uidotdev/usehooks"; function NewSelect({ data, isGrid, placeholder, + resetTitle, }: { data: T[]; isGrid: boolean; placeholder: string; + resetTitle: string; }) { const [selectedValues, setSelectedValues] = useState([]); const [isSelectVisible, setIsSelectVisible] = useState(false); + const selectRef = useClickAway(() => { + setIsSelectVisible(false); + }); const handleSelectClick = (item: T) => { const isItemSelected = selectedValues.some((val) => val.name === item.name); @@ -41,7 +49,10 @@ function NewSelect({ ) : ( -
+
({ )} onClick={() => setIsSelectVisible(!isSelectVisible)} > -
+
{selectedValues.length > 0 - ? selectedValues.map((value, index) => { - return ( -
- {value.name + - (index !== selectedValues.length - 1 ? ", " : "")} -
- ); - }) + ? selectedValues.map(({ name }) => name).join(", ") : placeholder}
@@ -79,27 +83,39 @@ function NewSelect({ )} >
-
setSelectedValues([])} - > - - - - Выбрать всё +
+
-
+
{data.map((item, index) => (
handleSelectClick(item)} > +
+ {selectedValues + .map((value) => value.name) + .includes(item.name) && ( + + + + )} +
{item.name}
))} diff --git a/src/pages/DashboardPage.tsx b/src/pages/DashboardPage.tsx index 9edac6a..2cba9de 100644 --- a/src/pages/DashboardPage.tsx +++ b/src/pages/DashboardPage.tsx @@ -76,6 +76,7 @@ function DashboardPage() { ]} isGrid={false} placeholder="Выберите сервер" + resetTitle="Все сервера" />
From 38671b77e4b0bbce915febc7f971afbf244617c7 Mon Sep 17 00:00:00 2001 From: c00b3r Date: Mon, 16 Jun 2025 16:20:57 +0500 Subject: [PATCH 2/2] feat: refactor NewSelect component to support grid layout and enhance item styling --- src/components/NewSelect.tsx | 75 ++++++++++++++++++++++-------------- src/pages/DashboardPage.tsx | 54 ++++++++++++++++++-------- 2 files changed, 84 insertions(+), 45 deletions(-) diff --git a/src/components/NewSelect.tsx b/src/components/NewSelect.tsx index 968aa81..6243074 100644 --- a/src/components/NewSelect.tsx +++ b/src/components/NewSelect.tsx @@ -40,15 +40,7 @@ function NewSelect({ console.log(selectedValues); }, [selectedValues]); - return isGrid ? ( -
-
- {data.map((item) => ( -
{item.name}
- ))} -
-
- ) : ( + return (
({ boxShadow: "0px 4px 40px 0px #0000000D, 0px 2px 2px 0px #0000000D", }} > -
+
- {data.map((item, index) => ( -
handleSelectClick(item)} - > -
- {selectedValues - .map((value) => value.name) - .includes(item.name) && ( - - - - )} -
- {item.name} + {isGrid ? ( +
+ {data.map((item) => ( +
handleSelectClick(item)} + > +
+ {selectedValues + .map((value) => value.name) + .includes(item.name) && ( + +
+ +
+ + )} +
+

{item.name}

+
+ ))}
- ))} + ) : ( + <> + {data.map((item, index) => ( +
handleSelectClick(item)} + > +
+ {selectedValues + .map((value) => value.name) + .includes(item.name) && ( + + + + )} +
+ {item.name} +
+ ))} + + )}
diff --git a/src/pages/DashboardPage.tsx b/src/pages/DashboardPage.tsx index 2cba9de..520b792 100644 --- a/src/pages/DashboardPage.tsx +++ b/src/pages/DashboardPage.tsx @@ -61,23 +61,43 @@ function DashboardPage() {
- +
+ + +
+

Последние сеансы