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

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.39
+/** @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.39
+/** @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.39",
+  "version": "2.0.0-beta.41",
   "description": "React components that implement Google's Material Design.",
   "keywords": [
     "react",

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

@@ -1,4 +1,4 @@
-/** @license HiPay-Material-UI v2.0.0-beta.39
+/** @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.
@@ -13667,6 +13667,7 @@
 
             var styles$1 = function styles(theme) {
               return {
+                label: {},
                 positive: {
                   color: theme.palette.positive.main,
                   '&:hover': {
@@ -13724,7 +13725,8 @@
               return React__default.createElement(IconButton$2, _extends_1({
                 className: className,
                 classes: {
-                  root: buttonClassNames
+                  root: buttonClassNames,
+                  label: classes.label
                 },
                 color: hcolor
               }, other), children);
@@ -65902,7 +65904,7 @@
 
               if (iconName.indexOf('fa-') === 0) {
                 return React__default.createElement("i", _extends_1({
-                  className: classnames('fa', iconName, classes.root, defineProperty({}, classes["color".concat(capitalize(color))], color !== 'inherit'), className),
+                  className: classnames('fa', iconName, className, classes.root, defineProperty({}, classes["color".concat(capitalize(color))], color !== 'inherit')),
                   style: {
                     fontSize: size
                   }
@@ -66113,7 +66115,7 @@
 
             HiCheckbox.defaultProps = {
               checked: false,
-              color: 'default',
+              color: 'inherit',
               size: 20,
               icon: 'check_box_outline_blank'
             };
@@ -66136,7 +66138,7 @@
               /**
                * The color of the component. It supports those theme colors that make sense for this component.
                */
-              color: propTypes.oneOf(['default', 'primary', 'secondary', 'positive', 'negative', 'middle', 'neutral']),
+              color: propTypes.oneOf(['inherit', 'primary', 'secondary', 'positive', 'negative', 'middle', 'neutral']),
 
               /**
                * icon à afficher quand le composant est non coché.
@@ -68617,6 +68619,10 @@
                   width: 40,
                   display: 'inline-block'
                 },
+                eraseButtonLabel: {
+                  position: 'relative',
+                  top: -2
+                },
                 disabled: {
                   borderBottom: 'none'
                 },
@@ -68816,6 +68822,9 @@
 
                   var eraseIcon = !multiline && onReset && focused && !disabled && value.length > 0 && React__default.createElement(HiIconButton$1, {
                     className: classes.eraseButton,
+                    classes: {
+                      label: classes.eraseButtonLabel
+                    },
                     onClick: this.handleReset,
                     onBlur: this.handleBlur
                   }, _ref$3);
@@ -96423,7 +96432,7 @@
                   }
                 },
                 disabled: {
-                  color: "".concat(theme.palette.action.disabled),
+                  color: "".concat(theme.palette.text.disabled),
                   '&:before': {
                     display: 'none'
                   }
@@ -96483,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));
@@ -96531,7 +96551,7 @@
                     classes: {
                       root: rootClass
                     },
-                    onClick: onClick,
+                    onClick: this.handleClick,
                     disabled: disabled,
                     onMouseEnter: this.props.onMouseEnter,
                     onMouseLeave: this.props.onMouseLeave,
@@ -96543,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"
                   }));
@@ -96618,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"
                */
@@ -96640,7 +96674,8 @@
             };
             var SelectInput$1 = withStyles(styles$p, {
               hiComponent: true,
-              name: 'HmuiSelectInput'
+              name: 'HmuiSelectInput',
+              withTheme: true
             })(SelectInput);
 
             var styles$q = function styles(theme) {
@@ -97134,6 +97169,14 @@
                     });
                   }
                 }
+              }, {
+                key: "handleReset",
+                value: function handleReset(event) {
+                  if (this.props.onReset) {
+                    event.stopPropagation();
+                    this.props.onReset(event);
+                  }
+                }
               }, {
                 key: "render",
                 value: function render() {
@@ -97330,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
@@ -97510,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