feat: refactor #tabs to make it more flexible and

dnbexperience · Jan 21, 2019 · 4c86ff9 · 4c86ff9
1 parent 8086573
commit 4c86ff9
Show file tree

Hide file tree

Showing 10 changed files with 257 additions and 82 deletions.
diff --git a/packages/dnb-design-system-portal/src/shared/inlineTags/Tabs.js b/packages/dnb-design-system-portal/src/shared/inlineTags/Tabs.js
@@ -3,5 +3,136 @@
  *
  */
 
-import { Tabs } from 'dnb-ui-lib/src'
-export default Tabs
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+
+import { css } from '@emotion/core'
+// import styled from '@emotion/styled'
+import { navigate, parsePath } from 'gatsby'
+import { CloseButton } from 'dnb-ui-lib/src/components/modal'
+import { fullscreen as fullscreenIcon } from 'dnb-ui-lib/src/icons/secondary_icons'
+import { Button, Tabs } from 'dnb-ui-lib/src'
+
+const pathPrefix = __PATH_PREFIX__ // eslint-disable-line
+
+const getLocation = () => {
+  if (typeof window === 'undefined') {
+    return null
+  }
+  const { pathname, search, hash } = window.location
+  return {
+    ...parsePath(pathname.replace(new RegExp(pathPrefix || '', 'g'), '')),
+    search,
+    hash
+  }
+}
+
+// const DemoWrapper = styled.div`
+//   padding: 2rem 0 0;
+// `
+
+const tabsWrapperStyle = css`
+  .fullscreen-page & {
+    top: 0;
+    .is-sticky .dnb-tabs__tabs {
+      margin: 0 -2rem;
+    }
+  }
+  .dnb-modal__close-button {
+    position: relative;
+    top: auto; /* to force the button to center */
+    right: auto;
+  }
+`
+
+class CustomTabs extends PureComponent {
+  static propTypes = {
+    children: PropTypes.node.isRequired,
+    tabs: PropTypes.array
+  }
+  static defaultProps = {
+    tabs: [
+      { title: 'Demo', key: 'demo' },
+      { title: 'Details', key: 'info' },
+      { title: 'Markup', key: 'code' }
+    ]
+  }
+  state = {
+    activeTabKey: 'demo',
+    wasFullscreen: null
+  }
+  constructor(props) {
+    super(props)
+    this._id = 'item-wrapper'
+    const location = getLocation()
+    if (location)
+      this.state.wasFullscreen = /fullscreen/.test(location.search)
+  }
+  openTab = ({ key }) => {
+    this.setState({
+      activeTabKey: key
+    })
+  }
+  isActive(tabKey) {
+    return this.state.activeTabKey === tabKey
+  }
+  componentWillMount() {
+    const location = getLocation()
+    if (location)
+      this.setState({
+        wasFullscreen: /fullscreen/.test(location.search)
+      })
+  }
+  openFullscreen = () => {
+    const location = getLocation()
+    if (location)
+      navigate(
+        `${location.pathname}?fullscreen#${this.state.activeTabKey}`
+      )
+  }
+  quitFullscreen = () => {
+    const location = getLocation()
+    if (location) navigate([location.pathname, location.hash].join(''))
+  }
+
+  render() {
+    const { tabs, children } = this.props
+    const data = Tabs.getData({ tabs, children })
+
+    return (
+      <Tabs
+        // id={this._id}
+        use_hash
+        data={data}
+        on_change={this.openTab}
+        render={({ Wrapper, Content, TabsList, Tabs }) => {
+          return (
+            <Wrapper css={tabsWrapperStyle}>
+              <TabsList>
+                <Tabs />
+                {this.state.wasFullscreen ? (
+                  <CloseButton
+                    on_click={this.quitFullscreen}
+                    title="Quit Fullscreen"
+                  />
+                ) : (
+                  <Button
+                    on_click={this.openFullscreen}
+                    variant="secondary"
+                    title="Fullscreen"
+                    icon={fullscreenIcon}
+                  />
+                )}
+              </TabsList>
+              <Content />
+            </Wrapper>
+          )
+        }}
+      />
+    )
+  }
+}
+
+export default CustomTabs
+
+CustomTabs.Content = Tabs.Content
diff --git a/packages/dnb-design-system-portal/src/shared/parts/uilib/ItemWrapper.js b/packages/dnb-design-system-portal/src/shared/parts/uilib/ItemWrapper.js
@@ -209,7 +209,7 @@ class ItemWrapper extends PureComponent {
             use_hash
             data={tabsUsed}
             on_change={this.openTab}
-            render={({ Wrapper, TabsList, Tabs }) => {
+            render={({ Wrapper, TabsList, Content, Tabs }) => {
               return (
                 <Wrapper css={tabsWrapperStyle}>
                   <TabsList>
@@ -228,6 +228,7 @@ class ItemWrapper extends PureComponent {
                       />
                     )}
                   </TabsList>
+                  <Content />
                 </Wrapper>
               )
             }}

diff --git a/packages/dnb-design-system-portal/src/uilib/components/examples/Tabs.txt b/packages/dnb-design-system-portal/src/uilib/components/examples/Tabs.txt
@@ -6,20 +6,20 @@
   }}
 />
 <Tabs>
-  <Tabs.Tab title="First">
+  <Tabs.Content title="First">
     <h2>First</h2>
-  </Tabs.Tab>
-  <Tabs.Tab title="Second">
+  </Tabs.Content>
+  <Tabs.Content title="Second">
     <h2>Second</h2>
-  </Tabs.Tab>
+  </Tabs.Content>
 </Tabs>
 <Tabs
   selected_key="second"
   align="right"
   label="Some Tabs label"
   data={data}
   on_change={this.openTab}
-  render={({ Wrapper, TabsList, Tabs }) => {
+  render={({ Wrapper, Content, TabsList, Tabs }) => {
     return (
       <Wrapper>
         <TabsList>
@@ -28,6 +28,7 @@
           </small>
           <Tabs />
         </TabsList>
+        <Content />
       </Wrapper>
     );
   }}

diff --git a/packages/dnb-ui-lib/src/components/tabs/Example.js b/packages/dnb-ui-lib/src/components/tabs/Example.js
@@ -50,12 +50,12 @@ class Example extends PureComponent {
         </div>
         <div className="example-box">
           <Tabs>
-            <Tabs.Tab title="First">
+            <Tabs.Content title="First">
               <h2>First</h2>
-            </Tabs.Tab>
-            <Tabs.Tab title="Second">
+            </Tabs.Content>
+            <Tabs.Content title="Second">
               <h2>Second</h2>
-            </Tabs.Tab>
+            </Tabs.Content>
           </Tabs>
           <p className="example-caption">
             Left aligned tabs, using React Components only
@@ -68,7 +68,7 @@ class Example extends PureComponent {
             label="Some Tabs label"
             data={data}
             on_change={this.openTab}
-            render={({ Wrapper, TabsList, Tabs }) => {
+            render={({ Wrapper, Content, TabsList, Tabs }) => {
               return (
                 <Wrapper>
                   <TabsList>
@@ -77,6 +77,7 @@ class Example extends PureComponent {
                     </small>
                     <Tabs />
                   </TabsList>
+                  <Content />
                 </Wrapper>
               )
             }}