Skip to content
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

Jump to bottom

add option to click on group of items #22

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
Open

add option to click on group of items #22

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
f836173
select group element example
jfernandogt Jun 4, 2016
a00c123
select group
jfernandogt Jun 4, 2016
06c40c5
dist
jfernandogt Jun 4, 2016
154bed1
pointer cursor
jfernandogt Jun 4, 2016
e4028e1
build files
jfernandogt Jun 7, 2016
2d2b49a
Merge branch 'master' of https://github.com/HubSpot/react-select-plus
jfernandogt Jul 20, 2016
050b526
dist
jfernandogt Jul 30, 2016
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
3 changes: 3 additions & 0 deletions dist/react-select-plus.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -250,6 +250,9 @@
display: block;
padding: 8px 10px;
}
.Select-option-group-label.select-parent {
cursor: pointer;
}
.Select-option-group-label ~ .Select-option,
.Select-option-group-label ~ .Select-option-group {
padding-left: 20px;
Expand Down
83 changes: 69 additions & 14 deletions dist/react-select-plus.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -344,9 +344,12 @@ var OptionGroup = _react2['default'].createClass({
children: _react2['default'].PropTypes.any,
className: _react2['default'].PropTypes.string, // className (based on mouse position)
label: _react2['default'].PropTypes.node, // the heading to show above the child options
option: _react2['default'].PropTypes.object.isRequired },
option: _react2['default'].PropTypes.object.isRequired, // object that is base for that option group
isFocused: _react2['default'].PropTypes.bool, // the option is focused
onFocus: _react2['default'].PropTypes.func, // method to handle mouseEnter on option element
selectGroup: _react2['default'].PropTypes.bool },

// object that is base for that option group
// if is true you can select the elements of the group
blockEvent: function blockEvent(event) {
event.preventDefault();
event.stopPropagation();
Expand All @@ -361,8 +364,23 @@ var OptionGroup = _react2['default'].createClass({
},

handleMouseDown: function handleMouseDown(event) {
var selectGroup = this.props.selectGroup;

event.preventDefault();
event.stopPropagation();
if (selectGroup) this.props.onSelect(this.props.option, event);
},

handleMouseEnter: function handleMouseEnter(event) {
var selectGroup = this.props.selectGroup;

if (selectGroup) this.onFocus(event);
},

handleMouseMove: function handleMouseMove(event) {
var selectGroup = this.props.selectGroup;

if (selectGroup) this.onFocus(event);
},

handleTouchEnd: function handleTouchEnd(event) {
Expand All @@ -383,11 +401,19 @@ var OptionGroup = _react2['default'].createClass({
this.dragging = false;
},

onFocus: function onFocus(event) {
if (!this.props.isFocused) {
this.props.onFocus(this.props.option, event);
}
},

render: function render() {
var option = this.props.option;
var _props = this.props;
var option = _props.option;
var selectGroup = _props.selectGroup;

var className = (0, _classnames2['default'])(this.props.className, option.className);

var classNameselectGroup = selectGroup ? 'Select-option-group-label select-parent' : 'Select-option-group-label';
return option.disabled ? _react2['default'].createElement(
'div',
{ className: className,
Expand All @@ -407,7 +433,7 @@ var OptionGroup = _react2['default'].createClass({
title: option.title },
_react2['default'].createElement(
'div',
{ className: 'Select-option-group-label' },
{ className: classNameselectGroup },
this.props.label
),
this.props.children
Expand Down Expand Up @@ -568,9 +594,10 @@ var Select = _react2['default'].createClass({
valueComponent: _react2['default'].PropTypes.func, // value component to render
valueKey: _react2['default'].PropTypes.string, // path of the label value in option objects
valueRenderer: _react2['default'].PropTypes.func, // valueRenderer: function (option) {}
wrapperStyle: _react2['default'].PropTypes.object },
wrapperStyle: _react2['default'].PropTypes.object, // optional style to apply to the component wrapper
selectGroup: _react2['default'].PropTypes.bool },

// optional style to apply to the component wrapper
// opcional permite seleccionar los grupos
statics: { Async: _Async2['default'] },

getDefaultProps: function getDefaultProps() {
Expand Down Expand Up @@ -613,7 +640,8 @@ var Select = _react2['default'].createClass({
simpleValue: false,
tabSelectsValue: true,
valueComponent: _Value2['default'],
valueKey: 'value'
valueKey: 'value',
selectGroup: false
};
},

Expand Down Expand Up @@ -1045,9 +1073,22 @@ var Select = _react2['default'].createClass({
}
},

generateValues: function generateValues(ary) {
var ret = [];
for (var i = 0; i < ary.length; i++) {
if (Array.isArray(ary[i].options)) {
ret = ret.concat(this.generateValues(ary[i].options));
} else {
ret.push(ary[i]);
}
}
return ret;
},

addValue: function addValue(value) {
var values = !Array.isArray(value.options) ? this.generateValues([value]) : this.generateValues(value.options);
var valueArray = this.getValueArray(this.props.value);
this.setValue(valueArray.concat(value));
this.setValue(valueArray.concat(values));
},

popValue: function popValue() {
Expand Down Expand Up @@ -1086,6 +1127,12 @@ var Select = _react2['default'].createClass({
});
},

focusGroup: function focusGroup(group) {
this.setState({
focusedGroup: group
});
},

focusNextOption: function focusNextOption() {
this.focusAdjacentOption('next');
},
Expand Down Expand Up @@ -1391,14 +1438,16 @@ var Select = _react2['default'].createClass({
return flatOptions;
},

renderMenu: function renderMenu(options, valueArray, focusedOption) {
renderMenu: function renderMenu(options, valueArray, focusedOption, focusedGroup) {
var _this4 = this;

if (options && options.length) {
if (this.props.menuRenderer) {
return this.props.menuRenderer({
focusedOption: focusedOption,
focusedGroup: focusedGroup,
focusOption: this.focusOption,
focusGroup: this.focusGroup,
labelKey: this.props.labelKey,
options: options,
selectValue: this.selectValue,
Expand All @@ -1409,23 +1458,31 @@ var Select = _react2['default'].createClass({
var OptionGroup = _this4.props.optionGroupComponent;
var Option = _this4.props.optionComponent;
var renderLabel = _this4.props.optionRenderer || _this4.getOptionLabel;
var selectGroup = _this4.props.selectGroup;

return {
v: options.map(function (option, i) {
if (_this4.isGroup(option)) {
var optionGroupClass = (0, _classnames2['default'])({
'Select-option-group': true
});
var isFocused = option === focusedGroup;
var groupRef = isFocused ? 'focused' : null;

return _react2['default'].createElement(
OptionGroup,
{
className: optionGroupClass,
isFocused: isFocused,
key: 'option-group-' + i,
label: renderLabel(option),
option: option
option: option,
onSelect: _this4.selectValue,
onFocus: _this4.focusGroup,
ref: groupRef,
selectGroup: selectGroup
},
_this4.renderMenu(option.options, valueArray, focusedOption)
_this4.renderMenu(option.options, valueArray, focusedOption, focusedGroup)
);
} else {
var isSelected = valueArray && valueArray.indexOf(option) > -1;
Expand Down Expand Up @@ -1566,7 +1623,6 @@ var Select = _react2['default'].createClass({
'is-searchable': this.props.searchable,
'has-value': valueArray.length
});

var removeMessage = null;
if (this.props.multi && !this.props.disabled && valueArray.length && !this.state.inputValue && this.state.isFocused && this.props.backspaceRemoves) {
removeMessage = _react2['default'].createElement(
Expand All @@ -1575,7 +1631,6 @@ var Select = _react2['default'].createClass({
this.props.backspaceToRemoveMessage.replace('{label}', valueArray[valueArray.length - 1][this.props.labelKey])
);
}

return _react2['default'].createElement(
'div',
{ ref: 'wrapper',
Expand Down
Loading