revert me

elastic · Jan 25, 2021 · f8c0fd9 · f8c0fd9
1 parent f305a32
commit f8c0fd9
Showing 1 changed file with 30 additions and 19 deletions.
diff --git a/src-docs/src/views/resizable_container/resizable_container_basic.js b/src-docs/src/views/resizable_container/resizable_container_basic.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { EuiText, EuiResizableContainer } from '../../../../src/components';
 import { fake } from 'faker';
 
@@ -10,23 +10,34 @@ const text = (
   </>
 );
 
-export default () => (
-  <EuiResizableContainer style={{ height: '200px' }}>
-    {(EuiResizablePanel, EuiResizableButton) => (
-      <>
-        <EuiResizablePanel initialSize={50} minSize="30%">
-          <EuiText>
-            <div>{text}</div>
-            <a href="">Hello world</a>
-          </EuiText>
-        </EuiResizablePanel>
+export default () => {
+  const dom = useRef();
+  const [styles, setStyles] = useState({ display: 'none' });
+  useEffect(() => {
+    if (!dom.current) return;
+    dom.current.innerHTML = 'YOLO';
+  });
+  useEffect(() => {
+    setTimeout(() => setStyles({ display: 'flex' }), 1000);
+  }, []);
+  return (
+    <EuiResizableContainer style={{ ...styles, height: '200px' }}>
+      {(EuiResizablePanel, EuiResizableButton) => (
+        <>
+          <EuiResizablePanel initialSize={50} minSize="30%">
+            <EuiText>
+              <div>{text}</div>
+              <a href="">Hello world</a>
+            </EuiText>
+          </EuiResizablePanel>
 
-        <EuiResizableButton />
+          <EuiResizableButton />
 
-        <EuiResizablePanel initialSize={50} minSize="200px">
-          <EuiText>{text}</EuiText>
-        </EuiResizablePanel>
-      </>
-    )}
-  </EuiResizableContainer>
-);
+          <EuiResizablePanel initialSize={50} minSize="200px">
+            <div ref={dom} />
+          </EuiResizablePanel>
+        </>
+      )}
+    </EuiResizableContainer>
+  );
+};