2018-02-16 17:19:57 +01:00
|
|
|
/**
|
|
|
|
*
|
|
|
|
* Li
|
|
|
|
*
|
|
|
|
*/
|
|
|
|
|
|
|
|
import React from 'react';
|
|
|
|
import PropTypes from 'prop-types';
|
2018-02-19 13:48:02 +01:00
|
|
|
import { FormattedMessage } from 'react-intl';
|
|
|
|
import { CopyToClipboard } from 'react-copy-to-clipboard';
|
|
|
|
import cn from 'classnames';
|
2018-02-16 17:19:57 +01:00
|
|
|
|
2018-02-19 14:23:47 +01:00
|
|
|
import FileIcon from 'components/FileIcon';
|
|
|
|
|
2018-02-16 17:19:57 +01:00
|
|
|
import styles from './styles.scss';
|
|
|
|
|
|
|
|
class Li extends React.Component {
|
2018-02-19 13:48:02 +01:00
|
|
|
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>
|
|
|
|
);
|
2018-02-16 17:19:57 +01:00
|
|
|
|
|
|
|
toggle = (e) => {
|
|
|
|
e.preventDefault();
|
|
|
|
e.stopPropagation();
|
|
|
|
this.setState({ isOpen: !this.state.isOpen });
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
|
|
|
const { item } = this.props;
|
|
|
|
|
2018-02-19 13:48:02 +01:00
|
|
|
if (this.state.copied) {
|
|
|
|
return this.renderLiCopied();
|
|
|
|
}
|
|
|
|
|
2018-02-16 17:19:57 +01:00
|
|
|
return (
|
2018-02-19 13:48:02 +01:00
|
|
|
<CopyToClipboard text={item.url} onCopy={() => this.setState({copied: true})}>
|
|
|
|
<li className={styles.liWrapper}>
|
|
|
|
<div className={styles.liContainer}>
|
|
|
|
<div />
|
|
|
|
{Object.keys(item).map((value, key) => {
|
|
|
|
if (key === 0) {
|
2018-02-19 14:23:47 +01:00
|
|
|
return <FileIcon key={key} fileType={item[value]} />;
|
2018-02-19 13:48:02 +01:00
|
|
|
}
|
2018-02-16 17:19:57 +01:00
|
|
|
|
2018-02-19 13:48:02 +01:00
|
|
|
if (value !== 'url') {
|
|
|
|
return (
|
|
|
|
<div key={key}>{item[value]}</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
})}
|
|
|
|
</div>
|
|
|
|
</li>
|
|
|
|
</CopyToClipboard>
|
2018-02-16 17:19:57 +01:00
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
Li.defaultProps = {
|
|
|
|
item: {
|
|
|
|
type: 'pdf',
|
|
|
|
hash: '1234',
|
|
|
|
name: 'avatar.pdf',
|
|
|
|
updated: '20/11/2017 19:29:54',
|
|
|
|
size: '24 B',
|
|
|
|
relatedTo: 'John Doe',
|
|
|
|
},
|
|
|
|
};
|
|
|
|
|
|
|
|
Li.proptypes = {
|
|
|
|
item: PropTypes.object,
|
|
|
|
};
|
|
|
|
|
|
|
|
export default Li;
|