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

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 to configure the module type.
• Add 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

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 (
      <Dropdown
        localizationTexts={{
          searchBy: 'Search by',
          by: 'By',
          close: 'Close',
          select: 'Select',
          "field.fieldName1": 'my field',
          "field.fieldName2": 'another field'
          "column.fieldName1": 'My field',
          "column.fieldName2": 'Another field',
          "previous": "PREV",
          "next": "NEXT",
          "loading": "LOADING",
          "noData": "NODATA",
          "page": "PAGE",
          "of": "OF",
          "rows": "ROWS",
          "pageJump": "JUMP",
          "rowsSelector": "RPP",
        }}
        isDisabled={false}
        value={value}
        loadOptions={
          () => 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 }) => (<div></div>),
            RightPanel: ({ selectedRow }) => (<div></div>),
          }
        }}
      />
    );
  }
}