Remove use of deprecated React.PropTypes

Replace all uses of React.PropTypes with PropTypes and importing PropTypes from
'prop-types'.

src/components/views/elements/AccessibleButton.js

@@ -15,6 +15,7 @@
  */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 
 /**
  * AccessibleButton is a generic wrapper for any element that should be treated
@@ -44,9 +45,9 @@ export default function AccessibleButton(props) {
  *           implemented exactly like a normal onClick handler.
  */
 AccessibleButton.propTypes = {
-    children: React.PropTypes.node,
-    element: React.PropTypes.string,
-    onClick: React.PropTypes.func.isRequired,
+    children: PropTypes.node,
+    element: PropTypes.string,
+    onClick: PropTypes.func.isRequired,
 };
 
 AccessibleButton.defaultProps = {

src/components/views/elements/AddressSelector.js

@@ -18,6 +18,7 @@ limitations under the License.
 'use strict';
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import sdk from '../../../index';
 import classNames from 'classnames';
 import { UserAddressType } from '../../../UserAddress';
@@ -26,17 +27,17 @@ export default React.createClass({
     displayName: 'AddressSelector',
 
     propTypes: {
-        onSelected: React.PropTypes.func.isRequired,
+        onSelected: PropTypes.func.isRequired,
 
         // List of the addresses to display
-        addressList: React.PropTypes.arrayOf(UserAddressType).isRequired,
+        addressList: PropTypes.arrayOf(UserAddressType).isRequired,
         // Whether to show the address on the address tiles
-        showAddress: React.PropTypes.bool,
-        truncateAt: React.PropTypes.number.isRequired,
-        selected: React.PropTypes.number,
+        showAddress: PropTypes.bool,
+        truncateAt: PropTypes.number.isRequired,
+        selected: PropTypes.number,
 
         // Element to put as a header on top of the list
-        header: React.PropTypes.node,
+        header: PropTypes.node,
     },
 
     getInitialState: function() {

src/components/views/elements/AddressTile.js

@@ -16,6 +16,7 @@ limitations under the License.
 */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import sdk from "../../../index";
 import MatrixClientPeg from "../../../MatrixClientPeg";
@@ -28,9 +29,9 @@ export default React.createClass({
 
     propTypes: {
         address: UserAddressType.isRequired,
-        canDismiss: React.PropTypes.bool,
-        onDismissed: React.PropTypes.func,
-        justified: React.PropTypes.bool,
+        canDismiss: PropTypes.bool,
+        onDismissed: PropTypes.func,
+        justified: PropTypes.bool,
     },
 
     getDefaultProps: function() {

src/components/views/elements/AppTile.js

@@ -19,6 +19,7 @@ limitations under the License.
 import url from 'url';
 import qs from 'querystring';
 import React from 'react';
+import PropTypes from 'prop-types';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import PlatformPeg from '../../../PlatformPeg';
 import ScalarAuthClient from '../../../ScalarAuthClient';
@@ -40,19 +41,19 @@ export default React.createClass({
     displayName: 'AppTile',
 
     propTypes: {
-        id: React.PropTypes.string.isRequired,
-        url: React.PropTypes.string.isRequired,
-        name: React.PropTypes.string.isRequired,
-        room: React.PropTypes.object.isRequired,
-        type: React.PropTypes.string.isRequired,
+        id: PropTypes.string.isRequired,
+        url: PropTypes.string.isRequired,
+        name: PropTypes.string.isRequired,
+        room: PropTypes.object.isRequired,
+        type: PropTypes.string.isRequired,
         // Specifying 'fullWidth' as true will render the app tile to fill the width of the app drawer continer.
         // This should be set to true when there is only one widget in the app drawer, otherwise it should be false.
-        fullWidth: React.PropTypes.bool,
+        fullWidth: PropTypes.bool,
         // UserId of the current user
-        userId: React.PropTypes.string.isRequired,
+        userId: PropTypes.string.isRequired,
         // UserId of the entity that added / modified the widget
-        creatorUserId: React.PropTypes.string,
-        waitForIframeLoad: React.PropTypes.bool,
+        creatorUserId: PropTypes.string,
+        waitForIframeLoad: PropTypes.bool,
     },
 
     getDefaultProps() {

src/components/views/elements/DeviceVerifyButtons.js

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import sdk from '../../../index';
 import Modal from '../../../Modal';
@@ -24,8 +25,8 @@ export default React.createClass({
     displayName: 'DeviceVerifyButtons',
 
     propTypes: {
-        userId: React.PropTypes.string.isRequired,
-        device: React.PropTypes.object.isRequired,
+        userId: PropTypes.string.isRequired,
+        device: PropTypes.object.isRequired,
     },
 
     getInitialState: function() {

src/components/views/elements/DirectorySearchBox.js

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
 export default class DirectorySearchBox extends React.Component {
@@ -105,10 +106,10 @@ export default class DirectorySearchBox extends React.Component {
 }
 
 DirectorySearchBox.propTypes = {
-    className: React.PropTypes.string,
-    onChange: React.PropTypes.func,
-    onClear: React.PropTypes.func,
-    onJoinClick: React.PropTypes.func,
-    placeholder: React.PropTypes.string,
-    showJoinButton: React.PropTypes.bool,
+    className: PropTypes.string,
+    onChange: PropTypes.func,
+    onClear: PropTypes.func,
+    onJoinClick: PropTypes.func,
+    placeholder: PropTypes.string,
+    showJoinButton: PropTypes.bool,
 };

src/components/views/elements/Dropdown.js

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import AccessibleButton from './AccessibleButton';
 import { _t } from '../../../languageHandler';
@@ -56,14 +57,14 @@ class MenuOption extends React.Component {
 }
 
 MenuOption.propTypes = {
-    children: React.PropTypes.oneOfType([
-      React.PropTypes.arrayOf(React.PropTypes.node),
-      React.PropTypes.node,
+    children: PropTypes.oneOfType([
+      PropTypes.arrayOf(React.PropTypes.node),
+      PropTypes.node,
     ]),
-    highlighted: React.PropTypes.bool,
-    dropdownKey: React.PropTypes.string,
-    onClick: React.PropTypes.func.isRequired,
-    onMouseEnter: React.PropTypes.func.isRequired,
+    highlighted: PropTypes.bool,
+    dropdownKey: PropTypes.string,
+    onClick: PropTypes.func.isRequired,
+    onMouseEnter: PropTypes.func.isRequired,
 };
 
 /*
@@ -322,20 +323,20 @@ Dropdown.propTypes = {
     // The width that the dropdown should be. If specified,
     // the dropped-down part of the menu will be set to this
     // width.
-    menuWidth: React.PropTypes.number,
+    menuWidth: PropTypes.number,
     // Called when the selected option changes
-    onOptionChange: React.PropTypes.func.isRequired,
+    onOptionChange: PropTypes.func.isRequired,
     // Called when the value of the search field changes
-    onSearchChange: React.PropTypes.func,
-    searchEnabled: React.PropTypes.bool,
+    onSearchChange: PropTypes.func,
+    searchEnabled: PropTypes.bool,
     // Function that, given the key of an option, returns
     // a node representing that option to be displayed in the
     // box itself as the currently-selected option (ie. as
     // opposed to in the actual dropped-down part). If
     // unspecified, the appropriate child element is used as
     // in the dropped-down menu.
-    getShortOption: React.PropTypes.func,
-    value: React.PropTypes.string,
+    getShortOption: PropTypes.func,
+    value: PropTypes.string,
     // negative for consistency with HTML
-    disabled: React.PropTypes.bool,
+    disabled: PropTypes.bool,
 };

src/components/views/elements/EditableText.js

@@ -17,6 +17,7 @@ limitations under the License.
 'use strict';
 
 const React = require('react');
+import PropTypes from 'prop-types';
 
 const KEY_TAB = 9;
 const KEY_SHIFT = 16;
@@ -26,18 +27,18 @@ module.exports = React.createClass({
     displayName: 'EditableText',
 
     propTypes: {
-        onValueChanged: React.PropTypes.func,
-        initialValue: React.PropTypes.string,
-        label: React.PropTypes.string,
-        placeholder: React.PropTypes.string,
-        className: React.PropTypes.string,
-        labelClassName: React.PropTypes.string,
-        placeholderClassName: React.PropTypes.string,
+        onValueChanged: PropTypes.func,
+        initialValue: PropTypes.string,
+        label: PropTypes.string,
+        placeholder: PropTypes.string,
+        className: PropTypes.string,
+        labelClassName: PropTypes.string,
+        placeholderClassName: PropTypes.string,
         // Overrides blurToSubmit if true
-        blurToCancel: React.PropTypes.bool,
+        blurToCancel: PropTypes.bool,
         // Will cause onValueChanged(value, true) to fire on blur
-        blurToSubmit: React.PropTypes.bool,
-        editable: React.PropTypes.bool,
+        blurToSubmit: PropTypes.bool,
+        editable: PropTypes.bool,
     },
 
     Phases: {

src/components/views/elements/EditableTextContainer.js

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import sdk from '../../../index';
 import Promise from 'bluebird';
 
@@ -126,21 +127,21 @@ export default class EditableTextContainer extends React.Component {
 
 EditableTextContainer.propTypes = {
     /* callback to retrieve the initial value. */
-    getInitialValue: React.PropTypes.func,
+    getInitialValue: PropTypes.func,
 
     /* initial value; used if getInitialValue is not given */
-    initialValue: React.PropTypes.string,
+    initialValue: PropTypes.string,
 
     /* placeholder text to use when the value is empty (and not being
      * edited) */
-    placeholder: React.PropTypes.string,
+    placeholder: PropTypes.string,
 
     /* callback to update the value. Called with a single argument: the new
      * value. */
-    onSubmit: React.PropTypes.func,
+    onSubmit: PropTypes.func,
 
     /* should the input submit when focus is lost? */
-    blurToSubmit: React.PropTypes.bool,
+    blurToSubmit: PropTypes.bool,
 };
 
 

src/components/views/elements/EmojiText.js

@@ -16,6 +16,7 @@
  */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import {emojifyText, containsEmoji} from '../../../HtmlUtils';
 
 export default function EmojiText(props) {
@@ -32,8 +33,8 @@ export default function EmojiText(props) {
 }
 
 EmojiText.propTypes = {
-    element: React.PropTypes.string,
-    children: React.PropTypes.string.isRequired,
+    element: PropTypes.string,
+    children: PropTypes.string.isRequired,
 };
 
 EmojiText.defaultProps = {

src/components/views/elements/Flair.js

@@ -63,7 +63,7 @@ FlairAvatar.propTypes = {
 };
 
 FlairAvatar.contextTypes = {
-    matrixClient: React.PropTypes.instanceOf(MatrixClient).isRequired,
+    matrixClient: PropTypes.instanceOf(MatrixClient).isRequired,
 };
 
 export default class Flair extends React.Component {
@@ -134,5 +134,5 @@ Flair.propTypes = {
 // this.context.matrixClient everywhere instead of this.props.matrixClient.
 // See https://github.com/vector-im/riot-web/issues/4951.
 Flair.contextTypes = {
-    matrixClient: React.PropTypes.instanceOf(MatrixClient).isRequired,
+    matrixClient: PropTypes.instanceOf(MatrixClient).isRequired,
 };

src/components/views/elements/LanguageDropdown.js

@@ -16,6 +16,7 @@ limitations under the License.
 */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 
 import sdk from '../../../index';
 import * as languageHandler from '../../../languageHandler';
@@ -114,7 +115,7 @@ export default class LanguageDropdown extends React.Component {
 }
 
 LanguageDropdown.propTypes = {
-    className: React.PropTypes.string,
-    onOptionChange: React.PropTypes.func.isRequired,
-    value: React.PropTypes.string,
+    className: PropTypes.string,
+    onOptionChange: PropTypes.func.isRequired,
+    value: PropTypes.string,
 };

src/components/views/elements/MemberEventListSummary.js

@@ -14,6 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 import React from 'react';
+import PropTypes from 'prop-types';
 import sdk from '../../../index';
 const MemberAvatar = require('../avatars/MemberAvatar.js');
 import { _t } from '../../../languageHandler';
@@ -23,19 +24,19 @@ module.exports = React.createClass({
 
     propTypes: {
         // An array of member events to summarise
-        events: React.PropTypes.array.isRequired,
+        events: PropTypes.array.isRequired,
         // An array of EventTiles to render when expanded
-        children: React.PropTypes.array.isRequired,
+        children: PropTypes.array.isRequired,
         // The maximum number of names to show in either each summary e.g. 2 would result "A, B and 234 others left"
-        summaryLength: React.PropTypes.number,
+        summaryLength: PropTypes.number,
         // The maximum number of avatars to display in the summary
-        avatarsMaxLength: React.PropTypes.number,
+        avatarsMaxLength: PropTypes.number,
         // The minimum number of events needed to trigger summarisation
-        threshold: React.PropTypes.number,
+        threshold: PropTypes.number,
         // Called when the MELS expansion is toggled
-        onToggle: React.PropTypes.func,
+        onToggle: PropTypes.func,
         // Whether or not to begin with state.expanded=true
-        startExpanded: React.PropTypes.bool,
+        startExpanded: PropTypes.bool,
     },
 
     getInitialState: function() {

src/components/views/elements/PowerSelector.js

@@ -17,6 +17,7 @@ limitations under the License.
 'use strict';
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import * as Roles from '../../../Roles';
 import { _t } from '../../../languageHandler';
 
@@ -24,23 +25,23 @@ module.exports = React.createClass({
     displayName: 'PowerSelector',
 
     propTypes: {
-        value: React.PropTypes.number.isRequired,
+        value: PropTypes.number.isRequired,
         // The maximum value that can be set with the power selector
-        maxValue: React.PropTypes.number.isRequired,
+        maxValue: PropTypes.number.isRequired,
 
         // Default user power level for the room
-        usersDefault: React.PropTypes.number.isRequired,
+        usersDefault: PropTypes.number.isRequired,
 
         // if true, the <select/> should be a 'controlled' form element and updated by React
         // to reflect the current value, rather than left freeform.
         // MemberInfo uses controlled; RoomSettings uses non-controlled.
         //
         // ignored if disabled is truthy. false by default.
-        controlled: React.PropTypes.bool,
+        controlled: PropTypes.bool,
 
         // should the user be able to change the value? false by default.
-        disabled: React.PropTypes.bool,
-        onChange: React.PropTypes.func,
+        disabled: PropTypes.bool,
+        onChange: PropTypes.func,
     },
 
     getInitialState: function() {

src/components/views/elements/ProgressBar.js

@@ -17,12 +17,13 @@ limitations under the License.
 'use strict';
 
 const React = require('react');
+import PropTypes from 'prop-types';
 
 module.exports = React.createClass({
     displayName: 'ProgressBar',
     propTypes: {
-        value: React.PropTypes.number,
-        max: React.PropTypes.number,
+        value: PropTypes.number,
+        max: PropTypes.number,
     },
 
     render: function() {

src/components/views/elements/SettingsFlag.js

@@ -15,23 +15,24 @@ limitations under the License.
 */
 
 import React from "react";
+import PropTypes from 'prop-types';
 import SettingsStore from "../../../settings/SettingsStore";
 import { _t } from '../../../languageHandler';
 
 module.exports = React.createClass({
     displayName: 'SettingsFlag',
     propTypes: {
-        name: React.PropTypes.string.isRequired,
-        level: React.PropTypes.string.isRequired,
-        roomId: React.PropTypes.string, // for per-room settings
-        label: React.PropTypes.string, // untranslated
-        onChange: React.PropTypes.func,
-        isExplicit: React.PropTypes.bool,
-        manualSave: React.PropTypes.bool,
+        name: PropTypes.string.isRequired,
+        level: PropTypes.string.isRequired,
+        roomId: PropTypes.string, // for per-room settings
+        label: PropTypes.string, // untranslated
+        onChange: PropTypes.func,
+        isExplicit: PropTypes.bool,
+        manualSave: PropTypes.bool,
 
         // If group is supplied, then this will create a radio button instead.
-        group: React.PropTypes.string,
-        value: React.PropTypes.any, // the value for the radio button
+        group: PropTypes.string,
+        value: PropTypes.any, // the value for the radio button
     },
 
     getInitialState: function() {

src/components/views/elements/TagTile.js

@@ -30,7 +30,7 @@ export default React.createClass({
     },
 
     contextTypes: {
-        matrixClient: React.PropTypes.instanceOf(MatrixClient).isRequired,
+        matrixClient: PropTypes.instanceOf(MatrixClient).isRequired,
     },
 
     getInitialState() {

src/components/views/elements/TintableSvg.js

@@ -18,16 +18,17 @@ limitations under the License.
 
 const React = require('react');
 const ReactDOM = require("react-dom");
+import PropTypes from 'prop-types';
 const Tinter = require("../../../Tinter");
 
 var TintableSvg = React.createClass({
     displayName: 'TintableSvg',
 
     propTypes: {
-        src: React.PropTypes.string.isRequired,
-        width: React.PropTypes.string.isRequired,
-        height: React.PropTypes.string.isRequired,
-        className: React.PropTypes.string,
+        src: PropTypes.string.isRequired,
+        width: PropTypes.string.isRequired,
+        height: PropTypes.string.isRequired,
+        className: PropTypes.string,
     },
 
     statics: {

src/components/views/elements/UserSelector.js

@@ -17,14 +17,15 @@ limitations under the License.
 'use strict';
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
 
 module.exports = React.createClass({
     displayName: 'UserSelector',
 
     propTypes: {
-        onChange: React.PropTypes.func,
-        selected_users: React.PropTypes.arrayOf(React.PropTypes.string),
+        onChange: PropTypes.func,
+        selected_users: PropTypes.arrayOf(React.PropTypes.string),
     },
 
     getDefaultProps: function() {