220 lines
4.1 KiB
Markdown
220 lines
4.1 KiB
Markdown
# ListVirtual
|
|
|
|
A searchable dropdown component with server-side filtering, infinite scrolling, and support for both single and multiple selection.
|
|
|
|
## Features
|
|
|
|
* Server-side search
|
|
* Infinite scrolling
|
|
* Single select mode
|
|
* Multiple select mode
|
|
* Custom request headers via `ApiProvider`
|
|
* Default value support
|
|
* Material UI integration
|
|
|
|
---
|
|
|
|
## Installation
|
|
|
|
```bash
|
|
npm install your-library-name
|
|
```
|
|
|
|
## Import
|
|
|
|
```jsx
|
|
import { ApiProvider, ListVirtual } from "your-library-name";
|
|
```
|
|
|
|
---
|
|
|
|
## Setup
|
|
|
|
Wrap your application or component with `ApiProvider` to provide API headers.
|
|
|
|
```jsx
|
|
<ApiProvider
|
|
headers={{
|
|
Authorization: `Bearer ${token}`,
|
|
}}
|
|
>
|
|
<ListVirtual
|
|
id="company-select"
|
|
label="Company"
|
|
name="name"
|
|
url="/company"
|
|
/>
|
|
</ApiProvider>
|
|
```
|
|
|
|
---
|
|
|
|
## Single Selection
|
|
|
|
```jsx
|
|
const [company, setCompany] = useState(null);
|
|
|
|
<ListVirtual
|
|
id="company-select"
|
|
label="Company"
|
|
name="name"
|
|
url="/company"
|
|
getData={(row) => {
|
|
setCompany(row);
|
|
}}
|
|
/>
|
|
```
|
|
|
|
### Selected Value
|
|
|
|
```js
|
|
{
|
|
id: 123,
|
|
name: "My Company"
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## Multiple Selection
|
|
|
|
```jsx
|
|
const [companies, setCompanies] = useState([]);
|
|
|
|
<ListVirtual
|
|
id="company-select"
|
|
label="Company"
|
|
name="name"
|
|
url="/company"
|
|
multiple
|
|
getData={(rows) => {
|
|
setCompanies(rows);
|
|
}}
|
|
/>
|
|
```
|
|
|
|
### Selected Value
|
|
|
|
```js
|
|
[
|
|
{
|
|
id: 1,
|
|
name: "Company A"
|
|
},
|
|
{
|
|
id: 2,
|
|
name: "Company B"
|
|
}
|
|
]
|
|
```
|
|
|
|
---
|
|
|
|
## Using Default Value
|
|
|
|
### Single Selection
|
|
|
|
```jsx
|
|
<ListVirtual
|
|
id="company-select"
|
|
label="Company"
|
|
name="name"
|
|
url="/company"
|
|
defaultValue={{
|
|
id: 123,
|
|
name: "My Company"
|
|
}}
|
|
/>
|
|
```
|
|
|
|
### Multiple Selection
|
|
|
|
```jsx
|
|
<ListVirtual
|
|
id="company-select"
|
|
label="Company"
|
|
name="name"
|
|
url="/company"
|
|
multiple
|
|
defaultValue={[
|
|
{
|
|
id: 1,
|
|
name: "Company A"
|
|
},
|
|
{
|
|
id: 2,
|
|
name: "Company B"
|
|
}
|
|
]}
|
|
/>
|
|
```
|
|
|
|
---
|
|
|
|
## Props
|
|
|
|
| Prop | Type | Default | Description |
|
|
| ------------ | -------------- | --------- | ----------------------------------------- |
|
|
| id | string | - | Unique component identifier |
|
|
| label | string | - | TextField label |
|
|
| name | string | - | Property name used for display |
|
|
| url | string | - | API endpoint used to fetch data |
|
|
| getData | function | undefined | Callback triggered when selection changes |
|
|
| defaultValue | object | array | undefined | Initial selected value |
|
|
| multiple | boolean | false | Enable multiple selection mode |
|
|
| disabled | boolean | false | Disable the component |
|
|
| required | boolean | false | Mark field as required |
|
|
| error | boolean | false | Error state |
|
|
| helperText | string | undefined | Helper text displayed below the field |
|
|
| size | string | "medium" | TextField size (`small` or `medium`) |
|
|
| lengthData | number | 100 | Number of records fetched per request |
|
|
| filter | array | [] | Additional API filters |
|
|
| isApiGo | boolean | false | Use Go API request mode |
|
|
|
|
---
|
|
|
|
## Custom Filters
|
|
|
|
```jsx
|
|
<ListVirtual
|
|
id="company-select"
|
|
label="Company"
|
|
name="name"
|
|
url="/company"
|
|
filter={[
|
|
{
|
|
name: "status",
|
|
value: 1,
|
|
logic_operator: "="
|
|
}
|
|
]}
|
|
/>
|
|
```
|
|
|
|
---
|
|
|
|
## API Response Format
|
|
|
|
The component expects the API response to have the following structure:
|
|
|
|
```json
|
|
{
|
|
"data": [
|
|
{
|
|
"id": 1,
|
|
"name": "Company A"
|
|
}
|
|
],
|
|
"totalRecord": 100
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## Notes
|
|
|
|
* The property specified in the `name` prop is used as the displayed label.
|
|
* Infinite scrolling automatically loads additional records when the user reaches the bottom of the list.
|
|
* In multiple mode, the `getData` callback returns an array of selected objects.
|
|
* In single mode, the `getData` callback returns a single selected object.
|