fix: listvirtual last data if has more data request again
This commit is contained in:
@@ -1,16 +1,219 @@
|
||||
# React + Vite
|
||||
# ListVirtual
|
||||
|
||||
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||
A searchable dropdown component with server-side filtering, infinite scrolling, and support for both single and multiple selection.
|
||||
|
||||
Currently, two official plugins are available:
|
||||
## Features
|
||||
|
||||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
|
||||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
|
||||
* Server-side search
|
||||
* Infinite scrolling
|
||||
* Single select mode
|
||||
* Multiple select mode
|
||||
* Custom request headers via `ApiProvider`
|
||||
* Default value support
|
||||
* Material UI integration
|
||||
|
||||
## React Compiler
|
||||
---
|
||||
|
||||
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
|
||||
## Installation
|
||||
|
||||
## Expanding the ESLint configuration
|
||||
```bash
|
||||
npm install your-library-name
|
||||
```
|
||||
|
||||
If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
|
||||
## 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.
|
||||
|
||||
Reference in New Issue
Block a user