| 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 from "react"; |
| import { Arrow2Icon, ArrowIcon, CameraIcon, CameraInBubbleIcon, CancelIcon, CrossedEyeIcon, CrossIcon, EmojiIcon, EyeIcon, FolderIcon, InfoIcon, MicroInBubbleIcon, PaperClipIcon, PenIcon } 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 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" |
| > |
| <CrossIcon 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 SelectEmojiButton = (props) => { |
| const [anchorEl, setAnchorEl] = React.useState(null) |
| |
| const handleOpenEmojiPicker = React.useCallback( |
| e => setAnchorEl(anchorEl ? null : e.currentTarget), |
| [anchorEl], |
| ) |
| |
| const handleClose = React.useCallback( |
| () => setAnchorEl(null), |
| [setAnchorEl], |
| ) |
| |
| const onEmojiClick = React.useCallback( |
| (e, emojiObject) => { |
| props.onEmojiSelected(emojiObject.emoji) |
| handleClose() |
| }, |
| [handleClose, props.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> |
| ) |
| } |
| |