fix: asset modal flushes when camera limiter is enabled (#261)

* fix bug * refactor
reearth · Jun 30, 2022 · fd46316 · fd46316
1 parent 85abadb
commit fd46316
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 12 deletions.
diff --git a/src/components/molecules/Common/AssetModal/AssetContainer/hooks.ts b/src/components/molecules/Common/AssetModal/AssetContainer/hooks.ts
@@ -99,16 +99,25 @@ export default ({
     [onSearch],
   );
 
+  const setLayoutTypeSmall = useCallback(() => setLayoutType("small"), []);
+  const setLayoutTypeMedium = useCallback(() => setLayoutType("medium"), []);
+  const setLayoutTypeList = useCallback(() => setLayoutType("list"), []);
+  const openDeleteModal = useCallback(() => setDeleteModalVisible(true), []);
+  const closeDeleteModal = useCallback(() => setDeleteModalVisible(false), []);
+
   return {
     layoutType,
     iconChoice,
     deleteModalVisible,
     sortOptions,
-    setLayoutType,
+    setLayoutTypeSmall,
+    setLayoutTypeMedium,
+    setLayoutTypeList,
     handleUploadToAsset,
     handleReverse,
     handleSearch,
-    setDeleteModalVisible,
+    openDeleteModal,
+    closeDeleteModal,
     handleRemove,
   };
 };
diff --git a/src/components/molecules/Common/AssetModal/AssetContainer/index.tsx b/src/components/molecules/Common/AssetModal/AssetContainer/index.tsx
@@ -80,11 +80,14 @@ const AssetContainer: React.FC<Props> = ({
     iconChoice,
     deleteModalVisible,
     sortOptions,
-    setLayoutType,
+    setLayoutTypeList,
+    setLayoutTypeMedium,
+    setLayoutTypeSmall,
     handleUploadToAsset,
     handleReverse,
     handleSearch,
-    setDeleteModalVisible,
+    openDeleteModal,
+    closeDeleteModal,
     handleRemove,
   } = useHooks({
     sort,
@@ -117,7 +120,7 @@ const AssetContainer: React.FC<Props> = ({
             type="button"
             buttonType="secondary"
             disabled={selectedAssets?.length ? false : true}
-            onClick={() => setDeleteModalVisible(true)}
+            onClick={openDeleteModal}
           />
         )}
       </Flex>
@@ -135,19 +138,19 @@ const AssetContainer: React.FC<Props> = ({
         <LayoutButtons justify="left">
           <StyledIcon
             icon="assetList"
-            onClick={() => setLayoutType("list")}
+            onClick={setLayoutTypeList}
             selected={layoutType === "list"}
           />
           {smallCardOnly ? (
             <StyledIcon
               icon="assetGridSmall"
-              onClick={() => setLayoutType("small")}
+              onClick={setLayoutTypeSmall}
               selected={layoutType === "small"}
             />
           ) : (
             <StyledIcon
               icon="assetGrid"
-              onClick={() => setLayoutType("medium")}
+              onClick={setLayoutTypeMedium}
               selected={layoutType === "medium"}
             />
           )}
@@ -217,7 +220,7 @@ const AssetContainer: React.FC<Props> = ({
       </AssetWrapper>
       <AssetDeleteModal
         isVisible={deleteModalVisible}
-        onClose={() => setDeleteModalVisible(false)}
+        onClose={closeDeleteModal}
         handleRemove={handleRemove}
       />
     </Wrapper>

diff --git a/src/components/organisms/EarthEditor/PropertyPane/index.tsx b/src/components/organisms/EarthEditor/PropertyPane/index.tsx
@@ -1,4 +1,4 @@
-import React, { ComponentType } from "react";
+import React, { ComponentType, useCallback } from "react";
 
 import Loading from "@reearth/components/atoms/Loading";
 import Wrapper from "@reearth/components/molecules/EarthEditor/PropertyPane";
@@ -46,9 +46,11 @@ const PropertyPane: React.FC<Props> = ({ mode }) => {
     updatePropertyItems,
   } = useHooks(mode);
 
-  const AssetModalComponent: ComponentType<AssetModalProps> = ({ ...props }) => (
-    <AssetModal teamId={teamId} {...props} />
+  const AssetModalComponent: ComponentType<AssetModalProps> = useCallback(
+    ({ ...props }) => <AssetModal teamId={teamId} {...props} />,
+    [teamId],
   );
+
   return (
     <>
       {pane && (