Skip to content

Commit

Permalink
add onSelect prop
Browse files Browse the repository at this point in the history
  • Loading branch information
@asabaylus
asabaylus committed Dec 11, 2019
1 parent f2995c4 commit c1c0399
Show file tree
Hide file tree
Showing 5 changed files with 114 additions and 0 deletions.
12 changes: 12 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,18 @@ const commands = [{
scoreFn: null
```

* ```onSelect``` a function that's called when the selected suggestion changes, given the user selects an item or the user clear the selection. It's called with the item that was selected or null.

```js
<CommandPalette
commands={commands}
onSelect={command => {
alert(`A suggested command was selected: \n
${JSON.stringify(command)}
`);
}}
/>
```
* ```onAfterOpen``` a function that fires after the command palette modal is opened.
Expand Down
54 changes: 54 additions & 0 deletions src/__snapshots__/command-palette.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,7 @@ exports[`Command List renders a command 1`] = `
maxDisplayed={7}
onAfterOpen={[Function]}
onRequestClose={[Function]}
onSelect={[Function]}
open={true}
options={
Object {
Expand Down Expand Up @@ -1747,6 +1748,9 @@ exports[`Command List renders a command 1`] = `
</div>
</div>
</div>
<div
class="ReactModalPortal"
/>
<div
class="ReactModalPortal"
>
Expand Down Expand Up @@ -5480,6 +5484,9 @@ exports[`Command List renders a command 1`] = `
</div>
</div>
</div>
<div
class="ReactModalPortal"
/>
<div
class="ReactModalPortal"
>
Expand Down Expand Up @@ -7943,6 +7950,7 @@ exports[`Command List renders a command 1`] = `
maxDisplayed={7}
onAfterOpen={[Function]}
onRequestClose={[Function]}
onSelect={[Function]}
open={true}
options={
Object {
Expand Down Expand Up @@ -8148,6 +8156,7 @@ exports[`Opening the palette displays the suggestion list 1`] = `
maxDisplayed={7}
onAfterOpen={[Function]}
onRequestClose={[Function]}
onSelect={[Function]}
options={
Object {
"allowTypo": true,
Expand Down Expand Up @@ -9806,6 +9815,9 @@ exports[`Opening the palette displays the suggestion list 1`] = `
</div>
</div>
</div>
<div
class="ReactModalPortal"
/>
<div
class="ReactModalPortal"
>
Expand Down Expand Up @@ -12025,6 +12037,9 @@ exports[`Opening the palette displays the suggestion list 1`] = `
</div>
</div>
</div>
<div
class="ReactModalPortal"
/>
<div
class="ReactModalPortal"
>
Expand Down Expand Up @@ -12995,6 +13010,7 @@ exports[`Opening the palette displays the suggestion list 1`] = `
maxDisplayed={7}
onAfterOpen={[Function]}
onRequestClose={[Function]}
onSelect={[Function]}
options={
Object {
"allowTypo": true,
Expand Down Expand Up @@ -13193,6 +13209,7 @@ exports[`Opening the palette displays the suggestion list 1`] = `
maxDisplayed={7}
onAfterOpen={[Function]}
onRequestClose={[Function]}
onSelect={[Function]}
options={
Object {
"allowTypo": true,
Expand Down Expand Up @@ -13391,6 +13408,7 @@ exports[`Opening the palette displays the suggestion list 1`] = `
maxDisplayed={7}
onAfterOpen={[Function]}
onRequestClose={[Function]}
onSelect={[Function]}
options={
Object {
"allowTypo": true,
Expand Down Expand Up @@ -13590,6 +13608,7 @@ exports[`Opening the palette displays the suggestion list 1`] = `
maxDisplayed={7}
onAfterOpen={[Function]}
onRequestClose={[Function]}
onSelect={[Function]}
options={
Object {
"allowTypo": true,
Expand Down Expand Up @@ -13790,6 +13809,7 @@ exports[`Opening the palette displays the suggestion list 1`] = `
maxDisplayed={7}
onAfterOpen={[Function]}
onRequestClose={[Function]}
onSelect={[Function]}
options={
Object {
"allowTypo": true,
Expand Down Expand Up @@ -13988,6 +14008,7 @@ exports[`Opening the palette displays the suggestion list 1`] = `
maxDisplayed={7}
onAfterOpen={[Function]}
onRequestClose={[Function]}
onSelect={[Function]}
options={
Object {
"allowTypo": true,
Expand Down Expand Up @@ -14186,6 +14207,7 @@ exports[`Opening the palette displays the suggestion list 1`] = `
maxDisplayed={7}
onAfterOpen={[Function]}
onRequestClose={[Function]}
onSelect={[Function]}
options={
Object {
"allowTypo": true,
Expand Down Expand Up @@ -14356,6 +14378,7 @@ exports[`props.display should not display the command palette in react-modal whe
maxDisplayed={7}
onAfterOpen={[Function]}
onRequestClose={[Function]}
onSelect={[Function]}
options={
Object {
"allowTypo": true,
Expand Down Expand Up @@ -14838,6 +14861,7 @@ exports[`props.display should not display the command palette in react-modal whe
maxDisplayed={7}
onAfterOpen={[Function]}
onRequestClose={[Function]}
onSelect={[Function]}
options={
Object {
"allowTypo": true,
Expand Down Expand Up @@ -15036,6 +15060,7 @@ exports[`props.display should not display the command palette in react-modal whe
maxDisplayed={7}
onAfterOpen={[Function]}
onRequestClose={[Function]}
onSelect={[Function]}
options={
Object {
"allowTypo": true,
Expand Down Expand Up @@ -15234,6 +15259,7 @@ exports[`props.display should not display the command palette in react-modal whe
maxDisplayed={7}
onAfterOpen={[Function]}
onRequestClose={[Function]}
onSelect={[Function]}
options={
Object {
"allowTypo": true,
Expand Down Expand Up @@ -15433,6 +15459,7 @@ exports[`props.display should not display the command palette in react-modal whe
maxDisplayed={7}
onAfterOpen={[Function]}
onRequestClose={[Function]}
onSelect={[Function]}
options={
Object {
"allowTypo": true,
Expand Down Expand Up @@ -15633,6 +15660,7 @@ exports[`props.display should not display the command palette in react-modal whe
maxDisplayed={7}
onAfterOpen={[Function]}
onRequestClose={[Function]}
onSelect={[Function]}
options={
Object {
"allowTypo": true,
Expand Down Expand Up @@ -15831,6 +15859,7 @@ exports[`props.display should not display the command palette in react-modal whe
maxDisplayed={7}
onAfterOpen={[Function]}
onRequestClose={[Function]}
onSelect={[Function]}
options={
Object {
"allowTypo": true,
Expand Down Expand Up @@ -16029,6 +16058,7 @@ exports[`props.display should not display the command palette in react-modal whe
maxDisplayed={7}
onAfterOpen={[Function]}
onRequestClose={[Function]}
onSelect={[Function]}
options={
Object {
"allowTypo": true,
Expand Down Expand Up @@ -16291,6 +16321,7 @@ exports[`props.reactModalParentSelector should render render reat-modal in the t
maxDisplayed={7}
onAfterOpen={[Function]}
onRequestClose={[Function]}
onSelect={[Function]}
open={true}
options={
Object {
Expand Down Expand Up @@ -19915,6 +19946,7 @@ exports[`props.reactModalParentSelector should render render reat-modal in the t
maxDisplayed={7}
onAfterOpen={[Function]}
onRequestClose={[Function]}
onSelect={[Function]}
open={true}
options={
Object {
Expand Down Expand Up @@ -20114,6 +20146,7 @@ exports[`props.reactModalParentSelector should render render reat-modal in the t
maxDisplayed={7}
onAfterOpen={[Function]}
onRequestClose={[Function]}
onSelect={[Function]}
open={true}
options={
Object {
Expand Down Expand Up @@ -20313,6 +20346,7 @@ exports[`props.reactModalParentSelector should render render reat-modal in the t
maxDisplayed={7}
onAfterOpen={[Function]}
onRequestClose={[Function]}
onSelect={[Function]}
open={true}
options={
Object {
Expand Down Expand Up @@ -20513,6 +20547,7 @@ exports[`props.reactModalParentSelector should render render reat-modal in the t
maxDisplayed={7}
onAfterOpen={[Function]}
onRequestClose={[Function]}
onSelect={[Function]}
open={true}
options={
Object {
Expand Down Expand Up @@ -20714,6 +20749,7 @@ exports[`props.reactModalParentSelector should render render reat-modal in the t
maxDisplayed={7}
onAfterOpen={[Function]}
onRequestClose={[Function]}
onSelect={[Function]}
open={true}
options={
Object {
Expand Down Expand Up @@ -20913,6 +20949,7 @@ exports[`props.reactModalParentSelector should render render reat-modal in the t
maxDisplayed={7}
onAfterOpen={[Function]}
onRequestClose={[Function]}
onSelect={[Function]}
open={true}
options={
Object {
Expand Down Expand Up @@ -21112,6 +21149,7 @@ exports[`props.reactModalParentSelector should render render reat-modal in the t
maxDisplayed={7}
onAfterOpen={[Function]}
onRequestClose={[Function]}
onSelect={[Function]}
open={true}
options={
Object {
Expand Down Expand Up @@ -21284,6 +21322,7 @@ exports[`props.renderCommand should render a custom command component 1`] = `
maxDisplayed={7}
onAfterOpen={[Function]}
onRequestClose={[Function]}
onSelect={[Function]}
open={true}
options={
Object {
Expand Down Expand Up @@ -23525,6 +23564,7 @@ exports[`props.renderCommand should render a custom command component 1`] = `
maxDisplayed={7}
onAfterOpen={[Function]}
onRequestClose={[Function]}
onSelect={[Function]}
open={true}
options={
Object {
Expand Down Expand Up @@ -23725,6 +23765,7 @@ exports[`props.renderCommand should render a custom command component 1`] = `
maxDisplayed={7}
onAfterOpen={[Function]}
onRequestClose={[Function]}
onSelect={[Function]}
open={true}
options={
Object {
Expand Down Expand Up @@ -23925,6 +23966,7 @@ exports[`props.renderCommand should render a custom command component 1`] = `
maxDisplayed={7}
onAfterOpen={[Function]}
onRequestClose={[Function]}
onSelect={[Function]}
open={true}
options={
Object {
Expand Down Expand Up @@ -24126,6 +24168,7 @@ exports[`props.renderCommand should render a custom command component 1`] = `
maxDisplayed={7}
onAfterOpen={[Function]}
onRequestClose={[Function]}
onSelect={[Function]}
open={true}
options={
Object {
Expand Down Expand Up @@ -24328,6 +24371,7 @@ exports[`props.renderCommand should render a custom command component 1`] = `
maxDisplayed={7}
onAfterOpen={[Function]}
onRequestClose={[Function]}
onSelect={[Function]}
open={true}
options={
Object {
Expand Down Expand Up @@ -24528,6 +24572,7 @@ exports[`props.renderCommand should render a custom command component 1`] = `
maxDisplayed={7}
onAfterOpen={[Function]}
onRequestClose={[Function]}
onSelect={[Function]}
open={true}
options={
Object {
Expand Down Expand Up @@ -24728,6 +24773,7 @@ exports[`props.renderCommand should render a custom command component 1`] = `
maxDisplayed={7}
onAfterOpen={[Function]}
onRequestClose={[Function]}
onSelect={[Function]}
open={true}
options={
Object {
Expand Down Expand Up @@ -24900,6 +24946,7 @@ exports[`props.theme should render a custom theme 1`] = `
maxDisplayed={7}
onAfterOpen={[Function]}
onRequestClose={[Function]}
onSelect={[Function]}
open={true}
options={
Object {
Expand Down Expand Up @@ -27455,6 +27502,7 @@ exports[`props.theme should render a custom theme 1`] = `
maxDisplayed={7}
onAfterOpen={[Function]}
onRequestClose={[Function]}
onSelect={[Function]}
open={true}
options={
Object {
Expand Down Expand Up @@ -27655,6 +27703,7 @@ exports[`props.theme should render a custom theme 1`] = `
maxDisplayed={7}
onAfterOpen={[Function]}
onRequestClose={[Function]}
onSelect={[Function]}
open={true}
options={
Object {
Expand Down Expand Up @@ -27855,6 +27904,7 @@ exports[`props.theme should render a custom theme 1`] = `
maxDisplayed={7}
onAfterOpen={[Function]}
onRequestClose={[Function]}
onSelect={[Function]}
open={true}
options={
Object {
Expand Down Expand Up @@ -28056,6 +28106,7 @@ exports[`props.theme should render a custom theme 1`] = `
maxDisplayed={7}
onAfterOpen={[Function]}
onRequestClose={[Function]}
onSelect={[Function]}
open={true}
options={
Object {
Expand Down Expand Up @@ -28258,6 +28309,7 @@ exports[`props.theme should render a custom theme 1`] = `
maxDisplayed={7}
onAfterOpen={[Function]}
onRequestClose={[Function]}
onSelect={[Function]}
open={true}
options={
Object {
Expand Down Expand Up @@ -28458,6 +28510,7 @@ exports[`props.theme should render a custom theme 1`] = `
maxDisplayed={7}
onAfterOpen={[Function]}
onRequestClose={[Function]}
onSelect={[Function]}
open={true}
options={
Object {
Expand Down Expand Up @@ -28658,6 +28711,7 @@ exports[`props.theme should render a custom theme 1`] = `
maxDisplayed={7}
onAfterOpen={[Function]}
onRequestClose={[Function]}
onSelect={[Function]}
open={true}
options={
Object {
Expand Down
Loading

0 comments on commit c1c0399

Please sign in to comment.