Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-select
Advanced tools
react-select - npm Package Compare versions
Comparing version 0.6.6 to 0.6.7
1108
.publish/app.js
| require=(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){ | ||
| /* eslint react/prop-types: 0 */ | ||
| 'use strict'; | ||
| var React = require('react'); | ||
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } | ||
| var Gravatar = require('react-gravatar'); | ||
| var _react = require('react'); | ||
| var Option = React.createClass({ | ||
| displayName: 'Option', | ||
| var _react2 = _interopRequireDefault(_react); | ||
| propTypes: { | ||
| addLabelText: React.PropTypes.string, | ||
| className: React.PropTypes.string, | ||
| mouseDown: React.PropTypes.func, | ||
| mouseEnter: React.PropTypes.func, | ||
| mouseLeave: React.PropTypes.func, | ||
| option: React.PropTypes.object.isRequired, | ||
| renderFunc: React.PropTypes.func | ||
| }, | ||
| var _reactSelect = require('react-select'); | ||
| render: function render() { | ||
| var obj = this.props.option; | ||
| var size = 15; | ||
| var _reactSelect2 = _interopRequireDefault(_reactSelect); | ||
| return React.createElement( | ||
| 'div', | ||
| { className: this.props.className, | ||
| onMouseEnter: this.props.mouseEnter, | ||
| onMouseLeave: this.props.mouseLeave, | ||
| onMouseDown: this.props.mouseDown, | ||
| onClick: this.props.mouseDown }, | ||
| React.createElement(Gravatar, { email: obj.email, size: size }), | ||
| obj.value | ||
| ); | ||
| } | ||
| }); | ||
| var _componentsCustomRenderField = require('./components/CustomRenderField'); | ||
| module.exports = Option; | ||
| var _componentsCustomRenderField2 = _interopRequireDefault(_componentsCustomRenderField); | ||
| },{"react":undefined,"react-gravatar":9}],2:[function(require,module,exports){ | ||
| 'use strict'; | ||
| var _componentsMultiSelectField = require('./components/MultiSelectField'); | ||
| var React = require('react'); | ||
| var Gravatar = require('react-gravatar'); | ||
| var _componentsMultiSelectField2 = _interopRequireDefault(_componentsMultiSelectField); | ||
| var SingleValue = React.createClass({ | ||
| displayName: 'SingleValue', | ||
| var _componentsRemoteSelectField = require('./components/RemoteSelectField'); | ||
| propTypes: { | ||
| placeholder: React.PropTypes.string, | ||
| value: React.PropTypes.object | ||
| }, | ||
| var _componentsRemoteSelectField2 = _interopRequireDefault(_componentsRemoteSelectField); | ||
| render: function render() { | ||
| var obj = this.props.value; | ||
| var size = 15; | ||
| var _componentsSelectedValuesField = require('./components/SelectedValuesField'); | ||
| return React.createElement( | ||
| 'div', | ||
| { className: 'Select-placeholder' }, | ||
| obj ? React.createElement( | ||
| 'div', | ||
| null, | ||
| React.createElement(Gravatar, { email: obj.email, size: size }), | ||
| obj.value | ||
| ) : this.props.placeholder | ||
| ); | ||
| } | ||
| }); | ||
| var _componentsSelectedValuesField2 = _interopRequireDefault(_componentsSelectedValuesField); | ||
| module.exports = SingleValue; | ||
| var _componentsStatesField = require('./components/StatesField'); | ||
| },{"react":undefined,"react-gravatar":9}],3:[function(require,module,exports){ | ||
| /* eslint react/prop-types: 0 */ | ||
| var _componentsStatesField2 = _interopRequireDefault(_componentsStatesField); | ||
| 'use strict'; | ||
| var _componentsUsersField = require('./components/UsersField'); | ||
| var React = require('react'); | ||
| var Select = require('react-select'); | ||
| var GravatarOption = require('./CustomOption'); | ||
| var GravatarValue = require('./CustomSingleValue'); | ||
| var _componentsUsersField2 = _interopRequireDefault(_componentsUsersField); | ||
| var STATES = require('./data/states'); | ||
| var USERS = require('./data/users'); | ||
| var id = 0; | ||
| var _componentsValuesAsNumbersField = require('./components/ValuesAsNumbersField'); | ||
| var _componentsValuesAsNumbersField2 = _interopRequireDefault(_componentsValuesAsNumbersField); | ||
| var _componentsDisabledUpsellOptions = require('./components/DisabledUpsellOptions'); | ||
| var _componentsDisabledUpsellOptions2 = _interopRequireDefault(_componentsDisabledUpsellOptions); | ||
| var FLAVOURS = [{ label: 'Chocolate', value: 'chocolate' }, { label: 'Vanilla', value: 'vanilla' }, { label: 'Strawberry', value: 'strawberry' }, { label: 'Cookies and Cream', value: 'cookiescream' }, { label: 'Peppermint', value: 'peppermint' }]; | ||
| var FLAVOURS_WITH_DISABLED_OPTION = FLAVOURS.slice(0); | ||
| FLAVOURS_WITH_DISABLED_OPTION.unshift({ label: 'Caramel (You don\'t like it, apparently)', value: 'caramel', disabled: true }); | ||
| function logChange() { | ||
| console.log.apply(console, [].concat(['Select value changed: '], Array.prototype.slice.apply(arguments))); | ||
| console.log.apply(console, [].concat(['Select value changed:'], Array.prototype.slice.apply(arguments))); | ||
| } | ||
| var CountrySelect = React.createClass({ | ||
| displayName: 'CountrySelect', | ||
| _react2['default'].render(_react2['default'].createElement( | ||
| 'div', | ||
| null, | ||
| _react2['default'].createElement(_componentsStatesField2['default'], { label: 'States', searchable: true }), | ||
| _react2['default'].createElement(_componentsUsersField2['default'], { label: 'Users (custom options/value)', hint: 'This example uses Gravatar to render user\'s image besides the value and the options' }), | ||
| _react2['default'].createElement(_componentsValuesAsNumbersField2['default'], { label: 'Values as numbers' }), | ||
| _react2['default'].createElement(_componentsMultiSelectField2['default'], { label: 'Multiselect' }), | ||
| _react2['default'].createElement(_componentsSelectedValuesField2['default'], { label: 'Clickable labels (labels as links)', options: FLAVOURS, hint: 'Open the console to see click behaviour (data/event)' }), | ||
| _react2['default'].createElement(_componentsSelectedValuesField2['default'], { label: 'Disabled option', options: FLAVOURS_WITH_DISABLED_OPTION, hint: 'You savage! Caramel is the best...' }), | ||
| _react2['default'].createElement(_componentsDisabledUpsellOptions2['default'], { label: 'Disable option with an upsell link' }), | ||
| _react2['default'].createElement(_componentsSelectedValuesField2['default'], { label: 'Option Creation (tags mode)', options: FLAVOURS, allowCreate: true, hint: 'Enter a value that\'s not in the list, then hit enter' }), | ||
| _react2['default'].createElement(_componentsCustomRenderField2['default'], { label: 'Custom render options/values' }), | ||
| _react2['default'].createElement(_componentsCustomRenderField2['default'], { label: 'Custom render options/values (multi)', multi: true, delimiter: ',' }), | ||
| _react2['default'].createElement(_componentsRemoteSelectField2['default'], { label: 'Remote Options', hint: 'Type anything in the remote example to asynchronously load options. Valid alternative results are "A", "AA", and "AB"' }) | ||
| ), document.getElementById('example')); | ||
| onClick: function onClick() { | ||
| this.props.onSelect(this.props.value); | ||
| },{"./components/CustomRenderField":3,"./components/DisabledUpsellOptions":5,"./components/MultiSelectField":6,"./components/RemoteSelectField":7,"./components/SelectedValuesField":8,"./components/StatesField":9,"./components/UsersField":10,"./components/ValuesAsNumbersField":11,"react":undefined,"react-select":undefined}],2:[function(require,module,exports){ | ||
| 'use strict'; | ||
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } | ||
| var _react = require('react'); | ||
| var _react2 = _interopRequireDefault(_react); | ||
| var _reactGravatar = require('react-gravatar'); | ||
| var _reactGravatar2 = _interopRequireDefault(_reactGravatar); | ||
| var Option = _react2['default'].createClass({ | ||
| displayName: 'Option', | ||
| propTypes: { | ||
| addLabelText: _react2['default'].PropTypes.string, | ||
| className: _react2['default'].PropTypes.string, | ||
| mouseDown: _react2['default'].PropTypes.func, | ||
| mouseEnter: _react2['default'].PropTypes.func, | ||
| mouseLeave: _react2['default'].PropTypes.func, | ||
| option: _react2['default'].PropTypes.object.isRequired, | ||
| renderFunc: _react2['default'].PropTypes.func | ||
| }, | ||
| render: function render() { | ||
| var className = this.props.value === this.props.selected ? 'active' : 'link'; | ||
| return React.createElement( | ||
| 'span', | ||
| { onClick: this.onClick, className: className }, | ||
| this.props.children | ||
| var obj = this.props.option; | ||
| var size = 15; | ||
| var gravatarStyle = { | ||
| borderRadius: 3, | ||
| display: 'inline-block', | ||
| marginRight: 10, | ||
| position: 'relative', | ||
| top: -2, | ||
| verticalAlign: 'middle' | ||
| }; | ||
| return _react2['default'].createElement( | ||
| 'div', | ||
| { className: this.props.className, | ||
| onMouseEnter: this.props.mouseEnter, | ||
| onMouseLeave: this.props.mouseLeave, | ||
| onMouseDown: this.props.mouseDown, | ||
| onClick: this.props.mouseDown }, | ||
| _react2['default'].createElement(_reactGravatar2['default'], { email: obj.email, size: size, style: gravatarStyle }), | ||
| obj.value | ||
| ); | ||
@@ -107,27 +121,64 @@ } | ||
| var UsersField = React.createClass({ | ||
| displayName: 'UsersField', | ||
| module.exports = Option; | ||
| getDefaultProps: function getDefaultProps() { | ||
| return { | ||
| searchable: true, | ||
| label: 'Users: (with custom option and value component)' | ||
| }; | ||
| },{"react":undefined,"react-gravatar":17}],3:[function(require,module,exports){ | ||
| 'use strict'; | ||
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } | ||
| var _react = require('react'); | ||
| var _react2 = _interopRequireDefault(_react); | ||
| var _reactSelect = require('react-select'); | ||
| var _reactSelect2 = _interopRequireDefault(_reactSelect); | ||
| function logChange() { | ||
| console.log.apply(console, [].concat(['Select value changed:'], Array.prototype.slice.apply(arguments))); | ||
| } | ||
| var CustomRenderField = _react2['default'].createClass({ | ||
| displayName: 'CustomRenderField', | ||
| propTypes: { | ||
| delimiter: _react2['default'].PropTypes.string, | ||
| label: _react2['default'].PropTypes.string, | ||
| multi: _react2['default'].PropTypes.bool | ||
| }, | ||
| renderOption: function renderOption(option) { | ||
| return _react2['default'].createElement( | ||
| 'span', | ||
| { style: { color: option.hex } }, | ||
| option.label, | ||
| ' (', | ||
| option.hex, | ||
| ')' | ||
| ); | ||
| }, | ||
| renderValue: function renderValue(option) { | ||
| return _react2['default'].createElement( | ||
| 'strong', | ||
| { style: { color: option.hex } }, | ||
| option.label | ||
| ); | ||
| }, | ||
| render: function render() { | ||
| return React.createElement( | ||
| var ops = [{ label: 'Red', value: 'red', hex: '#EC6230' }, { label: 'Green', value: 'green', hex: '#4ED84E' }, { label: 'Blue', value: 'blue', hex: '#6D97E2' }]; | ||
| return _react2['default'].createElement( | ||
| 'div', | ||
| null, | ||
| React.createElement( | ||
| 'label', | ||
| null, | ||
| { className: 'section' }, | ||
| _react2['default'].createElement( | ||
| 'h3', | ||
| { className: 'section-heading' }, | ||
| this.props.label | ||
| ), | ||
| React.createElement(Select, { | ||
| onOptionLabelClick: this.onLabelClick, | ||
| placeholder: 'Select user', | ||
| optionComponent: GravatarOption, | ||
| singleValueComponent: GravatarValue, | ||
| options: USERS.users }) | ||
| _react2['default'].createElement(_reactSelect2['default'], { | ||
| delimiter: this.props.delimiter, | ||
| multi: this.props.multi, | ||
| allowCreate: true, | ||
| placeholder: 'Select your favourite', | ||
| options: ops, | ||
| optionRenderer: this.renderOption, | ||
| valueRenderer: this.renderValue, | ||
| onChange: logChange }) | ||
| ); | ||
@@ -137,181 +188,172 @@ } | ||
| var ValuesAsNumbersField = React.createClass({ | ||
| displayName: 'ValuesAsNumbersField', | ||
| module.exports = CustomRenderField; | ||
| getInitialState: function getInitialState() { | ||
| return { | ||
| options: [{ value: 10, label: 'Ten' }, { value: 11, label: 'Eleven' }, { value: 12, label: 'Twelve' }, { value: 23, label: 'Twenty-three' }, { value: 24, label: 'Twenty-three' }], | ||
| matchPos: 'any', | ||
| matchValue: true, | ||
| matchLabel: true, | ||
| value: null, | ||
| multi: false | ||
| }; | ||
| }, | ||
| },{"react":undefined,"react-select":undefined}],4:[function(require,module,exports){ | ||
| 'use strict'; | ||
| onChangeMatchStart: function onChangeMatchStart(event) { | ||
| this.setState({ | ||
| matchPos: event.target.checked ? 'start' : 'any' | ||
| }); | ||
| }, | ||
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } | ||
| onChangeMatchValue: function onChangeMatchValue(event) { | ||
| this.setState({ | ||
| matchValue: event.target.checked | ||
| }); | ||
| }, | ||
| var _react = require('react'); | ||
| onChangeMatchLabel: function onChangeMatchLabel(event) { | ||
| this.setState({ | ||
| matchLabel: event.target.checked | ||
| }); | ||
| }, | ||
| var _react2 = _interopRequireDefault(_react); | ||
| onChange: function onChange(value, values) { | ||
| this.setState({ | ||
| value: value | ||
| }); | ||
| logChange(value, values); | ||
| }, | ||
| var _reactGravatar = require('react-gravatar'); | ||
| onChangeMulti: function onChangeMulti(event) { | ||
| this.setState({ | ||
| multi: event.target.checked | ||
| }); | ||
| var _reactGravatar2 = _interopRequireDefault(_reactGravatar); | ||
| var SingleValue = _react2['default'].createClass({ | ||
| displayName: 'SingleValue', | ||
| propTypes: { | ||
| placeholder: _react2['default'].PropTypes.string, | ||
| value: _react2['default'].PropTypes.object | ||
| }, | ||
| render: function render() { | ||
| var obj = this.props.value; | ||
| var size = 15; | ||
| var gravatarStyle = { | ||
| borderRadius: 3, | ||
| display: 'inline-block', | ||
| marginRight: 10, | ||
| position: 'relative', | ||
| top: -2, | ||
| verticalAlign: 'middle' | ||
| }; | ||
| var matchProp = 'any'; | ||
| return _react2['default'].createElement( | ||
| 'div', | ||
| { className: 'Select-placeholder' }, | ||
| obj ? _react2['default'].createElement( | ||
| 'div', | ||
| null, | ||
| _react2['default'].createElement(_reactGravatar2['default'], { email: obj.email, size: size, style: gravatarStyle }), | ||
| obj.value | ||
| ) : this.props.placeholder | ||
| ); | ||
| } | ||
| }); | ||
| if (this.state.matchLabel && !this.state.matchValue) { | ||
| matchProp = 'label'; | ||
| } | ||
| module.exports = SingleValue; | ||
| if (!this.state.matchLabel && this.state.matchValue) { | ||
| matchProp = 'value'; | ||
| } | ||
| },{"react":undefined,"react-gravatar":17}],5:[function(require,module,exports){ | ||
| 'use strict'; | ||
| return React.createElement( | ||
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } | ||
| var _react = require('react'); | ||
| var _react2 = _interopRequireDefault(_react); | ||
| var _reactSelect = require('react-select'); | ||
| var _reactSelect2 = _interopRequireDefault(_reactSelect); | ||
| function logChange() { | ||
| console.log.apply(console, [].concat(['Select value changed:'], Array.prototype.slice.apply(arguments))); | ||
| } | ||
| var DisabledUpsellOptions = _react2['default'].createClass({ | ||
| displayName: 'DisabledUpsellOptions', | ||
| propTypes: { | ||
| label: _react2['default'].PropTypes.string | ||
| }, | ||
| onLabelClick: function onLabelClick(data, event) { | ||
| console.log(data, event); | ||
| }, | ||
| renderLink: function renderLink() { | ||
| return _react2['default'].createElement( | ||
| 'a', | ||
| { style: { marginLeft: 5 }, href: '/upgrade', target: '_blank' }, | ||
| 'Upgrade here!' | ||
| ); | ||
| }, | ||
| renderOption: function renderOption(option) { | ||
| return _react2['default'].createElement( | ||
| 'span', | ||
| null, | ||
| option.label, | ||
| ' ', | ||
| option.link, | ||
| ' ' | ||
| ); | ||
| }, | ||
| render: function render() { | ||
| var ops = [{ label: 'Basic customer support', value: 'basic' }, { label: 'Premium customer support', value: 'premium' }, { label: 'Pro customer support', value: 'pro', disabled: true, link: this.renderLink() }]; | ||
| return _react2['default'].createElement( | ||
| 'div', | ||
| null, | ||
| React.createElement( | ||
| 'label', | ||
| null, | ||
| { className: 'section' }, | ||
| _react2['default'].createElement( | ||
| 'h3', | ||
| { className: 'section-heading' }, | ||
| this.props.label | ||
| ), | ||
| React.createElement(Select, { | ||
| searchable: true, | ||
| matchProp: matchProp, | ||
| matchPos: this.state.matchPos, | ||
| options: this.state.options, | ||
| onChange: this.onChange, | ||
| value: this.state.value, | ||
| multi: this.state.multi | ||
| }), | ||
| React.createElement( | ||
| 'div', | ||
| null, | ||
| React.createElement( | ||
| 'label', | ||
| { htmlFor: 'values-as-numbers-multi' }, | ||
| 'Multi-Select?' | ||
| ), | ||
| React.createElement('input', { type: 'checkbox', id: 'values-as-numbers-multi', checked: this.state.multi, onChange: this.onChangeMulti }), | ||
| React.createElement( | ||
| 'label', | ||
| { htmlFor: 'values-as-numbers-matchstart' }, | ||
| 'Match only at start?' | ||
| ), | ||
| React.createElement('input', { type: 'checkbox', id: 'values-as-numbers-matchstart', checked: this.state.matchPos === 'start', onChange: this.onChangeMatchStart }), | ||
| React.createElement( | ||
| 'label', | ||
| { htmlFor: 'values-as-numbers-matchvalue' }, | ||
| 'Match value?' | ||
| ), | ||
| React.createElement('input', { type: 'checkbox', id: 'values-as-numbers-matchvalue', checked: this.state.matchValue, onChange: this.onChangeMatchValue }), | ||
| React.createElement( | ||
| 'label', | ||
| { htmlFor: 'values-as-numbers-matchlabel' }, | ||
| 'Match label?' | ||
| ), | ||
| React.createElement('input', { type: 'checkbox', id: 'values-as-numbers-matchlabel', checked: this.state.matchLabel, onChange: this.onChangeMatchLabel }) | ||
| ) | ||
| _react2['default'].createElement(_reactSelect2['default'], { | ||
| onOptionLabelClick: this.onLabelClick, | ||
| placeholder: 'Select your support level', | ||
| options: ops, | ||
| optionRenderer: this.renderOption, | ||
| onChange: logChange }) | ||
| ); | ||
| } | ||
| }); | ||
| module.exports = DisabledUpsellOptions; | ||
| var StatesField = React.createClass({ | ||
| displayName: 'StatesField', | ||
| },{"react":undefined,"react-select":undefined}],6:[function(require,module,exports){ | ||
| 'use strict'; | ||
| getDefaultProps: function getDefaultProps() { | ||
| return { | ||
| searchable: true, | ||
| label: 'States:' | ||
| }; | ||
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } | ||
| var _react = require('react'); | ||
| var _react2 = _interopRequireDefault(_react); | ||
| var _reactSelect = require('react-select'); | ||
| var _reactSelect2 = _interopRequireDefault(_reactSelect); | ||
| function logChange() { | ||
| console.log.apply(console, [].concat(['Select value changed:'], Array.prototype.slice.apply(arguments))); | ||
| } | ||
| var MultiSelectField = _react2['default'].createClass({ | ||
| displayName: 'MultiSelectField', | ||
| propTypes: { | ||
| label: _react2['default'].PropTypes.string | ||
| }, | ||
| getInitialState: function getInitialState() { | ||
| return { | ||
| country: 'AU', | ||
| disabled: false, | ||
| id: ++id, | ||
| selectValue: 'new-south-wales' | ||
| value: [] | ||
| }; | ||
| }, | ||
| switchCountry: function switchCountry(newCountry) { | ||
| console.log('Country changed to ' + newCountry); | ||
| this.setState({ | ||
| country: newCountry, | ||
| selectValue: null | ||
| }); | ||
| handleSelectChange: function handleSelectChange(value, values) { | ||
| logChange('New value:', value, 'Values:', values); | ||
| this.setState({ value: value }); | ||
| }, | ||
| updateValue: function updateValue(newValue) { | ||
| logChange('State changed to ' + newValue); | ||
| this.setState({ | ||
| selectValue: newValue || null | ||
| }); | ||
| }, | ||
| focusStateSelect: function focusStateSelect() { | ||
| this.refs.stateSelect.focus(); | ||
| }, | ||
| toggleDisabled: function toggleDisabled(e) { | ||
| this.setState({ disabled: e.target.checked }); | ||
| this.setState({ 'disabled': e.target.checked }); | ||
| }, | ||
| render: function render() { | ||
| var ops = STATES[this.state.country]; | ||
| return React.createElement( | ||
| 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 _react2['default'].createElement( | ||
| 'div', | ||
| null, | ||
| React.createElement( | ||
| 'label', | ||
| null, | ||
| { className: 'section' }, | ||
| _react2['default'].createElement( | ||
| 'h3', | ||
| { className: 'section-heading' }, | ||
| this.props.label | ||
| ), | ||
| React.createElement(Select, { ref: 'stateSelect', options: ops, disabled: this.state.disabled, value: this.state.selectValue, onChange: this.updateValue, searchable: this.props.searchable }), | ||
| React.createElement( | ||
| _react2['default'].createElement(_reactSelect2['default'], { multi: true, disabled: this.state.disabled, value: this.state.value, placeholder: 'Select your favourite(s)', options: ops, onChange: this.handleSelectChange }), | ||
| _react2['default'].createElement( | ||
| 'div', | ||
| { className: 'switcher' }, | ||
| 'Country:', | ||
| React.createElement( | ||
| CountrySelect, | ||
| { value: 'AU', selected: this.state.country, onSelect: this.switchCountry }, | ||
| 'Australia' | ||
| ), | ||
| React.createElement( | ||
| CountrySelect, | ||
| { value: 'US', selected: this.state.country, onSelect: this.switchCountry }, | ||
| 'US' | ||
| ), | ||
| ' ', | ||
| React.createElement( | ||
| 'button', | ||
| { type: 'button', onClick: this.focusStateSelect }, | ||
| 'Focus Select' | ||
| ), | ||
| ' ', | ||
| React.createElement('input', { type: 'checkbox', checked: this.state.disabled, id: 'disable-states-' + this.state.id, onChange: this.toggleDisabled }), | ||
| React.createElement( | ||
| { className: 'checkbox-list' }, | ||
| _react2['default'].createElement( | ||
| 'label', | ||
| { htmlFor: 'disable-states-' + this.state.id }, | ||
| 'Disable' | ||
| { className: 'checkbox' }, | ||
| _react2['default'].createElement('input', { type: 'checkbox', className: 'checkbox-control', checked: this.state.disabled, onChange: this.toggleDisabled }), | ||
| _react2['default'].createElement( | ||
| 'span', | ||
| { className: 'checkbox-label' }, | ||
| 'Disabled' | ||
| ) | ||
| ) | ||
@@ -323,5 +365,23 @@ ) | ||
| var RemoteSelectField = React.createClass({ | ||
| module.exports = MultiSelectField; | ||
| },{"react":undefined,"react-select":undefined}],7:[function(require,module,exports){ | ||
| 'use strict'; | ||
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } | ||
| var _react = require('react'); | ||
| var _react2 = _interopRequireDefault(_react); | ||
| var _reactSelect = require('react-select'); | ||
| var _reactSelect2 = _interopRequireDefault(_reactSelect); | ||
| var RemoteSelectField = _react2['default'].createClass({ | ||
| displayName: 'RemoteSelectField', | ||
| propTypes: { | ||
| hint: _react2['default'].PropTypes.string, | ||
| label: _react2['default'].PropTypes.string | ||
| }, | ||
| loadOptions: function loadOptions(input, callback) { | ||
@@ -353,12 +413,21 @@ input = input.toLowerCase(); | ||
| }, | ||
| renderHint: function renderHint() { | ||
| if (!this.props.hint) return null; | ||
| return _react2['default'].createElement( | ||
| 'div', | ||
| { className: 'hint' }, | ||
| this.props.hint | ||
| ); | ||
| }, | ||
| render: function render() { | ||
| return React.createElement( | ||
| return _react2['default'].createElement( | ||
| 'div', | ||
| null, | ||
| React.createElement( | ||
| 'label', | ||
| null, | ||
| { className: 'section' }, | ||
| _react2['default'].createElement( | ||
| 'h3', | ||
| { className: 'section-heading' }, | ||
| this.props.label | ||
| ), | ||
| React.createElement(Select, { asyncOptions: this.loadOptions, className: 'remote-example' }) | ||
| _react2['default'].createElement(_reactSelect2['default'], { asyncOptions: this.loadOptions, className: 'remote-example' }), | ||
| this.renderHint() | ||
| ); | ||
@@ -368,97 +437,58 @@ } | ||
| var MultiSelectField = React.createClass({ | ||
| displayName: 'MultiSelectField', | ||
| module.exports = RemoteSelectField; | ||
| getInitialState: function getInitialState() { | ||
| return { | ||
| disabled: false, | ||
| value: [] | ||
| }; | ||
| }, | ||
| handleSelectChange: function handleSelectChange(value, values) { | ||
| logChange('New value:', value, 'Values:', values); | ||
| this.setState({ value: value }); | ||
| }, | ||
| toggleDisabled: function toggleDisabled(e) { | ||
| this.setState({ 'disabled': e.target.checked }); | ||
| }, | ||
| render: function render() { | ||
| 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 React.createElement( | ||
| 'span', | ||
| null, | ||
| React.createElement( | ||
| 'div', | ||
| null, | ||
| React.createElement( | ||
| 'label', | ||
| null, | ||
| this.props.label | ||
| ), | ||
| React.createElement(Select, { multi: true, disabled: this.state.disabled, value: this.state.value, placeholder: 'Select your favourite(s)', options: ops, onChange: this.handleSelectChange }) | ||
| ), | ||
| React.createElement( | ||
| 'div', | ||
| null, | ||
| React.createElement('input', { type: 'checkbox', checked: this.state.disabled, id: 'disable-multiselect', onChange: this.toggleDisabled }), | ||
| React.createElement( | ||
| 'label', | ||
| { htmlFor: 'disable-multiselect' }, | ||
| 'Disable' | ||
| ) | ||
| ) | ||
| ); | ||
| } | ||
| }); | ||
| },{"react":undefined,"react-select":undefined}],8:[function(require,module,exports){ | ||
| 'use strict'; | ||
| var SelectedValuesField = React.createClass({ | ||
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } | ||
| var _react = require('react'); | ||
| var _react2 = _interopRequireDefault(_react); | ||
| var _reactSelect = require('react-select'); | ||
| var _reactSelect2 = _interopRequireDefault(_reactSelect); | ||
| function logChange() { | ||
| console.log.apply(console, [].concat(['Select value changed:'], Array.prototype.slice.apply(arguments))); | ||
| } | ||
| var SelectedValuesField = _react2['default'].createClass({ | ||
| displayName: 'SelectedValuesField', | ||
| propTypes: { | ||
| allowCreate: _react2['default'].PropTypes.bool, | ||
| hint: _react2['default'].PropTypes.string, | ||
| label: _react2['default'].PropTypes.string, | ||
| options: _react2['default'].PropTypes.array | ||
| }, | ||
| onLabelClick: function onLabelClick(data, event) { | ||
| console.log(data, event); | ||
| }, | ||
| render: function render() { | ||
| 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 React.createElement( | ||
| renderHint: function renderHint() { | ||
| if (!this.props.hint) return null; | ||
| return _react2['default'].createElement( | ||
| 'div', | ||
| null, | ||
| React.createElement( | ||
| 'label', | ||
| null, | ||
| this.props.label | ||
| ), | ||
| React.createElement(Select, { | ||
| onOptionLabelClick: this.onLabelClick, | ||
| value: 'chocolate,vanilla,strawberry', | ||
| multi: true, | ||
| placeholder: 'Select your favourite(s)', | ||
| options: ops, | ||
| onChange: logChange }) | ||
| { className: 'hint' }, | ||
| this.props.hint | ||
| ); | ||
| } | ||
| }); | ||
| var SelectedValuesFieldDisabled = React.createClass({ | ||
| displayName: 'SelectedValuesFieldDisabled', | ||
| onLabelClick: function onLabelClick(data, event) { | ||
| console.log(data, event); | ||
| }, | ||
| render: function render() { | ||
| var ops = [{ label: 'Chocolate', value: 'chocolate' }, { label: 'Vanilla', value: 'vanilla' }, { label: 'Strawberry', value: 'strawberry' }, { label: 'Caramel (You don\'t like it, apparently)', value: 'caramel', disabled: true }, { label: 'Cookies and Cream', value: 'cookiescream' }, { label: 'Peppermint', value: 'peppermint' }]; | ||
| return React.createElement( | ||
| return _react2['default'].createElement( | ||
| 'div', | ||
| null, | ||
| React.createElement( | ||
| 'label', | ||
| null, | ||
| { className: 'section' }, | ||
| _react2['default'].createElement( | ||
| 'h3', | ||
| { className: 'section-heading' }, | ||
| this.props.label | ||
| ), | ||
| React.createElement(Select, { | ||
| _react2['default'].createElement(_reactSelect2['default'], { | ||
| allowCreate: this.props.allowCreate, | ||
| onOptionLabelClick: this.onLabelClick, | ||
| value: 'chocolate,vanilla,strawberry', | ||
| value: this.props.options.slice(1, 3), | ||
| multi: true, | ||
| placeholder: 'Select your favourite(s)', | ||
| options: ops, | ||
| onChange: logChange }) | ||
| options: this.props.options, | ||
| onChange: logChange }), | ||
| this.renderHint() | ||
| ); | ||
@@ -468,26 +498,131 @@ } | ||
| var SelectedValuesFieldCreate = React.createClass({ | ||
| displayName: 'SelectedValuesFieldCreate', | ||
| module.exports = SelectedValuesField; | ||
| onLabelClick: function onLabelClick(data, event) { | ||
| console.log(data, event); | ||
| },{"react":undefined,"react-select":undefined}],9:[function(require,module,exports){ | ||
| 'use strict'; | ||
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } | ||
| var _react = require('react'); | ||
| var _react2 = _interopRequireDefault(_react); | ||
| var _reactSelect = require('react-select'); | ||
| var _reactSelect2 = _interopRequireDefault(_reactSelect); | ||
| var STATES = require('../data/states'); | ||
| var id = 0; | ||
| function logChange() { | ||
| console.log.apply(console, [].concat(['Select value changed:'], Array.prototype.slice.apply(arguments))); | ||
| } | ||
| var StatesField = _react2['default'].createClass({ | ||
| displayName: 'StatesField', | ||
| propTypes: { | ||
| label: _react2['default'].PropTypes.string, | ||
| searchable: _react2['default'].PropTypes.bool | ||
| }, | ||
| getDefaultProps: function getDefaultProps() { | ||
| return { | ||
| label: 'States:', | ||
| searchable: true | ||
| }; | ||
| }, | ||
| getInitialState: function getInitialState() { | ||
| return { | ||
| country: 'AU', | ||
| disabled: false, | ||
| searchable: this.props.searchable, | ||
| id: ++id, | ||
| selectValue: 'new-south-wales' | ||
| }; | ||
| }, | ||
| switchCountry: function switchCountry(e) { | ||
| var newCountry = e.target.value; | ||
| console.log('Country changed to ' + newCountry); | ||
| this.setState({ | ||
| country: newCountry, | ||
| selectValue: null | ||
| }); | ||
| }, | ||
| updateValue: function updateValue(newValue) { | ||
| logChange('State changed to ' + newValue); | ||
| this.setState({ | ||
| selectValue: newValue || null | ||
| }); | ||
| }, | ||
| focusStateSelect: function focusStateSelect() { | ||
| this.refs.stateSelect.focus(); | ||
| }, | ||
| toggleCheckbox: function toggleCheckbox(e) { | ||
| var newState = {}; | ||
| newState[e.target.name] = e.target.checked; | ||
| this.setState(newState); | ||
| }, | ||
| render: function render() { | ||
| var ops = [{ label: 'First Option', value: 'first' }, { label: 'Second Option', value: 'second' }, { label: 'Third Option', value: 'third' }]; | ||
| return React.createElement( | ||
| var ops = STATES[this.state.country]; | ||
| return _react2['default'].createElement( | ||
| 'div', | ||
| null, | ||
| React.createElement( | ||
| 'label', | ||
| null, | ||
| { className: 'section' }, | ||
| _react2['default'].createElement( | ||
| 'h3', | ||
| { className: 'section-heading' }, | ||
| this.props.label | ||
| ), | ||
| React.createElement(Select, { | ||
| value: 'first', | ||
| delimiter: ',', | ||
| multi: true, | ||
| allowCreate: true, | ||
| placeholder: 'Select your favourite(s)', | ||
| options: ops, | ||
| onChange: logChange }) | ||
| _react2['default'].createElement(_reactSelect2['default'], { ref: 'stateSelect', options: ops, disabled: this.state.disabled, value: this.state.selectValue, onChange: this.updateValue, searchable: this.state.searchable }), | ||
| _react2['default'].createElement( | ||
| 'div', | ||
| { style: { marginTop: 14 } }, | ||
| _react2['default'].createElement( | ||
| 'button', | ||
| { type: 'button', onClick: this.focusStateSelect }, | ||
| 'Focus Select' | ||
| ), | ||
| _react2['default'].createElement( | ||
| 'label', | ||
| { className: 'checkbox', style: { marginLeft: 10 } }, | ||
| _react2['default'].createElement('input', { type: 'checkbox', className: 'checkbox-control', name: 'searchable', checked: this.state.searchable, onChange: this.toggleCheckbox }), | ||
| _react2['default'].createElement( | ||
| 'span', | ||
| { className: 'checkbox-label' }, | ||
| 'Searchable' | ||
| ) | ||
| ), | ||
| _react2['default'].createElement( | ||
| 'label', | ||
| { className: 'checkbox', style: { marginLeft: 10 } }, | ||
| _react2['default'].createElement('input', { type: 'checkbox', className: 'checkbox-control', name: 'disabled', checked: this.state.disabled, onChange: this.toggleCheckbox }), | ||
| _react2['default'].createElement( | ||
| 'span', | ||
| { className: 'checkbox-label' }, | ||
| 'Disabled' | ||
| ) | ||
| ) | ||
| ), | ||
| _react2['default'].createElement( | ||
| 'div', | ||
| { className: 'checkbox-list' }, | ||
| _react2['default'].createElement( | ||
| 'label', | ||
| { className: 'checkbox' }, | ||
| _react2['default'].createElement('input', { type: 'radio', className: 'checkbox-control', checked: this.state.country === 'AU', value: 'AU', onChange: this.switchCountry }), | ||
| _react2['default'].createElement( | ||
| 'span', | ||
| { className: 'checkbox-label' }, | ||
| 'Australia' | ||
| ) | ||
| ), | ||
| _react2['default'].createElement( | ||
| 'label', | ||
| { className: 'checkbox' }, | ||
| _react2['default'].createElement('input', { type: 'radio', className: 'checkbox-control', checked: this.state.country === 'US', value: 'US', onChange: this.switchCountry }), | ||
| _react2['default'].createElement( | ||
| 'span', | ||
| { className: 'checkbox-label' }, | ||
| 'United States' | ||
| ) | ||
| ) | ||
| ) | ||
| ); | ||
@@ -497,42 +632,59 @@ } | ||
| var CustomRenderField = React.createClass({ | ||
| displayName: 'CustomRenderField', | ||
| module.exports = StatesField; | ||
| onLabelClick: function onLabelClick(data, event) { | ||
| console.log(data, event); | ||
| },{"../data/states":12,"react":undefined,"react-select":undefined}],10:[function(require,module,exports){ | ||
| 'use strict'; | ||
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } | ||
| var _CustomOption = require('./CustomOption'); | ||
| var _CustomOption2 = _interopRequireDefault(_CustomOption); | ||
| var _CustomSingleValue = require('./CustomSingleValue'); | ||
| var _CustomSingleValue2 = _interopRequireDefault(_CustomSingleValue); | ||
| var _react = require('react'); | ||
| var _react2 = _interopRequireDefault(_react); | ||
| var _reactSelect = require('react-select'); | ||
| var _reactSelect2 = _interopRequireDefault(_reactSelect); | ||
| var USERS = require('../data/users'); | ||
| var UsersField = _react2['default'].createClass({ | ||
| displayName: 'UsersField', | ||
| propTypes: { | ||
| hint: _react2['default'].PropTypes.string, | ||
| label: _react2['default'].PropTypes.string | ||
| }, | ||
| renderOption: function renderOption(option) { | ||
| return React.createElement( | ||
| 'span', | ||
| { style: { color: option.hex } }, | ||
| option.label, | ||
| ' (', | ||
| option.hex, | ||
| ')' | ||
| renderHint: function renderHint() { | ||
| if (!this.props.hint) return null; | ||
| return _react2['default'].createElement( | ||
| 'div', | ||
| { className: 'hint' }, | ||
| this.props.hint | ||
| ); | ||
| }, | ||
| renderValue: function renderValue(option) { | ||
| return React.createElement( | ||
| 'strong', | ||
| { style: { color: option.hex } }, | ||
| option.label | ||
| ); | ||
| }, | ||
| render: function render() { | ||
| var ops = [{ label: 'Red', value: 'red', hex: '#EC6230' }, { label: 'Green', value: 'green', hex: '#4ED84E' }, { label: 'Blue', value: 'blue', hex: '#6D97E2' }]; | ||
| return React.createElement( | ||
| return _react2['default'].createElement( | ||
| 'div', | ||
| null, | ||
| React.createElement( | ||
| 'label', | ||
| null, | ||
| { className: 'section' }, | ||
| _react2['default'].createElement( | ||
| 'h3', | ||
| { className: 'section-heading' }, | ||
| this.props.label | ||
| ), | ||
| React.createElement(Select, { | ||
| allowCreate: true, | ||
| placeholder: 'Select your favourite', | ||
| options: ops, | ||
| optionRenderer: this.renderOption, | ||
| valueRenderer: this.renderValue, | ||
| onChange: logChange }) | ||
| _react2['default'].createElement(_reactSelect2['default'], { | ||
| onOptionLabelClick: this.onLabelClick, | ||
| placeholder: 'Select user', | ||
| optionComponent: _CustomOption2['default'], | ||
| singleValueComponent: _CustomSingleValue2['default'], | ||
| options: USERS.users }), | ||
| this.renderHint() | ||
| ); | ||
@@ -542,44 +694,142 @@ } | ||
| var CustomRenderMultiField = React.createClass({ | ||
| displayName: 'CustomRenderMultiField', | ||
| module.exports = UsersField; | ||
| onLabelClick: function onLabelClick(data, event) { | ||
| console.log(data, event); | ||
| },{"../data/users":13,"./CustomOption":2,"./CustomSingleValue":4,"react":undefined,"react-select":undefined}],11:[function(require,module,exports){ | ||
| 'use strict'; | ||
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } | ||
| var _react = require('react'); | ||
| var _react2 = _interopRequireDefault(_react); | ||
| var _reactSelect = require('react-select'); | ||
| var _reactSelect2 = _interopRequireDefault(_reactSelect); | ||
| function logChange() { | ||
| console.log.apply(console, [].concat(['Select value changed:'], Array.prototype.slice.apply(arguments))); | ||
| } | ||
| var ValuesAsNumbersField = _react2['default'].createClass({ | ||
| displayName: 'ValuesAsNumbersField', | ||
| propTypes: { | ||
| label: _react2['default'].PropTypes.string | ||
| }, | ||
| renderOption: function renderOption(option) { | ||
| return React.createElement( | ||
| 'span', | ||
| { style: { color: option.hex } }, | ||
| option.label, | ||
| ' (', | ||
| option.hex, | ||
| ')' | ||
| ); | ||
| getInitialState: function getInitialState() { | ||
| return { | ||
| options: [{ value: 10, label: 'Ten' }, { value: 11, label: 'Eleven' }, { value: 12, label: 'Twelve' }, { value: 23, label: 'Twenty-three' }, { value: 24, label: 'Twenty-four' }], | ||
| matchPos: 'any', | ||
| matchValue: true, | ||
| matchLabel: true, | ||
| value: null, | ||
| multi: false | ||
| }; | ||
| }, | ||
| renderValue: function renderValue(option) { | ||
| return React.createElement( | ||
| 'strong', | ||
| { style: { color: option.hex } }, | ||
| option.label | ||
| ); | ||
| onChangeMatchStart: function onChangeMatchStart(event) { | ||
| this.setState({ | ||
| matchPos: event.target.checked ? 'start' : 'any' | ||
| }); | ||
| }, | ||
| onChangeMatchValue: function onChangeMatchValue(event) { | ||
| this.setState({ | ||
| matchValue: event.target.checked | ||
| }); | ||
| }, | ||
| onChangeMatchLabel: function onChangeMatchLabel(event) { | ||
| this.setState({ | ||
| matchLabel: event.target.checked | ||
| }); | ||
| }, | ||
| onChange: function onChange(value, values) { | ||
| this.setState({ | ||
| value: value | ||
| }); | ||
| logChange(value, values); | ||
| }, | ||
| onChangeMulti: function onChangeMulti(event) { | ||
| this.setState({ | ||
| multi: event.target.checked | ||
| }); | ||
| }, | ||
| render: function render() { | ||
| var ops = [{ label: 'Red', value: 'red', hex: '#EC6230' }, { label: 'Green', value: 'green', hex: '#4ED84E' }, { label: 'Blue', value: 'blue', hex: '#6D97E2' }]; | ||
| return React.createElement( | ||
| var matchProp = 'any'; | ||
| if (this.state.matchLabel && !this.state.matchValue) { | ||
| matchProp = 'label'; | ||
| } | ||
| if (!this.state.matchLabel && this.state.matchValue) { | ||
| matchProp = 'value'; | ||
| } | ||
| return _react2['default'].createElement( | ||
| 'div', | ||
| null, | ||
| React.createElement( | ||
| 'label', | ||
| null, | ||
| { className: 'section' }, | ||
| _react2['default'].createElement( | ||
| 'h3', | ||
| { className: 'section-heading' }, | ||
| this.props.label | ||
| ), | ||
| React.createElement(Select, { | ||
| delimiter: ',', | ||
| multi: true, | ||
| allowCreate: true, | ||
| placeholder: 'Select your favourite(s)', | ||
| options: ops, | ||
| optionRenderer: this.renderOption, | ||
| valueRenderer: this.renderValue, | ||
| onChange: logChange }) | ||
| _react2['default'].createElement(_reactSelect2['default'], { | ||
| searchable: true, | ||
| matchProp: matchProp, | ||
| matchPos: this.state.matchPos, | ||
| options: this.state.options, | ||
| onChange: this.onChange, | ||
| value: this.state.value, | ||
| multi: this.state.multi | ||
| }), | ||
| _react2['default'].createElement( | ||
| 'div', | ||
| { className: 'checkbox-list' }, | ||
| _react2['default'].createElement( | ||
| 'label', | ||
| { className: 'checkbox' }, | ||
| _react2['default'].createElement('input', { type: 'checkbox', className: 'checkbox-control', checked: this.state.multi, onChange: this.onChangeMulti }), | ||
| _react2['default'].createElement( | ||
| 'span', | ||
| { className: 'checkbox-label' }, | ||
| 'Multi-Select' | ||
| ) | ||
| ), | ||
| _react2['default'].createElement( | ||
| 'label', | ||
| { className: 'checkbox' }, | ||
| _react2['default'].createElement('input', { type: 'checkbox', className: 'checkbox-control', checked: this.state.matchValue, onChange: this.onChangeMatchValue }), | ||
| _react2['default'].createElement( | ||
| 'span', | ||
| { className: 'checkbox-label' }, | ||
| 'Match value only' | ||
| ) | ||
| ), | ||
| _react2['default'].createElement( | ||
| 'label', | ||
| { className: 'checkbox' }, | ||
| _react2['default'].createElement('input', { type: 'checkbox', className: 'checkbox-control', checked: this.state.matchLabel, onChange: this.onChangeMatchLabel }), | ||
| _react2['default'].createElement( | ||
| 'span', | ||
| { className: 'checkbox-label' }, | ||
| 'Match label only' | ||
| ) | ||
| ), | ||
| _react2['default'].createElement( | ||
| 'label', | ||
| { className: 'checkbox' }, | ||
| _react2['default'].createElement('input', { type: 'checkbox', className: 'checkbox-control', checked: this.state.matchPos === 'start', onChange: this.onChangeMatchStart }), | ||
| _react2['default'].createElement( | ||
| 'span', | ||
| { className: 'checkbox-label' }, | ||
| 'Only include matches from the start of the string' | ||
| ) | ||
| ) | ||
| ) | ||
| ); | ||
@@ -589,19 +839,5 @@ } | ||
| React.render(React.createElement( | ||
| 'div', | ||
| null, | ||
| React.createElement(StatesField, null), | ||
| React.createElement(StatesField, { label: 'States (non-searchable):', searchable: false }), | ||
| React.createElement(UsersField, null), | ||
| React.createElement(ValuesAsNumbersField, { label: 'Values as numbers' }), | ||
| React.createElement(MultiSelectField, { label: 'Multiselect:' }), | ||
| React.createElement(SelectedValuesField, { label: 'Clickable labels (labels as links):' }), | ||
| React.createElement(SelectedValuesFieldDisabled, { label: 'Disabled option:' }), | ||
| React.createElement(SelectedValuesFieldCreate, { label: 'Option Creation (tags mode):' }), | ||
| React.createElement(CustomRenderField, { label: 'Custom rendering for options and values:' }), | ||
| React.createElement(CustomRenderMultiField, { label: 'Custom rendering for multiple options and values:' }), | ||
| React.createElement(RemoteSelectField, { label: 'Remote Options:' }) | ||
| ), document.getElementById('example')); | ||
| module.exports = ValuesAsNumbersField; | ||
| },{"./CustomOption":1,"./CustomSingleValue":2,"./data/states":4,"./data/users":5,"react":undefined,"react-select":undefined}],4:[function(require,module,exports){ | ||
| },{"react":undefined,"react-select":undefined}],12:[function(require,module,exports){ | ||
| 'use strict'; | ||
@@ -613,3 +849,3 @@ | ||
| },{}],5:[function(require,module,exports){ | ||
| },{}],13:[function(require,module,exports){ | ||
| 'use strict'; | ||
@@ -619,3 +855,3 @@ | ||
| },{}],6:[function(require,module,exports){ | ||
| },{}],14:[function(require,module,exports){ | ||
| // Copyright Joyent, Inc. and other Node contributors. | ||
@@ -706,3 +942,3 @@ // | ||
| },{}],7:[function(require,module,exports){ | ||
| },{}],15:[function(require,module,exports){ | ||
| // Copyright Joyent, Inc. and other Node contributors. | ||
@@ -794,3 +1030,3 @@ // | ||
| },{}],8:[function(require,module,exports){ | ||
| },{}],16:[function(require,module,exports){ | ||
| 'use strict'; | ||
@@ -801,3 +1037,3 @@ | ||
| },{"./decode":6,"./encode":7}],9:[function(require,module,exports){ | ||
| },{"./decode":14,"./encode":15}],17:[function(require,module,exports){ | ||
| // Generated by CoffeeScript 1.9.3 | ||
@@ -852,3 +1088,3 @@ var React, isRetina, md5, querystring; | ||
| },{"is-retina":10,"md5":11,"querystring":8,"react":undefined}],10:[function(require,module,exports){ | ||
| },{"is-retina":18,"md5":19,"querystring":16,"react":undefined}],18:[function(require,module,exports){ | ||
| module.exports = function() { | ||
@@ -868,3 +1104,3 @@ var mediaQuery; | ||
| },{}],11:[function(require,module,exports){ | ||
| },{}],19:[function(require,module,exports){ | ||
| (function(){ | ||
@@ -1031,3 +1267,3 @@ var crypt = require('crypt'), | ||
| },{"charenc":12,"crypt":13,"is-buffer":14}],12:[function(require,module,exports){ | ||
| },{"charenc":20,"crypt":21,"is-buffer":22}],20:[function(require,module,exports){ | ||
| var charenc = { | ||
@@ -1067,3 +1303,3 @@ // UTF-8 encoding | ||
| },{}],13:[function(require,module,exports){ | ||
| },{}],21:[function(require,module,exports){ | ||
| (function() { | ||
@@ -1166,3 +1402,3 @@ var base64map | ||
| },{}],14:[function(require,module,exports){ | ||
| },{}],22:[function(require,module,exports){ | ||
| /** | ||
@@ -1186,2 +1422,2 @@ * Determine if an object is Buffer | ||
| },{}]},{},[3]); | ||
| },{}]},{},[1]); |
@@ -5,2 +5,3 @@ require=(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){ | ||
| var React = require('react'); | ||
| var classes = require('classnames'); | ||
@@ -20,17 +21,35 @@ var Option = React.createClass({ | ||
| blockEvent: function blockEvent(event) { | ||
| event.preventDefault(); | ||
| if (event.target.tagName !== 'A' || !('href' in event.target)) { | ||
| return; | ||
| } | ||
| if (event.target.target) { | ||
| window.open(event.target.href); | ||
| } else { | ||
| window.location.href = event.target.href; | ||
| } | ||
| }, | ||
| render: function render() { | ||
| var obj = this.props.option; | ||
| var renderedLabel = this.props.renderFunc(obj); | ||
| var optionClasses = classes(this.props.className, obj.className); | ||
| return obj.disabled ? React.createElement( | ||
| 'div', | ||
| { className: this.props.className }, | ||
| { className: optionClasses, | ||
| onMouseDown: this.blockEvent, | ||
| onClick: this.blockEvent }, | ||
| renderedLabel | ||
| ) : React.createElement( | ||
| 'div', | ||
| { className: this.props.className, | ||
| { className: optionClasses, | ||
| style: obj.style, | ||
| onMouseEnter: this.props.mouseEnter, | ||
| onMouseLeave: this.props.mouseLeave, | ||
| onMouseDown: this.props.mouseDown, | ||
| onClick: this.props.mouseDown }, | ||
| onClick: this.props.mouseDown, | ||
| title: obj.title }, | ||
| obj.create ? this.props.addLabelText.replace('{label}', obj.label) : renderedLabel | ||
@@ -43,9 +62,10 @@ ); | ||
| },{"react":undefined}],2:[function(require,module,exports){ | ||
| "use strict"; | ||
| },{"classnames":undefined,"react":undefined}],2:[function(require,module,exports){ | ||
| 'use strict'; | ||
| var React = require('react'); | ||
| var classes = require('classnames'); | ||
| var SingleValue = React.createClass({ | ||
| displayName: "SingleValue", | ||
| displayName: 'SingleValue', | ||
@@ -57,5 +77,11 @@ propTypes: { | ||
| render: function render() { | ||
| var classNames = classes('Select-placeholder', this.props.value && this.props.value.className); | ||
| return React.createElement( | ||
| "div", | ||
| { className: "Select-placeholder" }, | ||
| 'div', | ||
| { | ||
| className: classNames, | ||
| style: this.props.value && this.props.value.style, | ||
| title: this.props.value && this.props.value.title | ||
| }, | ||
| this.props.placeholder | ||
@@ -68,6 +94,7 @@ ); | ||
| },{"react":undefined}],3:[function(require,module,exports){ | ||
| },{"classnames":undefined,"react":undefined}],3:[function(require,module,exports){ | ||
| 'use strict'; | ||
| var React = require('react'); | ||
| var classes = require('classnames'); | ||
@@ -106,3 +133,7 @@ var Value = React.createClass({ | ||
| 'div', | ||
| { className: 'Select-value' }, | ||
| { | ||
| className: classes('Select-value', this.props.option.className), | ||
| style: this.props.option.style, | ||
| title: this.props.option.title | ||
| }, | ||
| label | ||
@@ -113,8 +144,11 @@ ); | ||
| if (this.props.optionLabelClick) { | ||
| label = React.createElement( | ||
| 'a', | ||
| { className: 'Select-item-label__a', | ||
| { className: classes('Select-item-label__a', this.props.option.className), | ||
| onMouseDown: this.blockEvent, | ||
| onTouchEnd: this.props.onOptionLabelClick, | ||
| onClick: this.props.onOptionLabelClick }, | ||
| onClick: this.props.onOptionLabelClick, | ||
| style: this.props.option.style, | ||
| title: this.props.option.title }, | ||
| label | ||
@@ -126,3 +160,5 @@ ); | ||
| 'div', | ||
| { className: 'Select-item' }, | ||
| { className: classes('Select-item', this.props.option.className), | ||
| style: this.props.option.style, | ||
| title: this.props.option.title }, | ||
| React.createElement( | ||
@@ -148,3 +184,3 @@ 'span', | ||
| },{"react":undefined}],"react-select":[function(require,module,exports){ | ||
| },{"classnames":undefined,"react":undefined}],"react-select":[function(require,module,exports){ | ||
| /* disable some rules until we refactor more completely; fixing them now would | ||
@@ -203,2 +239,3 @@ cause conflicts with some open PRs unnecessarily. */ | ||
| searchable: React.PropTypes.bool, // whether to enable searching feature or not | ||
| searchingText: React.PropTypes.string, // message to display whilst options are loading via asyncOptions | ||
| searchPromptText: React.PropTypes.string, // label to prompt for search input | ||
@@ -213,3 +250,3 @@ singleValueComponent: React.PropTypes.func, // single value component when multiple is set to false | ||
| return { | ||
| addLabelText: 'Add {label} ?', | ||
| addLabelText: 'Add "{label}"?', | ||
| allowCreate: false, | ||
@@ -239,2 +276,3 @@ asyncOptions: undefined, | ||
| searchable: true, | ||
| searchingText: 'Searching...', | ||
| searchPromptText: 'Type to search', | ||
@@ -399,8 +437,3 @@ singleValueComponent: SingleValue, | ||
| } else { | ||
| for (var optionIndex = 0; optionIndex < filteredOptions.length; ++optionIndex) { | ||
| if (!filteredOptions[optionIndex].disabled) { | ||
| focusedOption = filteredOptions[optionIndex]; | ||
| break; | ||
| } | ||
| } | ||
| focusedOption = this.getFirstFocusableOption(filteredOptions); | ||
| valueForState = values.map(function (v) { | ||
@@ -421,2 +454,11 @@ return v.value; | ||
| getFirstFocusableOption: function getFirstFocusableOption(options) { | ||
| for (var optionIndex = 0; optionIndex < options.length; ++optionIndex) { | ||
| if (!options[optionIndex].disabled) { | ||
| return options[optionIndex]; | ||
| } | ||
| } | ||
| }, | ||
| initValuesArray: function initValuesArray(values, options) { | ||
@@ -642,3 +684,3 @@ if (!Array.isArray(values)) { | ||
| } | ||
| return filteredOptions[0]; | ||
| return this.getFirstFocusableOption(filteredOptions); | ||
| }, | ||
@@ -759,3 +801,6 @@ | ||
| } | ||
| return this.selectValue(this.state.focusedOption); | ||
| if (this.state.focusedOption) { | ||
| return this.selectValue(this.state.focusedOption); | ||
| } | ||
| }, | ||
@@ -871,7 +916,24 @@ | ||
| }, this); | ||
| return ops.length ? ops : React.createElement( | ||
| 'div', | ||
| { className: 'Select-noresults' }, | ||
| this.props.asyncOptions && !this.state.inputValue ? this.props.searchPromptText : this.props.noResultsText | ||
| ); | ||
| if (ops.length) { | ||
| return ops; | ||
| } else { | ||
| var noResultsText, promptClass; | ||
| if (this.state.isLoading) { | ||
| promptClass = 'Select-searching'; | ||
| noResultsText = this.props.searchingText; | ||
| } else if (this.state.inputValue || !this.props.asyncOptions) { | ||
| promptClass = 'Select-noresults'; | ||
| noResultsText = this.props.noResultsText; | ||
| } else { | ||
| promptClass = 'Select-search-prompt'; | ||
| noResultsText = this.props.searchPromptText; | ||
| } | ||
| return React.createElement( | ||
| 'div', | ||
| { className: promptClass }, | ||
| noResultsText | ||
| ); | ||
| } | ||
| }, | ||
@@ -939,7 +1001,5 @@ | ||
| ref: 'menu', | ||
| className: 'Select-menu' | ||
| className: 'Select-menu', | ||
| onMouseDown: this.handleMouseDown | ||
| }; | ||
| if (this.props.multi) { | ||
| menuProps.onMouseDown = this.handleMouseDown; | ||
| } | ||
| menu = React.createElement( | ||
@@ -946,0 +1006,0 @@ 'div', |
@@ -6,2 +6,3 @@ (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){ | ||
| var React = (typeof window !== "undefined" ? window['React'] : typeof global !== "undefined" ? global['React'] : null); | ||
| var classes = (typeof window !== "undefined" ? window['classNames'] : typeof global !== "undefined" ? global['classNames'] : null); | ||
@@ -21,17 +22,35 @@ var Option = React.createClass({ | ||
| blockEvent: function blockEvent(event) { | ||
| event.preventDefault(); | ||
| if (event.target.tagName !== 'A' || !('href' in event.target)) { | ||
| return; | ||
| } | ||
| if (event.target.target) { | ||
| window.open(event.target.href); | ||
| } else { | ||
| window.location.href = event.target.href; | ||
| } | ||
| }, | ||
| render: function render() { | ||
| var obj = this.props.option; | ||
| var renderedLabel = this.props.renderFunc(obj); | ||
| var optionClasses = classes(this.props.className, obj.className); | ||
| return obj.disabled ? React.createElement( | ||
| 'div', | ||
| { className: this.props.className }, | ||
| { className: optionClasses, | ||
| onMouseDown: this.blockEvent, | ||
| onClick: this.blockEvent }, | ||
| renderedLabel | ||
| ) : React.createElement( | ||
| 'div', | ||
| { className: this.props.className, | ||
| { className: optionClasses, | ||
| style: obj.style, | ||
| onMouseEnter: this.props.mouseEnter, | ||
| onMouseLeave: this.props.mouseLeave, | ||
| onMouseDown: this.props.mouseDown, | ||
| onClick: this.props.mouseDown }, | ||
| onClick: this.props.mouseDown, | ||
| title: obj.title }, | ||
| obj.create ? this.props.addLabelText.replace('{label}', obj.label) : renderedLabel | ||
@@ -100,2 +119,3 @@ ); | ||
| searchable: React.PropTypes.bool, // whether to enable searching feature or not | ||
| searchingText: React.PropTypes.string, // message to display whilst options are loading via asyncOptions | ||
| searchPromptText: React.PropTypes.string, // label to prompt for search input | ||
@@ -110,3 +130,3 @@ singleValueComponent: React.PropTypes.func, // single value component when multiple is set to false | ||
| return { | ||
| addLabelText: 'Add {label} ?', | ||
| addLabelText: 'Add "{label}"?', | ||
| allowCreate: false, | ||
@@ -136,2 +156,3 @@ asyncOptions: undefined, | ||
| searchable: true, | ||
| searchingText: 'Searching...', | ||
| searchPromptText: 'Type to search', | ||
@@ -296,8 +317,3 @@ singleValueComponent: SingleValue, | ||
| } else { | ||
| for (var optionIndex = 0; optionIndex < filteredOptions.length; ++optionIndex) { | ||
| if (!filteredOptions[optionIndex].disabled) { | ||
| focusedOption = filteredOptions[optionIndex]; | ||
| break; | ||
| } | ||
| } | ||
| focusedOption = this.getFirstFocusableOption(filteredOptions); | ||
| valueForState = values.map(function (v) { | ||
@@ -318,2 +334,11 @@ return v.value; | ||
| getFirstFocusableOption: function getFirstFocusableOption(options) { | ||
| for (var optionIndex = 0; optionIndex < options.length; ++optionIndex) { | ||
| if (!options[optionIndex].disabled) { | ||
| return options[optionIndex]; | ||
| } | ||
| } | ||
| }, | ||
| initValuesArray: function initValuesArray(values, options) { | ||
@@ -539,3 +564,3 @@ if (!Array.isArray(values)) { | ||
| } | ||
| return filteredOptions[0]; | ||
| return this.getFirstFocusableOption(filteredOptions); | ||
| }, | ||
@@ -656,3 +681,6 @@ | ||
| } | ||
| return this.selectValue(this.state.focusedOption); | ||
| if (this.state.focusedOption) { | ||
| return this.selectValue(this.state.focusedOption); | ||
| } | ||
| }, | ||
@@ -768,7 +796,24 @@ | ||
| }, this); | ||
| return ops.length ? ops : React.createElement( | ||
| 'div', | ||
| { className: 'Select-noresults' }, | ||
| this.props.asyncOptions && !this.state.inputValue ? this.props.searchPromptText : this.props.noResultsText | ||
| ); | ||
| if (ops.length) { | ||
| return ops; | ||
| } else { | ||
| var noResultsText, promptClass; | ||
| if (this.state.isLoading) { | ||
| promptClass = 'Select-searching'; | ||
| noResultsText = this.props.searchingText; | ||
| } else if (this.state.inputValue || !this.props.asyncOptions) { | ||
| promptClass = 'Select-noresults'; | ||
| noResultsText = this.props.noResultsText; | ||
| } else { | ||
| promptClass = 'Select-search-prompt'; | ||
| noResultsText = this.props.searchPromptText; | ||
| } | ||
| return React.createElement( | ||
| 'div', | ||
| { className: promptClass }, | ||
| noResultsText | ||
| ); | ||
| } | ||
| }, | ||
@@ -836,7 +881,5 @@ | ||
| ref: 'menu', | ||
| className: 'Select-menu' | ||
| className: 'Select-menu', | ||
| onMouseDown: this.handleMouseDown | ||
| }; | ||
| if (this.props.multi) { | ||
| menuProps.onMouseDown = this.handleMouseDown; | ||
| } | ||
| menu = React.createElement( | ||
@@ -910,8 +953,9 @@ 'div', | ||
| (function (global){ | ||
| "use strict"; | ||
| 'use strict'; | ||
| var React = (typeof window !== "undefined" ? window['React'] : typeof global !== "undefined" ? global['React'] : null); | ||
| var classes = (typeof window !== "undefined" ? window['classNames'] : typeof global !== "undefined" ? global['classNames'] : null); | ||
| var SingleValue = React.createClass({ | ||
| displayName: "SingleValue", | ||
| displayName: 'SingleValue', | ||
@@ -923,5 +967,11 @@ propTypes: { | ||
| render: function render() { | ||
| var classNames = classes('Select-placeholder', this.props.value && this.props.value.className); | ||
| return React.createElement( | ||
| "div", | ||
| { className: "Select-placeholder" }, | ||
| 'div', | ||
| { | ||
| className: classNames, | ||
| style: this.props.value && this.props.value.style, | ||
| title: this.props.value && this.props.value.title | ||
| }, | ||
| this.props.placeholder | ||
@@ -940,2 +990,3 @@ ); | ||
| var React = (typeof window !== "undefined" ? window['React'] : typeof global !== "undefined" ? global['React'] : null); | ||
| var classes = (typeof window !== "undefined" ? window['classNames'] : typeof global !== "undefined" ? global['classNames'] : null); | ||
@@ -974,3 +1025,7 @@ var Value = React.createClass({ | ||
| 'div', | ||
| { className: 'Select-value' }, | ||
| { | ||
| className: classes('Select-value', this.props.option.className), | ||
| style: this.props.option.style, | ||
| title: this.props.option.title | ||
| }, | ||
| label | ||
@@ -981,8 +1036,11 @@ ); | ||
| if (this.props.optionLabelClick) { | ||
| label = React.createElement( | ||
| 'a', | ||
| { className: 'Select-item-label__a', | ||
| { className: classes('Select-item-label__a', this.props.option.className), | ||
| onMouseDown: this.blockEvent, | ||
| onTouchEnd: this.props.onOptionLabelClick, | ||
| onClick: this.props.onOptionLabelClick }, | ||
| onClick: this.props.onOptionLabelClick, | ||
| style: this.props.option.style, | ||
| title: this.props.option.title }, | ||
| label | ||
@@ -994,3 +1052,5 @@ ); | ||
| 'div', | ||
| { className: 'Select-item' }, | ||
| { className: classes('Select-item', this.props.option.className), | ||
| style: this.props.option.style, | ||
| title: this.props.option.title }, | ||
| React.createElement( | ||
@@ -997,0 +1057,0 @@ 'span', |
| # React-Select | ||
| ## v0.6.5 / 2015-08-26 | ||
| ## v0.6.7 / 2015-08-28 | ||
| * fixed; missing styles for `.Select-search-prompt` and `.Select-searching` issues, thanks [Jaak Erisalu](https://github.com/jaakerisalu) and [davidpene](https://github.com/davidpene) | ||
| ## v0.6.6 / 2015-08-26 | ||
| * fixed; issue in Chrome where clicking the scrollbar would close the menu, thanks [Vladimir Matsola](https://github.com/vomchik) | ||
| ## v0.6.4 / 2015-08-24 | ||
| ## v0.6.5 / 2015-08-24 | ||
@@ -9,0 +13,0 @@ * fixed; completely ignores clicks on disabled items, unless the target of the click is a link, thanks [Ben Stahl](https://github.com/bhstahl) |
| { | ||
| "name": "react-select", | ||
| "version": "0.6.6", | ||
| "version": "0.6.7", | ||
| "description": "A Select control built with and for ReactJS", | ||
@@ -5,0 +5,0 @@ "main": "lib/Select.js", |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by1.64%
1039189
- Lines of code
- increased by1.34%
27266
- Number of medium supply chain risk alerts
- decreased by-100%
0
No dependency changes