import React from 'react'; import styled, { css } from 'styled-components'; import { lighten } from 'polished'; import Button from './Button'; import { FaBox } from 'react-icons/fa'; import { MdCheckCircle } from 'react-icons/md'; const Toast = ({ state, toast, onClickUndo, hasMsgs, ...rest }) => { // Message에서 archive box클릭시 토스트 알람 return ( <ToastWrapper toast={toast}> <StFaBox /> <ToastText> {state === 'all' ? '대화 보관 처리됨' : '대화 보관 처리 취소됨'} {' · '} </ToastText> <Button btnType="underlined" padding="0rem 0rem 0rem 0.2rem" fontSize="1.4rem" hover="background: none" // ! 3번 실행취소버튼 클릭 이벤트 발생 // ! MsgSectionHeaderContainer.js로 이동 onClick={onClickUndo} style={{ borderRadius: '0px' }} {...rest} > 실행 취소 </Button> </ToastWrapper> ); }; const UndoToast = ({ undoToast }) => { return ( <UndoToastWrapper undoToast={undoToast}> <StFaBox /> <ToastText>실행 취소</ToastText> </UndoToastWrapper> ); }; const CopyToast = () => { // Message에서 클립보드 복사 버튼 클릭 시 토스트 알람 return ( <ClipboardToastWrapper> <MdCheckCircle /> <ToastText>클립보드에 복사 완료</ToastText> </ClipboardToastWrapper> ); }; const toastWrapperStyle = css` display: flex; align-items: center; border: 1px solid ${({ theme }) => lighten(0.2, theme.color.gray)}; border-radius: 3rem; background-color: ${({ theme }) => theme.color.white}; padding: 0.9rem 1.5rem; width: fit-content; box-shadow: 0rem 0rem 2rem ${({ theme }) => lighten(0.1, theme.color.gray)}; `; const ToastWrapper = styled.div` ${toastWrapperStyle} position: absolute; bottom: 0rem; left: 18.75rem; overflow: hidden; transform: translate3d(-50%, 0, 0); z-index: 1; opacity: 0; visibility: hidden; transition: all 0.2s ease-in; ${({ toast }) => toast && css` opacity: 1; visibility: visible; bottom: 5rem; `} `; const UndoToastWrapper = styled.div` ${toastWrapperStyle} position: absolute; bottom: 0rem; left: 18.75rem; overflow: hidden; transform: translate3d(-50%, 0, 0); z-index: 1; opacity: 0; visibility: hidden; transition: all 0.2s ease-in; ${({ undoToast }) => undoToast && css` opacity: 1; visibility: visible; bottom: 5rem; `} `; const ClipboardToastWrapper = styled.div` ${toastWrapperStyle} `; const ToastText = styled.div` padding-left: 0.5rem; font-size: 1.4rem; `; const StFaBox = styled(FaBox)` font-size: 1.2rem; `; export { Toast, CopyToast, UndoToast };