fix: update readonly props without strict mode

reearth · Oct 16, 2024 · 5af270b · 5af270b
1 parent 0a11635
commit 5af270b
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 11 deletions.
diff --git a/src/ImageryLayer/ImageLayer.stories.tsx b/src/ImageryLayer/ImageLayer.stories.tsx
@@ -1,5 +1,6 @@
 import { Meta, StoryObj } from "@storybook/react";
-import { ArcGisMapServerImageryProvider, IonImageryProvider } from "cesium";
+import { ArcGisMapServerImageryProvider, IonImageryProvider, IonWorldImageryStyle } from "cesium";
+import { StrictMode } from "react";
 
 import Viewer from "../Viewer";
 
@@ -13,15 +14,45 @@ export default {
 } as Meta;
 
 export const Basic: Story = {
-  render: args => (
+  argTypes: {
+    tile: { options: ["arcgis", "cesium"], control: { type: "select" } },
+  } as any,
+  render: ({ tile, ...args }: any) => (
     <Viewer full>
       <ImageryLayer
         {...args}
-        imageryProvider={ArcGisMapServerImageryProvider.fromUrl(
-          "https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer",
-        )}
+        imageryProvider={
+          tile === "arcgis"
+            ? ArcGisMapServerImageryProvider.fromUrl(
+                "https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer",
+              )
+            : IonImageryProvider.fromAssetId(IonWorldImageryStyle.AERIAL)
+        }
       />
       <ImageryLayer alpha={0.5} imageryProvider={IonImageryProvider.fromAssetId(3812, {})} />
     </Viewer>
   ),
 };
+
+export const Strict: Story = {
+  argTypes: {
+    tile: { options: ["arcgis", "cesium"], control: { type: "select" } },
+  } as any,
+  render: ({ tile, ...args }: any) => (
+    <StrictMode>
+      <Viewer full>
+        <ImageryLayer
+          {...args}
+          imageryProvider={
+            tile === "arcgis"
+              ? ArcGisMapServerImageryProvider.fromUrl(
+                  "https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer",
+                )
+              : IonImageryProvider.fromAssetId(IonWorldImageryStyle.AERIAL)
+          }
+        />
+        <ImageryLayer alpha={0.5} imageryProvider={IonImageryProvider.fromAssetId(3812, {})} />
+      </Viewer>
+    </StrictMode>
+  ),
+};
diff --git a/src/ImageryLayer/ImageryLayer.ts b/src/ImageryLayer/ImageryLayer.ts
@@ -55,8 +55,7 @@ export type ImageryLayerCesiumReadonlyProps = Omit<
   imageryProvider: ImageryProvider | Promise<ImageryProvider>;
 };
 
-export type ImageryLayerProps = ImageryLayerCesiumProps &
-  ImageryLayerCesiumReadonlyProps;
+export type ImageryLayerProps = ImageryLayerCesiumProps & ImageryLayerCesiumReadonlyProps;
 
 const cesiumProps = [
   "alpha",
@@ -109,8 +108,8 @@ const ImageryLayer = createCesiumComponent<CesiumImageryLayer, ImageryLayerProps
 
     // Remove the awaited result from the waiting list.
     if (context.__$internal?.imageryLayerWaitingList) {
-      context.__$internal.imageryLayerWaitingList =
-        context.__$internal.imageryLayerWaitingList.filter(i => i !== imageryProvider);
+      const index = context.__$internal.imageryLayerWaitingList.indexOf(imageryProvider);
+      context.__$internal.imageryLayerWaitingList.splice(index, 1);
     }
 
     if (!result) return;

diff --git a/src/core/hooks.ts b/src/core/hooks.ts
@@ -287,8 +287,8 @@ export const useCesiumComponent = <Element, Props extends RootComponentInternalP
   // Update properties of cesium element
   useEffect(() => {
     const update = async () => {
-      if (mountReadyRef.current) {
-        await mountReadyRef.current;
+      if (unmountReadyRef.current) {
+        await unmountReadyRef.current;
       }
 
       const propsWC = propsWithChildren(props);