Skip to content

add UNSAFE_ prefix to the deprecated lifecycle methods #1

New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Open
12three wants to merge 2 commits into
base: master
Choose a base branch
from
Open

add UNSAFE_ prefix to the deprecated lifecycle methods #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
476b85e
add UNSAFE_ prefix to the deprecated lifecycle methods
12three Feb 1, 2024
e7783ef
build
12three Feb 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
101 changes: 52 additions & 49 deletions dist/react-select.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,16 +16,64 @@
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.Select.is-disabled .Select-arrow-zone {
cursor: default;
pointer-events: none;
opacity: 0.35;
}
.Select.is-disabled > .Select-control {
background-color: #f9f9f9;
}
.Select.is-disabled > .Select-control:hover {
box-shadow: none;
}
.Select.is-disabled .Select-arrow-zone {
cursor: default;
pointer-events: none;
opacity: 0.35;
.Select.is-open > .Select-control {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
background: #fff;
border-color: #b3b3b3 #ccc #d9d9d9;
}
.Select.is-open > .Select-control .Select-arrow {
top: -2px;
border-color: transparent transparent #999;
border-width: 0 5px 5px;
}
.Select.is-searchable.is-open > .Select-control {
cursor: text;
}
.Select.is-searchable.is-focused:not(.is-open) > .Select-control {
cursor: text;
}
.Select.is-focused:not(.is-open) > .Select-control {
border-color: #007eff;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 3px rgba(0, 126, 255, 0.1);
}
.Select.has-value.is-clearable.Select--single > .Select-control .Select-value {
padding-right: 42px;
}
.Select.has-value.Select--single > .Select-control .Select-value .Select-value-label,
.Select.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value .Select-value-label {
color: #333;
}
.Select.has-value.Select--single > .Select-control .Select-value a.Select-value-label,
.Select.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label {
cursor: pointer;
text-decoration: none;
}
.Select.has-value.Select--single > .Select-control .Select-value a.Select-value-label:hover,
.Select.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label:hover,
.Select.has-value.Select--single > .Select-control .Select-value a.Select-value-label:focus,
.Select.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label:focus {
color: #007eff;
outline: none;
text-decoration: underline;
}
.Select.has-value.is-pseudo-focused .Select-input {
opacity: 0;
}
.Select.is-open .Select-arrow,
.Select .Select-arrow-zone:hover > .Select-arrow {
border-top-color: #666;
}
.Select-control {
background-color: #fff;
Expand All @@ -49,27 +97,6 @@
.Select-control .Select-input:focus {
outline: none;
}
.is-searchable.is-open > .Select-control {
cursor: text;
}
.is-open > .Select-control {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
background: #fff;
border-color: #b3b3b3 #ccc #d9d9d9;
}
.is-open > .Select-control .Select-arrow {
top: -2px;
border-color: transparent transparent #999;
border-width: 0 5px 5px;
}
.is-searchable.is-focused:not(.is-open) > .Select-control {
cursor: text;
}
.is-focused:not(.is-open) > .Select-control {
border-color: #007eff;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 3px rgba(0, 126, 255, 0.1);
}
.Select-placeholder,
.Select--single > .Select-control .Select-value {
bottom: 0;
Expand All @@ -86,26 +113,6 @@
text-overflow: ellipsis;
white-space: nowrap;
}
.has-value.is-clearable.Select--single > .Select-control .Select-value {
padding-right: 42px;
}
.has-value.Select--single > .Select-control .Select-value .Select-value-label,
.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value .Select-value-label {
color: #333;
}
.has-value.Select--single > .Select-control .Select-value a.Select-value-label,
.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label {
cursor: pointer;
text-decoration: none;
}
.has-value.Select--single > .Select-control .Select-value a.Select-value-label:hover,
.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label:hover,
.has-value.Select--single > .Select-control .Select-value a.Select-value-label:focus,
.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label:focus {
color: #007eff;
outline: none;
text-decoration: underline;
}
.Select-input {
height: 34px;
padding-left: 10px;
Expand Down Expand Up @@ -201,10 +208,6 @@
width: 0;
position: relative;
}
.is-open .Select-arrow,
.Select-arrow-zone:hover > .Select-arrow {
border-top-color: #666;
}
.Select--multi .Select-multi-value-wrapper {
display: inline-block;
}
Expand Down
82 changes: 31 additions & 51 deletions dist/react-select.es.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,6 @@ function clearRenderer() {
});
}

var babelHelpers = {};
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
return typeof obj;
} : function (obj) {
Expand Down Expand Up @@ -345,28 +344,6 @@ var possibleConstructorReturn = function (self, call) {
return call && (typeof call === "object" || typeof call === "function") ? call : self;
};





















babelHelpers;

var Option = function (_React$Component) {
inherits(Option, _React$Component);

Expand Down Expand Up @@ -465,6 +442,7 @@ var Option = function (_React$Component) {
{ className: className,
style: option.style,
role: 'option',
'aria-label': option.label,
onMouseDown: this.handleMouseDown,
onMouseEnter: this.handleMouseEnter,
onMouseMove: this.handleMouseMove,
Expand Down Expand Up @@ -649,8 +627,8 @@ var Select$1 = function (_React$Component) {
}

createClass(Select, [{
key: 'componentWillMount',
value: function componentWillMount() {
key: 'UNSAFE_componentWillMount',
value: function UNSAFE_componentWillMount() {
this._instancePrefix = 'react-select-' + (this.props.instanceId || ++instanceId) + '-';
var valueArray = this.getValueArray(this.props.value);

Expand All @@ -663,13 +641,16 @@ var Select$1 = function (_React$Component) {
}, {
key: 'componentDidMount',
value: function componentDidMount() {
if (this.props.autofocus) {
if (typeof this.props.autofocus !== 'undefined' && typeof console !== 'undefined') {
console.warn('Warning: The autofocus prop will be deprecated in react-select1.0.0 in favor of autoFocus to match React\'s autoFocus prop');
}
if (this.props.autoFocus || this.props.autofocus) {
this.focus();
}
}
}, {
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(nextProps) {
key: 'UNSAFE_componentWillReceiveProps',
value: function UNSAFE_componentWillReceiveProps(nextProps) {
var valueArray = this.getValueArray(nextProps.value, nextProps);

if (nextProps.required) {
Expand All @@ -682,8 +663,8 @@ var Select$1 = function (_React$Component) {
}
}
}, {
key: 'componentWillUpdate',
value: function componentWillUpdate(nextProps, nextState) {
key: 'UNSAFE_componentWillUpdate',
value: function UNSAFE_componentWillUpdate(nextProps, nextState) {
if (nextState.isOpen !== this.state.isOpen) {
this.toggleTouchOutsideEvent(nextState.isOpen);
var handler = nextState.isOpen ? nextProps.onOpen : nextProps.onClose;
Expand Down Expand Up @@ -729,11 +710,7 @@ var Select$1 = function (_React$Component) {
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
if (!document.removeEventListener && document.detachEvent) {
document.detachEvent('ontouchstart', this.handleTouchOutside);
} else {
document.removeEventListener('touchstart', this.handleTouchOutside);
}
this.toggleTouchOutsideEvent(false);
}
}, {
key: 'toggleTouchOutsideEvent',
Expand Down Expand Up @@ -1093,7 +1070,7 @@ var Select$1 = function (_React$Component) {
value: function getValueArray(value, nextProps) {
var _this2 = this;

/** support optionally passing in the `nextProps` so `componentWillReceiveProps` updates will function as expected */
/** support optionally passing in the `nextProps` so `UNSAFE_componentWillReceiveProps` updates will function as expected */
var props = (typeof nextProps === 'undefined' ? 'undefined' : _typeof(nextProps)) === 'object' ? nextProps : this.props;
if (props.multi) {
if (typeof value === 'string') value = value.split(props.delimiter);
Expand Down Expand Up @@ -1483,7 +1460,7 @@ var Select$1 = function (_React$Component) {
}
return React.createElement(
'div',
{ className: className },
{ className: className, key: 'input-wrap' },
React.createElement('input', inputProps)
);
}
Expand Down Expand Up @@ -1746,10 +1723,10 @@ Select$1.propTypes = {
'aria-describedby': PropTypes.string, // HTML ID(s) of element(s) that should be used to describe this input (for assistive tech)
'aria-label': PropTypes.string, // Aria label (for assistive tech)
'aria-labelledby': PropTypes.string, // HTML ID of an element that should be used as the label (for assistive tech)
addLabelText: PropTypes.string, // placeholder displayed when you want to add a label on a multi-value input
arrowRenderer: PropTypes.func, // Create drop-down caret element
autoBlur: PropTypes.bool, // automatically blur the component when an option is selected
autofocus: PropTypes.bool, // autofocus the component on mount
autofocus: PropTypes.bool, // deprecated; use autoFocus instead
autoFocus: PropTypes.bool, // autofocus the component on mount
autosize: PropTypes.bool, // whether to enable autosizing or not
backspaceRemoves: PropTypes.bool, // whether backspace removes an item if there is no text input
backspaceToRemoveMessage: PropTypes.string, // Message to use for screenreaders to press backspace to remove the current item - {label} is replaced with the item label
Expand Down Expand Up @@ -1818,7 +1795,6 @@ Select$1.propTypes = {
};

Select$1.defaultProps = {
addLabelText: 'Add "{label}"?',
arrowRenderer: arrowRenderer,
autosize: true,
backspaceRemoves: true,
Expand Down Expand Up @@ -1927,8 +1903,8 @@ var Async = function (_Component) {
}
}
}, {
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(nextProps) {
key: 'UNSAFE_componentWillReceiveProps',
value: function UNSAFE_componentWillReceiveProps(nextProps) {
if (nextProps.options !== this.props.options) {
this.setState({
options: nextProps.options
Expand All @@ -1950,6 +1926,8 @@ var Async = function (_Component) {
var cache = this._cache;

if (cache && Object.prototype.hasOwnProperty.call(cache, inputValue)) {
this._callback = null;

this.setState({
options: cache[inputValue]
});
Expand All @@ -1958,14 +1936,14 @@ var Async = function (_Component) {
}

var callback = function callback(error, data) {
if (callback === _this2._callback) {
_this2._callback = null;
var options = data && data.options || [];

var options = data && data.options || [];
if (cache) {
cache[inputValue] = options;
}

if (cache) {
cache[inputValue] = options;
}
if (callback === _this2._callback) {
_this2._callback = null;

_this2.setState({
isLoading: false,
Expand Down Expand Up @@ -2211,13 +2189,15 @@ var CreatableSelect = function (_React$Component) {
value: function onInputChange(input) {
var onInputChange = this.props.onInputChange;

// This value may be needed in between Select mounts (when this.select is null)

this.inputValue = input;

if (onInputChange) {
onInputChange(input);
this.inputValue = onInputChange(input);
}

// This value may be needed in between Select mounts (when this.select is null)
this.inputValue = input;
return this.inputValue;
}
}, {
key: 'onInputKeyDown',
Expand Down
Loading