@hipay/hipay-material-ui 2.0.0-beta.54 → 2.0.0-beta.56

package/HiSelectNew/HiSelect.js

@@ -138,6 +138,105 @@ 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
+          }), 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 +250,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);
@@ -210,46 +348,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 +388,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 +420,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,81 +440,6 @@ 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,
@@ -430,15 +460,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 +477,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,
@@ -513,7 +535,7 @@ function (_React$PureComponent) {
         }
       }, _react.default.createElement(_Paper.default, {
         className: classes.paper
-      }, !!searchable && _react.default.createElement(_HiInput.default, {
+      }, !!searchable && _react.default.createElement(_HiInput.default, (0, _extends2.default)({
         value: searchValue,
         autoFocus: true,
         inputRef: this.getInputElement,
@@ -523,7 +545,7 @@ function (_React$PureComponent) {
         placeholder: translations.search,
         startAdornment: 'search',
         tabIndex: 0
-      }), startAdornment, _react.default.createElement(_reactCustomScrollbars.default, (0, _extends2.default)({
+      }, hiSearchInputProps)), startAdornment, _react.default.createElement(_reactCustomScrollbars.default, (0, _extends2.default)({
         ref: function ref(contentEl) {
           _this2.optionsContent = contentEl;
         },
@@ -590,6 +612,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 +633,7 @@ HiSelect.defaultProps = {
   hasAll: false,
   hiSelectableListProps: {},
   hiSelectInputProps: {},
+  hiSearchInputProps: {},
   multiple: false,
   placeholder: '',
   searchable: false,
@@ -656,7 +688,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", {

package/HiSelectableList/HiSelectableList.js

@@ -33,6 +33,8 @@ var _HiSelectableListItem = _interopRequireDefault(require("./HiSelectableListIt
 
 var _helpers = require("../utils/helpers");
 
+var _keycode = _interopRequireDefault(require("keycode"));
+
 var styles = function styles() {
   return {
     root: {
@@ -71,6 +73,31 @@ function (_React$PureComponent) {
       };
     };
 
+    _this.handleKeyDown = function (event) {
+      var nextItem;
+      var key = (0, _keycode.default)(event);
+
+      if (key === 'down') {
+        event.preventDefault();
+        nextItem = (0, _helpers.getNextItemSelectable)(document.activeElement, 'down');
+      } else if (key === 'up') {
+        event.preventDefault();
+        nextItem = (0, _helpers.getNextItemSelectable)(document.activeElement, 'up');
+      } else if (key === 'space' || key === 'enter' && !_this.props.multiple) {
+        event.preventDefault();
+
+        var item = _this.props.options.find(function (elem) {
+          return String(elem.id) === event.target.id;
+        });
+
+        _this.handleSelect(null, item);
+      }
+
+      if (nextItem) {
+        nextItem.focus();
+      }
+    };
+
     _this.buildRecursiveListItem = function (item) {
       var level = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
       var _this$props = _this.props,
@@ -82,7 +109,9 @@ function (_React$PureComponent) {
           icon = _this$props.icon,
           selectedItemIdList = _this$props.selectedItemIdList,
           sort = _this$props.sort,
-          others = (0, _objectWithoutProperties2.default)(_this$props, ["checkedIcon", "disabled", "disabledItemIdList", "hideCheckbox", "hoverIcon", "icon", "selectedItemIdList", "sort"]);
+          _this$props$onKeyDown = _this$props.onKeyDown,
+          onKeyDown = _this$props$onKeyDown === void 0 ? _this.handleKeyDown : _this$props$onKeyDown,
+          others = (0, _objectWithoutProperties2.default)(_this$props, ["checkedIcon", "disabled", "disabledItemIdList", "hideCheckbox", "hoverIcon", "icon", "selectedItemIdList", "sort", "onKeyDown"]);
 
       if (sort && item.children) {
         item.children.sort(_this.compareItem);
@@ -98,6 +127,7 @@ function (_React$PureComponent) {
         icon: icon,
         level: level,
         onSelect: _this.handleSelect(item),
+        onKeyDown: onKeyDown,
         selected: selectedItemIdList.includes(item.id) // item props override upper props (disabled, hideCheckbox, icon, level...)
 
       }, item)), item.children && item.children.length > 0 && item.children.filter(function (subItem) {
@@ -136,7 +166,6 @@ function (_React$PureComponent) {
       var _this$props2 = this.props,
           classes = _this$props2.classes,
           itemList = _this$props2.itemList,
-          onKeyDown = _this$props2.onKeyDown,
           sort = _this$props2.sort;
 
       if (sort) {
@@ -144,8 +173,7 @@ function (_React$PureComponent) {
       }
 
       return _react.default.createElement(_List.default, {
-        className: classes.root,
-        onKeyDown: onKeyDown
+        className: classes.root
       }, itemList.filter(function (item) {
         return !(item.displayed === false);
       }) // don't remove if undefined