From 559fcbc0e4b2e32181ee062dcb505c4e4abd8156 Mon Sep 17 00:00:00 2001
From: Jordan Knott <jordan@jordanthedev.com>
Date: Thu, 16 Jul 2020 20:26:21 -0500
Subject: [PATCH] fix: all cards in lists animate on label toggle at same time

---
 frontend/src/shared/components/Card/Styles.ts  | 15 ++++++++-------
 frontend/src/shared/components/Card/index.tsx  | 18 +++++++++++-------
 frontend/src/shared/components/Lists/index.tsx | 18 +++++++++++++++++-
 3 files changed, 36 insertions(+), 15 deletions(-)

diff --git a/frontend/src/shared/components/Card/Styles.ts b/frontend/src/shared/components/Card/Styles.ts
index 16fa190..fb92dfd 100644
--- a/frontend/src/shared/components/Card/Styles.ts
+++ b/frontend/src/shared/components/Card/Styles.ts
@@ -103,9 +103,9 @@ export const ListCardDetails = styled.div<{ complete: boolean }>`
 `;
 
 const labelVariantExpandAnimation = keyframes`
-  0%   {min-width: 40px; height: 8px;}
-  50%  {min-width: 56px; height: 8px;}
-  100% {min-width: 56px; height: 16px;}
+  0%   {min-width: 40px; width: 40px; height: 8px;}
+  50%  {min-width: 56px; width: auto; height: 8px;}
+  100% {min-width: 56px; width: auto; height: 16px;}
 `;
 
 const labelTextVariantExpandAnimation = keyframes`
@@ -115,9 +115,9 @@ const labelTextVariantExpandAnimation = keyframes`
 `;
 
 const labelVariantShrinkAnimation = keyframes`
-  0% {min-width: 56px; height: 16px;}
-  50%  {min-width: 56px; height: 8px;}
-  100%   {min-width: 40px; height: 8px;}
+  0% {min-width: 56px; width: auto; height: 16px;}
+  50%  {min-width: 56px; width: auto; height: 8px;}
+  100%   {min-width: 40px; width: 40px; height: 8px;}
 `;
 
 const labelTextVariantShrinkAnimation = keyframes`
@@ -137,6 +137,7 @@ export const ListCardLabel = styled.span<{ variant: 'small' | 'large' }>`
       ? css`
           height: 8px;
           min-width: 40px;
+          width: 40px;
           & ${ListCardLabelText} {
             transform: scale(0);
             visibility: hidden;
@@ -146,13 +147,13 @@ export const ListCardLabel = styled.span<{ variant: 'small' | 'large' }>`
       : css`
           height: 16px;
           min-width: 56px;
+          width: auto;
         `}
 
   padding: 0 8px;
   max-width: 198px;
   float: left;
   margin: 0 4px 4px 0;
-  width: auto;
   border-radius: 4px;
   color: #fff;
   display: flex;
diff --git a/frontend/src/shared/components/Card/index.tsx b/frontend/src/shared/components/Card/index.tsx
index 49291cc..acd223d 100644
--- a/frontend/src/shared/components/Card/index.tsx
+++ b/frontend/src/shared/components/Card/index.tsx
@@ -51,9 +51,12 @@ type Props = {
   onCardLabelClick?: () => void;
   onCardMemberClick?: OnCardMemberClick;
   editable?: boolean;
+  setToggleLabels?: (toggle: false) => void;
   onEditCard?: (taskGroupID: string, taskID: string, cardName: string) => void;
   onCardTitleChange?: (name: string) => void;
   labelVariant?: CardLabelVariant;
+  toggleLabels?: boolean;
+  toggleDirection?: 'shrink' | 'expand';
 };
 
 const Card = React.forwardRef(
@@ -64,6 +67,9 @@ const Card = React.forwardRef(
       taskID,
       taskGroupID,
       complete,
+      toggleLabels = false,
+      toggleDirection = 'shrink',
+      setToggleLabels,
       onClick,
       labels,
       title,
@@ -82,10 +88,6 @@ const Card = React.forwardRef(
     $cardRef: any,
   ) => {
     const [currentCardTitle, setCardTitle] = useState(title);
-    const [toggleLabels, setToggleLabels] = useState(false);
-    const [toggleDirection, setToggleDirection] = useState<'shrink' | 'expand'>(
-      labelVariant === 'large' ? 'shrink' : 'expand',
-    );
     const $editorRef: any = useRef();
 
     useEffect(() => {
@@ -159,8 +161,6 @@ const Card = React.forwardRef(
               onClick={e => {
                 e.stopPropagation();
                 if (onCardLabelClick) {
-                  setToggleLabels(true);
-                  setToggleDirection(labelVariant === 'large' ? 'shrink' : 'expand');
                   onCardLabelClick();
                 }
               }}
@@ -168,7 +168,11 @@ const Card = React.forwardRef(
               {labels &&
                 labels.map(label => (
                   <ListCardLabel
-                    onAnimationEnd={() => setToggleLabels(false)}
+                    onAnimationEnd={() => {
+                      if (setToggleLabels) {
+                        setToggleLabels(false);
+                      }
+                    }}
                     variant={labelVariant ?? 'large'}
                     color={label.labelColor.colorHex}
                     key={label.id}
diff --git a/frontend/src/shared/components/Lists/index.tsx b/frontend/src/shared/components/Lists/index.tsx
index 4c5a6ea..762c203 100644
--- a/frontend/src/shared/components/Lists/index.tsx
+++ b/frontend/src/shared/components/Lists/index.tsx
@@ -123,6 +123,11 @@ const SimpleLists: React.FC<SimpleProps> = ({
   };
 
   const [currentComposer, setCurrentComposer] = useState('');
+  const [toggleLabels, setToggleLabels] = useState(false);
+  const [toggleDirection, setToggleDirection] = useState<'shrink' | 'expand'>(
+    cardLabelVariant === 'large' ? 'shrink' : 'expand',
+  );
+
   return (
     <BoardContainer>
       <BoardWrapper>
@@ -162,12 +167,23 @@ const SimpleLists: React.FC<SimpleProps> = ({
                                           {taskProvided => {
                                             return (
                                               <Card
+                                                toggleDirection={toggleDirection}
+                                                toggleLabels={toggleLabels}
                                                 labelVariant={cardLabelVariant}
                                                 wrapperProps={{
                                                   ...taskProvided.draggableProps,
                                                   ...taskProvided.dragHandleProps,
                                                 }}
-                                                onCardLabelClick={onCardLabelClick}
+                                                setToggleLabels={setToggleLabels}
+                                                onCardLabelClick={() => {
+                                                  setToggleLabels(true);
+                                                  setToggleDirection(
+                                                    cardLabelVariant === 'large' ? 'shrink' : 'expand',
+                                                  );
+                                                  if (onCardLabelClick) {
+                                                    onCardLabelClick();
+                                                  }
+                                                }}
                                                 ref={taskProvided.innerRef}
                                                 taskID={task.id}
                                                 complete={task.complete ?? false}