feat: add bonding for <ScratchSensor>

streamich · Mar 2, 2018 · cfe221b · cfe221b
1 parent 7fa8a51
commit cfe221b
Show file tree

Hide file tree

Showing 2 changed files with 99 additions and 40 deletions.
diff --git a/src/ScratchSensor/__story__/story.tsx b/src/ScratchSensor/__story__/story.tsx
@@ -20,32 +20,59 @@ const Demo = (props) =>
 storiesOf('Sensors/ScratchSensor', module)
   // .add('Documentation', () => h(ShowDocs, {md: require('../../../docs/en/MouseSensor.md')}))
   .add('FaCC', () => <ScratchSensor>{Demo}</ScratchSensor>)
-  .add('With animation', () => <ScratchSensor>{(state) => {
-    return (
-      <div style={{
-        width: 300,
-        height: 300,
-        border: '1px solid tomato',
-        margin: '100px',
-        position: 'relative',
-      }}>
-        <pre style={{fontFamily: 'monospace'}}>
-          {JSON.stringify(state, null, 4)}
-        </pre>
+  .add('With animation', () => <ScratchSensor>{
+    (state) => {
+      return (
         <div style={{
-          position: 'absolute',
-          top: Math.min(state.y, state.y + state.dy),
-          left: Math.min(state.x, state.x + state.dx),
-          width: Math.abs(state.dx),
-          height: Math.abs(state.dy),
+          width: 300,
+          height: 300,
           border: '1px solid tomato',
-        }} />
-      </div>
-    );
-  }}</ScratchSensor>)
+          margin: '100px',
+          position: 'relative',
+        }}>
+          <pre style={{fontFamily: 'monospace'}}>
+            {JSON.stringify(state, null, 4)}
+          </pre>
+          <div style={{
+            position: 'absolute',
+            top: Math.min(state.y, state.y + state.dy),
+            left: Math.min(state.x, state.x + state.dx),
+            width: Math.abs(state.dx),
+            height: Math.abs(state.dy),
+            border: '1px solid tomato',
+          }} />
+        </div>
+      );
+    }}</ScratchSensor>
+  )
   .add('Fires events', () => <ScratchSensor
     render={Demo}
     onScratchStart={action('onScratchStart')}
     onScratch={action('onScratch')}
     onScratchEnd={action('onScratchEnd')}
-   />)
+  />)
+  .add('With bond', () => <ScratchSensor bond>{
+    (state) => {
+      return (
+        <div style={{
+          width: 300,
+          height: 300,
+          border: '1px solid tomato',
+          margin: '100px',
+          position: 'relative',
+        }}>
+          <pre style={{fontFamily: 'monospace'}}>
+            {JSON.stringify(state, null, 4)}
+          </pre>
+          <div {...state.bond} style={{
+            position: 'absolute',
+            top: 200,
+            left: 200,
+            width: 50,
+            height: 50,
+            border: '1px solid tomato',
+          }} />
+        </div>
+      );
+    }}</ScratchSensor>
+  )
diff --git a/src/ScratchSensor/index.ts b/src/ScratchSensor/index.ts
@@ -1,11 +1,13 @@
+import {IScratchSensorState} from './index';
 import {Component, cloneElement} from 'react';
 import {h, noop, on, off} from '../util';
 import {render} from 'react-universal-interface';
 const throttle = require('throttle-debounce/throttle');
 
 export interface IScratchSensorProps {
-  children?: React.ReactElement<any> | ((state: IScratchSensorState) => React.ReactElement<any>);
-  render?: (state: IScratchSensorState) => React.ReactElement<any>;
+  bond?: boolean | string;
+  children?: React.ReactElement<any> | ((state: IScratchSensorStateWithBond) => React.ReactElement<any>);
+  render?: (state: IScratchSensorStateWithBond) => React.ReactElement<any>;
   disabled?: boolean;
   onScratch?: (state: IScratchSensorState) => void;
   onScratchStart?: (state: IScratchSensorState) => void;
@@ -30,6 +32,17 @@ export interface IScratchSensorState {
   elY?: number;
 }
 
+export interface IScratchSensorBond {
+  ref?: any;
+  onMouseDown?: any;
+  onTouchStart?: any;
+}
+
+export interface IScratchSensorStateWithBond extends IScratchSensorState {
+  [bond: string]: any;
+  bond?: IScratchSensorBond;
+}
+
 export class ScratchSensor extends Component<IScratchSensorProps, IScratchSensorState> {
   static defaultProps = {
     disabled: false,
@@ -45,19 +58,23 @@ export class ScratchSensor extends Component<IScratchSensorProps, IScratchSensor
   el: HTMLElement = null;
   frame = null;
 
-  ref = (originalRef) => (el) => {
+  ref = (originalRef?) => (el) => {
     this.el = el;
     (originalRef || noop)(el);
   };
 
-  onMouseDown = (originalMouseDown) => (event) => {
+  componentWillUnmount () {
+    this.unbindEvents();
+  }
+
+  onMouseDown = (originalMouseDown?) => (event) => {
     (originalMouseDown || noop)(event);
     this.startScratching(event.pageX, event.pageY);
   };
 
-  onTouchStart = (originalTouchStart) => (event) => {
+  onTouchStart = (originalTouchStart?) => (event) => {
     (originalTouchStart || noop)(event);
-    // this.startScratching(event.pageX, event.pageY);
+    this.startScratching(event.changedTouches[0].pageX, event.changedTouches[0].pageY);
   };
 
   startScratching (docX, docY) {
@@ -127,7 +144,6 @@ export class ScratchSensor extends Component<IScratchSensorProps, IScratchSensor
     this.onMoveEvent(event.pageX, event.pageY);
   };
 
-
   onTouchMove = (event) => {
     this.onMoveEvent(event.changedTouches[0].pageX, event.changedTouches[0].pageY);
   };
@@ -161,17 +177,33 @@ export class ScratchSensor extends Component<IScratchSensorProps, IScratchSensor
   };
 
   render () {
-    const {disabled} = this.props;
-    let element = render(this.props, this.state);
-
-    if (!disabled) {
-      element = cloneElement(element, {
-        ref: this.ref(element.ref),
-        onMouseDown: this.onMouseDown(element.props.onMouseDown),
-        onTouchStart: this.onMouseDown(element.props.onTouchStart),
-      });
+    const {disabled, bond} = this.props;
+
+    if (bond) {
+      const bondName: string = typeof bond === 'string' ? bond : 'bond';
+      const state: IScratchSensorStateWithBond = {...this.state};
+
+      if (!disabled) {
+        state[bondName] = {
+          ref: this.ref(),
+          onMouseDown: this.onMouseDown(),
+          onTouchStart: this.onTouchStart(),
+        };
+      }
+
+      return render(this.props, state);
+    } else {
+      let element = render(this.props, this.state);
+
+      if (!disabled) {
+        element = cloneElement(element, {
+          ref: this.ref(element.ref),
+          onMouseDown: this.onMouseDown(element.props.onMouseDown),
+          onTouchStart: this.onTouchStart(element.props.onTouchStart),
+        });
+      }
+
+      return element;
     }
-
-    return element;
   }
 }