@hipay/hipay-material-ui 1.0.0-beta.29 → 1.0.0-beta.3

package/HiSelect/HiSelectField.js

@@ -84,8 +84,7 @@ var HiSelectField = function (_React$PureComponent) {
           checkbox = _props.checkbox,
           searchable = _props.searchable,
           translations = _props.translations,
-          className = _props.className,
-          others = (0, _objectWithoutProperties3.default)(_props, ['label', 'required', 'disabled', 'error', 'errorText', 'helperText', 'helperIcon', 'id', 'name', 'value', 'options', 'type', 'multiple', 'iconAll', 'checkbox', 'searchable', 'translations', 'className']);
+          others = (0, _objectWithoutProperties3.default)(_props, ['label', 'required', 'disabled', 'error', 'errorText', 'helperText', 'helperIcon', 'id', 'name', 'value', 'options', 'type', 'multiple', 'iconAll', 'checkbox', 'searchable', 'translations']);
 
 
       return _react2.default.createElement(
@@ -98,8 +97,7 @@ var HiSelectField = function (_React$PureComponent) {
           error: error,
           errorText: errorText,
           helperText: helperText,
-          helperIcon: helperIcon,
-          className: className
+          helperIcon: helperIcon
         },
         _react2.default.createElement(_HiSelect2.default, (0, _extends3.default)({
           id: id,
@@ -112,6 +110,10 @@ var HiSelectField = function (_React$PureComponent) {
           checkbox: checkbox,
           searchable: searchable,
           translations: translations,
+          onClick: this.handleClick,
+          onMouseEnter: this.handleMouseEnter,
+          onMouseLeave: this.handleMouseLeave,
+          onClose: this.handleClose,
           disabled: disabled,
           error: error
         }, others))
@@ -122,10 +124,6 @@ var HiSelectField = function (_React$PureComponent) {
 }(_react2.default.PureComponent);
 
 HiSelectField.propTypes = process.env.NODE_ENV !== "production" ? {
-  /**
-   * Surcharge des styles
-   */
-  className: _propTypes2.default.string,
   /**
    * Si `true`, l'input sera inactif.
    */

package/HiSelect/HiSuggestSelect.js

@@ -5,6 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.styles = undefined;
 
+var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
+
+var _defineProperty3 = _interopRequireDefault(_defineProperty2);
+
 var _extends2 = require('babel-runtime/helpers/extends');
 
 var _extends3 = _interopRequireDefault(_extends2);
@@ -41,6 +45,10 @@ var _propTypes = require('prop-types');
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
 var _reactDom = require('react-dom');
 
 var _Grow = require('material-ui/transitions/Grow');
@@ -51,6 +59,10 @@ var _Paper = require('material-ui/Paper');
 
 var _Paper2 = _interopRequireDefault(_Paper);
 
+var _ClickAwayListener = require('material-ui/utils/ClickAwayListener');
+
+var _ClickAwayListener2 = _interopRequireDefault(_ClickAwayListener);
+
 var _reactPopper = require('react-popper');
 
 var _HiSelectableList = require('../HiSelectableList');
@@ -74,7 +86,7 @@ var styles = exports.styles = function styles(theme) {
         root: {
             backgroundColor: theme.palette.background2,
             maxWidth: 500,
-            minWidth: 200,
+            minWidth: 250,
             width: '100%'
         },
         popper: {
@@ -83,6 +95,9 @@ var styles = exports.styles = function styles(theme) {
             zIndex: 9,
             top: '100%'
         },
+        popperClose: {
+            pointerEvents: 'none'
+        },
         paper: {
             borderRadius: '0px 2px',
             maxHeight: 440,
@@ -106,7 +121,6 @@ var HiSuggestSelect = function (_React$PureComponent) {
             if (textInput) {
                 setTimeout(function () {
                     textInput.focus();
-                    textInput.scrollLeft = textInput.scrollWidth;
                 }, 1);
             }
         };
@@ -139,8 +153,6 @@ var HiSuggestSelect = function (_React$PureComponent) {
                         items[0].focus();
                     }
                 }, 1);
-            } else if (event.key === 'Escape') {
-                _this.setState({ options: [] });
             }
         };
 
@@ -150,9 +162,8 @@ var HiSuggestSelect = function (_React$PureComponent) {
         };
 
         _this.handleSelect = _this.handleSelect.bind(_this);
+        _this.handleClose = _this.handleClose.bind(_this);
         _this.handleBlur = _this.handleBlur.bind(_this);
-        _this.handleFocus = _this.handleFocus.bind(_this);
-        _this.getInputElement = _this.getInputElement.bind(_this);
         return _this;
     }
 
@@ -162,12 +173,13 @@ var HiSuggestSelect = function (_React$PureComponent) {
             this.setState({ options: nextProps.options });
         }
     }, {
-        key: 'getInputElement',
-        value: function getInputElement(el) {
-            this.textInput = el;
-            if (this.props.inputRef) {
-                this.props.inputRef(this.textInput);
-            }
+        key: 'handleClose',
+        value: function handleClose() {
+            document.body.style.overflow = 'auto';
+            this.setState({
+                focused: false, // TODO - Make difference between open and focus
+                options: []
+            });
         }
 
         // Key down on list items
@@ -175,18 +187,14 @@ var HiSuggestSelect = function (_React$PureComponent) {
 
         // Key down on search input
 
-    }, {
-        key: 'handleFocus',
-        value: function handleFocus() {
-            this.setState({ focused: true });
-        }
     }, {
         key: 'handleBlur',
         value: function handleBlur(event) {
             // Si on click sur un élément de HiInput, on garde le focus
             // Par exemple sur l'icone reset
+            var overlay = this.overlay;
             if (!event.relatedTarget || !this.overlay || !this.overlay.contains(event.relatedTarget)) {
-                this.setState({ options: [], focused: false });
+                this.setState({ options: [] });
             }
         }
     }, {
@@ -196,45 +204,15 @@ var HiSuggestSelect = function (_React$PureComponent) {
 
             var _props = this.props,
                 classes = _props.classes,
+                translations = _props.translations,
                 id = _props.id,
-                loading = _props.loading,
-                showMinLength = _props.showMinLength,
-                showNoResults = _props.showNoResults,
                 onSearch = _props.onSearch,
-                translations = _props.translations,
-                otherProps = (0, _objectWithoutProperties3.default)(_props, ['classes', 'id', 'loading', 'showMinLength', 'showNoResults', 'onSearch', 'translations']);
+                otherProps = (0, _objectWithoutProperties3.default)(_props, ['classes', 'translations', 'id', 'onSearch']);
             var _state = this.state,
                 focused = _state.focused,
                 options = _state.options;
 
-
-            var optionsShown = options;
-
-            // If loading
-            if (loading) {
-                optionsShown = [{
-                    id: '_loading',
-                    type: 'loader',
-                    disabled: true,
-                    centered: true,
-                    checkbox: false,
-                    label: 'loading'
-                }];
-            }
-            // If no results match
-            else if (options.length === 0 && (showNoResults || showMinLength)) {
-                    optionsShown = [{
-                        id: '_no_result',
-                        type: 'text',
-                        disabled: true,
-                        centered: true,
-                        checkbox: false,
-                        label: showNoResults ? translations.no_result_match : translations.min_length
-                    }];
-                }
-
-            var open = !!optionsShown.length && focused;
-
+            var open = !!options.length;
             return _react2.default.createElement(
                 'div',
                 {
@@ -250,14 +228,14 @@ var HiSuggestSelect = function (_React$PureComponent) {
                         _reactPopper.Target,
                         null,
                         _react2.default.createElement(_HiInput2.default, (0, _extends3.default)({}, otherProps, {
-
                             inputId: id,
                             focused: focused,
-                            inputRef: this.getInputElement,
+                            inputRef: function inputRef(input) {
+                                _this2.textInput = input;
+                            },
                             onChange: onSearch,
                             onKeyDown: this.handleKeyDownSearch,
-                            onBlur: this.handleBlur,
-                            onFocus: this.handleFocus
+                            onBlur: this.handleBlur
                         }))
                     ),
                     open && _react2.default.createElement(
@@ -265,22 +243,26 @@ var HiSuggestSelect = function (_React$PureComponent) {
                         {
                             placement: 'bottom-start',
                             eventsEnabled: open,
-                            className: classes.popper
+                            className: (0, _classnames2.default)(classes.popper, (0, _defineProperty3.default)({}, classes.popperClose, !open))
                         },
                         _react2.default.createElement(
-                            _Grow2.default,
-                            { 'in': open, id: 'menu-list', style: { transformOrigin: '0 0 0' } },
+                            _ClickAwayListener2.default,
+                            { onClickAway: this.handleClose },
                             _react2.default.createElement(
-                                _Paper2.default,
-                                { className: classes.paper },
-                                _react2.default.createElement(_HiSelectableList2.default, {
-                                    itemList: optionsShown,
-                                    selectedIdList: [],
-                                    checkbox: false,
-                                    onSelect: this.handleSelect,
-                                    translations: translations,
-                                    onKeyDown: this.handleKeyDown
-                                })
+                                _Grow2.default,
+                                { 'in': open, id: 'menu-list', style: { transformOrigin: '0 0 0' } },
+                                _react2.default.createElement(
+                                    _Paper2.default,
+                                    { className: classes.paper },
+                                    _react2.default.createElement(_HiSelectableList2.default, {
+                                        itemList: options,
+                                        selectedIdList: [],
+                                        checkbox: false,
+                                        onSelect: this.handleSelect,
+                                        translations: translations,
+                                        onKeyDown: this.handleKeyDown
+                                    })
+                                )
                             )
                         )
                     )
@@ -292,12 +274,7 @@ var HiSuggestSelect = function (_React$PureComponent) {
 }(_react2.default.PureComponent);
 
 HiSuggestSelect.defaultProps = {
-    showMinLength: false,
-    showNoResults: false,
-    translations: {
-        no_result_match: 'Aucun résultat correspondant',
-        min_length: 'Veuillez saisir 3 caractères minimum'
-    },
+    translations: {},
     options: []
 };
 HiSuggestSelect.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -309,14 +286,6 @@ HiSuggestSelect.propTypes = process.env.NODE_ENV !== "production" ? {
      * id de l'élément input
      */
     id: _propTypes2.default.string,
-    /**
-     * Passe une ref callback au composant input
-     */
-    inputRef: _propTypes2.default.func,
-    /**
-     * Ajoute un loader
-     */
-    loading: _propTypes2.default.bool,
     /**
      * Fonction de callback appelée lorsqu'on écrit dans le champ
      */
@@ -329,14 +298,6 @@ HiSuggestSelect.propTypes = process.env.NODE_ENV !== "production" ? {
      * Liste de suggestions.
      */
     options: _propTypes2.default.array,
-    /**
-     * Permet d'afficher un message si pas assez de caractères
-     */
-    showMinLength: _propTypes2.default.bool,
-    /**
-     * Permet d'afficher un message si aucune options n'est présente
-     */
-    showNoResults: _propTypes2.default.bool,
     /**
      * Traductions (par défaut en anglais)
      */

package/HiSelect/HiSuggestSelectField.js

@@ -1,7 +1,7 @@
 'use strict';
 
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
 
 var _extends2 = require('babel-runtime/helpers/extends');
@@ -56,96 +56,88 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 // @inheritedComponent HiSuggestSelect
 
 var HiSuggestSelectField = function (_React$PureComponent) {
-  (0, _inherits3.default)(HiSuggestSelectField, _React$PureComponent);
-
-  function HiSuggestSelectField() {
-    (0, _classCallCheck3.default)(this, HiSuggestSelectField);
-    return (0, _possibleConstructorReturn3.default)(this, (HiSuggestSelectField.__proto__ || (0, _getPrototypeOf2.default)(HiSuggestSelectField)).apply(this, arguments));
-  }
-
-  (0, _createClass3.default)(HiSuggestSelectField, [{
-    key: 'render',
-    value: function render() {
-      var _props = this.props,
-          label = _props.label,
-          required = _props.required,
-          disabled = _props.disabled,
-          error = _props.error,
-          errorText = _props.errorText,
-          helperText = _props.helperText,
-          helperIcon = _props.helperIcon,
-          id = _props.id,
-          className = _props.className,
-          others = (0, _objectWithoutProperties3.default)(_props, ['label', 'required', 'disabled', 'error', 'errorText', 'helperText', 'helperIcon', 'id', 'className']);
-
-
-      return _react2.default.createElement(
-        _HiFormControl2.default,
-        {
-          id: id,
-          label: label,
-          required: required,
-          disabled: disabled,
-          error: error,
-          errorText: errorText,
-          helperText: helperText,
-          helperIcon: helperIcon,
-          className: className
-        },
-        _react2.default.createElement(_HiSuggestSelect2.default, (0, _extends3.default)({
-          id: id,
-          translations: {
-            all: 'Tous les pays',
-            no_result_match: 'Aucun résultat correspondant',
-            search: 'Recherche',
-            n_items_selected: '%s pays sélectionnés',
-            one_item_selected: '%s pays sélectionné'
-          },
-          disabled: disabled,
-          error: error
-        }, others))
-      );
+    (0, _inherits3.default)(HiSuggestSelectField, _React$PureComponent);
+
+    function HiSuggestSelectField() {
+        (0, _classCallCheck3.default)(this, HiSuggestSelectField);
+        return (0, _possibleConstructorReturn3.default)(this, (HiSuggestSelectField.__proto__ || (0, _getPrototypeOf2.default)(HiSuggestSelectField)).apply(this, arguments));
     }
-  }]);
-  return HiSuggestSelectField;
+
+    (0, _createClass3.default)(HiSuggestSelectField, [{
+        key: 'render',
+        value: function render() {
+            var _props = this.props,
+                label = _props.label,
+                required = _props.required,
+                disabled = _props.disabled,
+                error = _props.error,
+                errorText = _props.errorText,
+                helperText = _props.helperText,
+                helperIcon = _props.helperIcon,
+                id = _props.id,
+                others = (0, _objectWithoutProperties3.default)(_props, ['label', 'required', 'disabled', 'error', 'errorText', 'helperText', 'helperIcon', 'id']);
+
+
+            return _react2.default.createElement(
+                _HiFormControl2.default,
+                {
+                    id: id,
+                    label: label,
+                    required: required,
+                    disabled: disabled,
+                    error: error,
+                    errorText: errorText,
+                    helperText: helperText,
+                    helperIcon: helperIcon
+                },
+                _react2.default.createElement(_HiSuggestSelect2.default, (0, _extends3.default)({
+                    id: id,
+                    translations: {
+                        all: 'Tous les pays',
+                        no_result_match: 'Aucun résultat correspondant',
+                        search: 'Recherche',
+                        n_items_selected: '%s pays sélectionnés',
+                        one_item_selected: '%s pays sélectionné'
+                    }
+                }, others))
+            );
+        }
+    }]);
+    return HiSuggestSelectField;
 }(_react2.default.PureComponent);
 
 HiSuggestSelectField.propTypes = process.env.NODE_ENV !== "production" ? {
-  /**
-   * Surcharge des styles
-   */
-  className: _propTypes2.default.string,
-  /**
-   * Si `true`, l'input sera inactif.
-   */
-  disabled: _propTypes2.default.bool,
-  /**
-   * Si `true`, le champs sera en erreur.
-   */
-  error: _propTypes2.default.bool,
-  /**
-   * Texte de l'erreur
-   */
-  errorText: _propTypes2.default.string,
-  /**
-   * Si "true", le texte d'aide s'affichera seulement au clic sur l'icône "Information"
-   */
-  helperIcon: _propTypes2.default.bool,
-  /**
-   * Texte de l'aide
-   */
-  helperText: _propTypes2.default.string,
-  /**
-   * id de l'élément input
-   */
-  id: _propTypes2.default.string,
-  /**
-   * Label du champs
-   */
-  label: _propTypes2.default.string,
-  /**
-   * true si champs obligatoire
-   */
-  required: _propTypes2.default.bool
+    /**
+     * Si `true`, l'input sera inactif.
+     */
+    disabled: _propTypes2.default.bool,
+    /**
+     * Si `true`, le champs sera en erreur.
+     */
+    error: _propTypes2.default.bool,
+    /**
+     * Texte de l'erreur
+     */
+    errorText: _propTypes2.default.string,
+    /**
+     * Si "true", le texte d'aide s'affichera seulement au clic sur l'icône "Information"
+     */
+    helperIcon: _propTypes2.default.bool,
+    /**
+     * Texte de l'aide
+     */
+    helperText: _propTypes2.default.string,
+    /**
+     * id de l'élément input
+     */
+    id: _propTypes2.default.string,
+    /**
+     * Label du champs
+     */
+    label: _propTypes2.default.string,
+    /**
+     * true si champs obligatoire
+     */
+    required: _propTypes2.default.bool
 } : {};
 exports.default = HiSuggestSelectField;