@hipay/hipay-material-ui 2.3.0-rc.4 → 2.3.0-rc.PSYCHE-2530

package/es/HiSelect/HiSuggestSelect.js

@@ -1,251 +1,300 @@
-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/core/Grow';
-import Paper from '@material-ui/core/Paper';
-import classNames from 'classnames';
-import HiSelectableList from '../HiSelectableList';
-import HiInput from '../HiForm/HiInput';
-import { withStyles } from '@material-ui/core/styles';
-import Popper from '@material-ui/core/Popper';
-import { getNextItemSelectable } from '../utils/helpers';
-import keycode from 'keycode';
-export const styles = theme => ({
-  root: {
-    backgroundColor: theme.palette.background2,
-    maxWidth: 500,
-    minWidth: 200,
-    width: '100%'
-  },
-  popper: {
-    width: '100% !important',
-    transform: 'none !important',
-    zIndex: '9 !important',
-    top: '100% !important',
-    textOverflow: 'ellipsis'
-  },
-  paper: {
-    borderRadius: '0px 2px',
-    maxHeight: 440,
-    transition: 'none'
-  },
-  alignRight: {
-    right: 0
-  }
+"use strict";
+
+var _interopRequireDefault = require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
+exports.default = exports.styles = void 0;
 
-class HiSuggestSelect extends React.PureComponent {
-  static getDerivedStateFromProps(props, state) {
-    if (JSON.stringify(props.options) !== JSON.stringify(state.options)) {
-      return {
-        options: props.options,
-        suggestionFocusIndex: -1
-      };
-    }
+var _extends2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/extends"));
 
-    return null;
-  }
+var _objectWithoutProperties2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _classCallCheck2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/classCallCheck"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/getPrototypeOf"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/assertThisInitialized"));
+
+var _createClass2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/inherits"));
+
+var _defineProperty2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/defineProperty"));
 
-  constructor(props) {
-    super(props);
+var _react = _interopRequireDefault(require("react"));
 
-    this.getInputElement = el => {
-      this.textInput = el;
+var _Grow = _interopRequireDefault(require("@material-ui/core/Grow"));
 
-      if (this.props.inputRef) {
-        this.props.inputRef(this.textInput);
+var _Paper = _interopRequireDefault(require("@material-ui/core/Paper"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _HiSelectableList = _interopRequireDefault(require("../HiSelectableList"));
+
+var _HiInput = _interopRequireDefault(require("../HiForm/HiInput"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _Popper = _interopRequireDefault(require("@material-ui/core/Popper"));
+
+var _helpers = require("../utils/helpers");
+
+var _keycode = _interopRequireDefault(require("keycode"));
+
+// @inheritedComponent HiInput
+var styles = function styles(theme) {
+  return {
+    root: {
+      backgroundColor: theme.palette.background2,
+      maxWidth: 500,
+      minWidth: 200,
+      width: '100%'
+    },
+    popper: {
+      width: '100% !important',
+      transform: 'none !important',
+      zIndex: '9 !important',
+      top: '100% !important',
+      textOverflow: 'ellipsis'
+    },
+    paper: {
+      borderRadius: '0px 2px',
+      maxHeight: 440,
+      transition: 'none'
+    },
+    alignRight: {
+      right: 0
+    }
+  };
+};
+
+exports.styles = styles;
+
+var HiSuggestSelect =
+/*#__PURE__*/
+function (_React$PureComponent) {
+  (0, _inherits2.default)(HiSuggestSelect, _React$PureComponent);
+  (0, _createClass2.default)(HiSuggestSelect, null, [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(props, state) {
+      if (JSON.stringify(props.options) !== JSON.stringify(state.options)) {
+        return {
+          options: props.options,
+          suggestionFocusIndex: -1
+        };
       }
-    };
 
-    this.handleSelect = (event, value) => {
+      return null;
+    }
+  }]);
+
+  function HiSuggestSelect(props) {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, HiSuggestSelect);
+    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiSuggestSelect).call(this, props));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getInputElement", function (el) {
+      _this.textInput = el;
+
+      if (_this.props.inputRef) {
+        _this.props.inputRef(_this.textInput);
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleSelect", function (event, value) {
       document.body.style.overflow = 'auto';
-      this.props.onSelect(event, value);
-      const textInput = this.textInput;
+
+      _this.props.onSelect(event, value);
+
+      var textInput = _this.textInput;
 
       if (textInput) {
-        setTimeout(() => {
+        setTimeout(function () {
           textInput.focus();
           textInput.scrollLeft = textInput.scrollWidth;
         }, 1);
       }
-    };
-
-    this.handleKeyDown = event => {
-      let nextItem;
-      const key = keycode(event);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleKeyDown", function (event) {
+      var nextItem;
+      var key = (0, _keycode.default)(event);
 
       if (key === 'down') {
         event.preventDefault();
-        nextItem = getNextItemSelectable(document.activeElement, 'down');
+        nextItem = (0, _helpers.getNextItemSelectable)(document.activeElement, 'down');
       } else if (key === 'up') {
         event.preventDefault();
-        nextItem = getNextItemSelectable(document.activeElement, 'up');
+        nextItem = (0, _helpers.getNextItemSelectable)(document.activeElement, 'up');
       } else if (key === 'tab') {
         document.body.style.overflow = 'auto';
       } else if (key === 'escape' || 'enter') {
         event.preventDefault();
-        const item = this.props.options.find(elem => String(elem.id) === event.target.id);
-        this.handleSelect(null, item);
+
+        var item = _this.props.options.find(function (elem) {
+          return String(elem.id) === event.target.id;
+        });
+
+        _this.handleSelect(null, item);
       }
 
       if (nextItem) {
         nextItem.focus();
       }
-    };
-
-    this.handleKeyDownSearch = event => {
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleKeyDownSearch", function (event) {
       if (event.key === 'ArrowDown') {
         event.preventDefault();
 
-        if (this.state.suggestionFocusIndex < this.props.options.length - 1) {
-          this.setState(prevState => ({
-            suggestionFocusIndex: prevState.suggestionFocusIndex + 1
-          }));
+        if (_this.state.suggestionFocusIndex < _this.props.options.length - 1) {
+          _this.setState(function (prevState) {
+            return {
+              suggestionFocusIndex: prevState.suggestionFocusIndex + 1
+            };
+          });
         }
       } else if (event.key === 'ArrowUp') {
         event.preventDefault();
 
-        if (this.state.suggestionFocusIndex >= 0) {
-          this.setState(prevState => ({
-            suggestionFocusIndex: prevState.suggestionFocusIndex - 1
-          }));
+        if (_this.state.suggestionFocusIndex >= 0) {
+          _this.setState(function (prevState) {
+            return {
+              suggestionFocusIndex: prevState.suggestionFocusIndex - 1
+            };
+          });
         }
-      } else if (event.key === 'Enter' && this.state.suggestionFocusIndex >= 0) {
+      } else if (event.key === 'Enter' && _this.state.suggestionFocusIndex >= 0) {
         event.preventDefault(); // Suggestion focused
 
-        this.handleSelect(event, this.state.options[this.state.suggestionFocusIndex]);
+        _this.handleSelect(event, _this.state.options[_this.state.suggestionFocusIndex]);
       } else if (event.key === 'Escape') {
-        this.setState({
+        _this.setState({
           options: [],
           suggestionFocusIndex: -1
         });
       }
-    };
-
-    this.handleFocus = event => {
-      this.setState({
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleFocus", function (event) {
+      _this.setState({
         focused: true
       });
 
-      if (this.props.onFocusInput) {
-        this.props.onFocusInput(event);
+      if (_this.props.onFocusInput) {
+        _this.props.onFocusInput(event);
       }
-    };
-
-    this.handleBlur = event => {
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleBlur", function (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({
+      if (!event.relatedTarget || !_this.overlay || !_this.overlay.contains(event.relatedTarget)) {
+        _this.setState({
           options: [],
           focused: false,
           suggestionFocusIndex: -1
         });
 
-        if (this.props.onBlurInput) {
-          this.props.onBlurInput(event);
+        if (_this.props.onBlurInput) {
+          _this.props.onBlurInput(event);
         }
       }
-    };
-
-    this.state = {
+    });
+    _this.state = {
       focused: false,
       options: props.options,
       suggestionFocusIndex: -1
     };
+    return _this;
   }
 
-  render() {
-    const _this$props = this.props,
-          {
-      classes,
-      id,
-      loading,
-      showMinLength,
-      showNoResults,
-      onSearch,
-      translations,
-      align,
-      inputClasses
-    } = _this$props,
-          otherProps = _objectWithoutProperties(_this$props, ["classes", "id", "loading", "showMinLength", "showNoResults", "onSearch", "translations", "align", "inputClasses"]);
-
-    const {
-      focused,
-      options,
-      suggestionFocusIndex
-    } = 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;
+  (0, _createClass2.default)(HiSuggestSelect, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props = this.props,
+          classes = _this$props.classes,
+          id = _this$props.id,
+          loading = _this$props.loading,
+          showMinLength = _this$props.showMinLength,
+          showNoResults = _this$props.showNoResults,
+          onSearch = _this$props.onSearch,
+          translations = _this$props.translations,
+          align = _this$props.align,
+          inputClasses = _this$props.inputClasses,
+          otherProps = (0, _objectWithoutProperties2.default)(_this$props, ["classes", "id", "loading", "showMinLength", "showNoResults", "onSearch", "translations", "align", "inputClasses"]);
+      var _this$state = this.state,
+          focused = _this$state.focused,
+          options = _this$state.options,
+          suggestionFocusIndex = _this$state.suggestionFocusIndex;
+      var 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
+        }];
       }
-    }, React.createElement(HiInput, _extends({}, otherProps, {
-      inputId: id,
-      focused: focused,
-      inputRef: this.getInputElement,
-      onChange: onSearch,
-      onKeyDown: this.handleKeyDownSearch,
-      onBlur: this.handleBlur,
-      onFocus: this.handleFocus,
-      classes: inputClasses
-    })), open && React.createElement(Popper, {
-      disablePortal: true,
-      anchorEl: this.textInput,
-      placement: "bottom-start",
-      className: classNames(classes.popper, {
-        [classes.alignRight]: align === 'right'
-      }),
-      open: true
-    }, 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: [],
-      hideCheckbox: true,
-      onSelect: this.handleSelect,
-      translations: translations,
-      onKeyDown: this.handleKeyDown,
-      suggestionFocusIndex: suggestionFocusIndex
-    })))));
-  }
 
-}
+      var open = !!optionsShown.length && focused;
+      return _react.default.createElement("div", {
+        className: classes.root,
+        ref: function ref(el) {
+          _this2.overlay = el;
+        }
+      }, _react.default.createElement(_HiInput.default, (0, _extends2.default)({}, otherProps, {
+        inputId: id,
+        focused: focused,
+        inputRef: this.getInputElement,
+        onChange: onSearch,
+        onKeyDown: this.handleKeyDownSearch,
+        onBlur: this.handleBlur,
+        onFocus: this.handleFocus,
+        classes: inputClasses
+      })), open && _react.default.createElement(_Popper.default, {
+        disablePortal: true,
+        anchorEl: this.textInput,
+        placement: "bottom-start",
+        className: (0, _classnames.default)(classes.popper, (0, _defineProperty2.default)({}, classes.alignRight, align === 'right')),
+        open: true
+      }, _react.default.createElement(_Grow.default, {
+        in: open,
+        id: "menu-list",
+        style: {
+          transformOrigin: '0 0 0'
+        }
+      }, _react.default.createElement(_Paper.default, {
+        className: classes.paper
+      }, _react.default.createElement(_HiSelectableList.default, {
+        itemList: optionsShown,
+        selectedIdList: [],
+        hideCheckbox: true,
+        onSelect: this.handleSelect,
+        translations: translations,
+        onKeyDown: this.handleKeyDown,
+        suggestionFocusIndex: suggestionFocusIndex
+      })))));
+    }
+  }]);
+  return HiSuggestSelect;
+}(_react.default.PureComponent);
 
-HiSuggestSelect.defaultProps = {
+(0, _defineProperty2.default)(HiSuggestSelect, "defaultProps", {
   align: 'left',
   showMinLength: false,
   showNoResults: false,
@@ -254,79 +303,11 @@ HiSuggestSelect.defaultProps = {
     min_length: 'Veuillez saisir 3 caractères minimum'
   },
   options: []
-};
-HiSuggestSelect.propTypes = process.env.NODE_ENV !== "production" ? {
-  /**
-   * Align popper on right or left of container
-   */
-  align: PropTypes.oneOf(['left', 'right']),
-
-  /**
-   * Useful to extend the style applied to components.
-   */
-  classes: PropTypes.object,
-
-  /**
-   * id de l'élément input
-   */
-  id: PropTypes.string,
-
-  /**
-   * Object that contains the style for Input component
-   */
-  inputClasses: PropTypes.object,
-
-  /**
-   * Passe une ref callback au composant input
-   */
-  inputRef: PropTypes.func,
-
-  /**
-   * Ajoute un loader
-   */
-  loading: PropTypes.bool,
-
-  /**
-   * Fonction de callback appelée lorsqu'on blur le champ de recherche
-   */
-  onBlurInput: PropTypes.func,
-
-  /**
-   * Fonction de callback appelée lorsqu'on focus le champs de recherche
-   */
-  onFocusInput: PropTypes.func,
-
-  /**
-   * 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, {
+});
+
+var _default = (0, _styles.withStyles)(styles, {
   hiComponent: true,
   name: 'HmuiHiSuggestSelect'
-})(HiSuggestSelect);
+})(HiSuggestSelect);
+
+exports.default = _default;