github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactor: update transfer watch props

pull/22/head
tjz 2018-05-18 21:57:40 +08:00
parent 4582da3725
commit 0920d23f12
1 changed files with 86 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

128
components/transfer/index.jsx
View File

@ -69,53 +69,97 @@ export default {
} }
}, },
mounted () { mounted () {
this.currentProps = { ...this.$props } // this.currentProps = { ...this.$props }
}, },
watch: { watch: {
'$props': { targetKeys () {
handler: function (nextProps) { this.updateState()
const { sourceSelectedKeys, targetSelectedKeys, currentProps } = this if (this.selectedKeys) {
const targetKeys = this.targetKeys || []
if (nextProps.targetKeys !== currentProps.targetKeys || this.setState({
nextProps.dataSource !== currentProps.dataSource) { sourceSelectedKeys: this.selectedKeys.filter(key => !targetKeys.includes(key)),
// clear cached splited dataSource targetSelectedKeys: this.selectedKeys.filter(key => targetKeys.includes(key)),
this.splitedDataSource = null })
}
if (!nextProps.selectedKeys) {
// clear key nolonger existed
// clear checkedKeys according to targetKeys
const { dataSource, targetKeys = [] } = nextProps
const newSourceSelectedKeys = []
const newTargetSelectedKeys = []
dataSource.forEach(({ key }) => {
if (sourceSelectedKeys.includes(key) && !targetKeys.includes(key)) {
newSourceSelectedKeys.push(key)
}
if (targetSelectedKeys.includes(key) && targetKeys.includes(key)) {
newTargetSelectedKeys.push(key)
}
})
this.setState({
sourceSelectedKeys: newSourceSelectedKeys,
targetSelectedKeys: newTargetSelectedKeys,
})
}
}
if (nextProps.selectedKeys) {
const targetKeys = nextProps.targetKeys || []
this.setState({
sourceSelectedKeys: nextProps.selectedKeys.filter(key => !targetKeys.includes(key)),
targetSelectedKeys: nextProps.selectedKeys.filter(key => targetKeys.includes(key)),
})
}
this.currentProps = { ...this.$props }
},
deep: true,
}, },
dataSource () {
this.updateState()
},
selectedKeys () {
if (this.selectedKeys) {
const targetKeys = this.targetKeys || []
this.setState({
sourceSelectedKeys: this.selectedKeys.filter(key => !targetKeys.includes(key)),
targetSelectedKeys: this.selectedKeys.filter(key => targetKeys.includes(key)),
})
}
},
// '$props': {
// handler: function (nextProps) {
// // if (nextProps.targetKeys !== currentProps.targetKeys ||
// // nextProps.dataSource !== currentProps.dataSource) {
// // // clear cached splited dataSource
// // this.splitedDataSource = null
// // if (!nextProps.selectedKeys) {
// // // clear key nolonger existed
// // // clear checkedKeys according to targetKeys
// // const { dataSource, targetKeys = [] } = nextProps
// // const newSourceSelectedKeys = []
// // const newTargetSelectedKeys = []
// // dataSource.forEach(({ key }) => {
// // if (sourceSelectedKeys.includes(key) && !targetKeys.includes(key)) {
// // newSourceSelectedKeys.push(key)
// // }
// // if (targetSelectedKeys.includes(key) && targetKeys.includes(key)) {
// // newTargetSelectedKeys.push(key)
// // }
// // })
// // this.setState({
// // sourceSelectedKeys: newSourceSelectedKeys,
// // targetSelectedKeys: newTargetSelectedKeys,
// // })
// // }
// // }
// // if (nextProps.selectedKeys) {
// // const targetKeys = nextProps.targetKeys || []
// // this.setState({
// // sourceSelectedKeys: nextProps.selectedKeys.filter(key => !targetKeys.includes(key)),
// // targetSelectedKeys: nextProps.selectedKeys.filter(key => targetKeys.includes(key)),
// // })
// // }
// // this.currentProps = { ...this.$props }
// },
// deep: true,
// },
}, },
methods: { methods: {
updateState () {
const { sourceSelectedKeys, targetSelectedKeys } = this
this.splitedDataSource = null
if (!this.selectedKeys) {
// clear key nolonger existed
// clear checkedKeys according to targetKeys
const { dataSource, targetKeys = [] } = this
const newSourceSelectedKeys = []
const newTargetSelectedKeys = []
dataSource.forEach(({ key }) => {
if (sourceSelectedKeys.includes(key) && !targetKeys.includes(key)) {
newSourceSelectedKeys.push(key)
}
if (targetSelectedKeys.includes(key) && targetKeys.includes(key)) {
newTargetSelectedKeys.push(key)
}
})
this.setState({
sourceSelectedKeys: newSourceSelectedKeys,
targetSelectedKeys: newTargetSelectedKeys,
})
}
},
splitDataSource (props) { splitDataSource (props) {
if (this.splitedDataSource) { if (this.splitedDataSource) {
return this.splitedDataSource return this.splitedDataSource