Skip to content

fix .is-selected state #2

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
szokrika wants to merge 7 commits into
base: master
Choose a base branch
from
Open

fix .is-selected state #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
fced163
fix to selected state
csongor-szeles Aug 17, 2018
673a8a0
fixing quotes
csongor-szeles Aug 17, 2018
bba99f1
correct state and is-selected for user selection
csongor-szeles Aug 17, 2018
5a01640
cover case where the selected state is the label not the value
csongor-szeles Aug 17, 2018
47201a3
fix is-selected for when an option is an object
csongor-szeles Aug 17, 2018
080f40c
fix combo of state - options string - object selection
csongor-szeles Aug 17, 2018
268829b
bugfix: fix IE11 race condition for closing the menu on first user click
csongor-szeles Aug 20, 2018
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
93 changes: 62 additions & 31 deletions dist/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ Object.defineProperty(exports, "__esModule", {
value: true
});

var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require('react');
Expand Down Expand Up @@ -50,6 +52,7 @@ var Dropdown = function (_Component) {
_this.mounted = true;
_this.handleDocumentClick = _this.handleDocumentClick.bind(_this);
_this.handleKeyPressEvent = _this.handleKeyPressEvent.bind(_this);
_this.isItSelected = _this.isItSelected.bind(_this);
return _this;
}

Expand All @@ -61,7 +64,9 @@ var Dropdown = function (_Component) {
} else if (!newProps.value && newProps.placeholder) {
this.setState({ selected: { label: newProps.placeholder, value: '' } });
} else if (!newProps.value) {
this.setState({ selected: { label: DEFAULT_PLACEHOLDER_STRING, value: '' } });
this.setState({
selected: { label: DEFAULT_PLACEHOLDER_STRING, value: '' }
});
}
}
}, {
Expand All @@ -84,15 +89,19 @@ var Dropdown = function (_Component) {
value: function handleDocumentClick(event) {
if (this.mounted) {
if (!_reactDom2.default.findDOMNode(this).contains(event.target)) {
this.setState({ isOpen: false });
this.setState(function () {
return { isOpen: false };
});
}
}
}
}, {
key: 'handleKeyPressEvent',
value: function handleKeyPressEvent(e) {
if (e.keyCode === 27) {
this.setState({ isOpen: false });
this.setState(function () {
return { isOpen: false };
});
}
}
}, {
Expand All @@ -105,21 +114,24 @@ var Dropdown = function (_Component) {
}, {
key: 'handleMouseDown',
value: function handleMouseDown(event) {
var _this2 = this;

if (event.type === 'mousedown' && event.button !== 0) return;
event.stopPropagation();
event.preventDefault();

if (!this.props.disabled) {
this.setState({
isOpen: !this.state.isOpen
this.setState(function () {
return { isOpen: !_this2.state.isOpen };
});
}
}
}, {
key: 'handleDropdownFocus',
value: function handleDropdownFocus() {
this.setState({ isOpen: true });
this.setState(function () {
return { isOpen: true };
});
}
}, {
key: 'handleDropdownBlur',
Expand All @@ -135,7 +147,9 @@ var Dropdown = function (_Component) {
}
}
}
this.setState({ isOpen: stayOpen });
this.setState(function () {
return { isOpen: stayOpen };
});
}
}, {
key: 'handleDropdownKeyDown',
Expand Down Expand Up @@ -166,28 +180,45 @@ var Dropdown = function (_Component) {
}, {
key: 'setValue',
value: function setValue(value, label) {
var _this3 = this;

var newState = {
isOpen: false,
selected: {
value: value,
label: label
},
isOpen: false
}
};
this.fireChangeEvent(newState);
this.dropdownButton.focus();
this.setState(newState);
// there seems to be a race condition in IE11 for closing the menu in render, so setTimeout :(
setTimeout(function () {
_this3.setState(function () {
return newState;
});
}, 20);
}
}, {
key: 'isItSelected',
value: function isItSelected(option) {
var isSelected = false;
if ((typeof option === 'undefined' ? 'undefined' : _typeof(option)) === 'object') {
isSelected = option.value === this.state.selected.value || option.label === this.state.selected;
} else {
isSelected = option === this.state.selected.value || option === this.state.selected;
}
return isSelected;
}
}, {
key: 'renderOption',
value: function renderOption(option) {
var _classNames,
_this2 = this;
_this4 = this;

var optionClass = (0, _classnames2.default)((_classNames = {}, _defineProperty(_classNames, this.props.baseClassName + '-option', true), _defineProperty(_classNames, 'is-selected', option === this.state.selected), _classNames));
var optionClass = (0, _classnames2.default)((_classNames = {}, _defineProperty(_classNames, this.props.baseClassName + '-option', true), _defineProperty(_classNames, 'is-selected', this.isItSelected(option)), _classNames));

var value = option.value || option.label || option;
var label = option.label || option.value || option;

return _react2.default.createElement(
'div',
{
Expand All @@ -196,16 +227,16 @@ var Dropdown = function (_Component) {
key: value,
className: optionClass,
onMouseDown: function onMouseDown() {
return _this2.setValue(value, label);
return _this4.setValue(value, label);
},
onClick: function onClick() {
return _this2.setValue(value, label);
return _this4.setValue(value, label);
},
onKeyDown: function onKeyDown(e) {
return _this2.handleOptionKeyDown(e, value, label);
return _this4.handleOptionKeyDown(e, value, label);
},
onBlur: function onBlur(e) {
return _this2.handleDropdownBlur(e);
return _this4.handleDropdownBlur(e);
}
},
label
Expand All @@ -214,7 +245,7 @@ var Dropdown = function (_Component) {
}, {
key: 'buildMenu',
value: function buildMenu() {
var _this3 = this;
var _this5 = this;

var _props = this.props,
options = _props.options,
Expand All @@ -228,7 +259,7 @@ var Dropdown = function (_Component) {
option.name
);
var _options = option.items.map(function (item) {
return _this3.renderOption(item);
return _this5.renderOption(item);
});

return _react2.default.createElement(
Expand All @@ -238,7 +269,7 @@ var Dropdown = function (_Component) {
_options
);
} else {
return _this3.renderOption(option);
return _this5.renderOption(option);
}
});

Expand All @@ -251,7 +282,7 @@ var Dropdown = function (_Component) {
}, {
key: 'render',
value: function render() {
var _this4 = this,
var _this6 = this,
_classNames2;

var baseClassName = this.props.baseClassName;
Expand All @@ -263,16 +294,16 @@ var Dropdown = function (_Component) {
{ className: baseClassName + '-placeholder' },
placeHolderValue
);
var menu = this.state.isOpen ? _react2.default.createElement(
var menu = _react2.default.createElement(
'div',
{
ref: function ref(el) {
_this4.dropdownMenu = el;
_this6.dropdownMenu = el;
},
className: baseClassName + '-menu'
},
this.buildMenu()
) : null;
);

var dropdownClass = (0, _classnames2.default)((_classNames2 = {}, _defineProperty(_classNames2, baseClassName + '-root', true), _defineProperty(_classNames2, 'is-open', this.state.isOpen), _classNames2));

Expand All @@ -285,29 +316,29 @@ var Dropdown = function (_Component) {
tabIndex: this.props.tabIndex || '0',
role: 'menu',
ref: function ref(el) {
_this4.dropdownButton = el;
_this6.dropdownButton = el;
},
onFocus: function onFocus() {
return _this4.handleDropdownFocus();
return _this6.handleDropdownFocus();
},
onBlur: function onBlur(e) {
return _this4.handleDropdownBlur(e);
return _this6.handleDropdownBlur(e);
},
className: baseClassName + '-control ' + disabledClass,
onMouseDown: function onMouseDown(e) {
return _this4.handleMouseDown(e);
return _this6.handleMouseDown(e);
},
onTouchEnd: function onTouchEnd(e) {
return _this4.handleMouseDown(e);
return _this6.handleMouseDown(e);
},
onKeyDown: function onKeyDown(e) {
return _this4.handleDropdownKeyDown(e);
return _this6.handleDropdownKeyDown(e);
}
},
value,
_react2.default.createElement('span', { className: baseClassName + '-arrow' })
),
menu
this.state.isOpen && menu
);
}
}]);
Expand Down
Loading