Reuse divs in Centered addon

addons/centered/src/html.js

@@ -1,27 +1,34 @@
 import { document, Node } from 'global';
+import styles from './styles';
 
-const style = {
+const INNER_ID = 'sb-addon-centered-inner';
-  position: 'fixed',
+const WRAPPER_ID = 'sb-addon-centered-wrapper';
-  top: 0,
-  left: 0,
-  bottom: 0,
-  right: 0,
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  overflow: 'auto',
-};
 
-const innerStyle = {
+function getOrCreate(id, style) {
-  margin: 'auto',
+  const elementOnDom = document.getElementById(id);
-};
+
+  if (elementOnDom) {
+    return elementOnDom;
+  }
+
+  const element = document.createElement('div');
+  element.setAttribute('id', id);
+  Object.assign(element.style, style);
+
+  return element;
+}
+
+function getInnerDiv() {
+  return getOrCreate(INNER_ID, styles.innerStyle);
+}
+
+function getWrapperDiv() {
+  return getOrCreate(WRAPPER_ID, styles.style);
+}
 
 export default function(storyFn) {
-  const inner = document.createElement('div');
+  const inner = getInnerDiv();
-  Object.assign(inner.style, innerStyle);
+  const wrapper = getWrapperDiv();
-
-  const wrapper = document.createElement('div');
-  Object.assign(wrapper.style, style);
   wrapper.appendChild(inner);
 
   const component = storyFn();
@@ -29,6 +36,7 @@ export default function(storyFn) {
   if (typeof component === 'string') {
     inner.innerHTML = component;
   } else if (component instanceof Node) {
+    inner.innerHTML = '';
     inner.appendChild(component);
   } else {
     return component;

addons/centered/src/mithril.js

@@ -2,28 +2,13 @@
 
 // eslint-disable-next-line import/no-extraneous-dependencies
 import m from 'mithril';
-
+import styles from './styles';
-const style = {
-  position: 'fixed',
-  top: 0,
-  left: 0,
-  bottom: 0,
-  right: 0,
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  overflow: 'auto',
-};
-
-const innerStyle = {
-  margin: 'auto',
-};
 
 export default function(storyFn) {
   return {
     view: () => (
-      <div style={style}>
+      <div style={styles.style}>
-        <div style={innerStyle}>{m(storyFn())}</div>
+        <div style={styles.innerStyle}>{m(storyFn())}</div>
       </div>
     ),
   };

addons/centered/src/react.js

@@ -1,26 +1,11 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
 import React from 'react';
-
+import styles from './styles';
-const style = {
-  position: 'fixed',
-  top: 0,
-  left: 0,
-  bottom: 0,
-  right: 0,
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  overflow: 'auto',
-};
-
-const innerStyle = {
-  margin: 'auto',
-};
 
 export default function(storyFn) {
   return (
-    <div style={style}>
+    <div style={styles.style}>
-      <div style={innerStyle}>{storyFn()}</div>
+      <div style={styles.innerStyle}>{storyFn()}</div>
     </div>
   );
 }

addons/centered/src/styles.js

@@ -0,0 +1,18 @@
+const styles = {
+  style: {
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'auto',
+  },
+  innerStyle: {
+    margin: 'auto',
+  },
+};
+
+export default styles;

addons/centered/src/vue.js

@@ -1,3 +1,5 @@
+import styles from './styles';
+
 export default function() {
   return {
     template: `
@@ -8,22 +10,7 @@ export default function() {
       </div>
     `,
     data() {
-      return {
+      return styles;
-        style: {
-          position: 'fixed',
-          top: 0,
-          left: 0,
-          bottom: 0,
-          right: 0,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          overflow: 'auto',
-        },
-        innerStyle: {
-          margin: 'auto',
-        },
-      };
     },
   };
 }