@gechiui/block-editor/build/components/media-upload-progress/index.native.js

Generic block editor.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.MediaUploadProgress = exports.MEDIA_UPLOAD_STATE_UPLOADING = exports.MEDIA_UPLOAD_STATE_SUCCEEDED = exports.MEDIA_UPLOAD_STATE_RESET = exports.MEDIA_UPLOAD_STATE_FAILED = void 0;

var _element = require("@gechiui/element");

var _reactNative = require("react-native");

var _components = require("@gechiui/components");

var _i18n = require("@gechiui/i18n");

var _reactNativeBridge = require("@gechiui/react-native-bridge");

var _styles = _interopRequireDefault(require("./styles.scss"));

/**
 * External dependencies
 */

/**
 * GeChiUI dependencies
 */

/**
 * Internal dependencies
 */
const MEDIA_UPLOAD_STATE_UPLOADING = 1;
exports.MEDIA_UPLOAD_STATE_UPLOADING = MEDIA_UPLOAD_STATE_UPLOADING;
const MEDIA_UPLOAD_STATE_SUCCEEDED = 2;
exports.MEDIA_UPLOAD_STATE_SUCCEEDED = MEDIA_UPLOAD_STATE_SUCCEEDED;
const MEDIA_UPLOAD_STATE_FAILED = 3;
exports.MEDIA_UPLOAD_STATE_FAILED = MEDIA_UPLOAD_STATE_FAILED;
const MEDIA_UPLOAD_STATE_RESET = 4;
exports.MEDIA_UPLOAD_STATE_RESET = MEDIA_UPLOAD_STATE_RESET;

class MediaUploadProgress extends _element.Component {
  constructor(props) {
    super(props);
    this.state = {
      progress: 0,
      isUploadInProgress: false,
      isUploadFailed: false
    };
    this.mediaUpload = this.mediaUpload.bind(this);
  }

  componentDidMount() {
    this.addMediaUploadListener();
  }

  componentWillUnmount() {
    this.removeMediaUploadListener();
  }

  mediaUpload(payload) {
    const {
      mediaId
    } = this.props;

    if (payload.mediaId !== mediaId) {
      return;
    }

    switch (payload.state) {
      case MEDIA_UPLOAD_STATE_UPLOADING:
        this.updateMediaProgress(payload);
        break;

      case MEDIA_UPLOAD_STATE_SUCCEEDED:
        this.finishMediaUploadWithSuccess(payload);
        break;

      case MEDIA_UPLOAD_STATE_FAILED:
        this.finishMediaUploadWithFailure(payload);
        break;

      case MEDIA_UPLOAD_STATE_RESET:
        this.mediaUploadStateReset(payload);
        break;
    }
  }

  updateMediaProgress(payload) {
    this.setState({
      progress: payload.progress,
      isUploadInProgress: true,
      isUploadFailed: false
    });

    if (this.props.onUpdateMediaProgress) {
      this.props.onUpdateMediaProgress(payload);
    }
  }

  finishMediaUploadWithSuccess(payload) {
    this.setState({
      isUploadInProgress: false
    });

    if (this.props.onFinishMediaUploadWithSuccess) {
      this.props.onFinishMediaUploadWithSuccess(payload);
    }
  }

  finishMediaUploadWithFailure(payload) {
    this.setState({
      isUploadInProgress: false,
      isUploadFailed: true
    });

    if (this.props.onFinishMediaUploadWithFailure) {
      this.props.onFinishMediaUploadWithFailure(payload);
    }
  }

  mediaUploadStateReset(payload) {
    this.setState({
      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();
    }
  }

  render() {
    const {
      renderContent = () => null
    } = this.props;
    const {
      isUploadInProgress,
      isUploadFailed
    } = this.state;
    const showSpinner = this.state.isUploadInProgress;
    const progress = this.state.progress * 100; // eslint-disable-next-line @gechiui/i18n-no-collapsible-whitespace

    const retryMessage = (0, _i18n.__)('Failed to insert media.\nPlease tap for options.');
    const progressBarStyle = [_styles.default.progressBar, showSpinner || _styles.default.progressBarHidden, this.props.progressBarStyle];
    return (0, _element.createElement)(_reactNative.View, {
      style: [_styles.default.mediaUploadProgress, this.props.containerStyle],
      pointerEvents: "box-none"
    }, (0, _element.createElement)(_reactNative.View, {
      style: progressBarStyle
    }, showSpinner && (0, _element.createElement)(_components.Spinner, {
      progress: progress,
      style: this.props.spinnerStyle
    })), renderContent({
      isUploadInProgress,
      isUploadFailed,
      retryMessage
    }));
  }

}

exports.MediaUploadProgress = MediaUploadProgress;
var _default = MediaUploadProgress;
exports.default = _default;
//# sourceMappingURL=index.native.js.map