@hipay/hipay-material-ui 2.0.0-beta.54 → 2.0.0-beta.56

package/es/HiSelect/HiSelect.js

@@ -70,28 +70,6 @@ class HiSelect extends React.PureComponent {
   constructor(_props) {
     super(_props);
 
-    this.handleClick = () => {
-      if (this.state.open) {
-        this.handleClose();
-      } else {
-        this.setState({
-          open: true
-        });
-        const options = this.props.options.slice();
-        this.handleSuggestions(options);
-
-        if (this.props.onClick) {
-          this.props.onClick();
-        } // Gestion du focus
-
-
-        if (!this.props.searchable) {
-          // sinon focus sur le dernier élément selectionné
-          this.focusOnSelectedItem();
-        }
-      }
-    };
-
     this.buildHierarchyTrees = props => {
       // Construct two associative arrays
       // hierarchy[parentId] => children
@@ -153,6 +131,61 @@ class HiSelect extends React.PureComponent {
       }, 1);
     };
 
+    this.handleBlur = () => {
+      this.setState({
+        focused: false
+      });
+    };
+
+    this.handleClick = () => {
+      if (this.state.open) {
+        this.handleClose();
+      } else {
+        this.setState({
+          open: true
+        });
+        const options = this.props.options.slice();
+        this.handleSuggestions(options);
+
+        if (this.props.onClick) {
+          this.props.onClick();
+        } // Gestion du focus
+
+
+        if (!this.props.searchable) {
+          // sinon focus sur le dernier élément selectionné
+          this.focusOnSelectedItem();
+        }
+      }
+    };
+
+    this.handleClickAway = event => {
+      // Au clic sur le bouton, on laisse le handleClick fermer le select
+      if (!this.selectInputElement.contains(event.target)) {
+        this.handleClose(event);
+      }
+    };
+
+    this.handleClose = () => {
+      if (this.props.onClose) {
+        this.props.onClose();
+      }
+
+      if (this.selectInputElement) {
+        this.selectInputElement.focus();
+      }
+
+      this.setState({
+        open: false
+      });
+    };
+
+    this.handleFocus = () => {
+      this.setState({
+        focused: true
+      });
+    };
+
     this.handleKeyDown = event => {
       let nextItem;
 
@@ -186,36 +219,24 @@ class HiSelect extends React.PureComponent {
       }
     };
 
-    this.handleFocus = () => {
-      this.setState({
-        focused: true
-      });
-    };
-
-    this.handleBlur = () => {
-      this.setState({
-        focused: false
-      });
+    this.handleRequestDelete = event => {
+      event.stopPropagation();
+      this.props.onChange(this.props.name, []);
     };
 
-    this.handleClose = () => {
-      if (this.props.onClose) {
-        this.props.onClose();
-      }
-
-      if (this.selectInputElement) {
-        this.selectInputElement.focus();
+    this.handleReset = event => {
+      if (this.props.onReset) {
+        event.stopPropagation();
+        this.props.onReset(event);
       }
-
-      this.setState({
-        open: false
-      });
     };
 
-    this.handleClickAway = event => {
-      // Au clic sur le bouton, on laisse le handleClick fermer le select
-      if (!this.selectInputElement.contains(event.target)) {
-        this.handleClose(event);
+    this.handleScroll = event => {
+      if (!this.props.loadingMoreResults && this.props.hasMore && event.target.scrollHeight - event.target.clientHeight - event.target.scrollTop < 15) {
+        this.props.loadMoreResults(this.state.resultsPageNumber + 1);
+        this.setState(prevState => ({
+          resultsPageNumber: prevState.resultsPageNumber + 1
+        }));
       }
     };
 
@@ -386,20 +407,6 @@ class HiSelect extends React.PureComponent {
       });
     };
 
-    this.handleRequestDelete = evt => {
-      evt.stopPropagation();
-      this.props.onChange(this.props.name, []);
-    };
-
-    this.handleScroll = event => {
-      if (!this.props.loadingMoreResults && this.props.hasMore && event.target.scrollHeight - event.target.clientHeight - event.target.scrollTop < 15) {
-        this.props.loadMoreResults(this.state.resultsPageNumber + 1);
-        this.setState(prevState => ({
-          resultsPageNumber: prevState.resultsPageNumber + 1
-        }));
-      }
-    };
-
     this.state = {
       open: false,
       focused: false,
@@ -455,16 +462,6 @@ class HiSelect extends React.PureComponent {
     } else if (!_props.dynamic) {
       this.state.dynamic = true;
     }
-
-    this.handleSelect = this.handleSelect.bind(this);
-    this.handleClick = this.handleClick.bind(this);
-    this.handleClose = this.handleClose.bind(this);
-    this.handleClickAway = this.handleClickAway.bind(this);
-    this.handleRequestDelete = this.handleRequestDelete.bind(this);
-    this.handleSuggestions = this.handleSuggestions.bind(this);
-    this.handleFocus = this.handleFocus.bind(this);
-    this.handleBlur = this.handleBlur.bind(this);
-    this.handleScroll = this.handleScroll.bind(this);
   }
 
   componentWillReceiveProps(nextProps) {
@@ -490,13 +487,6 @@ class HiSelect extends React.PureComponent {
     }
   }
 
-  handleReset(event) {
-    if (this.props.onReset) {
-      event.stopPropagation();
-      this.props.onReset(event);
-    }
-  }
-
   render() {
     const _this$props = this.props,
           {

package/es/HiSelect/HiSuggestSelect.js

@@ -6,11 +6,13 @@ 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 '../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,
@@ -28,6 +30,9 @@ export const styles = theme => ({
     borderRadius: '0px 2px',
     maxHeight: 440,
     transition: 'none'
+  },
+  alignRight: {
+    right: 0
   }
 });
 
@@ -60,13 +65,20 @@ class HiSuggestSelect extends React.PureComponent {
 
     this.handleKeyDown = event => {
       let nextItem;
+      const key = keycode(event);
 
-      if (event.key === 'ArrowDown') {
+      if (key === 'down') {
+        event.preventDefault();
         nextItem = getNextItemSelectable(document.activeElement, 'down');
-      } else if (event.key === 'ArrowUp') {
+      } else if (key === 'up') {
+        event.preventDefault();
         nextItem = getNextItemSelectable(document.activeElement, 'up');
-      } else if (event.key === 'Tab') {
+      } 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);
       }
 
       if (nextItem) {
@@ -139,9 +151,10 @@ class HiSuggestSelect extends React.PureComponent {
       showMinLength,
       showNoResults,
       onSearch,
-      translations
+      translations,
+      align
     } = _this$props,
-          otherProps = _objectWithoutProperties(_this$props, ["classes", "id", "loading", "showMinLength", "showNoResults", "onSearch", "translations"]);
+          otherProps = _objectWithoutProperties(_this$props, ["classes", "id", "loading", "showMinLength", "showNoResults", "onSearch", "translations", "align"]);
 
     const {
       focused,
@@ -188,7 +201,9 @@ class HiSuggestSelect extends React.PureComponent {
       disablePortal: true,
       anchorEl: this.textInput,
       placement: "bottom-start",
-      className: classes.popper,
+      className: classNames(classes.popper, {
+        [classes.alignRight]: align === 'right'
+      }),
       open: true
     }, React.createElement(Grow, {
       in: open,
@@ -211,6 +226,7 @@ class HiSuggestSelect extends React.PureComponent {
 }
 
 HiSuggestSelect.defaultProps = {
+  align: 'left',
   showMinLength: false,
   showNoResults: false,
   translations: {
@@ -220,6 +236,11 @@ HiSuggestSelect.defaultProps = {
   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.
    */

package/es/HiSelect/SelectInput.js

@@ -300,6 +300,11 @@ SelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   refElement: PropTypes.func,
 
+  /**
+   * Theme object
+   */
+  theme: PropTypes.object,
+
   /**
    * Valeur à afficher (déjà formattée)
    */

package/es/HiSelectNew/HiNestedSelectContent.js

@@ -175,7 +175,6 @@ class HiNestedSelectContent extends React.PureComponent {
 
     this.buildSelectProps = (options, value = [], search = '', loading = false) => {
       const {
-        classes,
         disabledParent,
         hasAll,
         iconAll,
@@ -291,6 +290,11 @@ HiNestedSelectContent.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   hasAll: PropTypes.bool,
 
+  /**
+   * Propriétés du composant HiSelectableList
+   */
+  hiSelectableListProps: PropTypes.object,
+
   /**
    * id du select
    */

package/es/HiSelectNew/HiSelect.js

@@ -15,7 +15,7 @@ import withStyles from '../styles/withStyles';
 import { getNextItemSelectable, foldAccents } from '../utils/helpers';
 import HiIcon from '../HiIcon';
 import keycode from 'keycode';
-import classNames from "classnames";
+import classNames from 'classnames';
 export const styles = theme => ({
   root: {
     backgroundColor: theme.palette.background2,
@@ -85,6 +85,97 @@ class HiSelect extends React.PureComponent {
   constructor(props) {
     super(props);
 
+    this.buildSelectProps = (options, value = [], search = '', loading = false) => {
+      // build item list
+      const itemList = [...(loading ? [{
+        id: '_loading',
+        type: 'loader',
+        disabled: true,
+        centered: true,
+        hideCheckbox: true,
+        label: 'loading'
+      }] : []), // simple one level filter on label
+      ...(search !== '' ? [...options.filter(item => item.label && foldAccents(item.label.toString().toLowerCase()).search(foldAccents(search.toLowerCase())) !== -1)] : [...(this.props.hasAll ? [_objectSpread({
+        id: '_all',
+        label: this.props.translations.all
+      }, this.props.iconAll && {
+        type: 'icon',
+        icon: this.props.iconAll
+      })] : []), ...options])];
+      return {
+        itemList,
+        inputValue: this.buildInputValue(options, value, loading)
+      };
+    };
+
+    this.buildInputValue = (options, value = [], loading = false) => {
+      const {
+        classes,
+        hasAll,
+        translations,
+        type
+      } = this.props; // build input value
+
+      let inputValue;
+
+      if (loading && value.length === 1) {
+        inputValue = translations.one_item_selected;
+      } else if (hasAll && options.length === value.length) {
+        inputValue = translations.all;
+        value.unshift('_all');
+      } else if (value.length > 1) {
+        inputValue = translations.n_items_selected.replace('%s', value.length);
+      } else if (value.length === 1) {
+        const item = options.find(o => o.id === value[0]);
+
+        if (item === undefined) {
+          inputValue = translations.one_item_selected;
+        } else if (type === 'icon' || item.type === 'icon') {
+          inputValue = React.createElement("span", {
+            className: classes.selectIconLabel
+          }, React.createElement(HiIcon, {
+            className: classes.labelIcon,
+            icon: item.icon
+          }), item.label);
+        } else if (type === 'image' || item.type === 'image') {
+          inputValue = React.createElement("span", {
+            className: classes.selectIconLabel
+          }, React.createElement("img", {
+            className: classes.labelImg,
+            src: item.img,
+            alt: item.label
+          }), item.label);
+        } else {
+          inputValue = item.label;
+        }
+      }
+
+      return inputValue;
+    };
+
+    this.focusOnFirstItem = () => {
+      const overlay = findDOMNode(this.overlay);
+      setTimeout(() => {
+        const item = overlay.getElementsByTagName('li')[0];
+        item.focus();
+      }, 1);
+    };
+
+    this.getInputElement = el => {
+      this.searchField = el;
+
+      if (this.props.inputRef) {
+        this.props.inputRef(this.searchField);
+      }
+    };
+
+    this.handleBlur = () => {
+      this.handleSearchReset();
+      this.setState({
+        focused: false
+      });
+    };
+
     this.handleClick = () => {
       if (this.state.open) {
         this.handleClose();
@@ -96,20 +187,58 @@ class HiSelect extends React.PureComponent {
         if (this.props.onClick) this.props.onClick(); // Gestion du focus
 
         if (!this.props.searchable) {
-          // sinon focus sur le premier élément de la liste
-          this.focusOnFirstItem();
+          // Sinon focus sur l'élément sélectionné
+          this.focusOnSelectedItem(this.props.value);
         }
       }
     };
 
-    this.focusOnFirstItem = () => {
+    this.focusOnSelectedItem = selectedValue => {
       const overlay = findDOMNode(this.overlay);
       setTimeout(() => {
-        const item = overlay.getElementsByTagName('li')[0];
-        item.focus();
+        // On initialise au premier élément pour être sûr de ne pas se retrouver avec un focus of undefined
+        let item = overlay.getElementsByTagName('li')[0];
+
+        if (selectedValue && typeof selectedValue === 'string') {
+          item = overlay.getElementsByTagName('li')[selectedValue];
+        } else if (selectedValue && typeof selectedValue === 'number') {
+          item = overlay.getElementsByTagName('li')[selectedValue - 1];
+        }
+
+        if (item) {
+          item.focus();
+        }
       }, 1);
     };
 
+    this.handleClickAway = event => {
+      // Au clic sur le bouton, on laisse le handleClick fermer le select
+      if (!this.inputEl.contains(event.target)) {
+        this.handleClose(event);
+      }
+    };
+
+    this.handleClose = () => {
+      this.handleSearchReset();
+      this.setState({
+        open: false
+      });
+
+      if (this.props.onClose) {
+        this.props.onClose();
+      }
+
+      if (this.inputEl) {
+        this.inputEl.focus();
+      }
+    };
+
+    this.handleFocus = () => {
+      this.setState({
+        focused: true
+      });
+    };
+
     this.handleKeyDown = event => {
       let nextItem;
       const key = keycode(event);
@@ -149,36 +278,9 @@ class HiSelect extends React.PureComponent {
       }
     };
 
-    this.handleFocus = () => {
-      this.setState({
-        focused: true
-      });
-    };
-
-    this.handleBlur = () => {
-      this.setState({
-        focused: false
-      });
-    };
-
-    this.handleClose = () => {
-      this.setState({
-        open: false
-      });
-
-      if (this.props.onClose) {
-        this.props.onClose();
-      }
-
-      if (this.inputEl) {
-        this.inputEl.focus();
-      }
-    };
-
-    this.handleClickAway = event => {
-      // Au clic sur le bouton, on laisse le handleClick fermer le select
-      if (!this.inputEl.contains(event.target)) {
-        this.handleClose(event);
+    this.handleScroll = e => {
+      if (e.target.scrollHeight - e.target.clientHeight - e.target.scrollTop < 15) {
+        this.props.onScrollReachBottom();
       }
     };
 
@@ -244,12 +346,6 @@ class HiSelect extends React.PureComponent {
       }
     };
 
-    this.handleScroll = e => {
-      if (e.target.scrollHeight - e.target.clientHeight - e.target.scrollTop < 15) {
-        this.props.onScrollReachBottom();
-      }
-    };
-
     this.handleSearch = (e, inputValue) => {
       const searchValue = inputValue && e.target.value ? inputValue : e.target.value;
 
@@ -270,74 +366,6 @@ class HiSelect extends React.PureComponent {
       }, '');
     };
 
-    this.buildSelectProps = (options, value = [], search = '', loading = false) => {
-      // build item list
-      const itemList = [...(loading ? [{
-        id: '_loading',
-        type: 'loader',
-        disabled: true,
-        centered: true,
-        hideCheckbox: true,
-        label: 'loading'
-      }] : []), // simple one level filter on label
-      ...(search !== '' ? [...options.filter(item => item.label && foldAccents(item.label.toString().toLowerCase()).search(foldAccents(search.toLowerCase())) !== -1)] : [...(this.props.hasAll ? [_objectSpread({
-        id: '_all',
-        label: this.props.translations.all
-      }, this.props.iconAll && {
-        type: 'icon',
-        icon: this.props.iconAll
-      })] : []), ...options])];
-      return {
-        itemList,
-        inputValue: this.buildInputValue(options, value, loading)
-      };
-    };
-
-    this.buildInputValue = (options, value = [], loading = false) => {
-      const {
-        classes,
-        hasAll,
-        translations,
-        type
-      } = this.props; // build input value
-
-      let inputValue;
-
-      if (loading && value.length === 1) {
-        inputValue = translations.one_item_selected;
-      } else if (hasAll && options.length === value.length) {
-        inputValue = translations.all;
-        value.unshift('_all');
-      } else if (value.length > 1) {
-        inputValue = translations.n_items_selected.replace('%s', value.length);
-      } else if (value.length === 1) {
-        const item = options.find(o => o.id === value[0]);
-
-        if (item === undefined) {
-          inputValue = translations.one_item_selected;
-        } else if (type === 'icon' || item.type === 'icon') {
-          inputValue = React.createElement("span", {
-            className: classes.selectIconLabel
-          }, React.createElement(HiIcon, {
-            className: classes.labelIcon,
-            icon: item.icon
-          }), item.label);
-        } else if (type === 'image' || item.type === 'image') {
-          inputValue = React.createElement("span", {
-            className: classes.selectIconLabel
-          }, React.createElement("img", {
-            className: classes.labelImg,
-            src: item.img,
-            alt: item.label
-          }), item.label);
-        } else {
-          inputValue = item.label;
-        }
-      }
-
-      return inputValue;
-    };
-
     this.state = {
       open: false,
       focused: false,
@@ -365,14 +393,15 @@ class HiSelect extends React.PureComponent {
 
     return null;
   }
+  /**
+   * Build itemList & inputValue from select props
+   * @param options
+   * @param value
+   * @param search
+   * @param loading
+   * @returns {{itemList: *[], inputValue: *}}
+   */
 
-  getInputElement(el) {
-    this.searchField = el;
-
-    if (this.props.inputRef) {
-      this.props.inputRef(this.searchField);
-    }
-  }
 
   render() {
     const {
@@ -387,6 +416,7 @@ class HiSelect extends React.PureComponent {
       value,
       multiple,
       translations,
+      hiSearchInputProps,
       hiSelectableListProps,
       hiSelectInputProps,
       id,
@@ -446,7 +476,7 @@ class HiSelect extends React.PureComponent {
       }
     }, React.createElement(Paper, {
       className: classes.paper
-    }, !!searchable && React.createElement(HiInput, {
+    }, !!searchable && React.createElement(HiInput, _extends({
       value: searchValue,
       autoFocus: true,
       inputRef: this.getInputElement,
@@ -456,7 +486,7 @@ class HiSelect extends React.PureComponent {
       placeholder: translations.search,
       startAdornment: 'search',
       tabIndex: 0
-    }), startAdornment, React.createElement(Scrollbars, _extends({
+    }, hiSearchInputProps)), startAdornment, React.createElement(Scrollbars, _extends({
       ref: contentEl => {
         this.optionsContent = contentEl;
       },
@@ -522,6 +552,7 @@ HiSelect.defaultProps = {
   hasAll: false,
   hiSelectableListProps: {},
   hiSelectInputProps: {},
+  hiSearchInputProps: {},
   multiple: false,
   placeholder: '',
   searchable: false,
@@ -576,7 +607,12 @@ HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
   hasAll: PropTypes.bool,
 
   /**
-   * Override HiSelectableList props (
+   * Override HiInput props (for search)
+   */
+  hiSearchInputProps: PropTypes.object,
+
+  /**
+   * Override HiSelectableList props
    */
   hiSelectableListProps: PropTypes.object,
 

package/es/HiSelectNew/HiSelectContent.js

@@ -7,7 +7,6 @@ import HiSelectableList from '../HiSelectableList';
 import HiInput from '../HiForm/HiInput';
 import withStyles from '../styles/withStyles';
 import { getNextItemSelectable, foldAccents } from '../utils/helpers';
-import HiIcon from '../HiIcon';
 import keycode from 'keycode';
 export const styles = theme => ({
   labelIcon: {
@@ -243,9 +242,6 @@ class HiSelectContent extends React.PureComponent {
 
   render() {
     const {
-      classes,
-      disabled,
-      error,
       loading,
       options,
       searchable,
@@ -254,10 +250,7 @@ class HiSelectContent extends React.PureComponent {
       multiple,
       translations,
       hiSelectableListProps,
-      hiSelectInputProps,
-      id,
       onScrollReachBottom,
-      onSubmit,
       startAdornment,
       searchValue = this.state.searchValue,
       buildSelectProps = this.buildSelectProps,