Tbc-common-lottypeahead NPM

TBC Common React App Lot Type Ahead Module

Plugin module for within Formik (or other forms) that provides API-based type ahead for Seed Lot IDs.

Install

npm install --save tbc-common-lottypeahead

Lot Type Ahead Input Component:

LotTypeAhead field is assumed to replace an input text field within an established Formik form

import LotTypeAhead from "tbc-common-lottypeahead/dist/Component/LotTypeAhead";

  <LotTypeAhead
    configObject={configObject}
    fieldValue={formProps.values.seedLotBusId}
    onChange={callback => {
      formProps.setFieldValue("seedLotBusId", callback);
    }}
    numberOfSuggestions={10}
  />

configObject

configObject is a static object that contains parental state items required for LotTypeAhead:

token - authentication token:
- token_type
- access_token
- name
seedApi - variable from urlConfig
handleError - function from handleError
setError - function to set any error message (typically from ErrorState)

fieldValue

The value in the LotTypeAhead input field (taken from Formik in example)

onChange

Function that sets the LotTypeAhead field value based on callback response

numberOfSuggestions

OPTIONAL: the number of responses returned by auto-suggest; defaults to 10

Required NPM Packages

npm install --save react-autosuggest formik react-oidc@0.1.0 oidc-client@1.5.4

Testing

For any unit test file that deep renders ("mounts") this imported component, add the following:

jest.mock("tbc-common-lottypeahead/dist/Component/LotTypeAhead", () => "div");