Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Change to ReactDOM.findDOMNode() and use separated react addon libs #1733

Closed
wants to merge 5 commits into from
Closed

Change to ReactDOM.findDOMNode() and use separated react addon libs #1733

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8a25356
Solve conflict.
Sep 25, 2015
5c4b0f8
Merge pull request #1696 from EcutDavid/DavidLocal
shaurya947 Sep 25, 2015
624050a
Fixed typo in src/card-expandable.jsx
shaurya947 Sep 25, 2015
b7b0b92
Merge pull request #1724 from shaurya947/fix-broken-card
shaurya947 Sep 25, 2015
13c18b6
Change to ReactDOM.findDOMNode() and use separated react addon libs
Aaike Sep 26, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
16 changes: 9 additions & 7 deletions docs/src/app/components/pages/customization/themes.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -608,11 +608,11 @@ const ThemesPage = React.createClass({

getThemeExamples() {
return (
<Tabs onChange={this.onTabChange}>
<Tab label='Light Theme (Default)'>
<Tabs>
<Tab label='Light Theme (Default)' onClick={this.onTabChange.bind(this, false)}>
{this.getComponentGroup()}
</Tab>
<Tab label='Dark Theme'>
<Tab label='Dark Theme' onClick={this.onTabChange.bind(this, true)}>
{this.getComponentGroup()}
</Tab>
</Tabs>
Expand All @@ -621,19 +621,21 @@ const ThemesPage = React.createClass({


// Toggles between light and dark themes
onTabChange(tabIndex, tab) {
onTabChange(isDark) {
if(this.state.isThemeDark === isDark){
return;
}
let newMuiTheme = null;

if (!this.state.isThemeDark) {
newMuiTheme = ThemeManager.getMuiTheme(DarkRawTheme);

}
}
else {
newMuiTheme = ThemeManager.getMuiTheme(DefaultRawTheme);
}

this.setState({muiTheme: newMuiTheme,
isThemeDark: !this.state.isThemeDark});
isThemeDark: isDark});
},

handleAction(e) {
Expand Down
12 changes: 7 additions & 5 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,12 @@
"react-draggable2": "^0.5.1"
},
"peerDependencies": {
"react": ">=0.13",
"react-tap-event-plugin": "^0.1.3"
"react": ">=0.14.0-rc1",
"react-tap-event-plugin": "^0.2.0",
"react-addons-transition-group": "^0.14.0-rc1",
"react-addons-update": "^0.14.0-rc1",
"react-addons-create-fragment": "^0.14.0-rc1",
"react-addons-pure-render-mixin": "^0.14.0-rc1"
},
"devDependencies": {
"babel": "^5.4.3",
Expand All @@ -61,9 +65,7 @@
"mocha": "^2.2.5",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

travis complains: Error: Cannot find module 'react-stub-context'.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeh react-stub-context hasn't been updated yet to react 0.14.
@shaurya947 said to just leave it out if it isn't used by the files source files : #1704

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does this means that we can't fix the build until react-stub-context support react v0.14?
I will close #1725 when the build pass since I believe this PR is more appropriate.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Aaike @oliviertassinari I suggested leaving it out because I thought that might fix the build error.

What can we do now to make the build successful?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@shaurya947 I'm gonna try to fix react-stub-context.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

"phantomjs": "^1.9.17",
"react-hot-loader": "^1.2.8",
"react-router": "^0.13.3",
"react-stub-context": "^0.3.0",
"react-tap-event-plugin": "^0.1.6",
"react-router": "^1.0.0-rc1",
"sinon": "^1.15.4",
"sinon-chai": "^2.8.0",
"transfer-webpack-plugin": "^0.1.4",
Expand Down
2 changes: 1 addition & 1 deletion src/avatar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
const React = require('react/addons');
const React = require('react');
const StylePropable = require('./mixins/style-propable');
const Colors = require('./styles/colors');
const DefaultRawTheme = require('./styles/raw-themes/light-raw-theme');
Expand Down
2 changes: 1 addition & 1 deletion src/buttons/flat-button-label.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
const React = require('react/addons');
const React = require('react');
const ContextPure = require('../mixins/context-pure');
const Styles = require('../utils/styles');
const DefaultRawTheme = require('../styles/raw-themes/light-raw-theme');
Expand Down
2 changes: 1 addition & 1 deletion src/card/card-expandable.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ const CardExpandable = React.createClass({
};
},

static: {
statics: {
getRelevantContextKeys(muiTheme) {
return {
isRtl: muiTheme.isRtl,
Expand Down
5 changes: 3 additions & 2 deletions src/circular-progress.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
const React = require('react');
const ReactDOM = require('react-dom');
const StylePropable = require('./mixins/style-propable');
const AutoPrefix = require('./styles/auto-prefix');
const Transitions = require("./styles/transitions");
Expand Down Expand Up @@ -59,8 +60,8 @@ const CircularProgress = React.createClass({
},

componentDidMount() {
let wrapper = React.findDOMNode(this.refs.wrapper);
let path = React.findDOMNode(this.refs.path);
let wrapper = ReactDOM.findDOMNode(this.refs.wrapper);
let path = ReactDOM.findDOMNode(this.refs.path);

this._scalePath(path);
this._rotateWrapper(wrapper);
Expand Down
4 changes: 2 additions & 2 deletions src/dialog.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
const React = require('react/addons');
const React = require('react');
const WindowListenable = require('./mixins/window-listenable');
const CssEvent = require('./utils/css-event');
const KeyCode = require('./utils/key-code');
Expand All @@ -10,7 +10,7 @@ const Paper = require('./paper');
const DefaultRawTheme = require('./styles/raw-themes/light-raw-theme');
const ThemeManager = require('./styles/theme-manager');

const ReactTransitionGroup = React.addons.TransitionGroup;
const ReactTransitionGroup = require('react-addons-transition-group');

const TransitionItem = React.createClass({
mixins: [StylePropable],
Expand Down
5 changes: 3 additions & 2 deletions src/drop-down-menu.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
const React = require('react');
const ReactDOM = require('react-dom');
const StylePropable = require('./mixins/style-propable');
const Transitions = require('./styles/transitions');
const KeyCode = require('./utils/key-code');
Expand Down Expand Up @@ -241,8 +242,8 @@ const DropDownMenu = React.createClass({
},

_setWidth() {
let el = React.findDOMNode(this);
let menuItemsDom = React.findDOMNode(this.refs.menuItems);
let el = ReactDOM.findDOMNode(this);
let menuItemsDom = ReactDOM.findDOMNode(this.refs.menuItems);
if (!this.props.style || !this.props.style.hasOwnProperty('width')) {
el.style.width = 'auto';
el.style.width = menuItemsDom.offsetWidth + 'px';
Expand Down
4 changes: 2 additions & 2 deletions src/enhanced-button.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
const React = require('react/addons');
const PureRenderMixin = React.addons.PureRenderMixin;
const React = require('react');
const PureRenderMixin = require('react-addons-pure-render-mixin');
const StylePropable = require('./mixins/style-propable');
const Colors = require('./styles/colors');
const Children = require('./utils/children');
Expand Down
13 changes: 7 additions & 6 deletions src/enhanced-switch.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
const React = require('react');
const ReactDOM = require('react-dom');
const KeyCode = require('./utils/key-code');
const StylePropable = require('./mixins/style-propable');
const Transitions = require('./styles/transitions');
Expand Down Expand Up @@ -70,13 +71,13 @@ const EnhancedSwitch = React.createClass({
getEvenWidth(){
return (
parseInt(window
.getComputedStyle(React.findDOMNode(this.refs.root))
.getComputedStyle(ReactDOM.findDOMNode(this.refs.root))
.getPropertyValue('width'), 10)
);
},

componentDidMount() {
let inputNode = React.findDOMNode(this.refs.checkbox);
let inputNode = ReactDOM.findDOMNode(this.refs.checkbox);
if (!this.props.switched || inputNode.checked !== this.props.switched) {
this.props.onParentShouldUpdate(inputNode.checked);
}
Expand Down Expand Up @@ -318,14 +319,14 @@ const EnhancedSwitch = React.createClass({


isSwitched() {
return React.findDOMNode(this.refs.checkbox).checked;
return ReactDOM.findDOMNode(this.refs.checkbox).checked;
},

// no callback here because there is no event
setSwitched(newSwitchedValue) {
if (!this.props.hasOwnProperty('checked') || this.props.checked === false) {
this.props.onParentShouldUpdate(newSwitchedValue);
React.findDOMNode(this.refs.checkbox).checked = newSwitchedValue;
ReactDOM.findDOMNode(this.refs.checkbox).checked = newSwitchedValue;
}
else if (process.env.NODE_ENV !== 'production') {
let message = 'Cannot call set method while checked is defined as a property.';
Expand All @@ -334,7 +335,7 @@ const EnhancedSwitch = React.createClass({
},

getValue() {
return React.findDOMNode(this.refs.checkbox).value;
return ReactDOM.findDOMNode(this.refs.checkbox).value;
},

isKeyboardFocused() {
Expand All @@ -347,7 +348,7 @@ const EnhancedSwitch = React.createClass({
isKeyboardFocused: false,
});

let isInputChecked = React.findDOMNode(this.refs.checkbox).checked;
let isInputChecked = ReactDOM.findDOMNode(this.refs.checkbox).checked;

if (!this.props.hasOwnProperty('checked')) {
this.props.onParentShouldUpdate(isInputChecked);
Expand Down
5 changes: 3 additions & 2 deletions src/enhanced-textarea.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
const React = require('react');
const ReactDOM = require('react-dom');
const StylePropable = require('./mixins/style-propable');
const AutoPrefix = require('./styles/auto-prefix');

Expand Down Expand Up @@ -106,7 +107,7 @@ const EnhancedTextarea = React.createClass({
},

getInputNode() {
return React.findDOMNode(this.refs.input);
return ReactDOM.findDOMNode(this.refs.input);
},

setValue(value) {
Expand All @@ -115,7 +116,7 @@ const EnhancedTextarea = React.createClass({
},

_syncHeightWithShadow(newValue, e) {
let shadow = React.findDOMNode(this.refs.shadow);
let shadow = ReactDOM.findDOMNode(this.refs.shadow);
let currentHeight = this.state.height;
let newHeight;

Expand Down
2 changes: 1 addition & 1 deletion src/flat-button.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
const React = require('react/addons');
const React = require('react');
const ContextPure = require('./mixins/context-pure');
const Transitions = require('./styles/transitions');
const Children = require('./utils/children');
Expand Down
5 changes: 3 additions & 2 deletions src/floating-action-button.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
const React = require('react');
const ReactDOM = require('react-dom');
const StylePropable = require('./mixins/style-propable');
const Transitions = require('./styles/transitions');
const ColorManipulator = require('./utils/color-manipulator');
Expand Down Expand Up @@ -265,11 +266,11 @@ const FloatingActionButton = React.createClass({
_handleKeyboardFocus(e, keyboardFocused) {
if (keyboardFocused && !this.props.disabled) {
this.setState({ zDepth: this.state.initialZDepth + 1 });
React.findDOMNode(this.refs.overlay).style.backgroundColor = ColorManipulator.fade(this.getStyles().icon.color, 0.4);
ReactDOM.findDOMNode(this.refs.overlay).style.backgroundColor = ColorManipulator.fade(this.getStyles().icon.color, 0.4);
}
else if (!this.state.hovered) {
this.setState({ zDepth: this.state.initialZDepth });
React.findDOMNode(this.refs.overlay).style.backgroundColor = 'transparent';
ReactDOM.findDOMNode(this.refs.overlay).style.backgroundColor = 'transparent';
}
},

Expand Down
7 changes: 4 additions & 3 deletions src/left-nav.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ const isBrowser = typeof window !== 'undefined';
let Modernizr = isBrowser ? require('./utils/modernizr.custom') : undefined;

const React = require('react');
const ReactDOM = require('react-dom');
const KeyCode = require('./utils/key-code');
const StylePropable = require('./mixins/style-propable');
const AutoPrefix = require('./styles/auto-prefix');
Expand Down Expand Up @@ -213,8 +214,8 @@ const LeftNav = React.createClass({

_updateMenuHeight() {
if (this.props.header) {
let container = React.findDOMNode(this.refs.clickAwayableElement);
let menu = React.findDOMNode(this.refs.menuItems);
let container = ReactDOM.findDOMNode(this.refs.clickAwayableElement);
let menu = ReactDOM.findDOMNode(this.refs.menuItems);
let menuHeight = container.clientHeight - menu.offsetTop;
menu.style.height = menuHeight + 'px';
}
Expand Down Expand Up @@ -290,7 +291,7 @@ const LeftNav = React.createClass({
},

_setPosition(translateX) {
let leftNav = React.findDOMNode(this.refs.clickAwayableElement);
let leftNav = ReactDOM.findDOMNode(this.refs.clickAwayableElement);
leftNav.style[AutoPrefix.single('transform')] =
'translate3d(' + (this._getTranslateMultiplier() * translateX) + 'px, 0, 0)';
this.refs.overlay.setOpacity(1 - translateX / this._getMaxTranslateX());
Expand Down
5 changes: 3 additions & 2 deletions src/linear-progress.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
const React = require('react');
const ReactDOM = require('react-dom');
const StylePropable = require('./mixins/style-propable');
const Transitions = require("./styles/transitions");
const DefaultRawTheme = require('./styles/raw-themes/light-raw-theme');
Expand Down Expand Up @@ -55,8 +56,8 @@ const LinearProgress = React.createClass({
},

componentDidMount() {
let bar1 = React.findDOMNode(this.refs.bar1);
let bar2 = React.findDOMNode(this.refs.bar2);
let bar1 = ReactDOM.findDOMNode(this.refs.bar1);
let bar2 = ReactDOM.findDOMNode(this.refs.bar2);

this._barUpdate(0, bar1, [
[-35, 100],
Expand Down
2 changes: 1 addition & 1 deletion src/lists/list-divider.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
const React = require('react/addons');
const React = require('react');
const StylePropable = require('../mixins/style-propable');
const DefaultRawTheme = require('../styles/raw-themes/light-raw-theme');
const ThemeManager = require('../styles/theme-manager');
Expand Down
7 changes: 4 additions & 3 deletions src/lists/list-item.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
const React = require('react/addons');
const PureRenderMixin = React.addons.PureRenderMixin;
const React = require('react');
const ReactDOM = require('react-dom');
const PureRenderMixin = require('react-addons-pure-render-mixin');
const ColorManipulator = require('../utils/color-manipulator');
const StylePropable = require('../mixins/style-propable');
const Colors = require('../styles/colors');
Expand Down Expand Up @@ -367,7 +368,7 @@ const ListItem = React.createClass({

applyFocusState(focusState) {
const button = this.refs.enhancedButton;
const buttonEl = React.findDOMNode(button);
const buttonEl = ReactDOM.findDOMNode(button);

if (button) {
switch(focusState) {
Expand Down
4 changes: 2 additions & 2 deletions src/lists/list.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
const React = require('react/addons');
const PureRenderMixin = React.addons.PureRenderMixin;
const React = require('react');
const PureRenderMixin = require('react-addons-pure-render-mixin');
const PropTypes = require('../utils/prop-types');
const StylePropable = require('../mixins/style-propable');
const Typography = require('../styles/typography');
Expand Down
19 changes: 10 additions & 9 deletions src/menu/menu.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
const React = require('react');
const ReactDOM = require('react-dom');
const CssEvent = require('../utils/css-event');
const KeyLine = require('../utils/key-line');
const KeyCode = require('../utils/key-code');
Expand Down Expand Up @@ -171,8 +172,8 @@ const NestedMenuItem = React.createClass({
},

_positionNestedMenu() {
let el = React.findDOMNode(this);
let nestedMenu = React.findDOMNode(this.refs.nestedMenu);
let el = ReactDOM.findDOMNode(this);
let nestedMenu = ReactDOM.findDOMNode(this.refs.nestedMenu);
nestedMenu.style.left = el.offsetWidth + 'px';
},

Expand All @@ -182,7 +183,7 @@ const NestedMenuItem = React.createClass({

_closeNestedMenu() {
this.setState({ open: false });
React.findDOMNode(this).focus();
ReactDOM.findDOMNode(this).focus();
},

_onParentItemTap() {
Expand Down Expand Up @@ -263,7 +264,7 @@ const Menu = React.createClass({
},

componentDidMount() {
let el = React.findDOMNode(this);
let el = ReactDOM.findDOMNode(this);

//Set the menu width
this._setKeyWidth(el);
Expand All @@ -285,7 +286,7 @@ const Menu = React.createClass({
this.setState({muiTheme: newMuiTheme});

//Set the menu width
this._setKeyWidth(React.findDOMNode(this));
this._setKeyWidth(ReactDOM.findDOMNode(this));
},

getTheme() {
Expand Down Expand Up @@ -474,8 +475,8 @@ const Menu = React.createClass({
},

_expandHideableMenu() {
let el = React.findDOMNode(this);
let container = React.findDOMNode(this.refs.paperContainer);
let el = ReactDOM.findDOMNode(this);
let container = ReactDOM.findDOMNode(this.refs.paperContainer);
let padding = this.getSpacing().desktopGutterMini;
let height = this._getHiddenMenuHeight(el, padding);

Expand Down Expand Up @@ -524,8 +525,8 @@ const Menu = React.createClass({
},

_collapseHideableMenu() {
let el = React.findDOMNode(this);
let container = React.findDOMNode(this.refs.paperContainer);
let el = ReactDOM.findDOMNode(this);
let container = ReactDOM.findDOMNode(this.refs.paperContainer);
let originalOpacity = el.style.opacity;

//Add transition
Expand Down
Loading