@uploadcare/react-widget
Version:
React File Uploader. React component with uploading from multiple sources
197 lines (194 loc) • 8.01 kB
JavaScript
import { b as _slicedToArray, _ as _objectWithoutProperties, a as _objectSpread2, c as _toConsumableArray, d as _createForOfIteratorHelper } from './index-881e303a.mjs';
import React, { useState, useMemo, useRef, useEffect, useImperativeHandle } from 'react';
import uploadcare from 'uploadcare-widget';
import { u as useCommitedCallback, a as useCustomTabs, b as useDeepEffect, d as defaultPreviewUrlCallback } from './default-preview-url-callback-19e28ce7.mjs';
import 'react-fast-compare';
var _excluded = ["value", "apiRef", "onTabChange", "onChange", "onProgress", "customTabs", "previewUrlCallback", "metadataCallback"];
var containerStyles = {
height: '500px',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center'
};
var getHiddenDoneButtonStyle = function getHiddenDoneButtonStyle(containerId) {
return /* css */"\n .".concat(containerId, " .uploadcare--preview__done:not(.uploadcare-tab-effects--done),\n .").concat(containerId, " .uploadcare--panel__done:not(.uploadcare-tab-effects--done) {\n display: none;\n }\n");
};
var getValueItems = function getValueItems(value, props) {
var uuids = [];
if (value) {
uuids = Array.isArray(value) ? value : [value];
}
return uuids;
};
var useDialog = function useDialog(props, uploadcare) {
var value = props.value,
apiRef = props.apiRef,
onTabChange = props.onTabChange,
onChange = props.onChange,
onProgress = props.onProgress,
customTabs = props.customTabs,
previewUrlCallback = props.previewUrlCallback,
metadataCallback = props.metadataCallback,
restProps = _objectWithoutProperties(props, _excluded);
var tabsCss = restProps.tabsCss,
locale = restProps.locale,
localeTranslations = restProps.localeTranslations,
localePluralize = restProps.localePluralize;
var panelContainer = useRef(null);
var panelInstance = useRef(null);
var onTabChangeCallback = useCommitedCallback(onTabChange);
var onChangeCallback = useCommitedCallback(onChange);
var onProgressCallback = useCommitedCallback(onProgress);
var metadataCommitedCallback = useCommitedCallback(metadataCallback);
var previewUrlCommitedCallback = useCommitedCallback(previewUrlCallback || defaultPreviewUrlCallback);
useCustomTabs(customTabs, uploadcare);
useDeepEffect(function () {
if (locale) window.UPLOADCARE_LOCALE = locale;
if (localePluralize) window.UPLOADCARE_LOCALE_PLURALIZE = localePluralize;
if (localeTranslations) {
window.UPLOADCARE_LOCALE_TRANSLATIONS = localeTranslations;
}
return function () {
if (locale) delete window.UPLOADCARE_LOCALE;
if (localePluralize) delete window.UPLOADCARE_LOCALE_PLURALIZE;
if (localeTranslations) delete window.UPLOADCARE_LOCALE_TRANSLATIONS;
};
}, [locale, localePluralize, localeTranslations]);
useEffect(function () {
if (uploadcare && tabsCss && typeof tabsCss === 'string') {
if (tabsCss.indexOf('https://') === 0) {
uploadcare.tabsCss.addUrl(tabsCss);
} else {
uploadcare.tabsCss.addStyle(tabsCss);
}
}
}, [uploadcare, tabsCss]);
useEffect(function () {
var files = getValueItems(value);
panelInstance.current && panelInstance.current.reject();
panelInstance.current = uploadcare.openPanel(panelContainer.current, files, _objectSpread2(_objectSpread2({
multipleMax: restProps.multiple ? undefined : 1
}, restProps), {}, {
multiple: true,
metadataCallback: restProps.metadata ? undefined : metadataCommitedCallback,
previewUrlCallback: previewUrlCommitedCallback
}));
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [uploadcare].concat(_toConsumableArray(Object.values(restProps))));
useEffect(function () {
var dialogApi = panelInstance.current;
dialogApi.progress(onTabChangeCallback);
var onChangeWrapper = function onChangeWrapper() {
var items = panelInstance.current.fileColl.__items.map(function (deferred) {
return deferred.promise();
});
onChangeCallback(items);
};
var onProgressWrapper = function onProgressWrapper() {
var lastProgresses = panelInstance.current.fileColl.lastProgresses();
onProgressCallback(lastProgresses);
};
dialogApi.fileColl.anyProgressList.add(onProgressWrapper);
dialogApi.fileColl.anyDoneList.add(onChangeWrapper);
dialogApi.fileColl.anyFailList.add(onChangeWrapper);
dialogApi.fileColl.onRemove.add(onChangeWrapper);
dialogApi.fileColl.onReplace.add(onChangeWrapper);
dialogApi.fileColl.onSort.add(onChangeWrapper);
return function () {
var dialogApi = panelInstance.current;
dialogApi.fileColl.anyProgressList.remove(onProgressWrapper);
dialogApi.fileColl.anyDoneList.remove(onChangeWrapper);
dialogApi.fileColl.anyFailList.remove(onChangeWrapper);
dialogApi.fileColl.onRemove.remove(onChangeWrapper);
dialogApi.fileColl.onReplace.remove(onChangeWrapper);
dialogApi.fileColl.onSort.remove(onChangeWrapper);
};
}, [].concat(_toConsumableArray(Object.values(restProps)), [onTabChangeCallback, onChangeCallback, onProgressCallback]));
useImperativeHandle(apiRef, function () {
return {
onTabVisibility: function onTabVisibility(cb) {
return panelInstance.current.onTabVisibility(cb);
},
hideTab: function hideTab(tab) {
return panelInstance.current.hideTab(tab);
},
showTab: function showTab(tab) {
return panelInstance.current.showTab(tab);
},
switchTab: function switchTab(tab) {
return panelInstance.current.switchTab(tab);
},
addFiles: function addFiles(files) {
return panelInstance.current.addFiles(files);
},
isTabVisible: function isTabVisible(tab) {
return panelInstance.current.isTabVisible(tab);
},
getFileColl: function getFileColl() {
return panelInstance.current.fileColl;
},
getRawDialogApi: function getRawDialogApi() {
return panelInstance.current;
}
};
}, []);
useEffect(function () {
return function () {
return panelInstance.current && panelInstance.current.reject();
};
}, []);
useEffect(function () {
var isUpdated = false;
panelInstance.current.fileColl.clear();
var files = getValueItems(value);
var _iterator = _createForOfIteratorHelper(files),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var item = _step.value;
if (typeof item === 'string' && item.includes('~')) {
uploadcare.loadFileGroup(item, props).then(function (fileGroup) {
// value could be changed after group loaded
if (!isUpdated) {
var _files = fileGroup.files();
panelInstance.current.addFiles(_files);
}
});
break;
}
panelInstance.current.fileColl.add(uploadcare.fileFrom('uploaded', item, props));
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
return function () {
isUpdated = true;
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [value]);
return [panelContainer];
};
var Dialog = function Dialog(props) {
var _useState = useState(function () {
return "uploadcare-".concat(Date.now());
}),
_useState2 = _slicedToArray(_useState, 1),
containerId = _useState2[0];
var styleElement = useMemo(function () {
return /*#__PURE__*/React.createElement("style", null, getHiddenDoneButtonStyle(containerId));
}, [containerId]);
var _useDialog = useDialog(props, uploadcare),
_useDialog2 = _slicedToArray(_useDialog, 1),
containerRef = _useDialog2[0];
return /*#__PURE__*/React.createElement("div", {
id: props.id,
className: containerId,
style: containerStyles
}, styleElement, /*#__PURE__*/React.createElement("div", {
ref: containerRef
}));
};
export { Dialog as default };