@hipay/hipay-material-ui 2.0.0-beta.55 → 2.0.0-beta.57

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,
@@ -64,7 +64,10 @@ export const styles = theme => ({
   }, theme.typography.b1, {
     display: 'inline-flex',
     width: '100%'
-  })
+  }),
+  separator: {
+    borderTop: `1px solid ${theme.palette.input.bottomLine}`
+  }
 });
 /**
  *
@@ -85,6 +88,104 @@ 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,
+            onError: e => {
+              if (item.fallbackImage) {
+                e.target.src = `${item.fallbackImage}`;
+              } else {
+                e.target.style.display = 'none';
+              }
+            }
+          }), 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 +197,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);
@@ -120,7 +259,17 @@ class HiSelect extends React.PureComponent {
       } else if (key === 'up') {
         event.preventDefault();
         nextItem = getNextItemSelectable(document.activeElement, 'up');
-      } else if (key === 'tab' || key === 'esc') {
+      }
+
+      if (nextItem) {
+        nextItem.focus();
+      }
+    };
+
+    this.handleKeyUp = event => {
+      const key = keycode(event);
+
+      if (key === 'tab' || key === 'esc') {
         this.setState({
           open: false
         });
@@ -132,10 +281,6 @@ class HiSelect extends React.PureComponent {
         event.preventDefault();
         this.handleClose();
       }
-
-      if (nextItem) {
-        nextItem.focus();
-      }
     };
 
     this.handleKeyDownSearch = event => {
@@ -149,36 +294,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 +362,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,79 +382,12 @@ 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,
       searchValue: props.searchValue ? undefined : '',
-      suggestions: props.options
+      suggestions: props.options,
+      openDown: true
     };
     this.handleClick = this.handleClick.bind(this);
     this.handleClose = this.handleClose.bind(this);
@@ -365,14 +410,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 +433,7 @@ class HiSelect extends React.PureComponent {
       value,
       multiple,
       translations,
+      hiSearchInputProps,
       hiSelectableListProps,
       hiSelectInputProps,
       id,
@@ -436,43 +483,74 @@ class HiSelect extends React.PureComponent {
       [classes.popperWidth]: !this.props.containerWidth,
       [classes.popperRightAlign]: this.props.containerWidth && this.props.align === 'right'
     });
-    const content = React.createElement(ClickAwayListener, {
-      onClickAway: this.handleClickAway
-    }, React.createElement(Grow, {
-      in: open,
-      id: "menu-list",
-      style: {
-        transformOrigin: '0 0 0'
+
+    let searchInput = position => {
+      if (!!searchable) {
+        return React.createElement(HiInput, _extends({
+          value: searchValue,
+          autoFocus: true,
+          inputRef: this.getInputElement,
+          onKeyDown: this.handleKeyDownSearch,
+          onChange: this.handleSearch,
+          onReset: this.handleSearchReset,
+          placeholder: translations.search,
+          startAdornment: 'search',
+          tabIndex: 0,
+          className: classNames({
+            [classes.separator]: position === 'top'
+          })
+        }, hiSearchInputProps));
       }
-    }, React.createElement(Paper, {
-      className: classes.paper
-    }, !!searchable && React.createElement(HiInput, {
-      value: searchValue,
-      autoFocus: true,
-      inputRef: this.getInputElement,
-      onKeyDown: this.handleKeyDownSearch,
-      onChange: this.handleSearch,
-      onReset: this.handleSearchReset,
-      placeholder: translations.search,
-      startAdornment: 'search',
-      tabIndex: 0
-    }), startAdornment, React.createElement(Scrollbars, _extends({
-      ref: contentEl => {
-        this.optionsContent = contentEl;
-      },
-      autoHeight: true,
-      autoHeightMax: 400 // TODO ?
-
-    }, onScrollReachBottom && {
-      onScroll: this.handleScroll
-    }), React.createElement(HiSelectableList, _extends({
-      type: type,
-      itemList: itemList,
-      onKeyDown: this.handleKeyDown,
-      onSelect: this.handleSelect,
-      selectedItemIdList: selectedItemIdList,
-      fallbackImage: this.props.fallbackImage
-    }, hiSelectableListProps))))));
+
+      return null;
+    }; // Replace popper onSearch when popper displayed on top of selectButton
+
+
+    if (this.placement && this.placement.indexOf('top') >= 0 && !!searchable) {
+      // +1 for search input
+      let nbItems = itemList.length <= 10 ? itemList.length + 1 : 11;
+      popperStyle.transform = `translate3d(-1px, -${nbItems * 40 + 2}px, 0px)`;
+    } else if (this.placement && this.placement.indexOf('top') < 0 && !!searchable) {
+      popperStyle.transform = `translate3d(-1px, 40px, 0px)`;
+    }
+
+    let content = ({
+      placement
+    }) => {
+      if (placement !== this.placement) {
+        this.placement = placement;
+      }
+
+      return React.createElement(ClickAwayListener, {
+        onClickAway: this.handleClickAway
+      }, React.createElement(Grow, {
+        in: open,
+        id: "menu-list",
+        style: {
+          transformOrigin: '0 0 0'
+        }
+      }, React.createElement(Paper, {
+        className: classes.paper
+      }, (this.placement && this.placement.indexOf('bottom') >= 0 || staticPosition) && searchInput('bottom'), startAdornment, React.createElement(Scrollbars, _extends({
+        ref: contentEl => {
+          this.optionsContent = contentEl;
+        },
+        autoHeight: true,
+        autoHeightMax: 400 // TODO ?
+
+      }, onScrollReachBottom && {
+        onScroll: this.handleScroll
+      }), React.createElement(HiSelectableList, _extends({
+        type: type,
+        itemList: itemList,
+        onKeyDown: this.handleKeyDown,
+        onKeyUp: this.handleKeyUp,
+        onSelect: this.handleSelect,
+        selectedItemIdList: selectedItemIdList,
+        fallbackImage: this.props.fallbackImage
+      }, hiSelectableListProps))), this.placement && this.placement.indexOf('top') >= 0 && !staticPosition && searchInput('top'))));
+    };
+
     return React.createElement("div", {
       className: classes.root,
       ref: el => {
@@ -502,7 +580,7 @@ class HiSelect extends React.PureComponent {
     })), open && staticPosition ? React.createElement("div", {
       style: popperStyle,
       className: popperClass
-    }, content) : React.createElement(Popper, {
+    }, content({})) : React.createElement(Popper, {
       anchorEl: this.inputEl,
       placement: "bottom-start",
       open: open,
@@ -522,6 +600,7 @@ HiSelect.defaultProps = {
   hasAll: false,
   hiSelectableListProps: {},
   hiSelectInputProps: {},
+  hiSearchInputProps: {},
   multiple: false,
   placeholder: '',
   searchable: false,
@@ -576,7 +655,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,

package/es/HiSelectNew/HiSelectInput.js

@@ -162,14 +162,12 @@ class HiSelectInput extends React.PureComponent {
     this.handleBlur = event => {
       if ((!this.input || !this.input.contains(event.relatedTarget)) && this.props.onBlur) {
         this.props.onBlur(event);
-      } else {
-        if (this.input && (!this.resetIcon || !this.resetIcon.contains(event.relatedTarget))) {
-          this.input.focus();
-        }
+      } else if (this.input && (!this.resetIcon || !this.resetIcon.contains(event.relatedTarget))) {
+        this.input.focus();
       }
     };
 
-    this.handleRef = el => {
+    this.ref = el => {
       this.input = el;
 
       if (this.props.refElement) {
@@ -180,7 +178,7 @@ class HiSelectInput extends React.PureComponent {
     this.handleKeyDown = this.handleKeyDown.bind(this);
     this.handleClick = this.handleClick.bind(this);
     this.handleBlur = this.handleBlur.bind(this);
-    this.handleRef = this.handleRef.bind(this);
+    this.ref = this.ref.bind(this);
     this.handleReset = this.handleReset.bind(this);
   }
 
@@ -219,7 +217,7 @@ class HiSelectInput extends React.PureComponent {
       onBlur: this.props.onBlur,
       role: "button",
       tabIndex: "0",
-      ref: this.handleRef
+      ref: this.ref
     }, React.createElement("span", {
       className: classNames(classes.label, {
         [classes.placeholder]: value === undefined
@@ -235,8 +233,9 @@ class HiSelectInput extends React.PureComponent {
       onMouseLeave: this.props.onMouseLeave,
       onKeyDown: this.handleKeyDown,
       onFocus: this.props.onFocus,
-      onBlur: this.handleBlur,
-      buttonRef: this.handleRef
+      onBlur: this.handleBlur // buttref={this.ref}
+      ,
+      buttonRef: this.ref
     }, React.createElement("span", {
       className: classNames(classes.label, {
         [classes.placeholder]: value === undefined

package/es/HiSelectableList/HiSelectableList.js

@@ -5,7 +5,8 @@ import PropTypes from 'prop-types';
 import List from '@material-ui/core/List';
 import withStyles from '../styles/withStyles';
 import HiSelectableListItem from './HiSelectableListItem';
-import { foldAccents } from '../utils/helpers';
+import { foldAccents, getNextItemSelectable } from '../utils/helpers';
+import keycode from 'keycode';
 export const styles = () => ({
   root: {
     padding: 0
@@ -23,6 +24,31 @@ class HiSelectableList extends React.PureComponent {
       this.props.onSelect(event, item);
     };
 
+    this.handleKeyDown = event => {
+      let nextItem;
+      const key = keycode(event);
+
+      if (key === 'down') {
+        event.preventDefault();
+        nextItem = getNextItemSelectable(document.activeElement, 'down');
+      } else if (key === 'up') {
+        event.preventDefault();
+        nextItem = getNextItemSelectable(document.activeElement, 'up');
+      } else if (key === 'space' || key === 'enter' && !this.props.multiple) {
+        event.preventDefault();
+        const item = this.props.options.find(elem => String(elem.id) === event.target.id);
+        this.handleSelect(null, item);
+      }
+
+      if (nextItem) {
+        nextItem.focus();
+      }
+    };
+
+    this.handleKeyUp = () => {
+      return false;
+    };
+
     this.buildRecursiveListItem = (item, level = 0) => {
       const _this$props = this.props,
             {
@@ -33,9 +59,11 @@ class HiSelectableList extends React.PureComponent {
         hoverIcon,
         icon,
         selectedItemIdList,
-        sort
+        sort,
+        onKeyDown = this.handleKeyDown,
+        onKeyUp = this.handleKeyUp
       } = _this$props,
-            others = _objectWithoutProperties(_this$props, ["checkedIcon", "disabled", "disabledItemIdList", "hideCheckbox", "hoverIcon", "icon", "selectedItemIdList", "sort"]);
+            others = _objectWithoutProperties(_this$props, ["checkedIcon", "disabled", "disabledItemIdList", "hideCheckbox", "hoverIcon", "icon", "selectedItemIdList", "sort", "onKeyDown", "onKeyUp"]);
 
       if (sort && item.children) {
         item.children.sort(this.compareItem);
@@ -51,6 +79,8 @@ class HiSelectableList extends React.PureComponent {
         icon: icon,
         level: level,
         onSelect: this.handleSelect(item),
+        onKeyDown: onKeyDown,
+        onKeyUp: onKeyUp,
         selected: selectedItemIdList.includes(item.id) // item props override upper props (disabled, hideCheckbox, icon, level...)
 
       }, item)), item.children && item.children.length > 0 && item.children.filter(subItem => !(subItem.displayed === false)).map(subItem => this.buildRecursiveListItem(subItem, level + 1)));
@@ -79,7 +109,6 @@ class HiSelectableList extends React.PureComponent {
     const {
       classes,
       itemList,
-      onKeyDown,
       sort
     } = this.props;
 
@@ -88,8 +117,7 @@ class HiSelectableList extends React.PureComponent {
     }
 
     return React.createElement(List, {
-      className: classes.root,
-      onKeyDown: onKeyDown
+      className: classes.root
     }, itemList.filter(item => !(item.displayed === false)) // don't remove if undefined
     .map(item => this.buildRecursiveListItem(item)));
   }