add selectors and fix minor problems

Author: FlorentD

README.md

@@ -13,16 +13,16 @@ The need a fast way to bind keys to a react-powered UI with awesome redux for st
 ## Installation
 `react-keys` requires **React 0.14 or later**
 
-`yarn install react-keys`
+`yarn add react-keys`
 
 ## Dependencies
 
 While not having direct dependencies, react-keys have to be used with `react`, `react-dom` and `redux` :
 
 ```javscript
-yarn install react
-yarn install react-dom
-yarn install redux
+yarn add react
+yarn add react-dom
+yarn add redux
 ```
 
 # Link it with Redux (Otherwise it doesn't work !) 
@@ -147,6 +147,7 @@ renderWithId('mosaic-1-1');
 * `filter` (string / *optional*) class name which exclude element 
 * `debounce` (number / *optional*) define a debounce for keys press in ms (default global debounce) 
 * `enterStrategy` (string / *optional*) define strape strategy on enter: `start` / `mirror` / `memory` / `none` (default `none`)
+* `position` (string / *optional*) to better handle for  enterStrategy (vertial/horizontal) (default `horizontal`)
 * `gap` (number / *optional*) reduce or increase elements margin (default `0`)`
 * `boundedGap` (number / *optional*) reduce or increase bounded margin (default `0`)
 * `topGap` (number / *optional*) reduce or increase last top margin (default `0`)
@@ -278,6 +279,14 @@ the keys store will manage the state of each binders (no matter how many they ar
 
 So you can listen the change of theses values for each binder
 
+### Selectors
+Selectors give you easy control on your data binder, here few selectors for common use. they return a function
+* `isCurrentBinder(binderId)` determine if your binder is the current binder
+* `isBinderActive(binderId)` determine if your binder is active
+* `getBinderMarginLeft(binderId)` determine marginLeft of a binder
+* `getBinderMarginTop(binderId)` determine marginTop of a binder
+* `getBinderSelectedId(binderId)` determine selectedId of a binder
+
 ### Action launchers
 * `activeBinder(binderId, selectedId(optional))` activate a new binder by giving its id (first id by default)
 * `resetBinder(binderId, selectedId(optional))` reset binder by giving its id (first id by default)

src/components/Binder.js

@@ -31,6 +31,7 @@ class Binder extends Component {
         React.PropTypes.array,
       ]),
       selector: PropTypes.string,
+      position: PropTypes.string,
       wrapper: PropTypes.string,
       filter: PropTypes.string,
       gap: PropTypes.number,

src/components/Carousel.js

@@ -144,7 +144,7 @@ class Carousel extends Component {
   render() {
     const { size, elWidth, childrenClassName, className } = this.props;
     const { elements } = this.state;
-    return <div className={className} style={{ position: 'absolute', overflow: 'hidden' }}>
+    return <div className={className} style={{ overflow: 'hidden' }}>
       {elements.map((element, inc) => {
         if (!element) return;
         const gap = (inc - 2) * elWidth;

src/index.js

@@ -5,7 +5,14 @@ import _catcher from './catcher';
 import { _init, getConfig } from './listener';
 import { _keyReducer } from './redux/reducer';
 import { _activeBinder, _updateBinder, _resetBinder, _resetCarousel } from './redux/actions';
-import { _selector } from './selector';
+import {
+  _selector,
+  _isCurrentBinder,
+  _isBinderActive,
+  _getBinderMarginLeft,
+  _getBinderMarginTop,
+  _getBinderSelectedId
+} from './selector';
 import blocks from './blocks';
 
 export const config = getConfig;
@@ -17,6 +24,11 @@ export const Carousel = _Carousel;
 
 export const keysReducer = _keyReducer;
 export const keysSelector = _selector;
+export const isCurrentBinder = _isCurrentBinder;
+export const isBinderActive = _isBinderActive;
+export const getBinderMarginLeft = _getBinderMarginLeft;
+export const getBinderMarginTop = _getBinderMarginTop;
+export const getBinderSelectedId = _getBinderSelectedId;
 
 export const catcher = _catcher;
 

src/redux/actions.js

@@ -63,6 +63,7 @@ export function addBinderToStore(props, type) {
     leftGap,
     downGap,
     enterStrategy,
+    position,
   } = props;
   globalStore.dispatch({
     type: ADD_BINDER_TO_STORE,
@@ -80,6 +81,7 @@ export function addBinderToStore(props, type) {
         leftGap,
         downGap,
         enterStrategy,
+        position,
         elements: elements || [],
         prevEl: null,
         prevDir: null,

src/selector.js

@@ -6,3 +6,30 @@ export function _selector(id) {
   ensureState();
   return () => globalStore.getState()[NAME][id] || { marginLeft: 0, marginTop: 0 };
 }
+
+export function _isCurrentBinder(id) {
+  ensureState();
+  const currentBinderId = globalStore.getState()['current'] &&
+    globalStore.getState()['current'].binderId;
+  return () => currentBinderId === id;
+}
+
+export function _getBinderSelectedId(id) {
+  ensureState();
+  return () => globalStore.getState()[NAME][id] ? globalStore.getState()[NAME][id].selectedId : '';
+}
+
+export function _getBinderMarginLeft(id) {
+  ensureState();
+  return () => globalStore.getState()[NAME][id] ? globalStore.getState()[NAME][id].marginLeft : 0;
+}
+
+export function _getBinderMarginTop(id) {
+  ensureState();
+  return () => globalStore.getState()[NAME][id] ? globalStore.getState()[NAME][id].marginTop : 0;
+}
+
+export function _isBinderActive(id) {
+  ensureState();
+  return () => globalStore.getState()[NAME][id] && globalStore.getState()[NAME][id].active;
+}