From 321c5438ff4e1f2fcad5558bd08f170006deea8b Mon Sep 17 00:00:00 2001 From: brookewp Date: Fri, 17 Jan 2025 14:11:03 -0800 Subject: [PATCH 1/4] Make action columns sticky Signed-off-by: brookewp --- src/blocks/remote-data-container/editor.scss | 32 +++++++++++++++----- 1 file changed, 25 insertions(+), 7 deletions(-) diff --git a/src/blocks/remote-data-container/editor.scss b/src/blocks/remote-data-container/editor.scss index 7bf4f033..5e6e952c 100644 --- a/src/blocks/remote-data-container/editor.scss +++ b/src/blocks/remote-data-container/editor.scss @@ -84,10 +84,10 @@ remote-data-blocks-inline-field { .dataviews-view-table tbody .dataviews-view-table__cell-content-wrapper { white-space: normal; - width: 300px; + width: 250px; max-width: 100%; min-width: 150px; - overflow-wrap: break-word; + overflow-wrap: anywhere; } .dataviews-view-table__row .dataviews-view-table__actions-column .components-button.is-compact.has-icon:not(.has-text) { @@ -112,11 +112,6 @@ remote-data-blocks-inline-field { vertical-align: middle; } -.dataviews-view-table tr td:last-child, -.dataviews-view-table tr th:last-child { - padding-left: 48px; -} - .rdb-editor_data-views-modal .components-modal__content { padding: 0; @@ -128,3 +123,26 @@ remote-data-blocks-inline-field { padding: 4px 32px 32px; } } + + +.dataviews-view-table tr th.dataviews-view-table__actions-column, +.dataviews-view-table tr td.dataviews-view-table__actions-column { + position: sticky; + right: 0; + background: #fff; + z-index: 1; + padding-left: 24px; + padding-right: 24px; + text-align: center; +} + +td.dataviews-view-table__actions-column::before { + content: ""; + position: absolute; + top: 0; + left: -1px; + width: 1px; + height: 100%; + background-color: #f0f0f0; + z-index: 2; +} From ec8b73b34ab67d9346c950449c082e7618d61fa9 Mon Sep 17 00:00:00 2001 From: brookewp Date: Fri, 17 Jan 2025 14:11:19 -0800 Subject: [PATCH 2/4] Replace . with a space to prevent breaking error from dataviews Signed-off-by: brookewp --- .../components/item-list/ItemList.tsx | 22 ++++++++++++------- 1 file changed, 14 insertions(+), 8 deletions(-) diff --git a/src/blocks/remote-data-container/components/item-list/ItemList.tsx b/src/blocks/remote-data-container/components/item-list/ItemList.tsx index a41f6d74..8b9892dd 100644 --- a/src/blocks/remote-data-container/components/item-list/ItemList.tsx +++ b/src/blocks/remote-data-container/components/item-list/ItemList.tsx @@ -21,15 +21,21 @@ export function ItemList( props: ItemListProps ) { const instanceId = useInstanceId( ItemList, blockName ); const data = useMemo( () => { - // remove null values from the data to prevent errors in filterSortAndPaginate - const removeNullValues = ( obj: Record< string, unknown > ): Record< string, unknown > => { - return Object.fromEntries( - Object.entries( obj ).filter( ( [ _, value ] ) => value !== null ) - ); - }; - return ( results ?? [] ).map( ( item: Record< string, unknown > ) => { - const parsedItem = removeNullValues( item ); + // Remove null values and dots to prevent errors in DataViewsd + const sanitizeAndRemoveNullValues = ( + obj: Record< string, unknown > + ): Record< string, unknown > => { + return Object.fromEntries( + Object.entries( obj ) + .filter( ( [ _, value ] ) => value !== null ) // Remove null values + .map( ( [ key, value ] ) => { + const sanitizedKey = key.replace( /\./g, '' ); // Remove dots + return [ sanitizedKey, value ]; + } ) + ); + }; + const parsedItem = sanitizeAndRemoveNullValues( item ); if ( parsedItem.id ) { return parsedItem; From 6e044b2822b29b3264c180d847eb3bf73ae69234 Mon Sep 17 00:00:00 2001 From: brookewp Date: Fri, 17 Jan 2025 14:40:24 -0800 Subject: [PATCH 3/4] Revert "Replace . with a space to prevent breaking error from dataviews" This reverts commit ec8b73b34ab67d9346c950449c082e7618d61fa9. --- .../components/item-list/ItemList.tsx | 22 +++++++------------ 1 file changed, 8 insertions(+), 14 deletions(-) diff --git a/src/blocks/remote-data-container/components/item-list/ItemList.tsx b/src/blocks/remote-data-container/components/item-list/ItemList.tsx index 8b9892dd..a41f6d74 100644 --- a/src/blocks/remote-data-container/components/item-list/ItemList.tsx +++ b/src/blocks/remote-data-container/components/item-list/ItemList.tsx @@ -21,21 +21,15 @@ export function ItemList( props: ItemListProps ) { const instanceId = useInstanceId( ItemList, blockName ); const data = useMemo( () => { + // remove null values from the data to prevent errors in filterSortAndPaginate + const removeNullValues = ( obj: Record< string, unknown > ): Record< string, unknown > => { + return Object.fromEntries( + Object.entries( obj ).filter( ( [ _, value ] ) => value !== null ) + ); + }; + return ( results ?? [] ).map( ( item: Record< string, unknown > ) => { - // Remove null values and dots to prevent errors in DataViewsd - const sanitizeAndRemoveNullValues = ( - obj: Record< string, unknown > - ): Record< string, unknown > => { - return Object.fromEntries( - Object.entries( obj ) - .filter( ( [ _, value ] ) => value !== null ) // Remove null values - .map( ( [ key, value ] ) => { - const sanitizedKey = key.replace( /\./g, '' ); // Remove dots - return [ sanitizedKey, value ]; - } ) - ); - }; - const parsedItem = sanitizeAndRemoveNullValues( item ); + const parsedItem = removeNullValues( item ); if ( parsedItem.id ) { return parsedItem; From a0d7f02a1dbc5c7bd4d18bcd9d2390c5a32c83ea Mon Sep 17 00:00:00 2001 From: brookewp Date: Fri, 17 Jan 2025 14:41:55 -0800 Subject: [PATCH 4/4] Explicity define field value to avoid getValueFromId Signed-off-by: brookewp --- .../remote-data-container/components/item-list/ItemList.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/blocks/remote-data-container/components/item-list/ItemList.tsx b/src/blocks/remote-data-container/components/item-list/ItemList.tsx index a41f6d74..3f69dbd8 100644 --- a/src/blocks/remote-data-container/components/item-list/ItemList.tsx +++ b/src/blocks/remote-data-container/components/item-list/ItemList.tsx @@ -79,6 +79,7 @@ export function ItemList( props: ItemListProps ) { id: field, label: field ?? '', enableGlobalSearch: true, + getValue: ( { item }: { item: RemoteDataResult } ) => item[ field ] as string, render: field === media ? ( { item }: { item: RemoteDataResult } ) => {