added color and layout customization #35
Open
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
vadimdemedes
requested changes
Oct 20, 2020
readme.md
Outdated
| @@ -98,3 +98,15 @@ Function to call when user selects an item. Item object is passed to that functi | |||
| Type: `function` | |||
|
|
|||
| Function to call when user highlights an item. Item object is passed to that function as an argument. | |||
|
|
|||
| ### displayDirection | |||
There was a problem hiding this comment.
Could you change it to direction?
readme.md
Outdated
| @@ -37,7 +37,7 @@ const Demo = () => { | |||
| } | |||
| ]; | |||
|
|
|||
| return <SelectInput items={items} onSelect={handleSelect} />; | |||
| return <SelectInput items={items} onSelect={handleSelect} defaultColor='green' accentColor='red' displayDirection='column'/>; | |||
There was a problem hiding this comment.
Suggested change
| return <SelectInput items={items} onSelect={handleSelect} defaultColor='green' accentColor='red' displayDirection='column'/>; | |
| return <SelectInput items={items} onSelect={handleSelect} defaultColor="green" accentColor="red" displayDirection="column"/>; |
readme.md
Outdated
|
|
||
| Type: `argument` | ||
|
|
||
| Argument equal to `row` or `column`. |
There was a problem hiding this comment.
Suggested change
| Argument equal to `row` or `column`. | |
| Change the direction in which list items are displayed. Possible values are `row` or `column`. |
readme.md
Outdated
|
|
||
| ### displayDirection | ||
|
|
||
| Type: `argument` |
There was a problem hiding this comment.
Suggested change
| Type: `argument` | |
| Type: `argument`<br> | |
| Default: `column` |
|
|
||
| Argument equal to `row` or `column`. | ||
|
|
||
| ### defaultColor / accentColor |
There was a problem hiding this comment.
There are quite a few comments I have on this change to colors, could you extract these changes into a separate PR?
| @@ -98,7 +111,7 @@ function SelectInput<V>({ | |||
| useInput( | |||
| useCallback( | |||
| (input, key) => { | |||
| if (input === 'k' || key.upArrow) { | |||
| if (input === 'k' || key.upArrow || key.leftArrow) { | |||
There was a problem hiding this comment.
You should determine which keys to listen to based on the list direction. Otherwise if direction is column, pressing left arrow would change the selected item, which would be an incorrect behavior.
I updated the Readme as per your comments. Will work on the color and direction/navigation in a separate PR.
Co-authored-by: Vadim Demedes <[email protected]>
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.
Added the ability to specify selector orientation:
-- include
displayDirection='column'ordisplayDirection='row'as an argument when calling SelectInput.Added the ability to pass in a default and an accent color variable.
-- include
defaultColor={someColor}and/oraccentColor={diffColor}I was having some trouble with NPM link and testing, but it should be good. Changes are relatively simple.