@aliretail/cuckoo-official-retailforce-form-combo
Version:
official-retailforce-form-combo
312 lines (270 loc) • 9.93 kB
JavaScript
'use strict';
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
import _extends from "@babel/runtime/helpers/extends";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
var _excluded = ["left", "top"],
_excluded2 = ["x", "y"];
import React from 'react';
import { isEqual, find } from 'lodash';
import Editor from './components/Editor';
import Setter from './components/Setter';
import { tableList, modeData } from './config';
import './index.scss';
import './iconfont.scss';
var ImageCombo = /*#__PURE__*/function (_React$Component) {
_inheritsLoose(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 = modeData[layout] || modeData['1-2']; // console.log('transfer.comList', comList, layout);
comList.map(function (item, index) {
newItem.push(_extends({}, 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 = _objectWithoutPropertiesLoose(item, _excluded);
newMap.push(_extends({
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 = _objectWithoutPropertiesLoose(item, _excluded2);
newMap.imgList.push(_extends({
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 (!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.createElement("div", {
className: "combo-box",
style: style
}, /*#__PURE__*/React.createElement("div", {
className: "item-box"
}, /*#__PURE__*/React.createElement("div", {
className: "item-box-title"
}, "\u6A21\u5F0F"), /*#__PURE__*/React.createElement("div", {
className: "item-box-content"
}, /*#__PURE__*/React.createElement("table", {
className: "item-box-table",
cellpadding: "0",
cellspacing: "0"
}, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.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.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.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.createElement("td", {
title: "\u81EA\u5B9A\u4E49",
className: "custom " + actionClass('custom'),
onClick: function onClick(e) {
return _this2.handleClick('custom');
}
}, "\u81EA\u5B9A\u4E49"))))), /*#__PURE__*/React.createElement("div", {
className: "item-box"
}, /*#__PURE__*/React.createElement("div", {
className: "item-box-title",
style: {
marginBottom: 0
}
}, "\u5E03\u5C40 ", tips ? /*#__PURE__*/React.createElement("span", {
style: {
lineHeight: 1.5,
color: '#888',
fontSize: 10
}
}, "(", tips, ")") : ''), /*#__PURE__*/React.createElement("div", {
className: "item-box-content"
}, /*#__PURE__*/React.createElement(Editor, _extends({}, this.props, {
layout: layout,
onChange: function onChange(data) {
return _this2.onChange(data);
},
cacheItemList: this.format(imgList)
})))), /*#__PURE__*/React.createElement("div", {
className: "item-box"
}, /*#__PURE__*/React.createElement("div", {
className: "item-box-title"
}, "\u5185\u5BB9"), /*#__PURE__*/React.createElement("div", {
className: "item-box-content"
}, /*#__PURE__*/React.createElement(Setter, _extends({}, this.props, {
layout: layout,
setterProps: setterProps,
onChange: function onChange(data) {
return _this2.onChange(data);
},
cacheItemList: this.format(imgList)
})))));
};
return ImageCombo;
}(React.Component);
export default ImageCombo;