@hipay/hipay-material-ui 1.0.0-beta.9 → 2.0.0-beta.35

package/es/HiSelect/HiSelectField.js

@@ -1,19 +1,17 @@
-import _extends from 'babel-runtime/helpers/extends';
-import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 // @inheritedComponent HiSelect
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import HiFormControl from '../HiForm/HiFormControl';
 import HiSelect from './HiSelect';
-
 /**
  * Champs input pour formulaire
  */
-class HiSelectField extends React.PureComponent {
 
+class HiSelectField extends React.PureComponent {
   render() {
-    const _props = this.props,
+    const _this$props = this.props,
           {
       label,
       required,
@@ -33,38 +31,35 @@ class HiSelectField extends React.PureComponent {
       searchable,
       translations,
       className
-    } = _props,
-          others = _objectWithoutProperties(_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(HiSelect, _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))
-    );
+    return React.createElement(HiFormControl, {
+      id: id,
+      label: label,
+      required: required,
+      disabled: disabled,
+      error: error,
+      errorText: errorText,
+      helperText: helperText,
+      helperIcon: helperIcon,
+      className: className
+    }, React.createElement(HiSelect, _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)));
   }
+
 }
 
 HiSelectField.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -72,34 +67,42 @@ HiSelectField.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
    */

package/es/HiSelect/HiSuggestSelect.js

@@ -1,210 +1,276 @@
-import _extends from 'babel-runtime/helpers/extends';
-import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 // @inheritedComponent HiInput
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import { findDOMNode } from 'react-dom';
-import Grow from 'material-ui/transitions/Grow';
-import Paper from 'material-ui/Paper';
-import { Manager, Target, Popper } from 'react-popper';
+import Grow from '@material-ui/core/Grow';
+import Paper from '@material-ui/core/Paper';
 import HiSelectableList from '../HiSelectableList';
 import HiInput from '../HiForm/HiInput';
 import { withStyles } from '../styles';
-import { getNextItemSelectable } from '../utils/hiHelpers';
-
+import Popper from '@material-ui/core/Popper';
+import { getNextItemSelectable } from '../utils/helpers';
 export const styles = theme => ({
-    root: {
-        backgroundColor: theme.palette.background2,
-        maxWidth: 500,
-        minWidth: 200,
-        width: '100%'
-    },
-    popper: {
-        width: '100%',
-        transform: 'none',
-        zIndex: 9,
-        top: '100%'
-    },
-    paper: {
-        borderRadius: '0px 2px',
-        maxHeight: 440,
-        transition: 'none'
-    }
+  root: {
+    backgroundColor: theme.palette.background2,
+    maxWidth: 500,
+    minWidth: 200,
+    width: '100%'
+  },
+  popper: {
+    width: '100%',
+    transform: 'none',
+    zIndex: 9,
+    top: '100%'
+  },
+  paper: {
+    borderRadius: '0px 2px',
+    maxHeight: 440,
+    transition: 'none'
+  }
 });
 
 class HiSuggestSelect extends React.PureComponent {
-
-    constructor(props) {
-        super(props);
-
-        this.handleSelect = (event, value) => {
-            document.body.style.overflow = 'auto';
-            this.props.onSelect(event, value);
-            const textInput = this.textInput;
-            if (textInput) {
-                setTimeout(() => {
-                    textInput.focus();
-                }, 1);
-            }
-        };
-
-        this.handleKeyDown = event => {
-            let nextItem;
-            if (event.key === 'ArrowDown') {
-                nextItem = getNextItemSelectable(document.activeElement, 'down');
-            } else if (event.key === 'ArrowUp') {
-                nextItem = getNextItemSelectable(document.activeElement, 'up');
-            } else if (event.key === 'Tab') {
-                document.body.style.overflow = 'auto';
-                this.setState({ open: false });
-            }
-            if (nextItem) {
-                nextItem.focus();
-            }
-        };
-
-        this.handleKeyDownSearch = event => {
-            if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
-                document.body.style.overflow = 'hidden';
-                // On récupère la div parent "overlay"
-                const overlay = findDOMNode(this.overlay);
-                setTimeout(() => {
-                    // On recupère tous les items
-                    const items = overlay.getElementsByTagName('li');
-                    if (items.length) {
-                        // On focus sur le premier
-                        items[0].focus();
-                    }
-                }, 1);
-            } else if (event.key === 'Escape') {
-                this.setState({ options: [] });
-            }
-        };
-
-        this.state = {
-            focused: false,
-            options: props.options
-        };
-
-        this.handleSelect = this.handleSelect.bind(this);
-        this.handleBlur = this.handleBlur.bind(this);
-        this.handleFocus = this.handleFocus.bind(this);
+  static getDerivedStateFromProps(props, state) {
+    if (JSON.stringify(props.options) !== JSON.stringify(state.options)) {
+      return {
+        options: props.options
+      };
     }
 
-    componentWillReceiveProps(nextProps) {
-        this.setState({ options: nextProps.options });
-    }
+    return null;
+  }
+
+  constructor(props) {
+    super(props);
+
+    this.handleSelect = (event, value) => {
+      document.body.style.overflow = 'auto';
+      this.props.onSelect(event, value);
+      const textInput = this.textInput;
 
-    // Key down on list items
+      if (textInput) {
+        setTimeout(() => {
+          textInput.focus();
+          textInput.scrollLeft = textInput.scrollWidth;
+        }, 1);
+      }
+    };
 
+    this.handleKeyDown = event => {
+      let nextItem;
 
-    // Key down on search input
+      if (event.key === 'ArrowDown') {
+        nextItem = getNextItemSelectable(document.activeElement, 'down');
+      } else if (event.key === 'ArrowUp') {
+        nextItem = getNextItemSelectable(document.activeElement, 'up');
+      } else if (event.key === 'Tab') {
+        document.body.style.overflow = 'auto';
+      }
 
+      if (nextItem) {
+        nextItem.focus();
+      }
+    };
 
-    handleFocus() {
-        this.setState({ focused: true });
+    this.handleKeyDownSearch = event => {
+      if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+        document.body.style.overflow = 'hidden'; // On récupère la div parent "overlay"
+
+        const overlay = findDOMNode(this.overlay);
+        setTimeout(() => {
+          // On recupère tous les items
+          const items = overlay.getElementsByTagName('li');
+
+          if (items.length) {
+            // On focus sur le premier
+            items[0].focus();
+          }
+        }, 1);
+      } else if (event.key === 'Escape') {
+        this.setState({
+          options: []
+        });
+      }
+    };
+
+    this.state = {
+      focused: false,
+      options: props.options
+    };
+    this.handleSelect = this.handleSelect.bind(this);
+    this.handleBlur = this.handleBlur.bind(this);
+    this.handleFocus = this.handleFocus.bind(this);
+    this.getInputElement = this.getInputElement.bind(this);
+  }
+
+  getInputElement(el) {
+    this.textInput = el;
+
+    if (this.props.inputRef) {
+      this.props.inputRef(this.textInput);
     }
+  }
+
+  handleFocus() {
+    this.setState({
+      focused: true
+    });
+  }
 
-    handleBlur(event) {
-        // Si on click sur un élément de HiInput, on garde le focus
-        // Par exemple sur l'icone reset
-        if (!event.relatedTarget || !this.overlay || !this.overlay.contains(event.relatedTarget)) {
-            this.setState({ options: [], focused: false });
-        }
+  handleBlur(event) {
+    // Si on click sur un élément de HiInput, on garde le focus
+    // Par exemple sur l'icone reset
+    if (!event.relatedTarget || !this.overlay || !this.overlay.contains(event.relatedTarget)) {
+      this.setState({
+        options: [],
+        focused: false
+      });
     }
+  }
 
-    render() {
-        const _props = this.props,
-              { classes, translations, id, onSearch } = _props,
-              otherProps = _objectWithoutProperties(_props, ['classes', 'translations', 'id', 'onSearch']);
-
-        const { focused, options } = this.state;
-        const open = !!options.length && focused;
-
-        return React.createElement(
-            'div',
-            {
-                className: classes.root,
-                ref: el => {
-                    this.overlay = el;
-                }
-            },
-            React.createElement(
-                Manager,
-                null,
-                React.createElement(
-                    Target,
-                    null,
-                    React.createElement(HiInput, _extends({}, otherProps, {
-                        inputId: id,
-                        focused: focused,
-                        inputRef: input => {
-                            this.textInput = input;
-                        },
-                        onChange: onSearch,
-                        onKeyDown: this.handleKeyDownSearch,
-                        onBlur: this.handleBlur,
-                        onFocus: this.handleFocus
-                    }))
-                ),
-                open && React.createElement(
-                    Popper,
-                    {
-                        placement: 'bottom-start',
-                        eventsEnabled: open,
-                        className: classes.popper
-                    },
-                    React.createElement(
-                        Grow,
-                        { 'in': open, id: 'menu-list', style: { transformOrigin: '0 0 0' } },
-                        React.createElement(
-                            Paper,
-                            { className: classes.paper },
-                            React.createElement(HiSelectableList, {
-                                itemList: options,
-                                selectedIdList: [],
-                                checkbox: false,
-                                onSelect: this.handleSelect,
-                                translations: translations,
-                                onKeyDown: this.handleKeyDown
-                            })
-                        )
-                    )
-                )
-            )
-        );
+  render() {
+    const _this$props = this.props,
+          {
+      classes,
+      id,
+      loading,
+      showMinLength,
+      showNoResults,
+      onSearch,
+      translations
+    } = _this$props,
+          otherProps = _objectWithoutProperties(_this$props, ["classes", "id", "loading", "showMinLength", "showNoResults", "onSearch", "translations"]);
+
+    const {
+      focused,
+      options
+    } = this.state;
+    let optionsShown = options; // If loading
+
+    if (loading) {
+      optionsShown = [{
+        id: '_loading',
+        type: 'loader',
+        disabled: true,
+        centered: true,
+        checkbox: false,
+        label: 'loading'
+      }];
+    } else if (options.length === 0 && (showNoResults || showMinLength)) {
+      // If no result match
+      optionsShown = [{
+        id: '_no_result',
+        type: 'text',
+        disabled: true,
+        centered: true,
+        checkbox: false,
+        label: showNoResults ? translations.no_result_match : translations.min_length
+      }];
     }
+
+    const open = !!optionsShown.length && focused;
+    return React.createElement("div", {
+      className: classes.root,
+      ref: el => {
+        this.overlay = el;
+      }
+    }, React.createElement(HiInput, _extends({}, otherProps, {
+      inputId: id,
+      focused: focused,
+      inputRef: this.getInputElement,
+      onChange: onSearch,
+      onKeyDown: this.handleKeyDownSearch,
+      onBlur: this.handleBlur,
+      onFocus: this.handleFocus
+    })), open && React.createElement(Popper, {
+      disablePortal: true,
+      anchorEl: this.textInput,
+      placement: "bottom-start",
+      eventsEnabled: open,
+      className: classes.popper
+    }, React.createElement(Grow, {
+      in: open,
+      id: "menu-list",
+      style: {
+        transformOrigin: '0 0 0'
+      }
+    }, React.createElement(Paper, {
+      className: classes.paper
+    }, React.createElement(HiSelectableList, {
+      itemList: optionsShown,
+      selectedIdList: [],
+      checkbox: false,
+      onSelect: this.handleSelect,
+      translations: translations,
+      onKeyDown: this.handleKeyDown
+    })))));
+  }
+
 }
 
 HiSuggestSelect.defaultProps = {
-    translations: {},
-    options: []
+  showMinLength: false,
+  showNoResults: false,
+  translations: {
+    no_result_match: 'Aucun résultat correspondant',
+    min_length: 'Veuillez saisir 3 caractères minimum'
+  },
+  options: []
 };
 HiSuggestSelect.propTypes = process.env.NODE_ENV !== "production" ? {
-    /**
-     * Useful to extend the style applied to components.
-     */
-    classes: PropTypes.object,
-    /**
-     * id de l'élément input
-     */
-    id: PropTypes.string,
-    /**
-     * Fonction de callback appelée lorsqu'on écrit dans le champ
-     */
-    onSearch: PropTypes.func,
-    /**
-     * Fonction de callback appelée lorsqu'on sélectionne une suggestion.
-     */
-    onSelect: PropTypes.func,
-    /**
-     * Liste de suggestions.
-     */
-    options: PropTypes.array,
-    /**
-     * Traductions (par défaut en anglais)
-     */
-    translations: PropTypes.object
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object,
+
+  /**
+   * id de l'élément input
+   */
+  id: PropTypes.string,
+
+  /**
+   * Passe une ref callback au composant input
+   */
+  inputRef: PropTypes.func,
+
+  /**
+   * Ajoute un loader
+   */
+  loading: PropTypes.bool,
+
+  /**
+   * Fonction de callback appelée lorsqu'on écrit dans le champ
+   */
+  onSearch: PropTypes.func,
+
+  /**
+   * Fonction de callback appelée lorsqu'on sélectionne une suggestion.
+   */
+  onSelect: PropTypes.func,
+
+  /**
+   * Liste de suggestions.
+   */
+  options: PropTypes.array,
+
+  /**
+   * Permet d'afficher un message si pas assez de caractères
+   */
+  showMinLength: PropTypes.bool,
+
+  /**
+   * Permet d'afficher un message si aucune options n'est présente
+   */
+  showNoResults: PropTypes.bool,
+
+  /**
+   * Traductions (par défaut en anglais)
+   */
+  translations: PropTypes.object
 } : {};
-export default withStyles(styles, { name: 'HmuiHiSuggestSelect' })(HiSuggestSelect);
+export default withStyles(styles, {
+  hiComponent: true,
+  name: 'HmuiHiSuggestSelect'
+})(HiSuggestSelect);