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 [email protected] [email protected]

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");