diff --git a/docs/en/MouseSensor.md b/docs/en/MouseSensor.md index 2e043c60..400e5635 100644 --- a/docs/en/MouseSensor.md +++ b/docs/en/MouseSensor.md @@ -1,6 +1,6 @@ # `` -Render prop/FaCC that re-renders on mouse position change. +Render prop that re-renders on mouse position change. ## Usage @@ -35,7 +35,7 @@ interface IMouseSensorState { - `docX` and `docY` — mouse position in document. - `posX` and `posY` — mouse position in your element. - - `elH` and `elW` — element dimensions. + - `elW` and `elH` — element dimensions. - `elX` and `elY` — element position. ### Props @@ -43,8 +43,6 @@ interface IMouseSensorState { ```ts interface IMouseSensorProps { bond?: string | boolean; - children?: (state: IMouseSensorState) => React.ReactElement; - render?: (state: IMouseSensorState) => React.ReactElement; whenHovered?: boolean; } ``` @@ -52,21 +50,23 @@ interface IMouseSensorProps { , where - `bond` — 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'; -{(state) => -
+{(state) => +
+
       {JSON.stringify(state, null, 4)}
     
diff --git a/package.json b/package.json index f93e360b..954a1b66 100644 --- a/package.json +++ b/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", diff --git a/src/__tests__/setup.js b/src/__tests__/setup.js index f1533c52..1319a168 100644 --- a/src/__tests__/setup.js +++ b/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() diff --git a/src/route/__tests__/__snapshots__/index.test.tsx.snap b/src/route/__tests__/__snapshots__/index.test.tsx.snap deleted file mode 100644 index 5d3c2c9a..00000000 --- a/src/route/__tests__/__snapshots__/index.test.tsx.snap +++ /dev/null @@ -1,3 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`route does basic routing 1`] = `"
/foo
"`; diff --git a/src/route/__tests__/index.test.tsx b/src/route/__tests__/index.test.tsx index 2d5b558e..d8afe0d9 100644 --- a/src/route/__tests__/index.test.tsx +++ b/src/route/__tests__/index.test.tsx @@ -22,13 +22,16 @@ describe('route', () => { /foo
- /foo + /bar
); - expect(wrapper.html()).toMatchSnapshot(); + const html = wrapper.html(); + + expect(html.includes('
/foo')).toBe(true); + expect(html.includes('
/bar')).toBe(false); }); }); }); diff --git a/src/shim/__story__/createRef.story.tsx b/src/shim/__story__/createRef.story.tsx new file mode 100644 index 00000000..0909a7e8 --- /dev/null +++ b/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 { + divRef = createRef(); + + onClick = () => { + console.log('ref', this.divRef.value); + }; + + render () { + return
foobar
; + } +} + +storiesOf('Shims/createRef()', module) + .add('Basic example', () => ); diff --git a/src/shim/createRef.ts b/src/shim/createRef.ts new file mode 100644 index 00000000..40575f71 --- /dev/null +++ b/src/shim/createRef.ts @@ -0,0 +1,7 @@ +export const createRef = () => { + const ref: any = (el) => { + ref.value = el; + }; + + return ref; +};