Skip to content

Add click outside functionality to the editor insert menu. #510

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
kopepasah wants to merge 8 commits into from
Closed

Add click outside functionality to the editor insert menu. #510

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
7e3b5c5
376 Add click outside event handler for closing menu.
kopepasah Apr 26, 2017
c16f4ad
Merge branch 'master' into xwp/add/376-dismiss-switcher
kopepasah Apr 26, 2017
3bdd444
376 Remove unused parameter.
kopepasah Apr 26, 2017
50affb4
Merge branch 'master' into xwp/add/376-dismiss-switcher
kopepasah Apr 26, 2017
aa606db
Merge branch 'master' into xwp/add/376-dismiss-switcher
kopepasah Apr 27, 2017
10d0a08
376 Modify block adder functionality.
kopepasah Apr 28, 2017
e924dad
Merge branch 'master' into xwp/add/376-dismiss-switcher
kopepasah Apr 28, 2017
9052248
376 Add curly brace to new line and remove unnecessary parentheses.
kopepasah Apr 28, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 31 additions & 12 deletions editor/components/inserter/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,36 +8,55 @@ class Inserter extends wp.element.Component {
constructor() {
super( ...arguments );
this.toggle = this.toggle.bind( this );
this.close = this.close.bind( this );
this.update = true;
Copy link
Member Author

@kopepasah kopepasah Apr 28, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added to determine if we should run an update on the component (initial state is true).


this.state = {
opened: false
toggle: false
};
}

toggle() {
this.setState( {
opened: ! this.state.opened
} );
shouldComponentUpdate( nextProps, nextState ) {
if ( nextState.toggle && ! this.update ) {
this.update = true;

this.setState( {
toggle: false
} );

return false;
}

return true;
}

close() {
this.setState( {
opened: false
toggle( e ) {
const toggle = this.inserter.getElementsByClassName( 'editor-inserter__toggle' );

if ( 'undefined' !== typeof e.currentTarget && toggle[ 0 ] === e.currentTarget.activeElement ) {
Copy link
Member Author

@kopepasah kopepasah Apr 28, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Verifies that the toggle clicked is not a different toggle on the page.

this.update = false;
}

this.setState( ( prevState ) => {
return {
toggle: ! prevState.toggle
};
} );
}

render() {
const { opened } = this.state;
const { toggle } = this.state;
const { position } = this.props;

return (
<div className="editor-inserter">
<div className="editor-inserter" ref={ ( inserter ) => {
Copy link
Member Author

@kopepasah kopepasah Apr 28, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added a ref to determine if the current button clicked (when menu is open) is the same button which opened the menu.

this.inserter = inserter;
} }>
<IconButton
icon="insert"
label={ wp.i18n.__( 'Insert block' ) }
onClick={ this.toggle }
className="editor-inserter__toggle" />
{ opened && <InserterMenu position={ position } onSelect={ this.close } /> }
{ toggle && <InserterMenu position={ position } onToggle={ this.toggle } /> }
</div>
);
}
Expand Down
11 changes: 8 additions & 3 deletions editor/components/inserter/menu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
* External dependencies
*/
import { connect } from 'react-redux';
import clickOutside from 'react-click-outside';

/**
* Internal dependencies
Expand All @@ -18,16 +19,20 @@ class InserterMenu extends wp.element.Component {
this.filter = this.filter.bind( this );
}

handleClickOutside( e ) {
Copy link
Member

@aduth aduth Apr 26, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

CI is unhappy about the unused variable here (e).

this.props.onToggle( e );
}

filter( event ) {
this.setState( {
filterValue: event.target.value
} );
}

selectBlock( slug ) {
return () => {
return ( e ) => {
this.props.onInsertBlock( slug );
this.props.onSelect();
this.props.onToggle( e );
this.setState( { filterValue: '' } );
};
}
Expand Down Expand Up @@ -93,4 +98,4 @@ export default connect(
} );
}
} )
)( InserterMenu );
)( clickOutside( InserterMenu ) );
4 changes: 2 additions & 2 deletions languages/gutenberg.pot
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,11 +82,11 @@ msgstr ""
msgid "Text"
msgstr ""

#: editor/components/inserter/index.js:37
#: editor/components/inserter/index.js:56
msgid "Insert block"
msgstr ""

#: editor/components/inserter/menu.js:77
#: editor/components/inserter/menu.js:82
msgid "Search…"
msgstr ""

Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@
"lodash": "^4.17.4",
"react": "^15.5.4",
"react-autosize-textarea": "^0.4.2",
"react-click-outside": "^2.3.0",
"react-dom": "^15.5.4",
"react-redux": "^5.0.4",
"react-slot-fill": "^1.0.0-alpha.11",
Expand Down