@hipay/hipay-material-ui 2.0.0-beta.60 → 2.0.0-beta.62

package/es/{HiSelectNew → HiSelect}/HiSelectContent.js

@@ -37,7 +37,7 @@ export const styles = theme => ({
     width: '100%'
   })
 });
-export var filterValue = function (item, searchValue) {
+export const filterValue = function (item, searchValue) {
   return searchValue === '' || foldAccents(item.label.toString().toLowerCase()).search(foldAccents(searchValue.toLowerCase())) !== -1;
 };
 /**

package/es/HiSelect/index.js

@@ -1,5 +1,8 @@
 export { default } from './HiSelect';
+export { default as HiNestedSelect } from './HiNestedSelect';
 export { default as HiSelectField } from './HiSelectField';
-export { default as SelectInput } from './SelectInput';
+export { default as HiSelectInput } from './HiSelectInput';
+export { default as HiSelectContent } from './HiSelectContent';
+export { default as HiNestedSelectContent, findFinalItemRecursively, getRecursiveFinalItemIdList } from './HiNestedSelectContent';
 export { default as HiSuggestSelect } from './HiSuggestSelect';
 export { default as HiSuggestSelectField } from './HiSuggestSelectField';

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 { getNextItemSelectable, foldAccents } from '../utils/helpers';
+import keycode from 'keycode';
 export const styles = () => ({
   root: {
     padding: 0
@@ -13,6 +14,8 @@ export const styles = () => ({
 });
 /**
  * Construit une liste d'item sélectionnable (avec checkbox)
+ * - la navigation au clavier est gérée par l'event KeyDown
+ * - le premier focus est géré sur le DidMount
  */
 
 class HiSelectableList extends React.PureComponent {
@@ -23,6 +26,23 @@ 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');
+      }
+
+      if (nextItem) {
+        nextItem.focus();
+      }
+    };
+
     this.buildRecursiveListItem = (item, level = 0) => {
       const _this$props = this.props,
             {
@@ -56,11 +76,16 @@ class HiSelectableList extends React.PureComponent {
         onKeyDown: onKeyDown,
         onKeyUp: onKeyUp,
         selected: selectedItemIdList.includes(item.id) // item props override upper props (disabled, hideCheckbox, icon, level...)
-
+        ,
+        item: item
       }, item)), item.children && item.children.length > 0 && item.children.filter(subItem => !(subItem.displayed === false)).map(subItem => this.buildRecursiveListItem(subItem, level + 1)));
     };
 
     this.compareItem = (a, b) => {
+      if (this.props.comparItemFunc) {
+        return this.props.comparItemFunc(a, b);
+      }
+
       if (a.label === undefined || b.label === undefined) {
         return 0;
       }
@@ -79,6 +104,23 @@ class HiSelectableList extends React.PureComponent {
     };
   }
 
+  componentDidMount() {
+    if (this.props.overlay && this.props.overlay.getElementsByTagName('li')[0]) {
+      let item = this.props.overlay.getElementsByTagName('li')[0];
+      const value = typeof this.props.value === 'object' ? this.props.value[0] : this.props.value;
+
+      if (value) {
+        if (typeof this.props.value[0] === 'string') {
+          item = this.props.overlay.getElementsByTagName('li')[value];
+        } else if (typeof this.props.value[0] === 'number') {
+          item = this.props.overlay.getElementsByTagName('li')[value - 1];
+        }
+      }
+
+      item.focus();
+    }
+  }
+
   render() {
     const {
       classes,
@@ -91,7 +133,11 @@ class HiSelectableList extends React.PureComponent {
     }
 
     return React.createElement(List, {
-      className: classes.root
+      className: classes.root,
+      onKeyDown: this.handleKeyDown,
+      innerRef: el => {
+        this.el = el;
+      }
     }, itemList.filter(item => !(item.displayed === false)) // don't remove if undefined
     .map(item => this.buildRecursiveListItem(item)));
   }
@@ -123,6 +169,11 @@ HiSelectableList.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   classes: PropTypes.object,
 
+  /**
+   * Fonction de comparaison utilisée pour les tris
+   */
+  comparItemFunc: PropTypes.func,
+
   /**
    * Désactive la listes
    */
@@ -161,6 +212,11 @@ HiSelectableList.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   onSelect: PropTypes.func.isRequired,
 
+  /**
+   * Overlay récupéré au niveau de la div précédant le HiSelectInput
+   */
+  overlay: PropTypes.object,
+
   /**
    * Liste des id des éléments sélectionnés
    */
@@ -174,7 +230,12 @@ HiSelectableList.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
    * Liste des éléments à placer en premier, peu import le tri
    */
-  sortAppendList: PropTypes.array
+  sortAppendList: PropTypes.array,
+
+  /**
+   * Value(s) du select
+   */
+  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.array])
 } : {};
 export default withStyles(styles, {
   hiComponent: true,

package/es/HiSelectableList/HiSelectableListItem.js

@@ -12,6 +12,7 @@ import HiLoader from '../HiLoader';
 import withStyles from '../styles/withStyles';
 import { escapeHTML } from '../utils/helpers';
 import pure from 'recompose/pure';
+import keycode from 'keycode';
 const PureListSubheader = pure(ListSubheader);
 const PureListItem = pure(ListItem);
 export const styles = theme => ({
@@ -61,9 +62,6 @@ export const styles = theme => ({
     cursor: 'default',
     opacity: 'inherit'
   },
-  selected: {
-    backgroundColor: theme.palette.action.selected
-  },
   pinned: {
     display: 'inherit',
     marginRight: 8,
@@ -160,6 +158,7 @@ export const styles = theme => ({
 });
 /**
  * Construit un élément de liste sélectionnable (avec checkbox)
+ * - la sélection/déséclection d'un item est géré avec KeyDown
  */
 
 class HiSelectableListItem extends React.PureComponent {
@@ -172,6 +171,18 @@ class HiSelectableListItem extends React.PureComponent {
       });
     };
 
+    this.handleKeyDown = item => event => {
+      const key = keycode(event);
+
+      if (key === 'space' || key === 'enter') {
+        event.preventDefault();
+
+        if (item) {
+          this.props.onSelect(null, item);
+        }
+      }
+    };
+
     this.state = {
       hover: false
     };
@@ -236,8 +247,6 @@ class HiSelectableListItem extends React.PureComponent {
       fallbackImage,
       hideCheckbox,
       onSelect,
-      onKeyDown,
-      onKeyUp,
       indeterminate,
       indeterminateIcon,
       icon,
@@ -253,7 +262,8 @@ class HiSelectableListItem extends React.PureComponent {
       secondaryLabel,
       thin,
       type,
-      color
+      color,
+      item
     } = this.props; // Return simple loader list item
 
     if (type === 'loader') {
@@ -282,7 +292,6 @@ class HiSelectableListItem extends React.PureComponent {
       },
       className: classNames(classes.listItem, classes.listItemHover, {
         [classes.disabled]: disabled,
-        [classes.selected]: selected,
         [classes.thin]: thin,
         [classes.pinned]: pinned,
         [classes.inline]: secondaryInline,
@@ -294,8 +303,7 @@ class HiSelectableListItem extends React.PureComponent {
       onClick: onSelect,
       onMouseEnter: this.setHover(true),
       onMouseLeave: this.setHover(false),
-      onKeyDown,
-      onKeyUp
+      onKeyDown: this.handleKeyDown(item)
     }, {
       style: {
         paddingLeft: `${paddingLeft + level * 32}px`
@@ -305,7 +313,7 @@ class HiSelectableListItem extends React.PureComponent {
         [classes.labelWithoutSecondaryInline]: !secondaryInline || !secondaryLabel && !info
       })
     }, !hideCheckbox && !pinned && React.createElement(HiCheckbox, {
-      tabIndex: onKeyDown ? '-1' : 0,
+      tabIndex: 0,
       classes: {
         root: !secondaryInline ? classes.checkboxWithSecondaryInline : classes.checkbox
       },

package/es/styles/createPalette.js

@@ -30,7 +30,7 @@ export const light = {
     hint: 'rgba(0, 0, 0, 0.38)'
   },
   // The color used to divide different elements.
-  divider: 'rgba(0, 0, 0, 0.12)',
+  divider: '#D9D9DB',
   // The background colors used to style the surfaces.
   // Consistency between these values is important.
   background: {

package/es/utils/helpers.js

@@ -250,7 +250,7 @@ export function getNextItemSelectable(node, direction) {
  */
 
 export function foldAccents(toFold) {
-  return toFold.replace(/([àáâãäå])|([ç])|([èéêë])|([ìíîï])|([ñ])|([òóôõöø])|([ß])|([ùúûü])|([ÿ])|([æ])|([œ])/g, (str, a, c, e, i, n, o, s, u, y, ae, oe) => {
+  return toFold.replace(/([àáâãäå])|([ç])|([èéêë])|([ìíîï])|([ñ])|([òóôõöø])|([ß])|([ùúûü])|([ÿ])|([æ])|([œ])|([+])|([\\])|([\[])|([\]])|([\(])|([\)])|([?])|([*])/g, (str, a, c, e, i, n, o, s, u, y, ae, oe, plus, backSlash, lc, rc, lp, rp, interogation, star) => {
     if (a) return 'a';
     if (c) return 'c';
     if (e) return 'e';
@@ -262,6 +262,14 @@ export function foldAccents(toFold) {
     if (y) return 'y';
     if (ae) return 'ae';
     if (oe) return 'oe';
+    if (plus) return '\\+';
+    if (backSlash) return '\\\\';
+    if (lc) return '\\[';
+    if (rc) return '\\]';
+    if (lp) return '\\(';
+    if (rp) return '\\)';
+    if (interogation) return '\\?';
+    if (star) return '\\*';
     return str;
   });
 }

package/index.es.js

@@ -1,4 +1,4 @@
-/** @license HiPay-Material-UI v2.0.0-beta.60
+/** @license HiPay-Material-UI v2.0.0-beta.62
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/index.js

@@ -1,4 +1,4 @@
-/** @license HiPay-Material-UI v2.0.0-beta.60
+/** @license HiPay-Material-UI v2.0.0-beta.62
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/package.json

@@ -2,7 +2,7 @@
   "name": "@hipay/hipay-material-ui",
   "private": false,
   "author": "HiPay PSYCHE Team",
-  "version": "2.0.0-beta.60",
+  "version": "2.0.0-beta.62",
   "description": "React components that implement Google's Material Design.",
   "keywords": [
     "react",

package/styles/createPalette.js

@@ -48,7 +48,7 @@ var light = {
     hint: 'rgba(0, 0, 0, 0.38)'
   },
   // The color used to divide different elements.
-  divider: 'rgba(0, 0, 0, 0.12)',
+  divider: '#D9D9DB',
   // The background colors used to style the surfaces.
   // Consistency between these values is important.
   background: {