diff --git a/packages/strapi-plugin-upload/admin/src/components/Li/index.js b/packages/strapi-plugin-upload/admin/src/components/Li/index.js
index e1955b5d11..e12e762f42 100644
--- a/packages/strapi-plugin-upload/admin/src/components/Li/index.js
+++ b/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 = () => (
+
+
+
+ );
toggle = (e) => {
e.preventDefault();
@@ -21,28 +45,33 @@ class Li extends React.Component {
render() {
const { item } = this.props;
- return (
-
-
-
-
- {Object.keys(item).map((value, key) => {
- if (key === 0) {
- return (
-
-
-
- );
- }
+ if (this.state.copied) {
+ return this.renderLiCopied();
+ }
- if (value !== 'url') {
- return (
-
{item[value]}
- );
- }
- })}
-
-
+ return (
+ this.setState({copied: true})}>
+
+
+
+ {Object.keys(item).map((value, key) => {
+ if (key === 0) {
+ return (
+
+
+
+ );
+ }
+
+ if (value !== 'url') {
+ return (
+
{item[value]}
+ );
+ }
+ })}
+
+
+
);
}
}
diff --git a/packages/strapi-plugin-upload/admin/src/components/Li/styles.scss b/packages/strapi-plugin-upload/admin/src/components/Li/styles.scss
index 1acaa8a5e9..ca0a226ec9 100644
--- a/packages/strapi-plugin-upload/admin/src/components/Li/styles.scss
+++ b/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;
+ }
+ }
+}
diff --git a/packages/strapi-plugin-upload/admin/src/components/List/index.js b/packages/strapi-plugin-upload/admin/src/components/List/index.js
index e645e33223..9cd92ffa83 100644
--- a/packages/strapi-plugin-upload/admin/src/components/List/index.js
+++ b/packages/strapi-plugin-upload/admin/src/components/List/index.js
@@ -21,7 +21,7 @@ function List(props) {
{props.data.map((item, key) => (
))}
diff --git a/packages/strapi-plugin-upload/admin/src/containers/HomePage/saga.js b/packages/strapi-plugin-upload/admin/src/containers/HomePage/saga.js
index 3d4fb954ad..9f0f906c31 100755
--- a/packages/strapi-plugin-upload/admin/src/containers/HomePage/saga.js
+++ b/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) {
diff --git a/packages/strapi-plugin-upload/admin/src/translations/en.json b/packages/strapi-plugin-upload/admin/src/translations/en.json
index e55e837d66..fb8adcaee4 100755
--- a/packages/strapi-plugin-upload/admin/src/translations/en.json
+++ b/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",
diff --git a/packages/strapi-plugin-upload/admin/src/translations/fr.json b/packages/strapi-plugin-upload/admin/src/translations/fr.json
index 374c243859..355dfddc87 100755
--- a/packages/strapi-plugin-upload/admin/src/translations/fr.json
+++ b/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",
diff --git a/packages/strapi-plugin-upload/package.json b/packages/strapi-plugin-upload/package.json
index 0a08b8445a..c90106b64e 100644
--- a/packages/strapi-plugin-upload/package.json
+++ b/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"
-}
\ No newline at end of file
+}