fix: links with react children and start number

ccontrols · Jan 3, 2021 · 370af1d · 370af1d
1 parent 69ae819
commit 370af1d
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 3 deletions.
diff --git a/ui/components/src/LinkHeading/LinkHeading.tsx b/ui/components/src/LinkHeading/LinkHeading.tsx
@@ -25,7 +25,18 @@ export const LinkHeading: FC<LinkHeadingProps> = ({
 }) => {
   const { size, level } = iconSize[as as string];
   const padding = 4;
-  const linkId = titleToId(id || children);
+  const childStrings = Array.isArray(children)
+    ? children
+        .map(child =>
+          typeof child === 'string'
+            ? child
+            : typeof child === 'object'
+            ? ((child as unknown) as any).props?.children
+            : null,
+        )
+        .filter(child => child)
+    : children;
+  const linkId = titleToId(id || childStrings);
   return (
     <Box id={linkId} variant="linkheading.container">
       <Box variant="linkheading.inner">
@@ -34,7 +45,7 @@ export const LinkHeading: FC<LinkHeadingProps> = ({
             sx={{ paddingRight: `${padding}px`, left: -(size + padding) }}
             variant="linkheading.link"
             href={pageLink(linkId)}
-            data-title={title || children}
+            data-title={title || childStrings}
             data-id={linkId}
             data-level={level}
           >

diff --git a/ui/components/src/LinkHeading/pageLink.ts b/ui/components/src/LinkHeading/pageLink.ts
@@ -1,6 +1,11 @@
 export const titleToId = (id: any): string => {
   const strId = typeof id === 'string' ? id : '';
-  return strId.replace(/\W/g, '-').toLowerCase();
+  const value = strId.replace(/\W/g, '-').toLowerCase();
+  if (value.match(/^[A-Z]/i)) {
+    return value;
+  }
+  //firce start with letter
+  return `i-${value}`;
 };
 export const pageLink = (id: string): string => {
   let url = '';