update,

03_source/mobile/src/pages/DemoReactWhatsAppClone/components/ReplyTo.js

@@ -0,0 +1,54 @@
+import { CreateAnimation, IonButton, IonCol, IonIcon, IonLabel, IonRow } from '@ionic/react';
+import { closeCircleOutline } from 'ionicons/icons';
+import { useEffect } from 'react';
+import { useState } from 'react';
+
+const ReplyTo = ({ contact, replyToMessage = false, replyToAnimationRef, setReplyToMessage, messageSent }) => {
+  const [cancellingReplyTo, setCancellingReplyTo] = useState(false);
+
+  useEffect(() => {
+    messageSent && cancelReplyTo();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [messageSent]);
+
+  const slideAnimation = {
+    property: 'transform',
+    fromValue: 'translateY(100px)',
+    toValue: 'translateY(0px)',
+  };
+
+  const replyToAnimation = {
+    duration: 300,
+    direction: !cancellingReplyTo ? 'normal' : 'reverse',
+    iterations: '1',
+    fromTo: [slideAnimation],
+    easing: 'ease-in-out',
+  };
+
+  //  Cancel the reply-to
+  const cancelReplyTo = async () => {
+    setCancellingReplyTo(true);
+    await replyToAnimationRef.current.animation.play();
+    setCancellingReplyTo(false);
+    setReplyToMessage(false);
+  };
+
+  return (
+    <CreateAnimation ref={replyToAnimationRef} {...replyToAnimation}>
+      <IonRow className="ion-align-items-center chat-reply-to-row" id="replyTo">
+        <IonCol size="10" className="chat-reply-to-container">
+          <IonLabel className="chat-reply-to-name">{contact}</IonLabel>
+          <IonLabel className="chat-reply-to-message">{replyToMessage.preview}</IonLabel>
+        </IonCol>
+
+        <IonCol size="1">
+          <IonButton fill="clear" onClick={cancelReplyTo}>
+            <IonIcon size="large" icon={closeCircleOutline} color="primary" />
+          </IonButton>
+        </IonCol>
+      </IonRow>
+    </CreateAnimation>
+  );
+};
+
+export default ReplyTo;