feat(client): hide history mobile records lines on swipe

Jozwiaczek · Sep 4, 2021 · 81c39e9 · 81c39e9
1 parent b5df1e9
commit 81c39e9
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 22 deletions.
diff --git a/packages/client/src/elements/Swipeout/Swipeout.stories.tsx b/packages/client/src/elements/Swipeout/Swipeout.stories.tsx
@@ -62,7 +62,8 @@ Default.args = {
   ],
   onOpen: () => console.log('onOpen'),
   onClose: () => console.log('onClose'),
-  onSwipe: () => console.log('onSwipe'),
+  onSwipeStart: () => console.log('onSwipeStart'),
+  onSwipeEnd: () => console.log('onSwipeEnd'),
   autoClose: true,
   disabled: false,
 };
diff --git a/packages/client/src/elements/Swipeout/Swipeout.types.d.ts b/packages/client/src/elements/Swipeout/Swipeout.types.d.ts
@@ -17,7 +17,8 @@ interface SwipeoutProps {
   children: ReactNode;
   right: Array<SwipeoutAction>;
   onOpen?: () => void;
-  onSwipe?: () => void;
+  onSwipeStart?: () => void;
+  onSwipeEnd?: () => void;
   onClose?: () => void;
   autoClose?: boolean;
   disabled?: boolean;

diff --git a/packages/client/src/elements/Swipeout/index.tsx b/packages/client/src/elements/Swipeout/index.tsx
@@ -19,7 +19,8 @@ const Swipeout = ({
   autoClose,
   right,
   onOpen,
-  onSwipe,
+  onSwipeStart,
+  onSwipeEnd,
 }: SwipeoutProps) => {
   const outerContainerRef = useRef<HTMLDivElement>(null);
   const draggableElementRef = useRef(null);
@@ -59,6 +60,7 @@ const Swipeout = ({
 
   const handleDragStop = useCallback(
     (event: DraggableEvent, { x }: DraggableData) => {
+      onSwipeEnd && onSwipeEnd();
       setIsDragging(false);
       if (x > 0) {
         return;
@@ -76,13 +78,13 @@ const Swipeout = ({
         onOpen && onOpen();
       }
     },
-    [actionsContainerWidth, close, isOpen, onOpen],
+    [actionsContainerWidth, close, isOpen, onOpen, onSwipeEnd],
   );
 
   const handleDragStart = useCallback(() => {
     setIsDragging(true);
-    onSwipe && onSwipe();
-  }, [onSwipe]);
+    onSwipeStart && onSwipeStart();
+  }, [onSwipeStart]);
 
   const onActionButtonClick = useCallback(
     (onClickCb?: () => void) => () => {

diff --git a/packages/client/src/elements/lists/HistoryCompactList/HistoryCompactList.styled.ts b/packages/client/src/elements/lists/HistoryCompactList/HistoryCompactList.styled.ts
@@ -34,7 +34,7 @@ export const RecordRow = styled.div`
 `;
 
 export const RecordIconCircle = styled.div<RecordIconCircleProps>(
-  ({ theme: { down, breakpoints }, firstRecord, event }) => css`
+  ({ theme: { palette, down, breakpoints }, firstRecord, event, isSwiping }) => css`
     ${getRecordIconCircleColors};
     border-radius: 100%;
     width: ${RECORD_ICON_CIRCLE_SIZE};
@@ -43,34 +43,42 @@ export const RecordIconCircle = styled.div<RecordIconCircleProps>(
     justify-content: center;
     align-items: center;
     position: relative;
+
     ${down(breakpoints.xxs)} {
       display: none;
     }
-    ${(firstRecord || event === HistoryEvent.TurnedOff) &&
-    css`
-      :before {
-        display: none;
-      }
-    `}
-  `,
-);
 
-export const SingleDayRecordsWrapper = styled.div(
-  ({ theme: { palette } }) => css`
-    display: flex;
-    flex-direction: column;
-
-    ${RecordIconCircle}:before {
+    :before {
       content: '';
       position: absolute;
       top: -${RECORD_ICON_CIRCLE_SIZE};
       width: 2px;
       height: ${RECORD_ICON_CIRCLE_SIZE};
       background: ${palette.primary.dark};
+      transition: height 300ms ease-in-out;
     }
+
+    ${isSwiping &&
+    css`
+      :before {
+        height: 0;
+      }
+    `}
+
+    ${(firstRecord || event === HistoryEvent.TurnedOff) &&
+    css`
+      :before {
+        display: none;
+      }
+    `}
   `,
 );
 
+export const SingleDayRecordsWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
 export const TimeLabel = styled.p(
   ({ theme: { palette } }) => css`
     font-weight: 300;

diff --git a/packages/client/src/elements/lists/HistoryCompactList/HistoryCompactList.types.d.ts b/packages/client/src/elements/lists/HistoryCompactList/HistoryCompactList.types.d.ts
@@ -3,4 +3,5 @@ import { HistoryEvent } from '../../../enums/historyEvent.enum';
 interface RecordIconCircleProps {
   event: HistoryEvent;
   firstRecord: boolean;
+  isSwiping: boolean;
 }
diff --git a/packages/client/src/elements/lists/HistoryCompactList/index.tsx b/packages/client/src/elements/lists/HistoryCompactList/index.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useFormatDate, useHistoryCompactListData } from '../../../hooks';
@@ -21,6 +22,10 @@ const HistoryCompactList = () => {
   const formatDate = useFormatDate();
   const mapHistoryEventToLabel = useHistoryEventLabel(true);
   const history = useHistoryCompactListData();
+  const [swipingRecordIndex, setSwipingRecordIndex] = useState<undefined | number>();
+
+  const setSwipingEl = (index: number) => () => setSwipingRecordIndex(index);
+  const clearSwipingEl = () => setSwipingRecordIndex(undefined);
 
   return (
     <ListCard>
@@ -40,11 +45,19 @@ const HistoryCompactList = () => {
                     borderRadius: '12px 0 0 12px',
                   },
                 ]}
+                onOpen={setSwipingEl(index)}
+                onSwipeStart={setSwipingEl(index)}
+                onClose={clearSwipingEl}
+                onSwipeEnd={clearSwipingEl}
                 autoClose
               >
                 <RecordRow>
                   <TimeLabel>{formatDate(createdAt, { timeStyle: 'short' })}</TimeLabel>
-                  <RecordIconCircle event={event} firstRecord={!index}>
+                  <RecordIconCircle
+                    isSwiping={swipingRecordIndex === index || swipingRecordIndex === index - 1}
+                    event={event}
+                    firstRecord={!index}
+                  >
                     {user ? <StyleOpenLockIcon /> : <StyledPowerSupplyIcon />}
                   </RecordIconCircle>
                   <p>{user ? `${user?.firstName} ${user?.lastName}` : t('history.device')}</p>