fix: specifying ids on elements (named destinations) (diegomura#2549)

.changeset/funny-paws-do.md

@@ -0,0 +1,5 @@
+---
+'@react-pdf/pdfkit': patch
+---
+
+Fix named destinations (id attribute with string value)

packages/pdfkit/src/name_tree.js

@@ -1,21 +1,21 @@
 /*
-PDFNumberTree - represents a number tree object
+PDFNameTree - represents a name tree object
 */
 
-import PDFTree from './tree';
+import PDFTree from "./tree";
 
-class PDFNumberTree extends PDFTree {
+class PDFNameTree extends PDFTree {
   _compareKeys(a, b) {
-    return parseInt(a) - parseInt(b);
+    return a.localeCompare(b);
   }
 
   _keysName() {
-    return 'Nums';
+    return 'Names';
   }
 
   _dataForKey(k) {
-    return parseInt(k);
+    return new String(k);
   }
 }
 
-export default PDFNumberTree;
+export default PDFNameTree;

packages/renderer/tests/namedDestinations.test.js

@@ -0,0 +1,35 @@
+/* eslint-disable react/no-array-index-key */
+import { Document, Font, Link, Page, Text, View } from '@react-pdf/renderer';
+import renderToImage from './renderComponent';
+
+Font.register({
+  family: 'Lato',
+  src: 'https://fonts.gstatic.com/s/lato/v16/S6uyw4BMUTPHjx4wWw.ttf',
+});
+
+const Doc = () => (
+  <Document>
+    <Page
+      orientation="landscape"
+      size="A4"
+      style={{ padding: 30, fontSize: 24, fontFamily: 'Lato' }}
+    >
+      <View>
+        <Link href="#nameddestination">
+          <Text>Click me to get to the named destination</Text>
+        </Link>
+      </View>
+      <View id="nameddestination" break>
+        <Text>Here is the named destination</Text>
+      </View>
+    </Page>
+  </Document>
+);
+
+describe('named destinations', () => {
+  test('should visually match snapshot', async () => {
+    const image = await renderToImage(<Doc />);
+
+    expect(image).toMatchImageSnapshot();
+  });
+});