amirho/react
1
0
Fork 0
mirror of https://github.com/facebook/react.git synced 2026-02-25 05:03:03 +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

36
fixtures/art/VectorWidget.js
View File

@@ -24,13 +24,11 @@ var BASE_VEL = 0.15;
/**
* An animated SVG component.
*/
var VectorWidget = React.createClass({
class VectorWidget extends React.Component {
/**
* Initialize state members.
*/
getInitialState: function() {
return {degrees: 0, velocity: 0, drag: MOUSE_UP_DRAG};
},
state = {degrees: 0, velocity: 0, drag: MOUSE_UP_DRAG};
/**
* 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
* are automatically bound before being mounted.
*/
componentDidMount: function() {
componentDidMount() {
this._interval = window.setInterval(this.onTick, 20);
},
}
componentWillUnmount: function() {
componentWillUnmount() {
window.clearInterval(this._interval);
},
}
onTick: function() {
onTick = () => {
var nextDegrees = this.state.degrees + BASE_VEL + this.state.velocity;
var nextVelocity = this.state.velocity * this.state.drag;
this.setState({degrees: nextDegrees, velocity: nextVelocity});
},
};
/**
* When mousing down, we increase the friction down the velocity.
*/
handleMouseDown: function() {
handleMouseDown = () => {
this.setState({drag: MOUSE_DOWN_DRAG});
},
};
/**
* Cause the rotation to "spring".
*/
handleMouseUp: function() {
handleMouseUp = () => {
var nextVelocity = Math.min(this.state.velocity + CLICK_ACCEL, MAX_VEL);
this.setState({velocity: nextVelocity, drag: MOUSE_UP_DRAG});
},
};
/**
* 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.
*/
render: function() {
render() {
return (
<Surface
width={700}
@@ -81,12 +79,12 @@ var VectorWidget = React.createClass({
{this.renderGraphic(this.state.degrees)}
</Surface>
);
},
}
/**
* Better SVG support for React coming soon.
*/
renderGraphic: function(rotation) {
renderGraphic = (rotation) => {
return (
<Group
@@ -112,8 +110,8 @@ var VectorWidget = React.createClass({
</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 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";

20
fixtures/dom/src/components/App.js
View File

@@ -4,17 +4,15 @@ import Fixtures from './fixtures';
import '../style.css';
const App = React.createClass({
render() {
return (
<div>
<Header />
<div className="container" >
<Fixtures />
</div>
function App () {
return (
<div>
<Header />
<div className="container" >
<Fixtures />
</div>
);
},
});
</div>
);
}
export default App;

19
fixtures/dom/src/components/Header.js
View File

@@ -2,13 +2,14 @@ import { parse, stringify } from 'query-string';
import getVersionTags from '../tags';
const React = window.React;
const Header = React.createClass({
getInitialState() {
class Header extends React.Component {
constructor(props, context) {
super(props, context);
const query = parse(window.location.search);
const version = query.version || 'local';
const versions = [version];
return { version, versions };
},
this.state = { version, versions };
}
componentWillMount() {
getVersionTags()
.then(tags => {
@@ -16,7 +17,7 @@ const Header = React.createClass({
versions = [`local`, ...versions];
this.setState({ versions });
})
},
}
handleVersionChange(event) {
const query = parse(window.location.search);
query.version = event.target.value;
@@ -24,10 +25,10 @@ const Header = React.createClass({
delete query.version;
}
window.location.search = stringify(query);
},
}
handleFixtureChange(event) {
window.location.pathname = event.target.value;
},
}
render() {
return (
<header className="header">
@@ -66,7 +67,7 @@ const Header = React.createClass({
</div>
</header>
);
},
});
}
}
export default Header;

2
fixtures/dom/src/components/fixtures/buttons/index.js
View File

@@ -10,7 +10,7 @@ function onButtonClick() {
export default class ButtonTestCases extends React.Component {
render() {
return (
<FixtureSet title="Buttons">
<FixtureSet title="Buttons" description="">
<TestCase
title="onClick with disabled buttons"
description="The onClick event handler should not be invoked when clicking on a disabled buyaton">

46
fixtures/dom/src/components/fixtures/index.js
View File

@@ -12,29 +12,27 @@ import ButtonFixtures from './buttons';
* A simple routing component that renders the appropriate
* fixture based on the location pathname.
*/
const FixturesPage = React.createClass({
render() {
switch (window.location.pathname) {
case '/text-inputs':
return <TextInputFixtures />;
case '/range-inputs':
return <RangeInputFixtures />;
case '/selects':
return <SelectFixtures />;
case '/textareas':
return <TextAreaFixtures />;
case '/input-change-events':
return <InputChangeEvents />;
case '/number-inputs':
return <NumberInputFixtures />;
case '/password-inputs':
return <PasswordInputFixtures />;
case '/buttons':
return <ButtonFixtures />
default:
return <p>Please select a test fixture.</p>;
}
},
});
function FixturesPage() {
switch (window.location.pathname) {
case '/text-inputs':
return <TextInputFixtures />;
case '/range-inputs':
return <RangeInputFixtures />;
case '/selects':
return <SelectFixtures />;
case '/textareas':
return <TextAreaFixtures />;
case '/input-change-events':
return <InputChangeEvents />;
case '/number-inputs':
return <NumberInputFixtures />;
case '/password-inputs':
return <PasswordInputFixtures />;
case '/buttons':
return <ButtonFixtures />
default:
return <p>Please select a test fixture.</p>;
}
}
module.exports = FixturesPage;

14
fixtures/dom/src/components/fixtures/number-inputs/NumberTestCase.js
View File

@@ -2,16 +2,14 @@ const React = window.React;
import Fixture from '../../Fixture';
const NumberTestCase = React.createClass({
getInitialState() {
return { value: '' };
},
onChange(event) {
class NumberTestCase extends React.Component {
state = { value: '' };
onChange = (event) => {
const parsed = parseFloat(event.target.value, 10)
const value = isNaN(parsed) ? '' : parsed
this.setState({ value })
},
}
render() {
return (
<Fixture>
@@ -31,7 +29,7 @@ const NumberTestCase = React.createClass({
</div>
</Fixture>
);
},
});
}
}
export default NumberTestCase;

266
fixtures/dom/src/components/fixtures/number-inputs/index.js
View File

@@ -4,164 +4,162 @@ import FixtureSet from '../../FixtureSet';
import TestCase from '../../TestCase';
import NumberTestCase from './NumberTestCase';
const NumberInputs = React.createClass({
render() {
return (
<FixtureSet
title="Number inputs"
description="Number inputs inconsistently assign and report the value
property depending on the browser."
function NumberInputs() {
return (
<FixtureSet
title="Number inputs"
description="Number inputs inconsistently assign and report the value
property depending on the browser."
>
<TestCase
title="Backspacing"
description="The decimal place should not be lost"
>
<TestCase
title="Backspacing"
description="The decimal place should not be lost"
>
<TestCase.Steps>
<li>Type "3.1"</li>
<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>
The field should read "3.", preserving the decimal place
</TestCase.ExpectedResult>
<TestCase.ExpectedResult>
The field should read "3.", preserving the decimal place
</TestCase.ExpectedResult>
<NumberTestCase />
<NumberTestCase />
<p className="footnote">
<b>Notes:</b> Chrome and Safari clear trailing
decimals on blur. React makes this concession so that the
value attribute remains in sync with the value property.
</p>
</TestCase>
<p className="footnote">
<b>Notes:</b> Chrome and Safari clear trailing
decimals on blur. React makes this concession so that the
value attribute remains in sync with the value property.
</p>
</TestCase>
<TestCase
title="Decimal precision"
description="Supports decimal precision greater than 2 places"
>
<TestCase.Steps>
<li>Type "0.01"</li>
</TestCase.Steps>
<TestCase
title="Decimal precision"
description="Supports decimal precision greater than 2 places"
>
<TestCase.Steps>
<li>Type "0.01"</li>
</TestCase.Steps>
<TestCase.ExpectedResult>
The field should read "0.01"
</TestCase.ExpectedResult>
<TestCase.ExpectedResult>
The field should read "0.01"
</TestCase.ExpectedResult>
<NumberTestCase />
</TestCase>
<NumberTestCase />
</TestCase>
<TestCase
title="Exponent form"
description="Supports exponent form ('2e4')"
>
<TestCase.Steps>
<li>Type "2e"</li>
<li>Type 4, to read "2e4"</li>
</TestCase.Steps>
<TestCase
title="Exponent form"
description="Supports exponent form ('2e4')"
>
<TestCase.Steps>
<li>Type "2e"</li>
<li>Type 4, to read "2e4"</li>
</TestCase.Steps>
<TestCase.ExpectedResult>
The field should read "2e4". The parsed value should read "20000"
</TestCase.ExpectedResult>
<TestCase.ExpectedResult>
The field should read "2e4". The parsed value should read "20000"
</TestCase.ExpectedResult>
<NumberTestCase />
</TestCase>
<NumberTestCase />
</TestCase>
<TestCase
title="Exponent Form"
description="Pressing 'e' at the end"
>
<TestCase.Steps>
<li>Type "3.14"</li>
<li>Press "e", so that the input reads "3.14e"</li>
</TestCase.Steps>
<TestCase
title="Exponent Form"
description="Pressing 'e' at the end"
>
<TestCase.Steps>
<li>Type "3.14"</li>
<li>Press "e", so that the input reads "3.14e"</li>
</TestCase.Steps>
<TestCase.ExpectedResult>
The field should read "3.14e", the parsed value should be empty
</TestCase.ExpectedResult>
<TestCase.ExpectedResult>
The field should read "3.14e", the parsed value should be empty
</TestCase.ExpectedResult>
<NumberTestCase />
</TestCase>
<NumberTestCase />
</TestCase>
<TestCase
title="Exponent Form"
description="Supports pressing 'ee' in the middle of a number"
>
<TestCase.Steps>
<li>Type "3.14"</li>
<li>Move the text cursor to after the decimal place</li>
<li>Press "e" twice, so that the value reads "3.ee14"</li>
</TestCase.Steps>
<TestCase
title="Exponent Form"
description="Supports pressing 'ee' in the middle of a number"
>
<TestCase.Steps>
<li>Type "3.14"</li>
<li>Move the text cursor to after the decimal place</li>
<li>Press "e" twice, so that the value reads "3.ee14"</li>
</TestCase.Steps>
<TestCase.ExpectedResult>
The field should read "3.ee14"
</TestCase.ExpectedResult>
<TestCase.ExpectedResult>
The field should read "3.ee14"
</TestCase.ExpectedResult>
<NumberTestCase />
</TestCase>
<NumberTestCase />
</TestCase>
<TestCase
title="Trailing Zeroes"
description="Typing '3.0' preserves the trailing zero"
>
<TestCase.Steps>
<li>Type "3.0"</li>
</TestCase.Steps>
<TestCase
title="Trailing Zeroes"
description="Typing '3.0' preserves the trailing zero"
>
<TestCase.Steps>
<li>Type "3.0"</li>
</TestCase.Steps>
<TestCase.ExpectedResult>
The field should read "3.0"
</TestCase.ExpectedResult>
<TestCase.ExpectedResult>
The field should read "3.0"
</TestCase.ExpectedResult>
<NumberTestCase />
</TestCase>
<NumberTestCase />
</TestCase>
<TestCase
title="Inserting decimals precision"
description="Inserting '.' in to '300' maintains the trailing zeroes"
>
<TestCase.Steps>
<li>Type "300"</li>
<li>Move the cursor to after the "3"</li>
<li>Type "."</li>
</TestCase.Steps>
<TestCase
title="Inserting decimals precision"
description="Inserting '.' in to '300' maintains the trailing zeroes"
>
<TestCase.Steps>
<li>Type "300"</li>
<li>Move the cursor to after the "3"</li>
<li>Type "."</li>
</TestCase.Steps>
<TestCase.ExpectedResult>
The field should read "3.00", not "3"
</TestCase.ExpectedResult>
<NumberTestCase />
</TestCase>
<TestCase.ExpectedResult>
The field should read "3.00", not "3"
</TestCase.ExpectedResult>
<NumberTestCase />
</TestCase>
<TestCase
title="Replacing numbers with -"
description="Replacing a number with the '-' sign should not clear the value"
>
<TestCase.Steps>
<li>Type "3"</li>
<li>Select the entire value"</li>
<li>Type '-' to replace '3' with '-'</li>
</TestCase.Steps>
<TestCase
title="Replacing numbers with -"
description="Replacing a number with the '-' sign should not clear the value"
>
<TestCase.Steps>
<li>Type "3"</li>
<li>Select the entire value"</li>
<li>Type '-' to replace '3' with '-'</li>
</TestCase.Steps>
<TestCase.ExpectedResult>
The field should read "-", not be blank.
</TestCase.ExpectedResult>
<NumberTestCase />
</TestCase>
<TestCase.ExpectedResult>
The field should read "-", not be blank.
</TestCase.ExpectedResult>
<NumberTestCase />
</TestCase>
<TestCase
title="Negative numbers"
description="Typing minus when inserting a negative number should work"
>
<TestCase.Steps>
<li>Type "-"</li>
<li>Type '3'</li>
</TestCase.Steps>
<TestCase
title="Negative numbers"
description="Typing minus when inserting a negative number should work"
>
<TestCase.Steps>
<li>Type "-"</li>
<li>Type '3'</li>
</TestCase.Steps>
<TestCase.ExpectedResult>
The field should read "-3".
</TestCase.ExpectedResult>
<NumberTestCase />
</TestCase>
</FixtureSet>
);
},
});
<TestCase.ExpectedResult>
The field should read "-3".
</TestCase.ExpectedResult>
<NumberTestCase />
</TestCase>
</FixtureSet>
);
}
export default NumberInputs;

14
fixtures/dom/src/components/fixtures/password-inputs/PasswordTestCase.js
View File

@@ -2,13 +2,11 @@ const React = window.React;
import Fixture from '../../Fixture';
const PasswordTestCase = React.createClass({
getInitialState() {
return { value: '' };
},
onChange(event) {
class PasswordTestCase extends React.Component {
state = { value: '' };
onChange = (event) => {
this.setState({ value: event.target.value })
},
}
render() {
return (
<Fixture>
@@ -28,7 +26,7 @@ const PasswordTestCase = React.createClass({
</div>
</Fixture>
);
},
});
}
}
export default PasswordTestCase;

44
fixtures/dom/src/components/fixtures/password-inputs/index.js
View File

@@ -4,30 +4,28 @@ import FixtureSet from '../../FixtureSet';
import TestCase from '../../TestCase';
import PasswordTestCase from './PasswordTestCase'
const NumberInputs = React.createClass({
render() {
return (
<FixtureSet title="Password inputs" description="">
<TestCase
title="The show password icon"
description={`
Some browsers have an unmask password icon that React accidentally
prevents the display of.
`}
affectedBrowsers="IE Edge, IE 11">
<TestCase.Steps>
<li>Type any string (not an actual password</li>
</TestCase.Steps>
function NumberInputs() {
return (
<FixtureSet title="Password inputs" description="">
<TestCase
title="The show password icon"
description={`
Some browsers have an unmask password icon that React accidentally
prevents the display of.
`}
affectedBrowsers="IE Edge, IE 11">
<TestCase.Steps>
<li>Type any string (not an actual password</li>
</TestCase.Steps>
<TestCase.ExpectedResult>
The field should include the "unmasking password" icon.
</TestCase.ExpectedResult>
<TestCase.ExpectedResult>
The field should include the "unmasking password" icon.
</TestCase.ExpectedResult>
<PasswordTestCase />
</TestCase>
</FixtureSet>
);
},
});
<PasswordTestCase />
</TestCase>
</FixtureSet>
);
}
export default NumberInputs;

14
fixtures/dom/src/components/fixtures/range-inputs/index.js
View File

@@ -1,12 +1,10 @@
const React = window.React;
const RangeInputs = React.createClass({
getInitialState() {
return { value: 0.5 };
},
onChange(event) {
class RangeInputs extends React.Component {
state = { value: 0.5 };
onChange = (event) => {
this.setState({ value: event.target.value });
},
}
render() {
return (
<form>
@@ -22,7 +20,7 @@ const RangeInputs = React.createClass({
</fieldset>
</form>
);
},
});
}
}
export default RangeInputs;

14
fixtures/dom/src/components/fixtures/selects/index.js
View File

@@ -1,12 +1,10 @@
const React = window.React;
const SelectFixture = React.createClass({
getInitialState() {
return { value: '' };
},
onChange(event) {
class SelectFixture extends React.Component {
state = { value: '' };
onChange = (event) => {
this.setState({ value: event.target.value });
},
}
render() {
return (
<form>
@@ -31,7 +29,7 @@ const SelectFixture = React.createClass({
</fieldset>
</form>
);
},
});
}
}
export default SelectFixture;

22
fixtures/dom/src/components/fixtures/text-inputs/index.js
View File

@@ -1,13 +1,11 @@
const React = window.React;
const TextInputFixtures = React.createClass({
getInitialState() {
return {
color: '#ffaaee',
};
},
class TextInputFixtures extends React.Component {
state = {
color: '#ffaaee',
};
renderControlled(type) {
renderControlled = (type) => {
let id = `controlled_${type}`;
let onChange = e => {
@@ -29,9 +27,9 @@ const TextInputFixtures = React.createClass({
&nbsp; &rarr; {JSON.stringify(state)}
</div>
);
},
}
renderUncontrolled(type) {
renderUncontrolled = (type) => {
let id = `uncontrolled_${type}`;
return (
<div key={type} className="field">
@@ -39,7 +37,7 @@ const TextInputFixtures = React.createClass({
<input id={id} type={type} />
</div>
);
},
}
render() {
// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
@@ -60,7 +58,7 @@ const TextInputFixtures = React.createClass({
</fieldset>
</form>
);
},
});
}
}
module.exports = TextInputFixtures;

14
fixtures/dom/src/components/fixtures/textareas/index.js
View File

@@ -1,12 +1,10 @@
const React = window.React;
const TextAreaFixtures = React.createClass({
getInitialState() {
return { value: '' };
},
onChange(event) {
class TextAreaFixtures extends React.Component {
state = { value: '' };
onChange = (event) => {
this.setState({ value: event.target.value });
},
}
render() {
return (
<div>
@@ -30,7 +28,7 @@ const TextAreaFixtures = React.createClass({
</div>
</div>
);
},
});
}
}
module.exports = TextAreaFixtures;