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

package/HiSelectNew/HiSelectInput.js

@@ -35,6 +35,8 @@ var _ButtonBase = _interopRequireDefault(require("@material-ui/core/ButtonBase")
 
 var _Icon = _interopRequireDefault(require("@material-ui/core/Icon"));
 
+var _HiIcon = _interopRequireDefault(require("../HiIcon"));
+
 var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
 
 var _keycode = _interopRequireDefault(require("keycode"));
@@ -179,27 +181,38 @@ function (_React$PureComponent) {
       }
     };
 
+    _this.handleClick = function (event) {
+      if ((!_this.resetIcon || !_this.resetIcon.contains(event.target)) && _this.props.onClick) {
+        _this.props.onClick(event);
+      }
+    };
+
     _this.handleKeyDown = _this.handleKeyDown.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleClick = _this.handleClick.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
     return _this;
   }
 
   (0, _createClass2.default)(HiSelectInput, [{
     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,
           placeholder = _this$props.placeholder,
-          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 = (0, _classnames.default)(classes.root, classes.inkbar, classes.underline, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.disabled, disabled), (0, _defineProperty2.default)(_classNames, classes.focused, focused), (0, _defineProperty2.default)(_classNames, classes.error, error && !focused), _classNames));
       var iconClass = (0, _classnames.default)(classes.icon, (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, classes.iconOpen, open), (0, _defineProperty2.default)(_classNames2, classes.iconClose, !open), _classNames2));
@@ -224,7 +237,7 @@ function (_React$PureComponent) {
       })) : _react.default.createElement(_ButtonBase.default, {
         id: id,
         className: rootClass,
-        onClick: onClick,
+        onClick: this.handleClick,
         disabled: disabled,
         onMouseEnter: this.props.onMouseEnter,
         onMouseLeave: this.props.onMouseLeave,
@@ -236,7 +249,16 @@ function (_React$PureComponent) {
         }
       }, _react.default.createElement("span", {
         className: (0, _classnames.default)(classes.label, (0, _defineProperty2.default)({}, classes.placeholder, value === undefined))
-      }, value || placeholder), _react.default.createElement(_Icon.default, {
+      }, value || placeholder), onReset && focused && _react.default.createElement("div", {
+        ref: function ref(el) {
+          _this2.resetIcon = el;
+        }
+      }, _react.default.createElement(_HiIcon.default, {
+        icon: "close",
+        size: 24,
+        color: theme.palette.neutral.main,
+        onClick: onReset
+      })), _react.default.createElement(_Icon.default, {
         classes: {
           root: iconClass
         }
@@ -315,6 +337,11 @@ HiSelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   onMouseLeave: _propTypes.default.func,
 
+  /**
+   * Fonction de callback appelée lorsqu'on vide le champs
+   */
+  onReset: _propTypes.default.func,
+
   /**
    * Fonction de callback à la pression de la touche "Entrée"
    */
@@ -343,7 +370,8 @@ HiSelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
 
 var _default = (0, _withStyles.default)(styles, {
   hiComponent: true,
-  name: 'HmuiHiSelectInput'
+  name: 'HmuiHiSelectInput',
+  withTheme: true
 })(HiSelectInput);
 
 exports.default = _default;

package/es/HiCheckbox/HiCheckbox.js

@@ -125,7 +125,7 @@ class HiCheckbox extends React.Component {
 
 HiCheckbox.defaultProps = {
   checked: false,
-  color: 'default',
+  color: 'inherit',
   size: 20,
   icon: 'check_box_outline_blank'
 };
@@ -148,7 +148,7 @@ HiCheckbox.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
    * 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é.

package/es/HiForm/HiInput.js

@@ -104,6 +104,10 @@ export const styles = theme => ({
     width: 40,
     display: 'inline-block'
   },
+  eraseButtonLabel: {
+    position: 'relative',
+    top: -2
+  },
   disabled: {
     borderBottom: 'none'
   },
@@ -288,6 +292,9 @@ class HiInput extends React.PureComponent {
 
     const eraseIcon = !multiline && onReset && focused && !disabled && value.length > 0 && React.createElement(HiIconButton, {
       className: classes.eraseButton,
+      classes: {
+        label: classes.eraseButtonLabel
+      },
       onClick: this.handleReset,
       onBlur: this.handleBlur
     }, _ref);

package/es/HiIcon/HiIcon.js

@@ -65,9 +65,9 @@ function HiIcon(props) {
 
   if (iconName.indexOf('fa-') === 0) {
     return React.createElement("i", _extends({
-      className: classNames('fa', iconName, classes.root, {
+      className: classNames('fa', iconName, className, classes.root, {
         [classes[`color${capitalize(color)}`]]: color !== 'inherit'
-      }, className),
+      }),
       style: {
         fontSize: size
       }

package/es/HiIconButton/HiIconButton.js

@@ -8,6 +8,7 @@ import { withStyles } from '../styles';
 import { fade } from '../styles/colorManipulator';
 import IconButton from '@material-ui/core/IconButton';
 export const styles = theme => ({
+  label: {},
   positive: {
     color: theme.palette.positive.main,
     '&:hover': {
@@ -69,7 +70,8 @@ function HiIconButton(props) {
   return React.createElement(IconButton, _extends({
     className: className,
     classes: {
-      root: buttonClassNames
+      root: buttonClassNames,
+      label: classes.label
     },
     color: hcolor
   }, other), children);

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

@@ -77,7 +77,7 @@ export const styles = theme => ({
     }
   },
   disabled: {
-    color: `${theme.palette.action.disabled}`,
+    color: `${theme.palette.text.disabled}`,
     '&:before': {
       display: 'none'
     }
@@ -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/HiDynamicSelectField.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 HiDynamicSelect from './HiDynamicSelect';
+/**
+ * Champs input pour formulaire
+ */
+
+class HiDynamicSelectField 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(HiDynamicSelect, _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)));
+  }
+
+}
+
+HiDynamicSelectField.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 HiDynamicSelectField;

package/es/HiSelectNew/HiNestedSelect.js

@@ -6,6 +6,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import HiSelect from './HiSelect';
 import HiIcon from '../HiIcon';
+import withStyles from "../styles/withStyles";
 /**
  * Return array of final item id in nested list (via props chlidren)
  * @param itemList
@@ -109,6 +110,24 @@ function buildFilteredItemList(itemList, selectedItemIdList = [], searchValue =
     v: visibleParent
   });
 }
+
+export const styles = theme => ({
+  root: {
+    backgroundColor: theme.palette.background2,
+    maxWidth: 500,
+    width: '100%',
+    position: 'relative'
+  },
+  popper: {
+    // width: '100%',
+    zIndex: 1200
+  },
+  paper: {
+    borderRadius: '0px 2px',
+    maxHeight: 480,
+    transition: 'none !important'
+  }
+});
 /**
  * HiNestedSelect hérite du composant HiSelect
  *
@@ -122,7 +141,6 @@ function buildFilteredItemList(itemList, selectedItemIdList = [], searchValue =
  * - si aucun enfant n'est sélectionné, le parent est affiché "unselected".
  */
 
-
 class HiNestedSelect extends React.PureComponent {
   constructor(props) {
     super(props);
@@ -235,9 +253,9 @@ class HiNestedSelect extends React.PureComponent {
           }), selectedItem.label);
         } else if (selectedItem.type === 'image') {
           inputValue = React.createElement("span", {
-            className: classes.selectIconLabel
+            className: classes.selectImgLabel
           }, React.createElement("img", {
-            className: classes.labelIcon,
+            className: classes.labelImg,
             src: selectedItem.img,
             alt: selectedItem.label
           }), selectedItem.label);
@@ -398,4 +416,7 @@ HiNestedSelect.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   value: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.array])
 } : {};
-export default HiNestedSelect;
+export default withStyles(styles, {
+  hiComponent: true,
+  name: 'HmuiHiNestedSelect'
+})(HiNestedSelect);

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

@@ -23,7 +23,7 @@ export const styles = theme => ({
     position: 'relative'
   },
   popper: {
-    // width: '100%',
+    width: '100%',
     zIndex: 1200
   },
   paper: {
@@ -34,6 +34,12 @@ export const styles = theme => ({
   labelIcon: {
     marginRight: 10
   },
+  labelImg: {
+    height: 18,
+    width: 'auto',
+    margin: '0 4px',
+    verticalAlign: 'middle'
+  },
   selectIconLabel: _objectSpread({
     whiteSpace: 'nowrap',
     overflow: 'hidden',
@@ -42,6 +48,15 @@ export const styles = theme => ({
   }, theme.typography.b1, {
     display: 'inline-flex',
     width: '100%'
+  }),
+  selectImgLabel: _objectSpread({
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    paddingRight: 16
+  }, theme.typography.b1, {
+    display: 'inline-flex',
+    width: '100%'
   })
 });
 /**
@@ -297,7 +312,7 @@ class HiSelect extends React.PureComponent {
           inputValue = React.createElement("span", {
             className: classes.selectIconLabel
           }, React.createElement("img", {
-            className: classes.labelIcon,
+            className: classes.labelImg,
             src: item.img,
             alt: item.label
           }), item.label);
@@ -324,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) {
@@ -336,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,
@@ -395,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,
@@ -441,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 => {
@@ -452,7 +475,6 @@ class HiSelect extends React.PureComponent {
       anchorEl: this.inputEl,
       placement: "bottom-start",
       open: open,
-      eventsEnabled: open,
       className: classes.popper,
       disablePortal: true
     }, content));
@@ -571,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
    */