@uploadcare/react-widget
Version:
React File Uploader. React component with uploading from multiple sources
199 lines (195 loc) • 8.09 kB
JavaScript
;
var index = require('./index-f2aa1c3c.cjs');
var React = require('react');
var uploadcare = require('uploadcare-widget');
var defaultPreviewUrlCallback = require('./default-preview-url-callback-45103083.cjs');
require('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 = index._objectWithoutProperties(props, _excluded);
var tabsCss = restProps.tabsCss,
locale = restProps.locale,
localeTranslations = restProps.localeTranslations,
localePluralize = restProps.localePluralize;
var panelContainer = React.useRef(null);
var panelInstance = React.useRef(null);
var onTabChangeCallback = defaultPreviewUrlCallback.useCommitedCallback(onTabChange);
var onChangeCallback = defaultPreviewUrlCallback.useCommitedCallback(onChange);
var onProgressCallback = defaultPreviewUrlCallback.useCommitedCallback(onProgress);
var metadataCommitedCallback = defaultPreviewUrlCallback.useCommitedCallback(metadataCallback);
var previewUrlCommitedCallback = defaultPreviewUrlCallback.useCommitedCallback(previewUrlCallback || defaultPreviewUrlCallback.defaultPreviewUrlCallback);
defaultPreviewUrlCallback.useCustomTabs(customTabs, uploadcare);
defaultPreviewUrlCallback.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]);
React.useEffect(function () {
if (uploadcare && tabsCss && typeof tabsCss === 'string') {
if (tabsCss.indexOf('https://') === 0) {
uploadcare.tabsCss.addUrl(tabsCss);
} else {
uploadcare.tabsCss.addStyle(tabsCss);
}
}
}, [uploadcare, tabsCss]);
React.useEffect(function () {
var files = getValueItems(value);
panelInstance.current && panelInstance.current.reject();
panelInstance.current = uploadcare.openPanel(panelContainer.current, files, index._objectSpread2(index._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(index._toConsumableArray(Object.values(restProps))));
React.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(index._toConsumableArray(Object.values(restProps)), [onTabChangeCallback, onChangeCallback, onProgressCallback]));
React.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;
}
};
}, []);
React.useEffect(function () {
return function () {
return panelInstance.current && panelInstance.current.reject();
};
}, []);
React.useEffect(function () {
var isUpdated = false;
panelInstance.current.fileColl.clear();
var files = getValueItems(value);
var _iterator = index._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 = React.useState(function () {
return "uploadcare-".concat(Date.now());
}),
_useState2 = index._slicedToArray(_useState, 1),
containerId = _useState2[0];
var styleElement = React.useMemo(function () {
return /*#__PURE__*/React.createElement("style", null, getHiddenDoneButtonStyle(containerId));
}, [containerId]);
var _useDialog = useDialog(props, uploadcare),
_useDialog2 = index._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
}));
};
exports.default = Dialog;