Fix about MakeWidget position

AhKi · Nov 25, 2018 · f99301d · f99301d
1 parent f4332e5
commit f99301d
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 69 deletions.
diff --git a/app/renderer/pages/widget/components/MakeNotice/MakeNotice.scss b/app/renderer/pages/widget/components/MakeNotice/MakeNotice.scss
@@ -28,7 +28,3 @@
   text-decoration: underline;
   margin-right: 5px;
 }
-
-.MakeNotice__bar--hidden {
-  display: none;
-}
diff --git a/app/renderer/pages/widget/components/MakeNotice/index.jsx b/app/renderer/pages/widget/components/MakeNotice/index.jsx
@@ -1,73 +1,32 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
 import i18n from 'constants/i18n';
-import EditTab from '../EditTab';
 import './MakeNotice.scss';
 
 const propTypes = {
-  currentUrl: PropTypes.string,
-  id: PropTypes.string,
-  title: PropTypes.string,
-  onCheckUrlValidation: PropTypes.func,
+  onCloseNotice: PropTypes.func,
 };
 const defaultProps = {
-  currentUrl: '',
-  id: '',
-  title: '',
-  onCheckUrlValidation() {},
+  onCloseNotice() {},
 };
 
 class MakeNotice extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isOpenTab: false,
-    };
-    this.handleToggleTab = this.handleToggleTab.bind(this);
-  }
-
-  handleToggleTab() {
-    this.setState(prevState => ({
-      isOpenTab: !prevState.isOpenTab,
-    }));
-  }
-
-
   render() {
-    const { isOpenTab } = this.state;
-    const {
-      currentUrl,
-      id,
-      title,
-      onCheckUrlValidation,
-    } = this.props;
+    const { onCloseNotice } = this.props;
     const text = i18n().widget;
-    const barClassName = cx('MakeNotice__bar', {
-      'MakeNotice__bar--hidden': isOpenTab,
-    });
 
-    return [
-      <div className={barClassName} key="bar">
+    return (
+      <div className="MakeNotice__bar" key="bar">
         <p className="MakeNotice__bar-text">{text.makeBarContent}</p>
         <button
           className="MakeNotice__bar-btn"
           type="button"
-          onClick={this.handleToggleTab}
+          onClick={onCloseNotice}
         >
           {text.makeWidget} {'>'}
         </button>
-      </div>,
-      <EditTab
-        currentUrl={currentUrl}
-        hidden={!isOpenTab}
-        key="tab"
-        id={id}
-        title={title}
-        onCheckUrlValidation={onCheckUrlValidation}
-        onCloseTab={this.handleToggleTab}
-      />,
-    ];
+      </div>
+    );
   }
 }
 

diff --git a/app/renderer/pages/widget/components/WebWidget/WebWidget.spec.jsx b/app/renderer/pages/widget/components/WebWidget/WebWidget.spec.jsx
@@ -315,18 +315,36 @@ describe('test WebWidget', () => {
       expect(setState).toHaveBeenNthCalledWith(1, { newWindowURL: '' });
     });
 
-    it('test handleCloseNewWindowMenu', () => {
-      const widget = { id: 'mock-id' };
-      const onCancelEditWidget = jest.fn();
-      const component = getComponent({
-        widget,
-        onCancelEditWidget,
+    describe('test handleCancelEditWidget', () => {
+      it('when isEditProgress === true', () => {
+        const widget = { id: 'mock-id', isEditProgress: true };
+        const onCancelEditWidget = jest.fn();
+        const component = getComponent({
+          widget,
+          onCancelEditWidget,
+        });
+        component.instance().setState = setState;
+
+        const { handleCancelEditWidget } = component.instance();
+
+        handleCancelEditWidget();
+
+        expect(onCancelEditWidget).toHaveBeenNthCalledWith(1, 'mock-id');
+        expect(setState).toHaveBeenNthCalledWith(1, { isMakeMenuOpen: false });
+
+        onCancelEditWidget.mockClear();
+        component.instance().props = { widget: { id: 'mock-id', isEditProgress: false } };
+        handleCancelEditWidget();
+
+        expect(onCancelEditWidget).toHaveBeenCalledTimes(0);
+        expect(setState).toHaveBeenNthCalledWith(1, { isMakeMenuOpen: false });
       });
-      const { handleCancelEditWidget } = component.instance();
+    });
 
-      handleCancelEditWidget();
+    it('test handleCloseMakeNotice', () => {
+      wrapper.instance().handleCloseMakeNotice();
 
-      expect(onCancelEditWidget).toHaveBeenNthCalledWith(1, 'mock-id');
+      expect(setState).toHaveBeenNthCalledWith(1, { isMakeMenuOpen: true });
     });
 
     describe('test loadPage', () => {

diff --git a/app/renderer/pages/widget/components/WebWidget/index.jsx b/app/renderer/pages/widget/components/WebWidget/index.jsx
@@ -39,6 +39,7 @@ class WebWidget extends React.Component {
     currentUrl: '',
     isLoading: false,
     isSettingOpen: false,
+    isMakeMenuOpen: false,
     newWindowURL: null,
   };
   webViewRef = React.createRef();
@@ -165,7 +166,15 @@ class WebWidget extends React.Component {
   handleCancelEditWidget = () => {
     const { widget, onCancelEditWidget } = this.props;
 
-    onCancelEditWidget(widget.id);
+    this.setState({ isMakeMenuOpen: false });
+
+    if (widget.isEditProgress) {
+      onCancelEditWidget(widget.id);
+    }
+  };
+
+  handleCloseMakeNotice = () => {
+    this.setState({ isMakeMenuOpen: true });
   };
 
   loadPage = (loadUrl, userAgent) => {
@@ -188,6 +197,7 @@ class WebWidget extends React.Component {
     const {
       currentUrl,
       isLoading,
+      isMakeMenuOpen,
       newWindowURL,
     } = this.state;
     const {
@@ -196,6 +206,7 @@ class WebWidget extends React.Component {
       onMakeWidget,
       onUpdateInfo,
     } = this.props;
+    const isInfoEdit = widget.isEditProgress || (widget.isMakeProgress && isMakeMenuOpen);
 
     return (
       <div className="WebWidget">
@@ -205,12 +216,10 @@ class WebWidget extends React.Component {
           isLoading={isLoading}
           onToggleSetting={this.handleToggleSettingMenu}
         />
-        {widget.isMakeProgress && (
+        {widget.isMakeProgress && !isMakeMenuOpen && (
           <MakeNotice
-            currentUrl={currentUrl}
-            id={widget.id}
-            title={text.addWidget}
             onCheckUrlValidation={onCheckUrlValidation}
+            onCloseNotice={this.handleCloseMakeNotice}
           />
         )}
         {widget.reloadInterval ? (
@@ -242,12 +251,12 @@ class WebWidget extends React.Component {
               slashed: true,
             })}
           />
-          {widget.isEditProgress && (
+          {isInfoEdit && (
             <EditTab
               currentUrl={currentUrl}
               id={widget.id}
               name={widget.name}
-              title={text.editWidget}
+              title={widget.isEditProgress ? text.editWidget : text.addWidget}
               onCloseTab={this.handleCancelEditWidget}
               onCheckUrlValidation={onCheckUrlValidation}
             />