From ab21128f84ecffab4dd6f71667aea3677af964a8 Mon Sep 17 00:00:00 2001 From: Mingyu Kim Date: Thu, 30 Mar 2023 16:14:46 +0900 Subject: [PATCH] fix: ControlBar not removing child elements --- packages/react-view360/demo/App.tsx | 4 +- packages/react-view360/demo/index.tsx | 14 ++- packages/react-view360/package.json | 11 +- .../src/plugin/ControlBar/ControlBar.ts | 4 +- yarn.lock | 119 ++++++++---------- 5 files changed, 74 insertions(+), 78 deletions(-) diff --git a/packages/react-view360/demo/App.tsx b/packages/react-view360/demo/App.tsx index 6174291b6..999f21387 100644 --- a/packages/react-view360/demo/App.tsx +++ b/packages/react-view360/demo/App.tsx @@ -1,5 +1,5 @@ import React, { useMemo } from "react"; -import View360, { EquirectProjection } from "../src"; +import View360, { ControlBar, EquirectProjection } from "../src"; import "./App.css"; import "@egjs/view360/css/view360.min.css"; @@ -7,8 +7,10 @@ export default () => { const projection = useMemo(() => new EquirectProjection({ src: "https://iili.io/HGJXGLl.jpg" }), []); + const plugins = useMemo(() => [new ControlBar()], []); return ; }; diff --git a/packages/react-view360/demo/index.tsx b/packages/react-view360/demo/index.tsx index c1684e838..df96fb6d0 100644 --- a/packages/react-view360/demo/index.tsx +++ b/packages/react-view360/demo/index.tsx @@ -1,9 +1,17 @@ -import React from "react"; -import ReactDOM from "react-dom"; +import React, { StrictMode } from "react"; +import { createRoot } from "react-dom/client"; import App from "./App"; import * as serviceWorker from "./serviceWorker"; -ReactDOM.render(, document.getElementById("root")); +const rootElement = document.getElementById("root"); +const root = createRoot(rootElement!); + +root.render( + + + +); + // If you want your app to work offline and load faster, you can change // unregister() to register() below. Note this comes with some pitfalls. diff --git a/packages/react-view360/package.json b/packages/react-view360/package.json index ce5b92919..3d9b0f02f 100644 --- a/packages/react-view360/package.json +++ b/packages/react-view360/package.json @@ -33,21 +33,20 @@ "devDependencies": { "@types/jest": "^29.4.0", "@types/node": "12.0.0", - "@types/react": "16.8.17", - "@types/react-dom": "16.8.4", - "@types/react-is": "^17.0.0", + "@types/react": "^18.0.0", + "@types/react-dom": "^18.0.0", "@types/react-router-dom": "^5.3.3", "cpx": "^1.5.0", "customize-cra": "^1.0.0", "jest": "^29.4.1", "jest-environment-jsdom": "^29.4.1", - "react": "16.8.0", + "react": "^18.0.0", "react-app-rewire-alias": "^1.1.7", "react-app-rewired": "^2.2.1", - "react-dom": "16.8.0", + "react-dom": "^18.0.0", "react-router-dom": "^5.3.3", "react-scripts": "^5.0.1", - "react-test-renderer": "16.8.0", + "react-test-renderer": "^18.0.0", "ts-jest": "^29.0.5", "ts-node": "^10.9.1", "tslib": "^2.2.0", diff --git a/packages/view360/src/plugin/ControlBar/ControlBar.ts b/packages/view360/src/plugin/ControlBar/ControlBar.ts index 2c15cf4e3..bdf12e76a 100644 --- a/packages/view360/src/plugin/ControlBar/ControlBar.ts +++ b/packages/view360/src/plugin/ControlBar/ControlBar.ts @@ -409,7 +409,9 @@ class ControlBar implements View360Plugin { } private _clearItemElements() { - const wrappers = Object.keys(ControlBar.POSITION).map(key => ControlBar.POSITION[key]); + const wrappers = Object.keys(ControlBar.POSITION) + .map(key => ControlBar.POSITION[key]) + .map(pos => this._wrapperEl[pos]); // Remove all elements inside wrappers wrappers.forEach(wrapper => { diff --git a/yarn.lock b/yarn.lock index 52ade4698..127ff7595 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2176,21 +2176,20 @@ __metadata: "@egjs/view360": 4.0.0-beta.4 "@types/jest": ^29.4.0 "@types/node": 12.0.0 - "@types/react": 16.8.17 - "@types/react-dom": 16.8.4 - "@types/react-is": ^17.0.0 + "@types/react": ^18.0.0 + "@types/react-dom": ^18.0.0 "@types/react-router-dom": ^5.3.3 cpx: ^1.5.0 customize-cra: ^1.0.0 jest: ^29.4.1 jest-environment-jsdom: ^29.4.1 - react: 16.8.0 + react: ^18.0.0 react-app-rewire-alias: ^1.1.7 react-app-rewired: ^2.2.1 - react-dom: 16.8.0 + react-dom: ^18.0.0 react-router-dom: ^5.3.3 react-scripts: ^5.0.1 - react-test-renderer: 16.8.0 + react-test-renderer: ^18.0.0 ts-jest: ^29.0.5 ts-node: ^10.9.1 tslib: ^2.2.0 @@ -5760,21 +5759,12 @@ __metadata: languageName: node linkType: hard -"@types/react-dom@npm:16.8.4": - version: 16.8.4 - resolution: "@types/react-dom@npm:16.8.4" +"@types/react-dom@npm:^18.0.0": + version: 18.0.11 + resolution: "@types/react-dom@npm:18.0.11" dependencies: "@types/react": "*" - checksum: 8fb1a321312fa806f78f195b68fb13deb9d6fc54fda4f557cfc6532353044eadd99d99d25cc935d7fdb6e041b75a3d0a85693d8aeb0e9fea06177ff01b48efe3 - languageName: node - linkType: hard - -"@types/react-is@npm:^17.0.0": - version: 17.0.3 - resolution: "@types/react-is@npm:17.0.3" - dependencies: - "@types/react": "*" - checksum: 6abb7c47d54f012272650df8a962a28bd82f219291e5ef8b4dfa7fe0bb98ae243b060bf9fbe8ceff6213141794855a006db194b490b00ffd15842ae19d0ce1f0 + checksum: 579691e4d5ec09688087568037c35edf8cfb1ab3e07f6c60029280733ee7b5c06d66df6fcc90786702c93ac8cb13bc7ff16c79ddfc75d082938fbaa36e1cdbf4 languageName: node linkType: hard @@ -5799,7 +5789,7 @@ __metadata: languageName: node linkType: hard -"@types/react@npm:*": +"@types/react@npm:*, @types/react@npm:^18.0.0": version: 18.0.28 resolution: "@types/react@npm:18.0.28" dependencies: @@ -5810,16 +5800,6 @@ __metadata: languageName: node linkType: hard -"@types/react@npm:16.8.17": - version: 16.8.17 - resolution: "@types/react@npm:16.8.17" - dependencies: - "@types/prop-types": "*" - csstype: ^2.2.0 - checksum: 187f118012f1157ed829f4741bace0dc8425bd8896600183970af73bbe187e949734ce7aa0055c7c2e334f473546f03c1747e9c88f462187ef5e1d015d712636 - languageName: node - linkType: hard - "@types/resolve@npm:0.0.8": version: 0.0.8 resolution: "@types/resolve@npm:0.0.8" @@ -11543,7 +11523,7 @@ __metadata: languageName: node linkType: hard -"csstype@npm:^2.2.0, csstype@npm:^2.6.8": +"csstype@npm:^2.6.8": version: 2.6.21 resolution: "csstype@npm:2.6.21" checksum: 2ce8bc832375146eccdf6115a1f8565a27015b74cce197c35103b4494955e9516b246140425ad24103864076aa3e1257ac9bab25a06c8d931dd87a6428c9dccf @@ -26015,17 +25995,15 @@ __metadata: languageName: node linkType: hard -"react-dom@npm:16.8.0": - version: 16.8.0 - resolution: "react-dom@npm:16.8.0" +"react-dom@npm:^18.0.0": + version: 18.2.0 + resolution: "react-dom@npm:18.2.0" dependencies: loose-envify: ^1.1.0 - object-assign: ^4.1.1 - prop-types: ^15.6.2 - scheduler: ^0.13.0 + scheduler: ^0.23.0 peerDependencies: - react: ^16.0.0 - checksum: f9302a26b35d5baef72ef674b2c750676b404524d425109a3dd077f01bd98156e78ee926dc469d12f2d89cb67dde45f2d795fccecf291aefc1bf76a83d657c72 + react: ^18.2.0 + checksum: 7d323310bea3a91be2965f9468d552f201b1c27891e45ddc2d6b8f717680c95a75ae0bc1e3f5cf41472446a2589a75aed4483aee8169287909fcd59ad149e8cc languageName: node linkType: hard @@ -26036,7 +26014,14 @@ __metadata: languageName: node linkType: hard -"react-is@npm:^16.13.1, react-is@npm:^16.6.0, react-is@npm:^16.7.0, react-is@npm:^16.8.0": +"react-is@npm:^16.12.0 || ^17.0.0 || ^18.0.0, react-is@npm:^18.0.0, react-is@npm:^18.2.0": + version: 18.2.0 + resolution: "react-is@npm:18.2.0" + checksum: e72d0ba81b5922759e4aff17e0252bd29988f9642ed817f56b25a3e217e13eea8a7f2322af99a06edb779da12d5d636e9fda473d620df9a3da0df2a74141d53e + languageName: node + linkType: hard + +"react-is@npm:^16.13.1, react-is@npm:^16.6.0, react-is@npm:^16.7.0": version: 16.13.1 resolution: "react-is@npm:16.13.1" checksum: f7a19ac3496de32ca9ae12aa030f00f14a3d45374f1ceca0af707c831b2a6098ef0d6bdae51bd437b0a306d7f01d4677fcc8de7c0d331eb47ad0f46130e53c5f @@ -26050,13 +26035,6 @@ __metadata: languageName: node linkType: hard -"react-is@npm:^18.0.0": - version: 18.2.0 - resolution: "react-is@npm:18.2.0" - checksum: e72d0ba81b5922759e4aff17e0252bd29988f9642ed817f56b25a3e217e13eea8a7f2322af99a06edb779da12d5d636e9fda473d620df9a3da0df2a74141d53e - languageName: node - linkType: hard - "react-refresh@npm:^0.11.0": version: 0.11.0 resolution: "react-refresh@npm:0.11.0" @@ -26167,29 +26145,37 @@ __metadata: languageName: node linkType: hard -"react-test-renderer@npm:16.8.0": - version: 16.8.0 - resolution: "react-test-renderer@npm:16.8.0" +"react-shallow-renderer@npm:^16.15.0": + version: 16.15.0 + resolution: "react-shallow-renderer@npm:16.15.0" dependencies: object-assign: ^4.1.1 - prop-types: ^15.6.2 - react-is: ^16.8.0 - scheduler: ^0.13.0 + react-is: ^16.12.0 || ^17.0.0 || ^18.0.0 + peerDependencies: + react: ^16.0.0 || ^17.0.0 || ^18.0.0 + checksum: 6052c7e3e9627485120ebd8257f128aad8f56386fe8d42374b7743eac1be457c33506d153c7886b4e32923c0c352d402ab805ef9ca02dbcd8393b2bdeb6e5af8 + languageName: node + linkType: hard + +"react-test-renderer@npm:^18.0.0": + version: 18.2.0 + resolution: "react-test-renderer@npm:18.2.0" + dependencies: + react-is: ^18.2.0 + react-shallow-renderer: ^16.15.0 + scheduler: ^0.23.0 peerDependencies: - react: ^16.0.0 - checksum: 691a87591c560f54d63fcfaf56274ba6aa28e22bdbf691b5fe97169c4a499c8737249a33d473edb9f6987eff5397cf7ca0c1827127c94e0c5c30146764220bb5 + react: ^18.2.0 + checksum: 6b6980ced93fa2b72662d5e4ab3b4896833586940047ce52ca9aca801e5432adf05fcbe28289b0af3ce6a2a7c590974e25dcc8aa43d0de658bfe8bbcd686f958 languageName: node linkType: hard -"react@npm:16.8.0": - version: 16.8.0 - resolution: "react@npm:16.8.0" +"react@npm:^18.0.0": + version: 18.2.0 + resolution: "react@npm:18.2.0" dependencies: loose-envify: ^1.1.0 - object-assign: ^4.1.1 - prop-types: ^15.6.2 - scheduler: ^0.13.0 - checksum: ab4d78cb90af138f6339565862ad6753b24a39b9cbed9a9c4394f90d4f2b7505525d496f8c5b353de785f151557a0239eb2b01e40bca1565665fb25bf6b6df95 + checksum: 88e38092da8839b830cda6feef2e8505dec8ace60579e46aa5490fc3dc9bba0bd50336507dc166f43e3afc1c42939c09fe33b25fae889d6f402721dcd78fca1b languageName: node linkType: hard @@ -27540,13 +27526,12 @@ __metadata: languageName: node linkType: hard -"scheduler@npm:^0.13.0": - version: 0.13.6 - resolution: "scheduler@npm:0.13.6" +"scheduler@npm:^0.23.0": + version: 0.23.0 + resolution: "scheduler@npm:0.23.0" dependencies: loose-envify: ^1.1.0 - object-assign: ^4.1.1 - checksum: c82c705f6d0d6df87b26bf2cca33f427e91889438c0435ade3ee7f41860eda4dd7f3171ca2d93e8fe9431f3bd831ca0e267a401a0296e4b14de05e389f82d320 + checksum: d79192eeaa12abef860c195ea45d37cbf2bbf5f66e3c4dcd16f54a7da53b17788a70d109ee3d3dde1a0fd50e6a8fc171f4300356c5aee4fc0171de526bf35f8a languageName: node linkType: hard