OpenNeo/impress-2020
OpenNeo/impress-2020
1
0
Fork 0
Code Pull requests Activity

minor SWF uploader fixes

Browse source 
fixed some warnings, and added window resize as an event trigger for updating the red/green border color
This commit is contained in:
Emi Matchu 2020-08-11 22:46:14 -07:00
parent 3411914680
commit 07f182a78e
1 changed files with 18 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/app/WardrobePage/support/ItemLayerSupportUploadModal.js
View file

@ -1,5 +1,4 @@
import * as React from "react"; import * as React from "react";
import gql from "graphql-tag";
import { useApolloClient } from "@apollo/client"; import { useApolloClient } from "@apollo/client";
import { import {
Button, Button,
@ -124,7 +123,14 @@ function ItemLayerSupportUploadModal({ item, itemLayer, isOpen, onClose }) {
setIsUploading(false); setIsUploading(false);
setUploadError(e); setUploadError(e);
} }
}, [imageWithAlphaBlob, supportSecret, itemLayer.id, toast, onClose]); }, [
imageWithAlphaBlob,
supportSecret,
itemLayer.id,
toast,
onClose,
apolloClient.cache,
]);
return ( return (
<Modal <Modal
@ -290,7 +296,7 @@ function ItemLayerSupportFlashPlayer({ swfUrl, backgroundColor }) {
// that isn't fully visible will fill the not-visible space with black, // that isn't fully visible will fill the not-visible space with black,
// instead of the actual SWF content. We change the border color to hint this // instead of the actual SWF content. We change the border color to hint this
// to the user! // to the user!
React.useEffect(() => { React.useLayoutEffect(() => {
const region = regionRef.current; const region = regionRef.current;
if (!region) { if (!region) {
return; return;
@ -301,7 +307,7 @@ function ItemLayerSupportFlashPlayer({ swfUrl, backgroundColor }) {
throw new Error(`could not find .chakra-modal__overlay scroll parent`); throw new Error(`could not find .chakra-modal__overlay scroll parent`);
} }
const onMountAndOnScroll = () => { const onMountOrScrollOrResize = () => {
const regionBox = region.getBoundingClientRect(); const regionBox = region.getBoundingClientRect();
const scrollParentBox = scrollParent.getBoundingClientRect(); const scrollParentBox = scrollParent.getBoundingClientRect();
const isVisible = const isVisible =
@ -312,12 +318,16 @@ function ItemLayerSupportFlashPlayer({ swfUrl, backgroundColor }) {
setIsVisible(isVisible); setIsVisible(isVisible);
}; };
onMountAndOnScroll(); onMountOrScrollOrResize();
scrollParent.addEventListener("scroll", onMountAndOnScroll); scrollParent.addEventListener("scroll", onMountOrScrollOrResize);
window.addEventListener("resize", onMountOrScrollOrResize);
return () => scrollParent.removeEventListener("scroll", onMountAndOnScroll); return () => {
}, [regionRef.current]); scrollParent.removeEventListener("scroll", onMountOrScrollOrResize);
window.removeEventListener("resize", onMountOrScrollOrResize);
};
}, []);
let borderColor; let borderColor;
if (isVisible === null) { if (isVisible === null) {