feat: support rtl direction

README.md

@@ -60,6 +60,7 @@ export default () => (
 | `group` | Group configuration. | `{ key: (item: T) => K; title: (groupKey: K, items: T[]) => React.ReactNode }` | - |
 | `sticky` | Enable sticky group headers. | `boolean` | `false` |
 | `virtual` | Enable virtual scrolling. | `boolean` | `true` |
+| `direction` | Layout direction; set `rtl` for right-to-left. | `'ltr' \| 'rtl'` | `'ltr'` |
 | `onScroll` | Triggered when the inner scroll container scrolls. | `React.UIEventHandler<HTMLElement>` | - |
 | `prefixCls` | Component class name prefix. | `string` | `rc-listy` |
 

README.zh-CN.md

@@ -60,6 +60,7 @@ export default () => (
 | `group` | 分组配置。 | `{ key: (item: T) => K; title: (groupKey: K, items: T[]) => React.ReactNode }` | - |
 | `sticky` | 启用粘性组头。 | `boolean` | `false` |
 | `virtual` | 启用虚拟滚动。 | `boolean` | `true` |
+| `direction` | 布局方向，设为 `rtl` 时启用从右到左布局。 | `'ltr' \| 'rtl'` | `'ltr'` |
 | `onScroll` | 内部滚动容器滚动时触发。 | `React.UIEventHandler<HTMLElement>` | - |
 | `prefixCls` | 组件样式前缀。 | `string` | `rc-listy` |
 

docs/demos/rtl.md

@@ -0,0 +1,8 @@
+---
+title: RTL
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/rtl.tsx"></code>

docs/examples/rtl.tsx

@@ -0,0 +1,71 @@
+import React, { useState } from 'react';
+import Listy from '@rc-component/listy';
+import '../../assets/index.less';
+
+export default () => {
+  const [direction, setDirection] = useState<'ltr' | 'rtl'>('rtl');
+  const [virtual, setVirtual] = useState(true);
+
+  const rtl = direction === 'rtl';
+  const groupSize = 10;
+  const total = 120;
+  const items = Array.from({ length: total }, (_, index) => ({
+    id: index + 1,
+    index,
+    groupIndex: Math.floor(index / groupSize),
+  }));
+
+  const itemStyle: React.CSSProperties = {
+    padding: '0 12px',
+    height: 32,
+    lineHeight: '32px',
+    borderBottom: '1px solid #efefef',
+    background: '#fff',
+  };
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+      <div style={{ display: 'flex', gap: 8 }}>
+        <button
+          type="button"
+          onClick={() => setDirection((d) => (d === 'rtl' ? 'ltr' : 'rtl'))}
+        >
+          direction: {direction}
+        </button>
+        <button type="button" onClick={() => setVirtual((v) => !v)}>
+          virtual: {String(virtual)}
+        </button>
+      </div>
+      <Listy
+        height={320}
+        itemHeight={32}
+        items={items}
+        virtual={virtual}
+        direction={direction}
+        rowKey="id"
+        sticky
+        group={{
+          key: (item) => item.groupIndex,
+          title: (groupKey) => (
+            <div
+              style={{
+                height: 40,
+                lineHeight: '40px',
+                padding: '0 12px',
+                fontWeight: 600,
+                background: '#f5f5f5',
+              }}
+            >
+              {rtl ? `مجموعة ${groupKey}` : `Group ${groupKey}`}
+            </div>
+          ),
+        }}
+        itemRender={(item) => (
+          <div style={itemStyle}>
+            {rtl ? `العنصر ${item.index}` : `Item ${item.index}`}
+          </div>
+        )}
+      />
+    </div>
+  );
+};

src/List.tsx

@@ -50,6 +50,7 @@ export interface ListyProps<T, K extends React.Key = React.Key> {
   height?: number;
   group?: Group<T, K>;
   virtual?: boolean;
+  direction?: 'ltr' | 'rtl';
   prefixCls?: string;
   rowKey: RowKey<T>;
   classNames?: ListyClassNames;
@@ -64,6 +65,7 @@ export interface ListComponentProps<T, K extends React.Key = React.Key> {
   itemHeight?: number;
   height?: number;
   group?: Group<T, K>;
+  direction?: 'ltr' | 'rtl';
   prefixCls: string;
   rowKey: RowKey<T>;
   classNames?: ListyClassNames;

src/RawList/index.tsx

@@ -24,6 +24,7 @@ function RawList<T, K extends React.Key = React.Key>(
     prefixCls,
     rowKey,
     sticky,
+    direction,
     classNames,
     styles,
   } = props;
@@ -118,7 +119,12 @@ function RawList<T, K extends React.Key = React.Key>(
   return (
     <div
       ref={holderRef}
-      className={clsx(prefixCls, classNames?.root)}
+      className={clsx(
+        prefixCls,
+        { [`${prefixCls}-rtl`]: direction === 'rtl' },
+        classNames?.root,
+      )}
+      dir={direction}
       style={{
         maxHeight: height,
         overflowY: height === undefined ? undefined : 'auto',

src/VirtualList/index.tsx

@@ -34,6 +34,7 @@ function VirtualList<T, K extends React.Key = React.Key>(
     prefixCls,
     rowKey,
     sticky,
+    direction,
     classNames,
     styles,
   } = props;
@@ -170,6 +171,7 @@ function VirtualList<T, K extends React.Key = React.Key>(
     <RcVirtualList
       ref={listRef}
       data={rows}
+      direction={direction}
       fullHeight={false}
       height={height}
       itemHeight={itemHeight}

tests/listy.behavior.test.tsx

@@ -500,4 +500,19 @@ describe('Listy behaviors', () => {
       }),
     ).toBe(29);
   });
+
+  it('forwards direction to the virtual list', () => {
+    renderList({ direction: 'rtl' });
+
+    expect(MockedVirtualList.__getLastProps().direction).toBe('rtl');
+  });
+
+  it('applies dir and rtl class on the raw list', () => {
+    const { container } = renderList({ virtual: false, direction: 'rtl' });
+
+    const holder = container.querySelector('.rc-listy') as HTMLDivElement;
+
+    expect(holder).toHaveClass('rc-listy-rtl');
+    expect(holder).toHaveAttribute('dir', 'rtl');
+  });
 });