Просмотр исходного кода

Adding copy to clipboard functionality

bodicsek 6 лет назад
Родитель
Сommit
785f54a2a7
1 измененных файлов с 13 добавлено и 3 удалено
  1. 13 3
      src/app/App.tsx

+ 13 - 3
src/app/App.tsx

@@ -6,6 +6,7 @@ import Grid from '@material-ui/core/Grid';
 import InputLabel from '@material-ui/core/InputLabel';
 import IconButton from '@material-ui/core/IconButton';
 import OpenInNewIcon from '@material-ui/icons/OpenInNew';
+import AssignmentIcon from '@material-ui/icons/Assignment';
 import BasePath from '../features/BasePath/BasePath';
 import PluginPath from '../features/PluginPath/PluginPath';
 import ConfigOverride from '../features/ConfigOverride/ConfigOverride';
@@ -14,6 +15,12 @@ import { useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import { RootState } from './rootReducer';
 
+const copyToClipboard = (text: string) => navigator.clipboard.writeText(text)
+  .then(
+    () => console.log('Async: Copying to clipboard was successful!'),
+    (err) => console.error('Async: Could not copy text: ', err)
+  );
+
 const App: React.FC = () => {
   const { basePath, pluginPath, configOverride } = useSelector((state: RootState) => ({
     basePath: state.basePath.value,
@@ -27,10 +34,10 @@ const App: React.FC = () => {
     <Container className="App">
       <Grid container spacing={3} direction="column">
         <Grid item xs={12}>
-          <BasePath/>
+          <BasePath />
         </Grid>
         <Grid item xs={12}>
-          <PluginPath/>
+          <PluginPath />
         </Grid>
         <Grid item xs={12}>
           <ConfigOverride pluginPath={pluginPath} />
@@ -40,7 +47,10 @@ const App: React.FC = () => {
           <div style={{ overflowWrap: "break-word" }}>{fullPath}</div>
         </Grid>
         <Grid item xs={12} style={{ textAlign: "center" }}>
-          <IconButton color="primary" onClick={() => window.open(fullPath)}>
+          <IconButton title="Copy link to clipboard" color="secondary" onClick={_ => copyToClipboard(fullPath)}>
+            <AssignmentIcon fontSize="small" />
+          </IconButton>
+          <IconButton title="Open link new window" color="primary" onClick={_ => window.open(fullPath)}>
             <OpenInNewIcon fontSize="large" />
           </IconButton>
         </Grid>