From cf4814d32b1a557ac6730bb77b64b88b17d3ab9f Mon Sep 17 00:00:00 2001 From: Theeraphat Sorasetsakul Date: Mon, 19 Aug 2024 10:57:30 +0700 Subject: [PATCH 1/3] fix(tree-select): fix item interface doesn't sync with values --- packages/elements/src/tree-select/index.ts | 19 +++++++++++ .../src/tree/managers/tree-manager.ts | 34 +++++++++++++++++++ 2 files changed, 53 insertions(+) diff --git a/packages/elements/src/tree-select/index.ts b/packages/elements/src/tree-select/index.ts index 46d46a13e0..e717712fd8 100644 --- a/packages/elements/src/tree-select/index.ts +++ b/packages/elements/src/tree-select/index.ts @@ -241,6 +241,25 @@ export class TreeSelect extends ComboBox { } } + /** + * Update composer values. + * @param newValues new values + * @returns {void} + */ + protected override updateComposerValues(newValues: string[]): void { + const selectedAt = Date.now(); + for (const item of this.treeManager.checkedItems) { + this.treeManager.uncheckItem(item); + } + const selectedItems = this.queryItems((item, composer) => { + return newValues.includes(composer.getItemPropertyValue(item, 'value') || ''); + }); + for (const item of selectedItems) { + const timestamp = selectedAt + newValues.indexOf(item.value ?? ''); + this.treeManager.checkItemWithTimestamp(item, timestamp); + } + } + /** * Renderer used to render tree item elements */ diff --git a/packages/elements/src/tree/managers/tree-manager.ts b/packages/elements/src/tree/managers/tree-manager.ts index 54efc2dbc9..98bd7c4c84 100644 --- a/packages/elements/src/tree/managers/tree-manager.ts +++ b/packages/elements/src/tree/managers/tree-manager.ts @@ -423,6 +423,40 @@ export class TreeManager { return false; } + /** + * Selects the item by update timestamp manually. + * @param item Original data item + * @param timestamp timestamp in number value + * @returns `True` if the item is modified + */ + public checkItemWithTimestamp(item: T, timestamp: number): boolean { + return this._checkItemWithTimestamp(item, this.manageRelationships, timestamp); + } + private _checkItemWithTimestamp( + item: T, + manageRelationships = this.manageRelationships, + newTimestamp: number + ): boolean { + if (this.canCheckItem(item)) { + // Create unique timestamp base on the latest selection for sequential selection. + const timestamp = Date.now(); + this.lastSelectedAt = + this.lastSelectedAt && this.lastSelectedAt >= timestamp ? this.lastSelectedAt + 1 : timestamp; + + // Set item selected with timestamp + this.composer.setItemPropertyValue(item, 'selected', true); + this.composer.setItemPropertyValue(item, 'selectedAt', newTimestamp); + if (manageRelationships) { + this.forceUpdateOnPath(item); + this.getItemDescendants(item).forEach((descendant) => + this._checkItemWithTimestamp(descendant, false, newTimestamp) + ); + } + return true; + } + return false; + } + /** * Unchecks the item * @param item Original data item From 85ce11bde0d6f77885c31836e05c04aca44c0c2d Mon Sep 17 00:00:00 2001 From: Theeraphat Sorasetsakul Date: Mon, 19 Aug 2024 11:12:42 +0700 Subject: [PATCH 2/3] chore: update package-lock.json --- package-lock.json | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index 77567c2de7..9946b5c9f9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6879,12 +6879,13 @@ } }, "node_modules/axios": { - "version": "1.6.5", - "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.5.tgz", - "integrity": "sha512-Ii012v05KEVuUoFWmMW/UQv9aRIc3ZwkWDcM+h5Il8izZCtRVpDUfwpoFf7eOtajT3QiGR4yDUx7lPqHJULgbg==", + "version": "1.7.4", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.4.tgz", + "integrity": "sha512-DukmaFRnY6AzAALSH4J2M3k6PkaC+MfaAGdEERRWcC9q3/TWQwLpHR8ZRLKTdQ3aBDL64EdluRDjJqKw+BPZEw==", "dev": true, + "license": "MIT", "dependencies": { - "follow-redirects": "^1.15.4", + "follow-redirects": "^1.15.6", "form-data": "^4.0.0", "proxy-from-env": "^1.1.0" } From 5c9132a2aae31359753effff4aea71a3818b2e98 Mon Sep 17 00:00:00 2001 From: Theeraphat Sorasetsakul Date: Tue, 20 Aug 2024 17:57:08 +0700 Subject: [PATCH 3/3] fix(tree-select): improve code --- packages/elements/src/tree-select/index.ts | 12 ++++--- .../src/tree/managers/tree-manager.ts | 34 ------------------- 2 files changed, 8 insertions(+), 38 deletions(-) diff --git a/packages/elements/src/tree-select/index.ts b/packages/elements/src/tree-select/index.ts index e717712fd8..afac91fe7e 100644 --- a/packages/elements/src/tree-select/index.ts +++ b/packages/elements/src/tree-select/index.ts @@ -247,16 +247,20 @@ export class TreeSelect extends ComboBox { * @returns {void} */ protected override updateComposerValues(newValues: string[]): void { - const selectedAt = Date.now(); for (const item of this.treeManager.checkedItems) { this.treeManager.uncheckItem(item); } const selectedItems = this.queryItems((item, composer) => { - return newValues.includes(composer.getItemPropertyValue(item, 'value') || ''); + return newValues.includes(composer.getItemPropertyValue(item, 'value') ?? ''); }); + const sortedSelectedItem = []; for (const item of selectedItems) { - const timestamp = selectedAt + newValues.indexOf(item.value ?? ''); - this.treeManager.checkItemWithTimestamp(item, timestamp); + const value = this.composer.getItemPropertyValue(item, 'value') ?? ''; + const index = newValues.indexOf(value); + sortedSelectedItem[index] = item; + } + for (const item of sortedSelectedItem) { + this.treeManager.checkItem(item); } } diff --git a/packages/elements/src/tree/managers/tree-manager.ts b/packages/elements/src/tree/managers/tree-manager.ts index 98bd7c4c84..54efc2dbc9 100644 --- a/packages/elements/src/tree/managers/tree-manager.ts +++ b/packages/elements/src/tree/managers/tree-manager.ts @@ -423,40 +423,6 @@ export class TreeManager { return false; } - /** - * Selects the item by update timestamp manually. - * @param item Original data item - * @param timestamp timestamp in number value - * @returns `True` if the item is modified - */ - public checkItemWithTimestamp(item: T, timestamp: number): boolean { - return this._checkItemWithTimestamp(item, this.manageRelationships, timestamp); - } - private _checkItemWithTimestamp( - item: T, - manageRelationships = this.manageRelationships, - newTimestamp: number - ): boolean { - if (this.canCheckItem(item)) { - // Create unique timestamp base on the latest selection for sequential selection. - const timestamp = Date.now(); - this.lastSelectedAt = - this.lastSelectedAt && this.lastSelectedAt >= timestamp ? this.lastSelectedAt + 1 : timestamp; - - // Set item selected with timestamp - this.composer.setItemPropertyValue(item, 'selected', true); - this.composer.setItemPropertyValue(item, 'selectedAt', newTimestamp); - if (manageRelationships) { - this.forceUpdateOnPath(item); - this.getItemDescendants(item).forEach((descendant) => - this._checkItemWithTimestamp(descendant, false, newTimestamp) - ); - } - return true; - } - return false; - } - /** * Unchecks the item * @param item Original data item