From bee0bb05b66b8e42065a44d13abe83a24affaa3e Mon Sep 17 00:00:00 2001
From: "ermin.zem" <harbin1053020115@gmail.com>
Date: Fri, 20 Mar 2020 11:24:37 +0800
Subject: [PATCH] feature: support props.wrapStyle (#70)

* feature: support props.wrapStyle

* fix: delete parcelProps.wrapWith in getParcelProps()

Co-authored-by: ermin.zem <ermin.zem@alibaba-inc.com>
---
 src/parcel.js      | 7 ++++++-
 src/parcel.test.js | 5 +++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/parcel.js b/src/parcel.js
index 5ce3127..2726e2c 100644
--- 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
index 79d6d78..410aa80 100644
--- 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(() => {