From c81b9c9d03af4959e748be7e95ea8417c5b19bfd Mon Sep 17 00:00:00 2001 From: DDiaz Date: Thu, 6 Apr 2017 10:37:15 -0400 Subject: [PATCH 01/10] Include a className of 'is-clearable' if clearable is true --- src/Select.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/Select.js b/src/Select.js index 17b8f3b0ff..63383ac050 100644 --- a/src/Select.js +++ b/src/Select.js @@ -1079,6 +1079,7 @@ const Select = React.createClass({ let className = classNames('Select', this.props.className, { 'Select--multi': this.props.multi, 'Select--single': !this.props.multi, + 'is-clearable': this.props.clearable, 'is-disabled': this.props.disabled, 'is-focused': this.state.isFocused, 'is-loading': this.props.isLoading, From 75d6372e4b549677c96d0e660d4f72fac46d407c Mon Sep 17 00:00:00 2001 From: DDiaz Date: Thu, 6 Apr 2017 10:39:10 -0400 Subject: [PATCH 02/10] spaces to tabs --- src/Select.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Select.js b/src/Select.js index 63383ac050..33e29b37bf 100644 --- a/src/Select.js +++ b/src/Select.js @@ -1079,7 +1079,7 @@ const Select = React.createClass({ let className = classNames('Select', this.props.className, { 'Select--multi': this.props.multi, 'Select--single': !this.props.multi, - 'is-clearable': this.props.clearable, + 'is-clearable': this.props.clearable, 'is-disabled': this.props.disabled, 'is-focused': this.state.isFocused, 'is-loading': this.props.isLoading, From 16ff8e93f24175c1d521f72f55a4088c3dc870ae Mon Sep 17 00:00:00 2001 From: Adam Girton Date: Mon, 10 Apr 2017 09:38:37 -0700 Subject: [PATCH 03/10] Use new prop-types package --- package.json | 4 +- src/Async.js | 49 +++++++++-------- src/Creatable.js | 25 +++++---- src/Option.js | 23 ++++---- src/Select.js | 139 ++++++++++++++++++++++++----------------------- src/Value.js | 13 +++-- 6 files changed, 130 insertions(+), 123 deletions(-) diff --git a/package.json b/package.json index 12151a0505..b0ec54597a 100644 --- a/package.json +++ b/package.json @@ -11,8 +11,10 @@ "url": "https://github.com/JedWatson/react-select.git" }, "dependencies": { + "create-react-class": "15.5.1", "classnames": "^2.2.4", - "react-input-autosize": "^1.1.0" + "react-input-autosize": "^1.1.0", + "prop-types": "15.5.6" }, "devDependencies": { "babel": "^5.8.23", diff --git a/src/Async.js b/src/Async.js index 23d8e9c61a..de2c8ad9ad 100644 --- a/src/Async.js +++ b/src/Async.js @@ -1,35 +1,36 @@ -import React, { Component, PropTypes } from 'react'; +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; import Select from './Select'; import stripDiacritics from './utils/stripDiacritics'; const propTypes = { - autoload: React.PropTypes.bool.isRequired, // automatically call the `loadOptions` prop on-mount; defaults to true - cache: React.PropTypes.any, // object to use to cache results; set to null/false to disable caching - children: React.PropTypes.func.isRequired, // Child function responsible for creating the inner Select component; (props: Object): PropTypes.element - ignoreAccents: React.PropTypes.bool, // strip diacritics when filtering; defaults to true - ignoreCase: React.PropTypes.bool, // perform case-insensitive filtering; defaults to true - loadingPlaceholder: React.PropTypes.oneOfType([ // replaces the placeholder while options are loading - React.PropTypes.string, - React.PropTypes.node + autoload: PropTypes.bool.isRequired, // automatically call the `loadOptions` prop on-mount; defaults to true + cache: PropTypes.any, // object to use to cache results; set to null/false to disable caching + children: PropTypes.func.isRequired, // Child function responsible for creating the inner Select component; (props: Object): PropTypes.element + ignoreAccents: PropTypes.bool, // strip diacritics when filtering; defaults to true + ignoreCase: PropTypes.bool, // perform case-insensitive filtering; defaults to true + loadingPlaceholder: PropTypes.oneOfType([ // replaces the placeholder while options are loading + PropTypes.string, + PropTypes.node ]), - loadOptions: React.PropTypes.func.isRequired, // callback to load options asynchronously; (inputValue: string, callback: Function): ?Promise - multi: React.PropTypes.bool, // multi-value input + loadOptions: PropTypes.func.isRequired, // callback to load options asynchronously; (inputValue: string, callback: Function): ?Promise + multi: PropTypes.bool, // multi-value input options: PropTypes.array.isRequired, // array of options - placeholder: React.PropTypes.oneOfType([ // field placeholder, displayed when there's no value (shared with Select) - React.PropTypes.string, - React.PropTypes.node + placeholder: PropTypes.oneOfType([ // field placeholder, displayed when there's no value (shared with Select) + PropTypes.string, + PropTypes.node ]), - noResultsText: React.PropTypes.oneOfType([ // field noResultsText, displayed when no options come back from the server - React.PropTypes.string, - React.PropTypes.node + noResultsText: PropTypes.oneOfType([ // field noResultsText, displayed when no options come back from the server + PropTypes.string, + PropTypes.node ]), - onChange: React.PropTypes.func, // onChange handler: function (newValue) {} - searchPromptText: React.PropTypes.oneOfType([ // label to prompt for search input - React.PropTypes.string, - React.PropTypes.node + onChange: PropTypes.func, // onChange handler: function (newValue) {} + searchPromptText: PropTypes.oneOfType([ // label to prompt for search input + PropTypes.string, + PropTypes.node ]), - onInputChange: React.PropTypes.func, // optional for keeping track of what is being typed - value: React.PropTypes.any, // initial field value + onInputChange: PropTypes.func, // optional for keeping track of what is being typed + value: PropTypes.any, // initial field value }; const defaultCache = {}; @@ -214,4 +215,4 @@ function defaultChildren (props) { return ( tag with this field name for html forms + clearable: PropTypes.bool, // should it be possible to reset value + deleteRemoves: PropTypes.bool, // whether backspace removes an item if there is no text input + delimiter: PropTypes.string, // delimiter to use to join multiple values for the hidden field value + disabled: PropTypes.bool, // whether the Select is disabled or not + escapeClearsValue: PropTypes.bool, // whether escape clears the value when the menu is closed + filterOption: PropTypes.func, // method to filter a single option (option, filterString) + filterOptions: PropTypes.any, // boolean to enable default filtering or function to filter the options array ([options], filterString, [values]) + ignoreAccents: PropTypes.bool, // whether to strip diacritics when filtering + ignoreCase: PropTypes.bool, // whether to perform case-insensitive filtering + inputProps: PropTypes.object, // custom attributes for the Input + inputRenderer: PropTypes.func, // returns a custom input component + instanceId: PropTypes.string, // set the components instanceId + isLoading: PropTypes.bool, // whether the Select is loading externally or not (such as options being loaded) + joinValues: PropTypes.bool, // joins multiple values into a single form field with the delimiter (legacy mode) + labelKey: PropTypes.string, // path of the label value in option objects + matchPos: PropTypes.string, // (any|start) match the start or entire string when filtering + matchProp: PropTypes.string, // (any|label|value) which option property to filter on + menuBuffer: PropTypes.number, // optional buffer (in px) between the bottom of the viewport and the bottom of the menu + menuContainerStyle: PropTypes.object, // optional style to apply to the menu container + menuRenderer: PropTypes.func, // renders a custom menu with options + menuStyle: PropTypes.object, // optional style to apply to the menu + multi: PropTypes.bool, // multi-value input + name: PropTypes.string, // generates a hidden tag with this field name for html forms noResultsText: stringOrNode, // placeholder displayed when there are no matching search results - onBlur: React.PropTypes.func, // onBlur handler: function (event) {} - onBlurResetsInput: React.PropTypes.bool, // whether input is cleared on blur - onChange: React.PropTypes.func, // onChange handler: function (newValue) {} - onClose: React.PropTypes.func, // fires when the menu is closed - onCloseResetsInput: React.PropTypes.bool, // whether input is cleared when menu is closed through the arrow - onFocus: React.PropTypes.func, // onFocus handler: function (event) {} - onInputChange: React.PropTypes.func, // onInputChange handler: function (inputValue) {} - onInputKeyDown: React.PropTypes.func, // input keyDown handler: function (event) {} - onMenuScrollToBottom: React.PropTypes.func, // fires when the menu is scrolled to the bottom; can be used to paginate options - onOpen: React.PropTypes.func, // fires when the menu is opened - onValueClick: React.PropTypes.func, // onClick handler for value labels: function (value, event) {} - openAfterFocus: React.PropTypes.bool, // boolean to enable opening dropdown when focused - openOnFocus: React.PropTypes.bool, // always open options menu on focus - optionClassName: React.PropTypes.string, // additional class(es) to apply to the