fix: row link class anchor in anchor

ccontrols · Mar 27, 2021 · 1a20fc2 · 1a20fc2
1 parent 09d5f92
commit 1a20fc2
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 7 deletions.
diff --git a/ui/blocks/src/ComponentJSX/ComponentJSXTree.tsx b/ui/blocks/src/ComponentJSX/ComponentJSXTree.tsx
@@ -1,5 +1,6 @@
 /* eslint-disable react/display-name */
 import React, { FC, useMemo, useEffect, useReducer } from 'react';
+import { Box } from 'theme-ui';
 import { TriangleDownIcon } from '@primer/octicons-react';
 import { Component, JSXTree, isLocalImport } from '@component-controls/core';
 import { usePackage } from '@component-controls/store';
@@ -94,8 +95,8 @@ export const ComponentJSXTree: FC<ComponentJSXTreeProps> = ({ component }) => {
     const { dependencies, devDependencies } = componentPackage || {};
     const treeToItems = (
       tree: JSXTree,
-      level: number = 0,
-      parentIndex: number = 0,
+      level = 0,
+      parentIndex = 0,
     ): TreeItems | undefined => {
       return tree.length
         ? tree.map((item, index) => ({
@@ -176,6 +177,7 @@ export const ComponentJSXTree: FC<ComponentJSXTreeProps> = ({ component }) => {
         items={rows}
         chevronIcon={<TriangleDownIcon />}
         indentPixels={16}
+        rowLinkClass={Box}
       />
     </ActionContainer>
   ) : null;

diff --git a/ui/components/src/Tree/Tree.tsx b/ui/components/src/Tree/Tree.tsx
@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { FC, useEffect, useState } from 'react';
+import { FC, ElementType, useEffect, useState } from 'react';
 import { jsx, Box, Flex, Text, Button, BoxProps, ButtonProps } from 'theme-ui';
 import { ChevronDownIcon } from '@primer/octicons-react';
 import {
@@ -35,6 +35,7 @@ export const Tree: FC<TreeProps> = ({
   onExpandCollapse,
   arrowPosition = 'end',
   chevronIcon = <ChevronDownIcon />,
+  rowLinkClass,
   indentPixels = 8,
   ...rest
 }) => {
@@ -93,9 +94,8 @@ export const Tree: FC<TreeProps> = ({
     const itemId = id || label;
     const isExpanded: boolean =
       expandedItems && itemId ? expandedItems.includes(item) : false;
-    const LinkClass: LinkClassType | FC<ButtonProps> = itemItems
-      ? Button
-      : Link;
+    const LinkClass: LinkClassType | FC<ButtonProps> | ElementType =
+      rowLinkClass || (itemItems ? Button : Link);
     const itemKey = `item_${itemId}_${level}`;
 
     const isActiveItem = activeItem && activeItem.id === id;

diff --git a/ui/components/src/Tree/tree-utils.ts b/ui/components/src/Tree/tree-utils.ts
@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 
 type NavLabelFn = (props: TreeItem & { isExpanded: boolean }) => ReactNode;
 
@@ -202,6 +202,11 @@ export type TreeOwnProps = {
    * indentation in pixels for each elevel, By default 6 pixels
    */
   indentPixels?: number;
+
+  /**
+   * row link class - to avoid anchor in anchor warning
+   */
+  rowLinkClass?: React.ElementType;
 };
 
 export interface TreeState {