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

package/es/HiNotice/HiKPI.js

@@ -136,7 +136,7 @@ HiKPI.propTypes = process.env.NODE_ENV !== "production" ? {
   active: PropTypes.bool,
 
   /**
-   * KPI id
+   * Corps du KPI
    */
   body: PropTypes.any.isRequired,
 
@@ -161,9 +161,9 @@ HiKPI.propTypes = process.env.NODE_ENV !== "production" ? {
   disable: PropTypes.bool,
 
   /**
-   * Corps du KPI
+   * KPI id
    */
-  id: PropTypes.number.isRequired,
+  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
 
   /**
    * Corps minifié du KPI si nécessaire

package/es/HiNotice/HiKPINotice.js

@@ -16,16 +16,17 @@ const styles = () => ({
 const HiKPINotice = ({
   classes,
   kpis,
-  activeKpis,
+  activeKpi,
   minify,
   onClickOnKPI
 }) => {
   return React.createElement("div", {
     className: classes.container
-  }, kpis.map(kpi => {
+  }, Object.keys(kpis).map(key => {
+    const kpi = kpis[key];
     return React.createElement(HiKPI, {
-      key: kpi.id,
-      id: kpi.id,
+      key: key,
+      id: key,
       type: kpi.type,
       color: kpi.color,
       title: kpi.title,
@@ -33,8 +34,8 @@ const HiKPINotice = ({
       bodyMinify: kpi.bodyMinify,
       subtitle: kpi.subtitle,
       tooltip: kpi.tooltip,
-      onClick: onClickOnKPI,
-      active: !!activeKpis.includes(kpi.id),
+      onClick: () => onClickOnKPI(key),
+      active: activeKpi === key,
       minify: minify,
       disable: kpi.disable
     });
@@ -45,7 +46,7 @@ HiKPINotice.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
    * Extension du style appliqué au composant
    */
-  activeKpis: PropTypes.array,
+  activeKpi: PropTypes.string,
 
   /**
    * Liste des KPIs
@@ -55,7 +56,7 @@ HiKPINotice.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
    * Fonction appelée au clic sur un KPI
    */
-  kpis: PropTypes.array.isRequired,
+  kpis: PropTypes.object.isRequired,
 
   /**
    * Liste des KPIS actifs
@@ -68,7 +69,7 @@ HiKPINotice.propTypes = process.env.NODE_ENV !== "production" ? {
   onClickOnKPI: PropTypes.func
 } : {};
 HiKPINotice.defaultProps = {
-  activeKpis: [],
+  activeKpi: null,
   minify: false
 };
 export default withStyles(styles, {

package/es/HiPin/HiPin.js

@@ -6,7 +6,7 @@ import { withStyles } from '../styles';
 export const styles = theme => ({
   root: {
     display: 'inline-block',
-    padding: '0 9px',
+    padding: '1px 9px',
     height: 16,
     lineHeight: '16px',
     minWidth: 25,

package/es/HiSelect/HiSelect.js

@@ -193,17 +193,13 @@ class HiSelect extends React.PureComponent {
         nextItem = getNextItemSelectable(document.activeElement, 'down');
       } else if (event.key === 'ArrowUp') {
         nextItem = getNextItemSelectable(document.activeElement, 'up');
-      } else if (event.key === 'Tab') {
+      } else if (event.key === 'Tab' || event.key === 'Escape') {
         /* if (!this.props.staticPosition) {
             document.body.style.overflow = 'auto';
         } */
         this.setState({
           open: false
         });
-      } else if (event.key === 'Escape') {
-        this.setState({
-          open: false
-        });
       }
 
       if (nextItem) {
@@ -216,6 +212,10 @@ class HiSelect extends React.PureComponent {
         this.focusOnSelectedItem();
       } else if (event.key === 'Enter' && this.props.onSubmit) {
         this.props.onSubmit(event);
+      } else if (event.key === 'Tab' || event.key === 'Escape') {
+        this.setState({
+          open: false
+        });
       }
     };
 
@@ -682,6 +682,7 @@ class HiSelect extends React.PureComponent {
       onClick: this.handleClick,
       onFocus: this.handleFocus,
       onBlur: this.handleBlur,
+      onKeyDown: this.handleKeyDown,
       onMouseEnter: this.props.onMouseEnter,
       onMouseLeave: this.props.onMouseLeave,
       refElement: el => {

package/es/HiSelect/HiSuggestSelect.js

@@ -24,7 +24,8 @@ export const styles = theme => ({
     width: '100% !important',
     transform: 'none !important',
     zIndex: '9 !important',
-    top: '100% !important'
+    top: '100% !important',
+    textOverflow: 'ellipsis'
   },
   paper: {
     borderRadius: '0px 2px',
@@ -125,10 +126,14 @@ class HiSuggestSelect extends React.PureComponent {
     }
   }
 
-  handleFocus() {
+  handleFocus(event) {
     this.setState({
       focused: true
     });
+
+    if (this.props.onFocusInput) {
+      this.props.onFocusInput(event);
+    }
   }
 
   handleBlur(event) {
@@ -140,6 +145,10 @@ class HiSuggestSelect extends React.PureComponent {
         focused: false
       });
     }
+
+    if (this.props.onBlurInput) {
+      this.props.onBlurInput(event);
+    }
   }
 
   render() {
@@ -261,6 +270,16 @@ HiSuggestSelect.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   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
    */

package/es/HiSelect/SelectInput.js

@@ -13,7 +13,10 @@ export const styles = theme => ({
     maxWidth: 500,
     display: 'flex',
     justifyContent: 'center',
-    padding: 8,
+    paddingTop: 7,
+    paddingBottom: 9,
+    paddingRight: 8,
+    paddingLeft: 8,
     cursor: 'pointer'
   },
   underline: {
@@ -182,6 +185,7 @@ class SelectInput extends React.PureComponent {
       className: iconClass,
       icon: "arrow_drop_down"
     })) : React.createElement(ButtonBase, {
+      component: "div",
       id: id,
       classes: {
         root: rootClass

package/es/HiSelectNew/HiSelect.js

@@ -6,7 +6,6 @@ import Scrollbars from 'react-custom-scrollbars';
 import Grow from '@material-ui/core/Grow';
 import Paper from '@material-ui/core/Paper';
 import Popper from '@material-ui/core/Popper';
-import { findDOMNode } from 'react-dom';
 import ClickAwayListener from '@material-ui/core/ClickAwayListener';
 import HiSelectableList from '../HiSelectableList';
 import HiInput from '../HiForm/HiInput';
@@ -64,7 +63,10 @@ export const styles = theme => ({
   }, theme.typography.b1, {
     display: 'inline-flex',
     width: '100%'
-  })
+  }),
+  separator: {
+    borderTop: `1px solid ${theme.palette.input.bottomLine}`
+  }
 });
 /**
  *
@@ -143,7 +145,14 @@ class HiSelect extends React.PureComponent {
           }, React.createElement("img", {
             className: classes.labelImg,
             src: item.img,
-            alt: item.label
+            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;
@@ -154,11 +163,12 @@ class HiSelect extends React.PureComponent {
     };
 
     this.focusOnFirstItem = () => {
-      const overlay = findDOMNode(this.overlay);
-      setTimeout(() => {
-        const item = overlay.getElementsByTagName('li')[0];
-        item.focus();
-      }, 1);
+      if (this.overlay && this.overlay.getElementsByTagName('li')[0]) {
+        setTimeout(() => {
+          const item = this.overlay.getElementsByTagName('li')[0];
+          item.focus();
+        }, 1);
+      }
     };
 
     this.getInputElement = el => {
@@ -194,15 +204,14 @@ class HiSelect extends React.PureComponent {
     };
 
     this.focusOnSelectedItem = selectedValue => {
-      const overlay = findDOMNode(this.overlay);
       setTimeout(() => {
         // 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];
+        let item = this.overlay.getElementsByTagName('li')[0];
 
         if (selectedValue && typeof selectedValue === 'string') {
-          item = overlay.getElementsByTagName('li')[selectedValue];
+          item = this.overlay.getElementsByTagName('li')[selectedValue];
         } else if (selectedValue && typeof selectedValue === 'number') {
-          item = overlay.getElementsByTagName('li')[selectedValue - 1];
+          item = this.overlay.getElementsByTagName('li')[selectedValue - 1];
         }
 
         if (item) {
@@ -239,6 +248,17 @@ class HiSelect extends React.PureComponent {
       });
     };
 
+    this.handleKeyDownInput = event => {
+      const key = keycode(event);
+
+      if (key === 'down' || key === 'up') {
+        this.handleClick();
+      } else if (key === 'enter' && this.props.onSubmit) {
+        event.preventDefault();
+        this.props.onSubmit(event);
+      }
+    };
+
     this.handleKeyDown = event => {
       let nextItem;
       const key = keycode(event);
@@ -253,13 +273,9 @@ class HiSelect extends React.PureComponent {
         this.setState({
           open: false
         });
-      } 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);
-      } else if (key === 'enter' && this.props.multiple) {
+      } else if (key === 'space') {
+        // Cancel scroll
         event.preventDefault();
-        this.handleClose();
       }
 
       if (nextItem) {
@@ -267,6 +283,63 @@ class HiSelect extends React.PureComponent {
       }
     };
 
+    this.getItemById = id => {
+      let item;
+
+      if (this.props.hasAll && String(id) === '_all') {
+        return {
+          id: '_all'
+        };
+      }
+
+      for (let i = 0; i < this.props.options.length; i += 1) {
+        const elem = this.props.options[i];
+
+        if (String(elem.id) === String(id)) {
+          item = elem;
+          break;
+        }
+
+        if (elem.children) {
+          for (let j = 0; j < elem.children.length; j += 1) {
+            if (String(elem.children[j].id) === String(id)) {
+              item = elem.children[j];
+              break;
+            }
+          }
+        }
+      }
+
+      return item;
+    };
+
+    this.handleKeyUp = event => {
+      const key = keycode(event);
+
+      if (key === 'esc') {
+        this.setState({
+          open: false
+        });
+      } else if (key === 'space' || key === 'enter' && !this.props.multiple) {
+        event.preventDefault();
+        const item = this.getItemById(event.target.id);
+
+        if (item) {
+          // Select for nested select
+          if (this.props.hiSelectableListProps && this.props.hiSelectableListProps.onSelect) {
+            this.props.hiSelectableListProps.onSelect(null, item);
+          } else {
+            this.handleSelect(null, item);
+          }
+        } else {
+          console.warn(`Can not find item #${event.target.id}`);
+        }
+      } else if (key === 'enter' && this.props.multiple) {
+        event.preventDefault();
+        this.handleClose();
+      }
+    };
+
     this.handleKeyDownSearch = event => {
       const key = keycode(event);
 
@@ -275,6 +348,10 @@ class HiSelect extends React.PureComponent {
       } else if (this.overlay && key === 'esc' || key === 'enter') {
         event.preventDefault();
         this.handleClose();
+      } else if (key === 'tab') {
+        this.setState({
+          open: false
+        });
       }
     };
 
@@ -370,7 +447,8 @@ class HiSelect extends React.PureComponent {
       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);
@@ -466,43 +544,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'
+
+    const 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, _extends({
-      value: searchValue,
-      autoFocus: true,
-      inputRef: this.getInputElement,
-      onKeyDown: this.handleKeyDownSearch,
-      onChange: this.handleSearch,
-      onReset: this.handleSearchReset,
-      placeholder: translations.search,
-      startAdornment: 'search',
-      tabIndex: 0
-    }, hiSearchInputProps)), 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
+      const 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)';
+    }
+
+    const 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 => {
@@ -520,6 +629,7 @@ class HiSelect extends React.PureComponent {
       onClick: this.handleClick,
       onFocus: this.handleFocus,
       onBlur: this.handleBlur,
+      onKeyDown: this.handleKeyDownInput,
       onSubmit: onSubmit,
       onMouseEnter: this.props.onMouseEnter,
       onMouseLeave: this.props.onMouseLeave,
@@ -532,7 +642,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,

package/es/HiSelectNew/HiSelectInput.js

@@ -127,6 +127,7 @@ class HiSelectInput extends React.PureComponent {
 
       if (this.props.onKeyDown) {
         this.props.onKeyDown(event);
+        event.preventDefault();
       } else if (key === 'down' || key === 'up') {
         this.props.onClick();
       } else if (key === 'enter' && this.props.onSubmit) {
@@ -146,8 +147,12 @@ class HiSelectInput extends React.PureComponent {
     };
 
     this.handleClick = event => {
+      // Do not open select if press on resetIcon
       if ((!this.resetIcon || !this.resetIcon.contains(event.target)) && this.props.onClick) {
-        this.props.onClick(event);
+        // Do not open select if press enter on button => submit form
+        if (event.type !== 'keydown' || keycode(event) !== 'enter') {
+          this.props.onClick(event);
+        }
       }
     };
 
@@ -225,6 +230,7 @@ class HiSelectInput extends React.PureComponent {
     }, value || placeholder), React.createElement(ArrowDropDownIcon, {
       className: iconClass
     })) : React.createElement(ButtonBase, {
+      component: "div",
       id: id,
       className: rootClass,
       onClick: this.handleClick,

package/es/HiSelectableList/HiSelectableList.js

@@ -5,8 +5,7 @@ import PropTypes from 'prop-types';
 import List from '@material-ui/core/List';
 import withStyles from '../styles/withStyles';
 import HiSelectableListItem from './HiSelectableListItem';
-import { foldAccents, getNextItemSelectable } from '../utils/helpers';
-import keycode from 'keycode';
+import { foldAccents } from '../utils/helpers';
 export const styles = () => ({
   root: {
     padding: 0
@@ -24,27 +23,6 @@ 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.buildRecursiveListItem = (item, level = 0) => {
       const _this$props = this.props,
             {
@@ -56,9 +34,10 @@ class HiSelectableList extends React.PureComponent {
         icon,
         selectedItemIdList,
         sort,
-        onKeyDown = this.handleKeyDown
+        onKeyDown,
+        onKeyUp
       } = _this$props,
-            others = _objectWithoutProperties(_this$props, ["checkedIcon", "disabled", "disabledItemIdList", "hideCheckbox", "hoverIcon", "icon", "selectedItemIdList", "sort", "onKeyDown"]);
+            others = _objectWithoutProperties(_this$props, ["checkedIcon", "disabled", "disabledItemIdList", "hideCheckbox", "hoverIcon", "icon", "selectedItemIdList", "sort", "onKeyDown", "onKeyUp"]);
 
       if (sort && item.children) {
         item.children.sort(this.compareItem);
@@ -75,6 +54,7 @@ class HiSelectableList extends React.PureComponent {
         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)));