@aliretail/cuckoo-official-retailforce-form-combo/es/components/Setter/index.js

official-retailforce-form-combo

import _Input from "@alifd/next/es/input";
import _extends from "@babel/runtime/helpers/extends";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import React, { useState, useRef, useEffect } from "react";
import MaterialSelector from "@aliretail/react-material-selector";
import MediaSelector from "@aliretail/react-materials-components/es/MediaSelector";
import LinkSelector from "@aliretail/react-link-selector";
import { API, cHost, defaultImage } from "../../config";
import { transfer, getLink } from "@aliretail/react-link-helper";
import "./index.scss";

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

  function Setter(props) {
    var _this;

    _this = _React$Component.call(this, props) || this;
    _this.state = {
      materialProps: {},
      linkProps: {}
    };
    return _this;
  }

  var _proto = Setter.prototype;

  _proto.clone = function clone(data) {
    console.log("data", data);
    if (!data) return data;
    return JSON.parse(JSON.stringify(data));
  };

  _proto.handleChange = function handleChange(e) {
    var val = e.target.value;
    this.setState({
      inputVal: val
    });
  };

  _proto.handleChange = function handleChange(e, index) {
    console.log("e", e);
    var _this$props = this.props,
        cacheItemList = _this$props.cacheItemList,
        onChange = _this$props.onChange;
    cacheItemList[index]["itemName"] = e;
    onChange(cacheItemList);
  };

  _proto["delete"] = function _delete(index) {
    var _this$props2 = this.props,
        cacheItemList = _this$props2.cacheItemList,
        onChange = _this$props2.onChange;
    cacheItemList.splice(index, 1);
    onChange(cacheItemList);
  };

  _proto.openMaterial = function openMaterial(ids) {
    var _this2 = this;

    var _this$props3 = this.props,
        _this$props3$extensio = _this$props3.extension,
        extension = _this$props3$extensio === void 0 ? {} : _this$props3$extensio,
        cacheItemList = _this$props3.cacheItemList,
        onChange = _this$props3.onChange;
    var itemList = cacheItemList || [];

    var onClose = function onClose() {
      materialProps.visible = false;

      _this2.setState({
        materialProps: _this2.clone(materialProps)
      });
    };

    var changeHandler = function changeHandler(val) {
      console.log("result: ", val, ids, itemList);
      itemList[ids]["imgUrlMeta"] = {
        filePath: val
      };
      itemList[ids]["imgUrl"] = val;
      onChange(itemList);
      onClose();
    };

    var materialProps = {
      uploadType: "image",
      embed: true,
      visible: true,
      onChange: changeHandler,
      onClose: onClose,
      // requestMap: {
      //   queryDir: {
      //     url: "//rap2api.alibaba-inc.com/app/mock/6751/api/retailforce_mall/MaterialDirQuery",
      //   },
      //   queryMaterial: {
      //     url: "//rap2api.alibaba-inc.com/app/mock/6751/api/retailforce_mall/MaterialSearch",
      //   },
      //   ossSignature: {
      //     url: "//rap2api.alibaba-inc.com/app/mock/6751/api/retailforce_mall/getOssSignature",
      //   },
      //   uploadCallback: {
      //     url: "//rap2api.alibaba-inc.com/app/mock/6751/api/retailforce_mall/uploadCallback",
      //   },
      //   createMaterial: {
      //     url: "//rap2api.alibaba-inc.com/app/mock/6751/api/retailforce_mall/createMaterial",
      //   },
      // },
      requestMap: {
        queryDir: {
          url: API.dirQueryURL
        },
        queryMaterial: {
          url: API.materialSearchURL
        },
        ossSignature: {
          url: API.getOssSignature
        },
        uploadCallback: {
          url: API.uploadCallback
        },
        createMaterial: {
          url: API.materialCreate
        },
        createMaterialDir: {
          url: API.createMaterialDir
        },
        deleteMaterialDir: {
          url: API.deleteMaterialDir
        },
        changeMaterialDir: {
          url: API.changeMaterialDir
        },
        updateMaterialDir: {
          url: API.updateMaterialDir
        }
      }
    };
    this.setState({
      materialProps: materialProps
    });
  };

  _proto.openLink = function openLink(ids) {
    var _this3 = this;

    var _this$props4 = this.props,
        _this$props4$extensio = _this$props4.extension,
        extension = _this$props4$extensio === void 0 ? {} : _this$props4$extensio,
        cacheItemList = _this$props4.cacheItemList,
        onChange = _this$props4.onChange;
    var itemList = cacheItemList || [];

    var linkClose = function linkClose() {
      linkProps.visible = false;

      _this3.setState({
        linkProps: _this3.clone(linkProps)
      });
    };

    var fillback = extension.fillback;

    var linkSuccess = function linkSuccess(obj) {
      console.log("链接对象", obj);
      var result = obj.result[0] || obj.result || {}; // 没有选择直接关闭

      if (!result) {
        linkClose();
        return;
      }

      var item = itemList[ids];
      item = getLink(obj, item);

      if (fillback) {
        item.itemName = item.actionLinkMeta.name;
      }

      console.log("==itemList==", itemList);
      onChange(itemList);
      linkClose();
    };

    var item = itemList[ids] || {};
    console.log("open.link.data", item);
    var currentPageList = [];

    try {
      currentPageList = transfer(window.__config__.leaf.getChildren());
    } catch (e) {
      console.warn("error: ", e);
    }

    var linkProps = {
      visible: true,
      currentPageList: currentPageList,
      data: item.actionLinkMeta ? item.actionLinkMeta.obj : {},
      dialogProps: {
        onOk: linkSuccess,
        onClose: linkClose,
        onCancel: linkClose
      }
    };
    this.setState({
      linkProps: linkProps
    });
  };

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

    var _this$props5 = this.props,
        cacheItemList = _this$props5.cacheItemList,
        setterProps = _this$props5.setterProps,
        layout = _this$props5.layout;
    var _this$state = this.state,
        materialProps = _this$state.materialProps,
        linkProps = _this$state.linkProps;
    return /*#__PURE__*/React.createElement("div", {
      className: "choose-image"
    }, /*#__PURE__*/React.createElement("ul", {
      className: "spot-ul",
      style: {
        paddingTop: 0
      }
    }, cacheItemList.length ? cacheItemList.map(function (item, ids) {
      return /*#__PURE__*/React.createElement("li", {
        className: "list",
        key: String(ids)
      }, /*#__PURE__*/React.createElement("img", {
        className: "img",
        src: item.imgUrl || defaultImage,
        onClick: function onClick() {
          _this4.openMaterial(ids);
        }
      }), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", {
        className: "ipt"
      }, /*#__PURE__*/React.createElement(_Input, _extends({}, setterProps, {
        placeholder: "\u8BF7\u8F93\u5165",
        className: "input",
        value: item.itemName,
        onChange: function onChange(e) {
          _this4.handleChange(e, ids);
        }
      })), /*#__PURE__*/React.createElement("div", {
        className: "delete",
        onClick: function onClick() {
          _this4["delete"](ids);
        }
      })), /*#__PURE__*/React.createElement("span", {
        className: "pop-link",
        onClick: function onClick() {
          _this4.openLink(ids);
        }
      }, item.actionLinkMeta ? item.actionLinkMeta.name : item.actionLink || "链接选择")));
    }) : null), materialProps.visible ? /*#__PURE__*/React.createElement(MediaSelector, materialProps) : null, linkProps.visible ? /*#__PURE__*/React.createElement(LinkSelector, linkProps) : null);
  };

  return Setter;
}(React.Component);

export default Setter;