Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@sephirothmk/reactstrap-validation-select-typed

Availity80MIT5.3.3TypeScript support: included

Wrapper for react-select to work with availity-reactstrap-validation

availity, reactstrap, validation, select

readme

@availity/reactstrap-validation-select

Wrapper for react-select (with async pagination) to work with availity-reactstrap-validation.

Version

Installation

npx install-peerdeps @availity/reactstrap-validation-select --save

Usage

import React from 'react';
import { Label } from 'reactstrap';
import { AvForm, AvGroup, AvFeedback } from 'availity-reactstrap-validation';
import AvSelect, { AvSelectField } from '@availity/reactstrap-validation-select';
import '@availity/reactstrap-validation-select/styles.scss';
// ...
const options = [
    {label: "Option 1", value: 1},
    {label: "Option 2", value: 2},
    {label: "Option 3", value: 3},
];
// ...
<AvForm>
    <AvGroup>
        <Label for="justTheInput">My Input Label</Label>
        <AvSelect
            name="justTheInput"
            options={options}
            required
        />
        <AvFeedback>Some error message</AvFeedback>
    </AvGroup>

    <AvSelectField
        name="fieldWithLabel"
        label="Label Made For Me"
        options={options}
        required
    />
</AvForm>;

Note: the input callbacks (e.g. onChange) do not get called with an event like other reactstrap-validation component; just the value of the field. This is because the underlying react-select does not return the event in it's callbacks.

AvSelect (Default export)

This is the underlying select without the AvGroup, Label or AvFeedback

AvSelect Props

Please refer to react-select with async pagination's props and availity-reactstrap-validation's input validation props. This component just combines those.

  • raw: Boolean. Optional. Default: false. If true, the entire object of the selected value will be returned as the value instead of the value for the valueKey within the object.
  • valueKey: String. Optional. The key of the value you want returned when selected. Default: value
  • labelKey: String. Optional. The key for the label you want to appear in the dropdown for the user to see. Default label
  • autofill: Boolean or Object. Optional. Default: false. If true, when the value of the dropdown changes, if the isMulti prop is false and the new value of the dropdown is an object, all fields on the form corresponding to the new value are auto-filled. In order for a field to be auto-filled, the name property on the field must match the key inside the new value.

For example, if the new value is { "payer": "Availity" }, in order for the payer input in the form to be auto-filled to "Availity", the name prop on the input must be "payer".

If autofill is an object, when the value of the dropdown changes, if the isMulti prop is false and the new value of the dropdown is an object, all fields on the form corresponding to the keys in the autofill prop will be auto-filled.

When autofill is an object, the values in the object can be a string or a function. When a string, the key in the autofill prop gets auto-filled to that path on the selected option. When a function, it gets called with the selected option, and the key in the autofill prop gets auto-filled to the return value of the function.

For example, if the new value is { "payer": { "name": "Availity", "id": "1" } }, in order for the "payerName", "payerId", and "payerNameAndId" inputs to be auto-filled to "Availity", "1", and "1 - Availity" respectively, the autofill prop should be:

{
  payerName: 'payer.name',
  payerId: 'payer.id',
  payerNameAndId: opt => `${opt.payer.id} - ${opt.payer.name}`,
}

AvSelect Example usage

import React from 'react';
import { Label } from 'reactstrap';
import { AvForm, AvGroup, AvFeedback } from 'availity-reactstrap-validation';
import AvSelect from '@availity/reactstrap-validation-select';
import '@availity/reactstrap-validation-select/styles.scss';
// ...
const options = [
    {label: "Option 1", value: 1},
    {label: "Option 2", value: 2},
    {label: "Option 3", value: 3},
];
// ...
<AvForm>
    <AvGroup>
        <Label for="justTheInput">My Input Label</Label>
        <AvSelect
            name="justTheInput"
            options={options}
            required
        />
        <AvFeedback>Some error message</AvFeedback>
    </AvGroup>
</AvForm>;

AvSelectField

Please refer to react-select with async pagination's props and availity-reactstrap-validation's field validation props. This component just combines those.

AvSelectField Props

Please refer to react-select with async pagination's props and availity-reactstrap-validation's input validation props. This component just combines those.

  • raw: Boolean. Optional. Default: false. If true, the entire object of the selected value will be returned as the value instead of the value for the valueKey within the object.
  • valueKey: String. Optional. The key of the value you want returned when selected. Default: value
  • labelKey: String. Optional. The key for the label you want to appear in the dropdown for the user to see. Default label
  • groupClass: String. Optional. ClassName to add to the wrapping AvGroup
  • labelClass: String. Optional. ClassName to add to the label
  • feedbackClass: String. Optional. ClassName to add to the AvFeedback
  • creatable: boolean. Optional. Whether or not to allow new items to be created if not found.
  • autofill: Boolean or Object. Optional. Default: false. If true, when the value of the dropdown changes, if the isMulti prop is false and the new value of the dropdown is an object, all fields on the form corresponding to the new value are auto-filled. In order for a field to be auto-filled, the name property on the field must match the key inside the new value.

For example, if the new value is { "payer": "Availity" }, in order for the payer input in the form to be auto-filled to "Availity", the name prop on the input must be "payer".

If autofill is an object, when the value of the dropdown changes, if the isMulti prop is false and the new value of the dropdown is an object, all fields on the form corresponding to the keys in the autofill prop will be auto-filled.

When autofill is an object, the values in the object can be a string or a function. When a string, the key in the autofill prop gets auto-filled to that path on the selected option. When a function, it gets called with the selected option, and the key in the autofill prop gets auto-filled to the return value of the function.

For example, if the new value is { "payer": { "name": "Availity", "id": "1" } }, in order for the "payerName", "payerId", and "payerNameAndId" inputs to be auto-filled to "Availity", "1", and "1 - Availity" respectively, the autofill prop should be:

{
  payerName: 'payer.name',
  payerId: 'payer.id',
  payerNameAndId: opt => `${opt.payer.id} - ${opt.payer.name}`,
}

AvSelectField Example usage

import React from 'react';
import { AvSelectField } from '@availity/reactstrap-validation-select';
import '@availity/reactstrap-validation-select/styles.scss';
// ...
const options = [
    {label: "Option 1", value: 1},
    {label: "Option 2", value: 2},
    {label: "Option 3", value: 3},
];
// ...
<AvForm>
    <AvSelectField
        name="fieldWithLabel"
        label="Label Made For Me"
        options={options}
        required
    />
</AvForm>;

AvResourceSelect

A select list which automatically loads and pages though a resource when the user scrolls down.

The search field will fire a request after the debounce timer (see debounceTimeout prop) using the given resource prop with the payload:

{
   limit: "50", //limit quantity can be changed with `itemsPerPage` prop
   offset: "0",
   q: "user typed search text after debounce"
}

AvResourceSelect Props

Please refer to react-select-async-paginate's props and availity-reactstrap-validation's input validation props. This component just combines those.

  • raw: Boolean. Optional. Default: true. If true, the entire object of the selected value will be returned as the value instead of the value for the valueKey within the object.
  • valueKey: String. Optional. The key of the value you want returned when selected. Default: value
  • labelKey: String. Optional. The key for the label you want to appear in the dropdown for the user to see. Default label
  • label: String. Optional. If provided, the rendered component will mimic AvSelectField instead of AvSelect (it will create a group with a label and feedback).
  • requestConfig: Object. Optional. Configuration object which will be used with the query method on the resource. Useful for defining headers to be sent with the request.
  • parameters: Object. Optional. Object which will be used to create querystring parameters in the request.
  • customerId: String. Optional. The value of the customer ID which will be sent in the parameters. Useful for restricting the loaded options to be related to the organization the user has in context.
  • requiredParams: Array of strings. Optional. If present, the network request will not be made until all of the required parameters specified in the array have a truthy value.
  • cacheUniq: Any. Optional. When this prop changes, all cache options are cleared. (see react-select-async-paginate)
  • watchParams: Array of strings. Optional. If present, the options will reset when any of the parameters specified in the array change value. This is useful for when a customerId changes and you need to load a new list of options for the user to choose from. Used to derive cacheUniq if cacheUniq prop is not provided.
  • resource: Availity API resource (see @availity/api-core and @availity/api-axios). Required.
  • getResult: String or Function. Optional. When a function, the function will be called with the API response body/payload and is expected to return an array containing the list of items for the page. When a string, the string is expected to be a simple key used to get the value from the response ("simple" meaning not handling dot-notation for nested objects, if you need that provide a function.)
  • debounceTimeout: Number. default: 350. The amount of time (in milliseconds) to wait after the user has stopped typing before making the network request (debounced input).
  • delay: Number. default: 350. Set to debounceTimeout if debounceTimeout is not provided. (see react-select-async-paginate)
  • itemsPerPage: Number. Optional. Default: 50. The number of items to fetched be displayed per page when the usr scrolls down.
  • onPageChange: Function. Optional. A callback function to inform you that the user has scrolled to the bottom of the list and more items are loaded. The current input value and the page the user wants to go to will be provided as arguments to the callback function.
  • hasMore: Boolean or Function. Optional. If true, AvResourceSelect will attempt to retrieve the next page of results. response.data from axios response is passed as the only argument to hasMore when hasMore is a function. Defaults to: ({ totalCount, limit, offset }) => totalCount > offset + limit; for non-GraphQL apis. Defaults to (data) => data.data[${this.props.graphqlConfig.type}Pagination].pageInfo.hasNextPage for GraphQL apis.
  • additional: Object. Optional. Additional properties to pass to AsyncPaginate (see react-select-async-paginate).
  • graphqlConfig: Object{ type, query }. Optional. type String. is the type of asset returned. query String. is the GraphQL query to use in the request.
  • creatable: boolean. Optional. Whether or not to allow new items to be created if not found.
  • minCharsToSearch: Number. Optional. The minimum number of characters the user must input before AvResourceSelect makes the network request. If the user has not inputted any characters, the network request will still be made. Useful for relieving pressure on the api the resource is calling.
  • waitUntilFocused: Boolean. Optional. When true, the network request is not made until the dropdown has been focused.
  • autofill: Boolean or Object. Optional. Default: false. If true, when the value of the dropdown changes, if the isMulti prop is false and the new value of the dropdown is an object, all fields on the form corresponding to the new value are auto-filled. In order for a field to be auto-filled, the name property on the field must match the key inside the new value.

For example, if the new value is { "payer": "Availity" }, in order for the payer input in the form to be auto-filled to "Availity", the name prop on the input must be "payer".

If autofill is an object, when the value of the dropdown changes, if the isMulti prop is false and the new value of the dropdown is an object, all fields on the form corresponding to the keys in the autofill prop will be auto-filled.

When autofill is an object, the values in the object can be a string or a function. When a string, the key in the autofill prop gets auto-filled to that path on the selected option. When a function, it gets called with the selected option, and the key in the autofill prop gets auto-filled to the return value of the function.

For example, if the new value is { "payer": { "name": "Availity", "id": "1" } }, in order for the "payerName", "payerId", and "payerNameAndId" inputs to be auto-filled to "Availity", "1", and "1 - Availity" respectively, the autofill prop should be:

{
  payerName: 'payer.name',
  payerId: 'payer.id',
  payerNameAndId: opt => `${opt.payer.id} - ${opt.payer.name}`,
}

AvResourceSelect Example usage

import React from 'react';
import AvApi from '@availity/api-axios';
import { AvResourceSelect } from '@availity/reactstrap-validation-select';
import '@availity/reactstrap-validation-select/styles.scss';
// ...
const avCustomResource = new AvApi({ name: 'my-custom-resource' });
// ...
<AvForm>
    <AvResourceSelect
        name="fieldWithLabel"
        label="Label Made For Me"
        resource={avCustomResource}
        required
    />
</AvForm>;

Pre-made Resource Selects

The follow components exist and can be imported by name from @availity/reactstrap-validation-select/resources

  • AvProviderSelect
  • AvOrganizationSelect
  • AvRegionSelect
  • AvPermissionSelect
  • AvNavigationSelect
  • AvUserSelect

These components are AvResourceSelect with pre-configured resource, valueKey, and labelKey to make it easy to use. All of the props for AvResourceSelect can be provided to override the defaults of these pre-made components. For some of the component you will want to provide the customerId prop.

Pre-made Resource Selects Example Usage
import React from 'react';
import AvApi from '@availity/api-axios';
import {
  AvProviderSelect,
  AvOrganizationSelect,
  AvRegionSelect,
  AvPermissionSelect,
  AvNavigationSelect,
  AvUserSelect,
  AvPatientSelect,
} from '@availity/reactstrap-validation-select/resources';
import '@availity/reactstrap-validation-select/styles.scss';
// ...
<AvForm>
    <AvRegionSelect
        name="region"
        label="Select a Region"
        required
    />
    <AvOrganizationSelect
        name="organization"
        label="Select a Organization"
        required
    />
    <AvProviderSelect
        name="provider"
        customerId="1234"
        requiredParams={['customerId']}
        watchParams={['customerId']}
        label="Select a provider"
        customerId={customerId}
        required
    />
    <AvPermissionSelect
        name="permissions"
        label="Select a provider"
        customerId={customerId}
        isMulti
        required
    />
    <AvNavigationSelect
        name="payerSpace"
        label="Select a Payer Space"
        customerId={customerId}
        required
    />
    <AvUserSelect
        name="user"
        label="Select a User"
        customerId={customerId}
    />
    <AvPatientSelect
        name="patient"
        label="Select a Patient"
        parameters={{
          customerId,
        }}
    />
</AvForm>;

changelog

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

5.3.0 (2019-11-21)

Features

  • reactstrap-validation-select: add waitUntilFocused prop (78fb844)

5.2.0 (2019-10-22)

Features

  • reactstrap-validation-select: make disabled state match availity/form components and 508 compliant (7d43da4)

5.1.0 (2019-10-11)

Features

  • reactstrap-validation-select: handle AutoFillType function values (e320080)

5.0.6 (2019-10-11)

Bug Fixes

5.0.5 (2019-10-04)

Bug Fixes

  • reactstrap-validation-select: prevents the provided styles from react-select from being overridden by the styles applied in error conditions (4acb8b0)

5.0.4 (2019-09-19)

Note: Version bump only for package @availity/reactstrap-validation-select

5.0.3 (2019-09-19)

Bug Fixes

  • reactstrap-validation-select: fixes multiple API calls on component mount (629e6eb)

5.0.2 (2019-09-19)

Note: Version bump only for package @availity/reactstrap-validation-select

5.0.1 (2019-09-04)

Bug Fixes

  • reactstrap-validation-select: use valueKey for newly created options if applicable (d402dc7)

5.0.0 (2019-08-19)

Code Refactoring

  • reactstrap-validation-select: made api resources peer dep (b0f783d)

BREAKING CHANGES

  • reactstrap-validation-select: api-axios api-core and axios are peer deps now

4.4.1 (2019-08-15)

Bug Fixes

  • reactstrap-validation-select: set field value to default value on autofill when new value undefined (453ebef)

4.4.0 (2019-08-14)

Features

  • reactstrap-validation-select: add minCharsToSearch prop (b80b9c1)

4.3.0 (2019-08-13)

Bug Fixes

  • reactstrap-validation-select: add noGutters prop to rows (2f3cff4)

Features

  • select: added select package using formik (770d9c1)

4.2.5 (2019-08-12)

Bug Fixes

  • reactstrap-validation-select: add paging info to patients query (b3d7e67)

4.2.4 (2019-08-11)

Note: Version bump only for package @availity/reactstrap-validation-select

4.2.3 (2019-08-08)

Bug Fixes

  • reactstrap-validation-select: fix patient query and pagination args (43f1076)

4.2.2 (2019-08-05)

Note: Version bump only for package @availity/reactstrap-validation-select

4.2.1 (2019-08-05)

Bug Fixes

  • reactstrap-validation-select: add noGutters prop to rows (a687af1)

4.2.0 (2019-08-02)

Bug Fixes

  • reactstrap-validation-select: check autofill key is truthy (4740d97)

Features

  • reactstrap-validation-select: add autofill prop (3935883)
  • reactstrap-validation-select: add AvPatientSelect (8900b69)
  • reactstrap-validation-select: allow autofill prop to be an object (0598d5c)

4.1.0 (2019-07-31)

Features

  • reactstrap-validation-select: added creatable support (4966487)

4.0.3 (2019-07-19)

Note: Version bump only for package @availity/reactstrap-validation-select

4.0.2 (2019-07-11)

Note: Version bump only for package @availity/reactstrap-validation-select

4.0.1 (2019-06-24)

Note: Version bump only for package @availity/reactstrap-validation-select

4.0.0 (2019-06-20)

Features

  • reacstrap-validation-select: upgrade react-select 3.0 (2502fc5)
  • reactstrap-validation-select: upgrade react-select 3.0 (e588848)

BREAKING CHANGES

3.1.0 (2019-06-17)

Features

  • reactstrap-validation-select: add AvCodeSelect (387af1a)

3.0.6 (2019-06-03)

Note: Version bump only for package @availity/reactstrap-validation-select

3.0.5 (2019-05-10)

Note: Version bump only for package @availity/reactstrap-validation-select

3.0.4 (2019-05-07)

Bug Fixes

  • reactstrap-validation-select: fix width of multivalue options (9681abe)

3.0.3 (2019-05-02)

Note: Version bump only for package @availity/reactstrap-validation-select

3.0.2 (2019-04-30)

Bug Fixes

  • reactstrap-validation-select: nfinite loop on loadOptions catch (93837f7)

3.0.1 (2019-04-23)

Bug Fixes

  • reactstrap-validation-select: added dev dep and fixed snapshots (a39478b)

3.0.0 (2019-04-18)

Bug Fixes

  • fix border radius of AvSelect (d567ad1)
  • reactstrap-validation-select: map legacy props to AvResourceSelect (010caa4)

Features

  • reactstrap-validation-select: default hasMore prop (56c775b)
  • reactstrap-validation-select: updated to use react-select async (9f5092c)

BREAKING CHANGES

  • reactstrap-validation-select: props have changed

2.0.3 (2019-03-13)

Bug Fixes

  • reactstrap-validation-select: fixed snapshots (1bdb70b)

2.0.2 (2019-03-13)

Bug Fixes

  • reactstrap-validation-select: a11y for red highlighted field (36c9ffb)

2.0.1 (2019-03-13)

Bug Fixes

  • reactstrap-validation-select: fixed colors not defaulting (3515b56)

2.0.0 (2019-03-12)

Bug Fixes

  • reactstrap-validation-select: updated snapshot (7474699)

1.7.4 (2019-03-04)

Note: Version bump only for package @availity/reactstrap-validation-select

1.7.3 (2019-03-04)

Note: Version bump only for package @availity/reactstrap-validation-select

1.7.2 (2019-02-25)

Bug Fixes

  • removed npmrc and added config to lerna for now creating locks (efe82ab)
  • removed package-locks,added npmrc ignore,fixed react as hoisted dep (4648319)

1.7.1 (2019-02-13)

Bug Fixes

1.7.0 (2019-02-08)

Bug Fixes

  • reactstrap-validation-date: fixed linter errors (8c5d626)
  • reactstrap-validation-select: update styles in input-groups (9f4b8b6)
  • re-created package-locks (49726de)

Features

  • feature: added packages from av-react to public (2c32cf3)
  • feature: adding typescript support (cfe57a2)

1.6.0 (2018-11-02)

Bug Fixes

  • reactstrap-validation-select: allow defaultOptions to be overridden (814f221)

1.5.1 (2018-08-14)

1.5.0 (2018-08-13)

Features

1.3.7 (2018-07-10)

Bug Fixes

  • reactstrap-validation-select: fix IE overflow (8f5b4a1)

1.3.6 (2018-07-09)

Bug Fixes

  • reactstrap-validation-select: encode q and fix overflow (31c0b34)

1.3.5 (2018-06-29)

Bug Fixes

  • reactstrap-validation-select: update dep to pull in fix (c5d9114)

1.3.4 (2018-06-27)

Bug Fixes

  • reactstrap-validation-select: update dep to pull in fix (be30dde)

1.3.3 (2018-06-26)

Bug Fixes

  • reactstrap-validation-select: update dep to pull in fix (b312f8f)

1.3.2 (2018-06-25)

Bug Fixes

  • reactstrap-validation-select: seperate onInput and onChange (8d73f78)

1.3.1 (2018-06-25)

Bug Fixes

  • reactstrap-validation-select: force field to update (041b253)

1.3.0 (2018-06-22)

Features

  • reactstrap-validation-select: add ability to reload options (5d1c7c4)

1.2.2 (2018-06-21)

Bug Fixes

  • reactstrap-validation-select: set classNames (8332df8)

1.2.1 (2018-06-21)

Bug Fixes

  • reactstrap-validation-select: fix clearing select (75854a9)

1.2.0 (2018-06-19)

Bug Fixes

  • reactstrap-validation-select: fix a11y issues (ffe0358)
  • reactstrap-validation-select: fix headers (0dbd032)

Features

  • reactstrap-validation-select: make select work with simple values (8634165)

1.1.0 (2018-06-11)

Features

  • reactstrap-validation-select: add reactstrap-validation-select (7c220f0)