From e3dce09fa9665b3cd2ef4376c9df415ea4b3fad4 Mon Sep 17 00:00:00 2001 From: Anthony Geourjon <anthony.geourjon@tetras-libre.fr> Date: Tue, 6 Feb 2024 10:48:16 +0100 Subject: [PATCH] Improve manifest network input --- .../AnnotationFormManifestNetwork.js | 38 +++++++++++++++++-- 1 file changed, 34 insertions(+), 4 deletions(-) diff --git a/src/annotationForm/AnnotationFormManifestNetwork.js b/src/annotationForm/AnnotationFormManifestNetwork.js index 6e7d534..9ece368 100644 --- a/src/annotationForm/AnnotationFormManifestNetwork.js +++ b/src/annotationForm/AnnotationFormManifestNetwork.js @@ -1,13 +1,25 @@ import React from 'react'; import { - Grid, Paper, TextField, Typography, Button, + Grid, Paper, TextField, Typography, Button, Link, } from '@mui/material'; import PropTypes from 'prop-types'; /** Form part for edit annotation content and body */ function AnnotationFormNetwork({ manifestNetwork, updateManifestNetwork }) { - const addManifest = () => { - updateManifestNetwork(manifestNetwork); + const isValidUrl = (string) => { + if (string === '') { + return true; + } + try { + new URL(string); + return true; + } catch (_) { + return false; + } + }; + + const onChangeManifestNetworkInput = (event) => { + updateManifestNetwork(event.target.value.trim()); }; return ( @@ -18,9 +30,27 @@ function AnnotationFormNetwork({ manifestNetwork, updateManifestNetwork }) { <Grid> <TextField value={manifestNetwork} - onChange={(ev) => updateManifestNetwork(ev.target.value)} + onChange={onChangeManifestNetworkInput} label="Manifest URL" + type="url" /> + { + isValidUrl(manifestNetwork) && ( + <Link + href={manifestNetwork} + target="_blank" + > + {manifestNetwork} + </Link> + ) + } + { + !isValidUrl(manifestNetwork) && ( + <Typography variant="caption"> + Not a valid URL + </Typography> + ) + } </Grid> </Paper> ); -- GitLab