1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495 |
- import React from "react";
- import { useTranslation } from "react-i18next";
- import styled from "styled-components";
- import { useMessage } from "react-sync-board";
- import useNotify from "../../hooks/useNotify";
- import Touch from "../ui/Touch";
- import SidePanel from "../ui/SidePanel";
- import Composer from "./Composer";
- import MessageList from "./MessageList";
- const StyledChat = styled.div`
- height: 100%;
- display: flex;
- flex-direction: column;
- `;
- const NotifCount = styled.div`
- width: 2em;
- height: 2em;
- border-radius: 100%;
- position: absolute;
- top: -5px;
- right: 1.8em;
- background-color: var(--color-success);
- text-align: center;
- line-height: 2em;
- box-shadow: 3px 3px 6px #000000c0;
- `;
- export const MessagePanel = ({ onNewMessage, show, setShow }) => {
- const { t } = useTranslation();
- const { messages, sendMessage } = useMessage(onNewMessage, true);
- return (
- <SidePanel
- open={show}
- onClose={() => {
- setShow(false);
- }}
- position="left"
- noMargin
- title={t("Chat")}
- >
- <StyledChat>
- <MessageList messages={messages} />
- <Composer sendMessage={sendMessage} />
- </StyledChat>
- </SidePanel>
- );
- };
- export const MessageButton = () => {
- const { t } = useTranslation();
- const { add, reset, count } = useNotify();
- const [showPanel, setShowPanel] = React.useState(false);
- const onNewMessage = React.useCallback(() => {
- if (!showPanel) {
- add();
- }
- }, [add, showPanel]);
- React.useEffect(() => {
- if (showPanel) {
- reset();
- }
- }, [reset, showPanel]);
- const countStr = count > 9 ? "9+" : `${count}`;
- return (
- <>
- <div style={{ position: "relative" }}>
- <Touch
- onClick={() => setShowPanel((prev) => !prev)}
- alt={t("Chat")}
- title={t("Chat")}
- label={t("Chat")}
- icon={"message"}
- active={showPanel}
- />
- {count > 0 && <NotifCount>{countStr}</NotifCount>}
- </div>
- <MessagePanel
- onNewMessage={onNewMessage}
- show={showPanel}
- setShow={setShowPanel}
- />
- </>
- );
- };
- export default MessageButton;
|