Merge pull request #1254 from ParabolInc/edit-hotfix

fix #1252, notice the menus can't be selected
ParabolInc · Aug 16, 2017 · 0a30625 · 0a30625
2 parents d0a90be + bfe5614
commit 0a30625
Show file tree

Hide file tree

Showing 6 changed files with 129 additions and 104 deletions.
diff --git a/src/universal/components/OutcomeOrNullCard/OutcomeOrNullCard.js b/src/universal/components/OutcomeOrNullCard/OutcomeOrNullCard.js
@@ -1,3 +1,4 @@
+import {convertFromRaw} from 'draft-js';
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import NullCard from 'universal/components/NullCard/NullCard';
@@ -13,20 +14,34 @@ export default class OutcomeOrNullCard extends Component {
     outcome: PropTypes.object
   };
 
+  state = {
+    contentState: convertFromRaw(JSON.parse(this.props.outcome.content))
+  };
+
   shouldComponentUpdate(nextProps) {
     return Boolean(!nextProps.isPreview ||
       nextProps.outcome.status !== this.props.outcome.status ||
       nextProps.outcome.content !== this.props.outcome.content
     );
   }
 
+  componentWillUpdate(nextProps) {
+    if (nextProps.outcome.content !== this.props.outcome.content) {
+      this.setState({
+        contentState: convertFromRaw(JSON.parse(nextProps.outcome.content))
+      });
+    }
+  }
+
   render() {
     const {area, hasDragStyles, isAgenda, myUserId, outcome, isDragging} = this.props;
-    const {content, createdBy, teamMember: {preferredName}} = outcome;
-    const showOutcome = content || createdBy === myUserId;
+    const {contentState} = this.state;
+    const {createdBy, teamMember: {preferredName}} = outcome;
+    const showOutcome = contentState.hasText() || createdBy === myUserId;
     return showOutcome ?
       <OutcomeCardContainer
         area={area}
+        contentState={contentState}
         hasDragStyles={hasDragStyles}
         isDragging={isDragging}
         isAgenda={isAgenda}

diff --git a/src/universal/components/ProjectEditor/ProjectEditor.js b/src/universal/components/ProjectEditor/ProjectEditor.js
@@ -38,9 +38,7 @@ class ProjectEditor extends Component {
 
   componentDidMount() {
     const {editorState} = this.props;
-    const text = editorState.getCurrentContent().getPlainText();
-
-    if (text === '') {
+    if (!editorState.getCurrentContent().hasText()) {
       // don't pull it from this.props because react will mutate this.props to our advantage
       setTimeout(() => this.props.editorRef.focus());
     }

diff --git a/src/universal/modules/menu/components/AsyncMenu/AsyncMenu.js b/src/universal/modules/menu/components/AsyncMenu/AsyncMenu.js
@@ -1,6 +1,6 @@
 import {css} from 'aphrodite-local-styles/no-important';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, {Component} from 'react';
 import portal from 'react-portal-hoc';
 import {TransitionGroup} from 'react-transition-group';
 import AnimatedFade from 'universal/components/AnimatedFade';
@@ -10,42 +10,60 @@ import appTheme from 'universal/styles/theme/appTheme';
 import ui from 'universal/styles/ui';
 import withStyles from 'universal/styles/withStyles';
 
-const AsyncMenu = (props) => {
-  const {
-    closePortal,
-    coords,
-    maxWidth,
-    maxHeight,
-    Mod,
-    setCoords,
-    setMenuRef,
-    styles,
-    queryVars
-  } = props;
+class AsyncMenu extends Component {
+  componentWillMount() {
+    this.toggleOpen();
+  }
 
-  return (
-    <div className={css(styles.menuBlock)} style={coords} ref={setMenuRef}>
-      <div className={css(styles.menu)}>
-        <TransitionGroup appear style={{overflow: 'hidden'}}>
-          {Mod ?
-            <AnimatedFade key="1">
-              <Mod
-                {...queryVars}
-                maxHeight={maxHeight}
-                maxWidth={maxWidth}
-                closePortal={closePortal}
-                setCoords={setCoords}
-              />
-            </AnimatedFade> :
-            <AnimatedFade key="2" exit={false} >
-              <LoadingComponent height={'5rem'} width={maxWidth} />
-            </AnimatedFade>
-          }
-        </TransitionGroup>
+  componentWillUnmount() {
+    this.toggleOpen();
+  }
+
+  toggleOpen() {
+    const {toggleMenuState} = this.props;
+    if (toggleMenuState) {
+      toggleMenuState();
+    }
+  }
+
+  render() {
+    const {
+      closePortal,
+      coords,
+      maxWidth,
+      maxHeight,
+      Mod,
+      setCoords,
+      setMenuRef,
+      styles,
+      queryVars
+    } = this.props;
+
+    return (
+      <div className={css(styles.menuBlock)} style={coords} ref={setMenuRef}>
+        <div className={css(styles.menu)}>
+          <TransitionGroup appear style={{overflow: 'hidden'}}>
+            {Mod ?
+              <AnimatedFade key="1">
+                <Mod
+                  {...queryVars}
+                  maxHeight={maxHeight}
+                  maxWidth={maxWidth}
+                  closePortal={closePortal}
+                  setCoords={setCoords}
+                />
+              </AnimatedFade> :
+              <AnimatedFade key="2" exit={false}>
+                <LoadingComponent height={'5rem'} width={maxWidth} />
+              </AnimatedFade>
+            }
+          </TransitionGroup>
+        </div>
       </div>
-    </div>
-  );
-};
+    );
+  }
+}
+
 
 AsyncMenu.propTypes = {
   closePortal: PropTypes.func.isRequired,
@@ -58,10 +76,11 @@ AsyncMenu.propTypes = {
   maxWidth: PropTypes.number.isRequired,
   maxHeight: PropTypes.number.isRequired,
   Mod: PropTypes.any,
+  queryVars: PropTypes.object,
   setCoords: PropTypes.func.isRequired,
   setMenuRef: PropTypes.func.isRequired,
   styles: PropTypes.object,
-  queryVars: PropTypes.object
+  toggleMenuState: PropTypes.func
 };
 
 const styleThunk = (theme, {maxHeight, maxWidth}) => ({

diff --git a/src/universal/modules/outcomeCard/components/OutcomeCard/OutcomeCard.js b/src/universal/modules/outcomeCard/components/OutcomeCard/OutcomeCard.js
@@ -24,16 +24,13 @@ const OutcomeCard = (props) => {
     isAgenda,
     isDragging,
     isEditing,
-    handleCardBlur,
-    handleCardFocus,
-    handleCardMouseEnter,
-    handleCardMouseLeave,
     hasDragStyles,
     outcome,
     setEditorRef,
     setEditorState,
     styles,
-    teamMembers
+    teamMembers,
+    toggleMenuState
   } = props;
   const isPrivate = isProjectPrivate(outcome.tags);
   const isArchived = isProjectArchived(outcome.tags);
@@ -52,14 +49,7 @@ const OutcomeCard = (props) => {
   const {integration} = outcome;
   const {service} = integration || {};
   return (
-    <div
-      className={rootStyles}
-      onBlur={handleCardBlur}
-      onFocus={handleCardFocus}
-      onMouseEnter={handleCardMouseEnter}
-      onMouseLeave={handleCardMouseLeave}
-      tabIndex="-1"
-    >
+    <div className={rootStyles}>
       <ProjectWatermark service={service} />
       <div className={css(styles.contentBlock)}>
         <EditingStatusContainer
@@ -85,6 +75,7 @@ const OutcomeCard = (props) => {
           isPrivate={isPrivate}
           outcome={outcome}
           teamMembers={teamMembers}
+          toggleMenuState={toggleMenuState}
         />
       </div>
     </div>
@@ -98,10 +89,6 @@ OutcomeCard.propTypes = {
   cardHasHover: PropTypes.bool,
   cardHasFocus: PropTypes.bool,
   cardHasIntegration: PropTypes.bool,
-  handleCardBlur: PropTypes.func,
-  handleCardFocus: PropTypes.func,
-  handleCardMouseEnter: PropTypes.func,
-  handleCardMouseLeave: PropTypes.func,
   hasDragStyles: PropTypes.bool,
   isAgenda: PropTypes.bool,
   isDragging: PropTypes.bool,
@@ -117,7 +104,8 @@ OutcomeCard.propTypes = {
   setEditorRef: PropTypes.func.isRequired,
   setEditorState: PropTypes.func,
   styles: PropTypes.object,
-  teamMembers: PropTypes.array
+  teamMembers: PropTypes.array,
+  toggleMenuState: PropTypes.func.isRequired
 };
 
 const styleThunk = () => ({

diff --git a/src/universal/modules/outcomeCard/components/OutcomeCardFooter/OutcomeCardFooter.js b/src/universal/modules/outcomeCard/components/OutcomeCardFooter/OutcomeCardFooter.js
@@ -71,7 +71,8 @@ class OutcomeCardFooter extends Component {
       isPrivate,
       outcome,
       styles,
-      teamMembers
+      teamMembers,
+      toggleMenuState
     } = this.props;
     const {teamMember: owner, integration} = outcome;
     const {service} = integration || {};
@@ -119,6 +120,7 @@ class OutcomeCardFooter extends Component {
                 }}
                 targetAnchor={assignTargetAnchor}
                 toggle={ownerAvatar}
+                toggleMenuState={toggleMenuState}
               />
             }
           </div>
@@ -139,6 +141,7 @@ class OutcomeCardFooter extends Component {
                   }}
                   targetAnchor={targetAnchor}
                   toggle={<OutcomeCardFooterButton icon="github" />}
+                  toggleMenuState={toggleMenuState}
                 />
                 }
                 <AsyncMenuContainer
@@ -155,6 +158,7 @@ class OutcomeCardFooter extends Component {
                   }}
                   targetAnchor={targetAnchor}
                   toggle={<OutcomeCardFooterButton icon="ellipsis-v" />}
+                  toggleMenuState={toggleMenuState}
                 />
               </div>
             }
@@ -181,7 +185,8 @@ OutcomeCardFooter.propTypes = {
   outcome: PropTypes.object,
   showTeam: PropTypes.bool,
   styles: PropTypes.object,
-  teamMembers: PropTypes.array
+  teamMembers: PropTypes.array,
+  toggleMenuState: PropTypes.func.isRequired
 };
 
 const styleThunk = () => ({