Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

createClass + PropTypes + checkPropTypes warnings #9399

Merged
merged 11 commits into from
Apr 11, 2017
36 changes: 17 additions & 19 deletions fixtures/art/VectorWidget.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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}
Expand All @@ -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
Expand All @@ -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";
Expand Down
1 change: 1 addition & 0 deletions fixtures/dom/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
"dependencies": {
"classnames": "^2.2.5",
"query-string": "^4.2.3",
"prop-types": "^15.5.6",
"react": "^15.4.1",
"react-dom": "^15.4.1",
"semver": "^5.3.0"
Expand Down
1 change: 1 addition & 0 deletions fixtures/dom/public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<script src="https://unpkg.com/prop-types@15.5.6/prop-types.js"></script>
<script src="react-loader.js"></script>
</head>
<body>
Expand Down
20 changes: 9 additions & 11 deletions fixtures/dom/src/components/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
3 changes: 2 additions & 1 deletion fixtures/dom/src/components/Fixture.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
const PropTypes = window.PropTypes;
const React = window.React;

const propTypes = {
children: React.PropTypes.node.isRequired,
children: PropTypes.node.isRequired,
};

class Fixture extends React.Component {
Expand Down
5 changes: 3 additions & 2 deletions fixtures/dom/src/components/FixtureSet.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import React from 'react';
import PropTypes from 'prop-types';

const propTypes = {
title: React.PropTypes.node.isRequired,
description: React.PropTypes.node.isRequired,
title: PropTypes.node.isRequired,
description: PropTypes.node.isRequired,
};

class FixtureSet extends React.Component {
Expand Down
19 changes: 10 additions & 9 deletions fixtures/dom/src/components/Header.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,32 +2,33 @@ 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 => {
let versions = tags.map(tag => tag.name.slice(1));
versions = [`local`, ...versions];
this.setState({ versions });
})
},
}
handleVersionChange(event) {
const query = parse(window.location.search);
query.version = event.target.value;
if (query.version === 'local') {
delete query.version;
}
window.location.search = stringify(query);
},
}
handleFixtureChange(event) {
window.location.pathname = event.target.value;
},
}
render() {
return (
<header className="header">
Expand Down Expand Up @@ -66,7 +67,7 @@ const Header = React.createClass({
</div>
</header>
);
},
});
}
}

export default Header;
9 changes: 5 additions & 4 deletions fixtures/dom/src/components/TestCase.js
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
import cn from 'classnames';
import semver from 'semver';
import React from 'react';
import PropTypes from 'prop-types';
import { parse } from 'query-string';
import { semverString } from './propTypes'
import { semverString } from './propTypes';

const propTypes = {
children: React.PropTypes.node.isRequired,
title: React.PropTypes.node.isRequired,
children: PropTypes.node.isRequired,
title: PropTypes.node.isRequired,
resolvedIn: semverString,
resolvedBy: React.PropTypes.string
resolvedBy: PropTypes.string
};

class TestCase extends React.Component {
Expand Down
2 changes: 1 addition & 1 deletion fixtures/dom/src/components/fixtures/buttons/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
46 changes: 22 additions & 24 deletions fixtures/dom/src/components/fixtures/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -31,7 +29,7 @@ const NumberTestCase = React.createClass({
</div>
</Fixture>
);
},
});
}
}

export default NumberTestCase;
Loading