Skip to content

Commit

Permalink
forgot the build file
Browse files Browse the repository at this point in the history
  • Loading branch information
@Sharlaan
Sharlaan committed Mar 8, 2017
1 parent 4787273 commit 418a414
Show file tree
Hide file tree
Showing 2 changed files with 102 additions and 84 deletions.
178 changes: 94 additions & 84 deletions lib/SuperSelectField.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ var _createClass = function () { function defineProperties(target, props) { for

var _div, _div2;

var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();

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 _react = require('react');
Expand Down Expand Up @@ -59,19 +61,17 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

// Utilities
var areEqual = function areEqual(val1, val2) {
if (!val1 || !val2 || (typeof val1 === 'undefined' ? 'undefined' : _typeof(val1)) !== (typeof val2 === 'undefined' ? 'undefined' : _typeof(val2))) return false;else if (typeof val1 === 'string' || typeof val1 === 'number') return val1 === val2;else if ((typeof val1 === 'undefined' ? 'undefined' : _typeof(val1)) === 'object') {
var props1 = Object.keys(val1);
var props2 = Object.keys(val2);
var values1 = Object.values(val1);
var values2 = Object.values(val2);
return props1.length === props2.length && props1.every(function (key) {
return props2.includes(key);
}) && values1.every(function (val) {
return values2.includes(val);
function areEqual(val1, val2) {
if (!val1 || !val2 || (typeof val1 === 'undefined' ? 'undefined' : _typeof(val1)) !== (typeof val2 === 'undefined' ? 'undefined' : _typeof(val2))) return false;else if (typeof val1 === 'string' || typeof val1 === 'number' || typeof val1 === 'boolean') return val1 === val2;else if ((typeof val1 === 'undefined' ? 'undefined' : _typeof(val1)) === 'object') {
return Object.keys(val1).length === Object.keys(val2).length && Object.entries(val2).every(function (_ref) {
var _ref2 = _slicedToArray(_ref, 2),
key2 = _ref2[0],
value2 = _ref2[1];

return val1[key2] === value2;
});
}
};
}

var checkFormat = function checkFormat(value) {
return value.findIndex(function (v) {
Expand Down Expand Up @@ -102,10 +102,10 @@ var styles = {
}
};

var SelectionsPresenter = function SelectionsPresenter(_ref) {
var selectedValues = _ref.selectedValues,
hintText = _ref.hintText,
selectionsRenderer = _ref.selectionsRenderer;
var SelectionsPresenter = function SelectionsPresenter(_ref3) {
var selectedValues = _ref3.selectedValues,
hintText = _ref3.hintText,
selectionsRenderer = _ref3.selectionsRenderer;

// TODO: add floatingLabelText
return _react2.default.createElement(
Expand Down Expand Up @@ -146,9 +146,9 @@ SelectionsPresenter.defaultProps = {
label = values.label;

if (Array.isArray(values)) {
return values.length ? values.map(function (_ref2) {
var value = _ref2.value,
label = _ref2.label;
return values.length ? values.map(function (_ref4) {
var value = _ref4.value,
label = _ref4.label;
return label || value;
}).join(', ') : hintText;
} else if (label || value) return label || value;else return hintText;
Expand All @@ -167,6 +167,17 @@ var SelectField = function (_Component) {

var _this = _possibleConstructorReturn(this, (SelectField.__proto__ || Object.getPrototypeOf(SelectField)).call(this, props, context));

_this.closeMenu = function () {
var _this$props = _this.props,
onChange = _this$props.onChange,
name = _this$props.name;

onChange(_this.state.selectedItems, name);
_this.setState({ isOpen: false, searchText: '' }, function () {
return (0, _reactDom.findDOMNode)(_this.root).focus();
});
};

_this.handleClick = function (event) {
return !_this.props.disabled && _this.openMenu();
};
Expand All @@ -185,8 +196,8 @@ var SelectField = function (_Component) {
});
};

_this.handleTextFieldKeyDown = function (_ref3) {
var key = _ref3.key;
_this.handleTextFieldKeyDown = function (_ref5) {
var key = _ref5.key;

switch (key) {
case 'ArrowDown':
Expand All @@ -206,34 +217,31 @@ var SelectField = function (_Component) {
_this.handleMenuSelection = function (selectedItem) {
return function (event) {
event.preventDefault();
var _this$props = _this.props,
value = _this$props.value,
multiple = _this$props.multiple,
onChange = _this$props.onChange,
name = _this$props.name;

if (multiple) {
var selectedItemExists = value.some(function (obj) {
var selectedItems = _this.state.selectedItems;

if (_this.props.multiple) {
var selectedItemExists = selectedItems.some(function (obj) {
return areEqual(obj.value, selectedItem.value);
});
var updatedValues = selectedItemExists ? value.filter(function (obj) {
var updatedValues = selectedItemExists ? selectedItems.filter(function (obj) {
return !areEqual(obj.value, selectedItem.value);
}) : value.concat(selectedItem);
onChange(updatedValues, name);
}) : selectedItems.concat(selectedItem);
_this.setState({ selectedItems: updatedValues });
_this.clearTextField(function () {
return _this.focusTextField();
});
} else {
var updatedValue = areEqual(value, selectedItem) ? null : selectedItem;
onChange(updatedValue, name);
_this.closeMenu();
var updatedValue = areEqual(selectedItems, selectedItem) ? null : selectedItem;
_this.setState({ selectedItems: updatedValue }, function () {
return _this.closeMenu();
});
}
};
};

_this.handleMenuKeyDown = function (_ref4) {
var key = _ref4.key,
tabIndex = _ref4.target.tabIndex;
_this.handleMenuKeyDown = function (_ref6) {
var key = _ref6.key,
tabIndex = _ref6.target.tabIndex;

var cleanMenuItems = _this.menuItems.filter(function (item) {
return !!item;
Expand Down Expand Up @@ -282,18 +290,20 @@ var SelectField = function (_Component) {
_this.state = {
isOpen: false,
itemsLength: _this.getChildrenLength(props.children),
selectedItems: props.value,
searchText: ''
};
_this.menuItems = [];
return _this;
}

_createClass(SelectField, [{
key: 'componentDidUpdate',
value: function componentDidUpdate() {
console.debug('this.menuItems did Update', this.menuItems);
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(nextProps) {
if (!areEqual(nextProps.value, this.state.selectedItems)) {
this.setState({ selectedItems: nextProps.value });
}
}

// Counts nodes with non-null value property + optgroups
// noinspection JSMethodCanBeStatic

Expand Down Expand Up @@ -354,22 +364,13 @@ var SelectField = function (_Component) {

return count;
}
}, {
key: 'closeMenu',
value: function closeMenu() {
var _this2 = this;

this.setState({ isOpen: false, searchText: '' }, function () {
return (0, _reactDom.findDOMNode)(_this2.root).focus();
});
}
}, {
key: 'openMenu',
value: function openMenu() {
var _this3 = this;
var _this2 = this;

this.setState({ isOpen: true }, function () {
return _this3.focusTextField();
return _this2.focusTextField();
});
}
}, {
Expand All @@ -388,9 +389,7 @@ var SelectField = function (_Component) {
}, {
key: 'focusMenuItem',
value: function focusMenuItem(index) {
console.debug('index', index, 'this.menuItems', this.menuItems);
var targetMenuItem = this.menuItems.find(function (item) {
console.debug('item', item);
return !!item && (index ? item.props.tabIndex === index : true);
});

Expand Down Expand Up @@ -433,10 +432,9 @@ var SelectField = function (_Component) {
}, {
key: 'render',
value: function render() {
var _this4 = this;
var _this3 = this;

var _props = this.props,
value = _props.value,
hintText = _props.hintText,
hintTextAutocomplete = _props.hintTextAutocomplete,
noMatchFound = _props.noMatchFound,
Expand All @@ -446,13 +444,15 @@ var SelectField = function (_Component) {
nb2show = _props.nb2show,
autocompleteFilter = _props.autocompleteFilter,
selectionsRenderer = _props.selectionsRenderer,
menuCloseButton = _props.menuCloseButton,
anchorOrigin = _props.anchorOrigin,
style = _props.style,
menuStyle = _props.menuStyle,
elementHeight = _props.elementHeight,
innerDivStyle = _props.innerDivStyle,
selectedMenuItemStyle = _props.selectedMenuItemStyle,
menuGroupStyle = _props.menuGroupStyle,
menuFooterStyle = _props.menuFooterStyle,
checkedIcon = _props.checkedIcon,
unCheckedIcon = _props.unCheckedIcon,
hoverColor = _props.hoverColor,
Expand All @@ -476,14 +476,15 @@ var SelectField = function (_Component) {
* accounting for optgroups.
*/
var menuItemBuilder = function menuItemBuilder(nodes, child, index) {
var selectedItems = _this3.state.selectedItems;
var _child$props = child.props,
childValue = _child$props.value,
label = _child$props.label;

if (!autocompleteFilter(_this4.state.searchText, label || childValue)) return nodes;
var isSelected = Array.isArray(value) ? value.some(function (obj) {
if (!autocompleteFilter(_this3.state.searchText, label || childValue)) return nodes;
var isSelected = Array.isArray(selectedItems) ? selectedItems.some(function (obj) {
return areEqual(obj.value, childValue);
}) : value ? value.value === childValue : false;
}) : selectedItems ? selectedItems.value === childValue : false;
var leftCheckbox = multiple && checkPosition === 'left' && (isSelected ? checkedIcon : unCheckedIcon) || null;
var rightCheckbox = multiple && checkPosition === 'right' && (isSelected ? checkedIcon : unCheckedIcon) || null;
if (multiple && checkPosition !== '') {
Expand All @@ -493,10 +494,10 @@ var SelectField = function (_Component) {
return [].concat(_toConsumableArray(nodes), [_react2.default.createElement(_ListItem2.default, {
key: ++index,
tabIndex: index,
ref: function ref(_ref5) {
return _this4.menuItems[++index] = _ref5;
ref: function ref(_ref7) {
return _this3.menuItems[++index] = _ref7;
},
onTouchTap: _this4.handleMenuSelection({ value: childValue, label: label }),
onTouchTap: _this3.handleMenuSelection({ value: childValue, label: label }),
disableFocusRipple: true,
leftIcon: leftCheckbox,
rightIcon: rightCheckbox,
Expand Down Expand Up @@ -524,25 +525,29 @@ var SelectField = function (_Component) {
var groupedItems = child.props.children.reduce(function (nodes, child, idx) {
return menuItemBuilder(nodes, child, nextIndex + idx);
}, []);
return [].concat(_toConsumableArray(nodes), [menuGroup], _toConsumableArray(groupedItems));
return groupedItems.length ? [].concat(_toConsumableArray(nodes), [menuGroup], _toConsumableArray(groupedItems)) : nodes;
}, []);

/*
const menuItemsHeights = this.state.isOpen
? this.menuItems.map(item => findDOMNode(item).clientHeight) // can't resolve since items not rendered yet, need componentDiDMount
: elementHeight
*/
var containerHeight = elementHeight * (nb2show < menuItems.length ? nb2show : menuItems.length) || 0;
var popoverHeight = (this.showAutocomplete() ? 53 : 0) + (containerHeight || elementHeight);
var autoCompleteHeight = this.showAutocomplete() ? 53 : 0;
var footerHeight = menuCloseButton ? 36 : 0;
var noMatchFoundHeight = 36;
var containerHeight = (Array.isArray(elementHeight) ? elementHeight.reduce(function (totalHeight, height) {
return totalHeight + height;
}, 6) : elementHeight * (nb2show < menuItems.length ? nb2show : menuItems.length)) || 0;
var popoverHeight = autoCompleteHeight + (containerHeight || noMatchFoundHeight) + footerHeight;
var scrollableStyle = { overflowY: nb2show >= menuItems.length ? 'hidden' : 'scroll' };
var menuWidth = this.root ? this.root.clientWidth : null;

console.debug('menuItems', menuItems);
return _react2.default.createElement(
'div',
{
ref: function ref(_ref8) {
return _this4.root = _ref8;
ref: function ref(_ref10) {
return _this3.root = _ref10;
},
tabIndex: '0',
onKeyDown: this.handleKeyDown,
Expand All @@ -554,7 +559,7 @@ var SelectField = function (_Component) {
},
_react2.default.createElement(SelectionsPresenter, {
hintText: hintText,
selectedValues: value,
selectedValues: this.state.selectedItems,
selectionsRenderer: selectionsRenderer
}),
_react2.default.createElement(
Expand All @@ -566,11 +571,11 @@ var SelectField = function (_Component) {
anchorOrigin: anchorOrigin,
useLayerForClickAway: false,
onRequestClose: this.handlePopoverClose,
style: { height: popoverHeight || 0 }
style: { height: popoverHeight }
},
this.showAutocomplete() && _react2.default.createElement(_TextField2.default, {
ref: function ref(_ref6) {
return _this4.searchTextField = _ref6;
ref: function ref(_ref8) {
return _this3.searchTextField = _ref8;
},
value: this.state.searchText,
hintText: hintTextAutocomplete,
Expand All @@ -581,28 +586,30 @@ var SelectField = function (_Component) {
_react2.default.createElement(
'div',
{
ref: function ref(_ref7) {
return _this4.menu = _ref7;
ref: function ref(_ref9) {
return _this3.menu = _ref9;
},
onKeyDown: this.handleMenuKeyDown,
style: _extends({ width: menuWidth }, menuStyle)
},
menuItems.length
/* ? <InfiniteScroller
list={menuItems}
scrollContainer={this.refs.menu}
containerHeight={containerHeight}
styles={{ scrollableStyle }}
/> */
? _react2.default.createElement(
menuItems.length ? _react2.default.createElement(
_reactInfinite2.default,
{
elementHeight: elementHeight,
containerHeight: containerHeight,
styles: { scrollableStyle: scrollableStyle }
},
menuItems
) : _react2.default.createElement(_ListItem2.default, { primaryText: noMatchFound, style: { cursor: 'default' }, disabled: true })
) : _react2.default.createElement(_ListItem2.default, { primaryText: noMatchFound, style: { cursor: 'default', padding: '10px 16px' }, disabled: true })
),
multiple && _react2.default.createElement(
'footer',
{ style: { display: 'flex', alignItems: 'center', justifyContent: 'flex-end' } },
_react2.default.createElement(
'div',
{ onTouchTap: this.closeMenu, style: menuFooterStyle },
menuCloseButton
)
)
)
);
Expand Down Expand Up @@ -665,6 +672,7 @@ SelectField.propTypes = {
}),
innerDivStyle: _react.PropTypes.object,
selectedMenuItemStyle: _react.PropTypes.object,
menuFooterStyle: _react.PropTypes.object,
name: _react.PropTypes.string,
hintText: _react.PropTypes.string,
hintTextAutocomplete: _react.PropTypes.string,
Expand All @@ -689,6 +697,7 @@ SelectField.propTypes = {
},
autocompleteFilter: _react.PropTypes.func,
selectionsRenderer: _react.PropTypes.func,
menuCloseButton: _react.PropTypes.node,
multiple: _react.PropTypes.bool,
disabled: _react.PropTypes.bool,
onChange: _react.PropTypes.func
Expand All @@ -700,14 +709,15 @@ SelectField.defaultProps = {
checkPosition: '',
checkedIcon: _react2.default.createElement(_check2.default, { style: { top: 'calc(50% - 12px)' } }),
unCheckedIcon: _react2.default.createElement(_checkBoxOutlineBlank2.default, { style: { top: 'calc(50% - 12px)' } }),
menuCloseButton: null,
multiple: false,
disabled: false,
nb2show: 5,
hintText: 'Click me',
hintTextAutocomplete: 'Type something',
noMatchFound: 'No match found',
showAutocompleteTreshold: 10,
elementHeight: 58,
elementHeight: 36,
autocompleteFilter: function autocompleteFilter(searchText, text) {
if (!text || typeof text !== 'string' && typeof text !== 'number') return false;
if (typeof searchText !== 'string' && typeof searchText !== 'number') return false;
Expand Down
Loading

0 comments on commit 418a414

Please sign in to comment.