feat: render urls as anchor element

terrestris · May 16, 2024 · 9b63cd2 · 9b63cd2
1 parent bfca5bf
commit 9b63cd2
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 3 deletions.
diff --git a/src/Grid/PropertyGrid/PropertyGrid.example.md b/src/Grid/PropertyGrid/PropertyGrid.example.md
@@ -12,7 +12,7 @@ const feature = new OlFeature({
 const attributeObject = {
   foo: 'bar',
   foo2: 'bar2',
-  foo3: 'bar3',
+  foo3: 'https://terrestris.github.io/react-geo/',
   foo9: 'bar9',
   name: 'Point'
 };

diff --git a/src/Grid/PropertyGrid/PropertyGrid.spec.tsx b/src/Grid/PropertyGrid/PropertyGrid.spec.tsx
@@ -15,7 +15,8 @@ describe('<PropertyGrid />', () => {
     foo: 'bar',
     bvb: 'yarmolenko',
     mip: 'map',
-    name: 'Point'
+    name: 'Point',
+    link: 'https://www.example.com'
   };
 
   testFeature.setProperties(attributeObject);
@@ -69,4 +70,18 @@ describe('<PropertyGrid />', () => {
     expect(screen.getByText('name')).toBeVisible();
     expect(screen.getByText('Point')).toBeVisible();
   });
+
+  it('renders urls as links', () => {
+    render(
+      <PropertyGrid
+        feature={testFeature}
+      />
+    );
+
+    const link = screen.getByText('https://www.example.com');
+    expect(link).toBeVisible();
+    expect(link).toBeInstanceOf(HTMLAnchorElement);
+    expect(link).toHaveAttribute('href', 'https://www.example.com');
+  });
+
 });
diff --git a/src/Grid/PropertyGrid/PropertyGrid.tsx b/src/Grid/PropertyGrid/PropertyGrid.tsx
@@ -86,6 +86,10 @@ const PropertyGrid: React.FC<PropertyGridProps> = ({
     });
   }, [attributeFilter, attributeNames, feature]);
 
+  const isUrl = (value: string) => {
+    return /^(?:\w+:)?\/\/([^\s.]+\.\S{2}|localhost[:?\d]*)\S*$/.test(value);
+  };
+
   const columns = useMemo(() => {
     return [{
       title: attributeNameColumnTitle,
@@ -96,7 +100,14 @@ const PropertyGrid: React.FC<PropertyGridProps> = ({
       title: attributeValueColumnTitle,
       dataIndex: 'attributeValue',
       key: 'attributeValue',
-      width: `${100 - attributeNameColumnWidthInPercent}%`
+      width: `${100 - attributeNameColumnWidthInPercent}%`,
+      render: (value: any) => {
+        if (isUrl(value)) {
+          return <a href={value} target="_blank">{value}</a>;
+        } else {
+          return value;
+        }
+      }
     }];
   }, [attributeNameColumnTitle, attributeNameColumnWidthInPercent, attributeValueColumnTitle]);