Pointer in active tab

react-toolbox · Aug 9, 2015 · 6b44db7 · 6b44db7
1 parent 163f57e
commit 6b44db7
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 8 deletions.
diff --git a/components/tabs/style.styl b/components/tabs/style.styl
@@ -1,27 +1,38 @@
 @import '../constants'
 
 :local(.root)
+  position                                : relative
   > nav
-    box-shadow                              inset 0 -1px DIVIDER
+    box-shadow                            : inset 0 -1px DIVIDER
     > label
       padding                             : (OFFSET / 2) OFFSET
       font-size                           : FONT_SIZE_TINY
       font-weight                         : FONT_WEIGHT_BOLD
       text-transform                      : Uppercase
       color                               : TEXT_SECONDARY
-      transition-property                   box-shadow, color
-      transition-duration                   ANIMATION_DURATION
-      transition-timing-function            ANIMATION_EASE
+      transition-property                 : box-shadow, color
+      transition-duration                 : ANIMATION_DURATION
+      transition-timing-function          : ANIMATION_EASE
       &.active
         color                             : TEXT
-        box-shadow                          inset 0 (-(OFFSET / 10)) PRIMARY
+        // box-shadow                        : inset 0 (-(OFFSET / 10)) PRIMARY
       &.disabled
         opacity                           : 0.2
       &:not(.disabled)
         cursor                            : pointer
       &.hidden
         display                           : none
 
+:local(.pointer)
+  HEIGHT = (OFFSET / 10)
+  position                                : absolute
+  margin-left                             : -(OFFSET)
+  margin-top                              : -(HEIGHT)
+  height                                  : HEIGHT
+  width                                   : 128px
+  background-color                        : PRIMARY
+  transition                              : left ANIMATION_DURATION ANIMATION_EASE
+
 :local(.tab)
   padding                                 : (OFFSET / 2) OFFSET
   &:not(.active)

diff --git a/components/tabs/tabs.cjsx b/components/tabs/tabs.cjsx
@@ -15,14 +15,23 @@ module.exports = React.createClass
 
   getInitialState: ->
     index     : @props.index
+    pointer   : {}
 
   # -- Lifecycle
+  componentDidMount: ->
+    @setState pointer: @pointerPosition @state.index
+
   componentWillReceiveProps: (next_props) ->
-    @setState index: next_props.index or @state.index
+    index = next_props.index or @state.index
+    @setState
+      index   : index
+      pointer : @pointerPosition index
 
   # -- Events
   onClick: (index, event, ref) ->
-    @setState index: index
+    @setState
+      index   : index
+      pointer : @pointerPosition index
     @props.onChange? @
 
   # -- Render
@@ -49,9 +58,18 @@ module.exports = React.createClass
     <div data-react-toolbox='tabs'
          className={localCSS.root + ' ' + @props.className}
          data-flex='vertical'>
-      <nav data-flex='horizontal'>
+      <nav ref='navigation' data-flex='horizontal'>
         { <label {...props}>{props.label}</label> for props in labels }
       </nav>
+      <span className={localCSS.pointer} style={@state.pointer}></span>
       { tabs }
     </div>
 
+  # -- Private methods
+  pointerPosition: (index = 0) ->
+    navigation = @refs.navigation.getDOMNode()
+    label = navigation.children[index].getBoundingClientRect()
+    style =
+      top   : "#{navigation.getBoundingClientRect().height}px"
+      left  : "#{label.left}px"
+      width : "#{label.width}px"