fix: custom inkBar style. close #71

react-component · Jul 4, 2017 · be54d77 · be54d77
1 parent 6809468
commit be54d77
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 7 deletions.
diff --git a/examples/swipeInkTabBar.js b/examples/swipeInkTabBar.js
@@ -106,6 +106,48 @@ const Component = () => (
         {makeMultiTabPane(11)}
       </Tabs>
     </div>
+    <h4>custom inkBar style</h4>
+    <div>
+      <Tabs
+        renderTabBar={() =>
+          <SwipeableInkTabBar
+            pageSize={5}
+            speed={5}
+            styles={{
+              inkBar: {
+                width: '20px',
+                backgroundColor: 'red',
+              },
+            }}
+          />
+        }
+        renderTabContent={() => <TabContent />}
+        defaultActiveKey="8"
+      >
+        {makeMultiTabPane(11)}
+      </Tabs>
+    </div>
+    <h4>custom inkBar style, tabBarPosition='left'</h4>
+    <div>
+      <Tabs
+        tabBarPosition="left"
+        pageSize={3}
+        renderTabBar={() =>
+          <SwipeableInkTabBar
+            styles={{
+              inkBar: {
+                backgroundColor: 'red',
+                height: '20px',
+              },
+            }}
+          />
+        }
+        renderTabContent={() => <TabContent/>}
+        defaultActiveKey="2"
+      >
+        {makeMultiTabPane(11)}
+      </Tabs>
+    </div>
   </div>
 );
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rc-tabs",
-  "version": "8.0.0",
+  "version": "8.0.1",
   "description": "tabs ui component for react",
   "keywords": [
     "react",

diff --git a/src/InkTabBarMixin.js b/src/InkTabBarMixin.js
@@ -39,6 +39,7 @@ function offset(elem) {
 
 function componentDidUpdate(component, init) {
   const refs = component.refs;
+  const { styles } = component.props;
   const wrapNode = refs.nav || refs.root;
   const containerOffset = offset(wrapNode);
   const inkBarNode = refs.inkBar;
@@ -54,29 +55,43 @@ function componentDidUpdate(component, init) {
     const tabOffset = offset(tabNode);
     const transformSupported = isTransformSupported(inkBarNodeStyle);
     if (tabBarPosition === 'top' || tabBarPosition === 'bottom') {
-      const left = tabOffset.left - containerOffset.left;
+      let left = tabOffset.left - containerOffset.left;
+      let width = tabNode.offsetWidth;
+      if (styles.inkBar && styles.inkBar.width !== undefined) {
+        width = parseFloat(styles.inkBar.width, 10);
+        if (width) {
+          left = left + (tabNode.offsetWidth - width) / 2;
+        }
+      }
       // use 3d gpu to optimize render
       if (transformSupported) {
         setTransform(inkBarNodeStyle, `translate3d(${left}px,0,0)`);
-        inkBarNodeStyle.width = `${tabNode.offsetWidth}px`;
+        inkBarNodeStyle.width = `${width}px`;
         inkBarNodeStyle.height = '';
       } else {
         inkBarNodeStyle.left = `${left}px`;
         inkBarNodeStyle.top = '';
         inkBarNodeStyle.bottom = '';
-        inkBarNodeStyle.right = `${wrapNode.offsetWidth - left - tabNode.offsetWidth}px`;
+        inkBarNodeStyle.right = `${wrapNode.offsetWidth - left - width}px`;
       }
     } else {
-      const top = tabOffset.top - containerOffset.top;
+      let top = tabOffset.top - containerOffset.top;
+      let height = tabNode.offsetHeight;
+      if (styles.inkBar && styles.inkBar.height !== undefined) {
+        height = parseFloat(styles.inkBar.height, 10);
+        if (height) {
+          top = top + (tabNode.offsetHeight - height) / 2;
+        }
+      }
       if (transformSupported) {
         setTransform(inkBarNodeStyle, `translate3d(0,${top}px,0)`);
-        inkBarNodeStyle.height = `${tabNode.offsetHeight}px`;
+        inkBarNodeStyle.height = `${height}px`;
         inkBarNodeStyle.width = '';
       } else {
         inkBarNodeStyle.left = '';
         inkBarNodeStyle.right = '';
         inkBarNodeStyle.top = `${top}px`;
-        inkBarNodeStyle.bottom = `${wrapNode.offsetHeight - top - tabNode.offsetHeight}px`;
+        inkBarNodeStyle.bottom = `${wrapNode.offsetHeight - top - height}px`;
       }
     }
   }