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

[Core] Update to React v15 #3941

Merged
merged 10 commits into from
Apr 13, 2016
Merged

[Core] Update to React v15 #3941

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
3aa0d16
[Core] Update dependencies and peerDependencies for React 15
nathanmarks Apr 9, 2016
063441a
[Toggle] Fix numeric string pixel value for marginLeft, fixes #3942
nathanmarks Apr 11, 2016
1db161a
[EnhancedSwitch] Adjust the way defaultChecked is passed to prevent f…
nathanmarks Apr 11, 2016
f5485a8
[Checkbox] Fix test to reflect actual DOM properties set when using d…
nathanmarks Apr 12, 2016
6bc661d
[EnhancedSwitch] Fix bug causing double rendering in certain situatio…
nathanmarks Apr 12, 2016
c588d9b
[DatePicker] Prevent datepicker from switching the TextField from unc…
nathanmarks Apr 12, 2016
446f5e6
[Snackbar] Remove duplicate default export in docs examples
nathanmarks Apr 12, 2016
edb1b7b
[Docs] Update dependencies for React 15
nathanmarks Apr 12, 2016
078b9ec
[Examples] Update dependencies for React 15
nathanmarks Apr 12, 2016
9d3f3a5
[Docs] Fix warnings in customization section
nathanmarks Apr 12, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions docs/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,16 +38,16 @@
"json-loader": "^0.5.4",
"marked": "^0.3.5",
"raw-loader": "^0.5.1",
"react-addons-perf": "^0.14.0",
"react-addons-pure-render-mixin": "^0.14.0",
"react-addons-perf": "^15.0.1",
"react-addons-pure-render-mixin": "^15.0.1",
"react-docgen": "^2.4.0",
"react-hot-loader": "^1.2.8",
"react-motion": "^0.4.2",
"react-native": "^0.17.0",
"react-router": "^2.0.0",
"react-swipeable-views": "^0.4.0",
"recast": "^0.10.41",
"style-loader": "0.13.0",
"react-swipeable-views": "^0.5.0",
"recast": "^0.11.4",
"style-loader": "0.13.1",
"transfer-webpack-plugin": "^0.1.4",
"webpack": "^1.11.0",
"webpack-dev-server": "^1.10.1"
Expand Down
8 changes: 7 additions & 1 deletion docs/src/app/components/CodeExample/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,16 @@ class CodeExample extends React.Component {
static propTypes = {
children: React.PropTypes.node,
code: React.PropTypes.string.isRequired,
component: React.PropTypes.bool,
description: React.PropTypes.string,
layoutSideBySide: React.PropTypes.bool,
title: React.PropTypes.string,
};

static defaultProps = {
component: true,
};

static contextTypes = {
muiTheme: React.PropTypes.object,
};
Expand All @@ -21,6 +26,7 @@ class CodeExample extends React.Component {
const {
children,
code,
component,
layoutSideBySide,
} = this.props;

Expand All @@ -41,7 +47,7 @@ class CodeExample extends React.Component {
},
};

const docs = parse(code);
const docs = component ? parse(code) : {};

return (
<Paper style={styles.root}>
Expand Down
8 changes: 4 additions & 4 deletions docs/src/app/components/pages/components/DatePicker/ExampleToggle.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,26 +59,26 @@ export default class DatePickerExampleToggle extends React.Component {
<div style={optionsStyle}>
<TextField
floatingLabelText="Min Date"
defaultValue={this.state.minDate.toDateString()}
value={this.state.minDate.toDateString()}
onChange={this.handleChangeMinDate}
/>
<TextField
floatingLabelText="Max Date"
defaultValue={this.state.maxDate.toDateString()}
value={this.state.maxDate.toDateString()}
onChange={this.handleChangeMaxDate}
/>
<Toggle
name="autoOk"
value="autoOk"
label="Auto Accept"
defaultToggled={this.state.autoOk}
toggled={this.state.autoOk}
onToggle={this.handleToggle}
/>
<Toggle
name="disableYearSelection"
value="disableYearSelection"
label="Disable Year Selection"
defaultToggled={this.state.disableYearSelection}
toggled={this.state.disableYearSelection}
onToggle={this.handleToggle}
/>
</div>
Expand Down
2 changes: 0 additions & 2 deletions docs/src/app/components/pages/components/Snackbar/ExampleAction.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,5 +65,3 @@ export default class SnackbarExampleSimple extends React.Component {
);
}
}

export default SnackbarExampleSimple;
2 changes: 0 additions & 2 deletions docs/src/app/components/pages/components/Snackbar/ExampleSimple.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,5 +40,3 @@ export default class SnackbarExampleSimple extends React.Component {
);
}
}

export default SnackbarExampleSimple;
2 changes: 0 additions & 2 deletions docs/src/app/components/pages/components/Snackbar/ExampleTwice.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,5 +53,3 @@ export default class SnackbarExampleTwice extends React.Component {
);
}
}

export default SnackbarExampleTwice;
2 changes: 1 addition & 1 deletion docs/src/app/components/pages/customization/Colors.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ const ColorsPage = React.createClass({
lineHeight: '32px',
paddingTop: 16,
marginBottom: 12,
letterSpacing: '0',
letterSpacing: 0,
fontWeight: typography.fontWeightNormal,
color: typography.textDarkBlack,
},
Expand Down
8 changes: 4 additions & 4 deletions docs/src/app/components/pages/customization/InlineStyles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ class InlineStyles extends React.Component {
lineHeight: '32px',
paddingTop: 16,
marginBottom: 12,
letterSpacing: '0',
letterSpacing: 0,
fontWeight: typography.fontWeightNormal,
color: typography.textDarkBlack,
},
Expand All @@ -21,7 +21,7 @@ class InlineStyles extends React.Component {
lineHeight: '28px',
paddingTop: 19,
marginBottom: 13,
letterSpacing: '0',
letterSpacing: 0,
fontWeight: typography.fontWeightMedium,
color: typography.textDarkBlack,
},
Expand Down Expand Up @@ -73,7 +73,7 @@ class InlineStyles extends React.Component {
</p>

<h3 style={styles.title}>Overriding Inline Styles</h3>
<CodeExample code={codeOverrideStyles}>
<CodeExample code={codeOverrideStyles} component={false}>
<Checkbox
id="checkboxId1"
name="checkboxName1"
Expand Down Expand Up @@ -102,7 +102,7 @@ class InlineStyles extends React.Component {
</p>

<h3 style={styles.title}>Mixing Inline and CSS Styles</h3>
<CodeExample code={codeMixStyles}>
<CodeExample code={codeMixStyles} component={false}>
<Checkbox
id="checkboxId1"
name="checkboxName1"
Expand Down
3 changes: 0 additions & 3 deletions docs/src/app/components/pages/customization/Themes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,7 +168,6 @@ const ThemesPage = React.createClass({
<RadioButton
value="euro"
label="Euro"
defaultChecked={true}
/>
<RadioButton
value="mxn"
Expand All @@ -180,12 +179,10 @@ const ThemesPage = React.createClass({
<div style={styles.container}>
<Toggle
name="toggleName1"
value="toggleValue1"
label="toggle"
/>
<Toggle
name="toggleName2"
value="toggleValue2"
label="disabled toggle"
defaultToggled={true}
disabled={true}
Expand Down
6 changes: 3 additions & 3 deletions examples/browserify-gulp-example/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,8 @@
},
"dependencies": {
"material-ui": "^0.15.0-alpha.2",
"react": "^0.14.0",
"react-dom": "^0.14.0",
"react-tap-event-plugin": "^0.2.1"
"react": "^15.0.1",
"react-dom": "^15.0.1",
"react-tap-event-plugin": "^1.0.0"
}
}
6 changes: 3 additions & 3 deletions examples/webpack-example/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,8 @@
},
"dependencies": {
"material-ui": "^0.15.0-alpha.2",
"react": "^0.14.3",
"react-dom": "^0.14.3",
"react-tap-event-plugin": "^0.2.1"
"react": "^15.0.1",
"react-dom": "^15.0.1",
"react-tap-event-plugin": "^1.0.0"
}
}
22 changes: 11 additions & 11 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,21 +39,21 @@
"test:unit:coverage": "babel-node node_modules/.bin/isparta cover --report lcovonly --include-all-sources --dir test/coverage/unit test/unit.js"
},
"peerDependencies": {
"react": "^0.14.0",
"react-dom": "^0.14.0",
"react-tap-event-plugin": "^0.2.0"
"react": "^15.0.0",
"react-dom": "^15.0.0",
"react-tap-event-plugin": "^1.0.0"
},
"dependencies": {
"inline-style-prefixer": "^1.0.2",
"keycode": "^2.1.0",
"lodash.flowright": "^3.2.1",
"lodash.merge": "^4.1.0",
"lodash.throttle": "^4.0.0",
"react-addons-create-fragment": "^0.14.0",
"react-addons-transition-group": "^0.14.0",
"react-addons-update": "^0.14.0",
"react-addons-create-fragment": "^15.0.0",
"react-addons-transition-group": "^15.0.0",
"react-addons-update": "^15.0.0",
"react-event-listener": "^0.1.1",
"recompose": "^0.15.0",
"recompose": "^0.17.0",
"simple-assign": "^0.1.0",
"warning": "^2.1.0"
},
Expand Down Expand Up @@ -98,11 +98,11 @@
"mocha": "^2.4.5",
"nodemon": "^1.9.1",
"phantomjs-prebuilt": "^2.1.6",
"react": "^0.14.0",
"react-addons-test-utils": "^0.14.7",
"react-dom": "^0.14.7",
"react": "^15.0.0",
"react-addons-test-utils": "^15.0.0",
"react-dom": "^15.0.0",
"react-hot-loader": "^1.3.0",
"react-tap-event-plugin": "^0.2.0",
"react-tap-event-plugin": "^1.0.0",
"recursive-readdir-sync": "^1.0.6",
"rimraf": "^2.4.3",
"sinon": "^1.17.3",
Expand Down
5 changes: 3 additions & 2 deletions src/Checkbox/Checkbox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,9 @@ class Checkbox extends React.Component {

/**
* The default state of our checkbox component.
* **Warning:** This cannot be used in conjunction with `checked`.
* Decide between using a controlled or uncontrolled input element and remove one of these props.
* More info: https://fb.me/react-controlled-components
*/
defaultChecked: React.PropTypes.bool,

Expand Down Expand Up @@ -129,7 +132,6 @@ class Checkbox extends React.Component {
};

static defaultProps = {
defaultChecked: false,
labelPosition: 'right',
disabled: false,
};
Expand Down Expand Up @@ -232,7 +234,6 @@ class Checkbox extends React.Component {
onSwitch: this.handleCheck,
labelStyle: labelStyle,
onParentShouldUpdate: this.handleStateChange,
defaultSwitched: this.props.defaultChecked,
labelPosition: this.props.labelPosition,
};

Expand Down
2 changes: 1 addition & 1 deletion src/DatePicker/DatePicker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -311,7 +311,7 @@ class DatePicker extends React.Component {
{...other}
style={textFieldStyle}
ref="input"
value={this.state.date ? formatDate(this.state.date) : undefined}
value={this.state.date ? formatDate(this.state.date) : ''}
onFocus={this.handleFocus}
onTouchTap={this.handleTouchTap}
/>
Expand Down
14 changes: 11 additions & 3 deletions src/Toggle/Toggle.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,9 @@ class Toggle extends React.Component {
static propTypes = {
/**
* Determines whether the Toggle is initially turned on.
* **Warning:** This cannot be used in conjunction with `toggled`.
* Decide between using a controlled or uncontrolled input element and remove one of these props.
* More info: https://fb.me/react-controlled-components
*/
defaultToggled: React.PropTypes.bool,

Expand Down Expand Up @@ -182,7 +185,9 @@ class Toggle extends React.Component {

render() {
const {
defaultToggled,
onToggle, // eslint-disable-line no-unused-vars
toggled,
...other,
} = this.props;

Expand All @@ -204,7 +209,7 @@ class Toggle extends React.Component {
);

if (this.state.switched) {
thumbStyles.marginLeft = `-${thumbStyles.width}`;
thumbStyles.marginLeft = 0 - thumbStyles.width;
Copy link

Choose a reason for hiding this comment

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

This is resulting to NaN when thumbStyles width is set to something like '10px'!

Copy link
Member

Choose a reason for hiding this comment

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

Sounds like a fair point. Do you want to submit a PR to fix it?

Copy link
Member

Choose a reason for hiding this comment

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

Actually, my suggestion won't work. It's raising a warning:

Warning: a div tag (owner: Paper) was passed a numeric string value for CSS property marginLeft (value: -20) which will be treated as a unitless number in a future version of React.

You gonna have to use 10 instead of 10px until we change the styling approach with the next branch.

Copy link

@phanindra48 phanindra48 Sep 2, 2016 •
edited
Loading

Choose a reason for hiding this comment

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

Sorry for the late reply. But things will break right because of this inconsistency.
Hope this will help

0 - parseInt(`${thumbStyles.width}`.replace('px', ''), 10)

Copy link

Choose a reason for hiding this comment

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

@oliviertassinari Raised a PR - #5116

}

const toggleElementStyles = Object.assign({},
Expand Down Expand Up @@ -247,11 +252,14 @@ class Toggle extends React.Component {
switched: this.state.switched,
onSwitch: this.handleToggle,
onParentShouldUpdate: this.handleStateChange,
defaultSwitched: this.props.defaultToggled,
labelPosition: this.props.labelPosition,
};

if (this.props.hasOwnProperty('toggled')) enhancedSwitchProps.checked = this.props.toggled;
if (this.props.hasOwnProperty('toggled')) {
enhancedSwitchProps.checked = toggled;
} else if (this.props.hasOwnProperty('defaultToggled')) {
enhancedSwitchProps.defaultChecked = defaultToggled;
}

return (
<EnhancedSwitch
Expand Down
11 changes: 5 additions & 6 deletions src/internal/EnhancedSwitch.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ class EnhancedSwitch extends React.Component {
static propTypes = {
checked: React.PropTypes.bool,
className: React.PropTypes.string,
defaultSwitched: React.PropTypes.bool,
defaultChecked: React.PropTypes.bool,
disableFocusRipple: React.PropTypes.bool,
disableTouchRipple: React.PropTypes.bool,
disabled: React.PropTypes.bool,
Expand Down Expand Up @@ -121,11 +121,11 @@ class EnhancedSwitch extends React.Component {
const hasCheckedProp = nextProps.hasOwnProperty('checked');
const hasToggledProp = nextProps.hasOwnProperty('toggled');
const hasNewDefaultProp =
(nextProps.hasOwnProperty('defaultSwitched') &&
(nextProps.defaultSwitched !== this.props.defaultSwitched));
(nextProps.hasOwnProperty('defaultChecked') &&
(nextProps.defaultChecked !== this.props.defaultChecked));

if (hasCheckedProp || hasToggledProp || hasNewDefaultProp) {
const switched = nextProps.checked || nextProps.toggled || nextProps.defaultSwitched;
const switched = nextProps.checked || nextProps.toggled || nextProps.defaultChecked || false;

this.setState({
switched: switched,
Expand Down Expand Up @@ -258,7 +258,6 @@ class EnhancedSwitch extends React.Component {
labelStyle,
labelPosition,
onSwitch, // eslint-disable-line no-unused-vars
defaultSwitched,
onBlur, // eslint-disable-line no-unused-vars
onFocus, // eslint-disable-line no-unused-vars
onMouseUp, // eslint-disable-line no-unused-vars
Expand All @@ -272,6 +271,7 @@ class EnhancedSwitch extends React.Component {
className,
rippleStyle,
style,
switched, // eslint-disable-line no-unused-vars
switchElement,
thumbStyle,
trackStyle,
Expand Down Expand Up @@ -331,7 +331,6 @@ class EnhancedSwitch extends React.Component {
style={prepareStyles(Object.assign(styles.input, inputStyle))}
name={name}
value={value}
defaultChecked={defaultSwitched}
disabled={disabled}
onBlur={this.handleBlur}
onFocus={this.handleFocus}
Expand Down
4 changes: 2 additions & 2 deletions test/browser/checkbox-spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ describe('Checkbox', () => {
const svgs = TestUtils.scryRenderedDOMComponentsWithTag(render, 'svg');
const checkMarkNode = svgs[1];

expect(input.hasAttribute('checked')).to.be.true;
expect(input.checked).to.be.true;
expect(checkMarkNode.style.opacity).to.equal('1');
expect(checkMarkNode.firstChild.getAttribute('d')).to.equal(CHECKMARK_PATH);
});
Expand All @@ -32,7 +32,7 @@ describe('Checkbox', () => {
const svgs = TestUtils.scryRenderedDOMComponentsWithTag(render, 'svg');
const checkMarkNode = svgs[1];

expect(input.hasAttribute('checked')).to.be.false;
expect(input.checked).to.be.false;
expect(checkMarkNode.style.opacity).to.equal('0');
expect(checkMarkNode.firstChild.getAttribute('d')).to.equal(CHECKMARK_PATH);
});
Expand Down