Skip to content

Commit

Permalink
Merge pull request JedWatson#1478 from conorhastings/clear-renderer
Browse files Browse the repository at this point in the history
allow rendering a custom clear component
  • Loading branch information
JedWatson authored Jan 31, 2017
2 parents 2ef6753 + bbc585d commit 5c2f71f
Show file tree
Hide file tree
Showing 4 changed files with 34 additions and 1 deletion.
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -350,6 +350,7 @@ function onInputKeyDown(event) {
className | string | undefined | className for the outer element
clearable | bool | true | should it be possible to reset value
clearAllText | string | 'Clear all' | title for the "clear" control when `multi` is true
clearRenderer | func | undefined | Renders a custom clear to be shown in the right-hand side of the select when clearable true: `clearRenderer()`
clearValueText | string | 'Clear value' | title for the "clear" control
resetValue | any | null | value to use when you clear the control
deleteRemoves | bool | true | whether pressing delete key removes the last item when there is no input value
Expand Down
7 changes: 6 additions & 1 deletion src/Select.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import classNames from 'classnames';
import defaultArrowRenderer from './utils/defaultArrowRenderer';
import defaultFilterOptions from './utils/defaultFilterOptions';
import defaultMenuRenderer from './utils/defaultMenuRenderer';
import defaultClearRenderer from './utils/defaultClearRenderer';

import Async from './Async';
import AsyncCreatable from './AsyncCreatable';
Expand Down Expand Up @@ -55,6 +56,7 @@ const Select = React.createClass({
backspaceToRemoveMessage: React.PropTypes.string, // Message to use for screenreaders to press backspace to remove the current item - {label} is replaced with the item label
className: React.PropTypes.string, // className for the outer element
clearAllText: stringOrNode, // title for the "clear" control when multi: true
clearRenderer: React.PropTypes.func, // create clearable x element
clearValueText: stringOrNode, // title for the "clear" control
clearable: React.PropTypes.bool, // should it be possible to reset value
deleteRemoves: React.PropTypes.bool, // whether backspace removes an item if there is no text input
Expand Down Expand Up @@ -125,6 +127,7 @@ const Select = React.createClass({
backspaceToRemoveMessage: 'Press backspace to remove {label}',
clearable: true,
clearAllText: 'Clear all',
clearRenderer: defaultClearRenderer,
clearValueText: 'Clear value',
deleteRemoves: true,
delimiter: ',',
Expand Down Expand Up @@ -890,6 +893,8 @@ const Select = React.createClass({

renderClear () {
if (!this.props.clearable || (!this.props.value || this.props.value === 0) || (this.props.multi && !this.props.value.length) || this.props.disabled || this.props.isLoading) return;
const clear = this.props.clearRenderer();

return (
<span className="Select-clear-zone" title={this.props.multi ? this.props.clearAllText : this.props.clearValueText}
aria-label={this.props.multi ? this.props.clearAllText : this.props.clearValueText}
Expand All @@ -898,7 +903,7 @@ const Select = React.createClass({
onTouchMove={this.handleTouchMove}
onTouchEnd={this.handleTouchEndClearValue}
>
<span className="Select-clear" dangerouslySetInnerHTML={{ __html: '&times;' }} />
{clear}
</span>
);
},
Expand Down
10 changes: 10 additions & 0 deletions src/utils/defaultClearRenderer.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import React from 'react';

export default function clearRenderer () {
return (
<span
className="Select-clear"
dangerouslySetInnerHTML={{ __html: '&times;' }}
/>
);
};
17 changes: 17 additions & 0 deletions test/Select-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -2255,6 +2255,23 @@ describe('Select', () => {
});
});

describe('clearRenderer', () => {

beforeEach(() => {
instance = createControl({
clearable: true,
value: 'three',
clearRenderer: () => <span className="Select-custom-clear">O</span>,
options: defaultOptions
});
});

it('renders a custom clear', () => {

expect(instance, 'to contain', <span className="Select-custom-clear">O</span>);
});
});

describe('clearValueText', () => {

beforeEach(() => {
Expand Down

0 comments on commit 5c2f71f

Please sign in to comment.