From 90c3e08926b93de13f242a5f42bff5d4419942cf Mon Sep 17 00:00:00 2001 From: Umidbek Karimov Date: Sun, 19 Jun 2016 23:08:21 +0400 Subject: [PATCH 1/7] #2555 - Implement helper text/error text as a separate component --- src/TextField/TextField.js | 23 +++---- src/TextField/TextFieldHelper.js | 79 +++++++++++++++++++++ src/TextField/TextFieldHelper.spec.js | 98 +++++++++++++++++++++++++++ 3 files changed, 188 insertions(+), 12 deletions(-) create mode 100644 src/TextField/TextFieldHelper.js create mode 100644 src/TextField/TextFieldHelper.spec.js diff --git a/src/TextField/TextField.js b/src/TextField/TextField.js index a5b32e6cb52a12..7263b7dfdca3b5 100644 --- a/src/TextField/TextField.js +++ b/src/TextField/TextField.js @@ -9,6 +9,7 @@ import EnhancedTextarea from './EnhancedTextarea'; import TextFieldHint from './TextFieldHint'; import TextFieldLabel from './TextFieldLabel'; import TextFieldUnderline from './TextFieldUnderline'; +import TextFieldHelper from './TextFieldHelper'; import warning from 'warning'; const getStyles = (props, context, state) => { @@ -38,12 +39,7 @@ const getStyles = (props, context, state) => { transition: transitions.easeOut('200ms', 'height'), }, error: { - position: 'relative', - bottom: 2, - fontSize: 12, - lineHeight: '12px', color: errorColor, - transition: transitions.easeOut(), }, floatingLabel: { color: hintColor, @@ -87,10 +83,6 @@ const getStyles = (props, context, state) => { if (!props.multiLine) { styles.input.marginTop = 14; } - - if (state.errorText) { - styles.error.bottom = !props.multiLine ? styles.error.fontSize + 3 : 3; - } } if (state.errorText) { @@ -410,9 +402,16 @@ class TextField extends Component { const styles = getStyles(this.props, this.context, this.state); const inputId = id || this.uniqueId; - const errorTextElement = this.state.errorText && ( -
{this.state.errorText}
- ); + const errorTextElement = this.state.errorText ? ( + + ) : null; const floatingLabelTextElement = floatingLabelText && ( { + const { + muiTheme: { + textField: { + hintColor, + errorColor, + }, + }, + + errorText, + adjustForMultiLine, + adjustForFloatingLabel, + } = props; + + const styles = { + root: { + position: 'relative', + bottom: 2, + fontSize: 12, + lineHeight: '12px', + color: errorText ? errorColor : hintColor, + transition: transitions.easeOut(), + }, + }; + + if (adjustForFloatingLabel) { + styles.root.bottom = adjustForMultiLine ? 3 : styles.root.fontSize + 3; + } + + return styles; +}; + +const TextFieldHelperText = (props) => { + const { + muiTheme: { + prepareStyles, + }, + style, + helperText, + errorText, + } = props; + + const styles = getStyles(props); + + return ( +
+ {errorText || helperText} +
+ ); +}; + +TextFieldHelperText.propTypes = { + /** @ignore */ + adjustForFloatingLabel: PropTypes.bool, + /** @ignore */ + adjustForMultiLine: PropTypes.bool, + /** + * The error text that will override helper text. + */ + errorText: PropTypes.node, + /** + * The helper text displayed. + */ + helperText: PropTypes.node, + /** + * @ignore + * The material-ui theme applied to this component. + */ + muiTheme: PropTypes.object.isRequired, + /** + * Override the inline-styles of the root element. + */ + style: PropTypes.object, +}; + +export default TextFieldHelperText; diff --git a/src/TextField/TextFieldHelper.spec.js b/src/TextField/TextFieldHelper.spec.js new file mode 100644 index 00000000000000..b62b5d0ec81fda --- /dev/null +++ b/src/TextField/TextFieldHelper.spec.js @@ -0,0 +1,98 @@ +/* eslint-env mocha */ +import React from 'react'; +import {shallow} from 'enzyme'; +import {expect} from 'chai'; +import TextFieldHelper from './TextFieldHelper'; +import getMuiTheme from '../styles/getMuiTheme'; + +describe('', () => { + it('should prefer errorText prop over helperText', () => { + const themeDefaults = { + textField: { + hintColor: 'grey', + errorColor: 'red', + }, + }; + + const wrapper = shallow( + + ); + + expect(wrapper.type()).to.equal('div'); + + expect(wrapper.prop('style').color).to.equal('grey'); + expect(wrapper.text()).to.equal('Foo'); + + wrapper.setProps({errorText: 'Bar'}); + + expect(wrapper.prop('style').color).to.equal('red'); + expect(wrapper.text()).to.equal('Bar'); + + wrapper.setProps({errorText: false}); + + expect(wrapper.prop('style').color).to.equal('grey'); + expect(wrapper.text()).to.equal('Foo'); + + wrapper.setProps({errorText: null}); + + expect(wrapper.prop('style').color).to.equal('grey'); + expect(wrapper.text()).to.equal('Foo'); + }); + + it('should override default styles', () => { + const wrapper = shallow( + + ); + + expect(wrapper.type()).to.equal('div'); + + expect(wrapper.prop('style').color).to.equal('blue'); + }); + + it('should adjust styles for floating label', () => { + const wrapper = shallow( + + ); + + expect(wrapper.type()).to.equal('div'); + + expect(wrapper.prop('style').bottom).to.equal(2); + + wrapper.setProps({adjustForFloatingLabel: true}); + + expect(wrapper.prop('style').bottom).to.equal(15); + + wrapper.setProps({adjustForFloatingLabel: false}); + + expect(wrapper.prop('style').bottom).to.equal(2); + }); + + it('should adjust styles for multi line with floating label', () => { + const wrapper = shallow( + + ); + + expect(wrapper.type()).to.equal('div'); + + expect(wrapper.prop('style').bottom).to.equal(15); + + wrapper.setProps({adjustForMultiLine: true}); + + expect(wrapper.prop('style').bottom).to.equal(3); + + wrapper.setProps({adjustForMultiLine: false}); + + expect(wrapper.prop('style').bottom).to.equal(15); + }); +}); From ec4ad8c0a124ef7a882e18cb6488ffc0906999c4 Mon Sep 17 00:00:00 2001 From: Umidbek Karimov Date: Mon, 20 Jun 2016 10:09:25 +0400 Subject: [PATCH 2/7] Pass `...restProps` to `TextFieldHelper` root element --- src/TextField/TextFieldHelper.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/TextField/TextFieldHelper.js b/src/TextField/TextFieldHelper.js index 44d08d71735ad8..a722c8db528183 100644 --- a/src/TextField/TextFieldHelper.js +++ b/src/TextField/TextFieldHelper.js @@ -41,12 +41,13 @@ const TextFieldHelperText = (props) => { style, helperText, errorText, + ...restProps, } = props; const styles = getStyles(props); return ( -
+
{errorText || helperText}
); From ca1654328f616c0d5192b0b5784bfd0005aafe07 Mon Sep 17 00:00:00 2001 From: Umidbek Karimov Date: Thu, 30 Jun 2016 18:49:20 +0400 Subject: [PATCH 3/7] fix #3980 --- src/Table/TableBody.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/Table/TableBody.js b/src/Table/TableBody.js index 5c2102bdad1634..76c96b4fe71cc0 100644 --- a/src/Table/TableBody.js +++ b/src/Table/TableBody.js @@ -127,8 +127,7 @@ class TableBody extends Component { componentWillReceiveProps(nextProps) { if (this.props.allRowsSelected && !nextProps.allRowsSelected) { this.setState({ - selectedRows: this.state.selectedRows.length > 0 ? - [this.state.selectedRows[this.state.selectedRows.length - 1]] : [], + selectedRows: [], }); // TODO: should else be conditional, not run any time props other than allRowsSelected change? } else { From 15f5eed090c97efdd4f9992259db0975ebd51a7c Mon Sep 17 00:00:00 2001 From: Umidbek Karimov Date: Sun, 10 Jul 2016 13:07:04 +0400 Subject: [PATCH 4/7] Fix for react 15.0.2 --- src/TextField/TextFieldHelper.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/TextField/TextFieldHelper.js b/src/TextField/TextFieldHelper.js index a722c8db528183..df3341e12f982c 100644 --- a/src/TextField/TextFieldHelper.js +++ b/src/TextField/TextFieldHelper.js @@ -41,6 +41,10 @@ const TextFieldHelperText = (props) => { style, helperText, errorText, + + adjustForMultiLine, // eslint-disable-line no-unused-vars + adjustForFloatingLabel, // eslint-disable-line no-unused-vars + ...restProps, } = props; From ca26432bbb8b38d9e187f20df7ec5f0171f0ce32 Mon Sep 17 00:00:00 2001 From: Umidbek Karimov Date: Sun, 10 Jul 2016 13:15:24 +0400 Subject: [PATCH 5/7] Revert "Pass `...restProps` to `TextFieldHelper` root element", fix for react 15.0.2 --- src/TextField/TextFieldHelper.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/TextField/TextFieldHelper.js b/src/TextField/TextFieldHelper.js index df3341e12f982c..a6418186678039 100644 --- a/src/TextField/TextFieldHelper.js +++ b/src/TextField/TextFieldHelper.js @@ -41,10 +41,8 @@ const TextFieldHelperText = (props) => { style, helperText, errorText, - adjustForMultiLine, // eslint-disable-line no-unused-vars adjustForFloatingLabel, // eslint-disable-line no-unused-vars - ...restProps, } = props; From e19c4dd31a0db8e74222abcff4fc2f026bb122c9 Mon Sep 17 00:00:00 2001 From: Umidbek Karimov Date: Sun, 10 Jul 2016 13:18:02 +0400 Subject: [PATCH 6/7] Revert "Pass `...restProps` to `TextFieldHelper` root element" This reverts commit ec4ad8c0a124ef7a882e18cb6488ffc0906999c4. # Conflicts: # src/TextField/TextFieldHelper.js --- src/TextField/TextFieldHelper.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/TextField/TextFieldHelper.js b/src/TextField/TextFieldHelper.js index a6418186678039..5e7aec2d991f8d 100644 --- a/src/TextField/TextFieldHelper.js +++ b/src/TextField/TextFieldHelper.js @@ -43,7 +43,7 @@ const TextFieldHelperText = (props) => { errorText, adjustForMultiLine, // eslint-disable-line no-unused-vars adjustForFloatingLabel, // eslint-disable-line no-unused-vars - ...restProps, + ...restProps } = props; const styles = getStyles(props); From 15a98e1a592cd68e3cf723f10c326e005e24da69 Mon Sep 17 00:00:00 2001 From: Umidbek Karimov Date: Sun, 10 Jul 2016 13:18:36 +0400 Subject: [PATCH 7/7] fix eslint error --- src/TextField/TextFieldHelper.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/TextField/TextFieldHelper.js b/src/TextField/TextFieldHelper.js index 5e7aec2d991f8d..a6418186678039 100644 --- a/src/TextField/TextFieldHelper.js +++ b/src/TextField/TextFieldHelper.js @@ -43,7 +43,7 @@ const TextFieldHelperText = (props) => { errorText, adjustForMultiLine, // eslint-disable-line no-unused-vars adjustForFloatingLabel, // eslint-disable-line no-unused-vars - ...restProps + ...restProps, } = props; const styles = getStyles(props);