Upgrade react select #1482
Upgrade react select #1482
Conversation
|
A good test of the dynamic options is searching for "submitting lab" in the seasonal flu build of the test app.
|
We have been using v1 which is not longer maintained. We want to use new features available such as option groups.
The package `react-virtualized-select` is specifically built for v1 of `react-select` and is no longer maintained. Since we have upgraded `react-select`, this package will no longer work. Keep `react-virtualized` to build our own virtualized menu component to use with `react-select`.
With the complete rewrite of `react-select` from v1 to v2, there are a couple changes to the props of the `Select` component that affect us: 1. `clearable`, `multi`, `searchable` props have been renamed to `isClearable`, `isMulti`, `isSearchable` 2. `valueKey` has been removed so we must provide `getOptionValue` for potential Symbol values 3. `value` no longer accepts a simple string. It now always expects an array of options or a single options object. The following commit will address the `Select` component from `react-virtualized-select` used for the data filter.
Replaces the `Select` component including an `async` flag from `react-virtualized-select` with the `AsyncSelect` component from the updated `react-select` package. Keeps the equivalent props in the updated component, but does not include the virtualized MenuList component. This will be addressed in the next commit.
joverlee521
force-pushed
the
upgrade-react-select
branch
from
0a50744 to
07811b5
Compare
|
The test PR in the nextstrain.org repo is failing because I did not realize that the |
|
The latest changes can now be tested with the SARS-CoV-2 builds that include the originating/submitting labs at https://nextstrain-s-upgrade-re-8ecxpi.herokuapp.com/staging/ncov/gisaid/trial/add_authors/global |
|
Thanks @joverlee521! Haven't dived into the code yet but here's feedback comparing nextstrain-s-upgrade-re-8ecxpi.herokuapp.com against nextstrain.org
|
|
I tried this out this morning and it looks good to me! Even for the very long lists, as James said, the performance seemed good and not too laggy. I think the names wrap well and look really nice and tidy! |
Add a VirtualizedMenuList component to replace the MenuList component of the react-select package for the data filter dropdown. This was added to replace the react-virtualized-select package that is no longer maintained an incompatible with the latest version of react-select.
Uses `CellMeasurer` to measure individual row heights for each option to accomodate long string options.
joverlee521
force-pushed
the
upgrade-react-select
branch
from
07811b5 to
dca4585
Compare
Replaces all uses of the `Select` component from `react-select` with our own `CustomSelect` component to centralize any customizations that we would like to be shared across all dropdowns. Does not change any functionality of the `Select` component and keeps all passed props, which allows individual customizations to override our default customizations. Since the data filter is the only component that uses `AsyncSelect`, I decided to only import the custom styles and not create another custom component.
joverlee521
force-pushed
the
upgrade-react-select
branch
from
dca4585 to
561c1fd
Compare
|
@jameshadfield The latest commit (561c1fd) centralizes the I used this to make the styles tweaks of changing the placeholder font color and replacing the drop down arrow. I also updated the dropdown menu to not have a top margin so there's not a weird gap between the input box and the drop down. |
There was a problem hiding this comment.
Looks good @joverlee521. Thanks for addressing the styling -- I remember trying to combine styled-components and react-select before they had the components prop and it wasn't pretty! This is much better.
Note that we now have a custom-styled react-select component via PR #1482.
Upgrades our
react-selectpackage to version 5.2.2 and replaces thereact-virtualized-selectpackage with our own virtualized menu list built withreact-virtualizedcomponents.Note that the upgrade of
react-selectdid include style changes. I did not dig into the style changes, but please let me know if we want the styles to match the old version.Resolves #1467 and ##1453.