Merge pull request #4 from trendmicro-frontend/fix/broken-tabpane-con…

…tent Fixed broken layout on first render
trendmicro-frontend · Aug 21, 2018 · 1c5d4c8 · 1c5d4c8
2 parents f2b912a + f75a0a8
commit 1c5d4c8
Show file tree

Hide file tree

Showing 9 changed files with 9,101 additions and 872 deletions.
diff --git a/.gitignore b/.gitignore
@@ -4,3 +4,4 @@ package-lock.json
 /.nyc_output
 /coverage
 /lib
+yarn.lock
diff --git a/dist/react-navs.css b/dist/react-navs.css
diff --git a/dist/react-navs.min.css b/dist/react-navs.min.css
diff --git a/docs/bundle.js b/docs/bundle.js
diff --git a/docs/bundle.js.map b/docs/bundle.js.map
diff --git a/docs/index.html b/docs/index.html
@@ -11,5 +11,5 @@
 </head>
 <body>
 <div id="container"></div>
-<script type="text/javascript" src="bundle.js?4fb8f4ffa1848784528d"></script></body>
+<script type="text/javascript" src="bundle.js?cc452d7b43cce65d3c29"></script></body>
 </html>
diff --git a/examples/LightTabs.jsx b/examples/LightTabs.jsx
@@ -1,8 +1,33 @@
 import React from 'react';
 import { MenuItem } from '@trendmicro/react-dropdown';
+import Table from '@trendmicro/react-table';
+import '@trendmicro/react-table/dist/react-table.css';
+
 import { Nav, NavItem, NavDropdown, TabContent, TabPane } from '../src';
 import { Section } from './layout';
 
+const columns1 = [
+    { title: 'Event Type', dataIndex: 'eventType1' },
+    { title: 'Affected Devices', dataIndex: 'affectedDevices1' },
+    { title: 'Detections', dataIndex: 'detections1', width: 800 }
+];
+
+const columns2 = [
+    { title: 'Event Type', dataIndex: 'eventType2' },
+    { title: 'Affected Devices', dataIndex: 'affectedDevices2' },
+    { title: 'Detections', dataIndex: 'detections2' },
+    { title: 'User', dataIndex: 'user' },
+    { title: 'Domain', dataIndex: 'domain' }
+];
+
+const columns3 = [
+    { title: 'Event Type', dataIndex: 'eventType3' },
+    { title: 'Affected Devices', dataIndex: 'affectedDevices3' },
+    { title: 'Detections', dataIndex: 'detections3' },
+    { title: 'Endpoint', dataIndex: 'endpoint' },
+    { title: 'Policy', dataIndex: 'policy' }
+];
+
 const LightTabs = ({ state, actions }) => {
     return (
         <Section className="row-md-8">
@@ -29,13 +54,37 @@ const LightTabs = ({ state, actions }) => {
                 </Nav>
                 <TabContent activeKey={state.tab}>
                     <TabPane eventKey={1}>
-                        Tab 1 content
+                        <Table
+                            justified={false}
+                            hoverable={false}
+                            maxHeight={180}
+                            useFixedHeader={true}
+                            rowKey="id"
+                            columns={columns1}
+                            data={[]}
+                        />
                     </TabPane>
                     <TabPane eventKey={2}>
-                        Tab 2 content
+                        <Table
+                            justified={false}
+                            hoverable={false}
+                            maxHeight={180}
+                            useFixedHeader={true}
+                            rowKey="id"
+                            columns={columns2}
+                            data={[]}
+                        />
                     </TabPane>
                     <TabPane eventKey={3}>
-                        Tab 3 content
+                        <Table
+                            justified={false}
+                            hoverable={false}
+                            maxHeight={180}
+                            useFixedHeader={true}
+                            rowKey="id"
+                            columns={columns3}
+                            data={[]}
+                        />
                     </TabPane>
                     <TabPane eventKey={4.1}>
                         Tab 4.1 content

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@trendmicro/react-navs",
-  "version": "0.11.3",
+  "version": "0.11.4",
   "description": "Trend Micro Components: React Navs",
   "main": "lib/index.js",
   "files": [
@@ -54,6 +54,7 @@
   },
   "devDependencies": {
     "@trendmicro/react-buttons": "~1.3.0",
+    "@trendmicro/react-table": "^1.0.0-alpha",
     "babel-cli": "~6.26.0",
     "babel-core": "~6.26.0",
     "babel-eslint": "~8.2.1",

diff --git a/src/tab.styl b/src/tab.styl
@@ -1,7 +1,11 @@
 .tab-content > .tab-pane {
-    display: none;
+    display: block;
+    opacity: 0;
+    height: 0;
 }
 
 .tab-content > .active {
     display: block;
+    opacity: 1;
+    height: inherit;
 }