@acorex/platform 20.4.2 → 20.5.0-next.0

package/fesm2022/acorex-platform-layout-widget-core.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { computed, signal, Injectable, InjectionToken, inject, ElementRef, effect, Injector, ChangeDetectorRef, ViewChild, Input, ChangeDetectionStrategy, Component, EventEmitter, Output, input, output, ViewContainerRef, Directive, Optional, Inject, NgModule, createComponent } from '@angular/core';
+import { computed, signal, Injectable, InjectionToken, inject, ElementRef, effect, untracked, Injector, ChangeDetectorRef, ViewChild, Input, ChangeDetectionStrategy, Component, EventEmitter, Output, input, output, ViewContainerRef, Directive, Optional, Inject, NgModule, createComponent } from '@angular/core';
 import { convertArrayToDataSource, AXDataSource } from '@acorex/cdk/common';
 import { setSmart, AXPDataSourceDefinitionProviderService, extractValue, getSmart, AXPExpressionEvaluatorService } from '@acorex/platform/core';
 import { cloneDeep, isEqual, get, set, merge, isNil, isUndefined, isObjectLike, sum, isEmpty, isString } from 'lodash-es';
@@ -666,60 +666,64 @@ class AXPDataListWidgetComponent extends AXPValueWidgetComponent {
         this.rf = effect(async () => {
             const rawValue = this.options()['dataSource'];
             // static  datasource class
-            if (rawValue instanceof AXDataSource) {
-                this.dataSource.set(rawValue);
-            }
-            // static array datasource
-            else if (Array.isArray(rawValue)) {
-                const ds = new AXDataSource({
-                    key: this.valueField(),
-                    pageSize: 10,
-                    load: async (e) => {
-                        const raw = this.options()['dataSource'];
-                        const skip = e.skip ?? 0;
-                        const take = e.take ?? raw.length;
-                        return {
-                            items: raw.slice(skip, skip + take),
-                            total: raw.length,
-                        };
-                    },
-                    byKey: (key) => {
-                        const raw = this.options()['dataSource'];
-                        const item = raw.filter((c) => c[this.valueField()] == key);
-                        return Promise.resolve(item[0]);
-                    },
-                });
-                this.dataSource.set(ds);
-            }
-            // resolve data source by name
-            else if (rawValue && (typeof rawValue == 'string' || typeof rawValue == 'object')) {
-                const id = typeof rawValue == 'object' ? rawValue['id'] : rawValue;
-                const c = await this.dataService.get(id);
-                if (this.mode == 'designer' && c?.samples?.length) {
-                    this.dataSource.set(convertArrayToDataSource(c.samples, {
-                        key: this.valueField(),
-                        pageSize: 500,
-                    }));
-                }
-                else {
-                    const ds = c?.source();
-                    if (ds && ds instanceof Promise) {
-                        const d = await ds;
-                        this.dataSource.set(d);
+            untracked(async () => {
+                if (!isEqual(this.options()['dataSource'].config, this.dataSource().config)) {
+                    if (rawValue instanceof AXDataSource) {
+                        this.dataSource.set(rawValue);
                     }
-                    else if (ds) {
+                    // static array datasource
+                    else if (Array.isArray(rawValue)) {
+                        const ds = new AXDataSource({
+                            key: this.valueField(),
+                            pageSize: 10,
+                            load: async (e) => {
+                                const raw = this.options()['dataSource'];
+                                const skip = e.skip ?? 0;
+                                const take = e.take ?? raw.length;
+                                return {
+                                    items: raw.slice(skip, skip + take),
+                                    total: raw.length,
+                                };
+                            },
+                            byKey: (key) => {
+                                const raw = this.options()['dataSource'];
+                                const item = raw.filter((c) => c[this.valueField()] == key);
+                                return Promise.resolve(item[0]);
+                            },
+                        });
                         this.dataSource.set(ds);
                     }
+                    // resolve data source by name
+                    else if (rawValue && (typeof rawValue == 'string' || typeof rawValue == 'object')) {
+                        const id = typeof rawValue == 'object' ? rawValue['id'] : rawValue;
+                        const c = await this.dataService.get(id);
+                        if (this.mode == 'designer' && c?.samples?.length) {
+                            this.dataSource.set(convertArrayToDataSource(c.samples, {
+                                key: this.valueField(),
+                                pageSize: 500,
+                            }));
+                        }
+                        else {
+                            const ds = c?.source();
+                            if (ds && ds instanceof Promise) {
+                                const d = await ds;
+                                this.dataSource.set(d);
+                            }
+                            else if (ds) {
+                                this.dataSource.set(ds);
+                            }
+                            // empty datasource
+                            else {
+                                this.dataSource.set(convertArrayToDataSource([]));
+                            }
+                        }
+                    }
                     // empty datasource
                     else {
                         this.dataSource.set(convertArrayToDataSource([]));
                     }
                 }
-            }
-            // empty datasource
-            else {
-                this.dataSource.set(convertArrayToDataSource([]));
-            }
+            });
         }, ...(ngDevMode ? [{ debugName: "rf" }] : []));
         this.effect2 = effect(async () => {
             const value = this.getValue();