Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

NC: web components state management: fixed, save state also at first render #2554

Merged
merged 1 commit into from
Mar 4, 2025
Merged

NC: web components state management: fixed, save state also at first render #2554

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 16 additions & 16 deletions packages/ketchup/src/components.d.ts
View file
Open in desktop
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
Open in desktop

Large diffs are not rendered by default.

164 changes: 80 additions & 84 deletions packages/ketchup/src/components/kup-box/kup-box.tsx
View file
Open in desktop
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