Clean up syntax and update readme

flimflamjs · Feb 13, 2017 · 485f776 · 485f776
1 parent f44bf9c
commit 485f776
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 5 deletions.
diff --git a/tabswap/README.md b/tabswap/README.md
@@ -11,6 +11,8 @@ Component for swapping out sections of content with some simple navigation.
 
 * `names`: an Array of Strings or Snabbdom nodes that represent labels/titles for each section
 * `active$`: a Flyd stream that contains an integer index representing which label should be active, making all other labels inactive
+* `setWidth`: optional boolean value for setting widths of labels based on number
+  of labels (5 labels will result in each label's width being 20%) 
 
 You will probably want to pass the same `active$` stream to both `tabswap.labels` and `tabswap.content`.
 
@@ -27,6 +29,7 @@ function view(state) {
   , tabswap.labels({
       names: ['a', 'b']
     , active$: activeTab$
+    , setWidth: true
     })
   , tabswap.content({
       sections: [content_a, content_b]

diff --git a/tabswap/index.es6 b/tabswap/index.es6
@@ -11,8 +11,7 @@ const labels = options => {
   , setWidth: false
   }, options)
 
-
-  const width = options.setWidth ? 100 / options.names.length + '%' : false
+  const width = options.setWidth ? (100 / options.names.length + '%') : ''
 
   return h('div', {
     attrs: {
@@ -28,7 +27,7 @@ const labels = options => {
 const labelSingle = (active$, width) => (name, idx) =>
   h('div', {
     attrs: {'data-ff-tabswap-label-wrapper': true}
-  , style: {width: width ?  width : ''}
+  , style: {width}
   }, [
     h("a", {
       on: {click: [active$, idx]}

diff --git a/tabswap/index.js b/tabswap/index.js
@@ -13,7 +13,7 @@ var labels = function labels(options) {
     setWidth: false
   }, options);
 
-  var width = options.setWidth ? 100 / options.names.length + '%' : false;
+  var width = options.setWidth ? 100 / options.names.length + '%' : '';
 
   return h('div', {
     attrs: {
@@ -28,7 +28,7 @@ var labelSingle = function labelSingle(active$, width) {
   return function (name, idx) {
     return h('div', {
       attrs: { 'data-ff-tabswap-label-wrapper': true },
-      style: { width: width ? width : '' }
+      style: { width: width }
     }, [h("a", {
       on: { click: [active$, idx] },
       attrs: {