onClose tag edit modal

src/client/js/components/Page/TagEditModal.jsx

@@ -28,11 +28,14 @@ export default class TagEditModal extends React.Component {
   }
 
   closeModalHandler() {
+    if (this.props.onClose == null) {
+      return;
+    }
+    this.props.onClose();
   }
 
   async handleSubmit() {
     this.props.onTagsUpdated(this.state.tags);
-
   }
 
   render() {
@@ -59,5 +62,6 @@ TagEditModal.propTypes = {
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
 
   isOpen: PropTypes.bool.isRequired,
+  onClose: PropTypes.func,
   onTagsUpdated: PropTypes.func.isRequired,
 };

src/client/js/components/Page/TagLabels.jsx

@@ -17,11 +17,11 @@ class TagLabels extends React.Component {
     super(props);
 
     this.state = {
-      showTagEditor: false,
       isTagEditModalShown: false,
     };
 
-    this.showEditorModal = this.showEditorModal.bind(this);
+    this.openEditorModal = this.openEditorModal.bind(this);
+    this.closeEditorModal = this.closeEditorModal.bind(this);
     this.tagsUpdatedHandler = this.tagsUpdatedHandler.bind(this);
   }
 
@@ -35,10 +35,14 @@ class TagLabels extends React.Component {
     return (isEditorMode) ? this.props.editorContainer.state.tags : this.props.pageContainer.state.tags;
   }
 
-  showEditorModal() {
+  openEditorModal() {
     this.setState({ isTagEditModalShown: true });
   }
 
+  closeEditorModal() {
+    this.setState({ isTagEditModalShown: false });
+  }
+
   async tagsUpdatedHandler(tags) {
     const { appContainer, editorContainer, isEditorMode } = this.props;
 
@@ -107,20 +111,20 @@ class TagLabels extends React.Component {
     return (
       <div className="tag-labels">
         {tags.length === 0 && (
-          <a className="btn btn-link btn-edit-tags no-tags p-0 text-muted" onClick={this.showEditorModal}>
+          <a className="btn btn-link btn-edit-tags no-tags p-0 text-muted" onClick={this.openEditorModal}>
             { t('Add tags for this page') } <i className="manage-tags ml-2 icon-plus"></i>
           </a>
         )}
         {tagElements}
         {tags.length > 0 && (
-          <a className="btn btn-link btn-edit-tags p-0 text-muted" onClick={this.showEditorModal}>
+          <a className="btn btn-link btn-edit-tags p-0 text-muted" onClick={this.openEditorModal}>
             <i className="manage-tags ml-2 icon-plus"></i> { t('Edit tags for this page') }
           </a>
         )}
         <TagEditModal
           isOpen={this.state.isTagEditModalShown}
+          onClose={this.closeEditorModal}
           appContainer={this.props.appContainer}
-          show={this.state.showTagEditor}
           onTagsUpdated={this.tagsUpdatedHandler}
         >
         </TagEditModal>