zsjjs / react-field-mapping Goto Github PK

There are communication groups？

Hi zsjjs, great library there, some problem it has when I have a function like

  if (isMultipleSourceToOneTargetThatIsAcceptable(relation)) {
              console.log("new");
              this.setState({
                relation
              });
            } else {
                  }

but I discover it still chang even I am not setting that, is it an uncontrolled component?

Hey
Features are really cool.
Found an issue where if there is any invalid key values in the relation , then arrow is displaying by connecting first source row to first target row.

this.state = { relation: [{ source: { key: "Nofield" }, target: { key: "field502" } }]}

shows connecting arrow between first source row and first target row like below,

在做事件绑定的时候有可能引起死循环

有场景下仅做展示映射关系，禁止操作权限。

使用场景：在不同tab中使用react-field-mapping
操作：tab1使用mapping1，tab2使用mapping2，新增tab3使用组件mapping3时，
问题：mapping3手动连线和同行连线等均可使用；
mapping1、mapping2手动连线不可用，其他同行连线可用
期望：mapping1、mapping2仍然可以手动连线

const sourceCols = [
{ title: '源表字段', key: 'name', width: '80px' },
{ title: '类型', key: 'type', width: '100px' },
{ title: '描述', key: 'desc', width: '150px' },
{ title: '操作', key: 'operate', width: '80px', align: 'center', render: (value, record) => {
return <a href="javascript:void(0);" onClick={
() => {
alert(JSON.stringify(record));
}
}>查看详情;
}}
];
const targetCols = [
{ title: '目标表字段', key: 'name', width: '50%' },
{ title: '类型', key: 'type', width: '50%' }
];
const sData = new Array(7).fill().map((item, idx) => ({
name: field${idx + 1},
type: 'string',
key: field${idx + 1},
desc: 这是表字段field${idx + 1},
operate: 测试${idx}
}));
const tData = new Array(11).fill().map((item, idx) => ({
name: field${idx + 4},
type: 'string',
key: field${idx + 4}
}))
class App extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
relation: [],
sourceData: [],
targetData: []
};
}
getRelation() {
console.log(this.state.relation);
alert(JSON.stringify(this.state.relation));
}
sameLine() {
const {sourceData, targetData} = this.state;
const len = sourceData.length > targetData.length ? targetData.length : sourceData.length;
const relation = [];
for(let i=0; i<len; i++ ) {
relation.push({
source: sourceData[i],
target: targetData[i]
});
}
this.setState({
relation
});
}
sameName() {
const {sourceData, targetData} = this.state;
const relation = [];
sourceData.map(item => {
targetData.map(n => {
if(item.name === n.name) {
relation.push({
source: item,
target: n
});
}
});
});
this.setState({
relation
});
}
cancelRelation() {
this.setState({
relation: []
});
}
getData=()=>{
this.setState({ sourceData: sData, targetData: tData })
}
render() {
const { sourceData, targetData } = this.state;
const option = {
source: {
data: sourceData,
onChange: (data) => { // isSort开启后，必须开启才会生效
this.setState({
sourceData: data
});
},
columns: sourceCols
},
target: {
data: targetData,
onChange: (data) => {
this.setState({
targetData: data
});
},
columns: targetCols
},
relation: this.state.relation,
// onDrawStart: (source, relation) => {
// console.log("onDrawStart: ", source, relation);
// },
// onDrawing: (source, relation) => {
// console.log("onDrawing: ", source, relation);
// },
// onDrawEnd: (source, target, relation) => {
// console.log("onDrawEnd: ", source, relation);
// },
onChange: (relation) => {
this.setState({
relation
});
},
isSort: true
};
return

ReactDOM.render(
,
document.getElementById('Test')
);

在https://codepen.io/godIsMe/pen/xvgYdx中打开：
把上面的代码拷贝进去，操作：显隐 -- 加载数据 -- 连线
可以复现

最开始的onChange是只监听relation变化的，后来增加了表字段的排序，所以修改排序后就需要手动在onChange里面修改外层的sourceData同步变化。原来的表是基于业务需求定死的两个字段name、type，而不是按Table做的，应该算是一个字段的List。后面基于前面的问题作出以下优化，会有破坏性升级。
1、source、target的原title属性删除，增加类似table的columns属性，原data必传name和type改成标识符key，其他为自定义列字段即可。
2、onChange改为只有关联的change监听，表的change放到各自的table属性里面去。