InsertEmbedModal.js

import i18n from 'i18n';
import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import FormBuilderModal from 'components/FormBuilderModal/FormBuilderModal';
import * as schemaActions from 'state/schema/SchemaActions';
import PropTypes from 'prop-types';

const sectionConfigKey = 'SilverStripe\\AssetAdmin\\Controller\\AssetAdmin';

class InsertEmbedModal extends Component {
  constructor(props) {
    super(props);

    this.handleSubmit = this.handleSubmit.bind(this);
  }

  componentWillMount() {
    this.setOverrides(this.props);
  }

  componentWillReceiveProps(props) {
    if (props.isOpen && !this.props.isOpen) {
      this.setOverrides(props);
    }
  }

  componentWillUnmount() {
    this.clearOverrides();
  }

  /**
   * Compares the current properties with received properties and determines if overrides need to be
   * cleared or added.
   *
   * @param {object} props
   */
  setOverrides(props) {
    if (this.props.schemaUrl !== props.schemaUrl) {
      this.clearOverrides();
    }
    if (props.schemaUrl) {
      const attrs = Object.assign({}, props.fileAttributes);
      delete attrs.ID;

      const overrides = {
        fields: Object.entries(attrs).map((field) => {
          const [name, value] = field;
          return { name, value };
        }),
      };
      // set overrides into redux store, so that it can be accessed by FormBuilder with the same
      // schemaUrl.
      this.props.actions.schema.setSchemaStateOverrides(props.schemaUrl, overrides);
    }
  }

  /**
   * Generates the properties for the modal
   *
   * @returns {object}
   */
  getModalProps() {
    const props = Object.assign(
      {
        onSubmit: this.handleSubmit,
        onLoadingError: this.handleLoadingError,
        showErrorMessage: true,
        responseClassBad: 'alert alert-danger',
        identifier: 'AssetAdmin.InsertEmbedModal',
      },
      this.props,
      {
        className: `insert-embed-modal ${this.props.className}`,
        size: 'lg',
        onClosed: this.props.onClosed,
        title: ((this.props.targetUrl)
          ? i18n._t('AssetAdmin.EditTitle', 'Media from the web')
          : i18n._t('AssetAdmin.CreateTitle', 'Insert new media from the web')),
      }
    );
    delete props.sectionConfig;
    delete props.onInsert;
    delete props.fileAttributes;

    return props;
  }

  /**
   * Clear any overrides that may be in place
   */
  clearOverrides() {
    this.props.actions.schema.setSchemaStateOverrides(this.props.schemaUrl, null);
  }

  /**
   * Handler for when loading the form returns an error
   *
   * @param error
   */
  handleLoadingError(error) {
    if (typeof this.props.onLoadingError === 'function') {
      this.props.onLoadingError(error);
    }
  }

  /**
   * Capture submission in the form and stop the default submit behaviour
   *
   * @param data
   * @param action
   * @returns {Promise}
   */
  handleSubmit(data, action) {
    switch (action) {
      case 'action_addmedia': {
        this.props.onCreate(data);
        break;
      }
      case 'action_insertmedia': {
        this.props.onInsert(data);
        break;
      }
      case 'action_cancel': {
        this.props.onClosed();
        break;
      }
      default: {
        // noop
      }
    }

    return Promise.resolve();
  }

  render() {
    return <FormBuilderModal {...this.getModalProps()} />;
  }
}

InsertEmbedModal.propTypes = {
  sectionConfig: PropTypes.shape({
    url: PropTypes.string,
    form: PropTypes.object,
  }),
  isOpen: PropTypes.bool,
  onInsert: PropTypes.func.isRequired,
  onCreate: PropTypes.func.isRequired,
  fileAttributes: PropTypes.shape({
    Url: PropTypes.string,
    CaptionText: PropTypes.string,
    PreviewUrl: PropTypes.string,
    Placement: PropTypes.string,
    Width: PropTypes.number,
    Height: PropTypes.number,
  }),
  onClosed: PropTypes.func.isRequired,
  className: PropTypes.string,
  actions: PropTypes.object,
  schemaUrl: PropTypes.string.isRequired,
  targetUrl: PropTypes.string,
  onLoadingError: PropTypes.func,
};

InsertEmbedModal.defaultProps = {
  className: '',
  fileAttributes: {},
};

function mapStateToProps(state, ownProps) {
  const sectionConfig = state.config.sections.find((section) => section.name === sectionConfigKey);

  // get the schemaUrl to use as a key for overrides
  const targetUrl = ownProps.fileAttributes ? ownProps.fileAttributes.Url : '';
  const baseEditUrl = sectionConfig.form.remoteEditForm.schemaUrl;

  const editUrl = targetUrl && `${baseEditUrl}/?embedurl=${encodeURIComponent(targetUrl)}`;
  const createUrl = sectionConfig.form.remoteCreateForm.schemaUrl;

  const schemaUrl = editUrl || createUrl;

  return {
    sectionConfig,
    schemaUrl,
    targetUrl,
  };
}

function mapDispatchToProps(dispatch) {
  return {
    actions: {
      schema: bindActionCreators(schemaActions, dispatch),
    },
  };
}

export { InsertEmbedModal as Component };

export default connect(mapStateToProps, mapDispatchToProps)(InsertEmbedModal);