Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge remote-tracking branch 'upstream/master'
- Loading branch information
Showing
84 changed files
with
17,435 additions
and
179 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
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,57 @@ | ||
| const React = window.React; | ||
| const ReactDOM = window.ReactDOM; | ||
|
|
||
| class IframePortal extends React.Component { | ||
| iframeRef = null; | ||
|
|
||
| handleRef = ref => { | ||
| if (ref !== this.iframeRef) { | ||
| this.iframeRef = ref; | ||
| if (ref) { | ||
| if (ref.contentDocument && this.props.head) { | ||
| ref.contentDocument.head.innerHTML = this.props.head; | ||
| } | ||
| // Re-render must take place in the next tick (Firefox) | ||
| setTimeout(() => { | ||
| this.forceUpdate(); | ||
| }); | ||
| } | ||
| } | ||
| }; | ||
|
|
||
| render() { | ||
| const ref = this.iframeRef; | ||
| let portal = null; | ||
| if (ref && ref.contentDocument) { | ||
| portal = ReactDOM.createPortal( | ||
| this.props.children, | ||
| ref.contentDocument.body | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <div> | ||
| <iframe | ||
| style={{border: 'none', height: this.props.height}} | ||
| ref={this.handleRef} | ||
| /> | ||
| {portal} | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| class IframeSubtree extends React.Component { | ||
| warned = false; | ||
| render() { | ||
| if (!this.warned) { | ||
| console.error( | ||
| `IFrame has not yet been implemented for React v${React.version}` | ||
| ); | ||
| this.warned = true; | ||
| } | ||
| return <div>{this.props.children}</div>; | ||
| } | ||
| } | ||
|
|
||
| export default (ReactDOM.createPortal ? IframePortal : IframeSubtree); |
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
50 changes: 50 additions & 0 deletions
50
fixtures/dom/src/components/fixtures/selection-events/OnSelectEventTestCase.js
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 @@ | ||
| import TestCase from '../../TestCase'; | ||
| import Iframe from '../../Iframe'; | ||
| const React = window.React; | ||
|
|
||
| class OnSelectIframe extends React.Component { | ||
| state = {count: 0, value: 'Select Me!'}; | ||
|
|
||
| _onSelect = event => { | ||
| this.setState(({count}) => ({count: count + 1})); | ||
| }; | ||
|
|
||
| _onChange = event => { | ||
| this.setState({value: event.target.value}); | ||
| }; | ||
|
|
||
| render() { | ||
| const {count, value} = this.state; | ||
| return ( | ||
| <Iframe height={60}> | ||
| Selection Event Count: {count} | ||
| <input | ||
| type="text" | ||
| onSelect={this._onSelect} | ||
| value={value} | ||
| onChange={this._onChange} | ||
| /> | ||
| </Iframe> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| export default class OnSelectEventTestCase extends React.Component { | ||
| render() { | ||
| return ( | ||
| <TestCase | ||
| title="onSelect events within iframes" | ||
| description="onSelect events should fire for elements rendered inside iframes"> | ||
| <TestCase.Steps> | ||
| <li>Highlight some of the text in the input below</li> | ||
| <li>Move the cursor around using the arrow keys</li> | ||
| </TestCase.Steps> | ||
| <TestCase.ExpectedResult> | ||
| The displayed count should increase as you highlight or move the | ||
| cursor | ||
| </TestCase.ExpectedResult> | ||
| <OnSelectIframe /> | ||
| </TestCase> | ||
| ); | ||
| } | ||
| } |
44 changes: 44 additions & 0 deletions
44
fixtures/dom/src/components/fixtures/selection-events/ReorderedInputsTestCase.js
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,44 @@ | ||
| import TestCase from '../../TestCase'; | ||
| import Iframe from '../../Iframe'; | ||
| const React = window.React; | ||
|
|
||
| export default class ReorderedInputsTestCase extends React.Component { | ||
| state = {count: 0}; | ||
|
|
||
| componentDidMount() { | ||
| this.interval = setInterval(() => { | ||
| this.setState({count: this.state.count + 1}); | ||
| }, 2000); | ||
| } | ||
|
|
||
| componentWillUnmount() { | ||
| clearInterval(this.interval); | ||
| } | ||
|
|
||
| renderInputs() { | ||
| const inputs = [ | ||
| <input key={1} defaultValue="Foo" />, | ||
| <input key={2} defaultValue="Bar" />, | ||
| ]; | ||
| if (this.state.count % 2 === 0) { | ||
| inputs.reverse(); | ||
| } | ||
| return inputs; | ||
| } | ||
|
|
||
| render() { | ||
| return ( | ||
| <TestCase title="Reordered input elements in iframes" description=""> | ||
| <TestCase.Steps> | ||
| <li>The two inputs below swap positions every two seconds</li> | ||
| <li>Select the text in either of them</li> | ||
| <li>Wait for the swap to occur</li> | ||
| </TestCase.Steps> | ||
| <TestCase.ExpectedResult> | ||
| The selection you made should be maintained | ||
| </TestCase.ExpectedResult> | ||
| <Iframe height={50}>{this.renderInputs()}</Iframe> | ||
| </TestCase> | ||
| ); | ||
| } | ||
| } |
19 changes: 19 additions & 0 deletions
19
fixtures/dom/src/components/fixtures/selection-events/index.js
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,19 @@ | ||
| import FixtureSet from '../../FixtureSet'; | ||
| import ReorderedInputsTestCase from './ReorderedInputsTestCase'; | ||
| import OnSelectEventTestCase from './OnSelectEventTestCase'; | ||
| const React = window.React; | ||
|
|
||
| export default function SelectionEvents() { | ||
| return ( | ||
| <FixtureSet | ||
| title="Selection Restoration" | ||
| description=" | ||
| When React commits changes it may perform operations which cause existing | ||
| selection state to be lost. This is manually managed by reading the | ||
| selection state before commits and then restoring it afterwards. | ||
| "> | ||
| <ReorderedInputsTestCase /> | ||
| <OnSelectEventTestCase /> | ||
| </FixtureSet> | ||
| ); | ||
| } |
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
Oops, something went wrong.