реализовал логику выбора карточек животных

Lapkipomoshi · Jun 5, 2024 · 7212a08 · 7212a08
1 parent 979a64b
commit 7212a08
Show file tree

Hide file tree

Showing 3 changed files with 145 additions and 24 deletions.
diff --git a/src/images/check.svg b/src/images/check.svg
diff --git a/src/modules/ShelterPetsType/ShelterPetsType.jsx b/src/modules/ShelterPetsType/ShelterPetsType.jsx
@@ -9,6 +9,10 @@ import DeleteIcon from '../../images/DeleteIcon/DeleteIcon';
 const ShelterPetsType = ({ type }) => {
   const { id  } = useParams();
   const [pets, setPets] = useState([]);
+  const [isChecked, setIsChecked] = useState(false);
+  const [isSelected, setIsSelected] = useState(false);
+  const [checkedId, setCheckedId] = useState([]);
+
   useEffect(() => {
     shelterPetsApi
       .getPetsByShelterId(id, type, 24, 0)
@@ -21,7 +25,6 @@ const ShelterPetsType = ({ type }) => {
   }, []);
 
   let petType;
-
   switch (type.toLowerCase()) {
     case 'cat':
       petType = 'Кошки';
@@ -38,30 +41,80 @@ const ShelterPetsType = ({ type }) => {
     default:
       petType = '';
   }
+  const handleButtonSelectedClick = () => {
+    setIsSelected(true);
+  };
+  const handleButtonCancelSelectedClick = () => {
+    setIsSelected(false);
+    setCheckedId([]);
+  };
+  const handleButtonSelectedAllClick = () => {
+    setIsSelected(true);
+    setIsChecked(true);
+    setCheckedId((items) => {
+      return [...items, ...pets];
+    });
+  };
+  const handleButtonCancelSelectedAllClick = () => {
+    setIsSelected(false);
+    setIsChecked(false);
+    setCheckedId([]);
+  };
+  const handleChangePet = (pet) => {
+    if (!checkedId.includes(pet)) {
+      setCheckedId((items) => {
+        return [...items, pet];
+      });
+    } else {
+      setCheckedId (
+        checkedId.filter((petsId) => {
+          return !(petsId === pet);
+        })
+      );
+    }
+  };
 
   return (
     <div className='shelter-pets-type'>
       <div className='shelter-pets-type__header'>
         <h2 className='shelter-pets-type__title'>{petType}</h2>
         <div className='shelter-pets-type__controls'>
-          <Button theme='tertiary' className='shelter-pets-type__btn-deleted'>
-            <DeleteIcon />
-            Удалить
-          </Button>
+          {checkedId.length !== 0 ? (
+            <Button theme='tertiary' className='shelter-pets-type__btn-deleted'>
+              <DeleteIcon />
+              Удалить
+            </Button>
+          ) : null}
           {pets.length !== 0 ? (
             <>
-              <Button
+              {!isSelected && !isChecked && <Button
                 theme='tertiary'
                 className='shelter-pets-type__btn-selected'
+                onClick={handleButtonSelectedClick}
               >
                 Выбрать
-              </Button>
-              <Button
+              </Button>}
+              {isSelected && !isChecked && <Button
+                theme='tertiary'
+                className='shelter-pets-type__btn-cancel-selected'
+                onClick={handleButtonCancelSelectedClick}
+              >
+                Отменить выбор
+              </Button>}
+              {!isChecked && <Button
                 theme='tertiary'
                 className='shelter-pets-type__btn-selected'
+                onClick={handleButtonSelectedAllClick}
               >
                 Выбрать все
-              </Button>
+              </Button>}
+              {isChecked && <Button
+                theme='tertiary'
+                className='shelter-pets-type__btn-cancel-selected'
+                onClick={handleButtonCancelSelectedAllClick}
+              >
+                Отменить выбор
+              </Button>}
             </>
           ) : (
             <Button
@@ -73,15 +126,33 @@ const ShelterPetsType = ({ type }) => {
           }
         </div>
       </div>
-      <ul className='shelter-pets-type__list'>
-        {pets.map((pet) => {
-          return (
-            <li className='shelter-pets-type__list-item'  key={pet.id}>
-              <PetCard link={`../${id}/pets/${pet.id}`} name={pet.name} age={pet.age} sex={pet.sex} gallery={pet.gallery} />
-            </li>
-          );
-        })}
-      </ul>
+      {pets.length !== 0 ? (
+        <ul className='shelter-pets-type__list'>
+          {pets.map((pet) => {
+            const isCheckedPet = checkedId.includes(pet);
+            const className = `${isSelected ? 'shelter-pets-type__input_selected' : ''} ${isCheckedPet ? 'shelter-pets-type__input_checked' : ''}`;
+            return (
+              <li className='shelter-pets-type__list-item' key={pet.id}>
+                <input
+                  className={`shelter-pets-type__input ${className}`}
+                  type='checkbox'
+                  onChange={() => {
+                    handleChangePet(pet);
+                  }}
+                />
+                <PetCard
+                  link={!isSelected ? `../${id}/pets/${pet.id}` : ''}
+                  id={pet.id}
+                  name={pet.name}
+                  age={pet.age}
+                  sex={pet.sex}
+                  gallery={pet.gallery}
+                />
+              </li>
+            );
+          })}
+        </ul>
+      ) : null}
     </div>
   );
 };

diff --git a/src/modules/ShelterPetsType/ShelterPetsType.scss b/src/modules/ShelterPetsType/ShelterPetsType.scss
@@ -7,13 +7,14 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 49px;
 }
 
 .shelter-pets-type__controls {
   width: 646px;
   display: flex;
+  justify-content: flex-end;
   align-items: center;
+  gap: 0 24px;
 }
 
 .shelter-pets-type__btn-deleted {
@@ -28,11 +29,7 @@
   }
 }
 
-.shelter-pets-type__btn-selected {
-  margin-left: 24px;
-}
-
-.shelter-pets-type__btn-selected_active {
+.shelter-pets-type__btn-cancel-selected {
   position: relative;
 
   &::before {
@@ -59,6 +56,56 @@
   flex-wrap: wrap;
   gap: 24px;
   margin: 0;
+  margin-top: 36px;
   padding: 0;
   list-style-type: none;
+}
+
+.shelter-pets-type__list-item {
+  position: relative;
+}
+
+.shelter-pets-type__input {
+  display: none;
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  width: 20px;
+  height: 20px;
+
+  &::before {
+    position: absolute;
+    content: '';
+    width: 20px;
+    height: 20px;
+    background-color: var(--color-background-additional);
+    opacity: 0;
+    z-index: 10;
+  }
+
+  &::after {
+    position: absolute;
+    content: '';
+    width: 20px;
+    height: 20px;
+    background-color: var(--color-accent-base);
+    background-image: url('../../images/check.svg');
+    background-position: center;
+    opacity: 0;
+    z-index: 15;
+  }
+}
+
+.shelter-pets-type__input_selected {
+  display: block;
+
+  &::before {
+    opacity: 1;
+  }
+}
+
+.shelter-pets-type__input_checked {
+  &::after {
+    opacity: 1;
+  }
 }