@aliretail/cuckoo-official-retailforce-form-combo
Version:
official-retailforce-form-combo
290 lines (244 loc) • 8.54 kB
JavaScript
'use strict';
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _dialog = _interopRequireDefault(require("@alifd/next/lib/dialog"));
var _button = _interopRequireDefault(require("@alifd/next/lib/button"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
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");
var _excluded = ["left", "top"],
_excluded2 = ["x", "y"],
_excluded3 = ["x", "y", "width", "height"];
var ImageCombo = /*#__PURE__*/function (_React$Component) {
(0, _inheritsLoose2["default"])(ImageCombo, _React$Component);
function ImageCombo(props) {
var _this;
_this = _React$Component.call(this, props) || this;
var defaultData = _this.format(props.moduleData[props.dataName] || props.extension.defaultValue) || [];
console.log('defaultData', defaultData);
_this.state = {
visible: false,
value: defaultData,
cacheItemList: defaultData,
imgUrl: props.extension.imgUrl,
dataName: props.dataName,
mode: '1-2'
};
return _this;
}
var _proto = ImageCombo.prototype;
_proto.format = function format(dataList) {
var newMap = [];
dataList.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 newMap;
};
_proto.rFormat = function rFormat(dataList) {
var newMap = [];
dataList.map(function (item) {
var x = item.x,
y = item.y,
other = (0, _objectWithoutPropertiesLoose2["default"])(item, _excluded2);
newMap.push((0, _extends2["default"])({
left: item.x,
top: item.y
}, other));
}); // console.log('r-newmap', newMap);
return newMap;
};
_proto.save = function save(data, silence) {
var newData = this.rFormat(data);
var change = this.props.change;
change && change(newData);
!silence && this.refresh(newData);
};
_proto.refresh = function refresh(data) {
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.watch = function watch(data) {
var _this2 = this;
var _this$props = this.props,
extension = _this$props.extension,
moduleData = _this$props.moduleData;
var rules = extension.__rules__ || {};
var _rules$watch = rules.watch,
watch = _rules$watch === void 0 ? {} : _rules$watch;
var observer = watch.observer;
if (!observer) {
console.log('!observer', observer);
return;
}
var changeFn = function changeFn(data) {
var mode = data.value;
var cacheItemList = _this2.state.cacheItemList;
console.log('combo.on', data, cacheItemList);
var newItems = [];
var defaultData = _config.modeData[mode] || [];
defaultData.map(function (item, index) {
var originData = cacheItemList[index] || {};
var x = originData.x,
y = originData.y,
width = originData.width,
height = originData.height,
other = (0, _objectWithoutPropertiesLoose2["default"])(originData, _excluded3);
console.log('originData', other);
newItems.push((0, _extends2["default"])({}, other, {
x: item.x,
y: item.y,
width: item.width,
height: item.height
}));
});
console.log('newItems', newItems);
_this2.setState({
mode: mode,
cacheItemList: newItems
});
}; // 初始化执行一次
changeFn(data);
window.mobiEmit.on(observer, changeFn);
};
_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.watch({
value: '1-2'
});
};
_proto.clone = function clone(data) {
if (!data) return data;
return JSON.parse(JSON.stringify(data));
};
_proto.addOne = function addOne() {
var value = this.state.value;
var itemList = value || [];
itemList.push({
id: uuidv1().substr(0, 8),
imgUrl: '',
imgUrlMeta: {},
itemName: '',
itemDesc: '',
itemTips: '',
actionLink: '',
actionLinkType: '',
actionLinkMeta: {},
isActive: false
});
this.save(itemList);
};
_proto["delete"] = function _delete(index) {
var value = this.state.value;
var itemList = value || [];
itemList.splice(index, 1);
this.save(itemList);
};
_proto.onOpen = function onOpen() {
this.setState({
visible: true
});
};
_proto.onClose = function onClose() {
this.setState({
visible: false
});
};
_proto.onChange = function onChange(data) {
// console.log('onChange======', data);
this.setState({
cacheItemList: this.clone(data)
});
this.forceUpdate();
};
_proto.handleOk = function handleOk() {
var cacheItemList = this.state.cacheItemList;
console.log('cacheItemList', cacheItemList);
var itemList = this.clone(cacheItemList);
this.setState({
value: itemList,
visible: false
});
console.log('itemList', itemList);
this.save(itemList);
};
_proto.render = function render() {
var _this3 = this;
var _this$state = this.state,
value = _this$state.value,
materialProps = _this$state.materialProps,
linkProps = _this$state.linkProps,
cacheItemList = _this$state.cacheItemList;
var _this$props2 = this.props,
_this$props2$extensio = _this$props2.extension,
extension = _this$props2$extensio === void 0 ? {} : _this$props2$extensio,
style = _this$props2.style;
var label = extension.label,
_extension$setterProp = extension.setterProps,
setterProps = _extension$setterProp === void 0 ? {} : _extension$setterProp;
return /*#__PURE__*/_react["default"].createElement("div", {
className: "combo-box",
style: style
}, /*#__PURE__*/_react["default"].createElement(_button["default"], {
type: "normal",
className: "group-btn",
onClick: function onClick() {
return _this3.onOpen();
}
}, label), /*#__PURE__*/_react["default"].createElement(_dialog["default"], {
title: "\u914D\u7F6E\u62FC\u56FE",
className: "combo-wraper",
visible: this.state.visible,
onOk: function onOk() {
_this3.handleOk();
},
onCancel: function onCancel() {
_this3.onClose();
},
onClose: function onClose() {
_this3.onClose();
}
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "box"
}, /*#__PURE__*/_react["default"].createElement(_Editor["default"], {
onChange: function onChange(data) {
return _this3.onChange(data);
},
cacheItemList: cacheItemList
}), /*#__PURE__*/_react["default"].createElement(_Setter["default"], {
setterProps: setterProps,
onChange: function onChange(data) {
return _this3.onChange(data);
},
cacheItemList: cacheItemList
}))));
};
return ImageCombo;
}(_react["default"].Component);
var _default = ImageCombo;
exports["default"] = _default;