@aliretail/cuckoo-official-retailforce-form-banner
Version:
official-retailforce-form-banner
332 lines (284 loc) • 10.2 kB
JavaScript
"use strict";
import _Input from "@alifd/next/es/input";
import _extends from "@babel/runtime/helpers/extends";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import React from "react";
import MediaSelector from "@aliretail/react-materials-components/es/MediaSelector";
import LinkSelector from "@aliretail/react-link-selector";
import { isEqual } from "lodash";
import { API, defaultImage } from "./config";
import { getHash, transfer, getLink } from "@aliretail/react-link-helper";
import "./index.scss";
var BannerSetter = /*#__PURE__*/function (_React$Component) {
_inheritsLoose(BannerSetter, _React$Component);
function BannerSetter(props) {
var _this;
_this = _React$Component.call(this, props) || this;
_this.state = {
value: props.moduleData[props.dataName] || props.extension.defaultValue,
dataName: props.dataName,
materialProps: {},
linkProps: {},
moduleData: props.moduleData
};
return _this;
}
var _proto = BannerSetter.prototype;
_proto.openMaterial = function openMaterial() {
var _this2 = this;
var value = this.state.value;
var _this$props$extension = this.props.extension,
extension = _this$props$extension === void 0 ? {} : _this$props$extension;
var selectAllFormat = extension.selectAllFormat,
_extension$isVideo = extension.isVideo,
isVideo = _extension$isVideo === void 0 ? false : _extension$isVideo,
selectAllFormatErrorMessage = extension.selectAllFormatErrorMessage,
showTabs = extension.showTabs;
var item = value || {};
var onClose = function onClose() {
materialProps.visible = false;
_this2.setState({
materialProps: _this2.clone(materialProps)
});
};
var onChange = function onChange(val) {
// console.log("result-: ", result, item);
item.imgUrlMeta = {
filePath: val
};
item.imgUrl = val;
_this2.save(item);
_this2.emit(item.imgUrl);
onClose();
};
var materialProps = {
uploadType: isVideo ? "video" : "image",
title: isVideo ? "选择视频" : "选择图片",
embed: true,
visible: true,
onChange: onChange,
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.emit = function emit(value) {
var extension = this.props.extension;
var rules = extension.__rules__ || {};
var _rules$watch = rules.watch,
watch = _rules$watch === void 0 ? {} : _rules$watch;
var trigger = watch.trigger;
console.log("watch", watch, trigger);
if (trigger) {
console.log("emit", value);
window.mobiEmit && window.mobiEmit.emitEvent(trigger, [{
value: value
}]);
}
};
_proto.openLink = function openLink() {
var _this3 = this;
var url = "";
var value = this.state.value;
var item = value || [];
var linkClose = function linkClose() {
linkProps.visible = false;
_this3.setState({
linkProps: _this3.clone(linkProps)
});
};
var bizId = getHash("bizId");
var bizCode = getHash("bizCode");
var linkSuccess = function linkSuccess(obj) {
// console.log("链接选择结果对象", obj);
var result = obj.result[0] || obj.result || {}; // 没有选择直接关闭
if (!result) {
linkClose();
return;
}
item = getLink(obj, item);
console.log("==banner setter update result== ", item, ",data from link tool== ", obj);
_this3.save(item);
linkClose();
};
var currentPageList = [];
try {
currentPageList = transfer(window.__config__.leaf.getChildren());
} catch (e) {
console.warn("error: ", e);
} // console.log("item.actionLinkMeta.obj", item.actionLinkMeta.obj);
var linkProps = {
visible: true,
// currentPageList,
data: item.actionLinkMeta ? item.actionLinkMeta.obj : {},
dialogProps: {
onOk: linkSuccess,
onClose: linkClose,
onCancel: linkClose
}
};
this.setState({
linkProps: linkProps
});
};
_proto.clone = function clone(data) {
if (!data) return data;
return JSON.parse(JSON.stringify(data));
};
_proto.save = function save(data, silence) {
var change = this.props.change;
change && change(data);
!silence && this.refresh(data);
};
_proto.refresh = function refresh(data) {
if (!(typeof VisualEngine !== "undefined" && VisualEngine.Exchange.selectedNode)) {
return;
}
var allData = this.clone(this.props.moduleData); // console.log('mobi.setter.refresh', allData, this.props.dataName, data);
var componentId = VisualEngine.Exchange.selectedNode.id;
allData[this.props.dataName] = data;
allData.__currentDataName__ = this.props.dataName;
window.mobiEmit && window.mobiEmit.emit("mobi.setter.update[" + componentId + "]", allData);
};
_proto.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
// console.log("banner.receive: ", nextProps);
var dataName = this.state.dataName;
var oValue = this.props.moduleData[dataName];
var nValue = nextProps.moduleData[dataName]; // 当前组件值发生改变
// console.log(nValue, oValue, isEqual(nValue, oValue));
if (!isEqual(nValue, oValue)) {
this.setState({
value: this.clone(nValue)
});
}
};
_proto.handleChange = function handleChange(newVal) {
var _this$state$value = this.state.value,
value = _this$state$value === void 0 ? {} : _this$state$value;
value.title = newVal;
this.save(value);
};
_proto.componentDidMount = function componentDidMount() {
var value = this.state.value;
this.save(value, true);
};
_proto.handleClose = function handleClose(e) {
// console.log("handleClose--", e);
e.stopPropagation();
var _this$state$value2 = this.state.value,
value = _this$state$value2 === void 0 ? {} : _this$state$value2;
value.imgUrl = "";
value.imgUrlMeta = {};
var cloneVal = this.clone(value); // console.log("cloneVal", cloneVal);
this.setState({
value: cloneVal
});
this.save(cloneVal);
};
_proto.render = function render() {
var _this4 = this;
var extension = this.props.extension;
var _this$state = this.state,
_this$state$value3 = _this$state.value,
value = _this$state$value3 === void 0 ? {} : _this$state$value3,
materialProps = _this$state.materialProps,
linkProps = _this$state.linkProps;
var imgUrl = value.imgUrl,
actionLink = value.actionLink,
actionLinkMeta = value.actionLinkMeta,
title = value.title;
var _ref = extension || {},
showTips = _ref.showTips,
tips = _ref.tips,
isVideo = _ref.isVideo,
hideTitle = _ref.hideTitle,
hideLink = _ref.hideLink; // console.log("=materialProps=", materialProps, isVideo, extension);
return /*#__PURE__*/React.createElement("div", {
className: "banner-setter-box"
}, showTips ? /*#__PURE__*/React.createElement("div", {
className: "b-tips"
}, tips || "建议宽度750像素，高度不限。") : null, !hideTitle ? /*#__PURE__*/React.createElement("div", {
className: "b-title"
}, /*#__PURE__*/React.createElement(_Input, _extends({}, extension, {
className: "b-input",
defaultValue: title,
onChange: function onChange(val) {
_this4.handleChange(val);
}
}))) : null, /*#__PURE__*/React.createElement("div", {
className: "b-upload " + (!imgUrl ? "default" : ""),
onClick: function onClick() {
_this4.openMaterial();
}
}, isVideo ? /*#__PURE__*/React.createElement("video", {
style: {
maxWidth: "100%",
maxHeight: "100%"
},
src: imgUrl
}) : /*#__PURE__*/React.createElement("img", {
src: imgUrl
}), imgUrl ? /*#__PURE__*/React.createElement("div", {
className: "b-close",
onClick: function onClick(e) {
_this4.handleClose(e);
}
}, "X") : null), !hideLink ? /*#__PURE__*/React.createElement("div", {
className: "b-link"
}, /*#__PURE__*/React.createElement("a", {
href: "javascript:void(0);",
onClick: function onClick() {
_this4.openLink();
}
}, actionLinkMeta ? actionLinkMeta.name || "链接选择" : actionLink || "链接选择")) : null, materialProps.visible ? /*#__PURE__*/React.createElement(MediaSelector, materialProps) : null, linkProps.visible ? /*#__PURE__*/React.createElement(LinkSelector, linkProps) : null);
};
return BannerSetter;
}(React.Component);
export default BannerSetter;