@aliretail/react-materials-components/es/PowerEditor/components/MaterialDialog/index.js

B 端物料组件库

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
var _excluded = ["app", "page", "close", "refresh"],
    _excluded2 = ["value", "code", "uploadType", "imgLimitWidth", "imgLimitHeight", "multiSelect", "onSuccess", "materialCenterLinkage", "apis"];
import * as React from 'react';
import * as PropTypes from 'prop-types';
import Router, { getApiUrl } from '@aliretail/react-universal-request';
import MaterialSelector from '@aliretail/react-material-selector'; // 这些是由于兼容在富文本框中才有的属性，不需要外部传入

var MaterialDialog = /*#__PURE__*/function (_React$Component) {
  _inheritsLoose(MaterialDialog, _React$Component);

  function MaterialDialog() {
    var _this;

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
    _this.state = {
      visible: false
    };

    _this.formatTab = function (type) {
      if (type === 'video') {
        return ['video'];
      }

      return ['img'];
    };

    return _this;
  }

  var _proto = MaterialDialog.prototype;

  // 富文本打开方法
  _proto.openUploadLayer = function openUploadLayer() {
    this.setState({
      visible: true
    });
  };

  _proto.hide = function hide() {
    this.setState({
      visible: false
    });
  };

  _proto.getToMaterialCenterConfig = function getToMaterialCenterConfig() {
    var _this$props = this.props,
        code = _this$props.code,
        materialCenterLinkage = _this$props.materialCenterLinkage,
        apis = _this$props.apis,
        linkToMaterialCenter = _this$props.linkToMaterialCenter; // 去素材中的配置

    var toMaterialCenterConfig = {}; // 如果配置了跳转的 app 和 page code ，则跳转到相应页面

    if (materialCenterLinkage !== null && materialCenterLinkage !== void 0 && materialCenterLinkage.app && materialCenterLinkage !== null && materialCenterLinkage !== void 0 && materialCenterLinkage.page) {
      var app = materialCenterLinkage.app,
          page = materialCenterLinkage.page,
          _materialCenterLinkag = materialCenterLinkage.close,
          close = _materialCenterLinkag === void 0 ? false : _materialCenterLinkag,
          _materialCenterLinkag2 = materialCenterLinkage.refresh,
          refresh = _materialCenterLinkag2 === void 0 ? true : _materialCenterLinkag2,
          materialCenterOthers = _objectWithoutPropertiesLoose(materialCenterLinkage, _excluded);

      toMaterialCenterConfig = {
        linkToMaterialCenter: function linkToMaterialCenter() {
          Router.openPage(materialCenterLinkage, _extends({
            close: close,
            refresh: refresh
          }, materialCenterOthers));
        }
      }; // 如果没有进行其他的跳转配置则根据code跳转
    } else if (!linkToMaterialCenter && !(apis !== null && apis !== void 0 && apis.materialAddress)) {
      var defaultJumpConfig = {
        close: false,
        refresh: true
      };

      if (code === 'mall_portal') {
        toMaterialCenterConfig = {
          linkToMaterialCenter: function linkToMaterialCenter() {
            Router.openPage({
              app: 'mall_portal',
              page: 'mng'
            }, defaultJumpConfig);
          }
        };
      } else if (code === 'retailforce_crm') {
        toMaterialCenterConfig = {
          linkToMaterialCenter: function linkToMaterialCenter() {
            Router.openPage({
              app: 'retailforce_crm',
              page: 'member-MediaMaterials'
            }, defaultJumpConfig);
          }
        };
      }
    }

    return toMaterialCenterConfig;
  };

  _proto.render = function render() {
    var _this2 = this;

    var _this$props2 = this.props,
        value = _this$props2.value,
        code = _this$props2.code,
        uploadType = _this$props2.uploadType,
        imgLimitWidth = _this$props2.imgLimitWidth,
        imgLimitHeight = _this$props2.imgLimitHeight,
        multiSelect = _this$props2.multiSelect,
        onSuccess = _this$props2.onSuccess,
        materialCenterLinkage = _this$props2.materialCenterLinkage,
        _this$props2$apis = _this$props2.apis,
        apis = _this$props2$apis === void 0 ? {} : _this$props2$apis,
        others = _objectWithoutPropertiesLoose(_this$props2, _excluded2);

    var visible = this.state.visible;

    var props = _extends({
      // api集合
      apis: _extends({
        // 内容去查询接口
        materialSearchURL: getApiUrl(code, 'MaterialSearch'),
        // 树形结构内容渲染接口
        dirQueryURL: getApiUrl(code, 'MaterialDirQuery'),
        // 获取上传oss信息的api的url
        getOssSignature: getApiUrl(code, 'GetOssSignature'),
        // 上传oss接口
        ossUpload: getApiUrl(code, 'UploadCallbackForOssFile'),
        // 素材创建
        materialCreate: getApiUrl(code, 'MaterialCreate')
      }, apis)
    }, this.getToMaterialCenterConfig(), {
      showDialog: visible,
      multiSelect: multiSelect,
      showTabs: this.formatTab(uploadType),
      // 是否展示所有类型的素材，不传都展示，传了展示对应的tab
      showUpload: true,
      onComplete: function onComplete(result) {
        if (Array.isArray(result) && result.length) {
          var filePathList = result.map(function (item) {
            return item.filePath;
          }).filter(function (item) {
            return item;
          });

          if (filePathList.length) {
            onSuccess({
              fileUrl: filePathList
            });
          }
        }

        _this2.hide();
      },
      onCancel: function onCancel() {
        _this2.hide();
      },
      onClose: function onClose() {
        _this2.hide();
      },
      value: value,
      // 控制图片大小,素材选择内部已限制只有图片限制长宽
      imgWidth: imgLimitWidth,
      imgHeight: imgLimitHeight
    }, others);

    return /*#__PURE__*/React.createElement("div", null, visible ? /*#__PURE__*/React.createElement(MaterialSelector, props) : null);
  };

  return MaterialDialog;
}(React.Component);

MaterialDialog.propTypes = {
  onSuccess: PropTypes.func,
  value: PropTypes.array,
  uploadType: PropTypes.string,
  imgLimitWidth: PropTypes.number,
  imgLimitHeight: PropTypes.number,
  code: PropTypes.string
};
MaterialDialog.defaultProps = {
  onSuccess: function onSuccess() {},
  value: [],
  uploadType: 'img',
  imgLimitWidth: null,
  imgLimitHeight: null,
  code: '',
  multiSelect: true
};
export default MaterialDialog;