Skip to content

Commit f9392bc

Browse files
mcrowder65Matt Crowderasabaylus
authored
Feat: Add displayTrigger boolean (#1332)
* Add displayTrigger boolean * Address code review comments * fix failing unit tests when target === null * add unit test for null trigger Co-authored-by: Matt Crowder <[email protected]> Co-authored-by: Asa Baylus <[email protected]>
1 parent 017f330 commit f9392bc

File tree

5 files changed

+88
-40
lines changed

5 files changed

+88
-40
lines changed

‎.gitignore‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,4 +37,5 @@ node_modules/
3737
.env
3838

3939
#IDE
40-
.vscode
40+
.vscode
41+
.idea

‎src/__snapshots__/command-palette.test.js.snap‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -866,6 +866,9 @@ exports[`Command List renders a command 1`] = `
866866
<div
867867
class="ReactModalPortal"
868868
/>
869+
<div
870+
class="ReactModalPortal"
871+
/>
869872
<div
870873
class="ReactModalPortal"
871874
>
@@ -4010,6 +4013,9 @@ exports[`Command List renders a command 1`] = `
40104013
<div
40114014
class="ReactModalPortal"
40124015
/>
4016+
<div
4017+
class="ReactModalPortal"
4018+
/>
40134019
<div
40144020
class="ReactModalPortal"
40154021
>
@@ -7770,6 +7776,9 @@ exports[`Opening the palette displays the suggestion list 1`] = `
77707776
<div
77717777
class="ReactModalPortal"
77727778
/>
7779+
<div
7780+
class="ReactModalPortal"
7781+
/>
77737782
<div
77747783
class="ReactModalPortal"
77757784
>
@@ -9413,6 +9422,9 @@ exports[`Opening the palette displays the suggestion list 1`] = `
94139422
<div
94149423
class="ReactModalPortal"
94159424
/>
9425+
<div
9426+
class="ReactModalPortal"
9427+
/>
94169428
<div
94179429
class="ReactModalPortal"
94189430
>
@@ -13419,6 +13431,9 @@ exports[`props.reactModalParentSelector should render render reat-modal in the t
1341913431
<div
1342013432
class="ReactModalPortal"
1342113433
/>
13434+
<div
13435+
class="ReactModalPortal"
13436+
/>
1342213437
<div
1342313438
class="ReactModalPortal"
1342413439
>
@@ -15013,6 +15028,9 @@ exports[`props.reactModalParentSelector should render render reat-modal in the t
1501315028
<div
1501415029
class="ReactModalPortal"
1501515030
/>
15031+
<div
15032+
class="ReactModalPortal"
15033+
/>
1501615034
<div
1501715035
class="ReactModalPortal"
1501815036
>
@@ -18421,6 +18439,9 @@ exports[`props.theme should render a custom theme 1`] = `
1842118439
<div
1842218440
class="ReactModalPortal"
1842318441
/>
18442+
<div
18443+
class="ReactModalPortal"
18444+
/>
1842418445
<div
1842518446
class="ReactModalPortal"
1842618447
>
@@ -19233,6 +19254,9 @@ exports[`props.theme should render a custom theme 1`] = `
1923319254
<div
1923419255
class="ReactModalPortal"
1923519256
/>
19257+
<div
19258+
class="ReactModalPortal"
19259+
/>
1923619260
<div
1923719261
class="ReactModalPortal"
1923819262
>

‎src/command-palette.js‎

Lines changed: 42 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -317,35 +317,40 @@ class CommandPalette extends React.Component {
317317
reactModalParentSelector,
318318
shouldReturnFocusAfterClose,
319319
} = this.props;
320-
return (
321-
<div className="react-command-palette">
322-
<PaletteTrigger
323-
onClick={this.handleOpenModal}
324-
trigger={trigger}
325-
theme={theme.trigger}
326-
/>
327-
<ReactModal
328-
appElement={document.body}
329-
isOpen={showModal}
330-
parentSelector={() =>
331-
document.querySelector(reactModalParentSelector)
332-
}
333-
onAfterOpen={this.afterOpenModal}
334-
onRequestClose={this.handleCloseModal}
335-
shouldReturnFocusAfterClose={shouldReturnFocusAfterClose}
336-
className={theme.modal}
337-
overlayClassName={theme.overlay}
338-
contentLabel="Command Palette"
339-
closeTimeoutMS={
340-
1
341-
/* otherwise the modal is not closed when
342-
suggestion is selected by pressing Enter */
343-
}
344-
>
345-
{this.renderAutoSuggest()}
346-
</ReactModal>
347-
</div>
348-
);
320+
const modal = <ReactModal
321+
appElement={document.body}
322+
isOpen={showModal}
323+
parentSelector={() =>
324+
document.querySelector(reactModalParentSelector)
325+
}
326+
onAfterOpen={this.afterOpenModal}
327+
onRequestClose={this.handleCloseModal}
328+
shouldReturnFocusAfterClose={shouldReturnFocusAfterClose}
329+
className={theme.modal}
330+
overlayClassName={theme.overlay}
331+
contentLabel="Command Palette"
332+
closeTimeoutMS={
333+
1
334+
/* otherwise the modal is not closed when
335+
suggestion is selected by pressing Enter */
336+
}
337+
>
338+
{this.renderAutoSuggest()}
339+
</ReactModal>
340+
if(trigger !== null) {
341+
return (
342+
<div className="react-command-palette">
343+
<PaletteTrigger
344+
onClick={this.handleOpenModal}
345+
trigger={trigger}
346+
theme={theme.trigger}
347+
/>
348+
{modal}
349+
</div>
350+
);
351+
}
352+
return modal
353+
349354
}
350355

351356
renderInlineCommandPalette() {
@@ -443,17 +448,17 @@ CommandPalette.propTypes = {
443448
* first suggestion. Defaults to false. */
444449
highlightFirstSuggestion: PropTypes.bool,
445450

446-
/** When suggestion is clicked, react-autosuggest needs to populate the input element
451+
/** When suggestion is clicked, react-autosuggest needs to populate the input element
447452
* based on the clicked suggestion. Teach react-autosuggest how to calculate the
448-
* input value for every given suggestion. By default the highlighed suggestion will be
453+
* input value for every given suggestion. By default the highlighed suggestion will be
449454
* displayed */
450-
getSuggestionValue: PropTypes.func,
455+
getSuggestionValue: PropTypes.func,
451456

452457
/** options controls how fuzzy search is configured see [fuzzysort options]
453458
* (https://github.com/farzher/fuzzysort#options) */
454459
options: PropTypes.object,
455460

456-
/** a function that filters the search query. If this prop is not used the default
461+
/** a function that filters the search query. If this prop is not used the default
457462
* behavior will search the input exactly entered */
458463
filterSearchQuery: PropTypes.func,
459464

@@ -493,7 +498,10 @@ CommandPalette.propTypes = {
493498
* clicked. If a custom trigger is not set, then by default a button will be used. If a
494499
* custom component or string is provided then it will automatically be wrapped inside
495500
* an accessible div which will allow it be keyboard accessible, clickable and focusable
496-
* for assistive technologies. */
501+
* for assistive technologies.
502+
*
503+
* Setting this to null prevents the trigger from rendering. Useful when the command palette will be opened externally.
504+
* */
497505
trigger: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
498506

499507
/** spinner a string or a React.ComponentType that is displayed when the user selects

‎src/command-palette.test.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -264,6 +264,16 @@ describe("props.inputFilter", () => {
264264
});
265265
});
266266

267+
describe("props.trigger", () => {
268+
it("should not render the trigger when null", () => {
269+
const {container} = render(<CommandPalette commands={mockCommands} trigger={null} open />);
270+
const commandPalette = container.getElementsByClassName('react-command-palette');
271+
const firstSuggestion = screen.queryAllByText('Start All Data Imports')[0];
272+
expect(firstSuggestion).toBeInTheDocument();
273+
expect(commandPalette.length).toBe(0)
274+
});
275+
});
276+
267277
describe("props.theme", () => {
268278
it("should render a custom theme", () => {
269279
const commandPalette = mount(

‎src/index.stories.js‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -133,13 +133,13 @@ storiesOf("Command Palette", module)
133133
}
134134
}
135135
)
136-
.add("is toggled open", () =>
136+
.add("is toggled open", () =>
137137
{
138138
const open = boolean("Open", true);
139139
return <CommandPalette commands={commands} open={open} />
140140
}, {
141141
info: {
142-
text: `Adding an _open_ prop will force the command palette to be displayed
142+
text: `Adding an _open_ prop will force the command palette to be displayed
143143
when it mounts. By default command palette will be hidden until the _trigger_
144144
is cliked.`
145145
}
@@ -223,12 +223,12 @@ storiesOf("Command Palette", module)
223223
() => <CommandPalette commands={commands} trigger="Click Me!" />,
224224
{
225225
info: {
226-
text: `Use the _trigger_ prop to customize the component that the user
226+
text: `Use the _trigger_ prop to customize the component that the user
227227
will click to open the command palette. The property accepts either a
228-
string or a React component. Note that component will be wrapped with a
228+
string or a React component. Note that component will be wrapped with a
229229
_div_ that behaves like a button. So there is no need to add any events.
230230
This component will also be focusable and may be activated via keyboard
231-
to maintain accessibility. If a trigger is not specified then the a
231+
to maintain accessibility. If a trigger is not specified then the a
232232
default command palette will be used.
233233
`
234234
}
@@ -346,4 +346,9 @@ storiesOf("Command Palette", module)
346346
<div id="main">
347347
<CommandPalette commands={commands} reactModalParentSelector="#main" open />
348348
</div>
349+
))
350+
.add("with trigger null", () => (
351+
<div id="main">
352+
<CommandPalette commands={commands} reactModalParentSelector="#main" trigger={null} open />
353+
</div>
349354
));

0 commit comments

Comments
 (0)