@aliretail/cuckoo-official-retailforce-form-icon-bar
Version:
official-retailforce-form-icon-bar
284 lines (244 loc) • 8.71 kB
JavaScript
;
import _Checkbox from "@alifd/next/es/checkbox";
import _Icon from "@alifd/next/es/icon";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import React from "react";
import PropTypes from "prop-types";
import "./index.scss";
var INIT_LIST = [{
id: "prize",
icon: "https://gw.alicdn.com/imgextra/i4/O1CN01N2jkQh1IX9vxzse9c_!!6000000000902-2-tps-84-84.png",
text: "我的奖品",
link: "prize"
}, {
id: "address",
icon: "https://gw.alicdn.com/imgextra/i3/O1CN01wKJCyJ1hB3Cyvj24o_!!6000000004238-2-tps-84-84.png",
text: "我的地址",
link: "address"
}, {
id: "information",
icon: "https://gw.alicdn.com/imgextra/i3/O1CN01Jxs3Bg23ZFgc33umH_!!6000000007269-2-tps-84-84.png",
text: "我的资料",
link: "information"
}, {
id: "comment",
icon: "https://gw.alicdn.com/imgextra/i3/O1CN014V28nU274nr9tS8Gv_!!6000000007744-2-tps-168-168.png",
text: "我的评价",
link: "comment"
}];
var IconCheckbox = /*#__PURE__*/function (_React$Component) {
_inheritsLoose(IconCheckbox, _React$Component);
function IconCheckbox(props) {
var _this;
_this = _React$Component.call(this, props) || this;
_this.formatSortList = function (list) {
if (list === void 0) {
list = [];
}
console.log("获取到的list", list, INIT_LIST);
var initList = JSON.parse(JSON.stringify(INIT_LIST));
var sortList = [];
if (list && list.length) {
list.forEach(function (value) {
var itemIndex = initList.findIndex(function (item) {
return item.id === value.id;
});
var _initList$splice = initList.splice(itemIndex, 1),
item = _initList$splice[0];
if (item) {
sortList.push(item);
}
});
}
console.log("根据 value 排序后的可选项", [].concat(sortList, initList));
return [].concat(sortList, initList);
};
_this.formatValue = function (list) {
if (list === void 0) {
list = [];
}
return list.map(function (item) {
return item.id;
});
};
_this.onCheckboxChange = function (checkboxValue) {
// checkboxValue => dataValue
var dataValue = [];
_this.state.sortList.forEach(function (item) {
var inValue = checkboxValue.findIndex(function (id) {
return id === item.id;
}) > -1;
if (inValue) {
dataValue.push(item);
}
});
_this.props.change(dataValue);
console.log("checkboxValue", checkboxValue, "dataValue", dataValue);
_this.setState({
checkboxValue: checkboxValue
});
};
_this.handleDragStart = function (event, data) {
_this.dragItemRef.current = data;
console.log("=====handleDragStart", event, _this.dragItemRef);
event.stopPropagation();
};
_this.handleDragEnd = function (event) {
console.log("=====handleDragEnd", event);
event.preventDefault();
};
_this.handleDragOver = function (event) {
event.preventDefault();
event.stopPropagation();
var targetId = event.target.dataset.id;
console.log("======handleDragOver", targetId);
if (targetId) {
_this.setState({
activeId: targetId
});
}
};
_this.handleDrop = function (event) {
event.preventDefault();
console.log('======handleDrop', event);
var sortList = _this.state.sortList;
var targetId = event.target.dataset.id; // 被强占的元素Id
if (targetId) {
var currentId = _this.dragItemRef.current.id || _this.dragItemRef.current.id; // 被拖拽的元素Id
var currentIndex = sortList.findIndex(function (item) {
return item.id === currentId;
});
var filterSortList = sortList.filter(function (item) {
return item.id !== currentId;
});
var targetIndex = filterSortList.findIndex(function (item) {
return item.id === targetId;
});
if (currentIndex > targetIndex) {
// 从下往上 +0
filterSortList.splice(targetIndex, 0, _this.dragItemRef.current);
} else {
// 从上往下 +1
filterSortList.splice(targetIndex + 1, 0, _this.dragItemRef.current);
}
console.log("filterSortList", filterSortList); // 根据排序后的数据更新value
var checkboxValue = _this.state.checkboxValue;
var newCheckboxValue = [];
var dataValue = [];
console.log(checkboxValue);
filterSortList.forEach(function (item) {
var inValue = checkboxValue.findIndex(function (id) {
return id === item.id;
}) > -1;
if (inValue) {
newCheckboxValue.push(item.id);
dataValue.push(item);
}
});
_this.props.change(dataValue);
console.log("checkboxValue", newCheckboxValue, "dataValue", dataValue);
_this.setState({
sortList: filterSortList,
activeId: undefined,
checkboxValue: checkboxValue
});
}
};
_this.state = {
sortList: _this.formatSortList(props.moduleData[props.dataName] || props.extension.value || props.extension.defaultValue),
activeId: undefined,
dataName: props.dataName,
// 多选选中的数组 string array
checkboxValue: _this.formatValue(props.moduleData[props.dataName] || props.extension.value || props.extension.defaultValue),
value: props.moduleData[props.dataName] || props.extension.value || props.extension.defaultValue
};
_this.dragItemRef = /*#__PURE__*/React.createRef();
_this.dropAreaRef = /*#__PURE__*/React.createRef();
return _this;
}
var _proto = IconCheckbox.prototype;
_proto.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
var dataName = this.state.dataName;
console.log("componentWillReceiveProps nextProps ->", nextProps);
console.log("componentWillReceiveProps this.props ->", this.props);
console.log("componentWillReceiveProps state ->", this.state);
var value = this.props.moduleData[dataName];
var nextValue = nextProps.moduleData[dataName];
console.log({
"this.props.moduleData.nav": value,
"nextProps.moduleData.nav": nextValue
});
if (value || nextValue) {
if (nextValue !== value) {
this.setState({
value: nextValue
});
}
} else {
this.props.change(INIT_LIST);
}
};
_proto.render = function render() {
var _this2 = this;
var _this$state = this.state,
checkboxValue = _this$state.checkboxValue,
sortList = _this$state.sortList,
activeId = _this$state.activeId;
var style = this.props.style;
return /*#__PURE__*/React.createElement("div", {
className: "cuk-input-con",
ref: this.dropAreaRef,
onDragOver: this.handleDragOver,
onDragEnd: this.handleDragEnd,
onDrop: this.handleDrop,
style: style
}, /*#__PURE__*/React.createElement(_Checkbox.Group, {
className: "icon-checkbox",
"aria-labelledby": "groupId",
direction: "ver",
value: checkboxValue,
onChange: this.onCheckboxChange
}, sortList.map(function (item) {
return /*#__PURE__*/React.createElement(_Checkbox, {
key: item.id,
className: "icon-checkbox-item",
id: item.id,
value: item.id
}, /*#__PURE__*/React.createElement("div", {
className: "icon-checkbox-item-context " + (activeId === item.id ? "icon-checkbox-item-context-active" : ""),
"data-id": item.id,
onDragStart: function onDragStart(e) {
return _this2.handleDragStart(e, item);
},
draggable: true
}, /*#__PURE__*/React.createElement("div", {
className: "icon-checkbox-item-left",
"data-id": item.id,
draggable: false
}, /*#__PURE__*/React.createElement("img", {
className: "icon-checkbox-item-img",
"data-id": item.id,
draggable: false,
src: item.icon
}), item.text), /*#__PURE__*/React.createElement(_Icon, {
type: "drag",
"data-id": item.id,
draggable: false,
size: "xs"
})));
})));
};
return IconCheckbox;
}(React.Component);
export default IconCheckbox;
IconCheckbox.propTypes = {
style: PropTypes.object,
extension: PropTypes.object,
value: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.array, PropTypes.bool, PropTypes.number]),
change: PropTypes.func.isRequired
};
IconCheckbox.defaultProps = {
style: {},
extension: {},
value: null
};