From 9ffa55fcfd58159104ab245b9f441a48971e69c0 Mon Sep 17 00:00:00 2001 From: JuanMa Date: Tue, 10 Jul 2018 16:50:20 +0200 Subject: [PATCH 1/2] feat(Tooltip): allow additional arrow classNames (#1119) Fixes #1117 --- docs/lib/Components/TooltipsPage.js | 2 ++ src/PopperContent.js | 7 ++++++- src/Tooltip.js | 2 ++ 3 files changed, 10 insertions(+), 1 deletion(-) diff --git a/docs/lib/Components/TooltipsPage.js b/docs/lib/Components/TooltipsPage.js index 3549dd5ff..47d86a4d8 100644 --- a/docs/lib/Components/TooltipsPage.js +++ b/docs/lib/Components/TooltipsPage.js @@ -51,6 +51,8 @@ export default class TooltipsPage extends React.Component { className: PropTypes.string, // Apply class to the inner-tooltip innerClassName: PropTypes.string, + // Apply class to the arrow-tooltip ('arrow' by default) + arrowClassName: PropTypes.string, // optionally hide tooltip when hovering over tooltip content - default true autohide: PropTypes.bool, // convenience attachments for popover diff --git a/src/PopperContent.js b/src/PopperContent.js index 182c17e65..5e34a76c4 100644 --- a/src/PopperContent.js +++ b/src/PopperContent.js @@ -10,6 +10,7 @@ const propTypes = { className: PropTypes.string, placement: PropTypes.string, placementPrefix: PropTypes.string, + arrowClassName: PropTypes.string, hideArrow: PropTypes.bool, tag: PropTypes.string, isOpen: PropTypes.bool.isRequired, @@ -137,6 +138,7 @@ class PopperContent extends React.Component { offset, fallbackPlacement, placementPrefix, + arrowClassName: _arrowClassName, hideArrow, className, tag, @@ -144,7 +146,10 @@ class PopperContent extends React.Component { modifiers, ...attrs } = this.props; - const arrowClassName = mapToCssModules('arrow', cssModule); + const arrowClassName = mapToCssModules(classNames( + 'arrow', + _arrowClassName + ), cssModule); const placement = (this.state.placement || attrs.placement).split('-')[0]; const popperClassName = mapToCssModules(classNames( className, diff --git a/src/Tooltip.js b/src/Tooltip.js index c0fda2213..f5095456e 100644 --- a/src/Tooltip.js +++ b/src/Tooltip.js @@ -21,6 +21,7 @@ const propTypes = { hideArrow: PropTypes.bool, className: PropTypes.string, innerClassName: PropTypes.string, + arrowClassName: PropTypes.string, cssModule: PropTypes.object, toggle: PropTypes.func, autohide: PropTypes.bool, @@ -229,6 +230,7 @@ class Tooltip extends React.Component { hideArrow={this.props.hideArrow} placement={this.props.placement} placementPrefix={this.props.placementPrefix} + arrowClassName={this.props.arrowClassName} container={this.props.container} modifiers={this.props.modifiers} offset={this.props.offset} From 418fdf8f536f87aef28ef74586bfb1dae6c52bd9 Mon Sep 17 00:00:00 2001 From: Hollis Wu Date: Tue, 10 Jul 2018 22:51:12 +0800 Subject: [PATCH 2/2] feat(CustomInput) : add innerRef to CustomInput (#1123) Ref: #1082 --- docs/lib/Components/FormPage.js | 8 ++++++- src/CustomInput.js | 15 +++++++++---- src/__tests__/CustomInput.spec.js | 35 +++++++++++++++++++++++++++++++ 3 files changed, 53 insertions(+), 5 deletions(-) diff --git a/docs/lib/Components/FormPage.js b/docs/lib/Components/FormPage.js index de55a593a..b4b5ea51d 100644 --- a/docs/lib/Components/FormPage.js +++ b/docs/lib/Components/FormPage.js @@ -79,7 +79,13 @@ export default class FormPage extends React.Component { invalid: PropTypes.bool, // applied the is-valid class when true, does nothing when false bsSize: PropTypes.string, cssModule: PropTypes.object, - children: PropTypes.oneOfType([PropTypes.node, PropTypes.array, PropTypes.func]) // for type="select" + children: PropTypes.oneOfType([PropTypes.node, PropTypes.array, PropTypes.func]), // for type="select" + // innerRef would be referenced to select node or input DOM node, depends on type property + innerRef: PropTypes.oneOfType([ + PropTypes.object, + PropTypes.string, + PropTypes.func, + ]) };`} diff --git a/src/CustomInput.js b/src/CustomInput.js index 23d075d33..6ec6a9a1b 100644 --- a/src/CustomInput.js +++ b/src/CustomInput.js @@ -13,7 +13,12 @@ const propTypes = { invalid: PropTypes.bool, bsSize: PropTypes.string, cssModule: PropTypes.object, - children: PropTypes.oneOfType([PropTypes.node, PropTypes.array, PropTypes.func]) + children: PropTypes.oneOfType([PropTypes.node, PropTypes.array, PropTypes.func]), + innerRef: PropTypes.oneOfType([ + PropTypes.object, + PropTypes.string, + PropTypes.func, + ]) }; function CustomInput(props) { @@ -26,6 +31,7 @@ function CustomInput(props) { cssModule, children, bsSize, + innerRef, ...attributes } = props; @@ -43,20 +49,20 @@ function CustomInput(props) { ), cssModule); if (type === 'select') { - return ; + return ; } if (type === 'file') { return (
- +
); } if (type !== 'checkbox' && type !== 'radio') { - return ; + return ; } const wrapperClasses = classNames( @@ -71,6 +77,7 @@ function CustomInput(props) {
diff --git a/src/__tests__/CustomInput.spec.js b/src/__tests__/CustomInput.spec.js index 52ed0bb87..9a05a2212 100644 --- a/src/__tests__/CustomInput.spec.js +++ b/src/__tests__/CustomInput.spec.js @@ -44,6 +44,13 @@ describe('Custom Inputs', () => { const checkbox = mount(); expect(checkbox.find('input').prop('data-testprop')).toBe('yo'); }); + + it('should reference innerRef to the input node', () => { + const ref = React.createRef(); + mount(); + expect(ref.current).not.toBeNull(); + expect(ref.current).toBeInstanceOf(HTMLInputElement); + }); }); describe('CustomRadio', () => { @@ -87,6 +94,13 @@ describe('Custom Inputs', () => { const radio = mount(); expect(radio.find('input').prop('data-testprop')).toBe('yo'); }); + + it('should reference innerRef to the input node', () => { + const ref = React.createRef(); + mount(); + expect(ref.current).not.toBeNull(); + expect(ref.current).toBeInstanceOf(HTMLInputElement); + }); }); describe('CustomSelect', () => { @@ -119,6 +133,13 @@ describe('Custom Inputs', () => { const select = mount(); expect(select.find('select').prop('data-testprop')).toBe('yo'); }); + + it('should reference innerRef to the select node', () => { + const ref = React.createRef(); + mount(); + expect(ref.current).not.toBeNull(); + expect(ref.current).toBeInstanceOf(HTMLSelectElement); + }); }); describe('CustomFile', () => { @@ -162,6 +183,13 @@ describe('Custom Inputs', () => { const file = mount(); expect(file.find('input').prop('data-testprop')).toBe('yo'); }); + + it('should reference innerRef to the input node', () => { + const ref = React.createRef(); + mount(); + expect(ref.current).not.toBeNull(); + expect(ref.current).toBeInstanceOf(HTMLInputElement); + }); }); describe('CustomRange', () => { @@ -189,5 +217,12 @@ describe('Custom Inputs', () => { const range = mount(); expect(range.find('input').prop('data-testprop')).toBe('yo'); }); + + it('should reference innerRef to the input node', () => { + const ref = React.createRef(); + mount(); + expect(ref.current).not.toBeNull(); + expect(ref.current).toBeInstanceOf(HTMLInputElement); + }); }); });