diff --git a/web/avatars/edit-user-avatar-menu.react.js b/web/avatars/edit-user-avatar-menu.react.js index 944a2d403..16a655a7a 100644 --- a/web/avatars/edit-user-avatar-menu.react.js +++ b/web/avatars/edit-user-avatar-menu.react.js @@ -1,58 +1,74 @@ // @flow import invariant from 'invariant'; 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'; const editIcon = (
); function EditUserAvatarMenu(): React.Node { const editUserAvatarContext = React.useContext(EditUserAvatarContext); invariant(editUserAvatarContext, 'editUserAvatarContext should be set'); const { setUserAvatar } = editUserAvatarContext; const removeUserAvatar = React.useCallback( () => setUserAvatar({ type: 'remove' }), [setUserAvatar], ); + const { pushModal } = useModalContext(); + + const openEmojiSelectionModal = React.useCallback( + () => pushModal(), + [pushModal], + ); + const emojiMenuItem = React.useMemo( - () => , - [], + () => ( + + ), + [openEmojiSelectionModal], ); const imageMenuItem = React.useMemo( () => , [], ); const removeMenuItem = React.useMemo( () => ( ), [removeUserAvatar], ); const menuItems = React.useMemo( () => [emojiMenuItem, imageMenuItem, removeMenuItem], [emojiMenuItem, imageMenuItem, removeMenuItem], ); return {menuItems}; } export default EditUserAvatarMenu; diff --git a/web/avatars/emoji-avatar-selection-modal.react.js b/web/avatars/emoji-avatar-selection-modal.react.js new file mode 100644 index 000000000..4869312f1 --- /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;