BusinessSelect

In forms, we often use dropdown components that fetch options via API (referred to as business selects). The traditional approach involves making API requests directly in the page and processing option data. However, when a page has multiple business dropdowns, this leads to the following issues:

1. Too much repetitive code (requests, processing, assignment)

2. Some dropdowns require scroll pagination, making unified handling difficult

3. Poor cross-page reusability

Can we manage these components centrally? Simply put, merge all business selects into one component, differentiated by type, to achieve:

• Unified management entry

• Built-in pagination support

• Cross-page reusability

Here's the component initialization example:

import { BusinessSelectBuilder } from 'react-admin-kit';

// Define type for better code hints during usage
type SelectType = 'color' | 'brand';

const BusinessSelect = BusinessSelectBuilder<SelectType>({
  apis: [
    {
      type: 'color',
      api: queryColorFunction,
    },
    {
      type: 'brand',
      api: queryBrandFunction,
      pagination: true,
    },
  ],
});

// Usage in page
<BusinessSelect type="color" />;
<BusinessSelect type="brand" />;

API response format must be {data: [], total: xx}. For non-paginated components, total can be omitted.

The data is an object array where the component reads name as display text and id as dropdown value by default.

Note: antd Select component uses label and value as text and dropdown value fields. This component uses name and id because these two values are more common in backend responses. You can change the value fields through the fieldNames API.

Basic Usage

BusinessSelect is a wrapper around Antd Select, so the component can accept all antd Select properties.

Color

choose a color

Brand(pagination with search)

please choose a brand

Staff

please choose

Auto cached

Dropdown data is automatically cached by default, multiple references only request the API once

Country

please choose

Country2

please choose

Country3

please choose

queryParams

Sometimes we need to pass query parameters to the API.

For example, there's a user API that distinguishes different user types based on type. Page A uses type=1, and Page B uses type=2. In this case, you can use the queryParams property.

// Page A
<BusinessSelect type="user" queryParams={{ type: 1 }} />

// Page B
<BusinessSelect type="user" queryParams={{ type: 2 }} />

When queryParams is passed, the dropdown will not cache data

All Users

please choose

User A

please choose

User B

please choose

Paginated dropdown and search

When dropdown data is very large, set pagination to true in ApiType, and the component will enable pagination mode, supporting scroll-to-bottom loading of the next page and remote search.

The component will pass current and searchValue as query parameters to the API for use.

// ApiType
{
  api: ({ current, searchValue }) => request();
}

Pagination and Search

please choose or search

Clear cache

Use the clearSelectCache(type: string) method to clear cache. If type is not passed, all type caches are cleared.

Define dropdown value fields

The dropdown's label default value is the name field, and the value default is id. If you want to change the value fields, you can use the fieldNames property.

<BusinessSelect
  type="user"
  fieldNames={{ value: 'userId', label: 'userName' }}
/>

Besides setting it on BusinessSelect, you can also set it on BusinessSelectBuilder:

BusinessSelectBuilder({
  apis: [
    {
      type: 'user'
      defaultProps: {
        fieldNames: {
          value: 'userId', label: 'userName'
        }
      }
    }
  ]
})

onLoad event

The onLoad event is triggered when dropdown data loading is complete. This event is very useful for certain scenarios, for example, it can be used to implement default selection of the first data item.

API

BusinessSelectBuilder

Property	Description	Type	Default
apis	define the business select	ApiType[]	[]
defaultProps	default props	SelectProps	{}

ApiType

Property	Description	Type	Default
api	api request for options data	(apiParamsType: ApiParamsType) => Promise<{ data: any; total?: number | undefined; }>	-
type	business select type	string	-
pagination	enable pagination	boolean	false
defaultProps	default props (higher priority than Builder-level settings)	SelectProps	'-'

BusinessSelect

BusinessSelect type is a combination of BusinessSelectSelfType and SelectProps.

BusinessSelectSelfType

Property	Description	Type	Default
type	business select type	string	-
queryParams	pass params to api request. see demo.	Record<string, any>	--
noCache	disable cache (higher priority)	boolean	false
onLoad	callback after options data first request	((options: any, total?: number) => void) | undefined	-
searchDebounceValue	debounce value for search when pagination enabled	number	300