93 lines
1.9 KiB
JavaScript
Raw Normal View History

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;