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

package/es/HiButton/HiButton.js

@@ -8,7 +8,15 @@ import { withStyles } from '../styles';
 import { fade } from '../styles/colorManipulator';
 import Button from '@material-ui/core/Button';
 export const styles = theme => ({
-  root: {},
+  root: {
+    '&$disabled': {
+      color: theme.palette.neutral.contrastText,
+      backgroundColor: theme.palette.neutral.main
+    }
+  },
+  flatNeutral: {
+    color: theme.palette.neutral.main
+  },
   flatPositive: {
     color: theme.palette.positive.main,
     '&:hover': {
@@ -39,16 +47,6 @@ export const styles = theme => ({
       }
     }
   },
-  flatNeutral: {
-    color: theme.palette.neutral.main,
-    '&:hover': {
-      backgroundColor: fade(theme.palette.neutral.main, theme.palette.action.hoverOpacity),
-      // Reset on touch devices, it doesn't add specificity
-      '@media (hover: none)': {
-        backgroundColor: 'transparent'
-      }
-    }
-  },
 
   /* Styles applied to the root element if `variant="[contained | fab]"` and `color="positive"`. */
   containedPositive: {
@@ -132,7 +130,8 @@ export const styles = theme => ({
     '&:hover': {
       border: `1px solid ${theme.palette.neutral.main}`
     }
-  }
+  },
+  disabled: {}
 });
 
 function HiButton(props) {
@@ -141,9 +140,10 @@ function HiButton(props) {
     classes,
     className,
     color,
-    variant
+    variant,
+    disabled
   } = props,
-        other = _objectWithoutProperties(props, ["children", "classes", "className", "color", "variant"]);
+        other = _objectWithoutProperties(props, ["children", "classes", "className", "color", "variant", "disabled"]);
 
   const hcolor = ['positive', 'negative', 'middle', 'neutral'].includes(color) ? 'inherit' : color;
   const fab = variant === 'fab' || variant === 'extendedFab';
@@ -152,15 +152,16 @@ function HiButton(props) {
     [classes.flatPositive]: (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'positive',
     [classes.flatNegative]: (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'negative',
     [classes.flatMiddle]: (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'middle',
-    [classes.flatNeutral]: (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'neutral',
+    [classes.flatNeutral]: (variant === 'text' || variant === 'flat' || variant === 'outlined') && (color === 'default' || color === 'neutral'),
     [classes.containedPositive]: (contained || fab) && color === 'positive',
     [classes.containedNegative]: (contained || fab) && color === 'negative',
     [classes.containedMiddle]: (contained || fab) && color === 'middle',
-    [classes.containedNeutral]: (contained || fab) && color === 'neutral',
+    [classes.containedNeutral]: (contained || fab) && (color === 'default' || color === 'neutral'),
     [classes.outlinedPositive]: variant === 'outlined' && color === 'positive',
     [classes.outlinedNegative]: variant === 'outlined' && color === 'negative',
     [classes.outlinedMiddle]: variant === 'outlined' && color === 'middle',
-    [classes.outlinedNeutral]: variant === 'outlined' && color === 'neutral'
+    [classes.outlinedNeutral]: variant === 'outlined' && (color === 'default' || color === 'neutral'),
+    [classes.disabled]: disabled
   });
   return React.createElement(Button, _extends({
     className: className,
@@ -168,7 +169,8 @@ function HiButton(props) {
       root: buttonClassNames
     },
     color: hcolor,
-    variant: variant
+    variant: variant,
+    disabled: disabled
   }, other), children);
 }
 
@@ -194,7 +196,7 @@ HiButton.propTypes = process.env.NODE_ENV !== "production" ? {
   variant: PropTypes.oneOf(['text', 'flat', 'outlined', 'contained', 'raised', 'fab', 'extendedFab'])
 } : {};
 HiButton.defaultProps = {
-  color: 'default',
+  color: 'neutral',
   variant: 'text'
 };
 export default withStyles(styles, {

package/es/HiForm/HiInput.js

@@ -141,6 +141,14 @@ class HiInput extends React.PureComponent {
     this.handleOverlayRef = this.handleOverlayRef.bind(this);
   }
 
+  static getDerivedStateFromProps(nextProps, prevState) {
+    if (typeof nextProps.focused !== 'undefined' && nextProps.focused !== prevState.focused) {
+      return {
+        focused: nextProps.focused
+      };
+    }
+  }
+
   getInputElement(el) {
     this.inputElement = el;
 
@@ -403,6 +411,12 @@ HiInput.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   error: PropTypes.bool,
 
+  /**
+   * Force le focus de l'input et surcharge le comportement par défaut
+   * où le focus est géré dans le state.
+   */
+  focused: PropTypes.bool,
+
   /**
    * Utile pour surcharger les classes de l'input
    */

package/es/HiSelect/HiSelect.js

@@ -488,6 +488,13 @@ class HiSelect extends React.PureComponent {
     }
   }
 
+  handleReset(event) {
+    if (this.props.onReset) {
+      event.stopPropagation();
+      this.props.onReset(event);
+    }
+  }
+
   render() {
     const _this$props = this.props,
           {
@@ -683,14 +690,14 @@ class HiSelect extends React.PureComponent {
       onMouseLeave: this.props.onMouseLeave,
       refElement: el => {
         this.selectInputElement = el;
-      }
+      },
+      onReset: this.props.onReset
     }), open && staticPosition ? React.createElement("div", {
       style: popperStyle
     }, content) : React.createElement(Popper, {
       anchorEl: this.inputEl,
       placement: "bottom-start",
       open: open,
-      eventsEnabled: open,
       className: popperClass,
       style: popperStyle,
       disablePortal: true
@@ -861,6 +868,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 lorsqu'on écrit dans la barre de recherche
    * A utiliser pour les selects avec des données dynamiques

package/es/HiSelect/SelectInput.js

@@ -126,7 +126,14 @@ class SelectInput 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() {
@@ -135,12 +142,14 @@ class SelectInput extends React.PureComponent {
       noButton,
       disabled,
       onClick,
+      onReset,
       value,
       open,
       focused,
       error,
       id,
-      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, {
@@ -177,7 +186,7 @@ class SelectInput extends React.PureComponent {
       classes: {
         root: rootClass
       },
-      onClick: onClick,
+      onClick: this.handleClick,
       disabled: disabled,
       onMouseEnter: this.props.onMouseEnter,
       onMouseLeave: this.props.onMouseLeave,
@@ -189,7 +198,16 @@ class SelectInput extends React.PureComponent {
       }
     }, React.createElement("span", {
       className: classes.label
-    }, value), React.createElement(HiIcon, {
+    }, value), 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(HiIcon, {
       className: iconClass,
       icon: "arrow_drop_down"
     }));
@@ -262,6 +280,11 @@ SelectInput.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"
    */
@@ -284,5 +307,6 @@ SelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
 } : {};
 export default withStyles(styles, {
   hiComponent: true,
-  name: 'HmuiSelectInput'
+  name: 'HmuiSelectInput',
+  withTheme: true
 })(SelectInput);

package/es/HiSelectNew/HiNestedSelectField.js

@@ -0,0 +1,111 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+// @inheritedComponent HiDynamicSelect
+import React from 'react';
+import PropTypes from 'prop-types';
+import HiFormControl from '../HiForm/HiFormControl';
+import HiNestedSelect from './HiNestedSelect';
+/**
+ * Champs input pour formulaire
+ */
+
+class HiNestedSelectField extends React.PureComponent {
+  render() {
+    const _this$props = this.props,
+          {
+      label,
+      required,
+      disabled,
+      error,
+      errorText,
+      helperText,
+      helperIcon,
+      id,
+      name,
+      value,
+      options,
+      type,
+      multiple,
+      iconAll,
+      checkbox,
+      searchable,
+      translations,
+      className
+    } = _this$props,
+          others = _objectWithoutProperties(_this$props, ["label", "required", "disabled", "error", "errorText", "helperText", "helperIcon", "id", "name", "value", "options", "type", "multiple", "iconAll", "checkbox", "searchable", "translations", "className"]);
+
+    return React.createElement(HiFormControl, {
+      id: id,
+      label: label,
+      required: required,
+      disabled: disabled,
+      error: error,
+      errorText: errorText,
+      helperText: helperText,
+      helperIcon: helperIcon,
+      className: className
+    }, React.createElement(HiNestedSelect, _extends({
+      id: id,
+      name: name,
+      value: value,
+      options: options,
+      type: type,
+      multiple: multiple,
+      iconAll: iconAll,
+      checkbox: checkbox,
+      searchable: searchable,
+      translations: translations,
+      disabled: disabled,
+      error: error
+    }, others)));
+  }
+
+}
+
+HiNestedSelectField.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Surcharge des styles
+   */
+  className: PropTypes.string,
+
+  /**
+   * Si `true`, l'input sera inactif.
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Si `true`, le champs sera en erreur.
+   */
+  error: PropTypes.bool,
+
+  /**
+   * Texte de l'erreur
+   */
+  errorText: PropTypes.string,
+
+  /**
+   * Si "true", le texte d'aide s'affichera seulement au clic sur l'icône "Information"
+   */
+  helperIcon: PropTypes.bool,
+
+  /**
+   * Texte de l'aide
+   */
+  helperText: PropTypes.string,
+
+  /**
+   * id de l'élément input
+   */
+  id: PropTypes.string.isRequired,
+
+  /**
+   * Label du champs
+   */
+  label: PropTypes.string,
+
+  /**
+   * true si champs obligatoire
+   */
+  required: PropTypes.bool
+} : {};
+export default HiNestedSelectField;

package/es/HiSelectNew/HiSelect.js

@@ -20,11 +20,11 @@ export const styles = theme => ({
     backgroundColor: theme.palette.background2,
     maxWidth: 500,
     width: '100%',
-    position: 'relative'
+    position: 'relative',
+    zIndex: 1
   },
   popper: {
-    width: '100%',
-    zIndex: 1200
+    width: '100%'
   },
   paper: {
     borderRadius: '0px 2px',
@@ -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,53 @@ class HiSelectInput extends React.PureComponent {
       }
     };
 
+    this.handleKeyDownReset = event => {
+      const key = keycode(event);
+
+      if (key === 'enter' || key === 'space') {
+        this.handleReset(event);
+        event.stopPropagation();
+        event.preventDefault();
+      }
+    };
+
+    this.handleClick = event => {
+      if ((!this.resetIcon || !this.resetIcon.contains(event.target)) && this.props.onClick) {
+        this.props.onClick(event);
+      }
+    };
+
+    this.handleReset = event => {
+      this.props.onReset(event);
+
+      if (this.input) {
+        this.input.focus();
+      }
+    };
+
+    this.handleBlur = 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();
+        }
+      }
+    };
+
+    this.handleRef = el => {
+      this.input = el;
+
+      if (this.props.refElement) {
+        this.props.refElement(el);
+      }
+    };
+
     this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handleClick = this.handleClick.bind(this);
+    this.handleBlur = this.handleBlur.bind(this);
+    this.handleRef = this.handleRef.bind(this);
+    this.handleReset = this.handleReset.bind(this);
   }
 
   render() {
@@ -143,13 +190,13 @@ class HiSelectInput extends React.PureComponent {
       noButton,
       disabled,
       onClick,
+      onReset,
       value,
       open,
       focused,
       error,
       id,
-      placeholder,
-      refElement
+      placeholder
     } = this.props; // On utilise classNames pour variabiliser les styles et merge les classes appliquées
 
     const rootClass = classNames(classes.root, classes.inkbar, classes.underline, {
@@ -172,9 +219,7 @@ class HiSelectInput extends React.PureComponent {
       onBlur: this.props.onBlur,
       role: "button",
       tabIndex: "0",
-      ref: el => {
-        if (refElement) refElement(el);
-      }
+      ref: this.handleRef
     }, React.createElement("span", {
       className: classNames(classes.label, {
         [classes.placeholder]: value === undefined
@@ -184,21 +229,30 @@ 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,
       onKeyDown: this.handleKeyDown,
       onFocus: this.props.onFocus,
-      onBlur: this.props.onBlur,
-      buttonRef: el => {
-        if (refElement) refElement(el);
-      }
+      onBlur: this.handleBlur,
+      buttonRef: this.handleRef
     }, React.createElement("span", {
       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: 20,
+      color: "neutral",
+      onClick: this.handleReset,
+      onKeyDown: this.handleKeyDownReset,
+      tabIndex: 0
+    })), React.createElement(Icon, {
       classes: {
         root: iconClass
       }
@@ -276,6 +330,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"
    */

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.42
  *
  * 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.42
  *
  * 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.42",
   "description": "React components that implement Google's Material Design.",
   "keywords": [
     "react",
@@ -71,4 +71,4 @@
   },
   "main": "./index.js",
   "module": "./index.es.js"
-}
+}