Drop Target: Fix ResizeObserver error (#6201)
This commit is contained in:
parent
36fc2acd48
commit
c55334b642
@ -97,6 +97,7 @@
|
||||
.title {
|
||||
font-size: 1.3125rem;
|
||||
font-weight: var(--font-weight-medium);
|
||||
text-align: center;
|
||||
letter-spacing: -0.18px;
|
||||
|
||||
@media (max-height: 450px) {
|
||||
@ -106,6 +107,7 @@
|
||||
|
||||
.description {
|
||||
font-size: 1rem;
|
||||
text-align: center;
|
||||
letter-spacing: 0.3px;
|
||||
|
||||
@media (max-height: 450px) {
|
||||
|
||||
@ -4,11 +4,9 @@ import { memo, useRef } from '../../../lib/teact/teact';
|
||||
|
||||
import buildClassName from '../../../util/buildClassName';
|
||||
|
||||
import useEffectOnce from '../../../hooks/useEffectOnce';
|
||||
import useFlag from '../../../hooks/useFlag';
|
||||
import useLang from '../../../hooks/useLang';
|
||||
import useLastCallback from '../../../hooks/useLastCallback';
|
||||
import useResizeObserver from '../../../hooks/useResizeObserver';
|
||||
|
||||
import Icon from '../../common/icons/Icon';
|
||||
|
||||
@ -22,7 +20,6 @@ export type OwnProps = {
|
||||
|
||||
const DropTarget: FC<OwnProps> = ({ isQuick, isGeneric, onFileSelect }) => {
|
||||
const ref = useRef<HTMLDivElement>();
|
||||
const svgRef = useRef<SVGSVGElement>();
|
||||
|
||||
const lang = useLang();
|
||||
|
||||
@ -38,22 +35,6 @@ const DropTarget: FC<OwnProps> = ({ isQuick, isGeneric, onFileSelect }) => {
|
||||
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(
|
||||
'DropTarget',
|
||||
isHovered && 'hovered',
|
||||
@ -68,7 +49,7 @@ const DropTarget: FC<OwnProps> = ({ isQuick, isGeneric, onFileSelect }) => {
|
||||
onDragLeave={handleDragLeave}
|
||||
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" />
|
||||
</svg>
|
||||
<div className="target-content">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user