From 20f2836aedbe7298706a39a76a0fc4e598b6ad6f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= Date: Mon, 25 Jan 2016 14:15:36 +0100 Subject: [PATCH] Fix all occurrences of react/addons usage Fixed also: cloneWithProps deprecation --- .../ascribe_buttons/acl_button_list.js | 4 ++-- .../ascribe_buttons/form_submit_button.js | 5 +++-- js/components/ascribe_forms/form.js | 3 +-- .../input_contract_agreement_checkbox.js | 5 +++-- js/components/ascribe_forms/property.js | 5 +---- js/components/ascribe_modal/modal_wrapper.js | 5 ++--- .../slides_container.js | 6 +++--- js/components/ascribe_table/table.js | 5 ++--- .../react_s3_fine_uploader.js | 19 ++++++++++--------- js/stores/edition_list_store.js | 4 ++-- js/stores/piece_list_store.js | 4 ++-- package.json | 1 + 12 files changed, 32 insertions(+), 34 deletions(-) diff --git a/js/components/ascribe_buttons/acl_button_list.js b/js/components/ascribe_buttons/acl_button_list.js index 35e42c20..a4b224a5 100644 --- a/js/components/ascribe_buttons/acl_button_list.js +++ b/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 }); }); }, diff --git a/js/components/ascribe_buttons/form_submit_button.js b/js/components/ascribe_buttons/form_submit_button.js index 087061d9..8aa5ec30 100644 --- a/js/components/ascribe_buttons/form_submit_button.js +++ b/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 }); }, diff --git a/js/components/ascribe_forms/form.js b/js/components/ascribe_forms/form.js index 91d00f65..ccf48221 100644 --- a/js/components/ascribe_forms/form.js +++ b/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` diff --git a/js/components/ascribe_forms/input_contract_agreement_checkbox.js b/js/components/ascribe_forms/input_contract_agreement_checkbox.js index 61235631..259e2b44 100644 --- a/js/components/ascribe_forms/input_contract_agreement_checkbox.js +++ b/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 } }) }); diff --git a/js/components/ascribe_forms/property.js b/js/components/ascribe_forms/property.js index 432591bf..9784eb49 100644 --- a/js/components/ascribe_forms/property.js +++ b/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- diff --git a/js/components/ascribe_modal/modal_wrapper.js b/js/components/ascribe_modal/modal_wrapper.js index fd77e5ae..4987a486 100644 --- a/js/components/ascribe_modal/modal_wrapper.js +++ b/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 ReactAddons.addons.cloneWithProps(child, { + return React.Children.map(this.props.children, (child) => { + return React.cloneElement(child, { handleSuccess: (response) => { if (typeof child.props.handleSuccess === 'function') { child.props.handleSuccess(response); diff --git a/js/components/ascribe_slides_container/slides_container.js b/js/components/ascribe_slides_container/slides_container.js index 39d515a3..d427d2f6 100644 --- a/js/components/ascribe_slides_container/slides_container.js +++ b/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 diff --git a/js/components/ascribe_table/table.js b/js/components/ascribe_table/table.js index fa040a0b..207b183b 100644 --- a/js/components/ascribe_table/table.js +++ b/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 ReactAddons.addons.cloneWithProps(child, { + return React.Children.map(this.props.children, (child, i) => { + return React.cloneElement(child, { columnList: this.props.columnList, columnContent: this.props.itemList[i], key: i diff --git a/js/components/ascribe_uploader/react_s3_fine_uploader.js b/js/components/ascribe_uploader/react_s3_fine_uploader.js index 877146a5..7f442f64 100644 --- a/js/components/ascribe_uploader/react_s3_fine_uploader.js +++ b/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); }); diff --git a/js/stores/edition_list_store.js b/js/stores/edition_list_store.js index 107f9af4..cea31f43 100644 --- a/js/stores/edition_list_store.js +++ b/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]; diff --git a/js/stores/piece_list_store.js b/js/stores/piece_list_store.js index 94c57113..6458c32a 100644 --- a/js/stores/piece_list_store.js +++ b/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 } }); } diff --git a/package.json b/package.json index fb36b685..9eab3c1d 100644 --- a/package.json +++ b/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",