Implement className as function for compatibility with react-router.

Based on remix-run/react-router@b3c7d99
infernojs · Oct 22, 2022 · ab86a0a · ab86a0a
1 parent 8e89b76
commit ab86a0a
Show file tree

Hide file tree

Showing 2 changed files with 89 additions and 6 deletions.
diff --git a/packages/inferno-router/__tests__/NavLink.spec.tsx b/packages/inferno-router/__tests__/NavLink.spec.tsx
@@ -158,6 +158,80 @@ describe('NavLink', () => {
     });
   });
 
+  it("applies its className when provided as a function", () => {
+    render(
+      <MemoryRouter initialEntries={["/pizza"]}>
+        <NavLink
+          to="/pizza"
+          className={(isActive: boolean) => isActive ? "active-pizza" : "chill-pizza"}
+        >
+        Pizza!
+      </NavLink>
+      </MemoryRouter >,
+      node
+    );
+
+    const a = node.querySelector("a");
+    expect(a.className).toContain("active-pizza");
+  });
+
+  it("applies its style when provided as a function", () => {
+    const defaultStyle = { color: "black" };
+    const activeStyle = { color: "red" };
+
+    render(
+      <MemoryRouter initialEntries={["/pizza"]}>
+        <NavLink
+          to="/pizza"
+          style={isActive => (isActive ? activeStyle : defaultStyle)}
+        >
+          Pizza!
+        </NavLink>
+      </MemoryRouter>,
+      node
+    );
+
+    const a = node.querySelector("a");
+    expect(a.style.color).toBe(activeStyle.color);
+  });
+
+  it("applies its className when provided as a function", () => {
+    render(
+      <MemoryRouter initialEntries={["/pizza"]}>
+        <NavLink
+          to="/salad"
+          className={isActive => (isActive ? "active-salad" : "chill-salad")}
+        >
+          Salad?
+        </NavLink>
+      </MemoryRouter>,
+      node
+    );
+
+    const a = node.querySelector("a");
+    expect(a.className).toContain("chill-salad");
+  });
+
+  it("applies its style when provided as a function", () => {
+    const defaultStyle = { color: "black" };
+    const activeStyle = { color: "red" };
+
+    render(
+      <MemoryRouter initialEntries={["/pizza"]}>
+        <NavLink
+          to="/salad"
+          style={isActive => (isActive ? activeStyle : defaultStyle)}
+        >
+          Salad?
+        </NavLink>
+      </MemoryRouter>,
+      node
+    );
+
+    const a = node.querySelector("a");
+    expect(a.style.color).toBe(defaultStyle.color);
+  });
+
   describe('exact', () => {
     it('does not do exact matching by default', () => {
       render(

diff --git a/packages/inferno-router/src/NavLink.ts b/packages/inferno-router/src/NavLink.ts
@@ -9,14 +9,15 @@ function filter(i) {
   return i;
 }
 
-interface NavLinkProps extends ILinkProps {
+interface NavLinkProps extends Omit<ILinkProps, 'className'> {
   to: string | Location;
   exact?: boolean;
   strict?: boolean;
   location?: any;
   activeClassName?: string;
+  className?: string | ((isActive: boolean) => string);
   activeStyle?: any;
-  style?: any;
+  style?: object | ((isActive: boolean) => string);
   isActive?: (match, location) => boolean;
   ariaCurrent?: string;
 }
@@ -32,22 +33,30 @@ export function NavLink({
   onClick,
   location: linkLocation,
   activeClassName = 'active',
-  className,
+  className: classNameProp,
   activeStyle,
-  style,
+  style: styleProp,
   isActive: getIsActive,
   ariaCurrent = 'true',
   ...rest
-}: NavLinkProps & Inferno.LinkHTMLAttributes<HTMLLinkElement>): any {
+}: NavLinkProps & Omit<Inferno.LinkHTMLAttributes<HTMLLinkElement>, 'className' | 'style'>): any {
   function linkComponent({ location, match }): VNode {
     const isActive = Boolean(getIsActive ? getIsActive(match, location) : match);
 
+    let className = typeof classNameProp === "function"
+      ? classNameProp(isActive)
+      : classNameProp;
+
+    let style = typeof styleProp === "function"
+      ? styleProp(isActive)
+      : styleProp;
+
     return createComponentVNode(
       VNodeFlags.ComponentFunction,
       Link,
       combineFrom(
         {
-          'aria-current': isActive && ariaCurrent,
+          'aria-current': (isActive && ariaCurrent) || null,
           className: isActive ? [className, activeClassName].filter(filter).join(' ') : className,
           onClick,
           style: isActive ? combineFrom(style, activeStyle) : style,