init commit,

01_Requirements/REQ0050/references/ionic-react-whatsapp-clone-main/src/components/ReplyTo.js

@@ -0,0 +1,69 @@
+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;