Back

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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
/**
 * External dependencies
 */
import { Button, Icon } from '@wordpress/components';
import { decodeEntities } from '@wordpress/html-entities';
import { __, sprintf } from '@wordpress/i18n';
import { download } from '@wordpress/icons';
import { Link, Tooltip } from '@wordpress/ui';
import clsx from 'clsx';
/**
 * Internal dependencies
 */
import useConfigValue from '../../../../../hooks/use-config-value.ts';
 
const extensionMap: Record< string, string > = {
	pdf: 'pdf',
	png: 'png',
	jpg: 'png',
	jpeg: 'png',
	gif: 'png',
	mp4: 'mp4',
	mp3: 'mp3',
	webm: 'mp4',
	doc: 'doc',
	docx: 'doc',
	txt: 'txt',
	ppt: 'ppt',
	pptx: 'ppt',
	xls: 'xls',
	xlsx: 'xls',
	csv: 'xls',
	zip: 'zip',
	sql: 'sql',
	cal: 'cal',
	html: 'html',
};
 
const mimeMap: Record< string, string > = {
	image: 'png',
	video: 'mp4',
	audio: 'mp3',
	document: 'pdf',
	application: 'txt',
};
 
const FieldFile = ( { file, onClick } ) => {
	const fileExtension = file.name.split( '.' ).pop().toLowerCase();
	const fileType = file.type?.split( '/' )?.[ 0 ];
	const fileIconsUrl = useConfigValue( 'fileIconsUrl' );
 
	const iconType = extensionMap[ fileExtension ] || mimeMap[ fileType ] || 'txt';
	const downloadLabel = __( 'Download', 'jetpack-forms' );
	const iconClass = clsx( 'jp-forms__inbox-response-file__icon', {
		[ 'icon-' + iconType ]: ! file.is_previewable,
		'has-thumbnail': file.is_previewable,
	} );
 
	let iconStyle;
	if ( file.is_previewable ) {
		iconStyle = { backgroundImage: `url(${ file.url })`, backgroundSize: 'cover' };
	} else if ( fileIconsUrl ) {
		iconStyle = { backgroundImage: `url(${ fileIconsUrl }${ iconType }.svg)` };
	}
	return (
		<div className="jp-forms__inbox-response-file">
			<div className="jp-forms__inbox-response-file__info">
				<div className={ iconClass } style={ iconStyle }></div>
				<div className="jp-forms__inbox-response-file__name">
					{ file.is_previewable && (
						<Button target="_blank" variant="link" onClick={ onClick }>
							{ decodeEntities( file.name ) }
						</Button>
					) }
					{ ! file.is_previewable && (
						<Link openInNewTab href={ file.url + '&preview=true' }>
							{ decodeEntities( file.name ) }
						</Link>
					) }
					<div className="jp-forms__inbox-response-file__meta-info">
						{ sprintf(
							/* translators: %1$s size of the file and %2$s is the file extension */
							__( '%1$s, %2$s', 'jetpack-forms' ),
							file.size,
							fileExtension.toUpperCase()
						) }
					</div>
				</div>
			</div>
			<span className="jp-forms__inbox-response-file__item-actions">
				<Tooltip.Root>
					<Tooltip.Trigger
						render={
							<Button
								variant="secondary"
								href={ file.url }
								target="_blank"
								aria-label={ downloadLabel }
							>
								<Icon icon={ download } />
							</Button>
						}
					/>
					<Tooltip.Popup>{ downloadLabel }</Tooltip.Popup>
				</Tooltip.Root>
			</span>
		</div>
	);
};
 
export default FieldFile;