feat(UISrefActive): support for nested UISrefActive

ui-router · Jul 17, 2018 · 49e32e6 · 49e32e6
1 parent 83b0d8e
commit 49e32e6
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 1 deletion.
diff --git a/src/components/UISrefActive.tsx b/src/components/UISrefActive.tsx
@@ -17,6 +17,7 @@ let classNames = _classNames;
 
 export interface UISrefActiveProps {
   parentUIView: UIViewAddress;
+  addStateInfoToParentActive: Function;
   router: UIRouterReact;
   class?: string;
   exact?: Boolean;
@@ -46,6 +47,7 @@ class SrefActive extends Component<UISrefActiveProps, any> {
 
   static propTypes = {
     parentUIView: PropTypes.object,
+    addStateInfoToParentActive: PropTypes.func,
     router: PropTypes.object.isRequired,
     class: PropTypes.string.isRequired,
     children: PropTypes.element.isRequired,
@@ -71,7 +73,17 @@ class SrefActive extends Component<UISrefActiveProps, any> {
   addStateInfo = (stateName, stateParams) => {
     const activeClass = this.props.class;
     let deregister = this.addState(stateName, stateParams, activeClass);
+    const addStateInfo = this.props.addStateInfoToParentActive;
     this.updateActiveClasses();
+
+    if (typeof addStateInfo === 'function') {
+      const parentDeregister = addStateInfo(stateName, stateParams);
+      return () => {
+        deregister();
+        parentDeregister();
+      };
+    }
+
     return deregister;
   };
 
@@ -142,7 +154,18 @@ export const UISrefActive = props => (
   <UIRouterConsumer>
     {router => (
       <UIViewConsumer>
-        {parentUIView => <SrefActive {...props} router={router} parentUIView={parentUIView} />}
+        {parentUIView => (
+          <UISrefActiveConsumer>
+            {addStateInfo => (
+              <SrefActive
+                {...props}
+                router={router}
+                parentUIView={parentUIView}
+                addStateInfoToParentActive={addStateInfo}
+              />
+            )}
+          </UISrefActiveConsumer>
+        )}
       </UIViewConsumer>
     )}
   </UIRouterConsumer>

diff --git a/src/components/__tests__/UISrefActive.test.tsx b/src/components/__tests__/UISrefActive.test.tsx
@@ -235,6 +235,40 @@ describe('<UISrefActive>', () => {
     expect(instance.states.length).toBe(3);
   });
 
+  it('works with nested <UISrefActive>', () => {
+    const wrapper = mount(
+      <UIRouter router={router}>
+        <UISrefActive class="active">
+          <div>
+            <UISrefActive class="active">
+              <UISref to="parent.child1">
+                <a>child1</a>
+              </UISref>
+            </UISrefActive>
+            <UISrefActive class="active">
+              <UISref to="parent.child2">
+                <a>child2</a>
+              </UISref>
+            </UISrefActive>
+            <UISrefActive class="active">
+              <UISref to="parent.child3">
+                <a>child3</a>
+              </UISref>
+            </UISrefActive>
+          </div>
+        </UISrefActive>
+      </UIRouter>
+    );
+    const instance = wrapper
+      .find(UISrefActive)
+      .at(0)
+      .find('SrefActive')
+      .at(0)
+      .instance();
+    expect(instance.context.parentUIViewAddress).toBeUndefined();
+    expect(instance.states.length).toBe(3);
+  });
+
   it("removes active state of UISref when it's unmounted", () => {
     const Comp = props => (
       <UIRouter router={router}>