| import { QuestionMark } from '@mui/icons-material'; |
| import { Box, ClickAwayListener, IconButton, Popper } from '@mui/material'; |
| import { styled } from '@mui/material/styles'; |
| import EmojiPicker from 'emoji-picker-react'; |
| import React, { useCallback, useState } from 'react'; |
| |
| import { |
| Arrow2Icon, |
| Arrow3Icon, |
| ArrowIcon, |
| CameraIcon, |
| CameraInBubbleIcon, |
| CancelIcon, |
| CrossedEyeIcon, |
| CrossIcon, |
| EmojiIcon, |
| EyeIcon, |
| FolderIcon, |
| InfoIcon, |
| MicroInBubbleIcon, |
| PaperClipIcon, |
| PenIcon, |
| SaltireIcon, |
| } from './svgIcons'; |
| |
| const RoundButton = styled(({ Icon, ...props }) => ( |
| <IconButton {...props} disableRipple={true}> |
| <Icon fontSize="inherit" /> |
| </IconButton> |
| ))(({ theme }) => ({ |
| border: `1px solid ${theme.palette.primary.dark}`, |
| color: theme.palette.primary.dark, |
| fontSize: '15px', |
| '&:hover': { |
| background: theme.palette.primary.light, |
| }, |
| '&:active': { |
| color: '#FFF', |
| background: theme.palette.primary.dark, |
| }, |
| '&.MuiIconButton-sizeSmall': { |
| height: '15px', |
| width: '15px', |
| }, |
| '&.MuiIconButton-sizeMedium': { |
| height: '30px', |
| width: '30px', |
| }, |
| '&.MuiIconButton-sizeLarge': { |
| height: '53px', |
| width: '53px', |
| }, |
| })); |
| |
| export const CancelPictureButton = (props) => { |
| return <RoundButton {...props} aria-label="remove picture" Icon={CancelIcon} size="large" />; |
| }; |
| |
| export const EditPictureButton = (props) => { |
| return <RoundButton {...props} aria-label="edit picture" Icon={PenIcon} size="large" />; |
| }; |
| |
| export const UploadPictureButton = (props) => { |
| return <RoundButton {...props} aria-label="upload picture" Icon={FolderIcon} size="large" />; |
| }; |
| |
| export const TakePictureButton = (props) => { |
| return <RoundButton {...props} aria-label="take picture" Icon={CameraIcon} size="large" />; |
| }; |
| |
| export const InfoButton = (props) => { |
| return <RoundButton {...props} aria-label="informations" Icon={InfoIcon} size="small" />; |
| }; |
| |
| export const TipButton = (props) => { |
| return <RoundButton {...props} aria-label="tip" Icon={QuestionMark} size="medium" />; |
| }; |
| |
| export const MoreButton = styled((props) => { |
| return ( |
| <IconButton {...props} disableRipple={true} aria-label="more"> |
| <CrossIcon fontSize="inherit" /> |
| </IconButton> |
| ); |
| })(({ theme }) => ({ |
| border: `1px solid ${theme.palette.primary.dark}`, |
| color: theme.palette.primary.dark, |
| fontSize: '10px', |
| height: '20px', |
| width: '20px', |
| '&:hover': { |
| background: theme.palette.primary.light, |
| }, |
| '&:active': { |
| color: '#FFF', |
| background: theme.palette.primary.dark, |
| }, |
| })); |
| |
| export const BackButton = styled((props) => { |
| return ( |
| <IconButton {...props} disableRipple={true} aria-label="back"> |
| <ArrowIcon fontSize="inherit" /> |
| </IconButton> |
| ); |
| })(({ theme }) => ({ |
| color: theme.palette.primary.dark, |
| fontSize: '15px', |
| height: '30px', |
| width: '51px', |
| borderRadius: '5px', |
| '&:hover': { |
| background: theme.palette.primary.light, |
| }, |
| })); |
| |
| export const CloseButton = styled((props) => { |
| return ( |
| <IconButton {...props} disableRipple={true} aria-label="close"> |
| <SaltireIcon fontSize="inherit" /> |
| </IconButton> |
| ); |
| })(({ theme }) => ({ |
| color: theme.palette.primary.dark, |
| fontSize: '15px', |
| height: '30px', |
| width: '30px', |
| borderRadius: '5px', |
| '&:hover': { |
| background: theme.palette.primary.light, |
| }, |
| })); |
| |
| export const ToggleVisibilityButton = styled(({ visible, ...props }) => { |
| const Icon = visible ? CrossedEyeIcon : EyeIcon; |
| return ( |
| <IconButton {...props} disableRipple={true}> |
| <Icon fontSize="inherit" /> |
| </IconButton> |
| ); |
| })(({ theme }) => ({ |
| color: theme.palette.primary.dark, |
| fontSize: '15px', |
| height: '15px', |
| width: '15px', |
| '&:hover': { |
| background: theme.palette.primary.light, |
| }, |
| })); |
| |
| const SquareButton = styled(({ Icon, ...props }) => ( |
| <IconButton {...props} disableRipple={true}> |
| <Icon fontSize="inherit" /> |
| </IconButton> |
| ))(({ theme }) => ({ |
| color: '#7E7E7E', |
| fontSize: '25px', |
| height: '36px', |
| width: '36px', |
| borderRadius: '5px', |
| '&:hover': { |
| background: '#E5E5E5', |
| }, |
| })); |
| |
| export const RecordVideoMessageButton = (props) => { |
| return <SquareButton {...props} aria-label="record video message" Icon={CameraInBubbleIcon} />; |
| }; |
| |
| export const RecordVoiceMessageButton = (props) => { |
| return <SquareButton {...props} aria-label="record voice message" Icon={MicroInBubbleIcon} />; |
| }; |
| |
| export const UploadFileButton = (props) => { |
| return <SquareButton {...props} aria-label="upload file" Icon={PaperClipIcon} />; |
| }; |
| |
| export const SendMessageButton = (props) => { |
| return <SquareButton {...props} aria-label="send message" Icon={Arrow2Icon} />; |
| }; |
| |
| export const ReplyMessageButton = styled(({ Icon, ...props }) => ( |
| <IconButton {...props} disableRipple={true} aria-label="send message"> |
| <Arrow3Icon fontSize="inherit" /> |
| </IconButton> |
| ))(({ theme }) => ({ |
| color: theme.palette.primary.dark, |
| fontSize: '20px', |
| height: '20px', |
| width: '20px', |
| borderRadius: '5px', |
| '&:hover': { |
| background: '#E5E5E5', |
| }, |
| })); |
| |
| export const EmojiButton = styled(({ emoji, ...props }) => ( |
| <IconButton {...props} disableRipple={true}> |
| {emoji} |
| </IconButton> |
| ))(({ theme }) => ({ |
| color: 'white', |
| fontSize: '20px', |
| height: '20px', |
| width: '20px', |
| })); |
| |
| export const SelectEmojiButton = ({ onEmojiSelected, ...props }) => { |
| const [anchorEl, setAnchorEl] = useState(null); |
| |
| const handleOpenEmojiPicker = useCallback((e) => setAnchorEl(anchorEl ? null : e.currentTarget), [anchorEl]); |
| |
| const handleClose = useCallback(() => setAnchorEl(null), [setAnchorEl]); |
| |
| const onEmojiClick = useCallback( |
| (e, emojiObject) => { |
| onEmojiSelected(emojiObject.emoji); |
| handleClose(); |
| }, |
| [handleClose, onEmojiSelected] |
| ); |
| |
| const open = Boolean(anchorEl); |
| const id = open ? 'simple-popover' : undefined; |
| |
| return ( |
| <ClickAwayListener onClickAway={handleClose}> |
| <Box> |
| <SquareButton |
| aria-describedby={id} |
| aria-label="select emoji" |
| Icon={EmojiIcon} |
| onClick={handleOpenEmojiPicker} |
| /> |
| <Popper id={id} open={open} anchorEl={anchorEl} onClose={handleClose}> |
| <EmojiPicker.default |
| onEmojiClick={onEmojiClick} |
| disableAutoFocus={true} |
| disableSkinTonePicker={true} |
| native |
| /> |
| </Popper> |
| </Box> |
| </ClickAwayListener> |
| ); |
| }; |