new List api, tests, docs

Author: renatorib

.babelrc

@@ -7,7 +7,7 @@
         "@babel/stage-3"
       ],
       "plugins": [
-        ["@babel/transform-runtime", { "polyfill": false, "useBuiltIns": true, "useESModules": true }]
+        ["@babel/plugin-transform-runtime", { "polyfill": false, "useBuiltIns": true, "useESModules": true }]
       ]
     },
     "commonjs": {
@@ -17,7 +17,7 @@
         "@babel/stage-3"
       ],
       "plugins": [
-        ["@babel/transform-runtime", { "polyfill": false, "useBuiltIns": true }]
+        ["@babel/plugin-transform-runtime", { "polyfill": false, "useBuiltIns": true }]
       ]
     },
     "test": {
@@ -26,8 +26,8 @@
         "@babel/stage-3"
       ],
       "plugins": [
-        ["@babel/transform-runtime", { "polyfill": false, "useBuiltIns": true }],
-        "@babel/transform-modules-commonjs"
+        ["@babel/plugin-transform-runtime", { "polyfill": false, "useBuiltIns": true }],
+        "@babel/plugin-transform-modules-commonjs"
       ]
     }
   }

docs/components/List.md

@@ -27,14 +27,25 @@ import { List } from 'react-powerplug'
 Specifies the initial list state, must be an array.
 By default, the initial list state is an empty array.
 
+**onChange** _(optional)_  
+Callback that fires when state changes.
+
 ## List Children Props
 
-TL;DR: `{ list, push, pull, sort, setList }`
+TL;DR: `{ list, first, last, push, pull, sort, set }`
 
 **list**  
 `boolean`  
 Your list state
 
+**first**
+`() => any`  
+Get first element of your list array
+
+**last**
+`() => any`  
+Get last element of your list array
+
 **push**  
 `(item: any) => void`  
 Add an item to your list array
@@ -54,17 +65,21 @@ pull(item => item.name === 'Renato')
 `(comparator: (a: item, b: item) => number)) => void`  
 Use [Array.prototype.sort](https://www.w3schools.com/jsref/jsref_sort.asp) to sort your list state.
 
-**setList**  
-`(list: array) => void`  
+**set**  
+`(list: array | (list: array) => array) => void`  
 Set a new full list to your state  
 Note: use it to handle array in the way you prefer
 
 ```js
 import R from 'ramda'
 
+set([1, 2, 3, 4])
+set(list => [...list, 5, 6])
 // list = [1, 2, 3, 4, 5, 6]
-setList(R.drop(2, list)) // remove two first items
+
+set(R.drop(2)) // remove two first items
 // list = [3, 4, 5, 6]
-setList(R.dropLast(2, list)) // remove two last items
+
+set(R.dropLast(2)) // remove two last items
 // list = [3, 4]
 ```

docs/components/Toggle.md

@@ -18,7 +18,7 @@ import { Toggle } from 'react-powerplug'
 Specifies the initial on state, must be an boolean.
 By default, the initial on state is false.
 
-**onChange** _(optional)_
+**onChange** _(optional)_  
 Callback that fires when state changes.
 
 ## Toggle Children Props

src/components/List.js

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import State from './State'
 import renderProps from '../utils/renderProps'
+import set from '../utils/set'
 
 const complement = fn => (...args) => !fn(...args)
 
@@ -11,14 +12,12 @@ const List = ({ initial = [], onChange, ...props }) => (
         list: state.list,
         first: () => state.list[0],
         last: () => state.list[Math.max(0, state.list.length - 1)],
-        setList: list => setState({ list }),
-        push: value => setState(({ list }) => ({ list: [...list, value] })),
+        set: list => setState(s => ({ list: set(list, s.list) })),
+        push: value => setState(s => ({ list: [...s.list, value] })),
         pull: predicate =>
-          setState(({ list }) => ({
-            list: list.filter(complement(predicate)),
-          })),
+          setState(s => ({ list: s.list.filter(complement(predicate)) })),
         sort: compareFn =>
-          setState(({ list }) => ({ list: [...list].sort(compareFn) })),
+          setState(s => ({ list: [...s.list].sort(compareFn) })),
       })
     }
   </State>

tests/components/List.test.js

@@ -14,20 +14,24 @@ test('<List />', () => {
   lastCalled().push(8)
   expect(lastCalled().list).toEqual([1, 8])
 
-  lastCalled().setList([5, 4, 1, 6, 9])
-  expect(lastCalled().list).toEqual([5, 4, 1, 6, 9])
+  lastCalled().set([9, 2, 3, 4])
+  expect(lastCalled().list).toEqual([9, 2, 3, 4])
+
+  lastCalled().set(list => [...list, 5])
+  expect(lastCalled().list).toEqual([9, 2, 3, 4, 5])
 
   const listBeforeSort = lastCalled().list
   lastCalled().sort()
-  expect(lastCalled().list).toEqual([1, 4, 5, 6, 9])
-  expect(listBeforeSort).toEqual([5, 4, 1, 6, 9])
+  expect(lastCalled().list).toEqual([2, 3, 4, 5, 9])
+  expect(listBeforeSort).toEqual([9, 2, 3, 4, 5])
 
   lastCalled().pull(d => d % 2)
-  expect(lastCalled().list).toEqual([4, 6])
+  expect(lastCalled().list).toEqual([2, 4])
+
+  expect(lastCalled().first()).toEqual(2)
+  expect(lastCalled().last()).toEqual(4)
 
-  expect(lastCalled().first()).toEqual(4)
-  expect(lastCalled().last()).toEqual(6)
-  lastCalled().setList([])
+  lastCalled().set([])
   expect(lastCalled().first()).toEqual(undefined)
   expect(lastCalled().last()).toEqual(undefined)
 })