Skip to content

Adding createable prop to allow creating of options which were not found #101

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Gregoor wants to merge 3 commits into from
Closed

Adding createable prop to allow creating of options which were not found #101

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f8fcac8
Adding createable prop to allow creating of options which were not found
Gregoor Mar 22, 2015
21dc9ec
Merge remote-tracking branch 'upstream/master'
Gregoor Mar 25, 2015
d7adc5a
Update
Gregoor May 10, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions examples/dist/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,7 @@ var RemoteSelectField = React.createClass({
null,
this.props.label
),
React.createElement(Select, { asyncOptions: this.loadOptions, className: 'remote-example' })
React.createElement(Select, { asyncOptions: this.loadOptions, className: 'remote-example', createable: true })
);
}
});
Expand All @@ -147,7 +147,7 @@ var MultiSelectField = React.createClass({
null,
this.props.label
),
React.createElement(Select, { multi: true, placeholder: 'Select your favourite(s)', options: ops, onChange: logChange })
React.createElement(Select, { multi: true, placeholder: 'Select your favourite(s)', options: ops, onChange: logChange, createable: true })
);
}
});
Expand Down Expand Up @@ -185,16 +185,16 @@ React.render(React.createElement(
null,
React.createElement(StatesField, null),
React.createElement(StatesField, { label: 'States (non-searchable):', searchable: false }),
React.createElement(MultiSelectField, { label: 'Multiselect:' }),
React.createElement(MultiSelectField, { label: 'Multiselect (createable):' }),
React.createElement(SelectedValuesField, { label: 'Clickable labels (labels as links):' }),
React.createElement(RemoteSelectField, { label: 'Remote Options:' })
React.createElement(RemoteSelectField, { label: 'Remote Options (createable):' })
), document.getElementById('example'));

},{"./data/states":2,"react":undefined,"react-select":undefined}],2:[function(require,module,exports){
'use strict';

exports.AU = [{ value: 'australian-capital-territory', label: 'Australian Capital Territory' }, { value: 'new-south-wales', label: 'New South Wales' }, { value: 'victoria', label: 'Victoria' }, { value: 'queensland', label: 'Queensland' }, { value: 'western-australia', label: 'Western Australia' }, { value: 'south-australia', label: 'South Australia' }, { value: 'tasmania', label: 'Tasmania' }, { value: 'northern-territory', label: 'Northern Territory' }];

exports.US = [{ value: 'AL', label: 'Alabama' }, { value: 'AK', label: 'Alaska' }, { value: 'AS', label: 'American Samoa' }, { value: 'AZ', label: 'Arizona' }, { value: 'AR', label: 'Arkansas' }, { value: 'CA', label: 'California' }, { value: 'CO', label: 'Colorado' }, { value: 'CT', label: 'Connecticut' }, { value: 'DE', label: 'Delaware' }, { value: 'DC', label: 'District Of Columbia' }, { value: 'FM', label: 'Federated States Of Micronesia' }, { value: 'FL', label: 'Florida' }, { value: 'GA', label: 'Georgia' }, { value: 'GU', label: 'Guam' }, { value: 'HI', label: 'Hawaii' }, { value: 'ID', label: 'Idaho' }, { value: 'IL', label: 'Illinois' }, { value: 'IN', label: 'Indiana' }, { value: 'IA', label: 'Iowa' }, { value: 'KS', label: 'Kansas' }, { value: 'KY', label: 'Kentucky' }, { value: 'LA', label: 'Louisiana' }, { value: 'ME', label: 'Maine' }, { value: 'MH', label: 'Marshall Islands' }, { value: 'MD', label: 'Maryland' }, { value: 'MA', label: 'Massachusetts' }, { value: 'MI', label: 'Michigan' }, { value: 'MN', label: 'Minnesota' }, { value: 'MS', label: 'Mississippi' }, { value: 'MO', label: 'Missouri' }, { value: 'MT', label: 'Montana' }, { value: 'NE', label: 'Nebraska' }, { value: 'NV', label: 'Nevada' }, { value: 'NH', label: 'New Hampshire' }, { value: 'NJ', label: 'New Jersey' }, { value: 'NM', label: 'New Mexico' }, { value: 'NY', label: 'New York' }, { value: 'NC', label: 'North Carolina' }, { value: 'ND', label: 'North Dakota' }, { value: 'MP', label: 'Northern Mariana Islands' }, { value: 'OH', label: 'Ohio' }, { value: 'OK', label: 'Oklahoma' }, { value: 'OR', label: 'Oregon' }, { value: 'PW', label: 'Palau' }, { value: 'PA', label: 'Pennsylvania' }, { value: 'PR', label: 'Puerto Rico' }, { value: 'RI', label: 'Rhode Island' }, { value: 'SC', label: 'South Carolina' }, { value: 'SD', label: 'South Dakota' }, { value: 'TN', label: 'Tennessee' }, { value: 'TX', label: 'Texas' }, { value: 'UT', label: 'Utah' }, { value: 'VT', label: 'Vermont' }, { value: 'VI', label: 'Virgin Islands' }, { value: 'VA', label: 'Virginia' }, { value: 'WA', label: 'Washington' }, { value: 'WV', label: 'West Virginia' }, { value: 'WI', label: 'Wisconsin' }, { value: 'WY', label: 'Wyoming' }];
exports.US = [{ value: 'AL', label: 'Alabama', disabled: true }, { value: 'AK', label: 'Alaska' }, { value: 'AS', label: 'American Samoa' }, { value: 'AZ', label: 'Arizona' }, { value: 'AR', label: 'Arkansas' }, { value: 'CA', label: 'California' }, { value: 'CO', label: 'Colorado' }, { value: 'CT', label: 'Connecticut' }, { value: 'DE', label: 'Delaware' }, { value: 'DC', label: 'District Of Columbia' }, { value: 'FM', label: 'Federated States Of Micronesia' }, { value: 'FL', label: 'Florida' }, { value: 'GA', label: 'Georgia' }, { value: 'GU', label: 'Guam' }, { value: 'HI', label: 'Hawaii' }, { value: 'ID', label: 'Idaho' }, { value: 'IL', label: 'Illinois' }, { value: 'IN', label: 'Indiana' }, { value: 'IA', label: 'Iowa' }, { value: 'KS', label: 'Kansas' }, { value: 'KY', label: 'Kentucky' }, { value: 'LA', label: 'Louisiana' }, { value: 'ME', label: 'Maine' }, { value: 'MH', label: 'Marshall Islands' }, { value: 'MD', label: 'Maryland' }, { value: 'MA', label: 'Massachusetts' }, { value: 'MI', label: 'Michigan' }, { value: 'MN', label: 'Minnesota' }, { value: 'MS', label: 'Mississippi' }, { value: 'MO', label: 'Missouri' }, { value: 'MT', label: 'Montana' }, { value: 'NE', label: 'Nebraska' }, { value: 'NV', label: 'Nevada' }, { value: 'NH', label: 'New Hampshire' }, { value: 'NJ', label: 'New Jersey' }, { value: 'NM', label: 'New Mexico' }, { value: 'NY', label: 'New York' }, { value: 'NC', label: 'North Carolina' }, { value: 'ND', label: 'North Dakota' }, { value: 'MP', label: 'Northern Mariana Islands' }, { value: 'OH', label: 'Ohio' }, { value: 'OK', label: 'Oklahoma' }, { value: 'OR', label: 'Oregon' }, { value: 'PW', label: 'Palau' }, { value: 'PA', label: 'Pennsylvania' }, { value: 'PR', label: 'Puerto Rico' }, { value: 'RI', label: 'Rhode Island' }, { value: 'SC', label: 'South Carolina' }, { value: 'SD', label: 'South Dakota' }, { value: 'TN', label: 'Tennessee' }, { value: 'TX', label: 'Texas' }, { value: 'UT', label: 'Utah' }, { value: 'VT', label: 'Vermont' }, { value: 'VI', label: 'Virgin Islands' }, { value: 'VA', label: 'Virginia' }, { value: 'WA', label: 'Washington' }, { value: 'WV', label: 'West Virginia' }, { value: 'WI', label: 'Wisconsin' }, { value: 'WY', label: 'Wyoming' }];

},{}]},{},[1]);
127 changes: 80 additions & 47 deletions examples/dist/bundle.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,8 @@ var Select = React.createClass({
matchPos: React.PropTypes.string, // (any|start) match the start or entire string when filtering
matchProp: React.PropTypes.string, // (any|label|value) which option property to filter on
inputProps: React.PropTypes.object, // custom attributes for the Input (in the Select-control) e.g: {'data-foo': 'bar'}
createable: React.PropTypes.bool, // whether a new option can be created by giving a name
createText: React.PropTypes.string, // text to be displayed after the new option

/*
* Allow user to make option label clickable. When this handler is defined we should
Expand Down Expand Up @@ -125,6 +127,8 @@ var Select = React.createClass({
matchPos: 'any',
matchProp: 'any',
inputProps: {},
createable: false,
createText: '(create new)',

onOptionLabelClick: undefined
};
Expand Down Expand Up @@ -157,31 +161,32 @@ var Select = React.createClass({
this.autoloadAsyncOptions();
}

this._closeMenuIfClickedOutside = (function (event) {
if (!this.state.isOpen) {
var self = this;
this._closeMenuIfClickedOutside = function (event) {
if (!self.state.isOpen) {
return;
}
var menuElem = this.refs.selectMenuContainer.getDOMNode();
var controlElem = this.refs.control.getDOMNode();
var menuElem = self.refs.selectMenuContainer.getDOMNode();
var controlElem = self.refs.control.getDOMNode();

var eventOccuredOutsideMenu = this.clickedOutsideElement(menuElem, event);
var eventOccuredOutsideControl = this.clickedOutsideElement(controlElem, event);
var eventOccuredOutsideMenu = self.clickedOutsideElement(menuElem, event);
var eventOccuredOutsideControl = self.clickedOutsideElement(controlElem, event);

// Hide dropdown menu if click occurred outside of menu
if (eventOccuredOutsideMenu && eventOccuredOutsideControl) {
this.setState({
self.setState({
isOpen: false
}, this._unbindCloseMenuIfClickedOutside);
}, self._unbindCloseMenuIfClickedOutside);
}
}).bind(this);
};

this._bindCloseMenuIfClickedOutside = (function () {
document.addEventListener('click', this._closeMenuIfClickedOutside);
}).bind(this);
this._bindCloseMenuIfClickedOutside = function () {
document.addEventListener('click', self._closeMenuIfClickedOutside);
};

this._unbindCloseMenuIfClickedOutside = (function () {
document.removeEventListener('click', this._closeMenuIfClickedOutside);
}).bind(this);
this._unbindCloseMenuIfClickedOutside = function () {
document.removeEventListener('click', self._closeMenuIfClickedOutside);
};
},

componentWillUnmount: function componentWillUnmount() {
Expand All @@ -206,12 +211,15 @@ var Select = React.createClass({
},

componentDidUpdate: function componentDidUpdate() {
var self = this;

if (!this.props.disabled && this._focusAfterUpdate) {
clearTimeout(this._blurTimeout);
this._focusTimeout = setTimeout((function () {
this.getInputNode().focus();
this._focusAfterUpdate = false;
}).bind(this), 50);

this._focusTimeout = setTimeout(function () {
self.getInputNode().focus();
self._focusAfterUpdate = false;
}, 50);
}

if (this._focusedOptionReveal) {
Expand All @@ -233,9 +241,8 @@ var Select = React.createClass({
clickedOutsideElement: function clickedOutsideElement(element, event) {
var eventTarget = event.target ? event.target : event.srcElement;
while (eventTarget != null) {
if (eventTarget === element) {
return false;
}eventTarget = eventTarget.offsetParent;
if (eventTarget === element) return false;
eventTarget = eventTarget.offsetParent;
}
return true;
},
Expand Down Expand Up @@ -380,22 +387,25 @@ var Select = React.createClass({
},

handleInputBlur: function handleInputBlur(event) {
this._blurTimeout = setTimeout((function () {
if (this._focusAfterUpdate) return;
this.setState({
var self = this;

this._blurTimeout = setTimeout(function () {
if (self._focusAfterUpdate) return;

self.setState({
isFocused: false
});
}).bind(this), 50);
}, 50);

if (this.props.onBlur) {
this.props.onBlur(event);
}
},

handleKeyDown: function handleKeyDown(event) {
if (this.state.disabled) {
return;
}switch (event.keyCode) {
if (this.state.disabled) return;

switch (event.keyCode) {

case 8:
// backspace
Expand Down Expand Up @@ -470,6 +480,8 @@ var Select = React.createClass({
}, this._bindCloseMenuIfClickedOutside);
} else {
var filteredOptions = this.filterOptions(this.state.options);
filteredOptions = this.addCreateOption(filteredOptions, event.target.value);

this.setState({
isOpen: true,
inputValue: event.target.value,
Expand All @@ -495,6 +507,7 @@ var Select = React.createClass({
if (this._optionsCache[cacheKey] && (input === cacheKey || this._optionsCache[cacheKey].complete)) {
var options = this._optionsCache[cacheKey].options;
var filteredOptions = this.filterOptions(options);
filteredOptions = this.addCreateOption(filteredOptions, input);

var newState = {
options: options,
Expand All @@ -512,31 +525,33 @@ var Select = React.createClass({
}
}

this.props.asyncOptions(input, (function (err, data) {
var self = this;
this.props.asyncOptions(input, function (err, data) {

if (err) throw err;

this._optionsCache[input] = data;
self._optionsCache[input] = data;

if (thisRequestId !== this._currentRequestId) {
if (thisRequestId !== self._currentRequestId) {
return;
}
var filteredOptions = this.filterOptions(data.options);
var filteredOptions = self.filterOptions(data.options);
filteredOptions = self.addCreateOption(filteredOptions, input);

var newState = {
options: data.options,
filteredOptions: filteredOptions,
focusedOption: this._getNewFocusedOption(filteredOptions)
focusedOption: self._getNewFocusedOption(filteredOptions)
};
for (var key in state) {
if (state.hasOwnProperty(key)) {
newState[key] = state[key];
}
}
this.setState(newState);
self.setState(newState);

if (callback) callback({});
}).bind(this));
});
},

filterOptions: function filterOptions(options, values) {
Expand All @@ -552,11 +567,9 @@ var Select = React.createClass({
return this.props.filterOptions.call(this, options, filterValue, exclude);
} else {
var filterOption = function filterOption(op) {
if (this.props.multi && exclude.indexOf(op.value) > -1) {
return false;
}if (this.props.filterOption) {
return this.props.filterOption.call(this, op, filterValue);
}var valueTest = String(op.value),
if (this.props.multi && exclude.indexOf(op.value) > -1) return false;
if (this.props.filterOption) return this.props.filterOption.call(this, op, filterValue);
var valueTest = String(op.value),
labelTest = String(op.label);
return !filterValue || this.props.matchPos === 'start' ? this.props.matchProp !== 'label' && valueTest.toLowerCase().substr(0, filterValue.length) === filterValue || this.props.matchProp !== 'value' && labelTest.toLowerCase().substr(0, filterValue.length) === filterValue : this.props.matchProp !== 'label' && valueTest.toLowerCase().indexOf(filterValue.toLowerCase()) >= 0 || this.props.matchProp !== 'value' && labelTest.toLowerCase().indexOf(filterValue.toLowerCase()) >= 0;
};
Expand Down Expand Up @@ -647,7 +660,8 @@ var Select = React.createClass({

var optionClass = classes({
'Select-option': true,
'is-focused': isFocused
'is-focused': isFocused,
'is-disabled': op.disabled
});

var ref = isFocused ? 'focused' : null;
Expand All @@ -656,11 +670,19 @@ var Select = React.createClass({
mouseLeave = this.unfocusOption.bind(this, op),
mouseDown = this.selectValue.bind(this, op);

return React.createElement(
'div',
{ ref: ref, key: 'option-' + op.value, className: optionClass, onMouseEnter: mouseEnter, onMouseLeave: mouseLeave, onMouseDown: mouseDown, onClick: mouseDown },
op.label
);
if (op.disabled) {
return React.createElement(
'div',
{ ref: ref, key: 'option-' + op.value, className: optionClass },
op.label
);
} else {
return React.createElement(
'div',
{ ref: ref, key: 'option-' + op.value, className: optionClass, onMouseEnter: mouseEnter, onMouseLeave: mouseLeave, onMouseDown: mouseDown, onClick: mouseDown },
op.label
);
}
}, this);

return ops.length ? ops : React.createElement(
Expand All @@ -678,6 +700,17 @@ var Select = React.createClass({
}
},

addCreateOption: function addCreateOption(options, input) {
options = _.cloneDeep(options);
if (this.props.createable && input && !_.findWhere(options, { 'label': input })) {
options.push({
'value': input,
'label': input + ' ' + this.props.createText
});
}
return options;
},

render: function render() {
var selectClass = classes('Select', this.props.className, {
'is-multi': this.props.multi,
Expand Down
Loading