From 8f288733ce4263d40cc1f3b9863a739cfdd0ec0a Mon Sep 17 00:00:00 2001 From: Ethan Selzer Date: Fri, 26 May 2017 07:42:15 -0700 Subject: [PATCH] Support elementDimensions Output Prop --- README.md | 6 +- example/public/circle.yml | 4 - example/public/map-child-props.html | 4 +- example/public/should-decorate-children.html | 6 +- example/src/components/ActivationChanged.js | 2 +- example/src/components/BasicExample.js | 2 +- example/src/components/InstructionsLabel.js | 4 +- example/src/components/MapProps.js | 4 +- example/src/components/PointPositionLabel.js | 8 + example/src/components/PositionChanged.js | 16 +- .../src/components/PositionChangedLabel.js | 18 --- example/src/components/PositionLabel.js | 20 ++- .../src/components/ShouldDecorateChildren.js | 13 +- example/src/pages/MapProps.js | 2 +- example/styles/app.css | 10 +- src/ReactCursorPosition.js | 46 +++--- test/ReactCursorPosition.spec.js | 142 +++++++++++++----- 17 files changed, 214 insertions(+), 93 deletions(-) delete mode 100644 example/public/circle.yml delete mode 100644 example/src/components/PositionChangedLabel.js diff --git a/README.md b/README.md index 770bba85..c5d764a1 100644 --- 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 deleted file mode 100644 index f69f15eb..00000000 --- a/example/public/circle.yml +++ /dev/null @@ -1,4 +0,0 @@ -general: - branches: - ignore: - - gh-pages # list of branches to ignore diff --git a/example/public/map-child-props.html b/example/public/map-child-props.html index f561c421..058f0e5f 100644 --- a/example/public/map-child-props.html +++ b/example/public/map-child-props.html @@ -20,8 +20,10 @@ 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/public/should-decorate-children.html b/example/public/should-decorate-children.html index 82329cdf..b34e56d6 100644 --- 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 @@ <PositionLabel /> <InstructionsLabel /> </ReactCursorPosition> - <PositionChangedLabel {...this.state} /> + <PositionLabel {...this.state} {...{ + className: 'example__external-label', + shouldShowIsActive: false } + }/> </div> ); } diff --git a/example/src/components/ActivationChanged.js b/example/src/components/ActivationChanged.js index 1b94b88b..7ca6d0b1 100644 --- 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 }); } }}> - + diff --git a/example/src/components/BasicExample.js b/example/src/components/BasicExample.js index 832442f7..46524e67 100644 --- 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' }}> - + ); diff --git a/example/src/components/InstructionsLabel.js b/example/src/components/InstructionsLabel.js index 1b90f343..0a5f9d02 100644 --- a/example/src/components/InstructionsLabel.js +++ b/example/src/components/InstructionsLabel.js @@ -1,7 +1,7 @@ import React from 'react'; -export default () => ( -
+export default ({ className }) => ( +
Long Touch and Drag Or Hover Here
); diff --git a/example/src/components/MapProps.js b/example/src/components/MapProps.js index 77cc7669..cd7c6673 100644 --- a/example/src/components/MapProps.js +++ b/example/src/components/MapProps.js @@ -6,8 +6,10 @@ import InstructionsLabel from './InstructionsLabel'; export default () => ( { + 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 index aa3ec705..e7dda2aa 100644 --- 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) => {
{`x: ${x}`}
{`y: ${y}`}
+ {`isActive: ${isActive}`}
+ {`Element Width: ${width}`}
+ {`Element Height: ${height}`}
{`isOutside: ${isOutside ? 'true' : 'false'}`}
); diff --git a/example/src/components/PositionChanged.js b/example/src/components/PositionChanged.js index 9590b5cc..b9b52e42 100644 --- 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) }}> - + - +
); } diff --git a/example/src/components/PositionChangedLabel.js b/example/src/components/PositionChangedLabel.js deleted file mode 100644 index 0fb21cad..00000000 --- a/example/src/components/PositionChangedLabel.js +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; - -export default (props) => { - const { - isPositionOutside = true, - position: { - x = 0, - y = 0, - } = {} - } = props; - return ( -
- {`x: ${x}`}
- {`y: ${y}`}
- {`isPositionOutside: ${isPositionOutside ? 'true' : 'false'}`} -
- ); -} diff --git a/example/src/components/PositionLabel.js b/example/src/components/PositionLabel.js index e5834014..d975e69f 100644 --- 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 ( -
+
{`x: ${x}`}
{`y: ${y}`}
- {`isActive: ${isActive}`}
+ {props.shouldShowIsActive && [`isActive: ${isActive}`,
]} + {`Element Width: ${width}`}
+ {`Element Height: ${height}`}
{`isOutside: ${isPositionOutside ? 'true' : 'false'}`}
); -} +}; + +PositionLabel.defaultProps = { + shouldShowIsActive: true +}; + +export default PositionLabel; diff --git a/example/src/components/ShouldDecorateChildren.js b/example/src/components/ShouldDecorateChildren.js index f401d436..73cb473f 100644 --- a/example/src/components/ShouldDecorateChildren.js +++ b/example/src/components/ShouldDecorateChildren.js @@ -1,7 +1,6 @@ import React from 'react'; import ReactCursorPosition from '../../../dist/ReactCursorPosition'; import PositionLabel from './PositionLabel'; -import PositionChangedLabel from './PositionChangedLabel'; import InstructionsLabel from './InstructionsLabel'; @@ -9,6 +8,10 @@ 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 { - +
); } diff --git a/example/src/pages/MapProps.js b/example/src/pages/MapProps.js index b45173b8..5e78721f 100644 --- 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' }} >