@uppy/dashboard
Version:
Universal UI plugin for Uppy.
145 lines (144 loc) • 12.7 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-runtime";
import { Component, Fragment, h } from 'preact';
class AddFiles extends Component {
fileInput = null;
folderInput = null;
mobilePhotoFileInput = null;
mobileVideoFileInput = null;
triggerFileInputClick = () => {
this.fileInput?.click();
};
triggerFolderInputClick = () => {
this.folderInput?.click();
};
triggerVideoCameraInputClick = () => {
this.mobileVideoFileInput?.click();
};
triggerPhotoCameraInputClick = () => {
this.mobilePhotoFileInput?.click();
};
onFileInputChange = (event) => {
this.props.handleInputChange(event);
// Clear the input so that Chrome/Safari/etc. can detect file section when the same file is repeatedly selected
// (see https://github.com/transloadit/uppy/issues/768#issuecomment-2264902758)
event.currentTarget.value = '';
};
renderHiddenInput = (isFolder, refCallback) => {
return (_jsx("input", { className: "uppy-Dashboard-input", hidden: true, "aria-hidden": "true", tabIndex: -1,
// @ts-expect-error default types don't yet know about the `webkitdirectory` property
webkitdirectory: isFolder, type: "file", name: "files[]", multiple: this.props.maxNumberOfFiles !== 1, onChange: this.onFileInputChange, accept: this.props.allowedFileTypes?.join(', '), ref: refCallback }));
};
renderHiddenCameraInput = (type, nativeCameraFacingMode, refCallback) => {
const typeToAccept = { photo: 'image/*', video: 'video/*' };
const accept = typeToAccept[type];
return (_jsx("input", { className: "uppy-Dashboard-input", hidden: true, "aria-hidden": "true", tabIndex: -1, type: "file", name: `camera-${type}`, onChange: this.onFileInputChange, capture: nativeCameraFacingMode === '' ? 'environment' : nativeCameraFacingMode, accept: accept, ref: refCallback }));
};
renderMyDeviceAcquirer = () => {
return (_jsx("div", { className: "uppy-DashboardTab", role: "presentation", "data-uppy-acquirer-id": "MyDevice", children: _jsxs("button", { type: "button", className: "uppy-u-reset uppy-c-btn uppy-DashboardTab-btn", role: "tab", tabIndex: 0, "data-uppy-super-focusable": true, onClick: this.triggerFileInputClick, children: [_jsx("div", { className: "uppy-DashboardTab-inner", children: _jsx("svg", { className: "uppy-DashboardTab-iconMyDevice", "aria-hidden": "true", focusable: "false", width: "32", height: "32", viewBox: "0 0 32 32", children: _jsx("path", { d: "M8.45 22.087l-1.305-6.674h17.678l-1.572 6.674H8.45zm4.975-12.412l1.083 1.765a.823.823 0 00.715.386h7.951V13.5H8.587V9.675h4.838zM26.043 13.5h-1.195v-2.598c0-.463-.336-.75-.798-.75h-8.356l-1.082-1.766A.823.823 0 0013.897 8H7.728c-.462 0-.815.256-.815.718V13.5h-.956a.97.97 0 00-.746.37.972.972 0 00-.19.81l1.724 8.565c.095.44.484.755.933.755H24c.44 0 .824-.3.929-.727l2.043-8.568a.972.972 0 00-.176-.825.967.967 0 00-.753-.38z", fill: "currentcolor", "fill-rule": "evenodd" }) }) }), _jsx("div", { className: "uppy-DashboardTab-name", children: this.props.i18n('myDevice') })] }) }));
};
renderPhotoCamera = () => {
return (_jsx("div", { className: "uppy-DashboardTab", role: "presentation", "data-uppy-acquirer-id": "MobilePhotoCamera", children: _jsxs("button", { type: "button", className: "uppy-u-reset uppy-c-btn uppy-DashboardTab-btn", role: "tab", tabIndex: 0, "data-uppy-super-focusable": true, onClick: this.triggerPhotoCameraInputClick, children: [_jsx("div", { className: "uppy-DashboardTab-inner", children: _jsx("svg", { "aria-hidden": "true", focusable: "false", width: "32", height: "32", viewBox: "0 0 32 32", children: _jsx("path", { d: "M23.5 9.5c1.417 0 2.5 1.083 2.5 2.5v9.167c0 1.416-1.083 2.5-2.5 2.5h-15c-1.417 0-2.5-1.084-2.5-2.5V12c0-1.417 1.083-2.5 2.5-2.5h2.917l1.416-2.167C13 7.167 13.25 7 13.5 7h5c.25 0 .5.167.667.333L20.583 9.5H23.5zM16 11.417a4.706 4.706 0 00-4.75 4.75 4.704 4.704 0 004.75 4.75 4.703 4.703 0 004.75-4.75c0-2.663-2.09-4.75-4.75-4.75zm0 7.825c-1.744 0-3.076-1.332-3.076-3.074 0-1.745 1.333-3.077 3.076-3.077 1.744 0 3.074 1.333 3.074 3.076s-1.33 3.075-3.074 3.075z", fill: "#02B383", "fill-rule": "nonzero" }) }) }), _jsx("div", { className: "uppy-DashboardTab-name", children: this.props.i18n('takePictureBtn') })] }) }));
};
renderVideoCamera = () => {
return (_jsx("div", { className: "uppy-DashboardTab", role: "presentation", "data-uppy-acquirer-id": "MobileVideoCamera", children: _jsxs("button", { type: "button", className: "uppy-u-reset uppy-c-btn uppy-DashboardTab-btn", role: "tab", tabIndex: 0, "data-uppy-super-focusable": true, onClick: this.triggerVideoCameraInputClick, children: [_jsx("div", { className: "uppy-DashboardTab-inner", children: _jsx("svg", { "aria-hidden": "true", width: "32", height: "32", viewBox: "0 0 32 32", children: _jsx("path", { fill: "#FF675E", fillRule: "nonzero", d: "m21.254 14.277 2.941-2.588c.797-.313 1.243.818 1.09 1.554-.01 2.094.02 4.189-.017 6.282-.126.915-1.145 1.08-1.58.34l-2.434-2.142c-.192.287-.504 1.305-.738.468-.104-1.293-.028-2.596-.05-3.894.047-.312.381.823.426 1.069.063-.384.206-.744.362-1.09zm-12.939-3.73c3.858.013 7.717-.025 11.574.02.912.129 1.492 1.237 1.351 2.217-.019 2.412.04 4.83-.03 7.239-.17 1.025-1.166 1.59-2.029 1.429-3.705-.012-7.41.025-11.114-.019-.913-.129-1.492-1.237-1.352-2.217.018-2.404-.036-4.813.029-7.214.136-.82.83-1.473 1.571-1.454z " }) }) }), _jsx("div", { className: "uppy-DashboardTab-name", children: this.props.i18n('recordVideoBtn') })] }) }));
};
renderBrowseButton = (text, onClickFn) => {
const numberOfAcquirers = this.props.acquirers.length;
return (_jsx("button", { type: "button", className: "uppy-u-reset uppy-c-btn uppy-Dashboard-browse", onClick: onClickFn, "data-uppy-super-focusable": numberOfAcquirers === 0, children: text }));
};
renderDropPasteBrowseTagline = (numberOfAcquirers) => {
const browseFiles = this.renderBrowseButton(this.props.i18n('browseFiles'), this.triggerFileInputClick);
const browseFolders = this.renderBrowseButton(this.props.i18n('browseFolders'), this.triggerFolderInputClick);
// in order to keep the i18n CamelCase and options lower (as are defaults) we will want to transform a lower
// to Camel
const lowerFMSelectionType = this.props.fileManagerSelectionType;
const camelFMSelectionType = lowerFMSelectionType.charAt(0).toUpperCase() +
lowerFMSelectionType.slice(1);
return (_jsx("div", { class: "uppy-Dashboard-AddFiles-title", children: this.props.disableLocalFiles
? this.props.i18n('importFiles')
: numberOfAcquirers > 0
? this.props.i18nArray(`dropPasteImport${camelFMSelectionType}`, {
browseFiles,
browseFolders,
browse: browseFiles,
})
: this.props.i18nArray(`dropPaste${camelFMSelectionType}`, {
browseFiles,
browseFolders,
browse: browseFiles,
}) }));
};
[Symbol.for('uppy test: disable unused locale key warning')]() {
// Those are actually used in `renderDropPasteBrowseTagline` method.
this.props.i18nArray('dropPasteBoth');
this.props.i18nArray('dropPasteFiles');
this.props.i18nArray('dropPasteFolders');
this.props.i18nArray('dropPasteImportBoth');
this.props.i18nArray('dropPasteImportFiles');
this.props.i18nArray('dropPasteImportFolders');
}
renderAcquirer = (acquirer) => {
return (_jsx("div", { className: "uppy-DashboardTab", role: "presentation", "data-uppy-acquirer-id": acquirer.id, children: _jsxs("button", { type: "button", className: "uppy-u-reset uppy-c-btn uppy-DashboardTab-btn", role: "tab", tabIndex: 0, "data-cy": acquirer.id, "aria-controls": `uppy-DashboardContent-panel--${acquirer.id}`, "aria-selected": this.props.activePickerPanel?.id === acquirer.id, "data-uppy-super-focusable": true, onClick: () => this.props.showPanel(acquirer.id), children: [_jsx("div", { className: "uppy-DashboardTab-inner", children: acquirer.icon() }), _jsx("div", { className: "uppy-DashboardTab-name", children: acquirer.name })] }) }));
};
renderAcquirers = (acquirers) => {
// Group last two buttons, so we don’t end up with
// just one button on a new line
const acquirersWithoutLastTwo = [...acquirers];
const lastTwoAcquirers = acquirersWithoutLastTwo.splice(acquirers.length - 2, acquirers.length);
return (_jsxs(_Fragment, { children: [acquirersWithoutLastTwo.map((acquirer) => this.renderAcquirer(acquirer)), _jsx("span", { role: "presentation", style: { 'white-space': 'nowrap' }, children: lastTwoAcquirers.map((acquirer) => this.renderAcquirer(acquirer)) })] }));
};
renderSourcesList = (acquirers, disableLocalFiles) => {
const { showNativePhotoCameraButton, showNativeVideoCameraButton } = this.props;
let list = [];
const myDeviceKey = 'myDevice';
if (!disableLocalFiles)
list.push({
key: myDeviceKey,
elements: this.renderMyDeviceAcquirer(),
});
if (showNativePhotoCameraButton)
list.push({
key: 'nativePhotoCameraButton',
elements: this.renderPhotoCamera(),
});
if (showNativeVideoCameraButton)
list.push({
key: 'nativePhotoCameraButton',
elements: this.renderVideoCamera(),
});
list.push(...acquirers.map((acquirer) => ({
key: acquirer.id,
elements: this.renderAcquirer(acquirer),
})));
// doesn't make sense to show only a lonely "My Device"
const hasOnlyMyDevice = list.length === 1 && list[0].key === myDeviceKey;
if (hasOnlyMyDevice)
list = [];
// Group last two buttons, so we don’t end up with
// just one button on a new line
const listWithoutLastTwo = [...list];
const lastTwo = listWithoutLastTwo.splice(list.length - 2, list.length);
return (_jsxs(_Fragment, { children: [this.renderDropPasteBrowseTagline(list.length), _jsxs("div", { className: "uppy-Dashboard-AddFiles-list", role: "tablist", children: [listWithoutLastTwo.map(({ key, elements }) => (_jsx(Fragment, { children: elements }, key))), _jsx("span", { role: "presentation", style: { 'white-space': 'nowrap' }, children: lastTwo.map(({ key, elements }) => (_jsx(Fragment, { children: elements }, key))) })] })] }));
};
renderPoweredByUppy() {
const { i18nArray } = this.props;
const uppyBranding = (_jsxs("span", { children: [_jsx("svg", { "aria-hidden": "true", focusable: "false", className: "uppy-c-icon uppy-Dashboard-poweredByIcon", width: "11", height: "11", viewBox: "0 0 11 11", children: _jsx("path", { d: "M7.365 10.5l-.01-4.045h2.612L5.5.806l-4.467 5.65h2.604l.01 4.044h3.718z", fillRule: "evenodd" }) }), _jsx("span", { className: "uppy-Dashboard-poweredByUppy", children: "Uppy" })] }));
const linkText = i18nArray('poweredBy', { uppy: uppyBranding });
return (_jsx("a", { tabIndex: -1, href: "https://uppy.io", rel: "noreferrer noopener", target: "_blank", className: "uppy-Dashboard-poweredBy", children: linkText }));
}
render() {
const { showNativePhotoCameraButton, showNativeVideoCameraButton, nativeCameraFacingMode, } = this.props;
return (_jsxs("div", { className: "uppy-Dashboard-AddFiles", children: [this.renderHiddenInput(false, (ref) => {
this.fileInput = ref;
}), this.renderHiddenInput(true, (ref) => {
this.folderInput = ref;
}), showNativePhotoCameraButton &&
this.renderHiddenCameraInput('photo', nativeCameraFacingMode, (ref) => {
this.mobilePhotoFileInput = ref;
}), showNativeVideoCameraButton &&
this.renderHiddenCameraInput('video', nativeCameraFacingMode, (ref) => {
this.mobileVideoFileInput = ref;
}), this.renderSourcesList(this.props.acquirers, this.props.disableLocalFiles), _jsxs("div", { className: "uppy-Dashboard-AddFiles-info", children: [this.props.note && (_jsx("div", { className: "uppy-Dashboard-note", children: this.props.note })), this.props.proudlyDisplayPoweredByUppy && this.renderPoweredByUppy()] })] }));
}
}
export default AddFiles;