Fix all occurrences of react/addons usage

Fixed also: cloneWithProps deprecation

js/components/ascribe_buttons/acl_button_list.js

@@ -1,6 +1,6 @@
 'use strict';
 
-import React from 'react/addons';
+import React from 'react';
 
 import UserActions from '../../actions/user_actions';
 import UserStore from '../../stores/user_store';
@@ -74,7 +74,7 @@ let AclButtonList = React.createClass({
         const { buttonListSize } = this.state;
 
         return React.Children.map(children, (child) => {
-            return React.addons.cloneWithProps(child, { buttonListSize });
+            return React.cloneElement(child, { buttonListSize });
         });
     },
 

js/components/ascribe_buttons/form_submit_button.js

@@ -1,6 +1,7 @@
 'use strict';
 
-import React from 'react/addons';
+import React from 'react';
+import update from 'react-addons-update';
 
 const { string, object } = React.PropTypes;
 
@@ -30,7 +31,7 @@ const FormSubmitButton = React.createClass({
     },
 
     setReadyStateForKey(key, state) {
-        const readyStates = React.addons.update(this.state.readyStates, { [key]: { $set: state } });
+        const readyStates = update(this.state.readyStates, { [key]: { $set: state } });
         this.setState({ readyStates });
     },
 

js/components/ascribe_forms/form.js

@@ -1,7 +1,6 @@
 'use strict';
 
 import React from 'react';
-import ReactAddons from 'react/addons';
 
 import Button from 'react-bootstrap/lib/Button';
 import AlertDismissable from './alert';
@@ -246,7 +245,7 @@ let Form = React.createClass({
     },
 
     renderChildren() {
-        return ReactAddons.Children.map(this.props.children, (child, i) => {
+        return React.Children.map(this.props.children, (child, i) => {
             if (child) {
                 // Since refs will be overwritten by this functions return statement,
                 // we still want to be able to define refs for nested `Form` or `Property`

js/components/ascribe_forms/input_contract_agreement_checkbox.js

@@ -1,6 +1,7 @@
 'use strict';
 
-import React from 'react/addons';
+import React from 'react';
+import update from 'react-addons-update';
 
 import InputCheckbox from './input_checkbox';
 
@@ -101,7 +102,7 @@ const InputContractAgreementCheckbox = React.createClass({
         // so the parent `Property` is able to get the correct value of this component
         // when the `Form` queries it.
         this.setState({
-            value: React.addons.update(this.state.value, {
+            value: update(this.state.value, {
                 terms: { $set: event.target.value }
             })
         });

js/components/ascribe_forms/property.js

@@ -1,14 +1,11 @@
 'use strict';
 
 import React from 'react';
-import ReactAddons from 'react/addons';
 
 import Panel from 'react-bootstrap/lib/Panel';
 
 import AppConstants from '../../constants/application_constants';
 
-import { mergeOptions } from '../../utils/general_utils';
-
 
 const { bool, element, string, oneOfType, func, object, arrayOf } = React.PropTypes;
 
@@ -247,7 +244,7 @@ const Property = React.createClass({
         // Input's props should only be cloned and propagated down the tree,
         // if the component is actually being shown (!== 'expanded === false')
         if((this.state.expanded && this.props.checkboxLabel) || !this.props.checkboxLabel) {
-            return ReactAddons.Children.map(this.props.children, (child) => {
+            return React.Children.map(this.props.children, (child) => {
                 // Since refs will be overriden by this functions return statement,
                 // we still want to be able to define refs for nested `Form` or `Property`
                 // children, which is why we're upfront simply invoking the callback-ref-

js/components/ascribe_modal/modal_wrapper.js

@@ -1,7 +1,6 @@
 'use strict';
 
 import React from 'react';
-import ReactAddons from 'react/addons';
 
 import Modal from 'react-bootstrap/lib/Modal';
 
@@ -44,8 +43,8 @@ let ModalWrapper = React.createClass({
     },
 
     renderChildren() {
-        return ReactAddons.Children.map(this.props.children, (child) => {
+        return React.Children.map(this.props.children, (child) => {
-            return ReactAddons.addons.cloneWithProps(child, {
+            return React.cloneElement(child, {
                 handleSuccess: (response) => {
                     if (typeof child.props.handleSuccess === 'function') {
                         child.props.handleSuccess(response);

js/components/ascribe_slides_container/slides_container.js

@@ -1,6 +1,6 @@
 'use strict';
 
-import React from 'react/addons';
+import React from 'react';
 import { History, Lifecycle } from 'react-router';
 
 import SlidesContainerBreadcrumbs from './slides_container_breadcrumbs';
@@ -120,7 +120,7 @@ const SlidesContainer = React.createClass({
         }
     },
 
-    // Since we need to give the slides a width, we need to call ReactAddons.addons.cloneWithProps
+    // Since we need to give the slides a width, we need to call React.cloneElement
     // Also, a key is nice to have!
     renderChildren() {
         const startFrom = parseInt(this.props.location.query.start_from, 10) || -1;
@@ -129,7 +129,7 @@ const SlidesContainer = React.createClass({
             // since the default parameter of startFrom is -1, we do not need to check
             // if its actually present in the url bar, as it will just not match
             if(child && i >= startFrom) {
-                return React.addons.cloneWithProps(child, {
+                return React.cloneElement(child, {
                     className: 'ascribe-slide',
                     style: {
                         width: this.state.containerWidth

js/components/ascribe_table/table.js

@@ -1,7 +1,6 @@
 'use strict';
 
 import React from 'react';
-import ReactAddons from 'react/addons';
 
 import TableHeader from './table_header';
 import { ColumnModel } from './models/table_models';
@@ -20,8 +19,8 @@ let Table = React.createClass({
     },
 
     renderChildren() {
-        return ReactAddons.Children.map(this.props.children, (child, i) => {
+        return React.Children.map(this.props.children, (child, i) => {
-            return ReactAddons.addons.cloneWithProps(child, {
+            return React.cloneElement(child, {
                 columnList: this.props.columnList,
                 columnContent: this.props.itemList[i],
                 key: i

js/components/ascribe_uploader/react_s3_fine_uploader.js

@@ -1,6 +1,7 @@
 'use strict';
 
-import React from 'react/addons';
+import React from 'react';
+import update from 'react-addons-update';
 import fineUploader from 'fineUploader';
 import Q from 'q';
 
@@ -395,7 +396,7 @@ const ReactS3FineUploader = React.createClass({
 
         if(fileId < filesToUpload.length) {
             const changeSet = { $set: url };
-            const newFilesToUpload = React.addons.update(filesToUpload, {
+            const newFilesToUpload = update(filesToUpload, {
                 [fileId]: { thumbnailUrl: changeSet }
             });
 
@@ -417,7 +418,7 @@ const ReactS3FineUploader = React.createClass({
             completed: false
         };
 
-        let startedChunks = React.addons.update(this.state.startedChunks, { $set: chunks });
+        let startedChunks = update(this.state.startedChunks, { $set: chunks });
 
         this.setState({ startedChunks });
     },
@@ -431,7 +432,7 @@ const ReactS3FineUploader = React.createClass({
             chunks[chunkKey].responseJson = responseJson;
             chunks[chunkKey].xhr = xhr;
 
-            let startedChunks = React.addons.update(this.state.startedChunks, { $set: chunks });
+            let startedChunks = update(this.state.startedChunks, { $set: chunks });
 
             this.setState({ startedChunks });
         }
@@ -455,7 +456,7 @@ const ReactS3FineUploader = React.createClass({
             files[id].status = 'upload successful';
             files[id].key = this.state.uploader.getKey(id);
 
-            let filesToUpload = React.addons.update(this.state.filesToUpload, { $set: files });
+            let filesToUpload = update(this.state.filesToUpload, { $set: files });
             this.setState({ filesToUpload });
 
             // Only after the blob has been created server-side, we can make the form submittable.
@@ -569,7 +570,7 @@ const ReactS3FineUploader = React.createClass({
     },
 
     onProgress(id, name, uploadedBytes, totalBytes) {
-        let filesToUpload = React.addons.update(this.state.filesToUpload, {
+        let filesToUpload = update(this.state.filesToUpload, {
             [id]: {
                 progress: { $set: (uploadedBytes / totalBytes) * 100}
             }
@@ -596,7 +597,7 @@ const ReactS3FineUploader = React.createClass({
                 return file;
             });
 
-            let filesToUpload = React.addons.update(this.state.filesToUpload, {$set: updatedFilesToUpload});
+            let filesToUpload = update(this.state.filesToUpload, {$set: updatedFilesToUpload});
 
             this.setState({filesToUpload });
         } else {
@@ -884,7 +885,7 @@ const ReactS3FineUploader = React.createClass({
         }
 
         // set the new file array
-        let filesToUpload = React.addons.update(this.state.filesToUpload, { $set: oldAndNewFiles });
+        let filesToUpload = update(this.state.filesToUpload, { $set: oldAndNewFiles });
 
         this.setState({ filesToUpload }, () => {
             // when files have been dropped or selected by a user, we want to propagate that
@@ -913,7 +914,7 @@ const ReactS3FineUploader = React.createClass({
 
             changeSet.status = { $set: status };
 
-            let filesToUpload = React.addons.update(this.state.filesToUpload, { [fileId]: changeSet });
+            let filesToUpload = update(this.state.filesToUpload, { [fileId]: changeSet });
 
             this.setState({ filesToUpload }, resolve);
         });

js/stores/edition_list_store.js

@@ -1,6 +1,6 @@
 'use strict';
 
-import React from 'react';
+import update from 'react-addons-update';
 
 import { alt } from '../alt';
 import EditionsListActions from '../actions/edition_list_actions';
@@ -35,7 +35,7 @@ class EditionListStore {
             
             // if edition already exists, just merge
             if(editionsForPieces[storeEditionIndex]) {
-                editionsForPieces[storeEditionIndex] = React.addons.update(editionsForPieces[storeEditionIndex], {$merge: editionListOfPiece[i]});
+                editionsForPieces[storeEditionIndex] = update(editionsForPieces[storeEditionIndex], {$merge: editionListOfPiece[i]});
             } else {
                 // if does not exist, assign
                 editionsForPieces[storeEditionIndex] = editionListOfPiece[i];

js/stores/piece_list_store.js

@@ -1,6 +1,6 @@
 'use strict';
 
-import React from 'react';
+import update from 'react-addons-update';
 import { alt } from '../alt';
 
 import PieceListActions from '../actions/piece_list_actions';
@@ -62,7 +62,7 @@ class PieceListStore {
         pieceList.forEach((piece, i) => {
             let oldPiece = this.pieceList[i];
             if(oldPiece) {
-                piece = React.addons.update(piece, {
+                piece = update(piece, {
                     show: { $set: oldPiece.show }
                 });
             }

package.json

@@ -78,6 +78,7 @@
     "qs": "^4.0.0",
     "raven-js": "^1.1.19",
     "react": "^0.14.6",
+    "react-addons-update": "^0.14.6",
     "react-bootstrap": "^0.28.2",
     "react-datepicker": "^0.18.0",
     "react-dom": "^0.14.6",