Merge 7624963 into fd674e3

uxcore · Feb 25, 2019 · b91c3ff · b91c3ff
2 parents fd674e3 + 7624963
commit b91c3ff
Show file tree

Hide file tree

Showing 4 changed files with 203 additions and 26 deletions.
diff --git a/HISTORY.md b/HISTORY.md
@@ -1,5 +1,9 @@
 # history
 
+## 0.3.4 / 2019-02-25
+
+`FIX` scroll event can not occurred when nav items is async
+
 ## 0.3.3 / 2019-02-16
 
 `NEW` new feature: spot bar

diff --git a/demo/FloatNavDemo.js b/demo/FloatNavDemo.js
@@ -18,20 +18,14 @@ class Demo extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
+      content: null,
+      nav: [],
     };
     this.handleClick = this.handleClick.bind(this);
   }
 
-  handleClick(link, orderNumber) {
-    console.log('handleClick', link, orderNumber);
-  }
-
-  handleActive() {
-    console.log(arguments);
-  }
-
-  renderArticle() {
-    return (
+  setContenAsyncly() {
+    const content = (
       <div className="article">
         <h1>唐纳德·特朗普</h1>
         <div>唐纳德·特朗普，第45任美国总统，1946年6月14日生于美国纽约，政治家、商人、作家、主持人。特朗普1968年从宾夕法尼亚大学沃顿商学院毕业后，进入其父的房地产公司工作，并在1971年开始掌管公司运营。在随后几十年间，特朗普开始建立自己的房地产王国，人称“地产之王”。</div>
@@ -81,6 +75,172 @@ class Demo extends React.Component {
         <div>普京：毫无疑问，他很聪明且才能出众”，“他很有才华、人格出众”。</div>
       </div>
     );
+    this.setState({
+      content,
+    });
+  }
+
+  setNavAsyncly() {
+    const nav = [
+      {
+        title: '人物经历',
+        id: 'p1',
+        children: [
+          {
+            title: '创业经历',
+            id: 'p1-1',
+            children: [
+              {
+                title: '创业经历'
+              }
+            ],
+          }
+        ],
+      },
+      {
+        title: '人物经历',
+        id: 'p1',
+        children: [
+          {
+            title: '创业经历',
+            id: 'p1-1',
+            children: [
+              {
+                title: '创业经历'
+              }
+            ],
+          }
+        ],
+      },
+      {
+        title: '人物经历',
+        id: 'p1',
+        children: [
+          {
+            title: '创业经历',
+            id: 'p1-1',
+            children: [
+              {
+                title: '创业经历'
+              }
+            ],
+          }
+        ],
+      },
+      {
+        title: '人物经历',
+        id: 'p1',
+        children: [
+          {
+            title: '创业经历',
+            id: 'p1-1',
+            children: [
+              {
+                title: '创业经历'
+              }
+            ],
+          }
+        ],
+      },
+      {
+        title: '人物经历',
+        id: 'p1',
+        children: [
+          {
+            title: '创业经历',
+            id: 'p1-1',
+            children: [
+              {
+                title: '创业经历'
+              }
+            ],
+          }
+        ],
+      },
+      {
+        title: '人物经历',
+        id: 'p1',
+        children: [
+          {
+            title: '创业经历',
+            id: 'p1-1',
+            children: [
+              {
+                title: '创业经历'
+              }
+            ],
+          }
+        ],
+      },
+      {
+        title: '人物经历',
+        id: 'p1',
+        children: [
+          {
+            title: '创业经历',
+            id: 'p1-1',
+            children: [
+              {
+                title: '创业经历'
+              }
+            ],
+          }
+        ],
+      },
+      {
+        title: '人物经历',
+        id: 'p1',
+        children: [
+          {
+            title: '创业经历',
+            id: 'p1-1',
+            children: [
+              {
+                title: '创业经历'
+              }
+            ],
+          }
+        ],
+      }
+    ];
+    this.setState({
+      nav,
+    });
+  }
+
+  handleClick(link, orderNumber) {
+    console.log('handleClick', link, orderNumber);
+  }
+
+  handleActive() {
+    console.log(arguments);
+  }
+
+  componentDidMount() {
+    setTimeout(() => {
+      this.setContenAsyncly();
+    }, 2000);
+    setTimeout(() => {
+      this.setNavAsyncly();
+    }, 1000);
+  }
+
+  renderNavItems(list, prefixIdx) {
+    let { nav } = this.state;
+    if (list) {
+      nav = list;
+    }
+    if (nav && nav.length) {
+      return nav.map((n, idx) => (
+        <NavItem key={idx} title={n.title} anchor={`${prefixIdx}-${idx}`}>
+          {
+            n.children ? this.renderNavItems(n.children, idx) : null
+          }
+        </NavItem>
+      ));
+    } else {
+      return null;
+    }
   }
 
   render() {
@@ -89,11 +249,14 @@ class Demo extends React.Component {
         <FloatNav
           ref={node => (this.nav = node)}
           showOrderNumber
-          height={250}
-          content={this.renderArticle()}
+          height={500}
+          content={this.state.content}
           hoverable
         >
-          <NavItem title={'人物经历'} anchor={'p1'}>
+          {
+            this.renderNavItems()
+          }
+          {/*<NavItem title={'人物经历'} anchor={'p1'}>
             <NavItem title={'创业经历'} anchor={'p1-1'} onClick={this.handleClick}>
               <NavItem title={'创业经历2'} anchor={'p1-1-1'} />
             </NavItem>
@@ -112,7 +275,7 @@ class Demo extends React.Component {
             <NavItem title={'第三任妻子'} anchor={'p3-3'} />
             <NavItem title={'五个子女'} anchor={'p3-4'} />
           </NavItem>
-          <NavItem title={'人物评价'} anchor={'p4'} />
+          <NavItem title={'人物评价'} anchor={'p4'} />*/}
         </FloatNav>
       </div>
     );

diff --git a/src/FloatNav.jsx b/src/FloatNav.jsx
@@ -82,6 +82,7 @@ class FloatNav extends Component {
       anchors,
       trigger: '',
       spotActive: false,
+      spotHeight: 0,
     };
     this.handleScrollUp = this.handleScrollUp.bind(this);
     this.handleScrollDown = this.handleScrollDown.bind(this);
@@ -97,14 +98,19 @@ class FloatNav extends Component {
     this.handlePageScroll();
   }
 
-
   componentDidUpdate(prevProps) {
     if (prevProps.height !== this.props.height) {
       this.updateComponentHeight();
     }
     if (this.activeItem) {
       this.updateScroll();
     }
+    if (this.spotWrap && this.state.spotHeight !== this.spotWrap.offsetHeight) {
+      this.updateComponentHeight();
+      this.setState({
+        spotHeight: this.spotWrap.offsetHeight,
+      });
+    }
   }
 
   componentWillUnmount() {
@@ -336,25 +342,26 @@ class FloatNav extends Component {
       transform: `translateY(-${scrollTop}px)`,
     };
 
+    const innerStyle = {
+      height: height - 40,
+      width: width - 10,
+      position: 'relative',
+      marginTop: 20,
+      marginRight: 10,
+    };
     if (hoverable) {
       renderProps.className = classnames(renderProps.className, 'hoverable');
       renderProps.style.right = 0;
+      renderProps.style.top = '50%';
+      renderProps.style.marginTop = -(renderProps.style.height / 2);
       renderProps.onMouseLeave = () => {
         this.setState({ spotActive: false });
       };
     }
 
     let result = (
       <div {...renderProps}>
-        <div
-          style={{
-            height: height - 40,
-            width: width - 10,
-            position: 'relative',
-            marginTop: 20,
-            marginRight: 10,
-          }}
-        >
+        <div style={innerStyle}>
           {this.renderScrollBar()}
           <div
             className={classnames(`${prefixCls}-container`)}
@@ -384,7 +391,10 @@ class FloatNav extends Component {
         >
           <div
             className={`${prefixCls}-spot-wrap`}
-            style={{ top: (offset.top || 200) + 16 }}
+            ref={c => this.spotWrap = c }
+            style={{
+              marginTop: -(this.state.spotHeight / 2),
+            }}
             onMouseEnter={() => {
               this.setState({ spotActive: true });
             }}

diff --git a/src/FloatNav.less b/src/FloatNav.less
@@ -164,7 +164,7 @@
     position: fixed;
     right: 20px;
     z-index: 1;
-    top: 200px;
+    top: 50%;
     transition: ease .3s;
     .@{__prefixCls}-control {
       position: static;