From 263c1da1c4742c9b441b898363dc3fb25c4292bf Mon Sep 17 00:00:00 2001 From: Fangzhou Li Date: Fri, 13 Apr 2018 21:18:01 +0800 Subject: [PATCH] pass an extra `id` arguments to `loadChildrenOptions` prop (#59) --- docs/components/DelayedLoading.vue | 2 +- docs/components/DelayedRootOptions.vue | 6 ++- docs/partials/guides.pug | 4 +- src/mixins/treeselectMixin.js | 2 +- test/unit/specs/Treeselect.spec.js | 66 +++++++++++++++++++++++++- 5 files changed, 74 insertions(+), 6 deletions(-) diff --git a/docs/components/DelayedLoading.vue b/docs/components/DelayedLoading.vue index f2bd8c97..4722f97d 100644 --- a/docs/components/DelayedLoading.vue +++ b/docs/components/DelayedLoading.vue @@ -30,7 +30,7 @@ }), methods: { - loadChildrenOptions(parent, callback) { + loadChildrenOptions(parent, callback/*, id */) { // Typically, do the AJAX stuff here. // Once the server has responded, call the callback with received data. // We just use `setTimeout()` here to simulate an async operation diff --git a/docs/components/DelayedRootOptions.vue b/docs/components/DelayedRootOptions.vue index bb9c3bed..963be5ca 100644 --- a/docs/components/DelayedRootOptions.vue +++ b/docs/components/DelayedRootOptions.vue @@ -11,7 +11,11 @@ export default { methods: { - loadRootOptions(callback) { + loadRootOptions(callback/*, id */) { + // If you have multiple instances of vue-treeselect that + // shares the same `loadRootOptions` function, + // you can use the `id` argument (which is the `id` prop you passed) + // to identify the origin. if (called) { const rootOptions = [ { id: 'a', diff --git a/docs/partials/guides.pug b/docs/partials/guides.pug index 72d8bcc9..83be3bb6 100644 --- a/docs/partials/guides.pug +++ b/docs/partials/guides.pug @@ -51,10 +51,10 @@ 1. Declare an *unloaded* branch node by setting `children: null` or `isBranch: true` 2. Provide a `loadChildrenOptions` prop - 3. Whenever an unloaded branch node gets expanded, `loadChildrenOptions(parentNode, callback)` will be called within which the job requesting data from remote server could be performed + 3. Whenever an unloaded branch node gets expanded, `loadChildrenOptions(parentNode, callback, id)` will be called within which you can perform the job requesting data from a remote server +demo('DelayedLoading') :markdown-it - If you want the root level options to be delayed loaded as well, omit the `options` prop and provide an extra `loadRootOptions` prop. By default, vue-treeselect will try loading root options by calling `loadRootOptions(callback)` after the component is mounted. In this example I have disabled that feature, and root options will be loaded when the menu is opened. + If you want the root level options to be delayed loaded as well, omit the `options` prop and provide an extra `loadRootOptions` prop. By default, vue-treeselect will try loading root options by calling `loadRootOptions(callback, id)` after the component is mounted. In this example I have disabled that feature, and root options will be loaded when the menu is opened. +demo('DelayedRootOptions') +guide('Flat Mode & Sort Values') diff --git a/src/mixins/treeselectMixin.js b/src/mixins/treeselectMixin.js index 55e37827..4925e839 100644 --- a/src/mixins/treeselectMixin.js +++ b/src/mixins/treeselectMixin.js @@ -1216,7 +1216,7 @@ export default { parentNode.isPending = true parentNode.loadingChildrenError = '' - this.loadChildrenOptions(rawData, callback) + this.loadChildrenOptions(rawData, callback, this.id) } }, diff --git a/test/unit/specs/Treeselect.spec.js b/test/unit/specs/Treeselect.spec.js index a4a6a6af..baa24445 100644 --- a/test/unit/specs/Treeselect.spec.js +++ b/test/unit/specs/Treeselect.spec.js @@ -3230,6 +3230,7 @@ describe('Props', () => { const loadChildrenOptions = jasmine.createSpy('loadChildrenOptions') const wrapper = mount(Treeselect, { propsData: { + id: 'test', options: [ { id: 'a', label: 'a', @@ -3251,7 +3252,7 @@ describe('Props', () => { const { a } = vm.nodeMap expect(loadChildrenOptions.calls.count()).toBe(1) - expect(loadChildrenOptions).toHaveBeenCalledWith(a.raw, jasmine.any(Function)) + expect(loadChildrenOptions).toHaveBeenCalledWith(a.raw, jasmine.any(Function), 'test') }) }) @@ -3840,6 +3841,47 @@ describe('Props', () => { jasmine.clock().uninstall() }) + it('multiple instances share the same `loadChildrenOptions` function', async () => { + const loadChildrenOptions = jasmine.createSpy('loadRootOptions') + const { vm: vm1 } = mount(Treeselect, { + propsData: { + id: 1, + loadChildrenOptions, + options: [ { + id: 'branch', + label: 'branch', + children: null, + } ], + }, + data: { + isOpen: true, + }, + }) + const { vm: vm2 } = mount(Treeselect, { + propsData: { + id: 2, + loadChildrenOptions, + options: [ { + id: 'branch', + label: 'branch', + children: null, + } ], + }, + data: { + isOpen: true, + }, + }) + + vm1.toggleExpanded(vm1.nodeMap.branch) + await vm1.$nextTick() + expect(loadChildrenOptions.calls.argsFor(0)).toEqual([ jasmine.any(Object), jasmine.any(Function), 1 ]) + + vm2.toggleExpanded(vm2.nodeMap.branch) + await vm2.$nextTick() + expect(loadChildrenOptions.calls.argsFor(1)).toEqual([ jasmine.any(Object), jasmine.any(Function), 2 ]) + }) + + it('should override fallback nodes', async () => { jasmine.clock().install() @@ -4084,6 +4126,28 @@ describe('Props', () => { expect(loadRootOptions.calls.count()).toBe(1) }) + it('multiple instances share the same `loadRootOptions` function', () => { + const loadRootOptions = jasmine.createSpy('loadRootOptions') + const { vm: vm1 } = mount(Treeselect, { + propsData: { + id: 1, + loadRootOptions, + }, + }) + const { vm: vm2 } = mount(Treeselect, { + propsData: { + id: 2, + loadRootOptions, + }, + }) + + vm1.openMenu() + expect(loadRootOptions.calls.argsFor(0)).toEqual([ jasmine.any(Function), 1 ]) + + vm2.openMenu() + expect(loadRootOptions.calls.argsFor(1)).toEqual([ jasmine.any(Function), 2 ]) + }) + it('should override fallback nodes', () => { // the same with `loadChildrenOptions` })