@wordpress/block-editor
Version:
203 lines (198 loc) • 6.2 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.MediaUploadProgress = void 0;
var _reactNative = require("react-native");
var _element = require("@wordpress/element");
var _components = require("@wordpress/components");
var _i18n = require("@wordpress/i18n");
var _reactNativeBridge = require("@wordpress/react-native-bridge");
var _styles = _interopRequireDefault(require("./styles.scss"));
var _constants = require("./constants");
var _jsxRuntime = require("react/jsx-runtime");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
class MediaUploadProgress extends _element.Component {
constructor(props) {
super(props);
this.state = {
uploadState: _constants.MEDIA_UPLOAD_STATE_IDLE,
progress: 0,
isUploadInProgress: false,
isUploadFailed: false
};
this.mediaUpload = this.mediaUpload.bind(this);
this.getRetryMessage = this.getRetryMessage.bind(this);
}
componentDidMount() {
this.addMediaUploadListener();
}
componentWillUnmount() {
const {
isUploadInProgress,
isUploadFailed
} = this.state;
const {
mediaId
} = this.props;
if (isUploadInProgress || isUploadFailed) {
(0, _reactNativeBridge.requestImageUploadCancel)(mediaId);
}
this.removeMediaUploadListener();
}
mediaUpload(payload) {
const {
mediaId
} = this.props;
if (payload.mediaId !== mediaId || payload.state === this.state.uploadState && payload.progress === this.state.progress) {
return;
}
if (payload?.mediaUrl && !payload.state) {
this.updateMediaThumbnail(payload);
return;
}
switch (payload.state) {
case _constants.MEDIA_UPLOAD_STATE_UPLOADING:
this.updateMediaProgress(payload);
break;
case _constants.MEDIA_UPLOAD_STATE_SUCCEEDED:
this.finishMediaUploadWithSuccess(payload);
break;
case _constants.MEDIA_UPLOAD_STATE_PAUSED:
this.finishMediaUploadWithPause(payload);
break;
case _constants.MEDIA_UPLOAD_STATE_FAILED:
this.finishMediaUploadWithFailure(payload);
break;
case _constants.MEDIA_UPLOAD_STATE_RESET:
this.mediaUploadStateReset(payload);
break;
}
}
updateMediaProgress(payload) {
this.setState({
progress: payload.progress,
uploadState: payload.state,
isUploadInProgress: true,
isUploadFailed: false
});
if (this.props.onUpdateMediaProgress) {
this.props.onUpdateMediaProgress(payload);
}
}
updateMediaThumbnail(payload) {
const {
onUpdateMediaProgress
} = this.props;
if (onUpdateMediaProgress) {
onUpdateMediaProgress(payload);
}
}
finishMediaUploadWithSuccess(payload) {
this.setState({
uploadState: payload.state,
isUploadInProgress: false
});
if (this.props.onFinishMediaUploadWithSuccess) {
this.props.onFinishMediaUploadWithSuccess(payload);
}
}
finishMediaUploadWithPause(payload) {
if (!this.props.enablePausedUploads) {
this.finishMediaUploadWithFailure(payload);
return;
}
this.setState({
uploadState: payload.state,
isUploadInProgress: true,
isUploadFailed: false
});
if (this.props.onFinishMediaUploadWithFailure) {
this.props.onFinishMediaUploadWithFailure(payload);
}
}
finishMediaUploadWithFailure(payload) {
this.setState({
uploadState: payload.state,
isUploadInProgress: false,
isUploadFailed: true
});
if (this.props.onFinishMediaUploadWithFailure) {
this.props.onFinishMediaUploadWithFailure(payload);
}
}
mediaUploadStateReset(payload) {
this.setState({
uploadState: payload.state,
isUploadInProgress: false,
isUploadFailed: false
});
if (this.props.onMediaUploadStateReset) {
this.props.onMediaUploadStateReset(payload);
}
}
addMediaUploadListener() {
// If we already have a subscription not worth doing it again.
if (this.subscriptionParentMediaUpload) {
return;
}
this.subscriptionParentMediaUpload = (0, _reactNativeBridge.subscribeMediaUpload)(payload => {
this.mediaUpload(payload);
});
}
removeMediaUploadListener() {
if (this.subscriptionParentMediaUpload) {
this.subscriptionParentMediaUpload.remove();
}
}
getRetryMessage() {
if (this.state.uploadState === _constants.MEDIA_UPLOAD_STATE_PAUSED && this.props.enablePausedUploads) {
return (0, _i18n.__)('Waiting for connection');
}
// eslint-disable-next-line @wordpress/i18n-no-collapsible-whitespace
return (0, _i18n.__)('Failed to insert media.\nTap for more info.');
}
render() {
const {
renderContent = () => null
} = this.props;
const {
isUploadInProgress,
isUploadFailed,
uploadState
} = this.state;
const showSpinner = this.state.isUploadInProgress;
const progress = this.state.progress * 100;
const retryMessage = this.getRetryMessage();
const progressBarStyle = [_styles.default.progressBar, showSpinner || _styles.default.progressBarHidden, this.props.progressBarStyle];
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: [_styles.default.mediaUploadProgress, this.props.containerStyle],
pointerEvents: "box-none",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: progressBarStyle,
children: showSpinner && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Spinner, {
progress: progress,
style: this.props.spinnerStyle,
testID: "spinner"
})
}), renderContent({
isUploadPaused: uploadState === _constants.MEDIA_UPLOAD_STATE_PAUSED && this.props.enablePausedUploads,
isUploadInProgress,
isUploadFailed,
retryMessage
})]
});
}
}
exports.MediaUploadProgress = MediaUploadProgress;
var _default = exports.default = MediaUploadProgress;
//# sourceMappingURL=index.native.js.map