Skip to content

Commit

Permalink
Merge pull request #2554 from smeup/fix-state-management
Browse files Browse the repository at this point in the history 
NC: web components state management: fixed, save state also at first render
  • Loading branch information
@lucafoscili
lucafoscili authored Mar 4, 2025
2 parents 1f550a7 + 9722777 commit 06ac692
Show file tree
Hide file tree
Showing 8 changed files with 515 additions and 527 deletions.
32 changes: 16 additions & 16 deletions packages/ketchup/src/components.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -244,10 +244,6 @@ export namespace Components {
* @default false
*/
"disabled": boolean;
/**
* Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode".
*/
"displayListMode": ItemsDisplayMode;
/**
* Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode".
* @default ItemsDisplayMode.DESCRIPTION
Expand Down Expand Up @@ -303,6 +299,10 @@ export namespace Components {
* @default false
*/
"leadingLabel": boolean;
/**
* Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode".
*/
"listDisplayMode": ItemsDisplayMode;
/**
* The minimum number of chars to trigger the autocomplete
* @default 3
Expand Down Expand Up @@ -1337,10 +1337,6 @@ export namespace Components {
* Defaults at false. When set to true, the component is disabled.
*/
"disabled": boolean;
/**
* Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode".
*/
"displayListMode": ItemsDisplayMode;
/**
* Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode".
*/
Expand Down Expand Up @@ -1393,6 +1389,10 @@ export namespace Components {
* @default false
*/
"leadingLabel": boolean;
/**
* Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode".
*/
"listDisplayMode": ItemsDisplayMode;
/**
* Sets the component to read only state, making it not editable, but interactable. Used in combobox component when it behaves as a select.
* @default false
Expand Down Expand Up @@ -6343,10 +6343,6 @@ declare namespace LocalJSX {
* @default false
*/
"disabled"?: boolean;
/**
* Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode".
*/
"displayListMode"?: ItemsDisplayMode;
/**
* Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode".
* @default ItemsDisplayMode.DESCRIPTION
Expand Down Expand Up @@ -6391,6 +6387,10 @@ declare namespace LocalJSX {
* @default false
*/
"leadingLabel"?: boolean;
/**
* Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode".
*/
"listDisplayMode"?: ItemsDisplayMode;
/**
* The minimum number of chars to trigger the autocomplete
* @default 3
Expand Down Expand Up @@ -7308,10 +7308,6 @@ declare namespace LocalJSX {
* Defaults at false. When set to true, the component is disabled.
*/
"disabled"?: boolean;
/**
* Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode".
*/
"displayListMode"?: ItemsDisplayMode;
/**
* Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode".
*/
Expand Down Expand Up @@ -7353,6 +7349,10 @@ declare namespace LocalJSX {
* @default false
*/
"leadingLabel"?: boolean;
/**
* Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode".
*/
"listDisplayMode"?: ItemsDisplayMode;
"onKup-combobox-blur"?: (event: KupComboboxCustomEvent<KupComboboxEventPayload>) => void;
"onKup-combobox-change"?: (event: KupComboboxCustomEvent<KupComboboxEventPayload>) => void;
"onKup-combobox-click"?: (event: KupComboboxCustomEvent<KupComboboxEventPayload>) => void;
Expand Down
52 changes: 26 additions & 26 deletions packages/ketchup/src/components/kup-autocomplete/readme.md
View file

Large diffs are not rendered by default.

164 changes: 80 additions & 84 deletions packages/ketchup/src/components/kup-box/kup-box.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,6 @@ import { FCell } from '../../f-components/f-cell/f-cell';
import { FCellProps } from '../../f-components/f-cell/f-cell-declarations';
import { FPaginator } from '../../f-components/f-paginator/f-paginator';
import { KupComboboxEventPayload } from '../kup-combobox/kup-combobox-declarations';
import { FPaginatorMode } from '../../f-components/f-paginator/f-paginator-declarations';
import {
pageChange,
rowsPerPageChange,
Expand Down Expand Up @@ -126,6 +125,7 @@ export class KupBox {

initWithPersistedState(): void {
if (this.store && this.stateId) {
this.state.load = true;
const state = this.store.getState(this.stateId);
if (state != null) {
this.kupManager.debug.logMessage(
Expand All @@ -149,102 +149,98 @@ export class KupBox {

persistState(): void {
if (this.store && this.stateId) {
let somethingChanged = false;
if (
!this.kupManager.objects.deepEqual(
this.state.sortBy,
this.sortBy
)
) {
this.state.sortBy = this.sortBy;
somethingChanged = true;
}

if (
!this.kupManager.objects.deepEqual(
this.state.globalFilterValue,
this.globalFilterValue
)
) {
this.state.globalFilterValue = this.globalFilterValue;
somethingChanged = true;
}

if (
!this.kupManager.objects.deepEqual(
this.state.pageSelected,
this.currentPage
)
) {
this.state.pageSelected = this.currentPage;
somethingChanged = true;
}

if (
!this.kupManager.objects.deepEqual(
this.state.rowsPerPage,
this.currentRowsPerPage
)
) {
this.state.rowsPerPage = this.currentRowsPerPage;
somethingChanged = true;
}

const selectedRowsState = this.selectedRows.reduce(
(accumulator, row, currentIndex) => {
const prefix = currentIndex > 0 ? ';' : '';
return accumulator + prefix + row.id;
},
''
);

if (
!this.kupManager.objects.deepEqual(
this.state.selectedRowsState,
selectedRowsState
)
) {
this.state.selectedRowsState = selectedRowsState;
somethingChanged = true;
}
if (
!this.kupManager.objects.deepEqual(
this.state.loadMoreLimit,
this.loadMoreLimit
)
) {
this.state.loadMoreLimit = this.loadMoreLimit;
somethingChanged = true;
}

if (
!this.kupManager.objects.deepEqual(
this.state.showLoadMore,
this.showLoadMore
)
) {
this.state.showLoadMore = this.showLoadMore;
somethingChanged = true;
}

let somethingChanged = this.#checkUpdateState();
if (!this.state.load) {
this.state.load = true;
return;
}

if (somethingChanged) {
this.kupManager.debug.logMessage(
this,
'Persisting state for stateId ' +
this.stateId +
': ' +
this.state
'Persisting stateId ' + this.stateId
);
this.store.persistState(this.stateId, this.state);
}
}
}

#checkUpdateState(): boolean {
let somethingChanged = false;
if (
!this.kupManager.objects.deepEqual(this.state.sortBy, this.sortBy)
) {
this.state.sortBy = this.sortBy;
somethingChanged = true;
}

if (
!this.kupManager.objects.deepEqual(
this.state.globalFilterValue,
this.globalFilterValue
)
) {
this.state.globalFilterValue = this.globalFilterValue;
somethingChanged = true;
}

if (
!this.kupManager.objects.deepEqual(
this.state.pageSelected,
this.currentPage
)
) {
this.state.pageSelected = this.currentPage;
somethingChanged = true;
}

if (
!this.kupManager.objects.deepEqual(
this.state.rowsPerPage,
this.currentRowsPerPage
)
) {
this.state.rowsPerPage = this.currentRowsPerPage;
somethingChanged = true;
}

const selectedRowsState = this.selectedRows.reduce(
(accumulator, row, currentIndex) => {
const prefix = currentIndex > 0 ? ';' : '';
return accumulator + prefix + row.id;
},
''
);

if (
!this.kupManager.objects.deepEqual(
this.state.selectedRowsState,
selectedRowsState
)
) {
this.state.selectedRowsState = selectedRowsState;
somethingChanged = true;
}
if (
!this.kupManager.objects.deepEqual(
this.state.loadMoreLimit,
this.loadMoreLimit
)
) {
this.state.loadMoreLimit = this.loadMoreLimit;
somethingChanged = true;
}

if (
!this.kupManager.objects.deepEqual(
this.state.showLoadMore,
this.showLoadMore
)
) {
this.state.showLoadMore = this.showLoadMore;
somethingChanged = true;
}
return somethingChanged;
}
/*-------------------------------------------------*/
/* P r o p s */
/*-------------------------------------------------*/
Expand Down
Loading

0 comments on commit 06ac692

Please sign in to comment.