@aliretail/cuckoo-official-retailforce-form-combo
Version:
official-retailforce-form-combo
326 lines (274 loc) • 10.7 kB
JavaScript
'use strict';
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var _react = _interopRequireDefault(require("react"));
var _lodash = require("lodash");
var _Editor = _interopRequireDefault(require("./components/Editor"));
var _Setter = _interopRequireDefault(require("./components/Setter"));
var _config = require("./config");
require("./index.scss");
require("./iconfont.scss");
var _excluded = ["left", "top"],
_excluded2 = ["x", "y"];
var ImageCombo = /*#__PURE__*/function (_React$Component) {
(0, _inheritsLoose2["default"])(ImageCombo, _React$Component);
function ImageCombo(props) {
var _this;
props = props || d;
_this = _React$Component.call(this, props) || this;
var defaultData = props.moduleData[props.dataName] || props.extension.defaultValue || [];
console.log('defaultData', defaultData);
_this.state = {
value: defaultData,
imgUrl: 'https://img.alicdn.com/imgextra/i3/O1CN01N3WHdg1MZgYTmN0Io_!!6000000001449-2-tps-375-1024.png',
dataName: props.dataName
};
return _this;
}
var _proto = ImageCombo.prototype;
_proto.transfer = function transfer(imgList, layout) {
var value = this.state.value;
layout = layout || value.layout; // console.log('transfer.layout', layout);
// 如果是自定义模式，不修改位置
if (layout === 'custom') {
return imgList;
} // const config = modeData[layout] || {};
// const { modeData } = config;
var newItem = [];
var comList = _config.modeData[layout] || _config.modeData['1-2']; // console.log('transfer.comList', comList, layout);
comList.map(function (item, index) {
newItem.push((0, _extends2["default"])({}, imgList[index], item));
});
console.log('transfer.newItem', newItem);
return newItem;
};
_proto.format = function format(imgList, layout) {
var newMap = []; // console.log('format.imgList', imgList, this.props);
if (!imgList) {
console.log('imgList is not array');
return imgList;
}
imgList.map(function (item) {
var left = item.left,
top = item.top,
other = (0, _objectWithoutPropertiesLoose2["default"])(item, _excluded);
newMap.push((0, _extends2["default"])({
x: left,
y: top
}, other));
}); // console.log('newmap', newMap);
return this.transfer(newMap, layout);
};
_proto.rFormat = function rFormat(data) {
var newMap = {
layout: data.layout,
imgList: []
};
if (!data.imgList) {
return newMap;
}
data.imgList.map(function (item) {
var x = item.x,
y = item.y,
other = (0, _objectWithoutPropertiesLoose2["default"])(item, _excluded2);
newMap.imgList.push((0, _extends2["default"])({
left: item.x,
top: item.y
}, other));
}); // console.log('r-newmap', newMap);
return newMap;
};
_proto.save = function save(data, silence) {
// console.log('onChange==1', data);
var newData = this.rFormat(data);
var change = this.props.change; // const { value } = this.state;
// const { layout } = value || {};
// const length = tableList[layout].size;
// if (layout !== 'custom') {
// newData.imgList = newData.imgList.slice(0, length);
// }
// console.log('onChange==', newData);
change && change(newData);
!silence && this.refresh(newData);
};
_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('combo.receive: ', nextProps);
var dataName = this.state.dataName;
var oValue = this.props.moduleData[dataName];
var nValue = nextProps.moduleData[dataName]; // 当前组件值发生改变
if (!(0, _lodash.isEqual)(nValue, oValue)) {
this.setState({
value: this.clone(nValue)
});
}
};
_proto.componentDidMount = function componentDidMount() {
this.save(this.state.value);
};
_proto.clone = function clone(data) {
if (!data) return data;
return JSON.parse(JSON.stringify(data));
};
_proto.addOne = function addOne() {
var _this$state$value = this.state.value,
value = _this$state$value === void 0 ? {} : _this$state$value;
value.itemList.push({
id: uuidv1().substr(0, 8),
imgUrl: '',
imgUrlMeta: {},
itemName: '',
itemDesc: '',
itemTips: '',
actionLink: '',
actionLinkType: '',
actionLinkMeta: {},
isActive: false
});
this.save(value);
};
_proto["delete"] = function _delete(index) {
var value = this.state.value;
value.itemList.splice(index, 1);
this.save(value);
};
_proto.onChange = function onChange(list) {
var _this$state$value2 = this.state.value,
value = _this$state$value2 === void 0 ? {} : _this$state$value2;
value.imgList = list;
this.save(value);
this.forceUpdate();
};
_proto.handleClick = function handleClick(layout) {
var _this$state$value3 = this.state.value,
value = _this$state$value3 === void 0 ? {} : _this$state$value3;
value.layout = layout;
value.imgList = this.format(value.imgList, layout);
console.log('handleClick', value);
this.save(value);
this.forceUpdate();
};
_proto.getMax = function getMax() {
var finalMax = 192;
var value = this.state.value;
var imgList = value.imgList;
var allTops = [];
imgList.map(function (item) {
allTops.push(item.top + item.height);
});
finalMax = Math.max.apply(null, allTops);
console.log('getMax', allTops, finalMax);
return finalMax;
};
_proto.render = function render() {
var _this2 = this;
var value = this.state.value;
var _this$props = this.props,
_this$props$extension = _this$props.extension,
extension = _this$props$extension === void 0 ? {} : _this$props$extension,
style = _this$props.style;
var _extension$setterProp = extension.setterProps,
setterProps = _extension$setterProp === void 0 ? {} : _extension$setterProp,
tips = extension.tips;
var _value$layout = value.layout,
layout = _value$layout === void 0 ? '1-2' : _value$layout,
imgList = value.imgList;
var actionClass = function actionClass(mode) {
return mode === layout ? 'action' : '';
}; // 1-2,1-3,1-4,2-4,l1-r2,t1-b2,l1-r3,custom
// console.log('render', layout, imgList);
if (!Array.isArray(imgList)) {
console.log('imgList is not valid', imgList);
return null;
}
this.getMax();
return /*#__PURE__*/_react["default"].createElement("div", {
className: "combo-box",
style: style
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "item-box"
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "item-box-title"
}, "\u6A21\u5F0F"), /*#__PURE__*/_react["default"].createElement("div", {
className: "item-box-content"
}, /*#__PURE__*/_react["default"].createElement("table", {
className: "item-box-table",
cellpadding: "0",
cellspacing: "0"
}, /*#__PURE__*/_react["default"].createElement("tr", null, /*#__PURE__*/_react["default"].createElement("td", {
title: "\u4E00\u884C\u4E24\u5217",
onClick: function onClick(e) {
return _this2.handleClick('1-2');
},
className: "iconmofang iconmofang-yihangliangge " + actionClass('1-2')
}), /*#__PURE__*/_react["default"].createElement("td", {
title: "\u5DE6\u4E00\u53F3\u4E8C",
onClick: function onClick(e) {
return _this2.handleClick('l1-r2');
},
className: "iconmofang iconmofang-zuoyiyouer " + actionClass('l1-r2')
}), /*#__PURE__*/_react["default"].createElement("td", {
title: "\u4E24\u884C\u56DB\u5217",
onClick: function onClick(e) {
return _this2.handleClick('2-4');
},
className: "iconmofang iconmofang-lianghangliangge " + actionClass('2-4')
}), /*#__PURE__*/_react["default"].createElement("td", {
title: "\u81EA\u5B9A\u4E49",
className: "custom " + actionClass('custom'),
onClick: function onClick(e) {
return _this2.handleClick('custom');
}
}, "\u81EA\u5B9A\u4E49"))))), /*#__PURE__*/_react["default"].createElement("div", {
className: "item-box"
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "item-box-title",
style: {
marginBottom: 0
}
}, "\u5E03\u5C40 ", tips ? /*#__PURE__*/_react["default"].createElement("span", {
style: {
lineHeight: 1.5,
color: '#888',
fontSize: 10
}
}, "(", tips, ")") : ''), /*#__PURE__*/_react["default"].createElement("div", {
className: "item-box-content"
}, /*#__PURE__*/_react["default"].createElement(_Editor["default"], (0, _extends2["default"])({}, this.props, {
layout: layout,
onChange: function onChange(data) {
return _this2.onChange(data);
},
cacheItemList: this.format(imgList)
})))), /*#__PURE__*/_react["default"].createElement("div", {
className: "item-box"
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "item-box-title"
}, "\u5185\u5BB9"), /*#__PURE__*/_react["default"].createElement("div", {
className: "item-box-content"
}, /*#__PURE__*/_react["default"].createElement(_Setter["default"], (0, _extends2["default"])({}, this.props, {
layout: layout,
setterProps: setterProps,
onChange: function onChange(data) {
return _this2.onChange(data);
},
cacheItemList: this.format(imgList)
})))));
};
return ImageCombo;
}(_react["default"].Component);
var _default = ImageCombo;
exports["default"] = _default;