Add CopytoClipboard

packages/strapi-plugin-upload/admin/src/components/Li/index.js

@@ -6,11 +6,35 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import cn from 'classnames';
 
 import styles from './styles.scss';
 
 class Li extends React.Component {
-  state = { isOpen: false };
+  state = { isOpen: false, copied: false };
+
+  componentDidUpdate(prevProps, prevState) {
+    if (prevState.copied !== this.state.copied && this.state.copied) {
+      setTimeout(() => {
+        this.setState({ copied: false });
+      }, 3000);
+    }
+  }
+
+  renderLiCopied = () => (
+    <li className={cn(styles.liWrapper, styles.copied)}>
+      <div>
+        <div className={styles.checked}>
+          <div />
+        </div>
+        <div>
+          <FormattedMessage id="upload.Li.linkCopied" />
+        </div>
+      </div>
+    </li>
+  );
 
   toggle = (e) => {
     e.preventDefault();
@@ -21,28 +45,33 @@ class Li extends React.Component {
   render() {
     const { item } = this.props;
 
-    return (
+    if (this.state.copied) {
-      <li className={styles.liWrapper}>
+      return this.renderLiCopied();
-        <input value={item.url} style={{ display: 'none' }} ref="inputCopy" />
+    }
-        <div className={styles.liContainer}>
-          <div />
-          {Object.keys(item).map((value, key) => {
-            if (key === 0) {
-              return (
-                <div key={key} className={styles.liIconContainer}>
-                  <i className={`fa fa-file-${item[value]}-o`} />
-                </div>
-              );
-            }
 
-            if (value !== 'url') {
+    return (
-              return (
+      <CopyToClipboard text={item.url} onCopy={() => this.setState({copied: true})}>
-                <div key={key}>{item[value]}</div>
+        <li className={styles.liWrapper}>
-              );
+          <div className={styles.liContainer}>
-            }
+            <div />
-          })}
+            {Object.keys(item).map((value, key) => {
-        </div>
+              if (key === 0) {
-      </li>
+                return (
+                  <div key={key} className={styles.liIconContainer}>
+                    <i className={`fa fa-file-${item[value]}-o`} />
+                  </div>
+                );
+              }
+
+              if (value !== 'url') {
+                return (
+                  <div key={key}>{item[value]}</div>
+                );
+              }
+            })}
+          </div>
+        </li>
+      </CopyToClipboard>
     );
   }
 }

packages/strapi-plugin-upload/admin/src/components/Li/styles.scss

@@ -46,3 +46,42 @@
 .liIconContainer {
   font-size: 20px;
 }
+
+.copied {
+  background-color: #FAFAFB;
+  > div {
+    display: flex;
+    width: 100%;
+    justify-content: center;
+    padding-top: 1px;
+    text-align: center;
+    color: #868FA1;
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 54px;
+  }
+}
+
+.checked {
+  padding-top: 20px;
+  line-height: 54px;
+  position: relative;
+  > div {
+    height: 14px;
+    width: 14px;
+    margin-right: 10px;
+    background-color: #2DD210;
+    border: 1px solid rgba(16,22,34,0.10);
+    border-radius: 3px;
+    &:after {
+      content: '\f00c';
+      position: absolute;
+      top: 0; left: 2px;
+      font-size: 10px;
+      font-family: 'FontAwesome';
+      font-weight: 100;
+      color: #fff;
+      transition: all .2s;
+    }
+  }
+}

packages/strapi-plugin-upload/admin/src/components/List/index.js

@@ -21,7 +21,7 @@ function List(props) {
           <ListHeader />
           {props.data.map((item, key) => (
             <Li
-              key={item.hash || key}
+              key={key}
               item={item}
             />
           ))}

packages/strapi-plugin-upload/admin/src/containers/HomePage/saga.js

@@ -56,7 +56,6 @@ function* uploadFiles(action) {
       }),
     ];
 
-    console.log('n', newFiles);
     yield put(dropSuccess(newFiles));
 
     if (newFiles.length > 1) {

packages/strapi-plugin-upload/admin/src/translations/en.json

@@ -6,6 +6,8 @@
   "HomePage.description": "Discover all the uploaded files",
   "HomePage.InputSearch.placeholder": "Search for a file...",
 
+  "Li.linkCopied": "LINK COPIED INTO THE CLIPBOARD",
+
   "ListHeader.type": "Type",
   "ListHeader.hash": "Hash",
   "ListHeader.name": "Name",

packages/strapi-plugin-upload/admin/src/translations/fr.json

@@ -6,6 +6,8 @@
   "HomePage.description": "Découvrez tous les fichiers téléchargés",
   "HomePage.InputSearch.placeholder": "Rechercher un fichier...",
 
+  "Li.linkCopied": "LINK COPIÉ DANS LE PRESSE-PAPIER",
+
   "ListHeader.type": "Type",
   "ListHeader.hash": "Hash",
   "ListHeader.name": "Nom",

packages/strapi-plugin-upload/package.json

@@ -22,7 +22,9 @@
     "test": "npm run lint",
     "prepublishOnly": "npm run build"
   },
-  "dependencies": {},
+  "dependencies": {
+    "react-copy-to-clipboard": "^5.0.1"
+  },
   "devDependencies": {
     "strapi-helper-plugin": "3.0.0-alpha.10.1"
   },
@@ -43,4 +45,4 @@
     "npm": ">= 3.0.0"
   },
   "license": "MIT"
-}
+}