Typescript

[pjm17971]

DO NOT MERGE

TODO Checklist

• Chooser
  • Reimplement with react-select 2.0
  • Add react-window to chooser for performance improvements
  • Add async loading functionality to chooser
  • Storybook stories for chooser
    • Basic non-search chooser
    • Basic searchable chooser
    • Edit mode test
    • Disabled test
    • Required test with clearable chooser
    • Custom view example
    • Async loading for chooser
    • Async loading for chooser (form)
    • Chooser in full form example
• TextEdit
  • Storybook stories for TextEdit
    • Basic TextEdit
    • Hidden TextEdit
    • Disabled
    • Selected
    • Required
    • View mode
    • Custom view mode
    • Example in full form
• TextArea
  • Storybook stories for TextArea
• Help for fields
  • Tooltip help
  • Schema help text could also be fn
• Switch control
  • Basic switch
  • Disabled switch
  • Default options switch
  • Switch view mode
  • Switch custom view mode
• Date edit control
  • Basic date control
  • Required date control
  • Disabled date control
  • Basic date edit control view only
  • Time picker basic
  • Time picker view mode
  • Month picker basic
  • Month picker view mode
  • Constraints (min and max dates)
• View control
  • Basic view control

Transition Guide

• Views can either be a function which takes the current FieldValue and returns a React Element (like before) or a string. The prop name for these are displayView rather than view. For Choosers with async loading it is necessary to implement displayView to return the current item label because the Chooser will not know the item label until the list of items is loaded.
• Chooser is implemented on react-select 2.x. Some props have been aligned to this API: isDisabled replaces disabled, isSearchable replaces disableSearch and isClearable replaces allowSingleDeselect.

Async Chooser

This PR adds Async Chooser functionality, allowing the Chooser to request data when it is displayed. The most likely use for this would be for inline editing. The Chooser would display a text value for the selected item until the user opted to edit it. At that point the user would see a spinner within the Chooser and the component would request data. When the data is loaded the user can then select from the list as usual.

Here is a Chooser that would be nested inside a Form:

<Chooser
    field="color"
    width={280}
    choiceLoader={loadOptions}
    displayView={value => (
        <span style={{ color: "steelblue" }}>
            <b>
            { availableColors.find(item => item.get("id") === value)?.get("label") }
             </b>
         </span>
    )}
/>

Note two special things here: the use of choiceLoader and the use of displayView.

The choiceLoader is a function:

const loadOptions = (filter: string, callback: any) => {
    if (cachedAvailableColors) {
        callback(filteredColors(cachedAvailableColors, filter));
    } else {
        setTimeout(() => {
            callback(filteredColors(availableColors, filter));
            cachedAvailableColors = availableColors;
        }, 5000);
    }
};

Here we're using a setTimeout to simulate an async fetch operation. Note that this function will be called whenever the filter (search string) is changed, so this means you can either fetch based on that filter if the backend supports that, or cache the full list so you can return just the filtered set derived from the cache rather than repeatedly fetching.

The other things to keep in mind with async chooser fetching is that the Chooser will not know what label to display for an item in the list that isn't loaded yet. Therefore you need to use displayView to provide that. In this case we grab it from the original list, but ideally you'd load that as part of the form initial state.

Help facility

You can now specify a help string in the Schema that will be displayed along side each field. An icon indicates the presence of help. Hovering over the icon will display the help text. Help text can be markdown.

Switch control

For boolean values (on/off) you can use the new Switch control. The value passed to the switch control will be 0 or 1. The control will show a label next to both states that defaults to On and Off. You can customize that by passing options to the switch, which is a two element array ["deactivated", "activated"] and these labels will be shown instead. When the control is in view only mode these labels will also be used for the display text. As with other controls you can pass in a displayView prop to customize this, either with alternative text or with a function.

Date edit control

The DateEdit control has been updated to the latest version of react-datepicker, which is considerably more robust than previous versions. As part of that change you can now specify minDate and maxDate props to constrain the picker. You can also select both a Date and Time using the timePicker bool prop. Finally you can select just a month with the monthPicker prop.