feat(multi-select): New UI component for selecting multiple networks #5143
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
1 build had no size change
Celo (test) 1.81.0 (146)
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #5143 +/- ##
==========================================
+ Coverage 85.76% 85.79% +0.03%
==========================================
Files 740 742 +2
Lines 30029 30097 +68
Branches 5180 5188 +8
==========================================
+ Hits 25754 25823 +69
+ Misses 4039 4038 -1
Partials 236 236
... and 1 file with indirect coverage changes Continue to review full report in Codecov by Sentry.
|
satish-ravi
reviewed
Mar 22, 2024
satish-ravi
reviewed
Mar 22, 2024
MuckT
reviewed
Mar 22, 2024
MuckT
reviewed
Mar 23, 2024
satish-ravi
reviewed
Mar 25, 2024
| selectedOptions.filter((selectedOption) => selectedOption !== option.id) | ||
| ) | ||
| } else { | ||
| setSelectedOptions([...selectedOptions, option.id]) |
There was a problem hiding this comment.
could there be a race if 2 elements are clicked really fast? chatgpt suggests something like this
const toggleOption = (option) => {
setSelectedOptions(prevSelectedOptions => {
const isSelected = prevSelectedOptions.includes(option);
if (isSelected) {
return prevSelectedOptions.filter((item) => item !== option);
} else {
return [...prevSelectedOptions, option];
}
});
};There was a problem hiding this comment.
Ah interesting! I've never used passing a function into the setState function as an updater.
There was a problem hiding this comment.
This actually forced a much nicer unit tests!
MuckT
reviewed
Mar 25, 2024
satish-ravi
approved these changes
Mar 26, 2024
shottah
pushed a commit
to zed-io/kolektivo
that referenced
this pull request
May 15, 2024
…alora-inc#5143) ### Description Re-usable component for doing multi selection based on the designs for selecting multiple Networks. TODO(next): Use the new filter in Swap & Dapp filters per designs [Figma designs ](https://www.figma.com/file/gFuRy5HJrV34ehkY0dvWWb/Swap-guidance?type=design&node-id=2632-4282&mode=design&t=xbvdPqAXfbaUiK4f-0) #### Tapping around [tapping.webm](https://github.com/valora-inc/wallet/assets/8432644/774a9fc8-02bc-4a91-bf1e-8b67c222c46c) #### Close / Open [closing.webm](https://github.com/valora-inc/wallet/assets/8432644/809f9c4d-bbff-4416-ba28-866f4b6f9cad) #### Lots of networks [many-networks.webm](https://github.com/valora-inc/wallet/assets/8432644/a0bf9d5a-1b8e-4e4e-a115-1a2dc4103eb6) #### Long network names  ### Test plan Unit tests ### Related issues https://linear.app/valora/issue/ACT-1098/select-token-by-network ### Network scalability Built to handle more networks, no-code required for more networks added
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Re-usable component for doing multi selection based on the designs for selecting multiple Networks.
TODO(next): Use the new filter in Swap & Dapp filters per designs
Figma designs
Tapping around
tapping.webm
Close / Open
closing.webm
Lots of networks
many-networks.webm
Long network names
Test plan
Unit tests
Related issues
https://linear.app/valora/issue/ACT-1098/select-token-by-network
Network scalability
Built to handle more networks, no-code required for more networks added