diff --git a/web/avatars/edit-user-avatar-menu.react.js b/web/avatars/edit-user-avatar-menu.react.js --- a/web/avatars/edit-user-avatar-menu.react.js +++ b/web/avatars/edit-user-avatar-menu.react.js @@ -4,9 +4,11 @@ import * as React from 'react'; import { EditUserAvatarContext } from 'lib/components/base-edit-user-avatar-provider.react.js'; +import { useModalContext } from 'lib/components/modal-provider.react.js'; import SWMansionIcon from 'lib/components/SWMansionIcon.react.js'; import css from './edit-user-avatar-menu.css'; +import EmojiAvatarSelectionModal from './emoji-avatar-selection-modal.react.js'; import MenuItem from '../components/menu-item.react.js'; import Menu from '../components/menu.react.js'; @@ -27,9 +29,23 @@ [setUserAvatar], ); + const { pushModal } = useModalContext(); + + const openEmojiSelectionModal = React.useCallback( + () => pushModal(), + [pushModal], + ); + const emojiMenuItem = React.useMemo( - () => , - [], + () => ( + + ), + [openEmojiSelectionModal], ); const imageMenuItem = React.useMemo( () => , diff --git a/web/avatars/emoji-avatar-selection-modal.react.js b/web/avatars/emoji-avatar-selection-modal.react.js new file mode 100644 --- /dev/null +++ b/web/avatars/emoji-avatar-selection-modal.react.js @@ -0,0 +1,20 @@ +// @flow + +import * as React from 'react'; + +import { useModalContext } from 'lib/components/modal-provider.react.js'; + +import Modal from '../modals/modal.react.js'; + +function EmojiAvatarSelectionModal(): React.Node { + const { popModal } = useModalContext(); + return ( + + ); +} + +export default EmojiAvatarSelectionModal;