Fix #93: Add a clickable link on url format inputs

Author: bhch

src/components/form.js

@@ -2,6 +2,7 @@ import React from 'react';
 import Button from './buttons';
 import Loader from './loaders';
 import {TimePicker} from './widgets';
+import Icon from './icons';
 import {EditorContext, getCsrfCookie, capitalize, convertType, getCoordsFromName, choicesValueTitleMap} from '../util';
 
 
@@ -804,3 +805,27 @@ export class FormDateTimeInput extends React.Component {
         );
     }
 }
+
+
+export function FormURLInput(props) {
+    return (
+        <div className={props.label ? 'rjf-url-field has-label' : 'rjf-url-field'}>
+            <FormInput
+                {...props}
+                type="url"
+                className="rjf-url-field-input"
+            />
+            {props.value &&
+            <a
+                href={props.value}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="rjf-url-field-link"
+                title="Open in new tab"
+            >
+                <Icon name="box-arrow-up-right" /> <span>Open link</span>
+            </a>
+            }
+        </div>
+    );
+}

src/components/icons.js

@@ -23,6 +23,9 @@ export default function Icon(props) {
         case 'three-dots-vertical':
             icon = <ThreeDotsVertical />;
             break;
+        case 'box-arrow-up-right':
+            icon = <BoxArrowUpRight />;
+            break;
     }
 
     return (
@@ -70,3 +73,12 @@ function ThreeDotsVertical(props) {
         <path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
     );
 }
+
+function BoxArrowUpRight(props) {
+    return (
+        <React.Fragment>
+            <path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5"/>
+            <path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0z"/>
+        </React.Fragment>
+    );
+}

src/components/index.js

@@ -1,6 +1,6 @@
 import Button from './buttons';
 import {FormInput, FormCheckInput, FormRadioInput, FormSelectInput, FormFileInput,
-    FormTextareaInput, FormDateTimeInput, FormMultiSelectInput} from './form';
+    FormTextareaInput, FormDateTimeInput, FormMultiSelectInput, FormURLInput} from './form';
 import AutoCompleteInput from './autocomplete';
 import {FormRow, FormGroup, FormRowControls, GroupTitle, GroupDescription} from './containers';
 import Loader from './loaders';
@@ -11,7 +11,7 @@ export {
     Button,
     FormInput, FormCheckInput, FormRadioInput, FormSelectInput, FormFileInput,
     FormTextareaInput, FormDateTimeInput, FormMultiSelectInput,
-    AutoCompleteInput,
+    AutoCompleteInput, FormURLInput,
     FormRow, FormGroup, FormRowControls, GroupTitle, GroupDescription,
     Loader,
     Icon,

src/ui.js

@@ -3,7 +3,7 @@ import {getBlankData, findMatchingSubschemaIndex, dataObjectMatchesSchema,
     dataArrayMatchesSchema} from './data';
 import {Button, FormInput, FormCheckInput, FormRadioInput, FormSelectInput,
     FormFileInput, FormRow, FormGroup, GroupTitle, GroupDescription, FormRowControls, FormTextareaInput,
-    FormDateTimeInput, FormMultiSelectInput, FileUploader, AutoCompleteInput} from './components';
+    FormDateTimeInput, FormMultiSelectInput, FileUploader, AutoCompleteInput, FormURLInput} from './components';
 import {getVerboseName, convertType, getCoordsFromName, getKeyword, normalizeKeyword,
     joinCoords, splitCoords, actualType, getSchemaType, isEqualset, isSubset} from './util';
 
@@ -81,14 +81,18 @@ function FormField(props) {
             InputField = FormInput;
 
             if (props.schema.format) {
-                if (props.schema.format === 'data-url') {
+                let format = props.schema.format;
+
+                if (format === 'data-url') {
                     InputField = FormFileInput;
-                } else if (props.schema.format === 'file-url') {
+                } else if (format === 'file-url') {
                     InputField = FileUploader;
-                } else if (normalizeKeyword(props.schema.format) === 'date-time') {
+                } else if (normalizeKeyword(format) === 'date-time') {
                     InputField = FormDateTimeInput;
+                } else if (format === 'uri' || format === 'uri-reference') {
+                    InputField = FormURLInput;
                 }
-                inputProps.type = props.schema.format;
+                inputProps.type = format;
             } else if (props.schema.widget === 'hidden') {
                 inputProps.type = 'hidden';
             } else {