basic wrapComponent

dist/swagger-ui.js.map

@@ -1 +1 @@
-{"version":3,"file":"swagger-ui.js","sources":["webpack:///swagger-ui.js"],"mappings":"AAAA;;;;;;AA0yCA;AAoyHA;AA8xHA;AAokGA;AA+9BA;AA0hCA;AAmjCA;AA65BA","sourceRoot":""}
+{"version":3,"file":"swagger-ui.js","sources":["webpack:///swagger-ui.js"],"mappings":"AAAA;;;;;;AA21CA;AAoyHA;AAmyHA;AAokGA;AA+9BA;AA0hCA;AAgjCA;AAu5BA","sourceRoot":""}

src/core/system.js

@@ -321,6 +321,25 @@ function systemExtend(dest={}, src={}) {
     return dest
   }
 
+  // Wrap components
+  // Parses existing components in the system, injects new wrappers into the dest,
+  // and removes wrapComponents from the src so it doesn't make it into the final system
+  if(src.wrapComponents) {
+    objMap(src.wrapComponents, (wrapper, key) => {
+      if(src.components && src.components[key]) {
+        // eslint-disable-next-line no-console
+        console.warn("Warning: providing and wrapping the same component simultaneously is not supported.")
+      }
+
+      if(dest.components[key]) {
+        dest.components[key] = wrapper(dest.components[key])
+      }
+    })
+
+    delete src.wrapComponents
+  }
+
+
   // Account for wrapActions, make it an array and append to it
   // Modifies `src`
   // 80% of this code is just safe traversal. We need to address that ( ie: use a lib )

test/core/system/wrapComponent.js

@@ -0,0 +1,139 @@
+import React from "react"
+import expect from "expect"
+import { render } from "enzyme"
+import System from "core/system"
+
+describe("wrapComponents", () => {
+  describe("should wrap a component and provide a reference to the original", () => {
+    it("with stateless components", function(){
+      // Given
+      const system = new System({
+        plugins: [
+          {
+            components: {
+              wow: ({ name }) => <div>{name} component</div>
+            }
+          },
+          {
+            wrapComponents: {
+              wow: (OriginalComponent) => (props) => {
+                return <container>
+                  <OriginalComponent {...props}></OriginalComponent>
+                  <OriginalComponent name="Wrapped"></OriginalComponent>
+                </container>
+              }
+            }
+          }
+        ]
+      })
+
+      // When
+      var Component = system.getSystem().getComponents("wow")
+      const wrapper = render(<Component name="Normal" />)
+
+      const container = wrapper.children().first()
+      expect(container[0].name).toEqual("container")
+
+      const children = container.children()
+      expect(children.length).toEqual(2)
+      expect(children.eq(0).text()).toEqual("Normal component")
+      expect(children.eq(1).text()).toEqual("Wrapped component")
+    })
+
+    it("with React classes", function(){
+      class MyComponent extends React.Component {
+        render() {
+          return <div>{this.props.name} component</div>
+        }
+      }
+
+      // Given
+      const system = new System({
+        plugins: [
+          {
+            components: {
+              wow: MyComponent
+            }
+          },
+          {
+            wrapComponents: {
+              wow: (OriginalComponent) => {
+                return class WrapperComponent extends React.Component {
+                  render() {
+                    return <container>
+                      <OriginalComponent {...this.props}></OriginalComponent>
+                      <OriginalComponent name="Wrapped"></OriginalComponent>
+                    </container>
+                  }
+                }
+              }
+            }
+          }
+        ]
+      })
+
+      // When
+      var Component = system.getSystem().getComponents("wow")
+      const wrapper = render(<Component name="Normal" />)
+
+      const container = wrapper.children().first()
+      expect(container[0].name).toEqual("container")
+
+      const children = container.children()
+      expect(children.length).toEqual(2)
+      expect(children.eq(0).text()).toEqual("Normal component")
+      expect(children.eq(1).text()).toEqual("Wrapped component")
+    })
+  })
+
+  it.skip("should provide a reference to the system to the wrapper", function(done){
+
+    // Given
+
+    const mySystem = new System({
+      plugins: [
+        {
+          // Make a selector
+          statePlugins: {
+            doge: {
+              selectors: {
+                wow: () => () => {
+                  return "WOW much data"
+                }
+              }
+            }
+          }
+        },
+        {
+          // Create a component
+          components: {
+            wow: () => <div>Original component</div>
+          }
+        },
+        {
+          // Wrap the component and use the system
+          wrapComponents: {
+            wow: (OriginalComponent, system) => (props) => {
+              return <container>
+                <OriginalComponent {...props}></OriginalComponent>
+                <OriginalComponent name="Wrapped"></OriginalComponent>
+              </container>
+            }
+          }
+        }
+      ]
+    })
+
+    // Then
+    var Component = system.getSystem().getComponents("wow")
+    const wrapper = render(<Component name="Normal" />)
+
+    const container = wrapper.children().first()
+    expect(container[0].name).toEqual("container")
+
+    const children = container.children()
+    expect(children.length).toEqual(2)
+    expect(children.eq(0).text()).toEqual("Original component")
+    expect(children.eq(1).text()).toEqual("Wrapped component")
+  })
+})