filter

2025-11-08 15:11:53 +03:00
parent b12a3acf1d
commit f7924cd564
3 changed files with 110 additions and 115 deletions
--- a/src/components/drop-down-list/Filter.tsx
+++ b/src/components/drop-down-list/Filter.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import { cn } from '../../lib/cn';
-import { checkMark, chevroneDropDownList } from '../../assets/icons/input';
+import { checkMark } from '../../assets/icons/input';
 import { useClickOutside } from '../../hooks/useClickOutside';
+import { Sort, SortActive } from '../../assets/icons/filters';

 export interface FilterItem {
  text: string;
@@ -11,106 +12,101 @@ export interface FilterItem {
 interface FilterProps {
  disabled?: boolean;
  className?: string;
-    onChange: (state: string[]) => void; // теперь массив выбранных значений
+  onChange: (items: FilterItem[]) => void;
  defaultState?: FilterItem[];
  items: FilterItem[];
 }

 export const Filter: React.FC<FilterProps> = ({
+  disabled = false,
  className = '',
  onChange,
  defaultState = [],
-    items = [{ text: '', value: '' }],
+  items = [],
 }) => {
-    if (items.length === 0) items.push({ text: '', value: '' });
-
-    const [selectedValues, setSelectedValues] =
-        React.useState<FilterItem[]>(defaultState);
-    const [active, setActive] = React.useState<boolean>(false);
-
-    React.useEffect(() => {
-        onChange(selectedValues.map((v) => v.value));
-    }, [selectedValues]);
+  const [value, setValue] = React.useState<FilterItem[]>(defaultState);
+  const [active, setActive] = React.useState(false);

  const ref = React.useRef<HTMLDivElement>(null);
-    useClickOutside(ref, () => setActive(false));
+
+  useClickOutside(ref, () => {
+    setActive(false);
+  });
+
+  React.useEffect(() => {
+    onChange(value);
+  }, [value]);

  const toggleItem = (item: FilterItem) => {
-        const exists = selectedValues.some((v) => v.value === item.value);
+    const exists = value.some((val) => val.value === item.value);
    if (exists) {
-            setSelectedValues(
-                selectedValues.filter((v) => v.value !== item.value),
-            );
+      setValue(value.filter((val) => val.value !== item.value));
    } else {
-            setSelectedValues([...selectedValues, item]);
+      setValue([...value, item]);
    }
  };

-    const displayText =
-        selectedValues.length > 0
-            ? selectedValues.map((v) => v.text).join(', ')
-            : 'Выберите...';
-
  return (
    <div className={cn('relative', className)} ref={ref}>
      <div
        className={cn(
-                    'flex items-center h-[40px] rounded-[10px] bg-liquid-lighter px-[16px] w-[220px]',
-                    'text-[16px] font-bold cursor-pointer select-none',
-                    'transition-all active:scale-95 duration-300 overflow-hidden whitespace-nowrap text-ellipsis',
+          'items-center h-[40px] rounded-full bg-liquid-lighter w-[40px] flex',
+          'text-[18px] font-bold cursor-pointer select-none',
+          'overflow-hidden',
+          (active || value.length > 0) && 'w-fit border-liquid-brightmain border-[1px] border-solid',
        )}
-                onClick={() => setActive(!active)}
-                title={displayText}
+        onClick={() => {
+          if (!disabled) setActive(!active);
+        }}
      >
-                {displayText}
+        <div className="text-liquid-brightmain pl-[42px] pr-[16px] w-fit">
+          {value.length}
+        </div>
      </div>

+      {/* Sort icons */}
      <img
-                src={chevroneDropDownList}
+        src={Sort}
        className={cn(
-                    'absolute right-[16px] h-[24px] w-[24px] top-[8.5px] rotate-0 transition-all duration-300 pointer-events-none',
-                    active && 'rotate-180',
+          'absolute left-[8px] top-[8px] h-[24px] w-[24px] rotate-0 transition-all duration-300 pointer-events-none',
+        )}
+      />
+      <img
+        src={SortActive}
+        className={cn(
+          'absolute left-[8px] top-[8px] h-[24px] w-[24px] rotate-0 transition-all duration-300 pointer-events-none opacity-0',
+          (active || value.length > 0) && 'opacity-100',
        )}
      />

+      {/* Dropdown */}
      <div
        className={cn(
-                    'absolute rounded-[10px] bg-liquid-lighter w-[220px] left-0 top-[48px] z-50 transition-all duration-300',
+          'absolute rounded-[10px] bg-liquid-lighter w-[460px] left-0 top-[48px] z-50 transition-all duration-300',
          'grid overflow-hidden',
-                    active
-                        ? 'grid-rows-[1fr] opacity-100'
-                        : 'grid-rows-[0fr] opacity-0',
+          active ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0',
        )}
      >
        <div className="overflow-hidden p-[8px]">
-                    <div
-                        className={cn(
-                            'overflow-y-scroll max-h-[220px] thin-scrollbar pr-[8px]',
-                            'grid grid-cols-2 gap-[4px]',
-                        )}
-                    >
-                        {items.map((v, i) => {
-                            const isSelected = selectedValues.some(
-                                (sel) => sel.value === v.value,
-                            );
+          <div className="overflow-y-scroll max-h-[200px] thin-scrollbar pr-[8px] grid grid-cols-2 gap-[20px]">
+            {items.map((v) => {
+              const selected = value.some((val) => val.value === v.value);
              return (
                <div
-                                    key={i}
+                  key={v.value}
                  className={cn(
-                                        'cursor-pointer h-[36px] relative transition-all duration-300 flex items-center pl-[8px] pr-[24px] rounded-[6px]',
-                                        'text-[14px] font-medium select-none',
-                                        'hover:bg-liquid-background',
-                                        isSelected &&
-                                            'bg-liquid-background font-semibold',
+                    'cursor-pointer h-[36px] relative transition-all duration-300',
+                    'text-[16px] font-medium select-none flex items-center pl-[8px]',
+                    'hover:bg-liquid-background rounded-[10px]',
+                    selected && 'bg-liquid-background/50',
                  )}
                  onClick={() => toggleItem(v)}
                >
                  {v.text}
-
-                                    {isSelected && (
+                  {selected && (
                    <img
                      src={checkMark}
-                                            className="absolute right-[6px] w-[16px] h-[16px]"
+                      className="absolute right-[8px] h-[20px] w-[20px]"
                    />
                  )}
                </div>
--- a/src/components/drop-down-list/Sorter.tsx
+++ b/src/components/drop-down-list/Sorter.tsx
@@ -45,8 +45,8 @@ export const Sorter: React.FC<SorterProps> = ({
                className={cn(
                    'grid items-center h-[40px] rounded-full bg-liquid-lighter grid-cols-[40px]',
                    'text-[18px] font-bold cursor-pointer select-none',
-                    'transitin-all active:scale-95 duration-300 overflow-hidden',
-                    active && ' grid-cols-[1fr]',
+                    'overflow-hidden',
+                    active && ' grid-cols-[1fr]  border-liquid-brightmain border-[1px] border-solid',
                )}
                onClick={() => {
                    setActive(!active);
@@ -54,7 +54,7 @@ export const Sorter: React.FC<SorterProps> = ({
            >
                <div
                    className={cn(
-                        'text-liquid-brightmain pl-[40px] pr-[16px]',
+                        'text-liquid-brightmain pl-[42px] pr-[16px]',
                        active && '',
                    )}
                >
@@ -63,7 +63,7 @@ export const Sorter: React.FC<SorterProps> = ({
                </div>
            </div>

-            <div className="h-[24px] w-[24px] bg-red-500"></div>
+            <div className="h-[24px] w-[24px]"></div>
            <img
                src={Sort}
                className={cn(
--- a/src/views/home/missions/Filter.tsx
+++ b/src/views/home/missions/Filter.tsx
@@ -14,7 +14,7 @@ const Filters = () => {
    ];

    return (
-        <div className=" h-[50px] mb-[20px] flex">
+        <div className=" h-[50px] mb-[20px] flex gap-[20px]">
            <div></div>

            <Sorter
@@ -35,12 +35,11 @@ const Filters = () => {
                onChange={(v) => console.log(v)}
            />

-            {/* <Filter
+            <Filter
                items={items}
-                defaultState={[items[0], items[3]]} // начальные выбранные элементы
-                onChange={(values) => console.log(values)} // обработчик изменения
-                className="w-[240px]"
-            /> */}
+                defaultState={[]}
+                onChange={(values) => console.log(values)}
+            />
        </div>
    );
 };