@hipay/hipay-material-ui 2.0.0-beta.40 → 2.0.0-beta.41

package/es/HiSelectNew/HiSelect.js

@@ -339,6 +339,7 @@ class HiSelect extends React.PureComponent {
     this.handleSearchReset = this.handleSearchReset.bind(this);
     this.handleSelect = this.handleSelect.bind(this);
     this.handleSuggestions = this.handleSuggestions.bind(this);
+    this.getInputElement = this.getInputElement.bind(this);
   }
 
   static getDerivedStateFromProps(nextProps, prevState) {
@@ -351,6 +352,14 @@ class HiSelect extends React.PureComponent {
     return null;
   }
 
+  getInputElement(el) {
+    this.searchField = el;
+
+    if (this.props.inputRef) {
+      this.props.inputRef(this.searchField);
+    }
+  }
+
   render() {
     const {
       classes,
@@ -410,9 +419,7 @@ class HiSelect extends React.PureComponent {
     }, !!searchable && React.createElement(HiInput, {
       value: searchValue,
       autoFocus: true,
-      inputRef: el => {
-        this.searchField = el;
-      },
+      inputRef: this.getInputElement,
       onKeyDown: this.handleKeyDownSearch,
       onChange: this.handleSearch,
       onReset: this.handleSearchReset,
@@ -456,6 +463,7 @@ class HiSelect extends React.PureComponent {
       onSubmit: onSubmit,
       onMouseEnter: this.props.onMouseEnter,
       onMouseLeave: this.props.onMouseLeave,
+      onReset: this.props.onReset,
       placeholder: placeholder
     }, hiSelectInputProps, {
       refElement: el => {
@@ -467,7 +475,6 @@ class HiSelect extends React.PureComponent {
       anchorEl: this.inputEl,
       placement: "bottom-start",
       open: open,
-      eventsEnabled: open,
       className: classes.popper,
       disablePortal: true
     }, content));
@@ -586,6 +593,11 @@ HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   onMouseLeave: PropTypes.func,
 
+  /**
+   * Fonction de callback appelée lorsqu'on vide le champs
+   */
+  onReset: PropTypes.func,
+
   /**
    * Fonction de callback appelée lorsque le scroll atteint le bas de la liste
    */

package/es/HiSelectNew/HiSelectInput.js

@@ -5,6 +5,7 @@ import classNames from 'classnames';
 import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
 import ButtonBase from '@material-ui/core/ButtonBase';
 import Icon from '@material-ui/core/Icon';
+import HiIcon from '../HiIcon';
 import withStyles from '../styles/withStyles';
 import keycode from 'keycode';
 export const styles = theme => ({
@@ -134,7 +135,14 @@ class HiSelectInput extends React.PureComponent {
       }
     };
 
+    this.handleClick = event => {
+      if ((!this.resetIcon || !this.resetIcon.contains(event.target)) && this.props.onClick) {
+        this.props.onClick(event);
+      }
+    };
+
     this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handleClick = this.handleClick.bind(this);
   }
 
   render() {
@@ -143,13 +151,15 @@ class HiSelectInput extends React.PureComponent {
       noButton,
       disabled,
       onClick,
+      onReset,
       value,
       open,
       focused,
       error,
       id,
       placeholder,
-      refElement
+      refElement,
+      theme
     } = this.props; // On utilise classNames pour variabiliser les styles et merge les classes appliquées
 
     const rootClass = classNames(classes.root, classes.inkbar, classes.underline, {
@@ -184,7 +194,7 @@ class HiSelectInput extends React.PureComponent {
     })) : React.createElement(ButtonBase, {
       id: id,
       className: rootClass,
-      onClick: onClick,
+      onClick: this.handleClick,
       disabled: disabled,
       onMouseEnter: this.props.onMouseEnter,
       onMouseLeave: this.props.onMouseLeave,
@@ -198,7 +208,16 @@ class HiSelectInput extends React.PureComponent {
       className: classNames(classes.label, {
         [classes.placeholder]: value === undefined
       })
-    }, value || placeholder), React.createElement(Icon, {
+    }, value || placeholder), onReset && focused && React.createElement("div", {
+      ref: el => {
+        this.resetIcon = el;
+      }
+    }, React.createElement(HiIcon, {
+      icon: "close",
+      size: 24,
+      color: theme.palette.neutral.main,
+      onClick: onReset
+    })), React.createElement(Icon, {
       classes: {
         root: iconClass
       }
@@ -276,6 +295,11 @@ HiSelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   onMouseLeave: PropTypes.func,
 
+  /**
+   * Fonction de callback appelée lorsqu'on vide le champs
+   */
+  onReset: PropTypes.func,
+
   /**
    * Fonction de callback à la pression de la touche "Entrée"
    */
@@ -303,5 +327,6 @@ HiSelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
 } : {};
 export default withStyles(styles, {
   hiComponent: true,
-  name: 'HmuiHiSelectInput'
+  name: 'HmuiHiSelectInput',
+  withTheme: true
 })(HiSelectInput);

package/index.es.js

@@ -1,4 +1,4 @@
-/** @license HiPay-Material-UI v2.0.0-beta.4
+/** @license HiPay-Material-UI v2.0.0-beta.41
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/index.js

@@ -1,4 +1,4 @@
-/** @license HiPay-Material-UI v2.0.0-beta.4
+/** @license HiPay-Material-UI v2.0.0-beta.41
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/package.json

@@ -2,7 +2,7 @@
   "name": "@hipay/hipay-material-ui",
   "private": false,
   "author": "HiPay PSYCHE Team",
-  "version": "2.0.0-beta.40",
+  "version": "2.0.0-beta.41",
   "description": "React components that implement Google's Material Design.",
   "keywords": [
     "react",
@@ -71,4 +71,4 @@
   },
   "main": "./index.js",
   "module": "./index.es.js"
-}
+}

package/umd/hipay-material-ui.development.js

@@ -1,4 +1,4 @@
-/** @license HiPay-Material-UI v2.0.0-beta.4
+/** @license HiPay-Material-UI v2.0.0-beta.41
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -96492,26 +96492,37 @@
                   }
                 };
 
+                _this.handleClick = function (event) {
+                  if ((!_this.resetIcon || !_this.resetIcon.contains(event.target)) && _this.props.onClick) {
+                    _this.props.onClick(event);
+                  }
+                };
+
                 _this.handleKeyDown = _this.handleKeyDown.bind(assertThisInitialized(assertThisInitialized(_this)));
+                _this.handleClick = _this.handleClick.bind(assertThisInitialized(assertThisInitialized(_this)));
                 return _this;
               }
 
               createClass(SelectInput, [{
                 key: "render",
                 value: function render() {
-                  var _classNames, _classNames2;
+                  var _classNames,
+                      _classNames2,
+                      _this2 = this;
 
                   var _this$props = this.props,
                       classes = _this$props.classes,
                       noButton = _this$props.noButton,
                       disabled = _this$props.disabled,
                       onClick = _this$props.onClick,
+                      onReset = _this$props.onReset,
                       value = _this$props.value,
                       open = _this$props.open,
                       focused = _this$props.focused,
                       error = _this$props.error,
                       id = _this$props.id,
-                      refElement = _this$props.refElement; // On utilise classNames pour variabiliser les styles et merge les classes appliquées
+                      refElement = _this$props.refElement,
+                      theme = _this$props.theme; // On utilise classNames pour variabiliser les styles et merge les classes appliquées
 
                   var rootClass = classnames(classes.root, classes.inkbar, classes.underline, (_classNames = {}, defineProperty(_classNames, classes.disabled, disabled), defineProperty(_classNames, classes.focused, focused), defineProperty(_classNames, classes.error, error && !focused), _classNames));
                   var iconClass = classnames(classes.icon, (_classNames2 = {}, defineProperty(_classNames2, classes.iconOpen, open), defineProperty(_classNames2, classes.iconClose, !open), _classNames2));
@@ -96540,7 +96551,7 @@
                     classes: {
                       root: rootClass
                     },
-                    onClick: onClick,
+                    onClick: this.handleClick,
                     disabled: disabled,
                     onMouseEnter: this.props.onMouseEnter,
                     onMouseLeave: this.props.onMouseLeave,
@@ -96552,7 +96563,16 @@
                     }
                   }, React__default.createElement("span", {
                     className: classes.label
-                  }, value), React__default.createElement(HiIcon$1, {
+                  }, value), onReset && focused && React__default.createElement("div", {
+                    ref: function ref(el) {
+                      _this2.resetIcon = el;
+                    }
+                  }, React__default.createElement(HiIcon$1, {
+                    icon: "close",
+                    size: 24,
+                    color: theme.palette.neutral.main,
+                    onClick: onReset
+                  })), React__default.createElement(HiIcon$1, {
                     className: iconClass,
                     icon: "arrow_drop_down"
                   }));
@@ -96627,6 +96647,11 @@
                */
               onMouseLeave: propTypes.func,
 
+              /**
+               * Fonction de callback appelée lorsqu'on vide le champs
+               */
+              onReset: propTypes.func,
+
               /**
                * Fonction de callback à la pression de la touche "Entrée"
                */
@@ -96649,7 +96674,8 @@
             };
             var SelectInput$1 = withStyles(styles$p, {
               hiComponent: true,
-              name: 'HmuiSelectInput'
+              name: 'HmuiSelectInput',
+              withTheme: true
             })(SelectInput);
 
             var styles$q = function styles(theme) {
@@ -97143,6 +97169,14 @@
                     });
                   }
                 }
+              }, {
+                key: "handleReset",
+                value: function handleReset(event) {
+                  if (this.props.onReset) {
+                    event.stopPropagation();
+                    this.props.onReset(event);
+                  }
+                }
               }, {
                 key: "render",
                 value: function render() {
@@ -97339,14 +97373,14 @@
                     onMouseLeave: this.props.onMouseLeave,
                     refElement: function refElement(el) {
                       _this2.selectInputElement = el;
-                    }
+                    },
+                    onReset: this.props.onReset
                   }), open && staticPosition ? React__default.createElement("div", {
                     style: popperStyle
                   }, content) : React__default.createElement(Popper$3, {
                     anchorEl: this.inputEl,
                     placement: "bottom-start",
                     open: open,
-                    eventsEnabled: open,
                     className: popperClass,
                     style: popperStyle,
                     disablePortal: true
@@ -97519,6 +97553,11 @@
                */
               onMouseLeave: propTypes.func,
 
+              /**
+               * Fonction de callback appelée lorsqu'on vide le champs
+               */
+              onReset: propTypes.func,
+
               /**
                * Fonction de callback appelée lorsqu'on écrit dans la barre de recherche
                * A utiliser pour les selects avec des données dynamiques