Widget UI 7 #3251
Widget UI 7 #3251
Conversation
…/index.tsx Co-authored-by: Alexandr Kazachenko <[email protected]>
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
apps/cowswap-frontend/src/modules/tokensList/pure/ModalHeader/index.tsx
Outdated
Show resolved
Hide resolved
apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/index.tsx
Outdated
Show resolved
Hide resolved
|
The https://jsfiddle.net/rmbf863n/11/ link contains the JS used on the parent side, to listen to postmessages. Currently it uses a wildcard domain, so something to look into in terms of security. |
| @@ -0,0 +1,29 @@ | |||
| import { useEffect } from 'react'; | |||
|
|
|||
| export function IframeResizer() { | |||
There was a problem hiding this comment.
Looks cool!
Have you invented it by yourself?
There was a problem hiding this comment.
Aha!
The only thing the robot hasn't done is the code style 😉
There was a problem hiding this comment.
In IDEA I usually just press Cmd + option + L to fix the code style automatically
| // Initial height calculation and message | ||
| const sendHeightUpdate = () => { | ||
| const contentHeight = document.body.scrollHeight; | ||
| window.parent.postMessage({ type: 'iframeHeight', height: contentHeight }, '*'); |
There was a problem hiding this comment.
I think we will need to create an enum for the messages. This way, we can easily see the complete list, and see exactly in the code who emits/consumes the message.
There was a problem hiding this comment.
Addressed in #3255
| // Set up a MutationObserver to watch for changes in the DOM | ||
| const observer = new MutationObserver(() => { | ||
| // For simplicity, we'll send an update for any mutation, but you can add more specific checks if needed | ||
| sendHeightUpdate(); |
There was a problem hiding this comment.
if there's no checks here, sendHeightUpdate fn could be used directly in the MutationObserver constructor,
Will we get false positives? Like will we post iframeHeight even if it doesn't change?
There was a problem hiding this comment.
Yes that's right, might run too many times. Should be fixed now in #3255
| @@ -0,0 +1,29 @@ | |||
| import { useEffect } from 'react'; | |||
|
|
|||
| export function IframeResizer() { | |||
There was a problem hiding this comment.
I find a bit strange that a component is in utils dir
There was a problem hiding this comment.
Has been moved to @cowprotocol/common-utils in #3255
|
CLA Assistant Lite bot: I have read the CLA Document and I hereby sign the CLA 2 out of 3 committers have signed the CLA. |
Summary
Screen.Recording.2023-10-19.at.10.28.05.mov
Iframe resize parent/widget
Screen.Recording.2023-10-19.at.12.33.14.mov
To test