Socket
Socket
Sign inDemoInstall

react-select

Package Overview
Dependencies
Maintainers
1
Versions
180
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-select - npm Package Compare versions

Comparing version 0.3.2 to 0.3.3

1044

dist/react-select.js

@@ -1,5 +0,7 @@

!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var f;"undefined"!=typeof window?f=window:"undefined"!=typeof global?f=global:"undefined"!=typeof self&&(f=self),f.Select=e()}}(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.Select = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
(function (global){
"use strict";
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _ = (typeof window !== "undefined" ? window._ : typeof global !== "undefined" ? global._ : null),

@@ -15,517 +17,575 @@ React = (typeof window !== "undefined" ? window.React : typeof global !== "undefined" ? global.React : null),

displayName: "Select",
displayName: "Select",
propTypes: {
value: React.PropTypes.any, // initial field value
multi: React.PropTypes.bool, // multi-value input
options: React.PropTypes.array, // array of options
delimiter: React.PropTypes.string, // delimiter to use to join multiple values
asyncOptions: React.PropTypes.func, // function to call to get options
autoload: React.PropTypes.bool, // whether to auto-load the default async options set
placeholder: React.PropTypes.string, // field placeholder, displayed when there's no value
noResultsText: React.PropTypes.string, // placeholder displayed when there are no matching search results
clearable: React.PropTypes.bool, // should it be possible to reset value
clearValueText: React.PropTypes.string, // title for the "clear" control
clearAllText: React.PropTypes.string, // title for the "clear" control when multi: true
searchPromptText: React.PropTypes.string, // label to prompt for search input
name: React.PropTypes.string, // field name, for hidden <input /> tag
onChange: React.PropTypes.func, // onChange handler: function(newValue) {}
className: React.PropTypes.string, // className for the outer element
filterOption: React.PropTypes.func, // method to filter a single option: function(option, filterString)
filterOptions: React.PropTypes.func, // method to filter the options array: function([options], filterString, [values])
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
},
propTypes: {
value: React.PropTypes.any, // initial field value
multi: React.PropTypes.bool, // multi-value input
disabled: React.PropTypes.bool, // whether the Select is disabled or not
options: React.PropTypes.array, // array of options
delimiter: React.PropTypes.string, // delimiter to use to join multiple values
asyncOptions: React.PropTypes.func, // function to call to get options
autoload: React.PropTypes.bool, // whether to auto-load the default async options set
placeholder: React.PropTypes.string, // field placeholder, displayed when there's no value
noResultsText: React.PropTypes.string, // placeholder displayed when there are no matching search results
clearable: React.PropTypes.bool, // should it be possible to reset value
clearValueText: React.PropTypes.string, // title for the "clear" control
clearAllText: React.PropTypes.string, // title for the "clear" control when multi: true
searchable: React.PropTypes.bool, // whether to enable searching feature or not
searchPromptText: React.PropTypes.string, // label to prompt for search input
name: React.PropTypes.string, // field name, for hidden <input /> tag
onChange: React.PropTypes.func, // onChange handler: function(newValue) {}
className: React.PropTypes.string, // className for the outer element
filterOption: React.PropTypes.func, // method to filter a single option: function(option, filterString)
filterOptions: React.PropTypes.func, // method to filter the options array: function([options], filterString, [values])
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
getDefaultProps: function () {
return {
value: undefined,
options: [],
delimiter: ",",
asyncOptions: undefined,
autoload: true,
placeholder: "Select...",
noResultsText: "No results found",
clearable: true,
clearValueText: "Clear value",
clearAllText: "Clear all",
searchPromptText: "Type to search",
name: undefined,
onChange: undefined,
className: undefined,
matchPos: "any",
matchProp: "any"
};
},
/*
* Allow user to make option label clickable. When this handler is defined we should
* wrap label into <a>label</a> tag.
*
* onOptionLabelClick handler: function (value, event) {}
* */
onOptionLabelClick: React.PropTypes.func
},
getInitialState: function () {
return {
/*
* set by getStateFromValue on componentWillMount:
* - value
* - values
* - filteredOptions
* - inputValue
* - placeholder
* - focusedOption
*/
options: this.props.options,
isFocused: false,
isOpen: false,
isLoading: false
};
},
getDefaultProps: function () {
return {
value: undefined,
options: [],
disabled: false,
delimiter: ",",
asyncOptions: undefined,
autoload: true,
placeholder: "Select...",
noResultsText: "No results found",
clearable: true,
clearValueText: "Clear value",
clearAllText: "Clear all",
searchable: true,
searchPromptText: "Type to search",
name: undefined,
onChange: undefined,
className: undefined,
matchPos: "any",
matchProp: "any",
componentWillMount: function () {
this._optionsCache = {};
this._optionsFilterString = "";
this.setState(this.getStateFromValue(this.props.value));
onOptionLabelClick: undefined
};
},
if (this.props.asyncOptions && this.props.autoload) {
this.autoloadAsyncOptions();
}
},
getInitialState: function () {
return {
/*
* set by getStateFromValue on componentWillMount:
* - value
* - values
* - filteredOptions
* - inputValue
* - placeholder
* - focusedOption
*/
options: this.props.options,
isFocused: false,
isOpen: false,
isLoading: false
};
},
componentWillUnmount: function () {
clearTimeout(this._blurTimeout);
clearTimeout(this._focusTimeout);
},
componentWillMount: function () {
this._optionsCache = {};
this._optionsFilterString = "";
this.setState(this.getStateFromValue(this.props.value));
componentWillReceiveProps: function (newProps) {
if (newProps.value !== this.state.value) {
this.setState(this.getStateFromValue(newProps.value, newProps.options));
}
if (JSON.stringify(newProps.options) !== JSON.stringify(this.props.options)) {
this.setState({
options: newProps.options,
filteredOptions: this.filterOptions(newProps.options)
});
}
},
if (this.props.asyncOptions && this.props.autoload) {
this.autoloadAsyncOptions();
}
},
componentDidUpdate: function () {
if (this._focusAfterUpdate) {
clearTimeout(this._blurTimeout);
this._focusTimeout = setTimeout((function () {
this.refs.input.focus();
this._focusAfterUpdate = false;
}).bind(this), 50);
}
componentWillUnmount: function () {
clearTimeout(this._blurTimeout);
clearTimeout(this._focusTimeout);
},
if (this._focusedOptionReveal) {
if (this.refs.focused && this.refs.menu) {
var focusedDOM = this.refs.focused.getDOMNode();
var menuDOM = this.refs.menu.getDOMNode();
var focusedRect = focusedDOM.getBoundingClientRect();
var menuRect = menuDOM.getBoundingClientRect();
componentWillReceiveProps: function (newProps) {
if (newProps.value !== this.state.value) {
this.setState(this.getStateFromValue(newProps.value, newProps.options));
}
if (JSON.stringify(newProps.options) !== JSON.stringify(this.props.options)) {
this.setState({
options: newProps.options,
filteredOptions: this.filterOptions(newProps.options)
});
}
},
if (focusedRect.bottom > menuRect.bottom || focusedRect.top < menuRect.top) {
menuDOM.scrollTop = focusedDOM.offsetTop + focusedDOM.clientHeight - menuDOM.offsetHeight;
}
}
componentDidUpdate: function () {
if (this._focusAfterUpdate) {
clearTimeout(this._blurTimeout);
this._focusTimeout = setTimeout((function () {
this.getInputNode().focus();
this._focusAfterUpdate = false;
}).bind(this), 50);
}
this._focusedOptionReveal = false;
}
},
if (this._focusedOptionReveal) {
if (this.refs.focused && this.refs.menu) {
var focusedDOM = this.refs.focused.getDOMNode();
var menuDOM = this.refs.menu.getDOMNode();
var focusedRect = focusedDOM.getBoundingClientRect();
var menuRect = menuDOM.getBoundingClientRect();
getStateFromValue: function (value, options) {
if (!options) {
options = this.state.options;
}
if (focusedRect.bottom > menuRect.bottom || focusedRect.top < menuRect.top) {
menuDOM.scrollTop = focusedDOM.offsetTop + focusedDOM.clientHeight - menuDOM.offsetHeight;
}
}
// reset internal filter string
this._optionsFilterString = "";
this._focusedOptionReveal = false;
}
},
var values = this.initValuesArray(value, options),
filteredOptions = this.filterOptions(options, values);
getStateFromValue: function (value, options) {
if (!options) {
options = this.state.options;
}
return {
value: values.map(function (v) {
return v.value;
}).join(this.props.delimiter),
values: values,
inputValue: "",
filteredOptions: filteredOptions,
placeholder: !this.props.multi && values.length ? values[0].label : this.props.placeholder,
focusedOption: !this.props.multi && values.length ? values[0] : filteredOptions[0]
};
},
// reset internal filter string
this._optionsFilterString = "";
initValuesArray: function (values, options) {
if (!Array.isArray(values)) {
if ("string" === typeof values) {
values = values.split(this.props.delimiter);
} else {
values = values ? [values] : [];
}
}
var values = this.initValuesArray(value, options),
filteredOptions = this.filterOptions(options, values);
return values.map((function (val) {
return "string" === typeof val ? val = _.findWhere(options, { value: val }) || { value: val, label: val } : val;
}).bind(this));
},
return {
value: values.map(function (v) {
return v.value;
}).join(this.props.delimiter),
values: values,
inputValue: "",
filteredOptions: filteredOptions,
placeholder: !this.props.multi && values.length ? values[0].label : this.props.placeholder,
focusedOption: !this.props.multi && values.length ? values[0] : filteredOptions[0]
};
},
setValue: function (value) {
this._focusAfterUpdate = true;
var newState = this.getStateFromValue(value);
newState.isOpen = false;
this.fireChangeEvent(newState);
this.setState(newState);
},
initValuesArray: function (values, options) {
if (!Array.isArray(values)) {
if ("string" === typeof values) {
values = values.split(this.props.delimiter);
} else {
values = values ? [values] : [];
}
}
selectValue: function (value) {
if (!this.props.multi) {
this.setValue(value);
} else if (value) {
this.addValue(value);
}
},
return values.map((function (val) {
return "string" === typeof val ? val = _.findWhere(options, { value: val }) || { value: val, label: val } : val;
}).bind(this));
},
addValue: function (value) {
this.setValue(this.state.values.concat(value));
},
setValue: function (value) {
this._focusAfterUpdate = true;
var newState = this.getStateFromValue(value);
newState.isOpen = false;
this.fireChangeEvent(newState);
this.setState(newState);
},
popValue: function () {
this.setValue(_.initial(this.state.values));
},
selectValue: function (value) {
if (!this.props.multi) {
this.setValue(value);
} else if (value) {
this.addValue(value);
}
},
removeValue: function (value) {
this.setValue(_.without(this.state.values, value));
},
addValue: function (value) {
this.setValue(this.state.values.concat(value));
},
clearValue: function (event) {
// if the event was triggered by a mousedown and not the primary
// button, ignore it.
if (event && event.type == "mousedown" && event.button !== 0) {
return;
}
this.setValue(null);
},
popValue: function () {
this.setValue(_.initial(this.state.values));
},
resetValue: function () {
this.setValue(this.state.value);
},
removeValue: function (value) {
this.setValue(_.without(this.state.values, value));
},
fireChangeEvent: function (newState) {
if (newState.value !== this.state.value && this.props.onChange) {
this.props.onChange(newState.value, newState.values);
}
},
clearValue: function (event) {
// if the event was triggered by a mousedown and not the primary
// button, ignore it.
if (event && event.type == "mousedown" && event.button !== 0) {
return;
}
this.setValue(null);
},
handleMouseDown: function (event) {
// if the event was triggered by a mousedown and not the primary
// button, ignore it.
if (event.type == "mousedown" && event.button !== 0) {
return;
}
event.stopPropagation();
event.preventDefault();
if (this.state.isFocused) {
this.setState({
isOpen: true
});
} else {
this._openAfterFocus = true;
this.refs.input.focus();
}
},
resetValue: function () {
this.setValue(this.state.value);
},
handleInputFocus: function () {
this.setState({
isFocused: true,
isOpen: this.state.isOpen || this._openAfterFocus
});
this._openAfterFocus = false;
},
getInputNode: function () {
var input = this.refs.input;
return this.props.searchable ? input : input.getDOMNode();
},
handleInputBlur: function (event) {
this._blurTimeout = setTimeout((function () {
if (this._focusAfterUpdate) return;
this.setState({
isOpen: false,
isFocused: false
});
}).bind(this), 50);
},
fireChangeEvent: function (newState) {
if (newState.value !== this.state.value && this.props.onChange) {
this.props.onChange(newState.value, newState.values);
}
},
handleKeyDown: function (event) {
switch (event.keyCode) {
handleMouseDown: function (event) {
// if the event was triggered by a mousedown and not the primary
// button, or if the component is disabled, ignore it.
if (this.props.disabled || event.type == "mousedown" && event.button !== 0) {
return;
}
case 8:
// backspace
if (!this.state.inputValue) {
this.popValue();
}
return;
break;
event.stopPropagation();
event.preventDefault();
if (this.state.isFocused) {
this.setState({
isOpen: true
});
} else {
this._openAfterFocus = true;
this.getInputNode().focus();
}
},
case 9:
// tab
if (event.shiftKey || !this.state.isOpen || !this.state.focusedOption) {
return;
}
this.selectFocusedOption();
break;
handleInputFocus: function () {
this.setState({
isFocused: true,
isOpen: this.state.isOpen || this._openAfterFocus
});
this._openAfterFocus = false;
},
case 13:
// enter
this.selectFocusedOption();
break;
handleInputBlur: function (event) {
this._blurTimeout = setTimeout((function () {
if (this._focusAfterUpdate) return;
this.setState({
isOpen: false,
isFocused: false
});
}).bind(this), 50);
},
case 27:
// escape
if (this.state.isOpen) {
this.resetValue();
} else {
this.clearValue();
}
break;
handleKeyDown: function (event) {
if (this.state.disabled) return;
case 38:
// up
this.focusPreviousOption();
break;
switch (event.keyCode) {
case 40:
// down
this.focusNextOption();
break;
case 8:
// backspace
if (!this.state.inputValue) {
this.popValue();
}
return;
break;
default:
return;
}
case 9:
// tab
if (event.shiftKey || !this.state.isOpen || !this.state.focusedOption) {
return;
}
this.selectFocusedOption();
break;
event.preventDefault();
},
case 13:
// enter
this.selectFocusedOption();
break;
handleInputChange: function (event) {
// assign an internal variable because we need to use
// the latest value before setState() has completed.
this._optionsFilterString = event.target.value;
case 27:
// escape
if (this.state.isOpen) {
this.resetValue();
} else {
this.clearValue();
}
break;
if (this.props.asyncOptions) {
this.setState({
isLoading: true,
inputValue: event.target.value
});
this.loadAsyncOptions(event.target.value, {
isLoading: false,
isOpen: true
});
} else {
var filteredOptions = this.filterOptions(this.state.options);
this.setState({
isOpen: true,
inputValue: event.target.value,
filteredOptions: filteredOptions,
focusedOption: _.contains(filteredOptions, this.state.focusedOption) ? this.state.focusedOption : filteredOptions[0]
});
}
},
case 38:
// up
this.focusPreviousOption();
break;
autoloadAsyncOptions: function () {
this.loadAsyncOptions("", {}, function () {});
},
case 40:
// down
this.focusNextOption();
break;
loadAsyncOptions: function (input, state) {
for (var i = 0; i <= input.length; i++) {
var cacheKey = input.slice(0, i);
if (this._optionsCache[cacheKey] && (input === cacheKey || this._optionsCache[cacheKey].complete)) {
var options = this._optionsCache[cacheKey].options;
this.setState(_.extend({
options: options,
filteredOptions: this.filterOptions(options)
}, state));
return;
}
}
default:
return;
}
var thisRequestId = this._currentRequestId = requestId++;
event.preventDefault();
},
this.props.asyncOptions(input, (function (err, data) {
this._optionsCache[input] = data;
handleInputChange: function (event) {
// assign an internal variable because we need to use
// the latest value before setState() has completed.
this._optionsFilterString = event.target.value;
if (thisRequestId !== this._currentRequestId) {
return;
}
if (this.props.asyncOptions) {
this.setState({
isLoading: true,
inputValue: event.target.value
});
this.loadAsyncOptions(event.target.value, {
isLoading: false,
isOpen: true
});
} else {
var filteredOptions = this.filterOptions(this.state.options);
this.setState({
isOpen: true,
inputValue: event.target.value,
filteredOptions: filteredOptions,
focusedOption: _.contains(filteredOptions, this.state.focusedOption) ? this.state.focusedOption : filteredOptions[0]
});
}
},
this.setState(_.extend({
options: data.options,
filteredOptions: this.filterOptions(data.options)
}, state));
}).bind(this));
},
autoloadAsyncOptions: function () {
this.loadAsyncOptions("", {}, function () {});
},
filterOptions: function (options, values) {
var filterValue = this._optionsFilterString;
var exclude = (values || this.state.values).map(function (i) {
return i.value;
});
if (this.props.filterOptions) {
return this.props.filterOptions.call(this, options, filterValue, exclude);
} else {
var filterOption = function (op) {
if (this.props.multi && _.contains(exclude, op.value)) return false;
if (this.props.filterOption) return this.props.filterOption.call(this, op, filterValue);
return !filterValue || this.props.matchPos === "start" ? this.props.matchProp !== "label" && op.value.toLowerCase().substr(0, filterValue.length) === filterValue || this.props.matchProp !== "value" && op.label.toLowerCase().substr(0, filterValue.length) === filterValue : this.props.matchProp !== "label" && op.value.toLowerCase().indexOf(filterValue.toLowerCase()) >= 0 || this.props.matchProp !== "value" && op.label.toLowerCase().indexOf(filterValue.toLowerCase()) >= 0;
};
return _.filter(options, filterOption, this);
}
},
loadAsyncOptions: function (input, state) {
for (var i = 0; i <= input.length; i++) {
var cacheKey = input.slice(0, i);
if (this._optionsCache[cacheKey] && (input === cacheKey || this._optionsCache[cacheKey].complete)) {
var options = this._optionsCache[cacheKey].options;
this.setState(_.extend({
options: options,
filteredOptions: this.filterOptions(options)
}, state));
return;
}
}
selectFocusedOption: function () {
return this.selectValue(this.state.focusedOption);
},
var thisRequestId = this._currentRequestId = requestId++;
focusOption: function (op) {
this.setState({
focusedOption: op
});
},
this.props.asyncOptions(input, (function (err, data) {
this._optionsCache[input] = data;
focusNextOption: function () {
this.focusAdjacentOption("next");
},
if (thisRequestId !== this._currentRequestId) {
return;
}
focusPreviousOption: function () {
this.focusAdjacentOption("previous");
},
this.setState(_.extend({
options: data.options,
filteredOptions: this.filterOptions(data.options)
}, state));
}).bind(this));
},
focusAdjacentOption: function (dir) {
this._focusedOptionReveal = true;
filterOptions: function (options, values) {
if (!this.props.searchable) {
return options;
}
var ops = this.state.filteredOptions;
var filterValue = this._optionsFilterString;
var exclude = (values || this.state.values).map(function (i) {
return i.value;
});
if (this.props.filterOptions) {
return this.props.filterOptions.call(this, options, filterValue, exclude);
} else {
var filterOption = function (op) {
if (this.props.multi && _.contains(exclude, op.value)) return false;
if (this.props.filterOption) return this.props.filterOption.call(this, op, filterValue);
return !filterValue || this.props.matchPos === "start" ? this.props.matchProp !== "label" && op.value.toLowerCase().substr(0, filterValue.length) === filterValue || this.props.matchProp !== "value" && op.label.toLowerCase().substr(0, filterValue.length) === filterValue : this.props.matchProp !== "label" && op.value.toLowerCase().indexOf(filterValue.toLowerCase()) >= 0 || this.props.matchProp !== "value" && op.label.toLowerCase().indexOf(filterValue.toLowerCase()) >= 0;
};
return _.filter(options, filterOption, this);
}
},
if (!this.state.isOpen) {
this.setState({
isOpen: true,
inputValue: "",
focusedOption: this.state.focusedOption || ops[dir === "next" ? 0 : ops.length - 1]
});
return;
}
selectFocusedOption: function () {
return this.selectValue(this.state.focusedOption);
},
if (!ops.length) {
return;
}
focusOption: function (op) {
this.setState({
focusedOption: op
});
},
var focusedIndex = -1;
focusNextOption: function () {
this.focusAdjacentOption("next");
},
for (var i = 0; i < ops.length; i++) {
if (this.state.focusedOption === ops[i]) {
focusedIndex = i;
break;
}
}
focusPreviousOption: function () {
this.focusAdjacentOption("previous");
},
var focusedOption = ops[0];
focusAdjacentOption: function (dir) {
this._focusedOptionReveal = true;
if (dir === "next" && focusedIndex > -1 && focusedIndex < ops.length - 1) {
focusedOption = ops[focusedIndex + 1];
} else if (dir === "previous") {
if (focusedIndex > 0) {
focusedOption = ops[focusedIndex - 1];
} else {
focusedOption = ops[ops.length - 1];
}
}
var ops = this.state.filteredOptions;
this.setState({
focusedOption: focusedOption
});
},
if (!this.state.isOpen) {
this.setState({
isOpen: true,
inputValue: "",
focusedOption: this.state.focusedOption || ops[dir === "next" ? 0 : ops.length - 1]
});
return;
}
unfocusOption: function (op) {
if (this.state.focusedOption === op) {
this.setState({
focusedOption: null
});
}
},
if (!ops.length) {
return;
}
buildMenu: function () {
var focusedValue = this.state.focusedOption ? this.state.focusedOption.value : null;
var focusedIndex = -1;
var ops = _.map(this.state.filteredOptions, function (op) {
var isFocused = focusedValue === op.value;
for (var i = 0; i < ops.length; i++) {
if (this.state.focusedOption === ops[i]) {
focusedIndex = i;
break;
}
}
var optionClass = classes({
"Select-option": true,
"is-focused": isFocused
});
var focusedOption = ops[0];
var ref = isFocused ? "focused" : null;
if (dir === "next" && focusedIndex > -1 && focusedIndex < ops.length - 1) {
focusedOption = ops[focusedIndex + 1];
} else if (dir === "previous") {
if (focusedIndex > 0) {
focusedOption = ops[focusedIndex - 1];
} else {
focusedOption = ops[ops.length - 1];
}
}
var mouseEnter = this.focusOption.bind(this, op),
mouseLeave = this.unfocusOption.bind(this, op),
mouseDown = this.selectValue.bind(this, op);
this.setState({
focusedOption: focusedOption
});
},
return React.createElement(
"div",
{ ref: ref, key: "option-" + op.value, className: optionClass, onMouseEnter: mouseEnter, onMouseLeave: mouseLeave, onMouseDown: mouseDown, onClick: mouseDown },
op.label
);
}, this);
unfocusOption: function (op) {
if (this.state.focusedOption === op) {
this.setState({
focusedOption: null
});
}
},
return ops.length ? ops : React.createElement(
"div",
{ className: "Select-noresults" },
this.props.asyncOptions && !this.state.inputValue ? this.props.searchPromptText : this.props.noResultsText
);
},
buildMenu: function () {
var focusedValue = this.state.focusedOption ? this.state.focusedOption.value : null;
render: function () {
var selectClass = classes("Select", this.props.className, {
"is-multi": this.props.multi,
"is-open": this.state.isOpen,
"is-focused": this.state.isFocused,
"is-loading": this.state.isLoading,
"has-value": this.state.value
});
var ops = _.map(this.state.filteredOptions, function (op) {
var isFocused = focusedValue === op.value;
var value = [];
var optionClass = classes({
"Select-option": true,
"is-focused": isFocused
});
if (this.props.multi) {
this.state.values.forEach(function (val) {
var props = _.extend({
key: val.value,
onRemove: this.removeValue.bind(this, val)
}, val);
value.push(React.createElement(Value, props));
}, this);
}
var ref = isFocused ? "focused" : null;
if (!this.state.inputValue && (!this.props.multi || !value.length)) {
value.push(React.createElement(
"div",
{ className: "Select-placeholder", key: "placeholder" },
this.state.placeholder
));
}
var mouseEnter = this.focusOption.bind(this, op),
mouseLeave = this.unfocusOption.bind(this, op),
mouseDown = this.selectValue.bind(this, op);
var loading = this.state.isLoading ? React.createElement("span", { className: "Select-loading", "aria-hidden": "true" }) : null;
var clear = this.props.clearable && this.state.value ? React.createElement("span", { className: "Select-clear", title: this.props.multi ? this.props.clearAllText : this.props.clearValueText, "aria-label": this.props.multi ? this.props.clearAllText : this.props.clearValueText, onMouseDown: this.clearValue, onClick: this.clearValue, dangerouslySetInnerHTML: { __html: "&times;" } }) : null;
var menu = this.state.isOpen ? React.createElement(
"div",
{ ref: "menu", onMouseDown: this.handleMouseDown, className: "Select-menu" },
this.buildMenu()
) : null;
return React.createElement(
"div",
{ ref: ref, key: "option-" + op.value, className: optionClass, onMouseEnter: mouseEnter, onMouseLeave: mouseLeave, onMouseDown: mouseDown, onClick: mouseDown },
op.label
);
}, this);
return React.createElement(
"div",
{ ref: "wrapper", className: selectClass },
React.createElement("input", { type: "hidden", ref: "value", name: this.props.name, value: this.state.value }),
React.createElement(
"div",
{ className: "Select-control", ref: "control", onKeyDown: this.handleKeyDown, onMouseDown: this.handleMouseDown, onTouchEnd: this.handleMouseDown },
value,
React.createElement(Input, { className: "Select-input", tabIndex: this.props.tabIndex, ref: "input", value: this.state.inputValue, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, onChange: this.handleInputChange, minWidth: "5" }),
React.createElement("span", { className: "Select-arrow" }),
loading,
clear
),
menu
);
}
return ops.length ? ops : React.createElement(
"div",
{ className: "Select-noresults" },
this.props.asyncOptions && !this.state.inputValue ? this.props.searchPromptText : this.props.noResultsText
);
},
handleOptionLabelClick: function (value, event) {
var handler = this.props.onOptionLabelClick;
if (handler) {
handler(value, event);
}
},
render: function () {
var selectClass = classes("Select", this.props.className, {
"is-multi": this.props.multi,
"is-searchable": this.props.searchable,
"is-open": this.state.isOpen,
"is-focused": this.state.isFocused,
"is-loading": this.state.isLoading,
"is-disabled": this.props.disabled,
"has-value": this.state.value
});
var value = [];
if (this.props.multi) {
this.state.values.forEach(function (val) {
var props = _.extend({
key: val.value,
optionLabelClick: !!this.props.onOptionLabelClick,
onOptionLabelClick: this.handleOptionLabelClick.bind(this, val),
onRemove: this.removeValue.bind(this, val)
}, val);
value.push(React.createElement(Value, props));
}, this);
}
if (this.props.disabled || !this.state.inputValue && (!this.props.multi || !value.length)) {
value.push(React.createElement(
"div",
{ className: "Select-placeholder", key: "placeholder" },
this.state.placeholder
));
}
var loading = this.state.isLoading ? React.createElement("span", { className: "Select-loading", "aria-hidden": "true" }) : null;
var clear = this.props.clearable && this.state.value && !this.props.disabled ? React.createElement("span", { className: "Select-clear", title: this.props.multi ? this.props.clearAllText : this.props.clearValueText, "aria-label": this.props.multi ? this.props.clearAllText : this.props.clearValueText, onMouseDown: this.clearValue, onClick: this.clearValue, dangerouslySetInnerHTML: { __html: "&times;" } }) : null;
var menu = this.state.isOpen ? React.createElement(
"div",
{ ref: "menu", onMouseDown: this.handleMouseDown, className: "Select-menu" },
this.buildMenu()
) : null;
var commonProps = {
ref: "input",
className: "Select-input",
tabIndex: this.props.tabIndex || 0,
onFocus: this.handleInputFocus,
onBlur: this.handleInputBlur
};
var input;
if (this.props.searchable && !this.props.disabled) {
input = React.createElement(Input, _extends({ value: this.state.inputValue, onChange: this.handleInputChange, minWidth: "5" }, commonProps));
} else {
input = React.createElement(
"div",
commonProps,
" "
);
}
return React.createElement(
"div",
{ ref: "wrapper", className: selectClass },
React.createElement("input", { type: "hidden", ref: "value", name: this.props.name, value: this.state.value, disabled: this.props.disabled }),
React.createElement(
"div",
{ className: "Select-control", ref: "control", onKeyDown: this.handleKeyDown, onMouseDown: this.handleMouseDown, onTouchEnd: this.handleMouseDown },
value,
input,
React.createElement("span", { className: "Select-arrow" }),
loading,
clear
),
menu
);
}
});

@@ -537,17 +597,30 @@

},{"./Value":3,"classnames":2}],2:[function(require,module,exports){
function classnames() {
var args = arguments, classes = [];
function classNames() {
var args = arguments;
var classes = [];
for (var i = 0; i < args.length; i++) {
if (args[i] && 'string' === typeof args[i]) {
classes.push(args[i]);
} else if ('object' === typeof args[i]) {
classes = classes.concat(Object.keys(args[i]).filter(function(cls) {
return args[i][cls];
}));
var arg = args[i];
if (!arg) {
continue;
}
if ('string' === typeof arg || 'number' === typeof arg) {
classes.push(arg);
} else if ('object' === typeof arg) {
for (var key in arg) {
if (!arg.hasOwnProperty(key) || !arg[key]) {
continue;
}
classes.push(key);
}
}
}
return classes.join(' ') || undefined;
return classes.join(' ');
}
module.exports = classnames;
// safely export classNames in case the script is included directly on a page
if (typeof module !== 'undefined' && module.exports) {
module.exports = classNames;
}

@@ -559,34 +632,49 @@ },{}],3:[function(require,module,exports){

var _ = (typeof window !== "undefined" ? window._ : typeof global !== "undefined" ? global._ : null),
React = (typeof window !== "undefined" ? window.React : typeof global !== "undefined" ? global.React : null),
classes = require("classnames");
React = (typeof window !== "undefined" ? window.React : typeof global !== "undefined" ? global.React : null);
var Option = React.createClass({
displayName: "Value",
displayName: "Value",
propTypes: {
label: React.PropTypes.string.isRequired
},
propTypes: {
label: React.PropTypes.string.isRequired
},
blockEvent: function (event) {
event.stopPropagation();
},
blockEvent: function (event) {
event.stopPropagation();
},
render: function () {
return React.createElement(
"div",
{ className: "Select-item" },
React.createElement(
"span",
{ className: "Select-item-icon", onMouseDown: this.blockEvent, onClick: this.props.onRemove, onTouchEnd: this.props.onRemove },
"×"
),
React.createElement(
"span",
{ className: "Select-item-label" },
this.props.label
)
);
}
render: function () {
var label = this.props.label;
if (this.props.optionLabelClick) {
label = React.createElement(
"a",
{ className: "Select-item-label__a",
onMouseDown: this.blockEvent,
onTouchEnd: this.props.onOptionLabelClick,
onClick: this.props.onOptionLabelClick },
label
);
}
return React.createElement(
"div",
{ className: "Select-item" },
React.createElement(
"span",
{ className: "Select-item-icon",
onMouseDown: this.blockEvent,
onClick: this.props.onRemove,
onTouchEnd: this.props.onRemove },
"×"
),
React.createElement(
"span",
{ className: "Select-item-label" },
label
)
);
}
});

@@ -597,3 +685,3 @@

}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
},{"classnames":2}]},{},[1])(1)
},{}]},{},[1])(1)
});

2

dist/react-select.min.js

@@ -1,1 +0,1 @@

!function(t){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var e;"undefined"!=typeof window?e=window:"undefined"!=typeof global?e=global:"undefined"!=typeof self&&(e=self),e.Select=t()}}(function(){return function t(e,s,i){function n(a,l){if(!s[a]){if(!e[a]){var u="function"==typeof require&&require;if(!l&&u)return u(a,!0);if(o)return o(a,!0);var r=new Error("Cannot find module '"+a+"'");throw r.code="MODULE_NOT_FOUND",r}var p=s[a]={exports:{}};e[a][0].call(p.exports,function(t){var s=e[a][1][t];return n(s?s:t)},p,p.exports,t,e,s,i)}return s[a].exports}for(var o="function"==typeof require&&require,a=0;a<i.length;a++)n(i[a]);return n}({1:[function(t,e){(function(s){"use strict";var i="undefined"!=typeof window?window._:"undefined"!=typeof s?s._:null,n="undefined"!=typeof window?window.React:"undefined"!=typeof s?s.React:null,o="undefined"!=typeof window?window.AutosizeInput:"undefined"!=typeof s?s.AutosizeInput:null,a=t("classnames"),l=t("./Value"),u=0,r=n.createClass({displayName:"Select",propTypes:{value:n.PropTypes.any,multi:n.PropTypes.bool,options:n.PropTypes.array,delimiter:n.PropTypes.string,asyncOptions:n.PropTypes.func,autoload:n.PropTypes.bool,placeholder:n.PropTypes.string,noResultsText:n.PropTypes.string,clearable:n.PropTypes.bool,clearValueText:n.PropTypes.string,clearAllText:n.PropTypes.string,searchPromptText:n.PropTypes.string,name:n.PropTypes.string,onChange:n.PropTypes.func,className:n.PropTypes.string,filterOption:n.PropTypes.func,filterOptions:n.PropTypes.func,matchPos:n.PropTypes.string,matchProp:n.PropTypes.string},getDefaultProps:function(){return{value:void 0,options:[],delimiter:",",asyncOptions:void 0,autoload:!0,placeholder:"Select...",noResultsText:"No results found",clearable:!0,clearValueText:"Clear value",clearAllText:"Clear all",searchPromptText:"Type to search",name:void 0,onChange:void 0,className:void 0,matchPos:"any",matchProp:"any"}},getInitialState:function(){return{options:this.props.options,isFocused:!1,isOpen:!1,isLoading:!1}},componentWillMount:function(){this._optionsCache={},this._optionsFilterString="",this.setState(this.getStateFromValue(this.props.value)),this.props.asyncOptions&&this.props.autoload&&this.autoloadAsyncOptions()},componentWillUnmount:function(){clearTimeout(this._blurTimeout),clearTimeout(this._focusTimeout)},componentWillReceiveProps:function(t){t.value!==this.state.value&&this.setState(this.getStateFromValue(t.value,t.options)),JSON.stringify(t.options)!==JSON.stringify(this.props.options)&&this.setState({options:t.options,filteredOptions:this.filterOptions(t.options)})},componentDidUpdate:function(){if(this._focusAfterUpdate&&(clearTimeout(this._blurTimeout),this._focusTimeout=setTimeout(function(){this.refs.input.focus(),this._focusAfterUpdate=!1}.bind(this),50)),this._focusedOptionReveal){if(this.refs.focused&&this.refs.menu){var t=this.refs.focused.getDOMNode(),e=this.refs.menu.getDOMNode(),s=t.getBoundingClientRect(),i=e.getBoundingClientRect();(s.bottom>i.bottom||s.top<i.top)&&(e.scrollTop=t.offsetTop+t.clientHeight-e.offsetHeight)}this._focusedOptionReveal=!1}},getStateFromValue:function(t,e){e||(e=this.state.options),this._optionsFilterString="";var s=this.initValuesArray(t,e),i=this.filterOptions(e,s);return{value:s.map(function(t){return t.value}).join(this.props.delimiter),values:s,inputValue:"",filteredOptions:i,placeholder:!this.props.multi&&s.length?s[0].label:this.props.placeholder,focusedOption:!this.props.multi&&s.length?s[0]:i[0]}},initValuesArray:function(t,e){return Array.isArray(t)||(t="string"==typeof t?t.split(this.props.delimiter):t?[t]:[]),t.map(function(t){return"string"==typeof t?t=i.findWhere(e,{value:t})||{value:t,label:t}:t}.bind(this))},setValue:function(t){this._focusAfterUpdate=!0;var e=this.getStateFromValue(t);e.isOpen=!1,this.fireChangeEvent(e),this.setState(e)},selectValue:function(t){this.props.multi?t&&this.addValue(t):this.setValue(t)},addValue:function(t){this.setValue(this.state.values.concat(t))},popValue:function(){this.setValue(i.initial(this.state.values))},removeValue:function(t){this.setValue(i.without(this.state.values,t))},clearValue:function(t){t&&"mousedown"==t.type&&0!==t.button||this.setValue(null)},resetValue:function(){this.setValue(this.state.value)},fireChangeEvent:function(t){t.value!==this.state.value&&this.props.onChange&&this.props.onChange(t.value,t.values)},handleMouseDown:function(t){("mousedown"!=t.type||0===t.button)&&(t.stopPropagation(),t.preventDefault(),this.state.isFocused?this.setState({isOpen:!0}):(this._openAfterFocus=!0,this.refs.input.focus()))},handleInputFocus:function(){this.setState({isFocused:!0,isOpen:this.state.isOpen||this._openAfterFocus}),this._openAfterFocus=!1},handleInputBlur:function(){this._blurTimeout=setTimeout(function(){this._focusAfterUpdate||this.setState({isOpen:!1,isFocused:!1})}.bind(this),50)},handleKeyDown:function(t){switch(t.keyCode){case 8:return void(this.state.inputValue||this.popValue());case 9:if(t.shiftKey||!this.state.isOpen||!this.state.focusedOption)return;this.selectFocusedOption();break;case 13:this.selectFocusedOption();break;case 27:this.state.isOpen?this.resetValue():this.clearValue();break;case 38:this.focusPreviousOption();break;case 40:this.focusNextOption();break;default:return}t.preventDefault()},handleInputChange:function(t){if(this._optionsFilterString=t.target.value,this.props.asyncOptions)this.setState({isLoading:!0,inputValue:t.target.value}),this.loadAsyncOptions(t.target.value,{isLoading:!1,isOpen:!0});else{var e=this.filterOptions(this.state.options);this.setState({isOpen:!0,inputValue:t.target.value,filteredOptions:e,focusedOption:i.contains(e,this.state.focusedOption)?this.state.focusedOption:e[0]})}},autoloadAsyncOptions:function(){this.loadAsyncOptions("",{},function(){})},loadAsyncOptions:function(t,e){for(var s=0;s<=t.length;s++){var n=t.slice(0,s);if(this._optionsCache[n]&&(t===n||this._optionsCache[n].complete)){var o=this._optionsCache[n].options;return void this.setState(i.extend({options:o,filteredOptions:this.filterOptions(o)},e))}}var a=this._currentRequestId=u++;this.props.asyncOptions(t,function(s,n){this._optionsCache[t]=n,a===this._currentRequestId&&this.setState(i.extend({options:n.options,filteredOptions:this.filterOptions(n.options)},e))}.bind(this))},filterOptions:function(t,e){var s=this._optionsFilterString,n=(e||this.state.values).map(function(t){return t.value});if(this.props.filterOptions)return this.props.filterOptions.call(this,t,s,n);var o=function(t){return this.props.multi&&i.contains(n,t.value)?!1:this.props.filterOption?this.props.filterOption.call(this,t,s):s&&"start"!==this.props.matchPos?"label"!==this.props.matchProp&&t.value.toLowerCase().indexOf(s.toLowerCase())>=0||"value"!==this.props.matchProp&&t.label.toLowerCase().indexOf(s.toLowerCase())>=0:"label"!==this.props.matchProp&&t.value.toLowerCase().substr(0,s.length)===s||"value"!==this.props.matchProp&&t.label.toLowerCase().substr(0,s.length)===s};return i.filter(t,o,this)},selectFocusedOption:function(){return this.selectValue(this.state.focusedOption)},focusOption:function(t){this.setState({focusedOption:t})},focusNextOption:function(){this.focusAdjacentOption("next")},focusPreviousOption:function(){this.focusAdjacentOption("previous")},focusAdjacentOption:function(t){this._focusedOptionReveal=!0;var e=this.state.filteredOptions;if(!this.state.isOpen)return void this.setState({isOpen:!0,inputValue:"",focusedOption:this.state.focusedOption||e["next"===t?0:e.length-1]});if(e.length){for(var s=-1,i=0;i<e.length;i++)if(this.state.focusedOption===e[i]){s=i;break}var n=e[0];"next"===t&&s>-1&&s<e.length-1?n=e[s+1]:"previous"===t&&(n=s>0?e[s-1]:e[e.length-1]),this.setState({focusedOption:n})}},unfocusOption:function(t){this.state.focusedOption===t&&this.setState({focusedOption:null})},buildMenu:function(){var t=this.state.focusedOption?this.state.focusedOption.value:null,e=i.map(this.state.filteredOptions,function(e){var s=t===e.value,i=a({"Select-option":!0,"is-focused":s}),o=s?"focused":null,l=this.focusOption.bind(this,e),u=this.unfocusOption.bind(this,e),r=this.selectValue.bind(this,e);return n.createElement("div",{ref:o,key:"option-"+e.value,className:i,onMouseEnter:l,onMouseLeave:u,onMouseDown:r,onClick:r},e.label)},this);return e.length?e:n.createElement("div",{className:"Select-noresults"},this.props.asyncOptions&&!this.state.inputValue?this.props.searchPromptText:this.props.noResultsText)},render:function(){var t=a("Select",this.props.className,{"is-multi":this.props.multi,"is-open":this.state.isOpen,"is-focused":this.state.isFocused,"is-loading":this.state.isLoading,"has-value":this.state.value}),e=[];this.props.multi&&this.state.values.forEach(function(t){var s=i.extend({key:t.value,onRemove:this.removeValue.bind(this,t)},t);e.push(n.createElement(l,s))},this),this.state.inputValue||this.props.multi&&e.length||e.push(n.createElement("div",{className:"Select-placeholder",key:"placeholder"},this.state.placeholder));var s=this.state.isLoading?n.createElement("span",{className:"Select-loading","aria-hidden":"true"}):null,u=this.props.clearable&&this.state.value?n.createElement("span",{className:"Select-clear",title:this.props.multi?this.props.clearAllText:this.props.clearValueText,"aria-label":this.props.multi?this.props.clearAllText:this.props.clearValueText,onMouseDown:this.clearValue,onClick:this.clearValue,dangerouslySetInnerHTML:{__html:"&times;"}}):null,r=this.state.isOpen?n.createElement("div",{ref:"menu",onMouseDown:this.handleMouseDown,className:"Select-menu"},this.buildMenu()):null;return n.createElement("div",{ref:"wrapper",className:t},n.createElement("input",{type:"hidden",ref:"value",name:this.props.name,value:this.state.value}),n.createElement("div",{className:"Select-control",ref:"control",onKeyDown:this.handleKeyDown,onMouseDown:this.handleMouseDown,onTouchEnd:this.handleMouseDown},e,n.createElement(o,{className:"Select-input",tabIndex:this.props.tabIndex,ref:"input",value:this.state.inputValue,onFocus:this.handleInputFocus,onBlur:this.handleInputBlur,onChange:this.handleInputChange,minWidth:"5"}),n.createElement("span",{className:"Select-arrow"}),s,u),r)}});e.exports=r}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"./Value":3,classnames:2}],2:[function(t,e){function s(){for(var t=arguments,e=[],s=0;s<t.length;s++)t[s]&&"string"==typeof t[s]?e.push(t[s]):"object"==typeof t[s]&&(e=e.concat(Object.keys(t[s]).filter(function(e){return t[s][e]})));return e.join(" ")||void 0}e.exports=s},{}],3:[function(t,e){(function(s){"use strict";var i=("undefined"!=typeof window?window._:"undefined"!=typeof s?s._:null,"undefined"!=typeof window?window.React:"undefined"!=typeof s?s.React:null),n=(t("classnames"),i.createClass({displayName:"Value",propTypes:{label:i.PropTypes.string.isRequired},blockEvent:function(t){t.stopPropagation()},render:function(){return i.createElement("div",{className:"Select-item"},i.createElement("span",{className:"Select-item-icon",onMouseDown:this.blockEvent,onClick:this.props.onRemove,onTouchEnd:this.props.onRemove},"×"),i.createElement("span",{className:"Select-item-label"},this.props.label))}}));e.exports=n}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{classnames:2}]},{},[1])(1)});
!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var t;t="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,t.Select=e()}}(function(){return function e(t,s,i){function o(a,l){if(!s[a]){if(!t[a]){var r="function"==typeof require&&require;if(!l&&r)return r(a,!0);if(n)return n(a,!0);var p=new Error("Cannot find module '"+a+"'");throw p.code="MODULE_NOT_FOUND",p}var u=s[a]={exports:{}};t[a][0].call(u.exports,function(e){var s=t[a][1][e];return o(s?s:e)},u,u.exports,e,t,s,i)}return s[a].exports}for(var n="function"==typeof require&&require,a=0;a<i.length;a++)o(i[a]);return o}({1:[function(e,t){(function(s){"use strict";var i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var s=arguments[t];for(var i in s)Object.prototype.hasOwnProperty.call(s,i)&&(e[i]=s[i])}return e},o="undefined"!=typeof window?window._:"undefined"!=typeof s?s._:null,n="undefined"!=typeof window?window.React:"undefined"!=typeof s?s.React:null,a="undefined"!=typeof window?window.AutosizeInput:"undefined"!=typeof s?s.AutosizeInput:null,l=e("classnames"),r=e("./Value"),p=0,u=n.createClass({displayName:"Select",propTypes:{value:n.PropTypes.any,multi:n.PropTypes.bool,disabled:n.PropTypes.bool,options:n.PropTypes.array,delimiter:n.PropTypes.string,asyncOptions:n.PropTypes.func,autoload:n.PropTypes.bool,placeholder:n.PropTypes.string,noResultsText:n.PropTypes.string,clearable:n.PropTypes.bool,clearValueText:n.PropTypes.string,clearAllText:n.PropTypes.string,searchable:n.PropTypes.bool,searchPromptText:n.PropTypes.string,name:n.PropTypes.string,onChange:n.PropTypes.func,className:n.PropTypes.string,filterOption:n.PropTypes.func,filterOptions:n.PropTypes.func,matchPos:n.PropTypes.string,matchProp:n.PropTypes.string,onOptionLabelClick:n.PropTypes.func},getDefaultProps:function(){return{value:void 0,options:[],disabled:!1,delimiter:",",asyncOptions:void 0,autoload:!0,placeholder:"Select...",noResultsText:"No results found",clearable:!0,clearValueText:"Clear value",clearAllText:"Clear all",searchable:!0,searchPromptText:"Type to search",name:void 0,onChange:void 0,className:void 0,matchPos:"any",matchProp:"any",onOptionLabelClick:void 0}},getInitialState:function(){return{options:this.props.options,isFocused:!1,isOpen:!1,isLoading:!1}},componentWillMount:function(){this._optionsCache={},this._optionsFilterString="",this.setState(this.getStateFromValue(this.props.value)),this.props.asyncOptions&&this.props.autoload&&this.autoloadAsyncOptions()},componentWillUnmount:function(){clearTimeout(this._blurTimeout),clearTimeout(this._focusTimeout)},componentWillReceiveProps:function(e){e.value!==this.state.value&&this.setState(this.getStateFromValue(e.value,e.options)),JSON.stringify(e.options)!==JSON.stringify(this.props.options)&&this.setState({options:e.options,filteredOptions:this.filterOptions(e.options)})},componentDidUpdate:function(){if(this._focusAfterUpdate&&(clearTimeout(this._blurTimeout),this._focusTimeout=setTimeout(function(){this.getInputNode().focus(),this._focusAfterUpdate=!1}.bind(this),50)),this._focusedOptionReveal){if(this.refs.focused&&this.refs.menu){var e=this.refs.focused.getDOMNode(),t=this.refs.menu.getDOMNode(),s=e.getBoundingClientRect(),i=t.getBoundingClientRect();(s.bottom>i.bottom||s.top<i.top)&&(t.scrollTop=e.offsetTop+e.clientHeight-t.offsetHeight)}this._focusedOptionReveal=!1}},getStateFromValue:function(e,t){t||(t=this.state.options),this._optionsFilterString="";var s=this.initValuesArray(e,t),i=this.filterOptions(t,s);return{value:s.map(function(e){return e.value}).join(this.props.delimiter),values:s,inputValue:"",filteredOptions:i,placeholder:!this.props.multi&&s.length?s[0].label:this.props.placeholder,focusedOption:!this.props.multi&&s.length?s[0]:i[0]}},initValuesArray:function(e,t){return Array.isArray(e)||(e="string"==typeof e?e.split(this.props.delimiter):e?[e]:[]),e.map(function(e){return"string"==typeof e?e=o.findWhere(t,{value:e})||{value:e,label:e}:e}.bind(this))},setValue:function(e){this._focusAfterUpdate=!0;var t=this.getStateFromValue(e);t.isOpen=!1,this.fireChangeEvent(t),this.setState(t)},selectValue:function(e){this.props.multi?e&&this.addValue(e):this.setValue(e)},addValue:function(e){this.setValue(this.state.values.concat(e))},popValue:function(){this.setValue(o.initial(this.state.values))},removeValue:function(e){this.setValue(o.without(this.state.values,e))},clearValue:function(e){e&&"mousedown"==e.type&&0!==e.button||this.setValue(null)},resetValue:function(){this.setValue(this.state.value)},getInputNode:function(){var e=this.refs.input;return this.props.searchable?e:e.getDOMNode()},fireChangeEvent:function(e){e.value!==this.state.value&&this.props.onChange&&this.props.onChange(e.value,e.values)},handleMouseDown:function(e){this.props.disabled||"mousedown"==e.type&&0!==e.button||(e.stopPropagation(),e.preventDefault(),this.state.isFocused?this.setState({isOpen:!0}):(this._openAfterFocus=!0,this.getInputNode().focus()))},handleInputFocus:function(){this.setState({isFocused:!0,isOpen:this.state.isOpen||this._openAfterFocus}),this._openAfterFocus=!1},handleInputBlur:function(){this._blurTimeout=setTimeout(function(){this._focusAfterUpdate||this.setState({isOpen:!1,isFocused:!1})}.bind(this),50)},handleKeyDown:function(e){if(!this.state.disabled){switch(e.keyCode){case 8:return void(this.state.inputValue||this.popValue());case 9:if(e.shiftKey||!this.state.isOpen||!this.state.focusedOption)return;this.selectFocusedOption();break;case 13:this.selectFocusedOption();break;case 27:this.state.isOpen?this.resetValue():this.clearValue();break;case 38:this.focusPreviousOption();break;case 40:this.focusNextOption();break;default:return}e.preventDefault()}},handleInputChange:function(e){if(this._optionsFilterString=e.target.value,this.props.asyncOptions)this.setState({isLoading:!0,inputValue:e.target.value}),this.loadAsyncOptions(e.target.value,{isLoading:!1,isOpen:!0});else{var t=this.filterOptions(this.state.options);this.setState({isOpen:!0,inputValue:e.target.value,filteredOptions:t,focusedOption:o.contains(t,this.state.focusedOption)?this.state.focusedOption:t[0]})}},autoloadAsyncOptions:function(){this.loadAsyncOptions("",{},function(){})},loadAsyncOptions:function(e,t){for(var s=0;s<=e.length;s++){var i=e.slice(0,s);if(this._optionsCache[i]&&(e===i||this._optionsCache[i].complete)){var n=this._optionsCache[i].options;return void this.setState(o.extend({options:n,filteredOptions:this.filterOptions(n)},t))}}var a=this._currentRequestId=p++;this.props.asyncOptions(e,function(s,i){this._optionsCache[e]=i,a===this._currentRequestId&&this.setState(o.extend({options:i.options,filteredOptions:this.filterOptions(i.options)},t))}.bind(this))},filterOptions:function(e,t){if(!this.props.searchable)return e;var s=this._optionsFilterString,i=(t||this.state.values).map(function(e){return e.value});if(this.props.filterOptions)return this.props.filterOptions.call(this,e,s,i);var n=function(e){return this.props.multi&&o.contains(i,e.value)?!1:this.props.filterOption?this.props.filterOption.call(this,e,s):s&&"start"!==this.props.matchPos?"label"!==this.props.matchProp&&e.value.toLowerCase().indexOf(s.toLowerCase())>=0||"value"!==this.props.matchProp&&e.label.toLowerCase().indexOf(s.toLowerCase())>=0:"label"!==this.props.matchProp&&e.value.toLowerCase().substr(0,s.length)===s||"value"!==this.props.matchProp&&e.label.toLowerCase().substr(0,s.length)===s};return o.filter(e,n,this)},selectFocusedOption:function(){return this.selectValue(this.state.focusedOption)},focusOption:function(e){this.setState({focusedOption:e})},focusNextOption:function(){this.focusAdjacentOption("next")},focusPreviousOption:function(){this.focusAdjacentOption("previous")},focusAdjacentOption:function(e){this._focusedOptionReveal=!0;var t=this.state.filteredOptions;if(!this.state.isOpen)return void this.setState({isOpen:!0,inputValue:"",focusedOption:this.state.focusedOption||t["next"===e?0:t.length-1]});if(t.length){for(var s=-1,i=0;i<t.length;i++)if(this.state.focusedOption===t[i]){s=i;break}var o=t[0];"next"===e&&s>-1&&s<t.length-1?o=t[s+1]:"previous"===e&&(o=s>0?t[s-1]:t[t.length-1]),this.setState({focusedOption:o})}},unfocusOption:function(e){this.state.focusedOption===e&&this.setState({focusedOption:null})},buildMenu:function(){var e=this.state.focusedOption?this.state.focusedOption.value:null,t=o.map(this.state.filteredOptions,function(t){var s=e===t.value,i=l({"Select-option":!0,"is-focused":s}),o=s?"focused":null,a=this.focusOption.bind(this,t),r=this.unfocusOption.bind(this,t),p=this.selectValue.bind(this,t);return n.createElement("div",{ref:o,key:"option-"+t.value,className:i,onMouseEnter:a,onMouseLeave:r,onMouseDown:p,onClick:p},t.label)},this);return t.length?t:n.createElement("div",{className:"Select-noresults"},this.props.asyncOptions&&!this.state.inputValue?this.props.searchPromptText:this.props.noResultsText)},handleOptionLabelClick:function(e,t){var s=this.props.onOptionLabelClick;s&&s(e,t)},render:function(){var e=l("Select",this.props.className,{"is-multi":this.props.multi,"is-searchable":this.props.searchable,"is-open":this.state.isOpen,"is-focused":this.state.isFocused,"is-loading":this.state.isLoading,"is-disabled":this.props.disabled,"has-value":this.state.value}),t=[];this.props.multi&&this.state.values.forEach(function(e){var s=o.extend({key:e.value,optionLabelClick:!!this.props.onOptionLabelClick,onOptionLabelClick:this.handleOptionLabelClick.bind(this,e),onRemove:this.removeValue.bind(this,e)},e);t.push(n.createElement(r,s))},this),!this.props.disabled&&(this.state.inputValue||this.props.multi&&t.length)||t.push(n.createElement("div",{className:"Select-placeholder",key:"placeholder"},this.state.placeholder));var s,p=this.state.isLoading?n.createElement("span",{className:"Select-loading","aria-hidden":"true"}):null,u=this.props.clearable&&this.state.value&&!this.props.disabled?n.createElement("span",{className:"Select-clear",title:this.props.multi?this.props.clearAllText:this.props.clearValueText,"aria-label":this.props.multi?this.props.clearAllText:this.props.clearValueText,onMouseDown:this.clearValue,onClick:this.clearValue,dangerouslySetInnerHTML:{__html:"&times;"}}):null,c=this.state.isOpen?n.createElement("div",{ref:"menu",onMouseDown:this.handleMouseDown,className:"Select-menu"},this.buildMenu()):null,h={ref:"input",className:"Select-input",tabIndex:this.props.tabIndex||0,onFocus:this.handleInputFocus,onBlur:this.handleInputBlur};return s=this.props.searchable&&!this.props.disabled?n.createElement(a,i({value:this.state.inputValue,onChange:this.handleInputChange,minWidth:"5"},h)):n.createElement("div",h," "),n.createElement("div",{ref:"wrapper",className:e},n.createElement("input",{type:"hidden",ref:"value",name:this.props.name,value:this.state.value,disabled:this.props.disabled}),n.createElement("div",{className:"Select-control",ref:"control",onKeyDown:this.handleKeyDown,onMouseDown:this.handleMouseDown,onTouchEnd:this.handleMouseDown},t,s,n.createElement("span",{className:"Select-arrow"}),p,u),c)}});t.exports=u}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"./Value":3,classnames:2}],2:[function(e,t){function s(){for(var e=arguments,t=[],s=0;s<e.length;s++){var i=e[s];if(i)if("string"==typeof i||"number"==typeof i)t.push(i);else if("object"==typeof i)for(var o in i)i.hasOwnProperty(o)&&i[o]&&t.push(o)}return t.join(" ")}"undefined"!=typeof t&&t.exports&&(t.exports=s)},{}],3:[function(e,t){(function(e){"use strict";var s=("undefined"!=typeof window?window._:"undefined"!=typeof e?e._:null,"undefined"!=typeof window?window.React:"undefined"!=typeof e?e.React:null),i=s.createClass({displayName:"Value",propTypes:{label:s.PropTypes.string.isRequired},blockEvent:function(e){e.stopPropagation()},render:function(){var e=this.props.label;return this.props.optionLabelClick&&(e=s.createElement("a",{className:"Select-item-label__a",onMouseDown:this.blockEvent,onTouchEnd:this.props.onOptionLabelClick,onClick:this.props.onOptionLabelClick},e)),s.createElement("div",{className:"Select-item"},s.createElement("span",{className:"Select-item-icon",onMouseDown:this.blockEvent,onClick:this.props.onRemove,onTouchEnd:this.props.onRemove},"×"),s.createElement("span",{className:"Select-item-label"},e))}});t.exports=i}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}]},{},[1])(1)});

43

examples/src/app.js

@@ -21,2 +21,9 @@ var React = require('react'),

var StatesField = React.createClass({
getDefaultProps: function () {
return {
searchable: true,
label: 'States:',
};
},
getInitialState: function() {

@@ -26,3 +33,3 @@ return {

selectValue: 'new-south-wales'
}
};
},

@@ -46,4 +53,4 @@ switchCountry: function(newCountry) {

<div>
<label>States:</label>
<Select options={ops} value={this.state.selectValue} onChange={this.updateValue} />
<label>{this.props.label}</label>
<Select options={ops} value={this.state.selectValue} onChange={this.updateValue} searchable={this.props.searchable} />
<div className="switcher">

@@ -128,6 +135,36 @@ Country:

var SelectedValuesField = React.createClass({
onLabelClick: function (data, event) {
console.log(data);
},
render: function() {
var ops = [
{ label: 'Chocolate', value: 'chocolate' },
{ label: 'Vanilla', value: 'vanilla' },
{ label: 'Strawberry', value: 'strawberry' },
{ label: 'Caramel', value: 'caramel' },
{ label: 'Cookies and Cream', value: 'cookiescream' },
{ label: 'Peppermint', value: 'peppermint' }
];
return <div>
<label>{this.props.label}</label>
<Select
onOptionLabelClick={this.onLabelClick}
value="chocolate,vanilla,strawberry"
multi={true}
placeholder="Select your favourite(s)"
options={ops}
onChange={logChange} />
</div>;
}
});
React.render(
<div>
<SelectedValuesField label="Clickable labels (labels as links):" />
<StatesField />
<StatesField label="States (non-searchable):" searchable={false} />
<MultiSelectField label="Multiselect:"/>

@@ -134,0 +171,0 @@ <RemoteSelectField label="Remote Options:"/>

4

gulpfile.js

@@ -251,3 +251,3 @@ var browserify = require('browserify'),

.pipe(gulp.dest('dist'));
})
});

@@ -325,3 +325,3 @@ gulp.task('build:scripts', ['prepare:dist'], function() {

* npm publish task
* * (version *must* be bumped first)
* (version *must* be bumped first)
*/

@@ -328,0 +328,0 @@

7

HISTORY.md
# React-Select
## v0.3.3 / 2015-02-22
* added; `disabled` prop, thanks [Danny Shaw](https://github.com/dannyshaw)
* added; `searchable` prop - set to `false` to disable the search box, thanks [Julen Ruiz Aizpuru](https://github.com/julen)
* added; `onOptionLabelClick` prop - see [#66](https://github.com/JedWatson/react-select/pull/66) for docs, thanks [Dmitry Smirnov](https://github.com/dmitry-smirnov)
* fixed; `text-overflow: ellipsis;` typo, thanks [Andru Vallance](https://github.com/andru)
## v0.3.2 / 2015-01-30

@@ -4,0 +11,0 @@

942

lib/Select.js
"use strict";
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _ = require("underscore"),

@@ -13,519 +15,577 @@ React = require("react"),

displayName: "Select",
displayName: "Select",
propTypes: {
value: React.PropTypes.any, // initial field value
multi: React.PropTypes.bool, // multi-value input
options: React.PropTypes.array, // array of options
delimiter: React.PropTypes.string, // delimiter to use to join multiple values
asyncOptions: React.PropTypes.func, // function to call to get options
autoload: React.PropTypes.bool, // whether to auto-load the default async options set
placeholder: React.PropTypes.string, // field placeholder, displayed when there's no value
noResultsText: React.PropTypes.string, // placeholder displayed when there are no matching search results
clearable: React.PropTypes.bool, // should it be possible to reset value
clearValueText: React.PropTypes.string, // title for the "clear" control
clearAllText: React.PropTypes.string, // title for the "clear" control when multi: true
searchPromptText: React.PropTypes.string, // label to prompt for search input
name: React.PropTypes.string, // field name, for hidden <input /> tag
onChange: React.PropTypes.func, // onChange handler: function(newValue) {}
className: React.PropTypes.string, // className for the outer element
filterOption: React.PropTypes.func, // method to filter a single option: function(option, filterString)
filterOptions: React.PropTypes.func, // method to filter the options array: function([options], filterString, [values])
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
},
propTypes: {
value: React.PropTypes.any, // initial field value
multi: React.PropTypes.bool, // multi-value input
disabled: React.PropTypes.bool, // whether the Select is disabled or not
options: React.PropTypes.array, // array of options
delimiter: React.PropTypes.string, // delimiter to use to join multiple values
asyncOptions: React.PropTypes.func, // function to call to get options
autoload: React.PropTypes.bool, // whether to auto-load the default async options set
placeholder: React.PropTypes.string, // field placeholder, displayed when there's no value
noResultsText: React.PropTypes.string, // placeholder displayed when there are no matching search results
clearable: React.PropTypes.bool, // should it be possible to reset value
clearValueText: React.PropTypes.string, // title for the "clear" control
clearAllText: React.PropTypes.string, // title for the "clear" control when multi: true
searchable: React.PropTypes.bool, // whether to enable searching feature or not
searchPromptText: React.PropTypes.string, // label to prompt for search input
name: React.PropTypes.string, // field name, for hidden <input /> tag
onChange: React.PropTypes.func, // onChange handler: function(newValue) {}
className: React.PropTypes.string, // className for the outer element
filterOption: React.PropTypes.func, // method to filter a single option: function(option, filterString)
filterOptions: React.PropTypes.func, // method to filter the options array: function([options], filterString, [values])
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
getDefaultProps: function () {
return {
value: undefined,
options: [],
delimiter: ",",
asyncOptions: undefined,
autoload: true,
placeholder: "Select...",
noResultsText: "No results found",
clearable: true,
clearValueText: "Clear value",
clearAllText: "Clear all",
searchPromptText: "Type to search",
name: undefined,
onChange: undefined,
className: undefined,
matchPos: "any",
matchProp: "any"
};
},
/*
* Allow user to make option label clickable. When this handler is defined we should
* wrap label into <a>label</a> tag.
*
* onOptionLabelClick handler: function (value, event) {}
* */
onOptionLabelClick: React.PropTypes.func
},
getInitialState: function () {
return {
/*
* set by getStateFromValue on componentWillMount:
* - value
* - values
* - filteredOptions
* - inputValue
* - placeholder
* - focusedOption
*/
options: this.props.options,
isFocused: false,
isOpen: false,
isLoading: false
};
},
getDefaultProps: function () {
return {
value: undefined,
options: [],
disabled: false,
delimiter: ",",
asyncOptions: undefined,
autoload: true,
placeholder: "Select...",
noResultsText: "No results found",
clearable: true,
clearValueText: "Clear value",
clearAllText: "Clear all",
searchable: true,
searchPromptText: "Type to search",
name: undefined,
onChange: undefined,
className: undefined,
matchPos: "any",
matchProp: "any",
componentWillMount: function () {
this._optionsCache = {};
this._optionsFilterString = "";
this.setState(this.getStateFromValue(this.props.value));
onOptionLabelClick: undefined
};
},
if (this.props.asyncOptions && this.props.autoload) {
this.autoloadAsyncOptions();
}
},
getInitialState: function () {
return {
/*
* set by getStateFromValue on componentWillMount:
* - value
* - values
* - filteredOptions
* - inputValue
* - placeholder
* - focusedOption
*/
options: this.props.options,
isFocused: false,
isOpen: false,
isLoading: false
};
},
componentWillUnmount: function () {
clearTimeout(this._blurTimeout);
clearTimeout(this._focusTimeout);
},
componentWillMount: function () {
this._optionsCache = {};
this._optionsFilterString = "";
this.setState(this.getStateFromValue(this.props.value));
componentWillReceiveProps: function (newProps) {
if (newProps.value !== this.state.value) {
this.setState(this.getStateFromValue(newProps.value, newProps.options));
}
if (JSON.stringify(newProps.options) !== JSON.stringify(this.props.options)) {
this.setState({
options: newProps.options,
filteredOptions: this.filterOptions(newProps.options)
});
}
},
if (this.props.asyncOptions && this.props.autoload) {
this.autoloadAsyncOptions();
}
},
componentDidUpdate: function () {
if (this._focusAfterUpdate) {
clearTimeout(this._blurTimeout);
this._focusTimeout = setTimeout((function () {
this.refs.input.focus();
this._focusAfterUpdate = false;
}).bind(this), 50);
}
componentWillUnmount: function () {
clearTimeout(this._blurTimeout);
clearTimeout(this._focusTimeout);
},
if (this._focusedOptionReveal) {
if (this.refs.focused && this.refs.menu) {
var focusedDOM = this.refs.focused.getDOMNode();
var menuDOM = this.refs.menu.getDOMNode();
var focusedRect = focusedDOM.getBoundingClientRect();
var menuRect = menuDOM.getBoundingClientRect();
componentWillReceiveProps: function (newProps) {
if (newProps.value !== this.state.value) {
this.setState(this.getStateFromValue(newProps.value, newProps.options));
}
if (JSON.stringify(newProps.options) !== JSON.stringify(this.props.options)) {
this.setState({
options: newProps.options,
filteredOptions: this.filterOptions(newProps.options)
});
}
},
if (focusedRect.bottom > menuRect.bottom || focusedRect.top < menuRect.top) {
menuDOM.scrollTop = focusedDOM.offsetTop + focusedDOM.clientHeight - menuDOM.offsetHeight;
}
}
componentDidUpdate: function () {
if (this._focusAfterUpdate) {
clearTimeout(this._blurTimeout);
this._focusTimeout = setTimeout((function () {
this.getInputNode().focus();
this._focusAfterUpdate = false;
}).bind(this), 50);
}
this._focusedOptionReveal = false;
}
},
if (this._focusedOptionReveal) {
if (this.refs.focused && this.refs.menu) {
var focusedDOM = this.refs.focused.getDOMNode();
var menuDOM = this.refs.menu.getDOMNode();
var focusedRect = focusedDOM.getBoundingClientRect();
var menuRect = menuDOM.getBoundingClientRect();
getStateFromValue: function (value, options) {
if (!options) {
options = this.state.options;
}
if (focusedRect.bottom > menuRect.bottom || focusedRect.top < menuRect.top) {
menuDOM.scrollTop = focusedDOM.offsetTop + focusedDOM.clientHeight - menuDOM.offsetHeight;
}
}
// reset internal filter string
this._optionsFilterString = "";
this._focusedOptionReveal = false;
}
},
var values = this.initValuesArray(value, options),
filteredOptions = this.filterOptions(options, values);
getStateFromValue: function (value, options) {
if (!options) {
options = this.state.options;
}
return {
value: values.map(function (v) {
return v.value;
}).join(this.props.delimiter),
values: values,
inputValue: "",
filteredOptions: filteredOptions,
placeholder: !this.props.multi && values.length ? values[0].label : this.props.placeholder,
focusedOption: !this.props.multi && values.length ? values[0] : filteredOptions[0]
};
},
// reset internal filter string
this._optionsFilterString = "";
initValuesArray: function (values, options) {
if (!Array.isArray(values)) {
if ("string" === typeof values) {
values = values.split(this.props.delimiter);
} else {
values = values ? [values] : [];
}
}
var values = this.initValuesArray(value, options),
filteredOptions = this.filterOptions(options, values);
return values.map((function (val) {
return "string" === typeof val ? val = _.findWhere(options, { value: val }) || { value: val, label: val } : val;
}).bind(this));
},
return {
value: values.map(function (v) {
return v.value;
}).join(this.props.delimiter),
values: values,
inputValue: "",
filteredOptions: filteredOptions,
placeholder: !this.props.multi && values.length ? values[0].label : this.props.placeholder,
focusedOption: !this.props.multi && values.length ? values[0] : filteredOptions[0]
};
},
setValue: function (value) {
this._focusAfterUpdate = true;
var newState = this.getStateFromValue(value);
newState.isOpen = false;
this.fireChangeEvent(newState);
this.setState(newState);
},
initValuesArray: function (values, options) {
if (!Array.isArray(values)) {
if ("string" === typeof values) {
values = values.split(this.props.delimiter);
} else {
values = values ? [values] : [];
}
}
selectValue: function (value) {
if (!this.props.multi) {
this.setValue(value);
} else if (value) {
this.addValue(value);
}
},
return values.map((function (val) {
return "string" === typeof val ? val = _.findWhere(options, { value: val }) || { value: val, label: val } : val;
}).bind(this));
},
addValue: function (value) {
this.setValue(this.state.values.concat(value));
},
setValue: function (value) {
this._focusAfterUpdate = true;
var newState = this.getStateFromValue(value);
newState.isOpen = false;
this.fireChangeEvent(newState);
this.setState(newState);
},
popValue: function () {
this.setValue(_.initial(this.state.values));
},
selectValue: function (value) {
if (!this.props.multi) {
this.setValue(value);
} else if (value) {
this.addValue(value);
}
},
removeValue: function (value) {
this.setValue(_.without(this.state.values, value));
},
addValue: function (value) {
this.setValue(this.state.values.concat(value));
},
clearValue: function (event) {
// if the event was triggered by a mousedown and not the primary
// button, ignore it.
if (event && event.type == "mousedown" && event.button !== 0) {
return;
}
this.setValue(null);
},
popValue: function () {
this.setValue(_.initial(this.state.values));
},
resetValue: function () {
this.setValue(this.state.value);
},
removeValue: function (value) {
this.setValue(_.without(this.state.values, value));
},
fireChangeEvent: function (newState) {
if (newState.value !== this.state.value && this.props.onChange) {
this.props.onChange(newState.value, newState.values);
}
},
clearValue: function (event) {
// if the event was triggered by a mousedown and not the primary
// button, ignore it.
if (event && event.type == "mousedown" && event.button !== 0) {
return;
}
this.setValue(null);
},
handleMouseDown: function (event) {
// if the event was triggered by a mousedown and not the primary
// button, ignore it.
if (event.type == "mousedown" && event.button !== 0) {
return;
}
event.stopPropagation();
event.preventDefault();
if (this.state.isFocused) {
this.setState({
isOpen: true
});
} else {
this._openAfterFocus = true;
this.refs.input.focus();
}
},
resetValue: function () {
this.setValue(this.state.value);
},
handleInputFocus: function () {
this.setState({
isFocused: true,
isOpen: this.state.isOpen || this._openAfterFocus
});
this._openAfterFocus = false;
},
getInputNode: function () {
var input = this.refs.input;
return this.props.searchable ? input : input.getDOMNode();
},
handleInputBlur: function (event) {
this._blurTimeout = setTimeout((function () {
if (this._focusAfterUpdate) return;
this.setState({
isOpen: false,
isFocused: false
});
}).bind(this), 50);
},
fireChangeEvent: function (newState) {
if (newState.value !== this.state.value && this.props.onChange) {
this.props.onChange(newState.value, newState.values);
}
},
handleKeyDown: function (event) {
switch (event.keyCode) {
handleMouseDown: function (event) {
// if the event was triggered by a mousedown and not the primary
// button, or if the component is disabled, ignore it.
if (this.props.disabled || event.type == "mousedown" && event.button !== 0) {
return;
}
case 8:
// backspace
if (!this.state.inputValue) {
this.popValue();
}
return;
break;
event.stopPropagation();
event.preventDefault();
if (this.state.isFocused) {
this.setState({
isOpen: true
});
} else {
this._openAfterFocus = true;
this.getInputNode().focus();
}
},
case 9:
// tab
if (event.shiftKey || !this.state.isOpen || !this.state.focusedOption) {
return;
}
this.selectFocusedOption();
break;
handleInputFocus: function () {
this.setState({
isFocused: true,
isOpen: this.state.isOpen || this._openAfterFocus
});
this._openAfterFocus = false;
},
case 13:
// enter
this.selectFocusedOption();
break;
handleInputBlur: function (event) {
this._blurTimeout = setTimeout((function () {
if (this._focusAfterUpdate) return;
this.setState({
isOpen: false,
isFocused: false
});
}).bind(this), 50);
},
case 27:
// escape
if (this.state.isOpen) {
this.resetValue();
} else {
this.clearValue();
}
break;
handleKeyDown: function (event) {
if (this.state.disabled) return;
case 38:
// up
this.focusPreviousOption();
break;
switch (event.keyCode) {
case 40:
// down
this.focusNextOption();
break;
case 8:
// backspace
if (!this.state.inputValue) {
this.popValue();
}
return;
break;
default:
return;
}
case 9:
// tab
if (event.shiftKey || !this.state.isOpen || !this.state.focusedOption) {
return;
}
this.selectFocusedOption();
break;
event.preventDefault();
},
case 13:
// enter
this.selectFocusedOption();
break;
handleInputChange: function (event) {
// assign an internal variable because we need to use
// the latest value before setState() has completed.
this._optionsFilterString = event.target.value;
case 27:
// escape
if (this.state.isOpen) {
this.resetValue();
} else {
this.clearValue();
}
break;
if (this.props.asyncOptions) {
this.setState({
isLoading: true,
inputValue: event.target.value
});
this.loadAsyncOptions(event.target.value, {
isLoading: false,
isOpen: true
});
} else {
var filteredOptions = this.filterOptions(this.state.options);
this.setState({
isOpen: true,
inputValue: event.target.value,
filteredOptions: filteredOptions,
focusedOption: _.contains(filteredOptions, this.state.focusedOption) ? this.state.focusedOption : filteredOptions[0]
});
}
},
case 38:
// up
this.focusPreviousOption();
break;
autoloadAsyncOptions: function () {
this.loadAsyncOptions("", {}, function () {});
},
case 40:
// down
this.focusNextOption();
break;
loadAsyncOptions: function (input, state) {
for (var i = 0; i <= input.length; i++) {
var cacheKey = input.slice(0, i);
if (this._optionsCache[cacheKey] && (input === cacheKey || this._optionsCache[cacheKey].complete)) {
var options = this._optionsCache[cacheKey].options;
this.setState(_.extend({
options: options,
filteredOptions: this.filterOptions(options)
}, state));
return;
}
}
default:
return;
}
var thisRequestId = this._currentRequestId = requestId++;
event.preventDefault();
},
this.props.asyncOptions(input, (function (err, data) {
this._optionsCache[input] = data;
handleInputChange: function (event) {
// assign an internal variable because we need to use
// the latest value before setState() has completed.
this._optionsFilterString = event.target.value;
if (thisRequestId !== this._currentRequestId) {
return;
}
if (this.props.asyncOptions) {
this.setState({
isLoading: true,
inputValue: event.target.value
});
this.loadAsyncOptions(event.target.value, {
isLoading: false,
isOpen: true
});
} else {
var filteredOptions = this.filterOptions(this.state.options);
this.setState({
isOpen: true,
inputValue: event.target.value,
filteredOptions: filteredOptions,
focusedOption: _.contains(filteredOptions, this.state.focusedOption) ? this.state.focusedOption : filteredOptions[0]
});
}
},
this.setState(_.extend({
options: data.options,
filteredOptions: this.filterOptions(data.options)
}, state));
}).bind(this));
},
autoloadAsyncOptions: function () {
this.loadAsyncOptions("", {}, function () {});
},
filterOptions: function (options, values) {
var filterValue = this._optionsFilterString;
var exclude = (values || this.state.values).map(function (i) {
return i.value;
});
if (this.props.filterOptions) {
return this.props.filterOptions.call(this, options, filterValue, exclude);
} else {
var filterOption = function (op) {
if (this.props.multi && _.contains(exclude, op.value)) return false;
if (this.props.filterOption) return this.props.filterOption.call(this, op, filterValue);
return !filterValue || this.props.matchPos === "start" ? this.props.matchProp !== "label" && op.value.toLowerCase().substr(0, filterValue.length) === filterValue || this.props.matchProp !== "value" && op.label.toLowerCase().substr(0, filterValue.length) === filterValue : this.props.matchProp !== "label" && op.value.toLowerCase().indexOf(filterValue.toLowerCase()) >= 0 || this.props.matchProp !== "value" && op.label.toLowerCase().indexOf(filterValue.toLowerCase()) >= 0;
};
return _.filter(options, filterOption, this);
}
},
loadAsyncOptions: function (input, state) {
for (var i = 0; i <= input.length; i++) {
var cacheKey = input.slice(0, i);
if (this._optionsCache[cacheKey] && (input === cacheKey || this._optionsCache[cacheKey].complete)) {
var options = this._optionsCache[cacheKey].options;
this.setState(_.extend({
options: options,
filteredOptions: this.filterOptions(options)
}, state));
return;
}
}
selectFocusedOption: function () {
return this.selectValue(this.state.focusedOption);
},
var thisRequestId = this._currentRequestId = requestId++;
focusOption: function (op) {
this.setState({
focusedOption: op
});
},
this.props.asyncOptions(input, (function (err, data) {
this._optionsCache[input] = data;
focusNextOption: function () {
this.focusAdjacentOption("next");
},
if (thisRequestId !== this._currentRequestId) {
return;
}
focusPreviousOption: function () {
this.focusAdjacentOption("previous");
},
this.setState(_.extend({
options: data.options,
filteredOptions: this.filterOptions(data.options)
}, state));
}).bind(this));
},
focusAdjacentOption: function (dir) {
this._focusedOptionReveal = true;
filterOptions: function (options, values) {
if (!this.props.searchable) {
return options;
}
var ops = this.state.filteredOptions;
var filterValue = this._optionsFilterString;
var exclude = (values || this.state.values).map(function (i) {
return i.value;
});
if (this.props.filterOptions) {
return this.props.filterOptions.call(this, options, filterValue, exclude);
} else {
var filterOption = function (op) {
if (this.props.multi && _.contains(exclude, op.value)) return false;
if (this.props.filterOption) return this.props.filterOption.call(this, op, filterValue);
return !filterValue || this.props.matchPos === "start" ? this.props.matchProp !== "label" && op.value.toLowerCase().substr(0, filterValue.length) === filterValue || this.props.matchProp !== "value" && op.label.toLowerCase().substr(0, filterValue.length) === filterValue : this.props.matchProp !== "label" && op.value.toLowerCase().indexOf(filterValue.toLowerCase()) >= 0 || this.props.matchProp !== "value" && op.label.toLowerCase().indexOf(filterValue.toLowerCase()) >= 0;
};
return _.filter(options, filterOption, this);
}
},
if (!this.state.isOpen) {
this.setState({
isOpen: true,
inputValue: "",
focusedOption: this.state.focusedOption || ops[dir === "next" ? 0 : ops.length - 1]
});
return;
}
selectFocusedOption: function () {
return this.selectValue(this.state.focusedOption);
},
if (!ops.length) {
return;
}
focusOption: function (op) {
this.setState({
focusedOption: op
});
},
var focusedIndex = -1;
focusNextOption: function () {
this.focusAdjacentOption("next");
},
for (var i = 0; i < ops.length; i++) {
if (this.state.focusedOption === ops[i]) {
focusedIndex = i;
break;
}
}
focusPreviousOption: function () {
this.focusAdjacentOption("previous");
},
var focusedOption = ops[0];
focusAdjacentOption: function (dir) {
this._focusedOptionReveal = true;
if (dir === "next" && focusedIndex > -1 && focusedIndex < ops.length - 1) {
focusedOption = ops[focusedIndex + 1];
} else if (dir === "previous") {
if (focusedIndex > 0) {
focusedOption = ops[focusedIndex - 1];
} else {
focusedOption = ops[ops.length - 1];
}
}
var ops = this.state.filteredOptions;
this.setState({
focusedOption: focusedOption
});
},
if (!this.state.isOpen) {
this.setState({
isOpen: true,
inputValue: "",
focusedOption: this.state.focusedOption || ops[dir === "next" ? 0 : ops.length - 1]
});
return;
}
unfocusOption: function (op) {
if (this.state.focusedOption === op) {
this.setState({
focusedOption: null
});
}
},
if (!ops.length) {
return;
}
buildMenu: function () {
var focusedValue = this.state.focusedOption ? this.state.focusedOption.value : null;
var focusedIndex = -1;
var ops = _.map(this.state.filteredOptions, function (op) {
var isFocused = focusedValue === op.value;
for (var i = 0; i < ops.length; i++) {
if (this.state.focusedOption === ops[i]) {
focusedIndex = i;
break;
}
}
var optionClass = classes({
"Select-option": true,
"is-focused": isFocused
});
var focusedOption = ops[0];
var ref = isFocused ? "focused" : null;
if (dir === "next" && focusedIndex > -1 && focusedIndex < ops.length - 1) {
focusedOption = ops[focusedIndex + 1];
} else if (dir === "previous") {
if (focusedIndex > 0) {
focusedOption = ops[focusedIndex - 1];
} else {
focusedOption = ops[ops.length - 1];
}
}
var mouseEnter = this.focusOption.bind(this, op),
mouseLeave = this.unfocusOption.bind(this, op),
mouseDown = this.selectValue.bind(this, op);
this.setState({
focusedOption: focusedOption
});
},
return React.createElement(
"div",
{ ref: ref, key: "option-" + op.value, className: optionClass, onMouseEnter: mouseEnter, onMouseLeave: mouseLeave, onMouseDown: mouseDown, onClick: mouseDown },
op.label
);
}, this);
unfocusOption: function (op) {
if (this.state.focusedOption === op) {
this.setState({
focusedOption: null
});
}
},
return ops.length ? ops : React.createElement(
"div",
{ className: "Select-noresults" },
this.props.asyncOptions && !this.state.inputValue ? this.props.searchPromptText : this.props.noResultsText
);
},
buildMenu: function () {
var focusedValue = this.state.focusedOption ? this.state.focusedOption.value : null;
render: function () {
var selectClass = classes("Select", this.props.className, {
"is-multi": this.props.multi,
"is-open": this.state.isOpen,
"is-focused": this.state.isFocused,
"is-loading": this.state.isLoading,
"has-value": this.state.value
});
var ops = _.map(this.state.filteredOptions, function (op) {
var isFocused = focusedValue === op.value;
var value = [];
var optionClass = classes({
"Select-option": true,
"is-focused": isFocused
});
if (this.props.multi) {
this.state.values.forEach(function (val) {
var props = _.extend({
key: val.value,
onRemove: this.removeValue.bind(this, val)
}, val);
value.push(React.createElement(Value, props));
}, this);
}
var ref = isFocused ? "focused" : null;
if (!this.state.inputValue && (!this.props.multi || !value.length)) {
value.push(React.createElement(
"div",
{ className: "Select-placeholder", key: "placeholder" },
this.state.placeholder
));
}
var mouseEnter = this.focusOption.bind(this, op),
mouseLeave = this.unfocusOption.bind(this, op),
mouseDown = this.selectValue.bind(this, op);
var loading = this.state.isLoading ? React.createElement("span", { className: "Select-loading", "aria-hidden": "true" }) : null;
var clear = this.props.clearable && this.state.value ? React.createElement("span", { className: "Select-clear", title: this.props.multi ? this.props.clearAllText : this.props.clearValueText, "aria-label": this.props.multi ? this.props.clearAllText : this.props.clearValueText, onMouseDown: this.clearValue, onClick: this.clearValue, dangerouslySetInnerHTML: { __html: "&times;" } }) : null;
var menu = this.state.isOpen ? React.createElement(
"div",
{ ref: "menu", onMouseDown: this.handleMouseDown, className: "Select-menu" },
this.buildMenu()
) : null;
return React.createElement(
"div",
{ ref: ref, key: "option-" + op.value, className: optionClass, onMouseEnter: mouseEnter, onMouseLeave: mouseLeave, onMouseDown: mouseDown, onClick: mouseDown },
op.label
);
}, this);
return React.createElement(
"div",
{ ref: "wrapper", className: selectClass },
React.createElement("input", { type: "hidden", ref: "value", name: this.props.name, value: this.state.value }),
React.createElement(
"div",
{ className: "Select-control", ref: "control", onKeyDown: this.handleKeyDown, onMouseDown: this.handleMouseDown, onTouchEnd: this.handleMouseDown },
value,
React.createElement(Input, { className: "Select-input", tabIndex: this.props.tabIndex, ref: "input", value: this.state.inputValue, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, onChange: this.handleInputChange, minWidth: "5" }),
React.createElement("span", { className: "Select-arrow" }),
loading,
clear
),
menu
);
}
return ops.length ? ops : React.createElement(
"div",
{ className: "Select-noresults" },
this.props.asyncOptions && !this.state.inputValue ? this.props.searchPromptText : this.props.noResultsText
);
},
handleOptionLabelClick: function (value, event) {
var handler = this.props.onOptionLabelClick;
if (handler) {
handler(value, event);
}
},
render: function () {
var selectClass = classes("Select", this.props.className, {
"is-multi": this.props.multi,
"is-searchable": this.props.searchable,
"is-open": this.state.isOpen,
"is-focused": this.state.isFocused,
"is-loading": this.state.isLoading,
"is-disabled": this.props.disabled,
"has-value": this.state.value
});
var value = [];
if (this.props.multi) {
this.state.values.forEach(function (val) {
var props = _.extend({
key: val.value,
optionLabelClick: !!this.props.onOptionLabelClick,
onOptionLabelClick: this.handleOptionLabelClick.bind(this, val),
onRemove: this.removeValue.bind(this, val)
}, val);
value.push(React.createElement(Value, props));
}, this);
}
if (this.props.disabled || !this.state.inputValue && (!this.props.multi || !value.length)) {
value.push(React.createElement(
"div",
{ className: "Select-placeholder", key: "placeholder" },
this.state.placeholder
));
}
var loading = this.state.isLoading ? React.createElement("span", { className: "Select-loading", "aria-hidden": "true" }) : null;
var clear = this.props.clearable && this.state.value && !this.props.disabled ? React.createElement("span", { className: "Select-clear", title: this.props.multi ? this.props.clearAllText : this.props.clearValueText, "aria-label": this.props.multi ? this.props.clearAllText : this.props.clearValueText, onMouseDown: this.clearValue, onClick: this.clearValue, dangerouslySetInnerHTML: { __html: "&times;" } }) : null;
var menu = this.state.isOpen ? React.createElement(
"div",
{ ref: "menu", onMouseDown: this.handleMouseDown, className: "Select-menu" },
this.buildMenu()
) : null;
var commonProps = {
ref: "input",
className: "Select-input",
tabIndex: this.props.tabIndex || 0,
onFocus: this.handleInputFocus,
onBlur: this.handleInputBlur
};
var input;
if (this.props.searchable && !this.props.disabled) {
input = React.createElement(Input, _extends({ value: this.state.inputValue, onChange: this.handleInputChange, minWidth: "5" }, commonProps));
} else {
input = React.createElement(
"div",
commonProps,
" "
);
}
return React.createElement(
"div",
{ ref: "wrapper", className: selectClass },
React.createElement("input", { type: "hidden", ref: "value", name: this.props.name, value: this.state.value, disabled: this.props.disabled }),
React.createElement(
"div",
{ className: "Select-control", ref: "control", onKeyDown: this.handleKeyDown, onMouseDown: this.handleMouseDown, onTouchEnd: this.handleMouseDown },
value,
input,
React.createElement("span", { className: "Select-arrow" }),
loading,
clear
),
menu
);
}
});
module.exports = Select;

65

lib/Value.js
"use strict";
var _ = require("underscore"),
React = require("react"),
classes = require("classnames");
React = require("react");
var Option = React.createClass({
displayName: "Value",
displayName: "Value",
propTypes: {
label: React.PropTypes.string.isRequired
},
propTypes: {
label: React.PropTypes.string.isRequired
},
blockEvent: function (event) {
event.stopPropagation();
},
blockEvent: function (event) {
event.stopPropagation();
},
render: function () {
return React.createElement(
"div",
{ className: "Select-item" },
React.createElement(
"span",
{ className: "Select-item-icon", onMouseDown: this.blockEvent, onClick: this.props.onRemove, onTouchEnd: this.props.onRemove },
"×"
),
React.createElement(
"span",
{ className: "Select-item-label" },
this.props.label
)
);
}
render: function () {
var label = this.props.label;
if (this.props.optionLabelClick) {
label = React.createElement(
"a",
{ className: "Select-item-label__a",
onMouseDown: this.blockEvent,
onTouchEnd: this.props.onOptionLabelClick,
onClick: this.props.onOptionLabelClick },
label
);
}
return React.createElement(
"div",
{ className: "Select-item" },
React.createElement(
"span",
{ className: "Select-item-icon",
onMouseDown: this.blockEvent,
onClick: this.props.onRemove,
onTouchEnd: this.props.onRemove },
"×"
),
React.createElement(
"span",
{ className: "Select-item-label" },
label
)
);
}
});
module.exports = Option;

30

package.json
{
"name": "react-select",
"version": "0.3.2",
"version": "0.3.3",
"description": "A Select control built with and for ReactJS",

@@ -13,27 +13,27 @@ "main": "lib/Select.js",

"dependencies": {
"classnames": "^1.0.0",
"classnames": "^1.1.4",
"lodash": "^3.3.0",
"react": "^0.12.2",
"react-input-autosize": "^0.3.1",
"underscore": "^1.7.0"
"react-input-autosize": "^0.3.1"
},
"devDependencies": {
"6to5ify": "^3.1.2",
"browserify": "^8.1.1",
"browserify-shim": "^3.8.2",
"6to5ify": "^4.1.1",
"browserify": "^9.0.3",
"browserify-shim": "^3.8.3",
"chalk": "^0.5.1",
"del": "^1.1.1",
"gulp": "^3.8.10",
"gulp-6to5": "^2.0.2",
"gulp-bump": "^0.1.11",
"gulp": "^3.8.11",
"gulp-6to5": "^3.0.0",
"gulp-bump": "^0.1.13",
"gulp-connect": "^2.2.0",
"gulp-gh-pages": "^0.4.0",
"gulp-git": "^0.5.6",
"gulp-less": "^2.0.1",
"gulp-git": "^1.0.0",
"gulp-less": "^3.0.1",
"gulp-rename": "^1.2.0",
"gulp-streamify": "^0.0.5",
"gulp-uglify": "^1.1.0",
"gulp-util": "^3.0.2",
"gulp-util": "^3.0.3",
"merge-stream": "^0.1.7",
"vinyl-source-stream": "^1.0.0",
"watchify": "^2.2.1"
"watchify": "^2.4.0"
},

@@ -43,3 +43,3 @@ "browserify-shim": {

"react-input-autosize": "global:AutosizeInput",
"underscore": "global:_"
"lodash": "global:_"
},

@@ -46,0 +46,0 @@ "scripts": {

79

src/Select.js

@@ -16,2 +16,3 @@ var _ = require('underscore'),

multi: React.PropTypes.bool, // multi-value input
disabled: React.PropTypes.bool, // whether the Select is disabled or not
options: React.PropTypes.array, // array of options

@@ -26,2 +27,3 @@ delimiter: React.PropTypes.string, // delimiter to use to join multiple values

clearAllText: React.PropTypes.string, // title for the "clear" control when multi: true
searchable: React.PropTypes.bool, // whether to enable searching feature or not
searchPromptText: React.PropTypes.string, // label to prompt for search input

@@ -34,3 +36,12 @@ name: React.PropTypes.string, // field name, for hidden <input /> tag

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
matchProp: React.PropTypes.string, // (any|label|value) which option property to filter on
/*
* Allow user to make option label clickable. When this handler is defined we should
* wrap label into <a>label</a> tag.
*
* onOptionLabelClick handler: function (value, event) {}
* */
onOptionLabelClick: React.PropTypes.func
},

@@ -42,2 +53,3 @@

options: [],
disabled: false,
delimiter: ',',

@@ -51,2 +63,3 @@ asyncOptions: undefined,

clearAllText: 'Clear all',
searchable: true,
searchPromptText: 'Type to search',

@@ -57,3 +70,5 @@ name: undefined,

matchPos: 'any',
matchProp: 'any'
matchProp: 'any',
onOptionLabelClick: undefined
};

@@ -111,3 +126,3 @@ },

this._focusTimeout = setTimeout(function() {
this.refs.input.focus();
this.getInputNode().focus();
this._focusAfterUpdate = false;

@@ -200,3 +215,3 @@ }.bind(this), 50);

},
clearValue: function(event) {

@@ -215,2 +230,7 @@ // if the event was triggered by a mousedown and not the primary

getInputNode: function () {
var input = this.refs.input;
return this.props.searchable ? input : input.getDOMNode();
},
fireChangeEvent: function(newState) {

@@ -224,6 +244,7 @@ if (newState.value !== this.state.value && this.props.onChange) {

// if the event was triggered by a mousedown and not the primary
// button, ignore it.
if (event.type == 'mousedown' && event.button !== 0) {
// button, or if the component is disabled, ignore it.
if (this.props.disabled || (event.type == 'mousedown' && event.button !== 0)) {
return;
}
event.stopPropagation();

@@ -237,3 +258,3 @@ event.preventDefault();

this._openAfterFocus = true;
this.refs.input.focus();
this.getInputNode().focus();
}

@@ -262,2 +283,5 @@ },

if(this.state.disabled)
return;
switch (event.keyCode) {

@@ -371,2 +395,6 @@

filterOptions: function(options, values) {
if (!this.props.searchable) {
return options;
}
var filterValue = this._optionsFilterString;

@@ -495,2 +523,10 @@ var exclude = (values || this.state.values).map(function(i) {

handleOptionLabelClick: function (value, event) {
var handler = this.props.onOptionLabelClick;
if (handler) {
handler(value, event);
}
},
render: function() {

@@ -500,5 +536,7 @@

'is-multi': this.props.multi,
'is-searchable': this.props.searchable,
'is-open': this.state.isOpen,
'is-focused': this.state.isFocused,
'is-loading': this.state.isLoading,
'is-disabled' : this.props.disabled,
'has-value': this.state.value

@@ -513,4 +551,6 @@ });

key: val.value,
optionLabelClick: !!this.props.onOptionLabelClick,
onOptionLabelClick: this.handleOptionLabelClick.bind(this, val),
onRemove: this.removeValue.bind(this, val)
}, val);
}, val);
value.push(<Value {...props} />);

@@ -520,3 +560,3 @@ }, this);

if (!this.state.inputValue && (!this.props.multi || !value.length)) {
if (this.props.disabled || (!this.state.inputValue && (!this.props.multi || !value.length))) {
value.push(<div className="Select-placeholder" key="placeholder">{this.state.placeholder}</div>);

@@ -526,11 +566,26 @@ }

var loading = this.state.isLoading ? <span className="Select-loading" aria-hidden="true" /> : null;
var clear = this.props.clearable && this.state.value ? <span className="Select-clear" title={this.props.multi ? this.props.clearAllText : this.props.clearValueText} aria-label={this.props.multi ? this.props.clearAllText : this.props.clearValueText} onMouseDown={this.clearValue} onClick={this.clearValue} dangerouslySetInnerHTML={{ __html: '&times;' }} /> : null;
var clear = this.props.clearable && this.state.value && !this.props.disabled ? <span className="Select-clear" title={this.props.multi ? this.props.clearAllText : this.props.clearValueText} aria-label={this.props.multi ? this.props.clearAllText : this.props.clearValueText} onMouseDown={this.clearValue} onClick={this.clearValue} dangerouslySetInnerHTML={{ __html: '&times;' }} /> : null;
var menu = this.state.isOpen ? <div ref="menu" onMouseDown={this.handleMouseDown} className="Select-menu">{this.buildMenu()}</div> : null;
var commonProps = {
ref: 'input',
className: 'Select-input',
tabIndex: this.props.tabIndex || 0,
onFocus: this.handleInputFocus,
onBlur: this.handleInputBlur
};
var input;
if (this.props.searchable && !this.props.disabled) {
input = <Input value={this.state.inputValue} onChange={this.handleInputChange} minWidth="5" {...commonProps} />;
} else {
input = <div {...commonProps}>&nbsp;</div>;
}
return (
<div ref="wrapper" className={selectClass}>
<input type="hidden" ref="value" name={this.props.name} value={this.state.value} />
<input type="hidden" ref="value" name={this.props.name} value={this.state.value} disabled={this.props.disabled} />
<div className="Select-control" ref="control" onKeyDown={this.handleKeyDown} onMouseDown={this.handleMouseDown} onTouchEnd={this.handleMouseDown}>
{value}
<Input className="Select-input" tabIndex={this.props.tabIndex} ref="input" value={this.state.inputValue} onFocus={this.handleInputFocus} onBlur={this.handleInputBlur} onChange={this.handleInputChange} minWidth="5" />
{input}
<span className="Select-arrow" />

@@ -537,0 +592,0 @@ {loading}

27

src/Value.js
var _ = require('underscore'),
React = require('react'),
classes = require('classnames');
React = require('react');

@@ -14,10 +13,28 @@ var Option = React.createClass({

blockEvent: function(event) {
event.stopPropagation();
event.stopPropagation();
},
render: function() {
var label = this.props.label;
if (this.props.optionLabelClick) {
label = (
<a className="Select-item-label__a"
onMouseDown={this.blockEvent}
onTouchEnd={this.props.onOptionLabelClick}
onClick={this.props.onOptionLabelClick}>
{label}
</a>
);
}
return (
<div className="Select-item">
<span className="Select-item-icon" onMouseDown={this.blockEvent} onClick={this.props.onRemove} onTouchEnd={this.props.onRemove}>&times;</span>
<span className="Select-item-label">{this.props.label}</span>
<span className="Select-item-icon"
onMouseDown={this.blockEvent}
onClick={this.props.onRemove}
onTouchEnd={this.props.onRemove}>&times;</span>
<span className="Select-item-label">{label}</span>
</div>

@@ -24,0 +41,0 @@ );

dist/default.css

Sorry, the diff of this file is not supported yet

less/select-control.less

Sorry, the diff of this file is not supported yet

less/select-multi.less

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc