React: Remove uses of React.createClass in publicKeyCryptography

apps/src/publicKeyCryptography/Alice.jsx

@@ -17,59 +17,55 @@ import {
 import {computePublicKey} from './cryptographyMath';
 import {COLORS} from './style';
 
-const Alice = React.createClass({
-  propTypes: {
+export default class Alice extends React.Component {
+  static propTypes = {
     disabled: PropTypes.bool,
     setPublicModulus: PropTypes.func.isRequired,
     setPublicKey: PropTypes.func.isRequired,
     runModuloClock: PropTypes.func.isRequired
-  },
+  };
 
-  getInitialState() {
-    return {
-      publicModulus: null,
-      privateKey: null,
-      publicNumber: null,
-      secretNumber: null
-    };
-  },
+  state = {
+    publicModulus: null,
+    privateKey: null,
+    publicNumber: null,
+    secretNumber: null
+  };
 
-  startOver() {
-    this.setState(this.getInitialState());
-  },
+  startOver = () => this.setState(this.getInitialState());
 
   setPublicModulus(publicModulus) {
     this.setState({publicModulus});
     this.setPrivateKey(null);
     this.clearSecretNumber();
-  },
+  }
 
-  onPublicModulusChange(publicModulus) {
+  onPublicModulusChange = (publicModulus) => {
     this.setPublicModulus(publicModulus);
     this.props.setPublicModulus(publicModulus);
-  },
+  };
 
   setPrivateKey(privateKey) {
     this.setState({privateKey});
     this.clearSecretNumber();
-  },
+  }
 
-  onPrivateKeyChange(privateKey) {
+  onPrivateKeyChange = (privateKey) => {
     const {publicModulus} = this.state;
     this.setPrivateKey(privateKey);
     this.props.setPublicKey(this.getPublicKey({privateKey, publicModulus}));
-  },
+  };
 
-  setPublicNumber(publicNumber) {
+  setPublicNumber = (publicNumber) => {
     this.setState({publicNumber});
     this.clearSecretNumber();
-  },
+  };
 
   getPublicKey({privateKey, publicModulus}) {
     return privateKey && publicModulus ? computePublicKey(privateKey, publicModulus) : null;
-  },
+  }
 
-  computeSecretNumber() {
+  computeSecretNumber = () => {
     const {runModuloClock} = this.props;
     const {publicModulus, privateKey, publicNumber} = this.state;
     if ([publicModulus, privateKey, publicNumber].every(Number.isInteger)) {
@@ -83,11 +79,11 @@ const Alice = React.createClass({
     } else {
       this.clearSecretNumber();
     }
-  },
+  };
 
   clearSecretNumber() {
     this.setState({secretNumber: null});
-  },
+  }
 
   render() {
     const {disabled} = this.props;
@@ -160,5 +156,4 @@ const Alice = React.createClass({
         </NumberedSteps>
       </CharacterPanel>);
   }
-});
-export default Alice;
+}

apps/src/publicKeyCryptography/Bob.jsx

@@ -15,49 +15,45 @@ import {
 } from './cryptographyFields';
 import {COLORS} from './style';
 
-const Bob = React.createClass({
-  propTypes: {
+export default class Bob extends React.Component {
+  static propTypes = {
     disabled: PropTypes.bool,
     setPublicModulus: PropTypes.func.isRequired,
     setPublicNumber: PropTypes.func.isRequired,
     runModuloClock: PropTypes.func.isRequired
-  },
+  };
 
-  getInitialState() {
-    return {
-      publicModulus: null,
-      publicKey: null,
-      secretNumber: null,
-      publicNumber: null
-    };
-  },
+  state = {
+    publicModulus: null,
+    publicKey: null,
+    secretNumber: null,
+    publicNumber: null
+  };
 
-  startOver() {
-    this.setState(this.getInitialState());
-  },
+  startOver = () => this.setState(this.getInitialState());
 
   setPublicModulus(publicModulus) {
     this.setState({publicModulus});
     this.setSecretNumber(null);
     this.clearPublicNumber();
-  },
+  }
 
-  onPublicModulusChange(publicModulus) {
+  onPublicModulusChange = (publicModulus) => {
     this.setPublicModulus(publicModulus);
     this.props.setPublicModulus(publicModulus);
-  },
+  };
 
-  setPublicKey(publicKey) {
+  setPublicKey = (publicKey) => {
     this.setState({publicKey});
     this.clearPublicNumber();
-  },
+  };
 
-  setSecretNumber(secretNumber) {
+  setSecretNumber = (secretNumber) => {
     this.setState({secretNumber});
     this.clearPublicNumber();
-  },
+  };
 
-  computePublicNumber() {
+  computePublicNumber = () => {
     const {runModuloClock} = this.props;
     const {publicKey, secretNumber, publicModulus} = this.state;
     if ([publicKey, secretNumber, publicModulus].every(Number.isInteger)) {
@@ -72,11 +68,11 @@ const Bob = React.createClass({
     } else {
       this.clearPublicNumber();
     }
-  },
+  };
 
   clearPublicNumber() {
     this.setState({publicNumber: null});
-  },
+  }
 
   render() {
     const {disabled} = this.props;
@@ -140,7 +136,7 @@ const Bob = React.createClass({
             </div>
           </Step>
         </NumberedSteps>
-      </CharacterPanel>);
+      </CharacterPanel>
+    );
   }
-});
-export default Bob;
+}

apps/src/publicKeyCryptography/EqualColumns.jsx

@@ -3,18 +3,14 @@ import React, {PropTypes} from 'react';
 import Radium from 'radium';
 import {AnyChildren} from './types';
 
-const EqualColumns = Radium(React.createClass({
-  propTypes: {
+export default Radium(class EqualColumns extends React.Component {
+  static propTypes = {
     // Space between columns, in pixels
     intercolumnarDistance: PropTypes.number,
     children: AnyChildren
-  },
+  };
 
-  getDefaultProps() {
-    return {
-      intercolumnarDistance: 0
-    };
-  },
+  static defaultProps = {intercolumnarDistance: 0};
 
   render() {
     const {children, intercolumnarDistance} = this.props;
@@ -38,7 +34,7 @@ const EqualColumns = Radium(React.createClass({
             </div>);
         })}
         <div style={{clear:'both'}}/>
-      </div>);
+      </div>
+    );
   }
-}));
-export default EqualColumns;
+});

apps/src/publicKeyCryptography/Eve.jsx

@@ -26,45 +26,41 @@ const tdEquationStyleLHS = Object.assign({}, tdEquationStyleRHS, {
   whiteSpace: 'nowrap'
 });
 
-const Eve = React.createClass({
-  propTypes: {
+export default class Eve extends React.Component {
+  static propTypes = {
     disabled: PropTypes.bool,
     setPublicModulus: PropTypes.func.isRequired,
     runModuloClock: PropTypes.func.isRequired
-  },
+  };
 
-  getInitialState() {
-    return {
-      publicModulus: null,
-      publicKey: null,
-      privateKey: null,
-      publicNumber: null,
-      secretNumber: null,
-      checkingPrivateKey: false,
-      privateKeyEquationResult: null,
-      checkingSecretNumber: false,
-      secretNumberEquationResult: null
-    };
-  },
+  state = {
+    publicModulus: null,
+    publicKey: null,
+    privateKey: null,
+    publicNumber: null,
+    secretNumber: null,
+    checkingPrivateKey: false,
+    privateKeyEquationResult: null,
+    checkingSecretNumber: false,
+    secretNumberEquationResult: null
+  };
 
-  startOver() {
-    this.setState(this.getInitialState());
-  },
+  startOver = () => this.setState(this.getInitialState());
 
   setPublicModulus(publicModulus) {
     this.setState({publicModulus});
-  },
+  }
 
-  onPublicModulusChange(publicModulus) {
+  onPublicModulusChange = (publicModulus) => {
     this.setPublicModulus(publicModulus);
     this.props.setPublicModulus(publicModulus);
-  },
+  };
 
-  setPublicKey(publicKey) {
+  setPublicKey = (publicKey) => {
     this.setState({publicKey});
-  },
+  };
 
-  setPrivateKey(privateKey) {
+  setPrivateKey = (privateKey) => {
     const {runModuloClock} = this.props;
     const {publicKey, publicModulus} = this.state;
     this.setState({privateKey});
@@ -85,13 +81,13 @@ const Eve = React.createClass({
     } else {
       this.setState({privateKey: null, privateKeyEquationResult: null});
     }
-  },
+  };
 
-  setPublicNumber(publicNumber) {
+  setPublicNumber = (publicNumber) => {
     this.setState({publicNumber});
-  },
+  };
 
-  setSecretNumber(secretNumber) {
+  setSecretNumber = (secretNumber) => {
     this.setState({secretNumber});
     const {runModuloClock} = this.props;
     const {publicKey, publicModulus} = this.state;
@@ -113,7 +109,7 @@ const Eve = React.createClass({
     } else {
       this.setState({secretNumber: null, secretNumberEquationResult: null});
     }
-  },
+  };
 
   render() {
     const {disabled} = this.props;
@@ -228,7 +224,7 @@ const Eve = React.createClass({
             </table>
           </Step>
         </NumberedSteps>
-      </CharacterPanel>);
+      </CharacterPanel>
+    );
   }
-});
-export default Eve;
+}

apps/src/publicKeyCryptography/IntegerDropdown.jsx

@@ -7,19 +7,17 @@ import 'react-virtualized/styles.css';
 import 'react-select/dist/react-select.css';
 import 'react-virtualized-select/styles.css';
 
-const IntegerDropdown = React.createClass({
-  propTypes: {
+export default class IntegerDropdown extends React.Component {
+  static propTypes = {
     className: PropTypes.string,
     value: PropTypes.number,
     options: PropTypes.arrayOf(PropTypes.number).isRequired,
     style: PropTypes.object,
     disabled: PropTypes.bool,
     onChange: PropTypes.func.isRequired
-  },
+  };
 
-  onChange(selected) {
-    this.props.onChange(selected ? selected.value : null);
-  },
+  onChange = (selected) => this.props.onChange(selected ? selected.value : null);
 
   render() {
     let {className, value, options, style, disabled} = this.props;
@@ -34,7 +32,7 @@ const IntegerDropdown = React.createClass({
         style={style}
         disabled={disabled}
         onChange={this.onChange}
-      />);
+      />
+    );
   }
-});
-export default IntegerDropdown;
+}

apps/src/publicKeyCryptography/IntegerTextbox.jsx

@@ -2,19 +2,19 @@
 import React, {PropTypes} from 'react';
 import color from "../util/color";
 
-const IntegerTextbox = React.createClass({
-  propTypes: {
+export default class IntegerTextbox extends React.Component {
+  static propTypes = {
     className: PropTypes.string,
     value: PropTypes.number,
     disabled: PropTypes.bool,
     color: PropTypes.string,
     onChange: PropTypes.func.isRequired
-  },
+  };
 
-  onChange(event) {
+  onChange = (event) => {
     const value = parseInt(event.target.value, 10);
     this.props.onChange(Number.isInteger(value) ? value : null);
-  },
+  };
 
   render() {
     let {className, value, disabled, color: backgroundColor} = this.props;
@@ -41,5 +41,4 @@ const IntegerTextbox = React.createClass({
         onChange={this.onChange}
       />);
   }
-});
-export default IntegerTextbox;
+}