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,9 @@ 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 ( )
3850
3951return (
4052< FullPageForm title = "Group settings" onCancel = { onCancel } >
@@ -53,9 +65,60 @@ const UpdateGroupForm: React.FC<{
5365onChange = { onChangeTrimmed ( form ) }
5466autoFocus
5567fullWidth
56- label = "Avatar URL "
68+ label = "Icon "
5769variant = "outlined"
70+ InputProps = { {
71+ endAdornment :hasIcon ?(
72+ < InputAdornment position = "end" >
73+ < img
74+ alt = ""
75+ src = { form . values . avatar_url }
76+ className = { styles . adornment }
77+ // This prevent browser to display the ugly error icon if the
78+ // image path is wrong or user didn't finish typing the url
79+ onError = { ( e ) => ( e . currentTarget . style . display = "none" ) }
80+ onLoad = { ( e ) => ( e . currentTarget . style . display = "inline" ) }
81+ />
82+ </ InputAdornment >
83+ ) :undefined ,
84+ } }
5885/>
86+
87+ < Button
88+ fullWidth
89+ ref = { emojiButtonRef }
90+ variant = "outlined"
91+ size = "small"
92+ endIcon = { < OpenDropdown /> }
93+ onClick = { ( ) => {
94+ setIsEmojiPickerOpen ( ( v ) => ! v )
95+ } }
96+ >
97+ { "Select emoji" }
98+ </ Button >
99+
100+ < Popover
101+ id = "emoji"
102+ open = { isEmojiPickerOpen }
103+ anchorEl = { emojiButtonRef . current }
104+ onClose = { ( ) => {
105+ setIsEmojiPickerOpen ( false )
106+ } }
107+ >
108+ < Picker
109+ theme = "dark"
110+ data = { data }
111+ onEmojiSelect = { ( emojiData ) => {
112+ form
113+ . setFieldValue ( "avatar_url" , `/emojis/${ emojiData . unified } )
114+ . catch ( ( ex ) => {
115+ console . error ( ex )
116+ } )
117+ setIsEmojiPickerOpen ( false )
118+ } }
119+ />
120+ </ Popover >
121+
59122< FormFooter onCancel = { onCancel } isLoading = { isLoading } />
60123</ form >
61124</ FullPageForm >
@@ -100,4 +163,21 @@ export const SettingsGroupPageView: React.FC<SettingsGroupPageViewProps> = ({
100163)
101164}
102165
166+ const useStyles = makeStyles ( ( theme ) => ( {
167+ "@global" :{
168+ "em-emoji-picker" :{
169+ "--rgb-background" :theme . palette . background . paper ,
170+ "--rgb-input" :colors . gray [ 17 ] ,
171+ "--rgb-color" :colors . gray [ 4 ] ,
172+ } ,
173+ } ,
174+ adornment :{
175+ width :theme . spacing ( 3 ) ,
176+ height :theme . spacing ( 3 ) ,
177+ } ,
178+ iconField :{
179+ paddingBottom :theme . spacing ( 0.5 ) ,
180+ } ,
181+ } ) )
182+
103183export default SettingsGroupPageView