From dc0eca1d83f0036dc480c39d372c4daa5526d6e0 Mon Sep 17 00:00:00 2001 From: Jing Wang Date: Mon, 25 Apr 2016 23:47:42 +0800 Subject: [PATCH 1/3] updating react components to use new react version --- package.json | 15 ++++++--------- src/components/exercise/mode.cjsx | 5 +++-- src/components/exercise/step-card.cjsx | 4 ++-- src/components/html.cjsx | 3 ++- .../pinned-header-footer-card/index.cjsx | 9 +++++---- src/components/resize-listener-mixin.cjsx | 3 ++- src/components/smart-overflow.cjsx | 3 ++- test/helpers/index.coffee | 9 +++++---- 8 files changed, 27 insertions(+), 24 deletions(-) diff --git a/package.json b/package.json index f72e5dd..134ebab 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,7 @@ }, "homepage": "https://github.com/openstax/react-components", "dependencies": { - "bootstrap": "3.3.5", + "bootstrap": "3.3.6", "camelcase": "1.2.1", "classnames": "2.1.5", "eventemitter2": "0.4.14", @@ -49,7 +49,7 @@ "extract-text-webpack-plugin": "0.8.2", "file-exists": "0.1.1", "file-loader": "0.8.4", - "fixed-data-table": "0.4.1", + "fixed-data-table": "0.6.0", "gulp": "3.9.0", "gulp-coffeelint": "0.4.0", "gulp-env": "0.2.0", @@ -77,8 +77,10 @@ "lodash": "3.10.1", "mocha": "2.2.5", "phantomjs": "1.9.18", - "react": "0.13.1", - "react-bootstrap": ">=0.23.0 <=0.26.2", + "react": "0.14.8", + "react-dom": "0.14.8", + "react-addons-test-utils": "0.14.8", + "react-bootstrap": "0.28.2", "react-hot-loader": "1.3.0", "react-scroll-components": "0.2.2", "selenium-webdriver": "2.47.0", @@ -92,11 +94,6 @@ "webpack-umd-external": "1.0.2", "when": "3.7.3" }, - "peerDependencies": { - "react": "^0.13.1", - "react-bootstrap": ">=0.23.0 <=0.26.2", - "react-scroll-components": "^0.2.2" - }, "config": { "blanket": { "pattern": "src" diff --git a/src/components/exercise/mode.cjsx b/src/components/exercise/mode.cjsx index f06dc07..4f626f2 100644 --- a/src/components/exercise/mode.cjsx +++ b/src/components/exercise/mode.cjsx @@ -1,4 +1,5 @@ React = require 'react' +ReactDOM = require 'react-dom' _ = require 'underscore' ArbitraryHtmlAndMath = require '../html' @@ -45,10 +46,10 @@ ExMode = React.createClass focusBox: -> {focus, mode} = @props - @refs.freeResponse?.getDOMNode?().focus?() if focus and mode is 'free-response' + ReactDOM.findDOMNode(@refs.freeResponse)?.focus?() if focus and mode is 'free-response' onFreeResponseChange: -> - freeResponse = @refs.freeResponse?.getDOMNode()?.value + freeResponse = ReactDOM.findDOMNode(@refs.freeResponse)?.value if freeResponse.length <= RESPONSE_CHAR_LIMIT @setState({freeResponse}) @props.onFreeResponseChange?(freeResponse) diff --git a/src/components/exercise/step-card.cjsx b/src/components/exercise/step-card.cjsx index fd4b49e..25911c0 100644 --- a/src/components/exercise/step-card.cjsx +++ b/src/components/exercise/step-card.cjsx @@ -1,4 +1,4 @@ -React = require 'react/addons' +React = require 'react' _ = require 'underscore' classnames = require 'classnames' @@ -135,7 +135,7 @@ ExerciseStepCard = React.createClass footerProps = _.pick(@props, props.StepFooter) footerProps.controlButtons = controlButtons or - footer = React.addons.cloneWithProps(footer, footerProps) + footer = React.cloneElement(footer, footerProps) cardClasses = classnames 'task-step', 'openstax-exercise-card', className diff --git a/src/components/html.cjsx b/src/components/html.cjsx index d197d69..4d5d441 100644 --- a/src/components/html.cjsx +++ b/src/components/html.cjsx @@ -1,4 +1,5 @@ React = require 'react' +ReactDOM = require 'react-dom' _ = require 'underscore' classnames = require 'classnames' @@ -54,7 +55,7 @@ module.exports = React.createClass # Perform manipulation on HTML contained inside the components node. updateDOMNode: -> # External links should open in a new window - root = @getDOMNode() + root = ReactDOM.findDOMNode(@) links = root.querySelectorAll('a') _.each links, (link) -> link.setAttribute('target', '_blank') unless link.getAttribute('href')?[0] is '#' diff --git a/src/components/pinned-header-footer-card/index.cjsx b/src/components/pinned-header-footer-card/index.cjsx index 409aa31..d63492b 100644 --- a/src/components/pinned-header-footer-card/index.cjsx +++ b/src/components/pinned-header-footer-card/index.cjsx @@ -1,4 +1,5 @@ React = require 'react' +ReactDOM = require 'react-dom' _ = require 'underscore' {ScrollListenerMixin} = require 'react-scroll-components' @@ -46,7 +47,7 @@ module.exports = React.createClass if @props.fixedOffset? offset = @props.fixedOffset else if @refs.header? - offset = @getTopPosition(@refs.header.getDOMNode()) + offset = @getTopPosition(ReactDOM.findDOMNode(@refs.header)) offset @@ -116,18 +117,18 @@ module.exports = React.createClass @setState(shouldBeShy: true) getHeaderHeight: -> - header = @refs.header?.getDOMNode() + header = ReactDOM.findDOMNode(@refs.header) headerHeight = header?.offsetHeight or 0 setOriginalContainerMargin: -> - container = @refs.container?.getDOMNode() + container = ReactDOM.findDOMNode(@refs.container) return unless container @setState(containerMarginTop: window.getComputedStyle(container).marginTop) if window.getComputedStyle? setContainerMargin: -> headerHeight = @getHeaderHeight() - container = @refs.container?.getDOMNode() + container = ReactDOM.findDOMNode(@refs.container) return unless container @setState(headerHeight: headerHeight) diff --git a/src/components/resize-listener-mixin.cjsx b/src/components/resize-listener-mixin.cjsx index 6527638..f26701d 100644 --- a/src/components/resize-listener-mixin.cjsx +++ b/src/components/resize-listener-mixin.cjsx @@ -1,4 +1,5 @@ React = require 'react' +ReactDOM = require 'react-dom' _ = require 'underscore' module.exports = @@ -41,7 +42,7 @@ module.exports = _getComponentSize: -> return {height: 0, width: 0} unless @isMounted() - componentNode = @getDOMNode() + componentNode = ReactDOM.findDOMNode(@) width: componentNode.offsetWidth height: componentNode.offsetHeight diff --git a/src/components/smart-overflow.cjsx b/src/components/smart-overflow.cjsx index 0b232fa..be7c4ba 100644 --- a/src/components/smart-overflow.cjsx +++ b/src/components/smart-overflow.cjsx @@ -1,4 +1,5 @@ React = require 'react' +ReactDOM = require 'react-dom' _ = require 'underscore' classnames = require 'classnames' @@ -21,7 +22,7 @@ SmartOverflow = React.createClass mixins: [ResizeListenerMixin] getOffset: -> - componentNode = @getDOMNode() + componentNode = ReactDOM.findDOMNode(@) topOffset = componentNode.getBoundingClientRect().top getTriggerHeight: -> diff --git a/test/helpers/index.coffee b/test/helpers/index.coffee index 1b28dc9..17ad7bc 100644 --- a/test/helpers/index.coffee +++ b/test/helpers/index.coffee @@ -1,7 +1,8 @@ _ = require 'underscore' expect = chai.expect -React = require 'react/addons' -ReactTestUtils = React.addons.TestUtils +React = require 'react' +ReactDOM = require 'react-dom' +ReactTestUtils = require 'react-addons-test-utils' {Promise} = require 'es6-promise' {commonActions} = require './utilities' sandbox = null @@ -23,7 +24,7 @@ Testing = { promise = new Promise( (resolve, reject) -> props = _.clone(options.props) props._wrapped_component = component - wrapper = React.render( React.createElement(Wrapper, props), root ) + wrapper = ReactDOM.render( React.createElement(Wrapper, props), root ) resolve({ root, wrapper, @@ -34,7 +35,7 @@ Testing = { # defer adding the then callback so it'll be called after whatever is attached after the return _.defer -> promise.then -> _.delay( -> - React.unmountComponentAtNode(root) + ReactDOM.unmountComponentAtNode(root) , unmountAfter ) return arguments promise From 50f858c3479b5a7c4440f8178a5ef1bc5842871d Mon Sep 17 00:00:00 2001 From: Jing Wang Date: Mon, 25 Apr 2016 23:48:02 +0800 Subject: [PATCH 2/3] updating demo render --- demo.cjsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/demo.cjsx b/demo.cjsx index bfab290..609593f 100644 --- a/demo.cjsx +++ b/demo.cjsx @@ -1,4 +1,5 @@ React = require 'react' +ReactDOM = require 'react-dom' Demo = require './src/components/demo' {startMathJax} = require './src/helpers/mathjax' @@ -10,7 +11,7 @@ loadApp = -> mainDiv = document.createElement('div') mainDiv.id = 'react-root-container' document.body.appendChild(mainDiv) - React.render(, mainDiv) + ReactDOM.render(, mainDiv) true loadApp() or document.addEventListener('readystatechange', loadApp) From 76247815761ad985ad03ed1edc990fd7d8080035 Mon Sep 17 00:00:00 2001 From: Jing Wang Date: Mon, 25 Apr 2016 23:48:32 +0800 Subject: [PATCH 3/3] pulling bootstrap includes include react-components, so tutor doesn't have to anymore --- resources/styles/globals/openstax-bootstrap.less | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/resources/styles/globals/openstax-bootstrap.less b/resources/styles/globals/openstax-bootstrap.less index 0b535c8..ded8e78 100644 --- a/resources/styles/globals/openstax-bootstrap.less +++ b/resources/styles/globals/openstax-bootstrap.less @@ -21,22 +21,22 @@ @import "@{bootstrap-path}/dropdowns"; @import "@{bootstrap-path}/button-groups"; @import "@{bootstrap-path}/input-groups"; -// @import "@{bootstrap-path}/navs"; -// @import "@{bootstrap-path}/navbar"; +@import "@{bootstrap-path}/navs"; +@import "@{bootstrap-path}/navbar"; // @import "@{bootstrap-path}/breadcrumbs"; // @import "@{bootstrap-path}/pagination"; // @import "@{bootstrap-path}/pager"; -// @import "@{bootstrap-path}/labels"; -// @import "@{bootstrap-path}/badges"; +@import "@{bootstrap-path}/labels"; +@import "@{bootstrap-path}/badges"; // @import "@{bootstrap-path}/jumbotron"; -// @import "@{bootstrap-path}/thumbnails"; +@import "@{bootstrap-path}/thumbnails"; @import "@{bootstrap-path}/alerts"; @import "@{bootstrap-path}/progress-bars"; -// @import "@{bootstrap-path}/media"; +@import "@{bootstrap-path}/media"; @import "@{bootstrap-path}/list-group"; @import "@{bootstrap-path}/panels"; @import "@{bootstrap-path}/responsive-embed"; -// @import "@{bootstrap-path}/wells"; +@import "@{bootstrap-path}/wells"; @import "@{bootstrap-path}/close"; // Components w/ JavaScript