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 +}