diff --git a/src/components/molecules/Common/AssetModal/AssetContainer/index.tsx b/src/components/molecules/Common/AssetModal/AssetContainer/index.tsx index 1128da52c..3eb4aaa2d 100644 --- a/src/components/molecules/Common/AssetModal/AssetContainer/index.tsx +++ b/src/components/molecules/Common/AssetModal/AssetContainer/index.tsx @@ -73,6 +73,7 @@ const AssetContainer: React.FC = ({ onSelect, onSortChange, onSearch, + onURLShow, }) => { const t = useT(); const { @@ -106,6 +107,10 @@ const AssetContainer: React.FC = ({ if (wrapperRef.current && !isLoading && hasMoreAssets) autoFillPage(wrapperRef, onGetMore); }, [hasMoreAssets, isLoading, onGetMore]); + useEffect(() => { + onURLShow?.(assets); + }, [onURLShow, assets]); + return ( diff --git a/src/components/molecules/Common/AssetModal/index.tsx b/src/components/molecules/Common/AssetModal/index.tsx index 51c4054cd..ac44b94e0 100644 --- a/src/components/molecules/Common/AssetModal/index.tsx +++ b/src/components/molecules/Common/AssetModal/index.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useState, ComponentType } from "react"; +import React, { useCallback, useState, ComponentType, useEffect } from "react"; import Button from "@reearth/components/atoms/Button"; import Flex from "@reearth/components/atoms/Flex"; @@ -55,11 +55,13 @@ const AssetModal: React.FC = ({ const handleShowURL = useCallback( (assets?: AssetType[]) => { - setShowURL( - videoOnly || !!(selectedAssetUrl && !assets?.some(e => e.url === selectedAssetUrl)), - ); + if (!assets) return; + const show = + videoOnly || !!(selectedAssetUrl && !assets.some(e => e.url === selectedAssetUrl)); + setShowURL(show); + setTextUrl(show && initialAssetUrl ? initialAssetUrl : undefined); }, - [videoOnly, selectedAssetUrl], + [videoOnly, initialAssetUrl, selectedAssetUrl], ); const handleTextUrlChange = useCallback((text?: string) => { @@ -74,7 +76,7 @@ const AssetModal: React.FC = ({ const resetValues = useCallback(() => { setTextUrl(showURL && initialAssetUrl ? initialAssetUrl : undefined); - selectTab("assets"); + selectTab(showURL ? "url" : "assets"); selectAssetUrl(initialAssetUrl ?? undefined); }, [showURL, initialAssetUrl]); @@ -83,6 +85,10 @@ const AssetModal: React.FC = ({ toggleAssetModal?.(false); }, [toggleAssetModal, resetValues]); + useEffect(() => { + selectTab(showURL ? "url" : "assets"); + }, [showURL]); + return videoOnly ? ( ): JSX.Elemen const tilesetUrl = useMemo(() => { return sourceType === "osm" && isVisible - ? - IonResource.fromAssetId(96188) //https://github.com/CesiumGS/cesium/blob/1.69/Source/Scene/createOsmBuildings.js#L50 - : sourceType === "url" && isVisible && tileset + ? IonResource.fromAssetId(96188) //https://github.com/CesiumGS/cesium/blob/1.69/Source/Scene/createOsmBuildings.js#L50 + : isVisible && tileset ? tileset : null; }, [isVisible, sourceType, tileset]); - + return !isVisible || (!tileset && !sourceType) || !tilesetUrl ? null : (