ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Drop Target: Fix ResizeObserver error (#6201)

Browse Source
This commit is contained in:
zubiden 2025-09-09 20:26:21 +02:00 committed by Alexander Zinchuk
parent 36fc2acd48
commit c55334b642
2 changed files with 3 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/middle/composer/DropTarget.scss
View File

@ -97,6 +97,7 @@
.title { .title {
font-size: 1.3125rem; font-size: 1.3125rem;
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
text-align: center;
letter-spacing: -0.18px; letter-spacing: -0.18px;
@media (max-height: 450px) { @media (max-height: 450px) {
@ -106,6 +107,7 @@
.description { .description {
font-size: 1rem; font-size: 1rem;
text-align: center;
letter-spacing: 0.3px; letter-spacing: 0.3px;
@media (max-height: 450px) { @media (max-height: 450px) {

21
src/components/middle/composer/DropTarget.tsx
View File

@ -4,11 +4,9 @@ import { memo, useRef } from '../../../lib/teact/teact';
import buildClassName from '../../../util/buildClassName'; import buildClassName from '../../../util/buildClassName';
import useEffectOnce from '../../../hooks/useEffectOnce';
import useFlag from '../../../hooks/useFlag'; import useFlag from '../../../hooks/useFlag';
import useLang from '../../../hooks/useLang'; import useLang from '../../../hooks/useLang';
import useLastCallback from '../../../hooks/useLastCallback'; import useLastCallback from '../../../hooks/useLastCallback';
import useResizeObserver from '../../../hooks/useResizeObserver';
import Icon from '../../common/icons/Icon'; import Icon from '../../common/icons/Icon';
@ -22,7 +20,6 @@ export type OwnProps = {
const DropTarget: FC<OwnProps> = ({ isQuick, isGeneric, onFileSelect }) => { const DropTarget: FC<OwnProps> = ({ isQuick, isGeneric, onFileSelect }) => {
const ref = useRef<HTMLDivElement>(); const ref = useRef<HTMLDivElement>();
const svgRef = useRef<SVGSVGElement>();
const lang = useLang(); const lang = useLang();
@ -38,22 +35,6 @@ const DropTarget: FC<OwnProps> = ({ isQuick, isGeneric, onFileSelect }) => {
unmarkHovered(); unmarkHovered();
}); });
const handleResize = useLastCallback(() => {
const svg = svgRef.current;
if (!svg) {
return;
}
const { width, height } = svg.getBoundingClientRect();
svg.viewBox.baseVal.width = width;
svg.viewBox.baseVal.height = height;
});
// Can't listen for SVG resize
useResizeObserver(ref, handleResize);
useEffectOnce(handleResize);
const className = buildClassName( const className = buildClassName(
'DropTarget', 'DropTarget',
isHovered && 'hovered', isHovered && 'hovered',
@ -68,7 +49,7 @@ const DropTarget: FC<OwnProps> = ({ isQuick, isGeneric, onFileSelect }) => {
onDragLeave={handleDragLeave} onDragLeave={handleDragLeave}
data-dropzone data-dropzone
> >
<svg className="target-outline-container" ref={svgRef}> <svg className="target-outline-container">
<rect className="target-outline" x="0" y="0" width="100%" height="100%" rx="8" /> <rect className="target-outline" x="0" y="0" width="100%" height="100%" rx="8" />
</svg> </svg>
<div className="target-content"> <div className="target-content">