Feat/create ref

docs/en/MouseSensor.md

@@ -1,6 +1,6 @@
 # `<MouseSensor>`
 
-Render prop/FaCC that re-renders on mouse position change.
+Render prop that re-renders on mouse position change.
 
 
 ## Usage
@@ -35,38 +35,38 @@ interface IMouseSensorState {
 
   - `docX` and `docY` &mdash; mouse position in document.
   - `posX` and `posY` &mdash; mouse position in your element.
-  - `elH` and `elW` &mdash; element dimensions.
+  - `elW` and `elH` &mdash; element dimensions.
   - `elX` and `elY` &mdash; element position.
 
 ### Props
 
 ```ts
 interface IMouseSensorProps {
   bond?: string | boolean;
-  children?: (state: IMouseSensorState) => React.ReactElement<any>;
-  render?: (state: IMouseSensorState) => React.ReactElement<any>;
   whenHovered?: boolean;
 }
 ```
 
 , where
 
   - `bond` &mdash; optional, boolean or string, specifying bondig spread object. If string, it specifies the name of the bonding object injected into state, if boolean and true the bonding object will have its default name `bond`.
-  - `children` and `render` - render props that receive `IMouseState` object and, optionally, bonding object.
   - `whenHovered` - optional, boolean, when true, will track mouse position only when target element is hovered, defaults to `false`.
 
 ### Example
 
+Below is an example that uses optional `bond` prop, which allows to attach listeners to any React HTML element.
+
 ```jsx
 import {MouseSensor} from 'libreact/lib/MouseSensor';
 
-<MouseSensor>{(state) =>
-  <div style={{
-    width: 300,
-    height: 300,
-    border: '1px solid tomato',
-    margin: '100px'
-  }}>
+<MouseSensor bond>{(state) =>
+  <div>
+    <div {...state.bond} style={{
+      width: 300,
+      height: 300,
+      border: '1px solid tomato',
+      margin: '100px'
+    }} />
     <pre style={{fontFamily: 'monospace'}}>
       {JSON.stringify(state, null, 4)}
     </pre>

package.json

@@ -30,7 +30,7 @@
     "@types/react-dom": "16.0.3",
     "chai": "4.1.2",
     "enzyme": "3.3.0",
-    "enzyme-adapter-react-15": "1.0.5",
+    "enzyme-adapter-react-16": "^1.1.1",
     "enzyme-to-json": "3.3.0",
     "gulp": "3.9.1",
     "gulp-typescript": "3",

src/__tests__/setup.js

@@ -1,5 +1,5 @@
 const {configure} = require('enzyme');
-const Adapter = require('enzyme-adapter-react-15');
+const Adapter = require('enzyme-adapter-react-16');
 
 configure({
   adapter: new Adapter()

src/route/__tests__/index.test.tsx

@@ -22,13 +22,16 @@ describe('route', () => {
               /foo
             </Route>
             <Route match='/bar'>
-              /foo
+              /bar
             </Route>
           </div>
         </Router>
       );
 
-      expect(wrapper.html()).toMatchSnapshot();
+      const html = wrapper.html();
+
+      expect(html.includes('<div>/foo')).toBe(true);
+      expect(html.includes('<div>/bar')).toBe(false);
     });
   });
 });

src/shim/__story__/createRef.story.tsx

@@ -0,0 +1,21 @@
+import {Component, createElement as h} from 'react';
+import {storiesOf} from '@storybook/react';
+import {action} from '@storybook/addon-actions';
+import {linkTo} from '@storybook/addon-links';
+import {createRef} from '../createRef';
+import ShowDocs from '../../../.storybook/ShowDocs'
+
+class Example extends Component<any, any> {
+  divRef = createRef();
+
+  onClick = () => {
+    console.log('ref', this.divRef.value);
+  };
+
+  render () {
+    return <div ref={this.divRef} onClick={this.onClick}>foobar</div>;
+  }
+}
+
+storiesOf('Shims/createRef()', module)
+  .add('Basic example', () => <Example />);

src/shim/createRef.ts

@@ -0,0 +1,7 @@
+export const createRef = () => {
+  const ref: any = (el) => {
+    ref.value = el;
+  };
+
+  return ref;
+};