Added selected props to toolbar nav

gabrielbull · Aug 8, 2016 · aed6c86 · aed6c86
1 parent 0beb473
commit aed6c86
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 13 deletions.
diff --git a/src/toolbar/macOs/nav/item/item.js b/src/toolbar/macOs/nav/item/item.js
@@ -28,19 +28,14 @@ class Item extends Component {
   static propTypes = {
     name: PropTypes.string,
     icon: PropTypes.element,
+    selected: PropTypes.bool
   };
 
-  isSvg(icon) {
-    return icon.type === 'svg';
-  }
-
   render() {
-    const { name, icon, style, ...props } = this.props;
-
-    this.isSvg(icon);
+    const { name, icon, style, selected, ...props } = this.props;
 
     return (
-      <div className="_reactDesktop-Toolbar-Nav-Item-SVG">
+      <div className={'_reactDesktop-Toolbar-Nav-Item-SVG' + (selected ? ' _selected' : '')}>
         <a
           style={{ ...styles.container, ...style }}
           {...props}

diff --git a/src/toolbar/macOs/nav/nav.js b/src/toolbar/macOs/nav/nav.js
@@ -1,18 +1,20 @@
 import React, { Component, PropTypes } from 'react';
 import { Style } from 'radium';
+import Dimension, { dimensionPropTypes } from '../../../style/dimension';
 
 const styles = {
   nav: {
     display: 'flex',
-    flexDirection: 'row', // row | row-reverse | column | column-reverse
-    flexWrap: 'nowrap', // nowrap | wrap | wrap-reverse
-    justifyContent: 'flex-start', // flex-start | flex-end | center | space-between | space-around
-    alignItems: 'flex-start', // flex-start | flex-end | center | space-between | space-around | stretch
-    alignContent: 'flex-start' // flex-start | flex-end | center | space-between | space-around | stretch
+    alignItems: 'center'
   }
 };
 
+@Dimension({ height: '54px' })
 class Nav extends Component {
+  static propTypes = {
+    ...dimensionPropTypes
+  };
+
   render() {
     const { children, style, ...props } = this.props;
 
@@ -31,6 +33,19 @@ class Nav extends Component {
             }
           }}
         />
+        <Style
+          scopeSelector="._reactDesktop-Toolbar-Nav-Item-SVG._selected"
+          rules={{
+            'a svg *': {
+              fill: '#007bfa',
+              fillOpacity: '1'
+            },
+            'a:active svg *': {
+              fill: '#003dd6',
+              fillOpacity: '1'
+            }
+          }}
+        />
         {children}
       </div>
     );