From 418a414e83f6ffc2a4c84f39fd90b6a8c30bbe21 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rapha=C3=ABl=20Morineau?= Date: Thu, 9 Mar 2017 00:07:53 +0100 Subject: [PATCH] forgot the build file --- lib/SuperSelectField.js | 178 +++++++++++++++++++++------------------- package.json | 8 ++ 2 files changed, 102 insertions(+), 84 deletions(-) diff --git a/lib/SuperSelectField.js b/lib/SuperSelectField.js index 8a5cf4f..12cd776 100644 --- a/lib/SuperSelectField.js +++ b/lib/SuperSelectField.js @@ -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'); @@ -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) { @@ -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( @@ -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; @@ -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(); }; @@ -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': @@ -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; @@ -282,6 +290,7 @@ var SelectField = function (_Component) { _this.state = { isOpen: false, itemsLength: _this.getChildrenLength(props.children), + selectedItems: props.value, searchText: '' }; _this.menuItems = []; @@ -289,11 +298,12 @@ var SelectField = function (_Component) { } _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 @@ -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(); }); } }, { @@ -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); }); @@ -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, @@ -446,6 +444,7 @@ 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, @@ -453,6 +452,7 @@ var SelectField = function (_Component) { innerDivStyle = _props.innerDivStyle, selectedMenuItemStyle = _props.selectedMenuItemStyle, menuGroupStyle = _props.menuGroupStyle, + menuFooterStyle = _props.menuFooterStyle, checkedIcon = _props.checkedIcon, unCheckedIcon = _props.unCheckedIcon, hoverColor = _props.hoverColor, @@ -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 !== '') { @@ -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, @@ -524,7 +525,7 @@ 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; }, []); /* @@ -532,17 +533,21 @@ var SelectField = function (_Component) { ? 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, @@ -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( @@ -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, @@ -581,20 +586,13 @@ 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 - /* ? */ - ? _react2.default.createElement( + menuItems.length ? _react2.default.createElement( _reactInfinite2.default, { elementHeight: elementHeight, @@ -602,7 +600,16 @@ var SelectField = function (_Component) { 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 + ) ) ) ); @@ -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, @@ -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 @@ -700,6 +709,7 @@ 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, @@ -707,7 +717,7 @@ SelectField.defaultProps = { 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; diff --git a/package.json b/package.json index aefa918..67904f6 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "react-infinite-any-height": "^1.0.4" }, "devDependencies": { + "babel-preset-stage-2": "^6.22.0", "enzyme": "^2.7.1", "flag-icon-css": "^2.8.0", "gh-pages": "^0.12.0", @@ -37,6 +38,13 @@ "react-dom": "^15.3.2", "react-tap-event-plugin": "^1.x || ^2.x" }, + "babel": { + "presets": [ + "es2015", + "stage-2", + "react" + ] + }, "eslintConfig": { "extends": [ "react-app",