[WINDOW]: drop rtl support. (#161)

Author: leebeydoun

.changeset/khaki-onions-drum.md

@@ -0,0 +1,10 @@
+---
+"@resembli/react-virtualized-window": minor
+---
+
+Removed rtl support
+
+RTL support with `sticky` positioning is not widely supported, in particular it breaks in IOS touch devices.
+The decision was made to drop RTL support in the virtualized window due to the complexity supporting brings vs
+the actual use cases. If we need to support virtualized rtl views, this can be done through a separate purpose
+built package.

packages/react-virtualized-window/src/PinnedColumn.tsx

@@ -9,7 +9,6 @@ interface PinnedColumnsProps<T> {
   position?: "sticky" | "absolute"
   left?: number
   right?: number
-  rtl?: boolean
   columns: T[][]
   widths: number[]
   heights: number[]
@@ -30,7 +29,6 @@ export function PinnedColumn<T>({
   columns,
   widths,
   heights,
-  rtl,
   runningHeight,
   Component,
   vertStart,
@@ -53,10 +51,8 @@ export function PinnedColumn<T>({
       {columns.map((pinnedColumn, colIndex) => {
         const columnWidth = widths[colIndex]
 
-        const marginLeft =
-          pinnedRight && !rtl ? horizontalGap : !rtl && colIndex !== 0 ? horizontalGap : 0
-        const marginRight =
-          pinnedRight && rtl ? horizontalGap : rtl && colIndex !== 0 ? horizontalGap : 0
+        const marginLeft = !pinnedRight && colIndex !== 0 ? horizontalGap : 0
+        const marginRight = pinnedRight && colIndex !== columns.length - 1 ? horizontalGap : 0
 
         return (
           <div key={colIndex}>

packages/react-virtualized-window/src/ScrollDiv.tsx

@@ -2,7 +2,6 @@ import * as React from "react"
 import type { PropsWithChildren } from "react"
 
 interface ScrollDivProps {
-  rtl?: boolean
   disableSticky?: boolean
   leftOffset: number
   topOffset: number
@@ -11,31 +10,12 @@ interface ScrollDivProps {
 }
 
 export function ScrollDiv({
-  rtl,
   disableSticky,
   leftOffset,
   topOffset,
   pinnedLeftWidth,
   children,
 }: PropsWithChildren<ScrollDivProps>) {
-  if (rtl) {
-    return (
-      <div
-        style={{
-          position: "absolute",
-          transform: `translate3d(${disableSticky ? 0 : leftOffset}px, ${
-            disableSticky ? 0 : -topOffset
-          }px, 0px)`,
-          top: 0,
-          right: pinnedLeftWidth,
-          willChange: "transform",
-        }}
-      >
-        {children}
-      </div>
-    )
-  }
-
   return (
     <div
       style={{

packages/react-virtualized-window/src/StickyDiv.tsx

@@ -3,15 +3,13 @@ import * as React from "react"
 interface StickyDivProps {
   width?: React.CSSProperties["width"]
   height?: React.CSSProperties["height"]
-  rtl: boolean
   disabled: boolean
 }
 
 export function StickyDiv({
   children,
   width,
   height,
-  rtl,
   disabled,
 }: React.PropsWithChildren<StickyDivProps>) {
   if (disabled) return <>{children}</>
@@ -20,8 +18,7 @@ export function StickyDiv({
       style={{
         position: "sticky",
         top: 0,
-        left: rtl ? undefined : 0,
-        right: rtl ? 0 : undefined,
+        left: 0,
         willChange: "top, left",
         height,
         width,

packages/react-virtualized-window/src/components/Grid.tsx

@@ -8,7 +8,6 @@ import { getHorizontalGap, getVerticalGap } from "../itemGapUtilities"
 import type { GridProps } from "../types"
 import { useDataDimension } from "../useDataDimension"
 import { useIndicesForDimensions } from "../useDimensionIndices"
-import { useRTLWarnings } from "../useRtlWarnings"
 import { useScrollAdjustWindowDims } from "../useScrollAdjustedDim"
 import { useScrollItems } from "../useScrollItems"
 import { useSmartSticky } from "../useSmartSticky"
@@ -35,8 +34,6 @@ export function Grid<T, L = unknown, R = unknown>({
   style,
   gap,
 
-  rtl,
-
   width: sizingWidth,
   height: sizingHeight,
 
@@ -56,11 +53,8 @@ export function Grid<T, L = unknown, R = unknown>({
   const [width, height, browserWidth] = useWindowDimensions(windowRef)
   const [overscan, disableSticky] = useSmartSticky(browserWidth, userOverscan, userDisableSticky)
 
-  useRTLWarnings({ rtl, disableSticky, pinnedLeft, pinnedRight })
-
   const [topOffset, leftOffset, onScroll] = useWindowScroll({
     userOnScroll,
-    rtl: rtl ?? false,
   })
 
   const [adjustedWidth, adjustedHeight] = useScrollAdjustWindowDims({
@@ -133,7 +127,6 @@ export function Grid<T, L = unknown, R = unknown>({
     horiEnd,
     horiStart,
     horizontalGap,
-    rtl,
     runningHeight,
     runningWidth,
     vertEnd,
@@ -159,7 +152,6 @@ export function Grid<T, L = unknown, R = unknown>({
           width,
           position: "relative",
           overflow: "auto",
-          direction: rtl ? "rtl" : "ltr",
         }}
       >
         <div
@@ -170,12 +162,10 @@ export function Grid<T, L = unknown, R = unknown>({
         >
           <StickyDiv
             disabled={disableSticky ?? false}
-            rtl={rtl ?? false}
             height={adjustedHeight}
             width={adjustedWidth}
           >
             <ScrollDiv
-              rtl={rtl}
               disableSticky={disableSticky}
               topOffset={topOffset}
               leftOffset={leftOffset}
@@ -187,18 +177,16 @@ export function Grid<T, L = unknown, R = unknown>({
             <div
               style={{
                 display: "flex",
-                width: adjustedWidth,
+                width: width,
                 position: "sticky",
-                left: rtl ? undefined : 0,
-                right: rtl ? 0 : undefined,
+                left: 0,
               }}
             >
               {pinnedLeft && (
                 <PinnedColumn
                   Component={children}
                   totalWidth={leftTotalWidth}
-                  left={rtl ? undefined : 0}
-                  right={rtl ? 0 : undefined}
+                  left={0}
                   topOffset={disableSticky ? 0 : -topOffset}
                   columns={pinnedLeft}
                   widths={lWidths}
@@ -208,15 +196,13 @@ export function Grid<T, L = unknown, R = unknown>({
                   verticalGap={verticalGap}
                   horizontalGap={horizontalGap}
                   runningHeight={runningHeight}
-                  rtl={rtl}
                 />
               )}
               {pinnedRight && (
                 <PinnedColumn
                   Component={children}
                   totalWidth={rightTotalWidth}
-                  left={rtl ? 0 : undefined}
-                  right={rtl ? undefined : 0}
+                  right={0}
                   topOffset={disableSticky ? 0 : -topOffset}
                   columns={pinnedRight}
                   widths={rWidths}
@@ -227,7 +213,6 @@ export function Grid<T, L = unknown, R = unknown>({
                   horizontalGap={horizontalGap}
                   pinnedRight
                   runningHeight={runningHeight}
-                  rtl={rtl}
                 />
               )}
             </div>

packages/react-virtualized-window/src/types.ts

@@ -15,8 +15,6 @@ export interface VirtualWindowBaseProps<T> {
   gap?: ItemGap
   disableSticky?: boolean
 
-  rtl?: boolean
-
   onScroll?: React.UIEventHandler<HTMLElement>
 
   width?: React.CSSProperties["width"]

packages/react-virtualized-window/src/useRtlWarnings.ts

@@ -17,7 +17,6 @@ interface ScrollItemArgs<T> {
   horizontalGap: number
   getKey: GridProps<T>["getKey"]
   children: GridProps<T>["children"]
-  rtl?: boolean
 }
 
 export function useScrollItems<T>({
@@ -29,7 +28,6 @@ export function useScrollItems<T>({
   horiEnd,
   horiStart,
   horizontalGap,
-  rtl,
   runningHeight,
   runningWidth,
   vertEnd,
@@ -54,8 +52,8 @@ export function useScrollItems<T>({
                   key={cellKey}
                   itemWidth={itemWidth}
                   Component={children}
-                  marginLeft={rtl || j + horiStart === 0 ? 0 : horizontalGap}
-                  marginRight={!rtl || j + horiStart === 0 ? 0 : horizontalGap}
+                  marginLeft={j + horiStart === 0 ? 0 : horizontalGap}
+                  marginRight={0}
                   itemProps={cell}
                   column={horiStart + j}
                   row={vertStart + i}
@@ -92,7 +90,6 @@ export function useScrollItems<T>({
       horiEnd,
       horiStart,
       horizontalGap,
-      rtl,
       runningHeight,
       runningWidth,
       vertEnd,

packages/react-virtualized-window/src/useScrollItems.tsx

@@ -1,11 +1,10 @@
 import * as React from "react"
 
 interface UseWindowScrollArgs {
-  rtl: boolean
   userOnScroll?: React.UIEventHandler<HTMLElement>
 }
 
-export const useWindowScroll = ({ userOnScroll, rtl }: UseWindowScrollArgs) => {
+export const useWindowScroll = ({ userOnScroll }: UseWindowScrollArgs) => {
   const vOffset = React.useRef(0)
   const hOffset = React.useRef(0)
 
@@ -16,7 +15,7 @@ export const useWindowScroll = ({ userOnScroll, rtl }: UseWindowScrollArgs) => {
     (event) => {
       const target = event.currentTarget
 
-      const scrollLeft = rtl ? -target.scrollLeft : target.scrollLeft
+      const scrollLeft = target.scrollLeft
       const scrollTop = target.scrollTop
 
       const verticalOffset = Math.max(0, scrollTop)
@@ -31,7 +30,7 @@ export const useWindowScroll = ({ userOnScroll, rtl }: UseWindowScrollArgs) => {
 
       userOnScroll?.(event)
     },
-    [rtl, userOnScroll],
+    [userOnScroll],
   )
 
   return [vOffset.current, hOffset.current, onScroll] as const

packages/react-virtualized-window/src/useWindowScroll.ts

@@ -50,16 +50,11 @@ const pinnedRight = [
 ]
 
 function App() {
-  const [rtl, setRlt] = useState(false)
   const [disableSticky, setStickyDisabled] = useState(false)
 
   return (
     <div className={AppCss()}>
       <div>
-        <label>
-          rtl:
-          <input type="checkbox" checked={rtl} onChange={(e) => setRlt(e.target.checked)} />
-        </label>
         <label>
           disableStick:
           <input
@@ -75,7 +70,6 @@ function App() {
         data={data}
         width="70%"
         height="70%"
-        rtl={rtl}
         disableSticky={disableSticky}
         pinnedRight={pinnedRight}
         pinnedLeft={pinnedLeft}