https://github.com/opuscapita/react-async-select
Async dropdown component with advanced search modal
https://github.com/opuscapita/react-async-select
Last synced: 7 months ago
JSON representation
Async dropdown component with advanced search modal
- Host: GitHub
- URL: https://github.com/opuscapita/react-async-select
- Owner: OpusCapita
- License: mit
- Created: 2018-10-30T11:29:00.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-09T07:08:54.000Z (almost 3 years ago)
- Last Synced: 2025-03-26T08:07:45.211Z (7 months ago)
- Language: JavaScript
- Size: 11.8 MB
- Stars: 6
- Watchers: 6
- Forks: 2
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# react-async-select
### Description
This component is a combination of a combobox with asynchronous fetching of results and a modal search dialog for more filtering possibilities.
### Installation
```
npm install @opuscapita/react-async-select
```
### Demo
View the [DEMO](https://opuscapita.github.io/react-async-select)
### Migrate guide
View the [Migrate guide](MIGRATEGUIDE.md) between major versions
### Builds
#### UMD
The default build with compiled styles in the .js file. Also minified version available in the lib/umd directory.
#### CommonJS/ES Module
You need to configure your module loader to use `cjs` or `es` fields of the package.json to use these module types.
Also you need to configure sass loader, since all the styles are in sass format.
* With webpack use [resolve.mainFields](https://webpack.js.org/configuration/resolve/#resolve-mainfields) to configure the module type.
* Add [SASS loader](https://github.com/webpack-contrib/sass-loader) to support importing of SASS styles.
### API
| Prop name | Type | Default | Description |
| ---------------------------------- | -------- | -------------------------------------------------- | -------------------------------------------------- |
| value | any | | The initially selected value |
| onSelect | function | () => {} | Selection callback function |
| loadOptions | function | () => Promise.resolve([]) | Function for fetching options for the combobox |
| isDisabled | boolean | false | Disables the component from user interaction |
| localizationTexts | object | | A dictionary with translated texts as values |
| localizationTexts.["searchBy"] | string | | UI text prefix for the first search field |
| localizationTexts.["by"] | string | | UI text prefix for other search fields |
| localizationTexts.["close"] | string | | UI text for the Close-button |
| localizationTexts.["select"] | string | | UI text for the Select-button |
| localizationTexts.["field.XYZ"] | string | | Label for the search field with name "XYZ" |
| localizationTexts.["column.XYZ"] | string | | Header for the column with name "XYZ" |
| localizationTexts.["loading"] | string | 'Loading...' | Loading placeholder text |
| localizationTexts.["noItems"] | string | '--' | Empty result set text for the dropdown |
| localizationTexts.["noData"] | string | 'No rows found' | Empty result set text for the modal |
| localizationTexts.["previous"] | string | 'Previous' | Paging text |
| localizationTexts.["next"] | string | 'Next' | Paging text |
| localizationTexts.["page"] | string | 'Page' | Paging text |
| localizationTexts.["of"] | string | 'of' | Paging text |
| localizationTexts.["rows"] | string | 'rows' | Paging text |
| localizationTexts.["pageJump"] | string | 'jump to page' | Paging text |
| localizationTexts.["rowsSelector"] | string | 'rows per page' | Paging text |
| modal | object | | Modal dialog specific props |
| modal.title | string | '' | Localized title of the modal |
| modal.fields | [string] | [] | List of fields to show as columns |
| modal.loadOptions | function | () => Promise.resolve({ data: [], totalCount: 0 }) | Function for fetching entries to the table |
| modal.components | object | {} | A collection of custom components |
| modal.components.LeftPanel | element | null | Custom component for left side panel |
| modal.components.RightPanel | element | null | Custom component for right side panel |
| setRef | function | () => {} | Allows access to select component ref from outside |
| onKeyDown | function | () => {} | Allows handling of keydown events from outside |
### Code example
```jsx
import React, { useState } from 'react';
import { Dropdown } from '@opuscapita/react-component-example';
export default class ReactView extends React.Component {
const [value, setValue] = useState(null);
render() {
return (
Promise.resolve([
{ label: 'a_DisplayValue', value: 'a' }
{ label: 'b_DisplayValue', value: 'b' }
])
}
onSelect={value => setValue(value)}
modal={{
title: 'Search entries',
fields: [
'fieldName1',
'fieldName2',
],
loadOptions: () => Promise.resolve({
data: [
{
fieldName1: 'a_DisplayValue',
fieldName2: 'a_AnotherDisplayValue'
value: 'a'
},
{
fieldName1: 'b_DisplayValue',
fieldName2: 'b_AnotherDisplayValue'
value: 'b'
},
],
totalCount: 0
}),
components: {
LeftPanel: ({ selectedRow }) => (
),
RightPanel: ({ selectedRow }) => (),
}
}}
/>
);
}
}
```