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/165/head
tjz 2018-05-18 21:57:40 +08:00
parent f5471cc977
commit 8d29619871
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 () {
this.currentProps = { ...this.$props }
// this.currentProps = { ...this.$props }
},
watch: {
'$props': {
handler: function (nextProps) {
const { sourceSelectedKeys, targetSelectedKeys, currentProps } = this
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,
targetKeys () {
this.updateState()
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)),
})
}
},
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: {
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) {
if (this.splitedDataSource) {
return this.splitedDataSource