Loop

casesandberg · casesandberg · commit c165e354a5ba · 2016-06-06T17:35:38.000-07:00
diff --git a/docs/documentation/pseudo-elements.md b/docs/documentation/pseudo-elements.md
@@ -3,7 +3,7 @@ id: pseudo-elements
 title: Pseudo Elements
 ---
 
-When looping through components, spread the `loop` method provided by ReactCSS and call it with the iterator to pass down list-specific props, like: `first-child` `last-child` `even` `odd` `nth-child-*`
+When looping through components, spread the `loop` method provided by ReactCSS and call it with the iterator and length of items to pass down list-specific props, like: `first-child` `last-child` `even` `odd` `nth-child-*`
 
 ```
 import React from 'react'
@@ -13,7 +13,12 @@ const List = () => {
   return (
     <div>
       { this.props.items((item, i) => {
-        return <ListItem { ...item } { ...loop(i) } />
+        return (
+          <ListItem
+            { ...item }
+            { ...loop(i, this.props.items.length) }
+          />
+        )
       }) }
     </div>
   )
diff --git a/src/loop.js b/src/loop.js
@@ -2,15 +2,15 @@
 
 const loopable = (i, length) => {
   const props = {}
-  const setProp = (name, value) => {
-    props[name] = value != null ? value : true
+  const setProp = (name, value = true) => {
+    props[name] = value
   }
 
-  i === 0 && setProp('first')
-  i === length - 1 && setProp('last');
+  i === 0 && setProp('first-child')
+  i === length - 1 && setProp('last-child');
   (i === 0 || i % 2 === 0) && setProp('even')
   Math.abs(i % 2) === 1 && setProp('odd')
-  setProp('child', i)
+  setProp('nth-child', i)
 
   return props
 }
diff --git a/src/reactcss.js b/src/reactcss.js
@@ -1,18 +1,19 @@
 'use strict'
 
-import Component from './deprecated/Component'
-export hover from './components/hover.js'
 import flattenNames from './flattenNames'
 import mergeClasses from './mergeClasses'
 import autoprefix from './autoprefix'
 
+export Component from './deprecated/Component'
+export hover from './components/hover'
+export loop from './loop'
+
 export const ReactCSS = (classes, ...activations) => {
   const activeNames = flattenNames(activations)
   const merged = mergeClasses(classes, activeNames)
   return autoprefix(merged)
 }
 
-ReactCSS.Component = Component
 ReactCSS.m = Object.assign
 
 export default ReactCSS
diff --git a/test/loop.test.js b/test/loop.test.js
@@ -0,0 +1,33 @@
+/* global describe, it */
+/* eslint react/prefer-stateless-function: 0 */
+
+import { React, TestUtils, expect } from './helpers'
+import loopable from '../src/loop'
+
+describe('Loopable', () => {
+  it('should return first-child if first', () => {
+    expect(loopable(0, 4)).to.eql({ 'first-child': true, 'nth-child': 0, 'even': true })
+  })
+
+  it('should return last-child if last', () => {
+    expect(loopable(3, 4)).to.eql({ 'last-child': true, 'nth-child': 3, 'odd': true })
+  })
+
+  it('should return even if even', () => {
+    expect(loopable(2, 4)).to.eql({ 'even': true, 'nth-child': 2 })
+  })
+
+  it('should return odd if odd', () => {
+    expect(loopable(1, 4)).to.eql({ 'odd': true, 'nth-child': 1 })
+  })
+
+  it('should return simple css', () => {
+    class Component extends React.Component {
+      render() {
+        return <div className="body" />
+      }
+    }
+    const component = TestUtils.renderIntoDocument(<Component { ...loopable(3, 4) } />)
+    expect(component.props).to.eql({ 'last-child': true, 'nth-child': 3, 'odd': true })
+  })
+})
diff --git a/test/loopable.test.js b/test/loopable.test.js
