Support elementDimensions Output Prop

ethanselzer · May 26, 2017 · 8f28873 · 8f28873
1 parent e31492d
commit 8f28873
Show file tree

Hide file tree

Showing 17 changed files with 214 additions and 93 deletions.
diff --git a/README.md b/README.md
@@ -52,6 +52,10 @@ Each child component will receive the following props:
 
 ```JavaScript
 {
+    elementDimensions: {
+        width: Number,
+        height: Number
+    },
     isActive: Boolean,
     isPositionOutside: Boolean,
     position: {
@@ -74,7 +78,7 @@ All props are optional.
 Function receives one parameter with the signature `{ isActive: Boolean }`.
 
 **onPositionChanged** : Function - Called when cursor or touch position changes.
-Function receives one parameter with the signature `{ isPositionOutside: Boolean, position: { x: Number, y: Number } }`.
+Function receives one parameter with the signature `{ elementDimensions: { width: Number, height: Number }, isPositionOutside: Boolean, position: { x: Number, y: Number } }`.
 
 **mapChildProps** : Function - Model child component props to your custom shape.
 Function receives one parameter with the signature

diff --git a/example/public/circle.yml b/example/public/circle.yml
diff --git a/example/public/map-child-props.html b/example/public/map-child-props.html
@@ -20,8 +20,10 @@
 export default () => (
     &lt;ReactCursorPosition
         className="example__target"
-        mapChildProps={({ isPositionOutside, position }) => {
+        mapChildProps={({ elementDimensions, isActive, isPositionOutside, position }) => {
             return {
+                elementDimensions,
+                isActive,
                 isOutside: isPositionOutside,
                 point: position
             };

diff --git a/example/public/should-decorate-children.html b/example/public/should-decorate-children.html
@@ -15,7 +15,6 @@
 import ReactCursorPosition from 'react-cursor-position';
 
 import PositionLabel from './PositionLabel';
-import PositionChangedLabel from './PositionChangedLabel';
 import InstructionsLabel from './InstructionsLabel';
 
 export default class extends React.Component {
@@ -41,7 +40,10 @@
                     &lt;PositionLabel /&gt;
                     &lt;InstructionsLabel /&gt;
                 &lt;/ReactCursorPosition&gt;
-                &lt;PositionChangedLabel {...this.state} /&gt;
+                &lt;PositionLabel {...this.state} {...{
+                    className: 'example__external-label',
+                    shouldShowIsActive: false }
+                }/&gt;
             &lt;/div&gt;
         );
     }

diff --git a/example/src/components/ActivationChanged.js b/example/src/components/ActivationChanged.js
@@ -20,7 +20,7 @@ export default class extends React.Component {
                         this.setState({ isActive });
                     }
                 }}>
-                    <InstructionsLabel />
+                    <InstructionsLabel className="example__instructions--center"/>
                 </ReactCursorPosition>
                 <ActivationChangedLabel {...this.state} />
             </div>

diff --git a/example/src/components/BasicExample.js b/example/src/components/BasicExample.js
@@ -12,7 +12,7 @@ export default class extends React.Component {
                     className: 'example__target example__target--basic'
                 }}>
                     <PositionLabel />
-                    <InstructionsLabel />
+                    <InstructionsLabel className="example__instructions--low" />
                 </ReactCursorPosition>
             </div>
         );

diff --git a/example/src/components/InstructionsLabel.js b/example/src/components/InstructionsLabel.js
@@ -1,7 +1,7 @@
 import React from 'react';
 
-export default () => (
-    <div className="example__instructions">
+export default ({ className }) => (
+    <div className={`${className ? className: ''} example__instructions`}>
          Long Touch and Drag Or Hover Here
     </div>
 );
diff --git a/example/src/components/MapProps.js b/example/src/components/MapProps.js
@@ -6,8 +6,10 @@ import InstructionsLabel from './InstructionsLabel';
 export default () => (
     <ReactCursorPosition
         className="example__target"
-        mapChildProps={({ isPositionOutside, position }) => {
+        mapChildProps={({ elementDimensions, isActive, isPositionOutside, position }) => {
             return {
+                elementDimensions,
+                isActive,
                 isOutside: isPositionOutside,
                 point: position
             };

diff --git a/example/src/components/PointPositionLabel.js b/example/src/components/PointPositionLabel.js
@@ -2,6 +2,11 @@ import React from 'react';
 
 export default (props) => {
     const {
+        elementDimensions: {
+            width = 0,
+            height = 0
+        } = {},
+        isActive = false,
         isOutside = true,
         point: {
             x = 0,
@@ -13,6 +18,9 @@ export default (props) => {
         <div>
             {`x: ${x}`}<br />
             {`y: ${y}`}<br />
+            {`isActive: ${isActive}`}<br />
+            {`Element Width: ${width}`}<br />
+            {`Element Height: ${height}`}<br />
             {`isOutside: ${isOutside ? 'true' : 'false'}`}<br />
         </div>
     );

diff --git a/example/src/components/PositionChanged.js b/example/src/components/PositionChanged.js
@@ -1,12 +1,16 @@
 import React from 'react';
 import ReactCursorPosition from '../../../dist/ReactCursorPosition';
-import PositionChangedLabel from './PositionChangedLabel';
 import InstructionsLabel from './InstructionsLabel';
+import PositionLabel from './PositionLabel';
 
 export default class extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
+            elementDimensions: {
+                width: 0,
+                height: 0
+            },
             isPositionOutside: true,
             position: {
                 x: 0,
@@ -22,9 +26,15 @@ export default class extends React.Component {
                     className: 'example__target',
                     onPositionChanged: props => this.setState(props)
                 }}>
-                    <InstructionsLabel />
+                    <InstructionsLabel className="example__instructions--center" />
                 </ReactCursorPosition>
-                <PositionChangedLabel {...this.state} />
+                <PositionLabel
+                    {...this.state}
+                    {...{
+                        className: 'example__external-label',
+                        shouldShowIsActive: false
+                    }}
+                />
             </div>
         );
     }

diff --git a/example/src/components/PositionChangedLabel.js b/example/src/components/PositionChangedLabel.js
diff --git a/example/src/components/PositionLabel.js b/example/src/components/PositionLabel.js
@@ -1,7 +1,11 @@
 import React from 'react';
 
-export default (props) => {
+const PositionLabel = (props) => {
     const {
+        elementDimensions: {
+            width = 0,
+            height = 0
+        } = {},
         position: {
             x = 0,
             y = 0
@@ -11,11 +15,19 @@ export default (props) => {
     } = props;
 
     return (
-        <div>
+        <div className={props.className}>
             {`x: ${x}`}<br />
             {`y: ${y}`}<br />
-            {`isActive: ${isActive}`}<br />
+            {props.shouldShowIsActive && [`isActive: ${isActive}`, <br key="line-break"/>]}
+            {`Element Width: ${width}`}<br />
+            {`Element Height: ${height}`}<br />
             {`isOutside: ${isPositionOutside ? 'true' : 'false'}`}
         </div>
     );
-}
+};
+
+PositionLabel.defaultProps = {
+    shouldShowIsActive: true
+};
+
+export default PositionLabel;
diff --git a/example/src/components/ShouldDecorateChildren.js b/example/src/components/ShouldDecorateChildren.js
@@ -1,14 +1,17 @@
 import React from 'react';
 import ReactCursorPosition from '../../../dist/ReactCursorPosition';
 import PositionLabel from './PositionLabel';
-import PositionChangedLabel from './PositionChangedLabel';
 import InstructionsLabel from './InstructionsLabel';
 
 
 export default class extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
+            elementDimensions: {
+                width: 0,
+                height: 0
+            },
             isPositionOutside: true,
             position: {
                 x: 0,
@@ -28,7 +31,13 @@ export default class extends React.Component {
                     <PositionLabel />
                     <InstructionsLabel />
                 </ReactCursorPosition>
-                <PositionChangedLabel {...this.state} />
+                <PositionLabel
+                    {...this.state}
+                    {...{
+                        className: 'example__external-label',
+                        shouldShowIsActive: false
+                    }}
+                />
             </div>
         );
     }

diff --git a/example/src/pages/MapProps.js b/example/src/pages/MapProps.js
@@ -55,7 +55,7 @@ class  MapChildPropsPage extends Component {
                             sm={6}
                             md={8}
                             className="example__source-container"
-                            style={{ height: '340px' }}
+                            style={{ height: '360px' }}
                         >
                             <iframe
                                 src="map-child-props.html"

diff --git a/example/styles/app.css b/example/styles/app.css
@@ -57,11 +57,19 @@ li.active a {
     height: 20px;
     width: 100%;
     position: absolute;
-    top: 60%;
+    top: 70%;
     left: 0;
     color: #337ab7;
 }
 
+.example__instructions--center {
+    top: calc(50% - 10px);
+}
+
+.example__instructions--low {
+    top: 70% !important;
+}
+
 .example__source-container {
     margin: 20px 0;
 }

diff --git a/src/ReactCursorPosition.js b/src/ReactCursorPosition.js
@@ -11,6 +11,10 @@ export default class extends React.Component {
         super(props);
 
         this.state = {
+            elementDimensions: {
+                width: 0,
+                height: 0
+            },
             isActive: false,
             isPositionOutside: true,
             position: {
@@ -23,9 +27,7 @@ export default class extends React.Component {
 
         this.elementOffset = {
             x: 0,
-            y: 0,
-            h: 0,
-            w: 0
+            y: 0
         };
 
         this.onTouchStart = this.onTouchStart.bind(this);
@@ -63,7 +65,7 @@ export default class extends React.Component {
 
     onTouchStart(e) {
         const position = this.getDocumentRelativePosition(this.getTouchEvent(e));
-        this.elementOffset = this.getDocumentRelativeElementOffset(e.currentTarget);
+        this.init(e.currentTarget);
         this.setPositionState(position);
 
         if (this.props.isActivatedOnTouch) {
@@ -89,12 +91,15 @@ export default class extends React.Component {
     }
 
     onMouseEnter(e) {
-        this.elementOffset = this.getDocumentRelativeElementOffset(e.currentTarget);
+        this.init(e.currentTarget);
         this.activate();
         this.setPositionState(this.getDocumentRelativePosition(e))
     }
 
     onMouseMove(e) {
+        if (!this.state.isActive) {
+            this.onMouseEnter(e);
+        }
         this.setPositionState(this.getDocumentRelativePosition(e));
     }
 
@@ -106,6 +111,12 @@ export default class extends React.Component {
         this.deactivate();
     }
 
+    init(el) {
+        const { x, y, w, h } = this.getDocumentRelativeElementOffset(el);
+        this.elementOffset = { x, y };
+        this.setElementDimensionsState({ width: w, height: h });
+    }
+
     activate() {
         this.setState({
             isActive: true
@@ -142,6 +153,12 @@ export default class extends React.Component {
         });
     }
 
+    setElementDimensionsState(dimensions) {
+        this.setState({
+            elementDimensions: dimensions
+        })
+    }
+
     setPressEventTimer() {
         const {
             pressDuration,
@@ -167,7 +184,8 @@ export default class extends React.Component {
 
     getIsPositionOutside(position) {
         const { x, y } = position;
-        const { x: elx, y: ely, w: elw, h: elh } = this.elementOffset;
+        const { x: elx, y: ely } = this.elementOffset;
+        const { width: elw, height: elh } = this.state.elementDimensions;
 
         return (
             x < elx ||
@@ -228,11 +246,10 @@ export default class extends React.Component {
     }
 
     triggerOnPositionChanged() {
-        const { isPositionOutside, position } = this.state;
-        this.props.onPositionChanged({
-            isPositionOutside,
-            position
-        });
+        this.props.onPositionChanged(omit(
+            this.state,
+            'isActive'
+        ));
     }
 
     isReactComponent(reactElement) {
@@ -288,14 +305,9 @@ export default class extends React.Component {
 
     render() {
         const { children, className, mapChildProps, style } = this.props;
-        const { isActive, isPositionOutside, position } = this.state;
         const props = objectAssign(
             {},
-            mapChildProps({
-                isActive,
-                isPositionOutside,
-                position
-            }),
+            mapChildProps(this.state),
             this.getPassThroughProps()
         );