Merge pull request #3849 from KaiVolland/anchor-for-urls

Render urls as anchor element

src/Grid/PropertyGrid/PropertyGrid.example.md

@@ -13,7 +13,7 @@ const feature = new OlFeature({
 const attributeObject = {
   foo: 'bar',
   foo2: 'bar2',
-  foo3: 'bar3',
+  foo3: 'https://terrestris.github.io/react-geo/',
   foo9: 'bar9',
   name: 'Point'
 };

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);
@@ -132,4 +133,22 @@ describe('<PropertyGrid />', () => {
       }
     });
   });
+
+  it('renders urls as links', () => {
+    const props = {
+      feature: testFeature
+    };
+    const wrapper = TestUtil.mountComponent(PropertyGrid, props);
+
+    const dataSource = wrapper.instance().getDataSource();
+    dataSource.forEach((dataSourceElement) => {
+      const attributeValue = dataSourceElement.attributeValue;
+      const renderedValue = wrapper.find('a').filterWhere((a) => a.text() === attributeValue);
+      if (dataSourceElement.attributeName === 'link') {
+        expect(renderedValue).toHaveLength(1);
+      } else {
+        expect(renderedValue).toHaveLength(0);
+      }
+    });
+  })
 });

src/Grid/PropertyGrid/PropertyGrid.tsx

@@ -96,11 +96,15 @@ class PropertyGrid extends React.Component<PropertyGridProps> {
     return dataSource;
   }
 
+  isUrl(value: string) {
+    return /^(?:\w+:)?\/\/([^\s.]+\.\S{2}|localhost[:?\d]*)\S*$/.test(value);
+  }
+
   /**
    * Generates the column definition for the given feature.
    */
   getColumns() {
-    const columns = [{
+    const columns: TableProps<any>["columns"] = [{
       title: this.props.attributeNameColumnTitle,
       dataIndex: 'attributeName',
       key: 'attributeName',
@@ -109,7 +113,14 @@ class PropertyGrid extends React.Component<PropertyGridProps> {
       title: this.props.attributeValueColumnTitle,
       dataIndex: 'attributeValue',
       key: 'attributeValue',
-      width: `${100 - this.props.attributeNameColumnWidthInPercent}%`
+      width: `${100 - this.props.attributeNameColumnWidthInPercent}%`,
+      render: (value) => {
+        if (this.isUrl(value)) {
+          return <a href={value} target="_blank">{value}</a>;
+        } else {
+          return value;
+        }
+      }
     }];
 
     return columns;