isometrik-chat 0.1.0

package/src/view/component/forwardData/index.js

@@ -0,0 +1,327 @@
+import React, { useEffect, useState } from "react";
+import "./styles.css";
+import { chatList } from "../../../Data";
+import { fontSize } from "../../../Data";
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+// import Menu from "../Menu";
+import { createContext } from "react";
+import { ArrowContext } from "../Context";
+import notFound from "../../../assets/images/notFound.jpeg";
+import Badge from '@mui/material/Badge';
+import MenuDialog from "../menuDialog/index";
+import Menu from '@mui/material/Menu';
+import Checkbox from '@mui/material/Checkbox';
+import SendIcon from '@mui/icons-material/Send';
+
+
+let dataCollection = [];
+let aar = [];
+let markRead = [];
+
+let chatMenuData =["Archive chat", "Mute notifications", "Exit group", "Pin chat", "Mark as read"]
+
+function SidebarChat(props,{ dataHandler, disabledKey }) {
+  const [isShown, setIsShown] = useState();
+  const [pinChat, setPinChat] = useState(false);
+  const AppContext = createContext();
+  const [isModalShow, setIsMdalShow] = useState(false);
+  const [chatListItem, setChatListItem] = useState();
+  const Delete = localStorage.getItem("deleteIndex");
+  const Pin = localStorage.getItem("pinIndex");
+  const [pinIcon, setPinIcon] = useState(false);
+  const [key, setKey] = useState();
+  const [pinedData, setPinedData] = useState();
+  const [markedData, setMarkedData] = useState();
+  const [anchorEl, setAnchorEl] = React.useState(null);
+const open = Boolean(anchorEl);
+
+const handleClick = (event) => {
+  setAnchorEl(event.currentTarget);
+};
+const handleClosemodal = () => {
+  setAnchorEl(null);
+};
+
+  const arrowHandler = (index, event, data) => {
+    setAnchorEl(event.currentTarget);
+    // setIsMdalShow(false);
+    // setIsShown(index);
+    // setPinedData(data);
+    // setMarkedData(data);
+    // console.log("nnn", index,data)
+  };
+
+  useEffect(() => {
+    setChatListItem(chatList);
+    dataCollection.push(chatListItem);
+    // if (isModalShow) {
+    //   setIsMdalShow(disabledKey);
+    // }
+  }, []);
+
+  const chatDelete = (deleteItem) => {
+    const chat = chatListItem.filter((data) => data?.id != deleteItem);
+    setChatListItem(chat);
+    setIsMdalShow(!isModalShow);
+    chatListItem?.map((data) => {
+      if (data?.id == deleteItem) {
+      }
+    });
+  };
+
+  const handleClose = () => {
+    setIsMdalShow(!isModalShow);
+  };
+
+  const chatUnPin = (unpinItem) => {
+    const result = chatListItem.filter((data) => data?.id == unpinItem);
+    chatListItem.push(result[0]);
+    chatListItem.shift();
+    const unpin = aar.filter((data) => data != unpinItem);
+    aar = [];
+    aar = [...unpin];
+    setIsMdalShow(!isModalShow);
+  };
+
+  const markChatPin = (markItem) => {
+    markRead.push(markItem);
+    const result = chatListItem.filter((data) => data?.id == markItem);
+    result.forEach((object) => {
+      object.mark = "marked";
+    });
+
+    setIsMdalShow(!isModalShow);
+  };
+
+  const markUnchat = (unMarkItem) => {
+    const unmark = markRead.filter((data) => data != unMarkItem);
+    markRead = [];
+    markRead = [...unmark];
+    setIsMdalShow(!isModalShow);
+  };
+
+  const chatPin = (pinItem) => {
+    const result = chatListItem.filter((data) => data?.id == pinItem);
+    result.forEach((object) => {
+      object.pin = "pined";
+    });
+    chatListItem.unshift(result[0]);
+    setKey(result[0]?.id);
+    aar.push(result[0]?.id);
+    setPinChat(true);
+
+    var uniq = {};
+    var arrFiltered = chatListItem.filter(
+      (obj) => !uniq[obj.id] && (uniq[obj.id] = true)
+    );
+
+    setChatListItem(arrFiltered);
+    setPinIcon(true);
+    setIsMdalShow(!isModalShow);
+  };
+ 
+  if (aar.length > "3") {
+  }
+
+  return (
+    <>
+      <div className="sidebarChat">
+        {chatListItem?.map((data, index) => {
+          // console.log("ssss", data)
+          return (
+            <div>
+              <div className="user_Info" onClick={() => dataHandler(data)}>
+                <Checkbox />
+
+                {data.img ? (
+                  <img src={data.img} className="userContact_image" alt="not" />
+                ) : (
+                  <div
+                    className="userContact_image"
+                    style={{ textAlign: "center" }}
+                  >
+                    {data?.name?.charAt(0)}
+                  </div>
+                )}
+
+                <div className="user_Item">
+                  <div className="user_Div">
+                    <p
+                      style={{ fontSize: fontSize?.name }}
+                      className="user_Name"
+                    >
+                      {data?.name}
+                    </p>
+                    <p
+                      style={{ fontSize: fontSize?.message }}
+                      className="user_Message text_Color"
+                    >
+                      {data?.message}
+                    </p>
+                  </div>
+
+                  {/* <p className="message_Time text_Color  ms-4">
+                    12:00 Pm
+                    <div style={{display:"flex",justifyContent:"center",textAlign:"center",marginTop:"2vh"}}  onClick={(event) => arrowHandler(index, event, data)}>
+                    <Badge badgeContent={3} color="success" >
+                    </Badge> 
+                    
+                    <div
+                      className="arrow d-none"
+                      type="button"
+                    >
+                      <KeyboardArrowDownIcon className=" text_Color"/>
+                    </div>
+                    </div>
+                  </p> */}
+                </div>
+                {/* {pinChat ? (
+                  <div>
+                    {aar?.map((item, index) => {
+                      return (
+                        <div
+                          className={`${
+                            item == data?.id ? "d-block " : "d-none"
+                          }`}
+                        >
+                          <h>
+                            <svg
+                              style={{
+                                position: "absolute",
+                                top: "34px",
+                                right: "65px",
+                              }}
+                              height="15"
+                              width="15"
+                              preserveAspectRatio="xMidYMid meet"
+                              class="text_Color"
+                            >
+                              <path
+                                fill="currentColor"
+                                d="M12.074 4.21 8.7 8.232l.116 4.233a.4.4 0 0 1-.657.318L.43 6.297a.4.4 0 0 1 .199-.702l4.196-.622L8.196.957a.63.63 0 0 1 .887-.078l2.914 2.445a.63.63 0 0 1 .077.887ZM1.294 14.229a.713.713 0 0 1-1.09-.915l2.674-3.64 1.536 1.288-3.12 3.267Z"
+                              ></path>
+                            </svg>
+                          </h>
+                        </div>
+                      );
+                    })}
+                  </div>
+                ) : (
+                  ""
+                )} */}
+
+                {/* <div>
+                  {markRead?.map((item, index) => {
+                    return (
+                      <div
+                        className={`${
+                          item == data?.id ? "d-block " : "d-none"
+                        }`}
+                      >
+                        <div
+                          style={{
+                            height: "22px",
+                            width: "22px",
+                            borderRadius: "20px",
+                            background: "#25d366",
+                            position: "absolute",
+                            top: "31px",
+                            right: "40px",
+                          }}
+                        >
+                          {" "}
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div> */}
+
+                {/* <p className={!isModalShow ? "d-none" : ""}> */}
+                <div
+                  className="menuitems"
+                  // className={`${index == isShown ? "d-block " : "d-none"}`}
+                  style={
+                    {
+                      // position: "fixed",
+                      // zIndex: "10000",
+                      // transformOrigin: "left top",
+                      // transform: "scale(1)",
+                      // opacity: "1",
+                      // top: "30%",
+                      // width: "15%",
+                      // boxShadow:
+                      //   "0 2px 5px 0 rgba(var(--shadow-rgb),.26),0 2px 10px 0 rgba(var(--shadow-rgb),.16)",
+                      // overflow: "hidden",
+                    }
+                  }
+                >
+                  {/* <Menu
+                      isShown={data?.id}
+                      chatDelete={chatDelete}
+                      chatPin={chatPin}
+                      chatUnPin={chatUnPin}
+                      handleClose={handleClose}
+                      data={data}
+                      pinedData={pinedData}
+                      markChatPin={markChatPin}
+                      markedData={markedData}
+                      markUnchat={markUnchat}
+                    /> */}
+
+                  <Menu
+                    id="basic-menu"
+                    anchorEl={anchorEl}
+                    open={open}
+                    onClose={handleClosemodal}
+                    MenuListProps={{
+                      "aria-labelledby": "basic-button",
+                    }}
+                  >
+                    <MenuDialog menuData={chatMenuData} />
+                  </Menu>
+                </div>
+                {/* </p> */}
+              </div>
+            </div>
+          );
+        })}
+
+        {aar.map((list) => {
+          <div>{list} </div>;
+        })}
+      </div>
+      <div className="frward-footer">
+        {/* <h1 style={{position:"flxed"}}>dsfdssfsd</h1> */}
+        <span>
+          <div
+            style={{
+              padding: "10px",
+              background: "#00a884",
+              borderRadius: "30px",
+              position: "relative",
+              top: "-25px",
+              left: "150px",
+              color: "white",
+            }}
+          >
+            <SendIcon
+              sx={{ fontSize: "xx-large" }}
+              onClick={props?.handleCloseForwardPopup}
+            />
+          </div>
+        </span>
+      </div>
+      <style jsx>{`
+        :global(
+            .menuitems
+              > .css-1poimk-MuiPaper-root-MuiMenu-paper-MuiPaper-root-MuiPopover-paper
+          ) {
+          box-shadow: none !important;
+          padding: 10px;
+        }
+      `}</style>
+    </>
+  );
+}
+
+export default SidebarChat;

package/src/view/component/forwardData/styles.css

@@ -0,0 +1,112 @@
+.user_Info {
+    display: flex;
+    padding: 10px;
+    max-height: 4.4rem;
+    position: relative;
+}
+
+.user_Info:hover .arrow {
+    display: block !important;
+    padding-left:.7vw;
+    margin-top: -10px;
+    
+}
+/* .arrow{
+    display: none;
+} */
+/* .arrow .text_Color{
+    margin-bottom: 30px;
+} */
+
+.user_Info:hover {
+    cursor: pointer;
+    background-color:var(--chat_hover)
+}
+.user_Info .user_Item {
+    margin-left: 15px;
+    flex: 1;
+    display: flex;
+    justify-content: space-between;
+    padding-bottom: 13px;
+    border-bottom: 1px solid var(--border_color);
+    align-items: center
+}
+
+.css-1poimk-MuiPaper-root-MuiMenu-paper-MuiPaper-root-MuiPopover-paper{
+    box-shadow: none !important;
+}
+
+.user_Item .user_Div {
+    display: block;
+}
+
+.user_Div .user_Name {
+    margin-bottom: 0px;
+    color:var(--black);
+}
+
+.user_Div .user_Message {
+    margin-bottom: 0px;
+    margin-right: 25px;
+
+}
+
+.user_Item .message_Time {
+
+    font-size: 12px;
+    max-height: 18px;
+
+}
+
+.modal-backdrop {
+    background-color: transparent !important;
+}
+
+
+.modal-content {
+    width: 0% !important;
+    padding-left: 0px !important;
+    padding: 0px !important;
+    top: 100px !important;
+    left: -100px !important;
+}
+
+.modal-header {
+    padding: 0px !important;
+    margin: 0px !important;
+    width: 0px !important;
+    height: 0px !important
+}
+
+.modal-dialog {
+    width: 32% !important;
+    border: none !important;
+    outline: none !important;
+}
+
+.btn {
+    color: white !important;
+    margin: 0px !important;
+    padding: 0px !important;
+    width: 25px !important;
+    height: 25px !important;
+}
+
+.css-pwyk3z-MuiBadge-badge{
+    z-index: 0 !important;
+
+}
+
+.css-1p3d99h{
+    z-index: 0 !important;
+}
+
+.frward-footer{
+        position: absolute;
+        top: 565px;
+        width:100%;
+        display:flex;
+         background:var(--profile-header);
+         justify-content:space-around; 
+    
+}

package/src/view/component/forwardPopup/index.js

@@ -0,0 +1,55 @@
+import React from "react";
+import "./styles.css";
+import SearchBar from "../SeachBar";
+import ForwardData from "../forwardData/index";
+import CloseIcon from "@mui/icons-material/Close";
+import styled, { css } from "styled-components";
+import { mobile } from "../../../utils/media";
+
+const SectionTag = styled.form`
+  ${mobile(css`
+    flex: 1;
+  `)}
+`;
+
+function Sidebar(props, { sidebarData, disabledKey }) {
+
+  const dataHandler = (data) => {
+    sidebarData(data);
+  };
+
+
+  return (
+    <>
+      <SectionTag>
+        <div className="sidebar">
+          <div className="sidebar_headerr d-flex">
+            <div>
+              <CloseIcon
+                style={{ marginRight: "20px" }}
+                className="close_icon"
+                onClick={props?.handleCloseForwardPopup}
+              />
+            </div>
+            <div>
+              <h5>Forward message to</h5>
+            </div>
+          </div>
+          <div className="d-flex align-items-center  border-1-light bgWhite">
+            <SearchBar />
+          </div>
+          <div>
+            <div className="chat d-flex">
+              <ForwardData
+                dataHandler={dataHandler}
+                disabledKey={disabledKey}
+                handleCloseForwardPopup={props?.handleCloseForwardPopup}
+              />
+            </div>
+          </div>
+        </div>
+      </SectionTag>
+    </>
+  );
+}
+export default Sidebar;

package/src/view/component/forwardPopup/styles.css

@@ -0,0 +1,144 @@
+.sidebar_headerr {
+    /* justify-content: space-between; */
+    padding: 10px 10px;
+    background-color:var(--profile-header);
+    /* border-right: 1px solid var(--border_color); */
+    color:white;
+    align-items: center;
+  }
+
+  .sidebar_headerr .close_icon{
+    color:var(--gray_color)
+  }
+  
+  .sidebar {
+    flex: 0.3;
+    background-color:var(--white);
+  }
+  
+  .sidebar .bgWhite{
+    background-color: var(--primary-white);
+  }
+  
+  .sidebar .sidebar_headerr .sliderr {
+    height: 100vh;
+    width: 35vw;
+    position: fixed;
+    z-index: 1;
+    top: 0px;
+    left: 0px;
+    overflow-x: hidden;
+    transition: 0.2s;
+    overflow: auto;
+  }
+  
+  .sidebar .sidebar_headerr .slider {
+    height: 100vh;
+    width: 0px;
+    position: fixed;
+    z-index: 1;
+    top: 0px;
+    left: 0px;
+    overflow-x: hidden;
+    transition: 0.2s;
+    overflow: auto;
+  }
+  
+  .sidebar-search {
+    padding: 10px;
+    text-align: center;
+    align-items: center;
+  }
+  
+  .sidebar-right {
+    width: 48%;
+    justify-content: space-around;
+    align-items: center;
+  }
+  
+  .sidebar-input {
+    position: relative;
+    padding-left: 15px !important;
+    font-size: 15px;
+    border: none;
+    outline: none;
+    background: none;
+    color: var(--black);
+  }
+  
+  .sidebar_search-container svg {
+    color: #54656f;
+    margin-left: 12px;
+  }
+  
+  .chat {
+    flex-direction: column;
+    overflow: auto;
+    height: 81vh;
+    padding: 0;
+    background-color: var(--primary-white);
+  }
+  
+  ::-webkit-scrollbar-thumb {
+    background-color: #e9ecef;
+  }
+  
+  ::-webkit-scrollbar-track {
+    background: var(--white) !important;
+  }
+  
+  ::-webkit-scrollbar {
+    width: 6px !important;
+    height: 6px !important;
+  }
+  
+  ::-webkit-scrollbar-thumb {
+    background:var(--gray_color)
+  }
+  
+  .css-1t1j96h-MuiPaper-root-MuiDialog-paper {
+    margin: 0px !important;
+    padding: 0px !important;
+  }
+  
+  .css-hz1bth-MuiDialog-container {
+    height: auto !important;
+  }
+  
+  .css-uhb5lp {
+    margin: 0px !important;
+  }
+  
+  .css-ekeie0 {
+    height: none !important;
+  }
+  
+  .css-ekeie0 {
+    height: auto !important;
+  }
+  
+  .css-1t1j96h-MuiPaper-root-MuiDialog-paper {
+    border-radius: 0px !important;
+  }
+  
+  .sidebar_header .user_image {
+    cursor: pointer;
+  }
+  
+  .filterIcon {
+    margin-top: 15px;
+    padding-right: 10px;
+  }
+  
+  .filter {
+    height: 20px !important;
+    width: 20px !important;
+  }
+  
+  .sidebar-search .searchBox {
+    display: flex;
+    background-color: var(--gray_color);
+    flex: 1;
+    border-radius: 10px;
+  }
+