-
Notifications
You must be signed in to change notification settings - Fork 35
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
V2.2.0: Support Hover Intent + Environment Detection
- Loading branch information
1 parent
09ec794
commit 2e60d5b
Showing
49 changed files
with
4,140 additions
and
1,606 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <link rel="stylesheet" href="//cdn.jsdelivr.net/highlight.js/9.9.0/styles/solarized-light.min.css"> | ||
| <script src="//cdn.jsdelivr.net/highlight.js/9.9.0/highlight.min.js"></script> | ||
| <link rel="stylesheet" href="styles.css"> | ||
| <title>Class Name | Code Example | React Cursor Position</title> | ||
| </head> | ||
| <body> | ||
| <pre> | ||
| <code> | ||
| import React from 'react'; | ||
| import ReactCursorPosition from 'react-cursor-position'; | ||
|
|
||
| import PositionLabel from './PositionLabel'; | ||
| import InstructionsLabel from './InstructionsLabel'; | ||
|
|
||
| export default () => ( | ||
| <ReactCursorPosition | ||
| className="example__target" | ||
| hoverDelayInMs={1000} | ||
| hoverOffDelayInMs={500} | ||
| > | ||
| <PositionLabel /> | ||
| <InstructionsLabel /> | ||
| </ReactCursorPosition> | ||
| ); | ||
| </code> | ||
| </pre> | ||
|
|
||
| <script> | ||
| hljs.initHighlightingOnLoad(); | ||
| </script> | ||
|
|
||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <link rel="stylesheet" href="//cdn.jsdelivr.net/highlight.js/9.9.0/styles/solarized-light.min.css"> | ||
| <script src="//cdn.jsdelivr.net/highlight.js/9.9.0/highlight.min.js"></script> | ||
| <link rel="stylesheet" href="styles.css"> | ||
| <title>On Detected Environment Changed | Code Example | React Cursor Position</title> | ||
| </head> | ||
| <body> | ||
| <pre> | ||
| <code class="JavaScript"> | ||
| import React from 'react'; | ||
| import ReactCursorPosition from 'react-cursor-position'; | ||
|
|
||
| import DetectedEnvironmentChangeLabel from './DetectedEnvironmentChangeLabel'; | ||
| import InstructionsLabel from './InstructionsLabel'; | ||
|
|
||
| export default class extends React.Component { | ||
| constructor(props) { | ||
| super(props); | ||
| this.state = { detectedEnvironment: {} }; | ||
| } | ||
|
|
||
| render() { | ||
| return ( | ||
| <div className="example"> | ||
| <ReactCursorPosition {...{ | ||
| className: 'example__target', | ||
| onDetectedEnvironmentChanged: (detectedEnvironment) => { | ||
| this.setState({ detectedEnvironment }); | ||
| } | ||
| }}> | ||
| <InstructionsLabel /> | ||
| </ReactCursorPosition> | ||
| <DetectedEnvironmentChangeLabel {...this.state} /> | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
| </code> | ||
| </pre> | ||
|
|
||
| <script> | ||
| hljs.initHighlightingOnLoad(); | ||
| </script> | ||
|
|
||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,20 +1,18 @@ | ||
| import React from 'react'; | ||
| import ReactCursorPosition from '../../../dist/ReactCursorPosition'; | ||
| import ReactCursorPosition from '../pkg-lnk/ReactCursorPosition'; | ||
|
|
||
| import PositionLabel from './PositionLabel'; | ||
| import InstructionsLabel from './InstructionsLabel'; | ||
|
|
||
| export default class extends React.Component { | ||
| render() { | ||
| return ( | ||
| <div className="example"> | ||
| <ReactCursorPosition {...{ | ||
| className: 'example__target example__target--basic' | ||
| }}> | ||
| <PositionLabel /> | ||
| <InstructionsLabel className="example__instructions--low" /> | ||
| </ReactCursorPosition> | ||
| </div> | ||
| <ReactCursorPosition {...{ | ||
| className: 'example__target example__target--basic' | ||
| }}> | ||
| <PositionLabel /> | ||
| <InstructionsLabel className="example__instructions" /> | ||
| </ReactCursorPosition> | ||
| ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| import React from 'react'; | ||
| import ReactCursorPosition from '../pkg-lnk/ReactCursorPosition'; | ||
| import DetectedEnvironmentChangedLabel from './DetectedEnvironmentChangedLabel'; | ||
| import InstructionsLabel from './InstructionsLabel'; | ||
|
|
||
| export default class extends React.Component { | ||
| constructor(props) { | ||
| super(props); | ||
| this.state = { | ||
| detectedEnvironment: {} | ||
| }; | ||
| } | ||
|
|
||
| render() { | ||
| return ( | ||
| <div className="example"> | ||
| <ReactCursorPosition {...{ | ||
| className: 'example__target', | ||
| onDetectedEnvironmentChanged: (detectedEnvironment) => { | ||
| this.setState({ detectedEnvironment }); | ||
| } | ||
| }}> | ||
| <InstructionsLabel className="example__instructions example__instructions--solo"/> | ||
| </ReactCursorPosition> | ||
| <DetectedEnvironmentChangedLabel {...this.state} /> | ||
| </div> | ||
| ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| import React from 'react'; | ||
|
|
||
| export default (props) => { | ||
| const { | ||
| detectedEnvironment: { | ||
| isMouseDetected = false, | ||
| isTouchDetected = false | ||
| } = {} | ||
| } = props; | ||
| return ( | ||
| <div className="example__external-label"> | ||
| {`isMouseDetected: ${isMouseDetected ? 'true' : 'false'}`}<br /> | ||
| {`isTouchDetected: ${isTouchDetected ? 'true' : 'false'}`} | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| import React from 'react'; | ||
| import ReactCursorPosition from '../pkg-lnk/ReactCursorPosition'; | ||
| import PositionLabel from './PositionLabel'; | ||
| import InstructionsLabel from './InstructionsLabel'; | ||
|
|
||
| export default () => ( | ||
| <ReactCursorPosition | ||
| className="example__target" | ||
| hoverDelayInMs={1000} | ||
| hoverOffDelayInMs={500} | ||
| > | ||
| <PositionLabel /> | ||
| <div className="example__instructions"> | ||
| <InstructionsLabel /> | ||
| </div> | ||
| </ReactCursorPosition> | ||
| ); | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.