diff --git a/src/components/Dialog/Content/index.tsx b/src/components/Dialog/Content/index.tsx index d2464bcb10..e489cb2ab3 100644 --- a/src/components/Dialog/Content/index.tsx +++ b/src/components/Dialog/Content/index.tsx @@ -10,6 +10,7 @@ interface DialogContentProps { noSpacingTop?: boolean noSpacingBottom?: boolean noMaxHeight?: boolean + className?: string } const DialogContent: React.FC> & { @@ -21,6 +22,7 @@ const DialogContent: React.FC> & { noSpacingBottom, noMaxHeight, fixedHeight, + className, children, }) => { const contentClasses = classNames({ @@ -31,6 +33,7 @@ const DialogContent: React.FC> & { [styles.noSpacingTop]: !!noSpacingTop, [styles.noSpacingBottom]: !!noSpacingBottom, [styles.noMaxHeight]: !!noMaxHeight, + [className || '']: !!className, }) return ( diff --git a/src/components/Dialog/Content/styles.module.css b/src/components/Dialog/Content/styles.module.css index da1286b3cc..815836c19d 100644 --- a/src/components/Dialog/Content/styles.module.css +++ b/src/components/Dialog/Content/styles.module.css @@ -29,16 +29,14 @@ } /* FIXME: can be removed if editor is only used in single page instead of being used in dialog, use vvh to exclude visual keyboard */ -:global(body.editor-focused) { - & .content { - max-height: calc(var(--vvh) * 100 - 4.25rem); +:global(.dialog-editor).content { + max-height: calc(var(--vvh) * 100 - 4.25rem); - &.fixedHeight { - height: calc(var(--vvh) * 100 - 4.25rem); + &.fixedHeight { + height: calc(var(--vvh) * 100 - 4.25rem); - /* inner height - visual keyboard height */ - margin-bottom: calc(var(--ivh) * 100 - var(--vvh) * 100); - } + /* inner height - visual keyboard height */ + margin-bottom: calc(var(--ivh) * 100 - var(--vvh) * 100); } } diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx index 9abb6b6663..22653fb66f 100644 --- a/src/components/Dialog/index.tsx +++ b/src/components/Dialog/index.tsx @@ -22,7 +22,6 @@ import styles from './styles.module.css' export type DialogProps = { isOpen: boolean | undefined onDismiss: () => void - onRest?: () => void scrollable?: boolean testId?: string @@ -37,8 +36,7 @@ export type BaseDialogProps = { const BaseAnimatedDilaog: React.ComponentType< React.PropsWithChildren > = (props) => { - const { isOpen, mounted, setMounted, onRest, scrollable, bypassScrollLock } = - props + const { isOpen, mounted, setMounted, scrollable, bypassScrollLock } = props const initialFocusRef = useRef(null) // Fade In/ Fade Out @@ -53,10 +51,6 @@ const BaseAnimatedDilaog: React.ComponentType< if (isFadedOut) { setMounted(false) } - - if (onRest) { - onRest() - } }, })) @@ -101,8 +95,7 @@ const BaseAnimatedDilaog: React.ComponentType< const BaseSimpleDialog: React.ComponentType< React.PropsWithChildren > = (props) => { - const { isOpen, mounted, setMounted, onRest, bypassScrollLock, scrollable } = - props + const { isOpen, mounted, setMounted, bypassScrollLock, scrollable } = props const initialFocusRef = useRef(null) useEffect(() => { @@ -111,10 +104,6 @@ const BaseSimpleDialog: React.ComponentType< } setMounted(false) - - if (onRest) { - onRest() - } }, [isOpen]) const dialogOverlayClasses = classNames({ diff --git a/src/components/Dialogs/CommentFormBetaDialog/CommentForm/index.tsx b/src/components/Dialogs/CommentFormBetaDialog/CommentForm/index.tsx index 95ad27d887..617b28427a 100644 --- a/src/components/Dialogs/CommentFormBetaDialog/CommentForm/index.tsx +++ b/src/components/Dialogs/CommentFormBetaDialog/CommentForm/index.tsx @@ -237,7 +237,7 @@ const CommentForm: React.FC = ({ } /> - + {context &&
{context}
}
| null = useRef(null) - // FIXME: editor can't be focused with dialog on Android devices - const focusEditor = () => { - if (!show) { - return - } - - const $editor = ref.current?.querySelector('.ProseMirror') as HTMLElement - if ($editor) { - $editor.focus() - } - } - return (
{children && children({ openDialog })} @@ -35,7 +23,6 @@ const BaseCommentFormBetaDialog = ({ diff --git a/src/components/Dialogs/CommentFormDialog/index.tsx b/src/components/Dialogs/CommentFormDialog/index.tsx index b3c795f4af..be9abc08f4 100644 --- a/src/components/Dialogs/CommentFormDialog/index.tsx +++ b/src/components/Dialogs/CommentFormDialog/index.tsx @@ -16,18 +16,6 @@ const BaseCommentFormDialog = ({ const { show, openDialog, closeDialog } = useDialogSwitch(true) const ref: React.RefObject | null = useRef(null) - // FIXME: editor can't be focused with dialog on Android devices - const focusEditor = () => { - if (!show) { - return - } - - const $editor = ref.current?.querySelector('.ProseMirror') as HTMLElement - if ($editor) { - $editor.focus() - } - } - return (
{children && children({ openDialog })} @@ -35,7 +23,6 @@ const BaseCommentFormDialog = ({ diff --git a/src/components/Editor/Article/index.tsx b/src/components/Editor/Article/index.tsx index d1f9e4657d..d9baad0ef1 100644 --- a/src/components/Editor/Article/index.tsx +++ b/src/components/Editor/Article/index.tsx @@ -3,11 +3,7 @@ import { EditorContent, useArticleEdtor } from '@matters/matters-editor' import { useIntl } from 'react-intl' import { useDebouncedCallback } from 'use-debounce' -import { - BYPASS_SCROLL_LOCK, - ENBABLE_SCROLL_LOCK, - INPUT_DEBOUNCE, -} from '~/common/enums' +import { INPUT_DEBOUNCE } from '~/common/enums' import { EditorDraftFragment } from '~/gql/graphql' import { BubbleMenu } from './BubbleMenu' @@ -60,17 +56,6 @@ export const ArticleEditor: React.FC = ({ const content = editor.getHTML() debouncedUpdate({ content }) }, - // FIXME: toggle body class and scroll lock when editor is focused - // can be removed if editor is only used in single page - // instead of being used in dialog - onFocus: () => { - document.body.classList.add('editor-focused') - window.dispatchEvent(new CustomEvent(BYPASS_SCROLL_LOCK)) - }, - onBlur: () => { - document.body.classList.remove('editor-focused') - window.dispatchEvent(new CustomEvent(ENBABLE_SCROLL_LOCK)) - }, mentionSuggestion: makeMentionSuggestion({ client }), extensions: [ FigureEmbedLinkInput, diff --git a/src/components/Editor/Comment/index.tsx b/src/components/Editor/Comment/index.tsx index c08af371b4..1e4c8f0623 100644 --- a/src/components/Editor/Comment/index.tsx +++ b/src/components/Editor/Comment/index.tsx @@ -44,15 +44,13 @@ const CommentEditor: React.FC = ({ const content = editor.getHTML() update({ content }) }, - // FIXME: toggle body class and scroll lock when editor is focused + // FIXME: toggle scroll lock when editor is focused // can be removed if editor is only used in single page // instead of being used in dialog onFocus: () => { - document.body.classList.add('editor-focused') window.dispatchEvent(new CustomEvent(BYPASS_SCROLL_LOCK)) }, - onBlur: () => { - document.body.classList.remove('editor-focused') + onDestroy: () => { window.dispatchEvent(new CustomEvent(ENBABLE_SCROLL_LOCK)) }, mentionSuggestion: makeMentionSuggestion({ client }), diff --git a/src/views/User/UserProfile/BadgeNomadDialog/Content.tsx b/src/views/User/UserProfile/BadgeNomadDialog/Content.tsx index fafc9f8a65..ef913d1abd 100644 --- a/src/views/User/UserProfile/BadgeNomadDialog/Content.tsx +++ b/src/views/User/UserProfile/BadgeNomadDialog/Content.tsx @@ -5,14 +5,7 @@ import { ReactComponent as Nomad1Background } from '@/public/static/images/badge import { ReactComponent as Nomad2Background } from '@/public/static/images/badge-nomad2-background.svg' import { ReactComponent as Nomad3Background } from '@/public/static/images/badge-nomad3-background.svg' import { ReactComponent as Nomad4Background } from '@/public/static/images/badge-nomad4-background.svg' -import { BREAKPOINTS } from '~/common/enums' -import { - Button, - CopyToClipboard, - Dialog, - Icon, - useMediaQuery, -} from '~/components' +import { Button, CopyToClipboard, Dialog, Icon } from '~/components' import styles from './styles.module.css' @@ -31,8 +24,6 @@ const BadgeNomadDialogContent = ({ isNested, goBack, }: BadgeNomadDialogContentProps) => { - const isSmUp = useMediaQuery(`(min-width: ${BREAKPOINTS.MD}px)`) - return ( <> {isNested && goBack && ( @@ -50,7 +41,7 @@ const BadgeNomadDialogContent = ({ /> )} - +
{nomadBadgeLevel === 4 ? ( diff --git a/src/views/User/UserProfile/BadgesDialog/index.tsx b/src/views/User/UserProfile/BadgesDialog/index.tsx index c0bbb73871..262c84a700 100644 --- a/src/views/User/UserProfile/BadgesDialog/index.tsx +++ b/src/views/User/UserProfile/BadgesDialog/index.tsx @@ -2,14 +2,7 @@ import { useState } from 'react' import { FormattedMessage } from 'react-intl' import { ReactComponent as IconTimes } from '@/public/static/icons/24px/times.svg' -import { BREAKPOINTS } from '~/common/enums' -import { - Button, - Dialog, - Icon, - useDialogSwitch, - useMediaQuery, -} from '~/components' +import { Button, Dialog, Icon, useDialogSwitch } from '~/components' import BadgeNomadDialogContent from '../BadgeNomadDialog/Content' import { Badges, BadgesOptions } from '../Badges' @@ -40,7 +33,6 @@ export const BaseBadgesDialog = ({ const [step, setStep] = useState(initStep) const isInBadgesStep = step === 'badges' const isInNomadStep = step === 'nomad' - const isSmUp = useMediaQuery(`(min-width: ${BREAKPOINTS.MD}px)`) const openStepDialog = (step?: Step) => { if (step) { @@ -75,7 +67,7 @@ export const BaseBadgesDialog = ({ } /> - +