Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 | 27x 27x | import PropTypes from 'prop-types';
import { Col, Icon, IconButton, KeyValue, Row, Tooltip } from '@folio/stripes/components';
import { useKintIntl } from '../../hooks';
import css from '../../../../styles/FileView.css';
const FileView = ({
canDownload,
file,
onDownload,
intlKey: passedIntlKey,
intlNS: passedIntlNS,
labelOverrides = {},
onDelete,
}) => {
const kintIntl = useKintIntl(passedIntlKey, passedIntlNS);
if (!file) return null;
return (
<div className={css.fileViewContainer}>
<Row>
<Col xs={6}>
<KeyValue
label={
kintIntl.formatKintMessage({
id: 'files.filename',
overrideValue: labelOverrides.filename,
})
}
>
{canDownload ?
/* eslint-disable-next-line jsx-a11y/anchor-is-valid */
<a
data-test-fileview-name
href="#"
onClick={(e) => {
onDownload(file);
e.preventDefault();
e.stopPropagation();
}}
rel="noopener noreferrer"
style={{ wordBreak: 'break-all' }}
target="_blank"
>
{file.name}
<Icon icon="external-link" />
</a> :
<div data-test-fileview-name>
{file.name}
</div>
}
</KeyValue>
</Col>
<Col xs={4}>
<KeyValue
label={
kintIntl.formatKintMessage({
id: 'files.uploaded',
overrideValue: labelOverrides.uploaded,
})
}
value={(
<span data-test-fileview-uploaded>
<div>{kintIntl.formatDate(file.modified)}</div>
<div>{kintIntl.formatTime(file.modified)}</div>
</span>
)}
/>
</Col>
<Col xs={2}>
<Tooltip
id={`file-${file?.id}-delete-button`}
text={
kintIntl.formatKintMessage({
id: 'files.remove',
overrideValue: labelOverrides.remove,
})
}
>
{({ ariaIds, ref }) => (
<IconButton
ref={ref}
aria-labelledby={ariaIds.text}
data-test-fileview-delete
icon="trash"
onClick={e => {
e.stopPropagation();
onDelete(file);
}}
/>
)}
</Tooltip>
</Col>
</Row>
</div>
);
};
FileView.propTypes = {
file: PropTypes.shape({
name: PropTypes.string,
}),
intlKey: PropTypes.string,
intlNS: PropTypes.string,
labelOverrides: PropTypes.shape({
filename: PropTypes.string,
remove: PropTypes.string,
uploaded: PropTypes.string,
})
};
export default FileView;
|