@hipay/hipay-material-ui 2.0.0-beta.55 → 2.0.0-beta.57

package/HiSelectNew/HiSelect.js

@@ -106,7 +106,10 @@ var styles = function styles(theme) {
     }, theme.typography.b1, {
       display: 'inline-flex',
       width: '100%'
-    })
+    }),
+    separator: {
+      borderTop: "1px solid ".concat(theme.palette.input.bottomLine)
+    }
   };
 };
 /**
@@ -138,6 +141,112 @@ function (_React$PureComponent) {
     (0, _classCallCheck2.default)(this, HiSelect);
     _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiSelect).call(this, props));
 
+    _this.buildSelectProps = function (options) {
+      var value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+      var search = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
+      var loading = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+      // build item list
+      var itemList = (0, _toConsumableArray2.default)(loading ? [{
+        id: '_loading',
+        type: 'loader',
+        disabled: true,
+        centered: true,
+        hideCheckbox: true,
+        label: 'loading'
+      }] : []).concat((0, _toConsumableArray2.default)(search !== '' ? (0, _toConsumableArray2.default)(options.filter(function (item) {
+        return item.label && (0, _helpers.foldAccents)(item.label.toString().toLowerCase()).search((0, _helpers.foldAccents)(search.toLowerCase())) !== -1;
+      })) : (0, _toConsumableArray2.default)(_this.props.hasAll ? [(0, _extends2.default)({
+        id: '_all',
+        label: _this.props.translations.all
+      }, _this.props.iconAll && {
+        type: 'icon',
+        icon: _this.props.iconAll
+      })] : []).concat((0, _toConsumableArray2.default)(options))));
+      return {
+        itemList: itemList,
+        inputValue: _this.buildInputValue(options, value, loading)
+      };
+    };
+
+    _this.buildInputValue = function (options) {
+      var value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+      var loading = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+      var _this$props = _this.props,
+          classes = _this$props.classes,
+          hasAll = _this$props.hasAll,
+          translations = _this$props.translations,
+          type = _this$props.type; // build input value
+
+      var inputValue;
+
+      if (loading && value.length === 1) {
+        inputValue = translations.one_item_selected;
+      } else if (hasAll && options.length === value.length) {
+        inputValue = translations.all;
+        value.unshift('_all');
+      } else if (value.length > 1) {
+        inputValue = translations.n_items_selected.replace('%s', value.length);
+      } else if (value.length === 1) {
+        var item = options.find(function (o) {
+          return o.id === value[0];
+        });
+
+        if (item === undefined) {
+          inputValue = translations.one_item_selected;
+        } else if (type === 'icon' || item.type === 'icon') {
+          inputValue = _react.default.createElement("span", {
+            className: classes.selectIconLabel
+          }, _react.default.createElement(_HiIcon.default, {
+            className: classes.labelIcon,
+            icon: item.icon
+          }), item.label);
+        } else if (type === 'image' || item.type === 'image') {
+          inputValue = _react.default.createElement("span", {
+            className: classes.selectIconLabel
+          }, _react.default.createElement("img", {
+            className: classes.labelImg,
+            src: item.img,
+            alt: item.label,
+            onError: function onError(e) {
+              if (item.fallbackImage) {
+                e.target.src = "".concat(item.fallbackImage);
+              } else {
+                e.target.style.display = 'none';
+              }
+            }
+          }), item.label);
+        } else {
+          inputValue = item.label;
+        }
+      }
+
+      return inputValue;
+    };
+
+    _this.focusOnFirstItem = function () {
+      var overlay = (0, _reactDom.findDOMNode)(_this.overlay);
+      setTimeout(function () {
+        var item = overlay.getElementsByTagName('li')[0];
+        item.focus();
+      }, 1);
+    };
+
+    _this.getInputElement = function (el) {
+      _this.searchField = el;
+
+      if (_this.props.inputRef) {
+        _this.props.inputRef(_this.searchField);
+      }
+    };
+
+    _this.handleBlur = function () {
+      _this.handleSearchReset();
+
+      _this.setState({
+        focused: false
+      });
+    };
+
     _this.handleClick = function () {
       if (_this.state.open) {
         _this.handleClose();
@@ -151,20 +260,59 @@ function (_React$PureComponent) {
         if (_this.props.onClick) _this.props.onClick(); // Gestion du focus
 
         if (!_this.props.searchable) {
-          // sinon focus sur le premier élément de la liste
-          _this.focusOnFirstItem();
+          // Sinon focus sur l'élément sélectionné
+          _this.focusOnSelectedItem(_this.props.value);
         }
       }
     };
 
-    _this.focusOnFirstItem = function () {
+    _this.focusOnSelectedItem = function (selectedValue) {
       var overlay = (0, _reactDom.findDOMNode)(_this.overlay);
       setTimeout(function () {
+        // On initialise au premier élément pour être sûr de ne pas se retrouver avec un focus of undefined
         var item = overlay.getElementsByTagName('li')[0];
-        item.focus();
+
+        if (selectedValue && typeof selectedValue === 'string') {
+          item = overlay.getElementsByTagName('li')[selectedValue];
+        } else if (selectedValue && typeof selectedValue === 'number') {
+          item = overlay.getElementsByTagName('li')[selectedValue - 1];
+        }
+
+        if (item) {
+          item.focus();
+        }
       }, 1);
     };
 
+    _this.handleClickAway = function (event) {
+      // Au clic sur le bouton, on laisse le handleClick fermer le select
+      if (!_this.inputEl.contains(event.target)) {
+        _this.handleClose(event);
+      }
+    };
+
+    _this.handleClose = function () {
+      _this.handleSearchReset();
+
+      _this.setState({
+        open: false
+      });
+
+      if (_this.props.onClose) {
+        _this.props.onClose();
+      }
+
+      if (_this.inputEl) {
+        _this.inputEl.focus();
+      }
+    };
+
+    _this.handleFocus = function () {
+      _this.setState({
+        focused: true
+      });
+    };
+
     _this.handleKeyDown = function (event) {
       var nextItem;
       var key = (0, _keycode.default)(event);
@@ -175,7 +323,17 @@ function (_React$PureComponent) {
       } else if (key === 'up') {
         event.preventDefault();
         nextItem = (0, _helpers.getNextItemSelectable)(document.activeElement, 'up');
-      } else if (key === 'tab' || key === 'esc') {
+      }
+
+      if (nextItem) {
+        nextItem.focus();
+      }
+    };
+
+    _this.handleKeyUp = function (event) {
+      var key = (0, _keycode.default)(event);
+
+      if (key === 'tab' || key === 'esc') {
         _this.setState({
           open: false
         });
@@ -192,10 +350,6 @@ function (_React$PureComponent) {
 
         _this.handleClose();
       }
-
-      if (nextItem) {
-        nextItem.focus();
-      }
     };
 
     _this.handleKeyDownSearch = function (event) {
@@ -210,46 +364,19 @@ function (_React$PureComponent) {
       }
     };
 
-    _this.handleFocus = function () {
-      _this.setState({
-        focused: true
-      });
-    };
-
-    _this.handleBlur = function () {
-      _this.setState({
-        focused: false
-      });
-    };
-
-    _this.handleClose = function () {
-      _this.setState({
-        open: false
-      });
-
-      if (_this.props.onClose) {
-        _this.props.onClose();
-      }
-
-      if (_this.inputEl) {
-        _this.inputEl.focus();
-      }
-    };
-
-    _this.handleClickAway = function (event) {
-      // Au clic sur le bouton, on laisse le handleClick fermer le select
-      if (!_this.inputEl.contains(event.target)) {
-        _this.handleClose(event);
+    _this.handleScroll = function (e) {
+      if (e.target.scrollHeight - e.target.clientHeight - e.target.scrollTop < 15) {
+        _this.props.onScrollReachBottom();
       }
     };
 
     _this.handleSelect = function (event, item) {
-      var _this$props = _this.props,
-          hasAll = _this$props.hasAll,
-          multiple = _this$props.multiple,
-          onChange = _this$props.onChange,
-          options = _this$props.options,
-          value = _this$props.value;
+      var _this$props2 = _this.props,
+          hasAll = _this$props2.hasAll,
+          multiple = _this$props2.multiple,
+          onChange = _this$props2.onChange,
+          options = _this$props2.options,
+          value = _this$props2.value;
 
       if (!multiple) {
         // single value
@@ -277,10 +404,10 @@ function (_React$PureComponent) {
     };
 
     _this.handleSuggestions = function (suggestions) {
-      var _this$props2 = _this.props,
-          hasAll = _this$props2.hasAll,
-          iconAll = _this$props2.iconAll,
-          translations = _this$props2.translations;
+      var _this$props3 = _this.props,
+          hasAll = _this$props3.hasAll,
+          iconAll = _this$props3.iconAll,
+          translations = _this$props3.translations;
 
       if (suggestions.length === 0) {
         // Add '_no_result' suggestion
@@ -309,12 +436,6 @@ function (_React$PureComponent) {
       }
     };
 
-    _this.handleScroll = function (e) {
-      if (e.target.scrollHeight - e.target.clientHeight - e.target.scrollTop < 15) {
-        _this.props.onScrollReachBottom();
-      }
-    };
-
     _this.handleSearch = function (e, inputValue) {
       var searchValue = inputValue && e.target.value ? inputValue : e.target.value;
 
@@ -335,86 +456,12 @@ function (_React$PureComponent) {
       }, '');
     };
 
-    _this.buildSelectProps = function (options) {
-      var value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-      var search = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
-      var loading = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
-      // build item list
-      var itemList = (0, _toConsumableArray2.default)(loading ? [{
-        id: '_loading',
-        type: 'loader',
-        disabled: true,
-        centered: true,
-        hideCheckbox: true,
-        label: 'loading'
-      }] : []).concat((0, _toConsumableArray2.default)(search !== '' ? (0, _toConsumableArray2.default)(options.filter(function (item) {
-        return item.label && (0, _helpers.foldAccents)(item.label.toString().toLowerCase()).search((0, _helpers.foldAccents)(search.toLowerCase())) !== -1;
-      })) : (0, _toConsumableArray2.default)(_this.props.hasAll ? [(0, _extends2.default)({
-        id: '_all',
-        label: _this.props.translations.all
-      }, _this.props.iconAll && {
-        type: 'icon',
-        icon: _this.props.iconAll
-      })] : []).concat((0, _toConsumableArray2.default)(options))));
-      return {
-        itemList: itemList,
-        inputValue: _this.buildInputValue(options, value, loading)
-      };
-    };
-
-    _this.buildInputValue = function (options) {
-      var value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-      var loading = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-      var _this$props3 = _this.props,
-          classes = _this$props3.classes,
-          hasAll = _this$props3.hasAll,
-          translations = _this$props3.translations,
-          type = _this$props3.type; // build input value
-
-      var inputValue;
-
-      if (loading && value.length === 1) {
-        inputValue = translations.one_item_selected;
-      } else if (hasAll && options.length === value.length) {
-        inputValue = translations.all;
-        value.unshift('_all');
-      } else if (value.length > 1) {
-        inputValue = translations.n_items_selected.replace('%s', value.length);
-      } else if (value.length === 1) {
-        var item = options.find(function (o) {
-          return o.id === value[0];
-        });
-
-        if (item === undefined) {
-          inputValue = translations.one_item_selected;
-        } else if (type === 'icon' || item.type === 'icon') {
-          inputValue = _react.default.createElement("span", {
-            className: classes.selectIconLabel
-          }, _react.default.createElement(_HiIcon.default, {
-            className: classes.labelIcon,
-            icon: item.icon
-          }), item.label);
-        } else if (type === 'image' || item.type === 'image') {
-          inputValue = _react.default.createElement("span", {
-            className: classes.selectIconLabel
-          }, _react.default.createElement("img", {
-            className: classes.labelImg,
-            src: item.img,
-            alt: item.label
-          }), item.label);
-        } else {
-          inputValue = item.label;
-        }
-      }
-
-      return inputValue;
-    };
-
     _this.state = {
       open: false,
       focused: false,
       searchValue: props.searchValue ? undefined : '',
-      suggestions: props.options
+      suggestions: props.options,
+      openDown: true
     };
     _this.handleClick = _this.handleClick.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
     _this.handleClose = _this.handleClose.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
@@ -430,15 +477,6 @@ function (_React$PureComponent) {
   }
 
   (0, _createClass2.default)(HiSelect, [{
-    key: "getInputElement",
-    value: function getInputElement(el) {
-      this.searchField = el;
-
-      if (this.props.inputRef) {
-        this.props.inputRef(this.searchField);
-      }
-    }
-  }, {
     key: "render",
     value: function render() {
       var _classNames,
@@ -456,6 +494,7 @@ function (_React$PureComponent) {
           value = _this$props4.value,
           multiple = _this$props4.multiple,
           translations = _this$props4.translations,
+          hiSearchInputProps = _this$props4.hiSearchInputProps,
           hiSelectableListProps = _this$props4.hiSelectableListProps,
           hiSelectInputProps = _this$props4.hiSelectInputProps,
           id = _this$props4.id,
@@ -503,43 +542,70 @@ function (_React$PureComponent) {
 
       var popperClass = (0, _classnames.default)(classes.popper, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.popperWidth, !this.props.containerWidth), (0, _defineProperty2.default)(_classNames, classes.popperRightAlign, this.props.containerWidth && this.props.align === 'right'), _classNames));
 
-      var content = _react.default.createElement(_ClickAwayListener.default, {
-        onClickAway: this.handleClickAway
-      }, _react.default.createElement(_Grow.default, {
-        in: open,
-        id: "menu-list",
-        style: {
-          transformOrigin: '0 0 0'
+      var searchInput = function searchInput(position) {
+        if (!!searchable) {
+          return _react.default.createElement(_HiInput.default, (0, _extends2.default)({
+            value: searchValue,
+            autoFocus: true,
+            inputRef: _this2.getInputElement,
+            onKeyDown: _this2.handleKeyDownSearch,
+            onChange: _this2.handleSearch,
+            onReset: _this2.handleSearchReset,
+            placeholder: translations.search,
+            startAdornment: 'search',
+            tabIndex: 0,
+            className: (0, _classnames.default)((0, _defineProperty2.default)({}, classes.separator, position === 'top'))
+          }, hiSearchInputProps));
         }
-      }, _react.default.createElement(_Paper.default, {
-        className: classes.paper
-      }, !!searchable && _react.default.createElement(_HiInput.default, {
-        value: searchValue,
-        autoFocus: true,
-        inputRef: this.getInputElement,
-        onKeyDown: this.handleKeyDownSearch,
-        onChange: this.handleSearch,
-        onReset: this.handleSearchReset,
-        placeholder: translations.search,
-        startAdornment: 'search',
-        tabIndex: 0
-      }), startAdornment, _react.default.createElement(_reactCustomScrollbars.default, (0, _extends2.default)({
-        ref: function ref(contentEl) {
-          _this2.optionsContent = contentEl;
-        },
-        autoHeight: true,
-        autoHeightMax: 400 // TODO ?
-
-      }, onScrollReachBottom && {
-        onScroll: this.handleScroll
-      }), _react.default.createElement(_HiSelectableList.default, (0, _extends2.default)({
-        type: type,
-        itemList: itemList,
-        onKeyDown: this.handleKeyDown,
-        onSelect: this.handleSelect,
-        selectedItemIdList: selectedItemIdList,
-        fallbackImage: this.props.fallbackImage
-      }, hiSelectableListProps))))));
+
+        return null;
+      }; // Replace popper onSearch when popper displayed on top of selectButton
+
+
+      if (this.placement && this.placement.indexOf('top') >= 0 && !!searchable) {
+        // +1 for search input
+        var nbItems = itemList.length <= 10 ? itemList.length + 1 : 11;
+        popperStyle.transform = "translate3d(-1px, -".concat(nbItems * 40 + 2, "px, 0px)");
+      } else if (this.placement && this.placement.indexOf('top') < 0 && !!searchable) {
+        popperStyle.transform = "translate3d(-1px, 40px, 0px)";
+      }
+
+      var content = function content(_ref) {
+        var placement = _ref.placement;
+
+        if (placement !== _this2.placement) {
+          _this2.placement = placement;
+        }
+
+        return _react.default.createElement(_ClickAwayListener.default, {
+          onClickAway: _this2.handleClickAway
+        }, _react.default.createElement(_Grow.default, {
+          in: open,
+          id: "menu-list",
+          style: {
+            transformOrigin: '0 0 0'
+          }
+        }, _react.default.createElement(_Paper.default, {
+          className: classes.paper
+        }, (_this2.placement && _this2.placement.indexOf('bottom') >= 0 || staticPosition) && searchInput('bottom'), startAdornment, _react.default.createElement(_reactCustomScrollbars.default, (0, _extends2.default)({
+          ref: function ref(contentEl) {
+            _this2.optionsContent = contentEl;
+          },
+          autoHeight: true,
+          autoHeightMax: 400 // TODO ?
+
+        }, onScrollReachBottom && {
+          onScroll: _this2.handleScroll
+        }), _react.default.createElement(_HiSelectableList.default, (0, _extends2.default)({
+          type: type,
+          itemList: itemList,
+          onKeyDown: _this2.handleKeyDown,
+          onKeyUp: _this2.handleKeyUp,
+          onSelect: _this2.handleSelect,
+          selectedItemIdList: selectedItemIdList,
+          fallbackImage: _this2.props.fallbackImage
+        }, hiSelectableListProps))), _this2.placement && _this2.placement.indexOf('top') >= 0 && !staticPosition && searchInput('top'))));
+      };
 
       return _react.default.createElement("div", {
         className: classes.root,
@@ -570,7 +636,7 @@ function (_React$PureComponent) {
       })), open && staticPosition ? _react.default.createElement("div", {
         style: popperStyle,
         className: popperClass
-      }, content) : _react.default.createElement(_Popper.default, {
+      }, content({})) : _react.default.createElement(_Popper.default, {
         anchorEl: this.inputEl,
         placement: "bottom-start",
         open: open,
@@ -590,6 +656,15 @@ function (_React$PureComponent) {
 
       return null;
     }
+    /**
+     * Build itemList & inputValue from select props
+     * @param options
+     * @param value
+     * @param search
+     * @param loading
+     * @returns {{itemList: *[], inputValue: *}}
+     */
+
   }]);
   return HiSelect;
 }(_react.default.PureComponent);
@@ -602,6 +677,7 @@ HiSelect.defaultProps = {
   hasAll: false,
   hiSelectableListProps: {},
   hiSelectInputProps: {},
+  hiSearchInputProps: {},
   multiple: false,
   placeholder: '',
   searchable: false,
@@ -656,7 +732,12 @@ HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
   hasAll: _propTypes.default.bool,
 
   /**
-   * Override HiSelectableList props (
+   * Override HiInput props (for search)
+   */
+  hiSearchInputProps: _propTypes.default.object,
+
+  /**
+   * Override HiSelectableList props
    */
   hiSelectableListProps: _propTypes.default.object,
 

package/HiSelectNew/HiSelectContent.js

@@ -37,8 +37,6 @@ var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
 
 var _helpers = require("../utils/helpers");
 
-var _HiIcon = _interopRequireDefault(require("../HiIcon"));
-
 var _keycode = _interopRequireDefault(require("keycode"));
 
 var styles = function styles(theme) {
@@ -295,9 +293,6 @@ function (_React$PureComponent) {
       var _this2 = this;
 
       var _this$props3 = this.props,
-          classes = _this$props3.classes,
-          disabled = _this$props3.disabled,
-          error = _this$props3.error,
           loading = _this$props3.loading,
           options = _this$props3.options,
           searchable = _this$props3.searchable,
@@ -306,10 +301,7 @@ function (_React$PureComponent) {
           multiple = _this$props3.multiple,
           translations = _this$props3.translations,
           hiSelectableListProps = _this$props3.hiSelectableListProps,
-          hiSelectInputProps = _this$props3.hiSelectInputProps,
-          id = _this$props3.id,
           onScrollReachBottom = _this$props3.onScrollReachBottom,
-          onSubmit = _this$props3.onSubmit,
           startAdornment = _this$props3.startAdornment,
           _this$props3$searchVa = _this$props3.searchValue,
           searchValue = _this$props3$searchVa === void 0 ? this.state.searchValue : _this$props3$searchVa,

package/HiSelectNew/HiSelectInput.js

@@ -209,14 +209,12 @@ function (_React$PureComponent) {
     _this.handleBlur = function (event) {
       if ((!_this.input || !_this.input.contains(event.relatedTarget)) && _this.props.onBlur) {
         _this.props.onBlur(event);
-      } else {
-        if (_this.input && (!_this.resetIcon || !_this.resetIcon.contains(event.relatedTarget))) {
-          _this.input.focus();
-        }
+      } else if (_this.input && (!_this.resetIcon || !_this.resetIcon.contains(event.relatedTarget))) {
+        _this.input.focus();
       }
     };
 
-    _this.handleRef = function (el) {
+    _this.ref = function (el) {
       _this.input = el;
 
       if (_this.props.refElement) {
@@ -227,7 +225,7 @@ function (_React$PureComponent) {
     _this.handleKeyDown = _this.handleKeyDown.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
     _this.handleClick = _this.handleClick.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
     _this.handleBlur = _this.handleBlur.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
-    _this.handleRef = _this.handleRef.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.ref = _this.ref.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
     _this.handleReset = _this.handleReset.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
     return _this;
   }
@@ -265,7 +263,7 @@ function (_React$PureComponent) {
         onBlur: this.props.onBlur,
         role: "button",
         tabIndex: "0",
-        ref: this.handleRef
+        ref: this.ref
       }, _react.default.createElement("span", {
         className: (0, _classnames.default)(classes.label, (0, _defineProperty2.default)({}, classes.placeholder, value === undefined))
       }, value || placeholder), _react.default.createElement(_ArrowDropDown.default, {
@@ -279,8 +277,9 @@ function (_React$PureComponent) {
         onMouseLeave: this.props.onMouseLeave,
         onKeyDown: this.handleKeyDown,
         onFocus: this.props.onFocus,
-        onBlur: this.handleBlur,
-        buttonRef: this.handleRef
+        onBlur: this.handleBlur // buttref={this.ref}
+        ,
+        buttonRef: this.ref
       }, _react.default.createElement("span", {
         className: (0, _classnames.default)(classes.label, (0, _defineProperty2.default)({}, classes.placeholder, value === undefined))
       }, value || placeholder), onReset && focused && _react.default.createElement("div", {