From 8a24e8b6dcacc82995bae3019ee4ea4db2a88c74 Mon Sep 17 00:00:00 2001 From: Roland Johann Date: Sat, 27 May 2017 12:05:07 -0400 Subject: [PATCH 1/4] implemented optional rendering of arrow including its test --- README.md | 2 +- less/control.less | 5 ++++- less/select.less | 2 ++ src/Select.js | 2 +- test/Select-test.js | 23 +++++++++++++++++++++++ 5 files changed, 31 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 4ab43b05ae..ec49824413 100644 --- a/README.md +++ b/README.md @@ -346,7 +346,7 @@ function onInputKeyDown(event) { | Property | Type | Default | Description | |:---|:---|:---|:---| | addLabelText | string | 'Add "{label}"?' | text to display when `allowCreate` is true | - arrowRenderer | func | undefined | Renders a custom drop-down arrow to be shown in the right-hand side of the select: `arrowRenderer({ onMouseDown, isOpen })` | + arrowRenderer | func | undefined | Renders a custom drop-down arrow to be shown in the right-hand side of the select: `arrowRenderer({ onMouseDown, isOpen })`. Won't render arrow if set to `null` | | autoBlur | bool | false | Blurs the input element after a selection has been made. Handy for lowering the keyboard on mobile devices | | autofocus | bool | undefined | autofocus the component on mount | | autoload | bool | true | whether to auto-load the default async options set | diff --git a/less/control.less b/less/control.less index 33a8dc0128..4e456329d7 100644 --- a/less/control.less +++ b/less/control.less @@ -230,7 +230,6 @@ text-align: center; vertical-align: middle; width: (@select-arrow-width * 5); - padding-right: @select-arrow-width; } .Select-arrow { @@ -247,6 +246,10 @@ border-top-color: @select-arrow-color-hover; } +.Select-control > *:last-child { + padding-right: @select-right-padding; +} + .Select--multi .Select-multi-value-wrapper { display: inline-block; } diff --git a/less/select.less b/less/select.less index abf0eead2f..eed333f7fe 100644 --- a/less/select.less +++ b/less/select.less @@ -63,6 +63,8 @@ @select-loading-color: @select-text-color; @select-loading-color-bg: @select-input-border-color; +@select-right-padding: 5px; + // multi-select item @select-item-font-size: .9em; diff --git a/src/Select.js b/src/Select.js index 63d08bc800..9db08afc56 100644 --- a/src/Select.js +++ b/src/Select.js @@ -1126,7 +1126,7 @@ const Select = createClass({ {removeMessage} {this.renderLoading()} {this.renderClear()} - {this.renderArrow()} + {this.props.arrowRenderer !== null ? this.renderArrow() : null} {isOpen ? this.renderOuter(options, !this.props.multi ? valueArray : null, focusedOption) : null} diff --git a/test/Select-test.js b/test/Select-test.js index 8cc43a8c1a..9569a24a8e 100644 --- a/test/Select-test.js +++ b/test/Select-test.js @@ -3916,4 +3916,27 @@ describe('Select', () => { expect(input, 'to equal', document.activeElement); }); }); + + describe('arrowRenderer', () => { + beforeEach(() => { + options = [ + { value: 'one', label: 'One' }, + { value: 'two', label: 'Two' }, + { value: 'three', label: 'Three' } + ]; + + instance = createControl({ + name: 'form-field-name', + value: 'one', + options: options, + arrowRenderer: null + }); + }); + + it('doesn\'t render arrow if arrowRenderer props is null', () => { + + var arrow = ReactDOM.findDOMNode(instance).querySelectorAll('.Select-arrow-zone')[0]; + + expect(arrow, 'to be', undefined); + }); }); From ebf75980ab2248093ffe130120fed2a201d07d90 Mon Sep 17 00:00:00 2001 From: Roland Johann Date: Sat, 27 May 2017 12:11:48 -0400 Subject: [PATCH 2/4] simplified test --- test/Select-test.js | 9 --------- 1 file changed, 9 deletions(-) diff --git a/test/Select-test.js b/test/Select-test.js index 9569a24a8e..ec5b380fb3 100644 --- a/test/Select-test.js +++ b/test/Select-test.js @@ -3919,16 +3919,7 @@ describe('Select', () => { describe('arrowRenderer', () => { beforeEach(() => { - options = [ - { value: 'one', label: 'One' }, - { value: 'two', label: 'Two' }, - { value: 'three', label: 'Three' } - ]; - instance = createControl({ - name: 'form-field-name', - value: 'one', - options: options, arrowRenderer: null }); }); From 4c9e8d303e23c75cefd237b07212f00f470ffb14 Mon Sep 17 00:00:00 2001 From: Roland Johann Date: Sat, 27 May 2017 12:15:50 -0400 Subject: [PATCH 3/4] fixed missing closing paranthesis --- test/Select-test.js | 1 + 1 file changed, 1 insertion(+) diff --git a/test/Select-test.js b/test/Select-test.js index ec5b380fb3..40470bfde3 100644 --- a/test/Select-test.js +++ b/test/Select-test.js @@ -3930,4 +3930,5 @@ describe('Select', () => { expect(arrow, 'to be', undefined); }); + }); }); From 85a8279a4fc71843214e6bdbafb07348bee77c58 Mon Sep 17 00:00:00 2001 From: Roland Johann Date: Sat, 27 May 2017 12:59:51 -0400 Subject: [PATCH 4/4] control conditional rendering inside render method to be consistent with conditional rendering of loading indicator and clear button --- src/Select.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/Select.js b/src/Select.js index 9db08afc56..85be1266d7 100644 --- a/src/Select.js +++ b/src/Select.js @@ -921,6 +921,10 @@ const Select = createClass({ }, renderArrow () { + if (this.props.arrowRenderer === null) { + return null; + } + const onMouseDown = this.handleMouseDownOnArrow; const isOpen = this.state.isOpen; const arrow = this.props.arrowRenderer({ onMouseDown, isOpen }); @@ -1126,7 +1130,7 @@ const Select = createClass({ {removeMessage} {this.renderLoading()} {this.renderClear()} - {this.props.arrowRenderer !== null ? this.renderArrow() : null} + {this.renderArrow()} {isOpen ? this.renderOuter(options, !this.props.multi ? valueArray : null, focusedOption) : null}