Framework: Run create-class codemod (Automattic#18889)

* run create-class codemod via find and xargs

* reformat files

* InputChronoExample: Fix comment

* fix ugly comment in PostScheduleExample

client/auth/connect.jsx

@@ -18,12 +18,12 @@ import Notice from 'components/notice';
 import NoticeAction from 'components/notice/notice-action';
 import WordPressLogo from 'components/wordpress-logo';
 
-const Connect = React.createClass( {
-	getCreateAccountUrl() {
+class Connect extends React.Component {
+	getCreateAccountUrl = () => {
 		return config.isEnabled( 'devdocs' )
 			? 'https://wordpress.com/start/developer'
 			: 'https://wordpress.com/start';
-	},
+	};
 
 	render() {
 		return (
@@ -65,7 +65,7 @@ const Connect = React.createClass( {
 				</div>
 			</Main>
 		);
-	},
-} );
+	}
+}
 
 export default localize( Connect );

client/blocks/app-promo/index.jsx

@@ -55,45 +55,47 @@ export const getPromoLink = ( location, promoDetails ) => {
 	return `https://apps.wordpress.com/${ type }/?ref=promo_${ location }_${ promoCode }`;
 };
 
-export const AppPromo = React.createClass( {
-	displayName: 'AppPromo',
+export class AppPromo extends React.Component {
+	static displayName = 'AppPromo';
 
-	propTypes: {
+	static propTypes = {
 		location: PropTypes.string.isRequired,
-	},
+	};
 
-	getInitialState: function() {
-		const promoItem = this.props.promoItem || getRandomPromo();
-		return {
+	constructor( props ) {
+		super( props );
+		const promoItem = props.promoItem || getRandomPromo();
+
+		this.state = {
 			promoItem,
 			showPromo: true,
 		};
-	},
+	}
 
-	componentDidMount: function() {
+	componentDidMount() {
 		this.props.recordTracksEvent( 'calypso_desktop_promo_view', {
 			promo_location: this.props.location,
 			promo_code: this.state.promoItem.promoCode,
 		} );
-	},
+	}
 
-	recordClickEvent: function() {
+	recordClickEvent = () => {
 		this.props.recordTracksEvent( 'calypso_desktop_promo_click', {
 			promo_location: this.props.location,
 			promo_code: this.state.promoItem.promoCode,
 		} );
-	},
+	};
 
-	dismiss: function() {
+	dismiss = () => {
 		this.setState( { showPromo: false } );
 		this.props.saveDismissal();
 		this.props.recordTracksEvent( 'calypso_desktop_promo_dismiss', {
 			promo_location: this.props.location,
 			promo_code: this.state.promoItem.promoCode,
 		} );
-	},
+	};
 
-	render: function() {
+	render() {
 		if ( ! this.state.showPromo ) {
 			return null;
 		}
@@ -126,8 +128,8 @@ export const AppPromo = React.createClass( {
 				</a>
 			</div>
 		);
-	},
-} );
+	}
+}
 
 AppPromo.defaultProps = {
 	translate: identity,

client/blocks/author-selector/index.jsx

@@ -19,36 +19,33 @@ import SwitcherShell from './switcher-shell';
  */
 const debug = debugModule( 'calypso:author-selector' );
 
-const AuthorSelector = React.createClass( {
-	displayName: 'AuthorSelector',
-	propTypes: {
+class AuthorSelector extends React.Component {
+	static displayName = 'AuthorSelector';
+
+	static propTypes = {
 		siteId: PropTypes.number.isRequired,
 		onSelect: PropTypes.func,
 		exclude: PropTypes.arrayOf( PropTypes.number ),
 		allowSingleUser: PropTypes.bool,
 		popoverPosition: PropTypes.string,
-	},
+	};
 
-	getInitialState: function() {
-		return {
-			search: '',
-		};
-	},
+	static defaultProps = {
+		showAuthorMenu: false,
+		onClose: function() {},
+		allowSingleUser: false,
+		popoverPosition: 'bottom left',
+	};
 
-	getDefaultProps: function() {
-		return {
-			showAuthorMenu: false,
-			onClose: function() {},
-			allowSingleUser: false,
-			popoverPosition: 'bottom left',
-		};
-	},
+	state = {
+		search: '',
+	};
 
-	componentDidMount: function() {
+	componentDidMount() {
 		debug( 'AuthorSelector mounted' );
-	},
+	}
 
-	render: function() {
+	render() {
 		let searchString = this.state.search || '';
 		searchString = trim( searchString );
 
@@ -71,14 +68,14 @@ const AuthorSelector = React.createClass( {
 				<SwitcherShell { ...this.props } updateSearch={ this._updateSearch } />
 			</SiteUsersFetcher>
 		);
-	},
+	}
 
-	_updateSearch: function( searchTerm ) {
+	_updateSearch = searchTerm => {
 		searchTerm = searchTerm ? '*' + searchTerm + '*' : '';
 		this.setState( {
 			search: searchTerm,
 		} );
-	},
-} );
+	};
+}
 
 export default localize( AuthorSelector );

client/blocks/author-selector/switcher-shell.jsx

@@ -3,6 +3,7 @@
  * External dependencies
  */
 import React from 'react';
+import createReactClass from 'create-react-class';
 import ReactDom from 'react-dom';
 import PropTypes from 'prop-types';
 import { localize } from 'i18n-calypso';
@@ -26,7 +27,7 @@ import { hasTouch } from 'lib/touch-detect';
 const debug = debugModule( 'calypso:author-selector' );
 let instance = 0;
 
-const SwitcherShell = React.createClass( {
+const SwitcherShell = createReactClass( {
 	displayName: 'AuthorSwitcherShell',
 
 	propTypes: {

client/blocks/credit-card-form/index.jsx

@@ -7,6 +7,7 @@
 import PropTypes from 'prop-types';
 import { localize } from 'i18n-calypso';
 import React from 'react';
+import createReactClass from 'create-react-class';
 import Gridicon from 'gridicons';
 
 /**
@@ -28,7 +29,9 @@ import support from 'lib/url/support';
 const countriesList = CountriesList.forPayments();
 const wpcom = wpcomFactory.undocumented();
 
-const CreditCardForm = React.createClass( {
+const CreditCardForm = createReactClass( {
+	displayName: 'CreditCardForm',
+
 	propTypes: {
 		apiParams: PropTypes.object,
 		createPaygateToken: PropTypes.func.isRequired,
@@ -48,7 +51,6 @@ const CreditCardForm = React.createClass( {
 	},
 
 	_mounted: false,
-
 	fieldNames: [ 'name', 'number', 'cvv', 'expirationDate', 'country', 'postalCode' ],
 
 	componentWillMount() {
@@ -301,6 +303,7 @@ const CreditCardForm = React.createClass( {
 			</form>
 		);
 	},
+
 	renderUsedForExistingPurchases() {
 		if ( this.props.showUsedForExistingPurchasesInfo ) {
 			return (

client/blocks/design-menu/design-tool-data.jsx

@@ -20,8 +20,8 @@ import { requestSitePosts } from 'state/posts/actions';
 const debug = debugFactory( 'calypso:design-tool-data' );
 
 export default function designTool( Component ) {
-	const DesignToolData = React.createClass( {
-		propTypes: {
+	class DesignToolData extends React.Component {
+		static propTypes = {
 			// This is the key for the customizations in the Redux store (under preview)
 			previewDataKey: PropTypes.string.isRequired,
 			// These are provided by the connect method
@@ -31,63 +31,61 @@ export default function designTool( Component ) {
 			selectedSite: PropTypes.object,
 			allPages: PropTypes.array,
 			requestSitePosts: PropTypes.func.isRequired,
-		},
+		};
 
-		getDefaultProps() {
-			return {
-				customizations: {},
-			};
-		},
+		static defaultProps = {
+			customizations: {},
+		};
 
-		getUpdatedCustomizationsForKey( id, customizations ) {
+		getUpdatedCustomizationsForKey = ( id, customizations ) => {
 			const updatedCustomizations = {
 				[ id ]: Object.assign( {}, this.getCustomizationsForKey( id ), customizations ),
 			};
 			return Object.assign( {}, this.props.customizations, updatedCustomizations );
-		},
+		};
 
-		buildOnChangeFor( id ) {
+		buildOnChangeFor = id => {
 			return customizations => {
 				const newCustomizations = this.getUpdatedCustomizationsForKey( id, customizations );
 				debug( `changed customizations for "${ id }" to`, newCustomizations );
 				return this.props.updateCustomizations( this.props.selectedSiteId, newCustomizations );
 			};
-		},
+		};
 
-		getDefaultPropsForKey( id ) {
+		getDefaultPropsForKey = id => {
 			const site = this.props.selectedSite;
 			switch ( id ) {
 				case 'siteTitle':
 					return { blogname: site.name, blogdescription: site.description };
 			}
-		},
+		};
 
-		getDefaultChildProps() {
+		getDefaultChildProps = () => {
 			const events = { onChange: this.buildOnChangeFor( this.props.previewDataKey ) };
 			const defaults = this.getDefaultPropsForKey( this.props.previewDataKey );
 			return Object.assign( {}, defaults, events );
-		},
+		};
 
-		getCustomizationsForKey( key ) {
+		getCustomizationsForKey = key => {
 			if ( ! this.props.customizations[ key ] ) {
 				return {};
 			}
 			return this.props.customizations[ key ];
-		},
+		};
 
-		getChildProps() {
+		getChildProps = () => {
 			return Object.assign(
 				{},
 				this.getDefaultChildProps(),
 				this.getCustomizationsForKey( this.props.previewDataKey )
 			);
-		},
+		};
 
 		render() {
 			const props = this.getChildProps();
 			return <Component { ...props } />;
-		},
-	} );
+		}
+	}
 
 	function mapStateToProps( state ) {
 		const selectedSiteId = getSelectedSiteId( state );

client/blocks/design-menu/design-tool-list.jsx

@@ -16,12 +16,12 @@ import SidebarHeading from 'layout/sidebar/heading';
 import SidebarMenu from 'layout/sidebar/menu';
 import SidebarItem from 'layout/sidebar/item';
 
-const DesignToolList = React.createClass( {
-	propTypes: {
+class DesignToolList extends React.Component {
+	static propTypes = {
 		onChange: PropTypes.func.isRequired,
-	},
+	};
 
-	renderControl( tool ) {
+	renderControl = tool => {
 		const onChange = event => {
 			event.preventDefault();
 			this.props.onChange( tool.value );
@@ -42,7 +42,7 @@ const DesignToolList = React.createClass( {
 				/>
 			</SidebarItem>
 		);
-	},
+	};
 
 	render() {
 		return (
@@ -59,7 +59,7 @@ const DesignToolList = React.createClass( {
 				</SidebarMenu>
 			</div>
 		);
-	},
-} );
+	}
+}
 
 export default localize( DesignToolList );