@xsolla/xui-list 0.99.0 → 0.100.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +210 -17
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -1,43 +1,236 @@
|
|
|
1
|
-
|
|
1
|
+
---
|
|
2
|
+
title: List
|
|
3
|
+
subtitle: A semantic list container component.
|
|
4
|
+
description: A cross-platform React list component with title sections, hoverable rows, and keyboard navigation.
|
|
5
|
+
---
|
|
2
6
|
|
|
3
|
-
|
|
7
|
+
# List
|
|
8
|
+
|
|
9
|
+
A cross-platform React list component that provides semantic list structure with optional title sections and interactive rows. Supports hover states and keyboard navigation.
|
|
4
10
|
|
|
5
11
|
## Installation
|
|
6
12
|
|
|
7
13
|
```bash
|
|
14
|
+
npm install @xsolla/xui-list
|
|
15
|
+
# or
|
|
8
16
|
yarn add @xsolla/xui-list
|
|
9
17
|
```
|
|
10
18
|
|
|
11
|
-
##
|
|
19
|
+
## Demo
|
|
20
|
+
|
|
21
|
+
### Basic List
|
|
12
22
|
|
|
13
23
|
```tsx
|
|
24
|
+
import * as React from 'react';
|
|
14
25
|
import { List } from '@xsolla/xui-list';
|
|
15
26
|
|
|
16
|
-
function
|
|
27
|
+
export default function BasicList() {
|
|
17
28
|
return (
|
|
18
29
|
<List>
|
|
19
|
-
<List.
|
|
20
|
-
<List.Row hoverable onClick={() => console.log('pressed')}>
|
|
21
|
-
Item 1
|
|
22
|
-
</List.Row>
|
|
30
|
+
<List.Row>Item 1</List.Row>
|
|
23
31
|
<List.Row>Item 2</List.Row>
|
|
32
|
+
<List.Row>Item 3</List.Row>
|
|
33
|
+
</List>
|
|
34
|
+
);
|
|
35
|
+
}
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
### With Title Sections
|
|
39
|
+
|
|
40
|
+
```tsx
|
|
41
|
+
import * as React from 'react';
|
|
42
|
+
import { List } from '@xsolla/xui-list';
|
|
43
|
+
|
|
44
|
+
export default function SectionedList() {
|
|
45
|
+
return (
|
|
46
|
+
<List>
|
|
47
|
+
<List.Title>Fruits</List.Title>
|
|
48
|
+
<List.Row>Apple</List.Row>
|
|
49
|
+
<List.Row>Banana</List.Row>
|
|
50
|
+
<List.Row>Cherry</List.Row>
|
|
51
|
+
<List.Title>Vegetables</List.Title>
|
|
52
|
+
<List.Row>Carrot</List.Row>
|
|
53
|
+
<List.Row>Broccoli</List.Row>
|
|
54
|
+
</List>
|
|
55
|
+
);
|
|
56
|
+
}
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
### Hoverable Rows
|
|
60
|
+
|
|
61
|
+
```tsx
|
|
62
|
+
import * as React from 'react';
|
|
63
|
+
import { List } from '@xsolla/xui-list';
|
|
64
|
+
|
|
65
|
+
export default function HoverableList() {
|
|
66
|
+
return (
|
|
67
|
+
<List>
|
|
68
|
+
<List.Row hoverable>Hoverable row 1</List.Row>
|
|
69
|
+
<List.Row hoverable>Hoverable row 2</List.Row>
|
|
70
|
+
<List.Row hoverable>Hoverable row 3</List.Row>
|
|
71
|
+
</List>
|
|
72
|
+
);
|
|
73
|
+
}
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
### Clickable Rows
|
|
77
|
+
|
|
78
|
+
```tsx
|
|
79
|
+
import * as React from 'react';
|
|
80
|
+
import { List } from '@xsolla/xui-list';
|
|
81
|
+
|
|
82
|
+
export default function ClickableList() {
|
|
83
|
+
const handleClick = (item: string) => {
|
|
84
|
+
console.log('Clicked:', item);
|
|
85
|
+
};
|
|
86
|
+
|
|
87
|
+
return (
|
|
88
|
+
<List>
|
|
89
|
+
<List.Row onClick={() => handleClick('Item 1')}>Click me - Item 1</List.Row>
|
|
90
|
+
<List.Row onClick={() => handleClick('Item 2')}>Click me - Item 2</List.Row>
|
|
91
|
+
<List.Row onClick={() => handleClick('Item 3')}>Click me - Item 3</List.Row>
|
|
92
|
+
</List>
|
|
93
|
+
);
|
|
94
|
+
}
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
## Anatomy
|
|
98
|
+
|
|
99
|
+
```jsx
|
|
100
|
+
import { List } from '@xsolla/xui-list';
|
|
101
|
+
|
|
102
|
+
<List>
|
|
103
|
+
<List.Title>Section Header</List.Title> {/* Section title */}
|
|
104
|
+
<List.Row {/* List item */}
|
|
105
|
+
hoverable={false} // Show hover background
|
|
106
|
+
onClick={handleClick} // Click handler
|
|
107
|
+
onPress={handlePress} // Press handler (RN)
|
|
108
|
+
>
|
|
109
|
+
Row Content
|
|
110
|
+
</List.Row>
|
|
111
|
+
</List>
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
## Examples
|
|
115
|
+
|
|
116
|
+
### Settings Menu
|
|
117
|
+
|
|
118
|
+
```tsx
|
|
119
|
+
import * as React from 'react';
|
|
120
|
+
import { List } from '@xsolla/xui-list';
|
|
121
|
+
import { Cell } from '@xsolla/xui-cell';
|
|
122
|
+
import { User, Bell } from '@xsolla/xui-icons';
|
|
123
|
+
import { ChevronRight, Shield } from '@xsolla/xui-icons-base';
|
|
124
|
+
|
|
125
|
+
export default function SettingsMenu() {
|
|
126
|
+
return (
|
|
127
|
+
<List>
|
|
128
|
+
<List.Title>Account</List.Title>
|
|
129
|
+
<List.Row onClick={() => console.log('Profile')}>
|
|
130
|
+
<Cell>
|
|
131
|
+
<Cell.Slot><User size={20} /></Cell.Slot>
|
|
132
|
+
<Cell.Content>Profile</Cell.Content>
|
|
133
|
+
<Cell.Slot><ChevronRight size={16} /></Cell.Slot>
|
|
134
|
+
</Cell>
|
|
135
|
+
</List.Row>
|
|
136
|
+
<List.Row onClick={() => console.log('Security')}>
|
|
137
|
+
<Cell>
|
|
138
|
+
<Cell.Slot><Shield size={20} /></Cell.Slot>
|
|
139
|
+
<Cell.Content>Security</Cell.Content>
|
|
140
|
+
<Cell.Slot><ChevronRight size={16} /></Cell.Slot>
|
|
141
|
+
</Cell>
|
|
142
|
+
</List.Row>
|
|
143
|
+
<List.Title>Preferences</List.Title>
|
|
144
|
+
<List.Row onClick={() => console.log('Notifications')}>
|
|
145
|
+
<Cell>
|
|
146
|
+
<Cell.Slot><Bell size={20} /></Cell.Slot>
|
|
147
|
+
<Cell.Content>Notifications</Cell.Content>
|
|
148
|
+
<Cell.Slot><ChevronRight size={16} /></Cell.Slot>
|
|
149
|
+
</Cell>
|
|
150
|
+
</List.Row>
|
|
151
|
+
</List>
|
|
152
|
+
);
|
|
153
|
+
}
|
|
154
|
+
```
|
|
155
|
+
|
|
156
|
+
### Selection List
|
|
157
|
+
|
|
158
|
+
```tsx
|
|
159
|
+
import * as React from 'react';
|
|
160
|
+
import { List } from '@xsolla/xui-list';
|
|
161
|
+
import { Radio } from '@xsolla/xui-radio';
|
|
162
|
+
|
|
163
|
+
export default function SelectionList() {
|
|
164
|
+
const [selected, setSelected] = React.useState('option1');
|
|
165
|
+
|
|
166
|
+
return (
|
|
167
|
+
<List>
|
|
168
|
+
<List.Row onClick={() => setSelected('option1')}>
|
|
169
|
+
<Radio checked={selected === 'option1'} />
|
|
170
|
+
<span style={{ marginLeft: 12 }}>Option 1</span>
|
|
171
|
+
</List.Row>
|
|
172
|
+
<List.Row onClick={() => setSelected('option2')}>
|
|
173
|
+
<Radio checked={selected === 'option2'} />
|
|
174
|
+
<span style={{ marginLeft: 12 }}>Option 2</span>
|
|
175
|
+
</List.Row>
|
|
176
|
+
<List.Row onClick={() => setSelected('option3')}>
|
|
177
|
+
<Radio checked={selected === 'option3'} />
|
|
178
|
+
<span style={{ marginLeft: 12 }}>Option 3</span>
|
|
179
|
+
</List.Row>
|
|
24
180
|
</List>
|
|
25
181
|
);
|
|
26
182
|
}
|
|
27
183
|
```
|
|
28
184
|
|
|
29
|
-
##
|
|
185
|
+
## API Reference
|
|
30
186
|
|
|
31
|
-
|
|
32
|
-
- **List.Row** — Individual row; interactive when `onClick` or `hoverable` is set
|
|
33
|
-
- **List.Title** — Section header rendered on a secondary background
|
|
187
|
+
### List
|
|
34
188
|
|
|
35
|
-
|
|
189
|
+
Container component for list items.
|
|
190
|
+
|
|
191
|
+
**List Props:**
|
|
192
|
+
|
|
193
|
+
| Prop | Type | Default | Description |
|
|
194
|
+
| :--- | :--- | :------ | :---------- |
|
|
195
|
+
| children | `ReactNode` | - | List rows and titles. |
|
|
196
|
+
|
|
197
|
+
---
|
|
36
198
|
|
|
37
199
|
### List.Row
|
|
38
200
|
|
|
201
|
+
Individual list item component.
|
|
202
|
+
|
|
203
|
+
**List.Row Props:**
|
|
204
|
+
|
|
39
205
|
| Prop | Type | Default | Description |
|
|
40
|
-
|
|
41
|
-
|
|
|
42
|
-
|
|
|
43
|
-
|
|
|
206
|
+
| :--- | :--- | :------ | :---------- |
|
|
207
|
+
| children | `ReactNode` | - | Row content. |
|
|
208
|
+
| hoverable | `boolean` | `false` | Show hover background effect. |
|
|
209
|
+
| onClick | `() => void` | - | Click handler (web). |
|
|
210
|
+
| onPress | `() => void` | - | Press handler (React Native). |
|
|
211
|
+
|
|
212
|
+
---
|
|
213
|
+
|
|
214
|
+
### List.Title
|
|
215
|
+
|
|
216
|
+
Section title component.
|
|
217
|
+
|
|
218
|
+
**List.Title Props:**
|
|
219
|
+
|
|
220
|
+
| Prop | Type | Default | Description |
|
|
221
|
+
| :--- | :--- | :------ | :---------- |
|
|
222
|
+
| children | `ReactNode` | - | Title text. |
|
|
223
|
+
|
|
224
|
+
## Keyboard Navigation
|
|
225
|
+
|
|
226
|
+
| Key | Action |
|
|
227
|
+
| :-- | :----- |
|
|
228
|
+
| Enter | Activate row (when onClick/onPress set) |
|
|
229
|
+
| Space | Activate row (when onClick/onPress set) |
|
|
230
|
+
|
|
231
|
+
## Accessibility
|
|
232
|
+
|
|
233
|
+
- List uses `role="list"` semantically
|
|
234
|
+
- Rows use `role="listitem"`
|
|
235
|
+
- Interactive rows are focusable with `tabIndex={0}`
|
|
236
|
+
- Keyboard navigation with Enter/Space to activate
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xsolla/xui-list",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.100.0",
|
|
4
4
|
"main": "./web/index.js",
|
|
5
5
|
"module": "./web/index.mjs",
|
|
6
6
|
"types": "./web/index.d.ts",
|
|
@@ -10,9 +10,9 @@
|
|
|
10
10
|
"build:native": "PLATFORM=native tsup"
|
|
11
11
|
},
|
|
12
12
|
"dependencies": {
|
|
13
|
-
"@xsolla/xui-avatar": "0.
|
|
14
|
-
"@xsolla/xui-core": "0.
|
|
15
|
-
"@xsolla/xui-primitives-core": "0.
|
|
13
|
+
"@xsolla/xui-avatar": "0.100.0",
|
|
14
|
+
"@xsolla/xui-core": "0.100.0",
|
|
15
|
+
"@xsolla/xui-primitives-core": "0.100.0"
|
|
16
16
|
},
|
|
17
17
|
"peerDependencies": {
|
|
18
18
|
"react": ">=16.8.0",
|