From 8b3ed0711715f8f1091a86c4fbb83aa004b3c061 Mon Sep 17 00:00:00 2001 From: "h.van.seeters" Date: Fri, 11 Oct 2019 08:58:38 -0700 Subject: [PATCH 1/9] initial cleanup --- src/InputGroup/InputGroup.js | 215 ++++++++---------------------- src/InputGroup/InputGroupAddon.js | 129 ++++++++++++++++++ 2 files changed, 188 insertions(+), 156 deletions(-) create mode 100644 src/InputGroup/InputGroupAddon.js diff --git a/src/InputGroup/InputGroup.js b/src/InputGroup/InputGroup.js index 1bb9375c0..cd8f6d56c 100644 --- a/src/InputGroup/InputGroup.js +++ b/src/InputGroup/InputGroup.js @@ -1,24 +1,22 @@ -import Button from '../Button/Button'; import classnames from 'classnames'; -import CustomPropTypes from '../utils/CustomPropTypes/CustomPropTypes'; import FormInput from '../Forms/FormInput'; -import Icon from '../Icon/Icon'; +import InputGroupAddon from './InputGroupAddon'; import PropTypes from 'prop-types'; import withStyles from '../utils/WithStyles/WithStyles'; import { INPUT_GROUP_ADDON_POSITIONS, INPUT_GROUP_TYPES } from '../utils/constants'; import React, { Component } from 'react'; - +/*eslint-disable*/ class InputGroup extends Component { constructor(props) { super(props); this.state = { - value: this.props.inputValue, - searchValue: this.props.inputValue + value: this.props.inputValue }; } handleUp = e => { + console.log('handle up!'); e.preventDefault(); this.setState({ value: parseInt(this.state.value, 10) + 1 @@ -32,20 +30,6 @@ class InputGroup extends Component { }); }; - handleClear = e => { - e.preventDefault(); - this.setState({ - searchValue: '' - }); - }; - - handleChange = e => { - e.preventDefault(); - this.setState({ - searchValue: e.target.value - }); - }; - handleTextChange = e => { e.preventDefault(); this.setState({ @@ -54,7 +38,7 @@ class InputGroup extends Component { }; render() { - const { + let { actions, addonClassNames, addonPos, @@ -71,12 +55,17 @@ class InputGroup extends Component { inputPlaceholder, inputProps, inputValue, - localizedText, - numberDownButtonProps, - numberUpButtonProps, + numberDownCallback, + numberUpCallback, ...props } = this.props; + children = React.Children.map(children, (child) => { + return React.cloneElement(child, { + compact: compact + }); + }); + const inputGroupClasses = classnames( className, 'fd-input-group' @@ -90,121 +79,51 @@ class InputGroup extends Component { const inputClasses = classnames( inputClassName, - 'fd-input-group__input' + 'fd-input-group__input', + [{ 'fd-input--no-number-spinner': inputType === 'number' }] ); - switch (inputType) { - case 'number': + const input = ( + + ); - const inputNumberClasses = classnames( - inputClasses, - 'fd-input--no-number-spinner' - ); + const inputGroupAddon = ( + + {children} + + ); - return ( -
- - -
- ); - case 'text': - default: { - if (addonPos === 'before') { - return ( -
- {actions ? ( - - {children} - - ) : ( - - {glyph ? ( - - ) : ( - addon - )} - - )} - -
- ); - } else { - return ( -
- - {actions ? ( - - {children} - - ) : ( - - {glyph ? ( - - ) : ( - addon - )} - - )} -
- ); - } - } + if (addonPos === 'before') { + return ( +
+ { inputGroupAddon } + { input } +
+ ); + } else { + return ( +
+ { input } + {inputGroupAddon} +
+ ); } } } @@ -229,24 +148,15 @@ InputGroup.propTypes = { inputProps: PropTypes.object, inputType: PropTypes.oneOf(INPUT_GROUP_TYPES), inputValue: PropTypes.any, - localizedText: CustomPropTypes.i18n({ - clear: PropTypes.string, - down: PropTypes.string, - up: PropTypes.string - }), - numberDownButtonProps: PropTypes.object, - numberUpButtonProps: PropTypes.object + numberDownCallback: PropTypes.func, + numberUpCallback: PropTypes.func }; InputGroup.defaultProps = { addonPos: 'after', inputType: 'text', - inputValue: '', - localizedText: { - clear: 'Clear', - down: 'Step down', - up: 'Step up' - } + inputValue: '' + }; InputGroup.propDescriptions = { @@ -259,14 +169,7 @@ InputGroup.propDescriptions = { inputName: 'Value for the `name` attribute on the `` element.', inputPlaceholder: 'Value for the `placeholder` attribute on the `` element.', inputType: 'Value for the `type` attribute on the `` element.', - inputValue: 'Value for the `value` attribute on the `` element.', - localizedTextShape: { - clear: 'Value for aria-label on the clear @@ -259,7 +300,11 @@ exports[` create input group items 13`] = ` className="fd-input-group" > create input group items 15`] = ` > $ @@ -327,6 +375,9 @@ exports[` create input group items 16`] = ` /> € From 3e9dfd31029adaba603ccb42a16bf1df830a9847 Mon Sep 17 00:00:00 2001 From: "h.van.seeters" Date: Fri, 11 Oct 2019 09:41:58 -0700 Subject: [PATCH 3/9] created tests for inputgroupaddon --- src/InputGroup/InputGroup.test.js | 16 ------- src/InputGroup/InputGroupAddon.test.js | 43 +++++++++++++++++++ .../InputGroupAddon.test.js.snap | 9 ++++ 3 files changed, 52 insertions(+), 16 deletions(-) create mode 100644 src/InputGroup/InputGroupAddon.test.js create mode 100644 src/InputGroup/__snapshots__/InputGroupAddon.test.js.snap diff --git a/src/InputGroup/InputGroup.test.js b/src/InputGroup/InputGroup.test.js index 7118e76f0..d6946cbb0 100644 --- a/src/InputGroup/InputGroup.test.js +++ b/src/InputGroup/InputGroup.test.js @@ -295,21 +295,5 @@ describe('', () => { element.find('input').getDOMNode().attributes['data-sample'].value ).toBe('Sample'); }); - - test('should allow props to be spread to the InputGroup component for type number\'s up button element', () => { - const element = mount(); - - expect( - element.find('button.sap-icon--slim-arrow-up').getDOMNode().attributes['data-sample'].value - ).toBe('Sample'); - }); - - test('should allow props to be spread to the InputGroup component for type number\'s down button element', () => { - const element = mount(); - - expect( - element.find('button.sap-icon--slim-arrow-down').getDOMNode().attributes['data-sample'].value - ).toBe('Sample'); - }); }); }); diff --git a/src/InputGroup/InputGroupAddon.test.js b/src/InputGroup/InputGroupAddon.test.js new file mode 100644 index 000000000..ef11008e4 --- /dev/null +++ b/src/InputGroup/InputGroupAddon.test.js @@ -0,0 +1,43 @@ +import InputGroupAddon from './InputGroupAddon'; +import { mount } from 'enzyme'; +import React from 'react'; +import renderer from 'react-test-renderer'; + + +describe('', () => { + const inputGroupAddon = ( + + ); + + test('create list group item actions', () => { + let component = renderer.create(inputGroupAddon); + let tree = component.toJSON(); + expect(tree).toMatchSnapshot(); + }); + + describe('Prop spreading', () => { + test('should allow props to be spread to the ListGroupItemActions component', () => { + const element = mount(); + + expect( + element.getDOMNode().attributes['data-sample'].value + ).toBe('Sample'); + }); + }); + + test('should allow props to be spread to the InputGroup component for type number\'s up button element', () => { + const element = mount(); + + expect( + element.find('button.sap-icon--slim-arrow-up').getDOMNode().attributes['data-sample'].value + ).toBe('Sample'); + }); + + test('should allow props to be spread to the InputGroup component for type number\'s down button element', () => { + const element = mount(); + + expect( + element.find('button.sap-icon--slim-arrow-down').getDOMNode().attributes['data-sample'].value + ).toBe('Sample'); + }); +}); diff --git a/src/InputGroup/__snapshots__/InputGroupAddon.test.js.snap b/src/InputGroup/__snapshots__/InputGroupAddon.test.js.snap new file mode 100644 index 000000000..e2077f8d2 --- /dev/null +++ b/src/InputGroup/__snapshots__/InputGroupAddon.test.js.snap @@ -0,0 +1,9 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` create list group item actions 1`] = ` + + $ + +`; From bbef346bddae167d4a25820e0c4e1f44f900434b Mon Sep 17 00:00:00 2001 From: "h.van.seeters" Date: Fri, 11 Oct 2019 09:51:24 -0700 Subject: [PATCH 4/9] remove eslint-disable --- src/InputGroup/InputGroup.js | 3 +-- src/InputGroup/InputGroupAddon.js | 6 +----- 2 files changed, 2 insertions(+), 7 deletions(-) diff --git a/src/InputGroup/InputGroup.js b/src/InputGroup/InputGroup.js index cd8f6d56c..e2b794410 100644 --- a/src/InputGroup/InputGroup.js +++ b/src/InputGroup/InputGroup.js @@ -5,7 +5,7 @@ import PropTypes from 'prop-types'; import withStyles from '../utils/WithStyles/WithStyles'; import { INPUT_GROUP_ADDON_POSITIONS, INPUT_GROUP_TYPES } from '../utils/constants'; import React, { Component } from 'react'; -/*eslint-disable*/ + class InputGroup extends Component { constructor(props) { super(props); @@ -16,7 +16,6 @@ class InputGroup extends Component { } handleUp = e => { - console.log('handle up!'); e.preventDefault(); this.setState({ value: parseInt(this.state.value, 10) + 1 diff --git a/src/InputGroup/InputGroupAddon.js b/src/InputGroup/InputGroupAddon.js index 464bcc8e5..37e094531 100644 --- a/src/InputGroup/InputGroupAddon.js +++ b/src/InputGroup/InputGroupAddon.js @@ -5,16 +5,12 @@ import Icon from '../Icon/Icon'; import PropTypes from 'prop-types'; import withStyles from '../utils/WithStyles/WithStyles'; import React, { Component } from 'react'; -/*eslint-disable*/ + class InputGroupAddon extends Component { constructor(props) { super(props); } - handleDown = () => { - console.log("I made it to handle down"); - } - render() { let { addon, From d05d5c701daf733e39b1f8592ce1b48aaec22032 Mon Sep 17 00:00:00 2001 From: "h.van.seeters" Date: Fri, 11 Oct 2019 10:13:26 -0700 Subject: [PATCH 5/9] addon class to functional component --- src/InputGroup/InputGroupAddon.js | 125 ++++++++++++++---------------- 1 file changed, 59 insertions(+), 66 deletions(-) diff --git a/src/InputGroup/InputGroupAddon.js b/src/InputGroup/InputGroupAddon.js index 37e094531..32af98507 100644 --- a/src/InputGroup/InputGroupAddon.js +++ b/src/InputGroup/InputGroupAddon.js @@ -3,81 +3,74 @@ import classnames from 'classnames'; import CustomPropTypes from '../utils/CustomPropTypes/CustomPropTypes'; import Icon from '../Icon/Icon'; import PropTypes from 'prop-types'; +import React from 'react'; import withStyles from '../utils/WithStyles/WithStyles'; -import React, { Component } from 'react'; -class InputGroupAddon extends Component { - constructor(props) { - super(props); +const InputGroupAddon = ({ + addon, + addonClassNames, + children, + className, + disableStyles, + localizedText, + numberDownButtonProps, + numberUpButtonProps, + onClick, + ...props +}) => { + + let returnObject = addon; + + if (props.actions) { + returnObject = children; + } else if (props.glyph) { + returnObject = ( + + ); } - render() { - let { - addon, - addonClassNames, - children, - className, - disableStyles, - localizedText, - numberDownButtonProps, - numberUpButtonProps, - onClick, - ...props - } = this.props; + const addonClasses = classnames( + addonClassNames, + 'fd-input-group__addon', + [{ 'fd-input-group__addon--button': !!props.actions || props.inputType === 'number' }], + [{ 'fd-input-group__addon--button--compact': props.compact }], + ); - let returnObject = addon; - if (props.actions) { - returnObject = children; - } else if (props.glyph) { - returnObject = ( - + + + )) + .add('compact', () => ( + )); From ee9c74b589d0e7712ca0208868bf8b8d5d75016b Mon Sep 17 00:00:00 2001 From: "h.van.seeters" Date: Fri, 11 Oct 2019 14:36:47 -0700 Subject: [PATCH 9/9] edit spacing --- src/InputGroup/InputGroup.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/InputGroup/InputGroup.js b/src/InputGroup/InputGroup.js index 7c4ee9975..4ac6267a5 100644 --- a/src/InputGroup/InputGroup.js +++ b/src/InputGroup/InputGroup.js @@ -111,15 +111,15 @@ class InputGroup extends Component { return (
- { inputGroupAddon } - { input } + {inputGroupAddon} + {input}
); } else { return (
- { input } + {input} {inputGroupAddon}
);