1+ import data from "@emoji-mart/data/sets/14/twitter.json"
2+ import Picker from "@emoji-mart/react"
3+ import Button from "@material-ui/core/Button"
4+ import InputAdornment from "@material-ui/core/InputAdornment"
5+ import Popover from "@material-ui/core/Popover"
6+ import { makeStyles } from "@material-ui/core/styles"
17import TextField from "@material-ui/core/TextField"
28import { Group } from "api/typesGenerated"
39import { ChooseOne , Cond } from "components/Conditionals/ChooseOne"
10+ import { OpenDropdown } from "components/DropdownArrows/DropdownArrows"
411import { FormFooter } from "components/FormFooter/FormFooter"
512import { FullPageForm } from "components/FullPageForm/FullPageForm"
613import { FullScreenLoader } from "components/Loader/FullScreenLoader"
714import { Margins } from "components/Margins/Margins"
815import { useFormik } from "formik"
9- import React from "react"
16+ import React , { useRef , useState } from "react"
17+ import { colors } from "theme/colors"
1018import { getFormHelpers , nameValidator , onChangeTrimmed } from "util/formUtils"
1119import * as Yup from "yup"
1220
@@ -26,6 +34,7 @@ const UpdateGroupForm: React.FC<{
2634onCancel :( ) => void
2735isLoading :boolean
2836} > = ( { group, errors, onSubmit, onCancel, isLoading} ) => {
37+ const [ isEmojiPickerOpen , setIsEmojiPickerOpen ] = useState ( false )
2938const form = useFormik < FormData > ( {
3039initialValues :{
3140name :group . name ,
@@ -35,6 +44,10 @@ const UpdateGroupForm: React.FC<{
3544 onSubmit,
3645} )
3746const getFieldHelpers = getFormHelpers < FormData > ( form , errors )
47+ const hasIcon = form . values . avatar_url && form . values . avatar_url !== ""
48+ const emojiButtonRef = useRef < HTMLButtonElement > ( null )
49+ const styles = useStyles ( )
50+ const { t} = useTranslation ( "common" )
3851
3952return (
4053< FullPageForm title = "Group settings" onCancel = { onCancel } >
@@ -53,9 +66,60 @@ const UpdateGroupForm: React.FC<{
5366onChange = { onChangeTrimmed ( form ) }
5467autoFocus
5568fullWidth
56- label = "Avatar URL "
69+ label = "Icon "
5770variant = "outlined"
71+ InputProps = { {
72+ endAdornment :hasIcon ?(
73+ < InputAdornment position = "end" >
74+ < img
75+ alt = ""
76+ src = { form . values . avatar_url }
77+ className = { styles . adornment }
78+ // This prevent browser to display the ugly error icon if the
79+ // image path is wrong or user didn't finish typing the url
80+ onError = { ( e ) => ( e . currentTarget . style . display = "none" ) }
81+ onLoad = { ( e ) => ( e . currentTarget . style . display = "inline" ) }
82+ />
83+ </ InputAdornment >
84+ ) :undefined ,
85+ } }
5886/>
87+
88+ < Button
89+ fullWidth
90+ ref = { emojiButtonRef }
91+ variant = "outlined"
92+ size = "small"
93+ endIcon = { < OpenDropdown /> }
94+ onClick = { ( ) => {
95+ setIsEmojiPickerOpen ( ( v ) => ! v )
96+ } }
97+ >
98+ { t ( "emojiPicker.select" ) }
99+ </ Button >
100+
101+ < Popover
102+ id = "emoji"
103+ open = { isEmojiPickerOpen }
104+ anchorEl = { emojiButtonRef . current }
105+ onClose = { ( ) => {
106+ setIsEmojiPickerOpen ( false )
107+ } }
108+ >
109+ < Picker
110+ theme = "dark"
111+ data = { data }
112+ onEmojiSelect = { ( emojiData ) => {
113+ form
114+ . setFieldValue ( "avatar_url" , `/emojis/${ emojiData . unified } )
115+ . catch ( ( ex ) => {
116+ console . error ( ex )
117+ } )
118+ setIsEmojiPickerOpen ( false )
119+ } }
120+ />
121+ </ Popover >
122+
59123< FormFooter onCancel = { onCancel } isLoading = { isLoading } />
60124</ form >
61125</ FullPageForm >
@@ -100,4 +164,21 @@ export const SettingsGroupPageView: React.FC<SettingsGroupPageViewProps> = ({
100164)
101165}
102166
167+ const useStyles = makeStyles ( ( theme ) => ( {
168+ "@global" :{
169+ "em-emoji-picker" :{
170+ "--rgb-background" :theme . palette . background . paper ,
171+ "--rgb-input" :colors . gray [ 17 ] ,
172+ "--rgb-color" :colors . gray [ 4 ] ,
173+ } ,
174+ } ,
175+ adornment :{
176+ width :theme . spacing ( 3 ) ,
177+ height :theme . spacing ( 3 ) ,
178+ } ,
179+ iconField :{
180+ paddingBottom :theme . spacing ( 0.5 ) ,
181+ } ,
182+ } ) )
183+
103184export default SettingsGroupPageView