Use updated syntax in examples

ragalie · ragalie · commit 2879dd99b14f · 2018-12-31T17:29:51.000-05:00
diff --git a/example/public/activation-click.html b/example/public/activation-click.html
@@ -21,8 +21,12 @@
     &lt;ReactCursorPosition
         activationInteractionMouse={INTERACTIONS.CLICK}
     &gt;
-        &lt;PositionLabel /&gt;
-        &lt;InstructionsLabel /&gt;
+        {(cursorProps) => (
+            &lt;div&gt;
+                &lt;PositionLabel {...cursorProps} /&gt;
+                &lt;InstructionsLabel /&gt;
+            &lt;/div&gt;
+        )}
     &lt;/ReactCursorPosition&gt;
 );
 </code>
diff --git a/example/public/activation-hover.html b/example/public/activation-hover.html
@@ -23,8 +23,12 @@
         hoverDelayInMs={250} //default: 0
         hoverOffDelayInMs={150} //default: 0
     &gt;
-        &lt;PositionLabel /&gt;
-        &lt;InstructionsLabel /&gt;
+        {(cursorProps) => (
+            &lt;div&gt;
+                &lt;PositionLabel {...cursorProps} /&gt;
+                &lt;InstructionsLabel /&gt;
+            &lt;/div&gt;
+        )}
     &lt;/ReactCursorPosition&gt;
 );
 </code>
diff --git a/example/public/activation-press.html b/example/public/activation-press.html
@@ -23,8 +23,12 @@
         pressDurationInMs={500} //default
         pressMoveThreshold={5} //default
     &gt;
-        &lt;PositionLabel /&gt;
-        &lt;InstructionsLabel /&gt;
+        {(cursorProps) => (
+            &lt;div&gt;
+                &lt;PositionLabel {...cursorProps} /&gt;
+                &lt;InstructionsLabel /&gt;
+            &lt;/div&gt;
+        )}
     &lt;/ReactCursorPosition&gt;
 );
 </code>
diff --git a/example/public/activation-tap.html b/example/public/activation-tap.html
@@ -21,8 +21,12 @@
     &lt;ReactCursorPosition
         activationInteractionTouch={INTERACTIONS.TAP}
     &gt;
-        &lt;PositionLabel /&gt;
-        &lt;InstructionsLabel /&gt;
+        {(cursorProps) => (
+            &lt;div&gt;
+                &lt;PositionLabel {...cursorProps} /&gt;
+                &lt;InstructionsLabel /&gt;
+            &lt;/div&gt;
+        )}
     &lt;/ReactCursorPosition&gt;
 );
 </code>
diff --git a/example/public/activation-touch.html b/example/public/activation-touch.html
@@ -21,8 +21,12 @@
     &lt;ReactCursorPosition
         activationInteractionTouch={INTERACTIONS.TOUCH}
     &gt;
-        &lt;PositionLabel /&gt;
-        &lt;InstructionsLabel /&gt;
+        {(cursorProps) => (
+            &lt;div&gt;
+                &lt;PositionLabel {...cursorProps} /&gt;
+                &lt;InstructionsLabel /&gt;
+            &lt;/div&gt;
+        )}
     &lt;/ReactCursorPosition&gt;
 );
 </code>
diff --git a/example/public/class-name.html b/example/public/class-name.html
@@ -19,8 +19,12 @@
 
 export default () => (
     &lt;ReactCursorPosition className="example__target"&gt;
-        &lt;PositionLabel /&gt;
-        &lt;InstructionsLabel /&gt;
+        {(cursorProps) => (
+            &lt;div&gt;
+                &lt;PositionLabel {...cursorProps} /&gt;
+                &lt;InstructionsLabel /&gt;
+            &lt;/div&gt;
+        )}
     &lt;/ReactCursorPosition&gt;
 );
 </code>
diff --git a/example/public/on-activation-changed.html b/example/public/on-activation-changed.html
@@ -34,7 +34,9 @@
                         this.setState({ isActive });
                     }
                 }}&gt;
-                    &lt;InstructionsLabel /&gt;
+                    {() => (
+                        &lt;InstructionsLabel /&gt;
+                    )}
                 &lt;/ReactCursorPosition&gt;
                 &lt;ActivationChangedLabel {...this.state} /&gt;
             &lt;/div&gt;
diff --git a/example/public/on-detected-environment-changed.html b/example/public/on-detected-environment-changed.html
@@ -32,7 +32,9 @@
                         this.setState({ detectedEnvironment });
                     }
                 }}&gt;
-                    &lt;InstructionsLabel /&gt;
+                    {() => (
+                        &lt;InstructionsLabel /&gt;
+                    )}
                 &lt;/ReactCursorPosition&gt;
                 &lt;DetectedEnvironmentChangeLabel {...this.state} /&gt;
             &lt;/div&gt;
diff --git a/example/public/on-position-changed.html b/example/public/on-position-changed.html
@@ -36,7 +36,9 @@
                     className: 'example__target',
                     onPositionChanged: props =&gt; this.setState(props)
                 }}&gt;
-                    &lt;InstructionsLabel /&gt;
+                    {() => (
+                        &lt;InstructionsLabel /&gt;
+                    )}
                 &lt;/ReactCursorPosition&gt;
                 &lt;PositionChangedLabel {...this.state} /&gt;
             &lt;/div&gt;
diff --git a/example/public/should-decorate-children.html b/example/public/should-decorate-children.html
@@ -37,8 +37,12 @@
                     onPositionChanged: props => this.setState(props),
                     shouldDecorateChildren: false
                 }}&gt;
-                    &lt;PositionLabel /&gt;
-                    &lt;InstructionsLabel /&gt;
+                    {() => (
+                        &lt;div&gt;
+                            &lt;PositionLabel /&gt;
+                            &lt;InstructionsLabel /&gt;
+                        &lt;/div&gt;
+                    )}
                 &lt;/ReactCursorPosition&gt;
                 &lt;PositionLabel {...this.state} {...{
                     className: 'example__external-label',
diff --git a/example/public/style.html b/example/public/style.html
@@ -29,8 +29,12 @@
 
         return (
             &lt;ReactCursorPosition {...{ style }}&gt;
-                &lt;PositionLabel /&gt;
-                &lt;InstructionsLabel /&gt;
+                {(cursorProps) => (
+                    &lt;div&gt;
+                        &lt;PositionLabel {...cursorProps} /&gt;
+                        &lt;InstructionsLabel /&gt;
+                    &lt;/div&gt;
+                )}
             &lt;/ReactCursorPosition&gt;
         );
     }
diff --git a/example/src/components/ActivationByClick.js b/example/src/components/ActivationByClick.js
@@ -7,10 +7,13 @@ export default () => (
         className="example__target"
         activationInteractionMouse={INTERACTIONS.CLICK}
     >
-        <PositionLabel />
-        <div className="example__instructions">
-            Click to activate. Hover. Then click again to deactivate.
-        </div>
+        {(cursorProps) => (
+            <div>
+                <PositionLabel {...cursorProps}/>
+                <div className="example__instructions">
+                    Click to activate. Hover. Then click again to deactivate.
+                </div>
+            </div>
+        )}
     </ReactCursorPosition>
 );
-
diff --git a/example/src/components/ActivationByHover.js b/example/src/components/ActivationByHover.js
@@ -10,10 +10,14 @@ export default () => (
         hoverDelayInMs={250} //default 0
         hoverOffDelayInMs={150} //default 0
     >
-        <PositionLabel />
-        <div className="example__instructions">
-            <InstructionsLabel />
-        </div>
+        {(cursorProps) => (
+            <div>
+                <PositionLabel {...cursorProps} />
+                <div className="example__instructions">
+                    <InstructionsLabel />
+                </div>
+            </div>
+        )}
     </ReactCursorPosition>
 );
 
diff --git a/example/src/components/ActivationByPress.js b/example/src/components/ActivationByPress.js
@@ -9,10 +9,14 @@ export default () => (
         pressDurationInMs={500} //default
         pressMoveThreshold={5} //default
     >
-        <PositionLabel />
-        <div className="example__instructions">
-            Press and hold to activate, then drag
-        </div>
+        {(cursorProps) => (
+            <div>
+                <PositionLabel {...cursorProps} />
+                <div className="example__instructions">
+                    Press and hold to activate, then drag
+                </div>
+            </div>
+        )}
     </ReactCursorPosition>
 );
 
diff --git a/example/src/components/ActivationByTap.js b/example/src/components/ActivationByTap.js
@@ -7,10 +7,14 @@ export default () => (
         className="example__target"
         activationInteractionTouch={INTERACTIONS.TAP}
     >
-        <PositionLabel />
-        <div className="example__instructions">
-            Tap to activate. Drag. Tap again to deactivate.
-        </div>
+        {(cursorProps) => (
+            <div>
+                <PositionLabel {...cursorProps} />
+                <div className="example__instructions">
+                    Tap to activate. Drag. Tap again to deactivate.
+                </div>
+            </div>
+        )}
     </ReactCursorPosition>
 );
 
diff --git a/example/src/components/ActivationByTouch.js b/example/src/components/ActivationByTouch.js
@@ -7,10 +7,14 @@ export default () => (
         className="example__target"
         activationInteractionTouch={INTERACTIONS.TOUCH}
     >
-        <PositionLabel />
-        <div className="example__instructions">
-            Touch and Drag
-        </div>
+        {(cursorProps) => (
+            <div>
+                <PositionLabel {...cursorProps} />
+                <div className="example__instructions">
+                    Touch and Drag
+                </div>
+            </div>
+        )}
     </ReactCursorPosition>
 );
 
diff --git a/example/src/components/ActivationChanged.js b/example/src/components/ActivationChanged.js
@@ -20,7 +20,9 @@ export default class extends React.Component {
                         this.setState({ isActive });
                     }
                 }}>
-                    <InstructionsLabel className="example__instructions example__instructions--solo"/>
+                    {() => (
+                        <InstructionsLabel className="example__instructions example__instructions--solo"/>
+                    )}
                 </ReactCursorPosition>
                 <ActivationChangedLabel {...this.state} />
             </div>
diff --git a/example/src/components/BasicExample.js b/example/src/components/BasicExample.js
@@ -10,8 +10,12 @@ export default class extends React.Component {
             <ReactCursorPosition {...{
                 className: 'example__target example__target--basic'
             }}>
-                <PositionLabel />
-                <InstructionsLabel className="example__instructions" />
+                {(cursorProps) => (
+                    <div>
+                        <PositionLabel {...cursorProps} />
+                        <InstructionsLabel className="example__instructions" />
+                    </div>
+                )}
             </ReactCursorPosition>
         );
     }
diff --git a/example/src/components/ClassName.js b/example/src/components/ClassName.js
@@ -5,7 +5,11 @@ import InstructionsLabel from './InstructionsLabel';
 
 export default () => (
     <ReactCursorPosition className="example__target" >
-        <PositionLabel />
-        <InstructionsLabel />
+        {(cursorProps) => (
+            <div>
+                <PositionLabel {...cursorProps} />
+                <InstructionsLabel />
+            </div>
+        )}
     </ReactCursorPosition>
 );
diff --git a/example/src/components/DetectedEnvironmentChanged.js b/example/src/components/DetectedEnvironmentChanged.js
@@ -20,7 +20,9 @@ export default class extends React.Component {
                         this.setState({ detectedEnvironment });
                     }
                 }}>
-                    <InstructionsLabel className="example__instructions example__instructions--solo"/>
+                    {() => (
+                        <InstructionsLabel className="example__instructions example__instructions--solo"/>
+                    )}
                 </ReactCursorPosition>
                 <DetectedEnvironmentChangedLabel {...this.state} />
             </div>
diff --git a/example/src/components/PositionChanged.js b/example/src/components/PositionChanged.js
@@ -26,7 +26,9 @@ export default class extends React.Component {
                     className: 'example__target',
                     onPositionChanged: props => this.setState(props)
                 }}>
-                    <InstructionsLabel className="example__instructions example__instructions--solo" />
+                    {() => (
+                        <InstructionsLabel className="example__instructions example__instructions--solo" />
+                    )}
                 </ReactCursorPosition>
                 <PositionLabel
                     {...this.state}
diff --git a/example/src/components/Reset.js b/example/src/components/Reset.js
@@ -27,8 +27,12 @@ export default class extends React.Component {
                     className="reset example__target example__target--basic"
                     ref={(rcp) => this.rcp = rcp }
                 >
-                    <div id="spacer" style={{height: '145px'}} />
-                    <PositionLabel />
+                    {(cursorProps) => (
+                        <div>
+                            <div id="spacer" style={{height: '145px'}} />
+                            <PositionLabel {...cursorProps} />
+                        </div>
+                    )}
                 </ReactCursorPosition>
             </div>
         );
diff --git a/example/src/components/ShouldDecorateChildren.js b/example/src/components/ShouldDecorateChildren.js
@@ -28,8 +28,12 @@ export default class extends React.Component {
                     onPositionChanged: (props) => this.setState(props),
                     shouldDecorateChildren: false
                 }}>
-                    <PositionLabel />
-                    <InstructionsLabel />
+                    {() => (
+                        <div>
+                            <PositionLabel />
+                            <InstructionsLabel />
+                        </div>
+                    )}
                 </ReactCursorPosition>
                 <PositionLabel
                     {...this.state}
diff --git a/example/src/components/Style.js b/example/src/components/Style.js
@@ -16,8 +16,12 @@ export default class extends React.Component {
 
         return (
             <ReactCursorPosition {...{ style }}>
-                <PositionLabel />
-                <InstructionsLabel />
+                {(cursorProps) => (
+                    <div>
+                        <PositionLabel {...cursorProps} />
+                        <InstructionsLabel />
+                    </div>
+                )}
             </ReactCursorPosition>
         );
     }
