Facebook/react
1
0
Fork 0
mirror of https://github.com/facebook/react.git synced 2025-11-01 09:12:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixed several createClass references in fixtures

Browse Source
This commit is contained in:
Brian Vaughn
2017-04-10 22:40:37 -07:00
parent 08bd0209a8
commit ef5b5c68f3
13 changed files with 252 additions and 273 deletions
Download Patch File Download Diff File Expand all files Collapse all files
fixtures/art/VectorWidget.js
+17 -19
View File
@@ -24,13 +24,11 @@ var BASE_VEL = 0.15;
/** /**
* An animated SVG component. * An animated SVG component.
*/ */
var VectorWidget = React.createClass({ class VectorWidget extends React.Component {
/** /**
* Initialize state members. * Initialize state members.
*/ */
getInitialState: function() { state = {degrees: 0, velocity: 0, drag: MOUSE_UP_DRAG};
return {degrees: 0, velocity: 0, drag: MOUSE_UP_DRAG};
},
/** /**
* When the component is mounted into the document - this is similar to a * When the component is mounted into the document - this is similar to a
@@ -39,40 +37,40 @@ var VectorWidget = React.createClass({
* method. Binding of `this.onTick` is not needed because all React methods * method. Binding of `this.onTick` is not needed because all React methods
* are automatically bound before being mounted. * are automatically bound before being mounted.
*/ */
componentDidMount: function() { componentDidMount() {
this._interval = window.setInterval(this.onTick, 20); this._interval = window.setInterval(this.onTick, 20);
}, }
componentWillUnmount: function() { componentWillUnmount() {
window.clearInterval(this._interval); window.clearInterval(this._interval);
}, }
onTick: function() { onTick = () => {
var nextDegrees = this.state.degrees + BASE_VEL + this.state.velocity; var nextDegrees = this.state.degrees + BASE_VEL + this.state.velocity;
var nextVelocity = this.state.velocity * this.state.drag; var nextVelocity = this.state.velocity * this.state.drag;
this.setState({degrees: nextDegrees, velocity: nextVelocity}); this.setState({degrees: nextDegrees, velocity: nextVelocity});
}, };
/** /**
* When mousing down, we increase the friction down the velocity. * When mousing down, we increase the friction down the velocity.
*/ */
handleMouseDown: function() { handleMouseDown = () => {
this.setState({drag: MOUSE_DOWN_DRAG}); this.setState({drag: MOUSE_DOWN_DRAG});
}, };
/** /**
* Cause the rotation to "spring". * Cause the rotation to "spring".
*/ */
handleMouseUp: function() { handleMouseUp = () => {
var nextVelocity = Math.min(this.state.velocity + CLICK_ACCEL, MAX_VEL); var nextVelocity = Math.min(this.state.velocity + CLICK_ACCEL, MAX_VEL);
this.setState({velocity: nextVelocity, drag: MOUSE_UP_DRAG}); this.setState({velocity: nextVelocity, drag: MOUSE_UP_DRAG});
}, };
/** /**
* This is the "main" method for any component. The React API allows you to * This is the "main" method for any component. The React API allows you to
* describe the structure of your UI component at *any* point in time. * describe the structure of your UI component at *any* point in time.
*/ */
render: function() { render() {
return ( return (
<Surface <Surface
width={700} width={700}
@@ -81,12 +79,12 @@ var VectorWidget = React.createClass({
{this.renderGraphic(this.state.degrees)} {this.renderGraphic(this.state.degrees)}
</Surface> </Surface>
); );
}, }
/** /**
* Better SVG support for React coming soon. * Better SVG support for React coming soon.
*/ */
renderGraphic: function(rotation) { renderGraphic = (rotation) => {
return ( return (
<Group <Group
@@ -112,8 +110,8 @@ var VectorWidget = React.createClass({
</Group> </Group>
</Group> </Group>
); );
} };
}); }
var BORDER_PATH = "M3.00191459,4 C1.34400294,4 0,5.34785514 0,7.00550479 L0,220.994495 C0,222.65439 1.34239483,224 3.00191459,224 L276.998085,224 C278.655997,224 280,222.652145 280,220.994495 L280,7.00550479 C280,5.34561033 278.657605,4 276.998085,4 L3.00191459,4 Z M3.00191459,4"; var BORDER_PATH = "M3.00191459,4 C1.34400294,4 0,5.34785514 0,7.00550479 L0,220.994495 C0,222.65439 1.34239483,224 3.00191459,224 L276.998085,224 C278.655997,224 280,222.652145 280,220.994495 L280,7.00550479 C280,5.34561033 278.657605,4 276.998085,4 L3.00191459,4 Z M3.00191459,4";
var BG_PATH = "M3.00191459,1 C1.34400294,1 0,2.34785514 0,4.00550479 L0,217.994495 C0,219.65439 1.34239483,221 3.00191459,221 L276.998085,221 C278.655997,221 280,219.652145 280,217.994495 L280,4.00550479 C280,2.34561033 278.657605,1 276.998085,1 L3.00191459,1 Z M3.00191459,1"; var BG_PATH = "M3.00191459,1 C1.34400294,1 0,2.34785514 0,4.00550479 L0,217.994495 C0,219.65439 1.34239483,221 3.00191459,221 L276.998085,221 C278.655997,221 280,219.652145 280,217.994495 L280,4.00550479 C280,2.34561033 278.657605,1 276.998085,1 L3.00191459,1 Z M3.00191459,1";
fixtures/dom/src/components/App.js
+9 -11
View File
@@ -4,17 +4,15 @@ import Fixtures from './fixtures';
import '../style.css'; import '../style.css';
const App = React.createClass({ function App () {
render() { return (
return ( <div>
<div> <Header />
<Header /> <div className="container" >
<div className="container" > <Fixtures />
<Fixtures />
</div>
</div> </div>
); </div>
}, );
}); }
export default App; export default App;
fixtures/dom/src/components/Header.js
+10 -9
View File
@@ -2,13 +2,14 @@ import { parse, stringify } from 'query-string';
import getVersionTags from '../tags'; import getVersionTags from '../tags';
const React = window.React; const React = window.React;
const Header = React.createClass({ class Header extends React.Component {
getInitialState() { constructor(props, context) {
super(props, context);
const query = parse(window.location.search); const query = parse(window.location.search);
const version = query.version || 'local'; const version = query.version || 'local';
const versions = [version]; const versions = [version];
return { version, versions }; this.state = { version, versions };
}, }
componentWillMount() { componentWillMount() {
getVersionTags() getVersionTags()
.then(tags => { .then(tags => {
@@ -16,7 +17,7 @@ const Header = React.createClass({
versions = [`local`, ...versions]; versions = [`local`, ...versions];
this.setState({ versions }); this.setState({ versions });
}) })
}, }
handleVersionChange(event) { handleVersionChange(event) {
const query = parse(window.location.search); const query = parse(window.location.search);
query.version = event.target.value; query.version = event.target.value;
@@ -24,10 +25,10 @@ const Header = React.createClass({
delete query.version; delete query.version;
} }
window.location.search = stringify(query); window.location.search = stringify(query);
}, }
handleFixtureChange(event) { handleFixtureChange(event) {
window.location.pathname = event.target.value; window.location.pathname = event.target.value;
}, }
render() { render() {
return ( return (
<header className="header"> <header className="header">
@@ -66,7 +67,7 @@ const Header = React.createClass({
</div> </div>
</header> </header>
); );
}, }
}); }
export default Header; export default Header;
fixtures/dom/src/components/fixtures/buttons/index.js
+1 -1
View File
@@ -10,7 +10,7 @@ function onButtonClick() {
export default class ButtonTestCases extends React.Component { export default class ButtonTestCases extends React.Component {
render() { render() {
return ( return (
<FixtureSet title="Buttons"> <FixtureSet title="Buttons" description="">
<TestCase <TestCase
title="onClick with disabled buttons" title="onClick with disabled buttons"
description="The onClick event handler should not be invoked when clicking on a disabled buyaton"> description="The onClick event handler should not be invoked when clicking on a disabled buyaton">
fixtures/dom/src/components/fixtures/index.js
+22 -24
View File
@@ -12,29 +12,27 @@ import ButtonFixtures from './buttons';
* A simple routing component that renders the appropriate * A simple routing component that renders the appropriate
* fixture based on the location pathname. * fixture based on the location pathname.
*/ */
const FixturesPage = React.createClass({ function FixturesPage() {
render() { switch (window.location.pathname) {
switch (window.location.pathname) { case '/text-inputs':
case '/text-inputs': return <TextInputFixtures />;
return <TextInputFixtures />; case '/range-inputs':
case '/range-inputs': return <RangeInputFixtures />;
return <RangeInputFixtures />; case '/selects':
case '/selects': return <SelectFixtures />;
return <SelectFixtures />; case '/textareas':
case '/textareas': return <TextAreaFixtures />;
return <TextAreaFixtures />; case '/input-change-events':
case '/input-change-events': return <InputChangeEvents />;
return <InputChangeEvents />; case '/number-inputs':
case '/number-inputs': return <NumberInputFixtures />;
return <NumberInputFixtures />; case '/password-inputs':
case '/password-inputs': return <PasswordInputFixtures />;
return <PasswordInputFixtures />; case '/buttons':
case '/buttons': return <ButtonFixtures />
return <ButtonFixtures /> default:
default: return <p>Please select a test fixture.</p>;
return <p>Please select a test fixture.</p>; }
} }
},
});
module.exports = FixturesPage; module.exports = FixturesPage;
fixtures/dom/src/components/fixtures/number-inputs/NumberTestCase.js
+6 -8
View File
@@ -2,16 +2,14 @@ const React = window.React;
import Fixture from '../../Fixture'; import Fixture from '../../Fixture';
const NumberTestCase = React.createClass({ class NumberTestCase extends React.Component {
getInitialState() { state = { value: '' };
return { value: '' }; onChange = (event) => {
},
onChange(event) {
const parsed = parseFloat(event.target.value, 10) const parsed = parseFloat(event.target.value, 10)
const value = isNaN(parsed) ? '' : parsed const value = isNaN(parsed) ? '' : parsed
this.setState({ value }) this.setState({ value })
}, }
render() { render() {
return ( return (
<Fixture> <Fixture>
@@ -31,7 +29,7 @@ const NumberTestCase = React.createClass({
</div> </div>
</Fixture> </Fixture>
); );
}, }
}); }
export default NumberTestCase; export default NumberTestCase;
fixtures/dom/src/components/fixtures/number-inputs/index.js
+132 -134
View File
@@ -4,164 +4,162 @@ import FixtureSet from '../../FixtureSet';
import TestCase from '../../TestCase'; import TestCase from '../../TestCase';
import NumberTestCase from './NumberTestCase'; import NumberTestCase from './NumberTestCase';
const NumberInputs = React.createClass({ function NumberInputs() {
render() { return (
return ( <FixtureSet
<FixtureSet title="Number inputs"
title="Number inputs" description="Number inputs inconsistently assign and report the value
description="Number inputs inconsistently assign and report the value property depending on the browser."
property depending on the browser." >
<TestCase
title="Backspacing"
description="The decimal place should not be lost"
> >
<TestCase <TestCase.Steps>
title="Backspacing" <li>Type "3.1"</li>
description="The decimal place should not be lost" <li>Press backspace, eliminating the "1"</li>
> </TestCase.Steps>
<TestCase.Steps>
<li>Type "3.1"</li>
<li>Press backspace, eliminating the "1"</li>
</TestCase.Steps>
<TestCase.ExpectedResult> <TestCase.ExpectedResult>
The field should read "3.", preserving the decimal place The field should read "3.", preserving the decimal place
</TestCase.ExpectedResult> </TestCase.ExpectedResult>
<NumberTestCase /> <NumberTestCase />
<p className="footnote"> <p className="footnote">
<b>Notes:</b> Chrome and Safari clear trailing <b>Notes:</b> Chrome and Safari clear trailing
decimals on blur. React makes this concession so that the decimals on blur. React makes this concession so that the
value attribute remains in sync with the value property. value attribute remains in sync with the value property.
</p> </p>
</TestCase> </TestCase>
<TestCase <TestCase
title="Decimal precision" title="Decimal precision"
description="Supports decimal precision greater than 2 places" description="Supports decimal precision greater than 2 places"
> >
<TestCase.Steps> <TestCase.Steps>
<li>Type "0.01"</li> <li>Type "0.01"</li>
</TestCase.Steps> </TestCase.Steps>
<TestCase.ExpectedResult> <TestCase.ExpectedResult>
The field should read "0.01" The field should read "0.01"
</TestCase.ExpectedResult> </TestCase.ExpectedResult>
<NumberTestCase /> <NumberTestCase />
</TestCase> </TestCase>
<TestCase <TestCase
title="Exponent form" title="Exponent form"
description="Supports exponent form ('2e4')" description="Supports exponent form ('2e4')"
> >
<TestCase.Steps> <TestCase.Steps>
<li>Type "2e"</li> <li>Type "2e"</li>
<li>Type 4, to read "2e4"</li> <li>Type 4, to read "2e4"</li>
</TestCase.Steps> </TestCase.Steps>
<TestCase.ExpectedResult> <TestCase.ExpectedResult>
The field should read "2e4". The parsed value should read "20000" The field should read "2e4". The parsed value should read "20000"
</TestCase.ExpectedResult> </TestCase.ExpectedResult>
<NumberTestCase /> <NumberTestCase />
</TestCase> </TestCase>
<TestCase <TestCase
title="Exponent Form" title="Exponent Form"
description="Pressing 'e' at the end" description="Pressing 'e' at the end"
> >
<TestCase.Steps> <TestCase.Steps>
<li>Type "3.14"</li> <li>Type "3.14"</li>
<li>Press "e", so that the input reads "3.14e"</li> <li>Press "e", so that the input reads "3.14e"</li>
</TestCase.Steps> </TestCase.Steps>
<TestCase.ExpectedResult> <TestCase.ExpectedResult>
The field should read "3.14e", the parsed value should be empty The field should read "3.14e", the parsed value should be empty
</TestCase.ExpectedResult> </TestCase.ExpectedResult>
<NumberTestCase /> <NumberTestCase />
</TestCase> </TestCase>
<TestCase <TestCase
title="Exponent Form" title="Exponent Form"
description="Supports pressing 'ee' in the middle of a number" description="Supports pressing 'ee' in the middle of a number"
> >
<TestCase.Steps> <TestCase.Steps>
<li>Type "3.14"</li> <li>Type "3.14"</li>
<li>Move the text cursor to after the decimal place</li> <li>Move the text cursor to after the decimal place</li>
<li>Press "e" twice, so that the value reads "3.ee14"</li> <li>Press "e" twice, so that the value reads "3.ee14"</li>
</TestCase.Steps> </TestCase.Steps>
<TestCase.ExpectedResult> <TestCase.ExpectedResult>
The field should read "3.ee14" The field should read "3.ee14"
</TestCase.ExpectedResult> </TestCase.ExpectedResult>
<NumberTestCase /> <NumberTestCase />
</TestCase> </TestCase>
<TestCase <TestCase
title="Trailing Zeroes" title="Trailing Zeroes"
description="Typing '3.0' preserves the trailing zero" description="Typing '3.0' preserves the trailing zero"
> >
<TestCase.Steps> <TestCase.Steps>
<li>Type "3.0"</li> <li>Type "3.0"</li>
</TestCase.Steps> </TestCase.Steps>
<TestCase.ExpectedResult> <TestCase.ExpectedResult>
The field should read "3.0" The field should read "3.0"
</TestCase.ExpectedResult> </TestCase.ExpectedResult>
<NumberTestCase /> <NumberTestCase />
</TestCase> </TestCase>
<TestCase <TestCase
title="Inserting decimals precision" title="Inserting decimals precision"
description="Inserting '.' in to '300' maintains the trailing zeroes" description="Inserting '.' in to '300' maintains the trailing zeroes"
> >
<TestCase.Steps> <TestCase.Steps>
<li>Type "300"</li> <li>Type "300"</li>
<li>Move the cursor to after the "3"</li> <li>Move the cursor to after the "3"</li>
<li>Type "."</li> <li>Type "."</li>
</TestCase.Steps> </TestCase.Steps>
<TestCase.ExpectedResult> <TestCase.ExpectedResult>
The field should read "3.00", not "3" The field should read "3.00", not "3"
</TestCase.ExpectedResult> </TestCase.ExpectedResult>
<NumberTestCase /> <NumberTestCase />
</TestCase> </TestCase>
<TestCase <TestCase
title="Replacing numbers with -" title="Replacing numbers with -"
description="Replacing a number with the '-' sign should not clear the value" description="Replacing a number with the '-' sign should not clear the value"
> >
<TestCase.Steps> <TestCase.Steps>
<li>Type "3"</li> <li>Type "3"</li>
<li>Select the entire value"</li> <li>Select the entire value"</li>
<li>Type '-' to replace '3' with '-'</li> <li>Type '-' to replace '3' with '-'</li>
</TestCase.Steps> </TestCase.Steps>
<TestCase.ExpectedResult> <TestCase.ExpectedResult>
The field should read "-", not be blank. The field should read "-", not be blank.
</TestCase.ExpectedResult> </TestCase.ExpectedResult>
<NumberTestCase /> <NumberTestCase />
</TestCase> </TestCase>
<TestCase <TestCase
title="Negative numbers" title="Negative numbers"
description="Typing minus when inserting a negative number should work" description="Typing minus when inserting a negative number should work"
> >
<TestCase.Steps> <TestCase.Steps>
<li>Type "-"</li> <li>Type "-"</li>
<li>Type '3'</li> <li>Type '3'</li>
</TestCase.Steps> </TestCase.Steps>
<TestCase.ExpectedResult> <TestCase.ExpectedResult>
The field should read "-3". The field should read "-3".
</TestCase.ExpectedResult> </TestCase.ExpectedResult>
<NumberTestCase /> <NumberTestCase />
</TestCase> </TestCase>
</FixtureSet> </FixtureSet>
); );
}, }
});
export default NumberInputs; export default NumberInputs;
fixtures/dom/src/components/fixtures/password-inputs/PasswordTestCase.js
+6 -8
View File
@@ -2,13 +2,11 @@ const React = window.React;
import Fixture from '../../Fixture'; import Fixture from '../../Fixture';
const PasswordTestCase = React.createClass({ class PasswordTestCase extends React.Component {
getInitialState() { state = { value: '' };
return { value: '' }; onChange = (event) => {
},
onChange(event) {
this.setState({ value: event.target.value }) this.setState({ value: event.target.value })
}, }
render() { render() {
return ( return (
<Fixture> <Fixture>
@@ -28,7 +26,7 @@ const PasswordTestCase = React.createClass({
</div> </div>
</Fixture> </Fixture>
); );
}, }
}); }
export default PasswordTestCase; export default PasswordTestCase;
fixtures/dom/src/components/fixtures/password-inputs/index.js
+21 -23
View File
@@ -4,30 +4,28 @@ import FixtureSet from '../../FixtureSet';
import TestCase from '../../TestCase'; import TestCase from '../../TestCase';
import PasswordTestCase from './PasswordTestCase' import PasswordTestCase from './PasswordTestCase'
const NumberInputs = React.createClass({ function NumberInputs() {
render() { return (
return ( <FixtureSet title="Password inputs" description="">
<FixtureSet title="Password inputs" description=""> <TestCase
<TestCase title="The show password icon"
title="The show password icon" description={`
description={` Some browsers have an unmask password icon that React accidentally
Some browsers have an unmask password icon that React accidentally prevents the display of.
prevents the display of. `}
`} affectedBrowsers="IE Edge, IE 11">
affectedBrowsers="IE Edge, IE 11"> <TestCase.Steps>
<TestCase.Steps> <li>Type any string (not an actual password</li>
<li>Type any string (not an actual password</li> </TestCase.Steps>
</TestCase.Steps>
<TestCase.ExpectedResult> <TestCase.ExpectedResult>
The field should include the "unmasking password" icon. The field should include the "unmasking password" icon.
</TestCase.ExpectedResult> </TestCase.ExpectedResult>
<PasswordTestCase /> <PasswordTestCase />
</TestCase> </TestCase>
</FixtureSet> </FixtureSet>
); );
}, }
});
export default NumberInputs; export default NumberInputs;
fixtures/dom/src/components/fixtures/range-inputs/index.js
+6 -8
View File
@@ -1,12 +1,10 @@
const React = window.React; const React = window.React;
const RangeInputs = React.createClass({ class RangeInputs extends React.Component {
getInitialState() { state = { value: 0.5 };
return { value: 0.5 }; onChange = (event) => {
},
onChange(event) {
this.setState({ value: event.target.value }); this.setState({ value: event.target.value });
}, }
render() { render() {
return ( return (
<form> <form>
@@ -22,7 +20,7 @@ const RangeInputs = React.createClass({
</fieldset> </fieldset>
</form> </form>
); );
}, }
}); }
export default RangeInputs; export default RangeInputs;
fixtures/dom/src/components/fixtures/selects/index.js
+6 -8
View File
@@ -1,12 +1,10 @@
const React = window.React; const React = window.React;
const SelectFixture = React.createClass({ class SelectFixture extends React.Component {
getInitialState() { state = { value: '' };
return { value: '' }; onChange = (event) => {
},
onChange(event) {
this.setState({ value: event.target.value }); this.setState({ value: event.target.value });
}, }
render() { render() {
return ( return (
<form> <form>
@@ -31,7 +29,7 @@ const SelectFixture = React.createClass({
</fieldset> </fieldset>
</form> </form>
); );
}, }
}); }
export default SelectFixture; export default SelectFixture;
fixtures/dom/src/components/fixtures/text-inputs/index.js
+10 -12
View File
@@ -1,13 +1,11 @@
const React = window.React; const React = window.React;
const TextInputFixtures = React.createClass({ class TextInputFixtures extends React.Component {
getInitialState() { state = {
return { color: '#ffaaee',
color: '#ffaaee', };
};
},
renderControlled(type) { renderControlled = (type) => {
let id = `controlled_${type}`; let id = `controlled_${type}`;
let onChange = e => { let onChange = e => {
@@ -29,9 +27,9 @@ const TextInputFixtures = React.createClass({
&nbsp; &rarr; {JSON.stringify(state)} &nbsp; &rarr; {JSON.stringify(state)}
</div> </div>
); );
}, }
renderUncontrolled(type) { renderUncontrolled = (type) => {
let id = `uncontrolled_${type}`; let id = `uncontrolled_${type}`;
return ( return (
<div key={type} className="field"> <div key={type} className="field">
@@ -39,7 +37,7 @@ const TextInputFixtures = React.createClass({
<input id={id} type={type} /> <input id={id} type={type} />
</div> </div>
); );
}, }
render() { render() {
// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
@@ -60,7 +58,7 @@ const TextInputFixtures = React.createClass({
</fieldset> </fieldset>
</form> </form>
); );
}, }
}); }
module.exports = TextInputFixtures; module.exports = TextInputFixtures;
fixtures/dom/src/components/fixtures/textareas/index.js
+6 -8
View File
@@ -1,12 +1,10 @@
const React = window.React; const React = window.React;
const TextAreaFixtures = React.createClass({ class TextAreaFixtures extends React.Component {
getInitialState() { state = { value: '' };
return { value: '' }; onChange = (event) => {
},
onChange(event) {
this.setState({ value: event.target.value }); this.setState({ value: event.target.value });
}, }
render() { render() {
return ( return (
<div> <div>
@@ -30,7 +28,7 @@ const TextAreaFixtures = React.createClass({
</div> </div>
</div> </div>
); );
}, }
}); }
module.exports = TextAreaFixtures; module.exports = TextAreaFixtures;