🐛 fix(DataTable): incorrect fixed column style in RTL

masastack · Dec 26, 2024 · a29173c · a29173c
1 parent 259f741
commit a29173c
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 10 deletions.
diff --git a/src/Masa.Blazor.JS/src/interop.ts b/src/Masa.Blazor.JS/src/interop.ts
@@ -1589,15 +1589,22 @@ export function registerTableScrollEvent(wrapper: HTMLElement) {
   const listener = () => {
     const scrollWidth = wrapper.scrollWidth;
     const clientWidth = wrapper.clientWidth;
-    const scrollLeft = wrapper.scrollLeft;
+    const scrollLeft =  wrapper.scrollLeft;
+
+    if (scrollWidth == clientWidth) {
+      wrapper.classList.remove('scrolling');
+      wrapper.classList.remove('scrolled-to-right');
+      wrapper.classList.remove('scrolled-to-left');
+      return;
+    }
 
     const rtl = wrapper.parentElement.classList.contains('m-data-table--rtl');
 
     if (Math.abs(scrollWidth -((rtl ? -scrollLeft : scrollLeft) + clientWidth)) < 1) {
       wrapper.classList.remove('scrolling')
       wrapper.classList.remove('scrolled-to-left')
       wrapper.classList.add('scrolled-to-right');
-    } else if (Math.abs(scrollLeft - (rtl ? scrollWidth - clientWidth : 0)) < 1) {
+    } else if (scrollLeft == 0) {
       wrapper.classList.remove('scrolling')
       wrapper.classList.remove('scrolled-to-right')
       wrapper.classList.add('scrolled-to-left');

diff --git a/src/Masa.Blazor/Components/DataIterator/MDataIterator.razor.cs b/src/Masa.Blazor/Components/DataIterator/MDataIterator.razor.cs
@@ -2,7 +2,6 @@
 
 namespace Masa.Blazor;
 
-// public class MDataIterator<TItem> : BDataIterator<TItem>, IDataIterator<TItem>, ILoadable
 public partial class MDataIterator<TItem> : MData<TItem>
 {
     [Inject]

diff --git a/src/Masa.Blazor/wwwroot/css/masa-blazor.extend.css b/src/Masa.Blazor/wwwroot/css/masa-blazor.extend.css
@@ -55,13 +55,17 @@
     pointer-events: none;
 }
 
-.m-data-table > .m-data-table__wrapper:not(.scrolled-to-right) .m-data-table__column--fixed-right.first-fixed-column:after,
-.m-application--is-rtl .m-data-table > .m-data-table__wrapper:not(.scrolled-to-left) .m-data-table__column--fixed-left.first-fixed-column:after {
+.m-data-table > .m-data-table__wrapper.scrolled-to-left .m-data-table__column--fixed-right.first-fixed-column:after,
+.m-data-table > .m-data-table__wrapper.scrolling .m-data-table__column--fixed-right.first-fixed-column:after,
+.m-application--is-rtl .m-data-table > .m-data-table__wrapper.scrolling .m-data-table__column--fixed-left.first-fixed-column:after,
+.m-application--is-rtl .m-data-table > .m-data-table__wrapper.scrolled-to-right .m-data-table__column--fixed-left.first-fixed-column:after {
     box-shadow: inset -10px 0 8px -8px rgb(0 0 0 / 15%);
 }
 
-.m-data-table > .m-data-table__wrapper:not(.scrolled-to-left) .m-data-table__column--fixed-left.first-fixed-column:after,
-.m-application--is-rtl .m-data-table > .m-data-table__wrapper:not(.scrolled-to-right) .m-data-table__column--fixed-right.first-fixed-column:after {
+.m-data-table > .m-data-table__wrapper.scrolled-to-right .m-data-table__column--fixed-left.first-fixed-column:after,
+.m-data-table > .m-data-table__wrapper.scrolling .m-data-table__column--fixed-left.first-fixed-column:after,
+.m-application--is-rtl .m-data-table > .m-data-table__wrapper.scrolling .m-data-table__column--fixed-right.first-fixed-column:after,
+.m-application--is-rtl .m-data-table > .m-data-table__wrapper.scrolled-to-left .m-data-table__column--fixed-right.first-fixed-column:after {
     box-shadow: inset 10px 0 8px -8px rgb(0 0 0 / 15%);
 }
 

diff --git a/src/Masa.Blazor/wwwroot/css/masa-blazor.min.css b/src/Masa.Blazor/wwwroot/css/masa-blazor.min.css
diff --git a/src/Masa.Blazor/wwwroot/js/masa-blazor.js b/src/Masa.Blazor/wwwroot/js/masa-blazor.js
diff --git a/src/Masa.Blazor/wwwroot/js/masa-blazor.js.map b/src/Masa.Blazor/wwwroot/js/masa-blazor.js.map