feature: support props.wrapStyle (#70)

* feature: support props.wrapStyle * fix: delete parcelProps.wrapWith in getParcelProps() Co-authored-by: ermin.zem <[email protected]>
single-spa · Mar 20, 2020 · bee0bb0 · bee0bb0
1 parent a27e052
commit bee0bb0
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/src/parcel.js b/src/parcel.js
@@ -9,6 +9,7 @@ import {SingleSpaContext} from '../lib/single-spa-react.js'
 export default class Parcel extends React.Component {
   static defaultProps = {
     wrapWith: 'div',
+    wrapStyle: {},
     parcelDidMount: () => {},
   }
   constructor(props) {
@@ -36,6 +37,9 @@ export default class Parcel extends React.Component {
         domElement = this.el
       } else {
         this.createdDomElement = domElement = document.createElement(this.props.wrapWith)
+        Object.keys(this.props.wrapStyle).forEach(key => {
+          domElement.style[key] = this.props.wrapStyle[key];
+        });
         this.props.appendTo.appendChild(domElement)
       }
       this.parcel = mountParcel(this.props.config, {domElement, ...this.getParcelProps()})
@@ -91,7 +95,7 @@ export default class Parcel extends React.Component {
         )
         : undefined
 
-      return React.createElement(this.props.wrapWith, {ref: this.handleRef}, children)
+      return React.createElement(this.props.wrapWith, {ref: this.handleRef, style: this.props.wrapStyle}, children)
     }
   }
   handleRef = el => {
@@ -136,6 +140,7 @@ export default class Parcel extends React.Component {
     delete parcelProps.mountParcel
     delete parcelProps.config
     delete parcelProps.wrapWith
+    delete parcelProps.wrapStyle
     delete parcelProps.appendTo
     delete parcelProps.handleError
     delete parcelProps.parcelDidMount

diff --git a/src/parcel.test.js b/src/parcel.test.js
@@ -43,6 +43,11 @@ describe(`<Parcel />`, () => {
     expect(wrapper.find('div').length).toBe(1)
   })
 
+  it(`renders a div wrap with style`, () => {
+    const wrapper = mount(<Parcel {...props} wrapStyle={{ height: '100px' }} />);
+    expect(/style\=\"height\:\s{1}100px;\"/.test(wrapper.find('div').html())).toBe(true);
+  })
+
   it(`calls the mountParcel prop when it mounts`, () => {
     const wrapper = mount(<Parcel {...props} />)
     return wrapper.instance().nextThingToDo.then(() => {