Skip to content

Commit

Permalink
Closes #64, add support for custom command properties
Browse files Browse the repository at this point in the history
  • Loading branch information
@asabaylus
asabaylus committed Apr 4, 2019
1 parent 1f3fb66 commit c0cbce7
Show file tree
Hide file tree
Showing 6 changed files with 63 additions and 7 deletions.
14 changes: 13 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,19 @@ const commands = [{
scoreFn: null
```

* ```commands``` appears in the command palette. For each command in the array the object must have a _name_ and a _command_. The _name_ is a user friendly string that will be display to the user. The command is a function that will be executed when the user clicks or presses the enter key.
* ```commands``` appears in the command palette. For each command in the array the object must have a _name_ and a _command_. The _name_ is a user friendly string that will be display to the user. The command is a function that will be executed when the user clicks or presses the enter key. Commands may also include custom properties where "this" will be bound to the command, for example:

```
{
id: 1,
color: 'pink',
name: "Foo",
command() {
document.location.href = `somepage.html?id=${this.id}&color=${this.color}`;
}
},
...
```

* ```maxDisplayed``` a _number_ between 1 and 500 that determines the maxium number of commands that will be rendered on screen. Defaults to 7

Expand Down
5 changes: 5 additions & 0 deletions src/__mocks__/commands.js
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,26 @@
export default [
{
id: 1,
name: "Foo",
command() {}
},
{
id: 2,
name: "Bar",
command() {}
},
{
id: 3,
name: "Baz",
command() {}
},
{
id: 4,
name: "Fizz",
command() {}
},
{
id: 5,
name: "Fizz Buzz",
command() {}
}
Expand Down
25 changes: 25 additions & 0 deletions src/__snapshots__/command-palette.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,22 +43,27 @@ exports[`Opening the palette displays the suggestion list 1`] = `
Array [
Object {
"command": [Function],
"id": 1,
"name": "Foo",
},
Object {
"command": [Function],
"id": 2,
"name": "Bar",
},
Object {
"command": [Function],
"id": 3,
"name": "Baz",
},
Object {
"command": [Function],
"id": 4,
"name": "Fizz",
},
Object {
"command": [Function],
"id": 5,
"name": "Fizz Buzz",
},
]
Expand Down Expand Up @@ -1080,22 +1085,27 @@ exports[`Opening the palette displays the suggestion list 1`] = `
Array [
Object {
"command": [Function],
"id": 1,
"name": "Foo",
},
Object {
"command": [Function],
"id": 2,
"name": "Bar",
},
Object {
"command": [Function],
"id": 3,
"name": "Baz",
},
Object {
"command": [Function],
"id": 4,
"name": "Fizz",
},
Object {
"command": [Function],
"id": 5,
"name": "Fizz Buzz",
},
]
Expand Down Expand Up @@ -1199,22 +1209,27 @@ exports[`Opening the palette displays the suggestion list 1`] = `
Array [
Object {
"command": [Function],
"id": 1,
"name": "Foo",
},
Object {
"command": [Function],
"id": 2,
"name": "Bar",
},
Object {
"command": [Function],
"id": 3,
"name": "Baz",
},
Object {
"command": [Function],
"id": 4,
"name": "Fizz",
},
Object {
"command": [Function],
"id": 5,
"name": "Fizz Buzz",
},
]
Expand Down Expand Up @@ -1364,22 +1379,27 @@ exports[`Opening the palette displays the suggestion list 1`] = `
Array [
Object {
"command": [Function],
"id": 1,
"name": "Foo",
},
Object {
"command": [Function],
"id": 2,
"name": "Bar",
},
Object {
"command": [Function],
"id": 3,
"name": "Baz",
},
Object {
"command": [Function],
"id": 4,
"name": "Fizz",
},
Object {
"command": [Function],
"id": 5,
"name": "Fizz Buzz",
},
]
Expand Down Expand Up @@ -1416,6 +1436,7 @@ exports[`Opening the palette displays the suggestion list 1`] = `
item={
Object {
"command": [Function],
"id": 1,
"name": "Foo",
}
}
Expand Down Expand Up @@ -1484,6 +1505,7 @@ exports[`Opening the palette displays the suggestion list 1`] = `
item={
Object {
"command": [Function],
"id": 2,
"name": "Bar",
}
}
Expand Down Expand Up @@ -1552,6 +1574,7 @@ exports[`Opening the palette displays the suggestion list 1`] = `
item={
Object {
"command": [Function],
"id": 3,
"name": "Baz",
}
}
Expand Down Expand Up @@ -1620,6 +1643,7 @@ exports[`Opening the palette displays the suggestion list 1`] = `
item={
Object {
"command": [Function],
"id": 4,
"name": "Fizz",
}
}
Expand Down Expand Up @@ -1688,6 +1712,7 @@ exports[`Opening the palette displays the suggestion list 1`] = `
item={
Object {
"command": [Function],
"id": 5,
"name": "Fizz Buzz",
}
}
Expand Down
2 changes: 1 addition & 1 deletion src/command-palette.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -251,7 +251,7 @@ CommandPalette.propTypes = {
/** commands appears in the command palette. For each command in the array the object
must have a _name_ and a _command_. The _name_ is a user friendly string that will
be display to the user. The command is a function that will be executed when the
user clicks or presses the enter key. */
user clicks or presses the enter key. Commands may also include custom properties where "this" will be bound to the command */
commands: PropTypes.arrayOf(
PropTypes.shape({
name: PropTypes.string.isRequired,
Expand Down
13 changes: 8 additions & 5 deletions src/suggestions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,14 @@ export default function getSuggestions(value = "", allCommands, options) {

// format the output to include a code higlight for innerHTML
// and the command to invoke
const formattedSuggestions = filteredSuggestions.map(suggestion => ({
name: suggestion.obj.name,
command: suggestion.obj.command,
highlight: fuzzysort.highlight(suggestion[0])
}));
const formattedSuggestions = filteredSuggestions.map(suggestion => {
const opts = {
name: suggestion.obj.name,
command: suggestion.obj.command,
highlight: fuzzysort.highlight(suggestion[0])
};
return { ...opts, ...suggestion.obj };
});

// When the user specified a search term but there we no matches found
// return all the commands
Expand Down
11 changes: 11 additions & 0 deletions src/suggestions.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,20 @@ describe("getSuggestions", () => {
});
});

describe("commands", () => {
it("should permit the use custom properties", () => {
const commands = getSuggestions("Fizz", allCommands, fuzzysortOptions);
// the command palette does not natively support an "id" property
// however a developer may easily add any set of obj properties to each command
// the following assertion tests that custom command properties are supported
expect(commands[0]).toMatchObject({ id: 4 });
});
});

describe("a value was provided", () => {
it("should return the matching command", () => {
const commands = getSuggestions("zz", allCommands, fuzzysortOptions);

expect(commands[0]).toMatchObject({
name: "Fizz",
highlight: "Fi<b>zz</b>"
Expand Down

0 comments on commit c0cbce7

Please sign in to comment.