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

package/es/HiForm/HiUploadInput.js

@@ -16,6 +16,7 @@ export const styles = theme => ({
     height: 40,
     display: 'inline-flex',
     justifyContent: 'flex-start',
+    cursor: 'pointer',
     '&$focused, &$dragOver': {
       backgroundColor: theme.palette.global.background1
     },
@@ -82,7 +83,7 @@ export const styles = theme => ({
         transform: 'scaleX(1)'
       },
       '&$error': {
-        borderBottom: `1px solid ${theme.palette.negative.normal}`
+        borderBottom: `1px solid ${theme.palette.negative.main}`
       }
     }
   },
@@ -90,7 +91,8 @@ export const styles = theme => ({
     color: `${theme.palette.action.disabled}`,
     '&:before': {
       display: 'none'
-    }
+    },
+    cursor: 'default'
   },
   focused: {
     backgroundColor: theme.palette.background3
@@ -107,6 +109,7 @@ export const styles = theme => ({
     height: 39,
     display: 'inline-flex',
     width: '100%',
+    cursor: 'pointer',
     '&$empty': {
       opacity: 0.42
     }
@@ -130,7 +133,7 @@ export const styles = theme => ({
     }),
     '&:hover': {
       color: 'inherit',
-      backgroundColor: theme.palette.local.background2
+      background: 'none'
     }
   }
 });
@@ -298,6 +301,10 @@ class HiUploadInput extends React.Component {
       [classes.dragOver]: dragOver,
       [classes.droppable]: droppable
     });
+    const eyeButton = React.createElement(HiIconButton, {
+      className: classes.icon,
+      onClick: this.handleSeeFile
+    }, _ref);
     return React.createElement("div", {
       className: rootClass
     }, React.createElement("label", {
@@ -314,10 +321,7 @@ class HiUploadInput extends React.Component {
       onChange: this.handleChange
     })), value === null || React.createElement("div", {
       className: classes.endAdornment
-    }, React.createElement(HiIconButton, {
-      className: classes.icon,
-      onClick: this.handleSeeFile
-    }, _ref), React.createElement(HiIconButton, {
+    }, this.props.seeFile && eyeButton, React.createElement(HiIconButton, {
       className: classes.icon,
       onClick: this.handleDeleteFile
     }, _ref2)));
@@ -395,6 +399,11 @@ HiUploadInput.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   placeholder: PropTypes.string,
 
+  /**
+   * set to false to hide the eye button
+   */
+  seeFile: PropTypes.bool,
+
   /**
    * The translations of the error messages.
    */

package/es/HiSelect/HiSuggestSelect.js

@@ -144,10 +144,10 @@ class HiSuggestSelect extends React.PureComponent {
         options: [],
         focused: false
       });
-    }
 
-    if (this.props.onBlurInput) {
-      this.props.onBlurInput(event);
+      if (this.props.onBlurInput) {
+        this.props.onBlurInput(event);
+      }
     }
   }
 

package/es/HiSelectNew/HiNestedSelect.js

@@ -45,6 +45,10 @@ function findFinalItemRecursively(itemList, searchId) {
   });
   return foundItem;
 }
+
+export var filterValue = function (item, searchValue) {
+  return searchValue === '' || foldAccents(item.label.toString().toLowerCase()).search(foldAccents(searchValue.toLowerCase())) !== -1;
+};
 /**
  * Build item list by settings item props relative to the nested parent/child situation
  * Reduce the item list to build specified items (displayed, pinned, disabled, selected, indeterminate)
@@ -62,15 +66,14 @@ function findFinalItemRecursively(itemList, searchId) {
  * @returns {*}
  */
 
-
-function buildFilteredItemList(itemList, selectedItemIdList = [], searchValue = '', visibleParent = false, pinnedParent = false, disabledParent = false, nbChildrenAsInfo = false, translations) {
+function buildFilteredItemList(itemList, selectedItemIdList = [], searchValue = '', visibleParent = false, pinnedParent = false, disabledParent = false, nbChildrenAsInfo = false, translations, filterFunc = filterValue) {
   return itemList.reduce(({
     l: memoItemList,
     s: memoSelected,
     u: memoUnselected,
     v: memoVisible
   }, item) => {
-    const itemVisible = searchValue === '' || foldAccents(item.label.toString().toLowerCase()).search(foldAccents(searchValue.toLowerCase())) !== -1; // Parent item
+    const itemVisible = filterFunc(item, searchValue); // Parent item
 
     if (item.children) {
       const {
@@ -78,7 +81,7 @@ function buildFilteredItemList(itemList, selectedItemIdList = [], searchValue =
         s: selected,
         u: unselected,
         v: visible
-      } = buildFilteredItemList(item.children, selectedItemIdList, searchValue, itemVisible, pinnedParent, disabledParent);
+      } = buildFilteredItemList(item.children, selectedItemIdList, searchValue, itemVisible, pinnedParent, disabledParent, nbChildrenAsInfo, translations, filterFunc);
 
       if (nbChildrenAsInfo) {
         item.info = translations.n_children.replace('%s', item.children.length);
@@ -227,7 +230,8 @@ class HiNestedSelect extends React.PureComponent {
         multiple,
         nbChildrenAsInfo,
         pinnedParent,
-        translations
+        translations,
+        filterFunc
       } = this.props; // build item list
 
       const {
@@ -235,7 +239,7 @@ class HiNestedSelect extends React.PureComponent {
         s: allSelected,
         u: allUnselected,
         v: visible
-      } = buildFilteredItemList(options, value, search, false, pinnedParent, disabledParent || !multiple, nbChildrenAsInfo, translations);
+      } = buildFilteredItemList(options, value, search, false, pinnedParent, disabledParent || !multiple, nbChildrenAsInfo, translations, filterFunc);
       const itemList = !visible ? [...(loading ? [{
         id: '_loading',
         type: 'loader',
@@ -367,7 +371,8 @@ HiNestedSelect.defaultProps = {
     one_item_selected: '%s item selected',
     n_children: '%s',
     one_child: '%s item'
-  }
+  },
+  filterFunc: filterValue
 };
 HiNestedSelect.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
@@ -385,6 +390,11 @@ HiNestedSelect.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   displayAsChip: PropTypes.bool,
 
+  /*
+   * Fonction de filtrage custom
+   */
+  filterFunc: PropTypes.func,
+
   /**
    * Affiche l'élément 'All'
    */

package/es/HiSelectNew/HiNestedSelectContent.js

@@ -42,6 +42,9 @@ export function findFinalItemRecursively(itemList, searchId) {
   });
   return foundItem;
 }
+export var filterValue = function (item, searchValue) {
+  return searchValue === '' || foldAccents(item.label.toString().toLowerCase()).search(foldAccents(searchValue.toLowerCase())) !== -1;
+};
 /**
  * Build item list by settings item props relative to the nested parent/child situation
  * Reduce the item list to build specified items (displayed, pinned, disabled, selected, indeterminate)
@@ -59,14 +62,14 @@ export function findFinalItemRecursively(itemList, searchId) {
  * @returns {*}
  */
 
-function buildFilteredItemList(itemList, selectedItemIdList = [], searchValue = '', visibleParent = false, pinnedParent = false, disabledParent = false, nbChildrenAsInfo = false, translations) {
+function buildFilteredItemList(itemList, selectedItemIdList = [], searchValue = '', visibleParent = false, pinnedParent = false, disabledParent = false, nbChildrenAsInfo = false, translations, filterFunc = filterValue) {
   return itemList.reduce(({
     l: memoItemList,
     s: memoSelected,
     u: memoUnselected,
     v: memoVisible
   }, item) => {
-    const itemVisible = searchValue === '' || foldAccents(item.label.toString().toLowerCase()).search(foldAccents(searchValue.toLowerCase())) !== -1; // Parent item
+    const itemVisible = filterFunc(item, searchValue); // Parent item
 
     if (item.children) {
       const {
@@ -74,7 +77,7 @@ function buildFilteredItemList(itemList, selectedItemIdList = [], searchValue =
         s: selected,
         u: unselected,
         v: visible
-      } = buildFilteredItemList(item.children, selectedItemIdList, searchValue, itemVisible, pinnedParent, disabledParent);
+      } = buildFilteredItemList(item.children, selectedItemIdList, searchValue, itemVisible, pinnedParent, disabledParent, nbChildrenAsInfo, translations, filterFunc);
 
       if (nbChildrenAsInfo) {
         item.info = translations.n_children.replace('%s', item.children.length);
@@ -181,7 +184,8 @@ class HiNestedSelectContent extends React.PureComponent {
         multiple,
         nbChildrenAsInfo,
         pinnedParent,
-        translations
+        translations,
+        filterFunc
       } = this.props; // build item list
 
       const {
@@ -189,7 +193,7 @@ class HiNestedSelectContent extends React.PureComponent {
         s: allSelected,
         u: allUnselected,
         v: visible
-      } = buildFilteredItemList(options, value, search, false, pinnedParent, disabledParent || !multiple, nbChildrenAsInfo, translations);
+      } = buildFilteredItemList(options, value, search, false, pinnedParent, disabledParent || !multiple, nbChildrenAsInfo, translations, filterFunc);
       const itemList = !visible ? [...(loading ? [{
         id: '_loading',
         type: 'loader',
@@ -272,7 +276,8 @@ HiNestedSelectContent.defaultProps = {
     search: 'Search',
     n_children: '%s',
     one_child: '%s item'
-  }
+  },
+  filterFunc: filterValue
 };
 HiNestedSelectContent.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
@@ -285,6 +290,11 @@ HiNestedSelectContent.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   disabledParent: PropTypes.bool,
 
+  /*
+   * Fonction de filtrage custom
+   */
+  filterFunc: PropTypes.func,
+
   /**
    * Affiche l'élément 'All'
    */

package/es/HiSelectNew/HiSelect.js

@@ -68,6 +68,10 @@ export const styles = theme => ({
     borderTop: `1px solid ${theme.palette.input.bottomLine}`
   }
 });
+
+function filterValue(item, search) {
+  return search === '' || foldAccents(item.label.toString().toLowerCase()).search(foldAccents(search.toLowerCase())) !== -1;
+}
 /**
  *
  * Utilisé pour tous types de selects dans les formulaires.
@@ -83,6 +87,7 @@ export const styles = theme => ({
  * - HiSelectableList : affiche la liste des suggestions selon le type des éléments
  */
 
+
 class HiSelect extends React.PureComponent {
   constructor(props) {
     super(props);
@@ -97,7 +102,7 @@ class HiSelect extends React.PureComponent {
         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({
+      ...(search !== '' ? [...options.filter(item => this.props.filterFunc(item, search))] : [...(this.props.hasAll ? [_objectSpread({
         id: '_all',
         label: this.props.translations.all
       }, this.props.iconAll && {
@@ -450,11 +455,12 @@ class HiSelect extends React.PureComponent {
       suggestions: props.options,
       openDown: true
     };
+    this.handleBlur = this.handleBlur.bind(this);
     this.handleClick = this.handleClick.bind(this);
     this.handleClose = this.handleClose.bind(this);
     this.handleClickAway = this.handleClickAway.bind(this);
     this.handleFocus = this.handleFocus.bind(this);
-    this.handleBlur = this.handleBlur.bind(this);
+    this.handleKeyDownInput = this.handleKeyDownInput.bind(this);
     this.handleSearch = this.handleSearch.bind(this);
     this.handleSearchReset = this.handleSearchReset.bind(this);
     this.handleSelect = this.handleSelect.bind(this);
@@ -676,7 +682,8 @@ HiSelect.defaultProps = {
     n_children: '%s items',
     one_child: '%s item'
   },
-  type: 'text'
+  type: 'text',
+  filterFunc: filterValue
 };
 HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
   align: PropTypes.oneOf(['left', 'right']),
@@ -711,6 +718,11 @@ HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   fallbackImage: PropTypes.string,
 
+  /*
+   * Fonction de filtrage custom
+   */
+  filterFunc: PropTypes.func,
+
   /**
    * Affiche l'élément 'All'
    */

package/es/HiSelectNew/HiSelectContent.js

@@ -37,6 +37,9 @@ export const styles = theme => ({
     width: '100%'
   })
 });
+export var filterValue = function (item, searchValue) {
+  return searchValue === '' || foldAccents(item.label.toString().toLowerCase()).search(foldAccents(searchValue.toLowerCase())) !== -1;
+};
 /**
  *
  * Utilisé pour tous types de selects dans les formulaires.
@@ -197,7 +200,7 @@ class HiSelectContent extends React.PureComponent {
         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({
+      ...(search !== '' ? [...options.filter(item => item.label && this.props.filterFunc(item, search))] : [...(this.props.hasAll ? [_objectSpread({
         id: '_all',
         label: this.props.translations.all
       }, this.props.iconAll && {
@@ -331,7 +334,8 @@ HiSelectContent.defaultProps = {
     n_children: '%s items',
     one_child: '%s item'
   },
-  type: 'text'
+  type: 'text',
+  filterFunc: filterValue
 };
 HiSelectContent.propTypes = process.env.NODE_ENV !== "production" ? {
   autoHeight: PropTypes.bool,
@@ -356,6 +360,11 @@ HiSelectContent.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   fallbackImage: PropTypes.string,
 
+  /*
+   * Fonction de filtrage custom
+   */
+  filterFunc: PropTypes.func,
+
   /**
    * Affiche l'élément 'All'
    */

package/es/HiSelectNew/HiSelectInput.js

@@ -127,7 +127,6 @@ 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) {
@@ -167,9 +166,11 @@ 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.ref = el => {

package/es/HiSelectableList/HiSelectableListItem.js

@@ -34,7 +34,7 @@ export const styles = theme => ({
       display: 'block'
     },
     '&$inline': {
-      maxHeight: 40,
+      minHeight: 40,
       '& $secondaryLabel': {
         display: 'inline-block'
       }
@@ -85,12 +85,13 @@ export const styles = theme => ({
     minWidth: '50%',
     padding: '5px 0',
     '&$listItemContentSelected': {
-      marginBottom: -3,
+      marginBottom: 1,
       marginLeft: -4
     },
     '& strong': {
       fontWeight: theme.typography.fontWeightMedium
-    }
+    },
+    display: 'contents'
   }),
   listItemContentSelected: {},
   label: {
@@ -120,7 +121,6 @@ export const styles = theme => ({
     fontSize: 12,
     textOverflow: 'ellipsis',
     textAlign: 'right',
-    padding: '4px 0px 4px 8px',
     alignSelf: 'center'
   }),
   img: {
@@ -134,9 +134,9 @@ export const styles = theme => ({
     verticalAlign: 'middle'
   },
   labelContent: {
-    display: 'flex',
+    display: '-webkit-flex',
     alignItems: 'center',
-    maxWidth: '70%',
+    maxWidth: '85%',
     '&$labelWithoutSecondaryInline': {
       maxWidth: '100%'
     }
@@ -152,9 +152,6 @@ export const styles = theme => ({
     },
     '&$infosWithoutSecondaryInline': {
       paddingLeft: 28
-    },
-    '&$infosWithSecondaryInline': {
-      marginTop: -8
     }
   },
   infosInlineWithoutSecondary: {},
@@ -225,7 +222,8 @@ class HiSelectableListItem extends React.PureComponent {
     }
 
     return React.createElement("div", {
-      className: classes.label
+      className: classes.label,
+      title: label
     }, label);
   }
 

package/es/utils/helpers.js

@@ -121,7 +121,7 @@ export function formatNumber(number, size = 'l', locale = 'en-EN', precision) {
       break;
   }
 
-  const effectivePrecision = precision || (size === 'l' ? 2 : 0); // To locale
+  const effectivePrecision = Number.isInteger(precision) ? precision : size === 'l' ? 2 : 0; // To locale
 
   const options = {
     minimumFractionDigits: effectivePrecision,
@@ -147,7 +147,7 @@ export function formatNumber(number, size = 'l', locale = 'en-EN', precision) {
  * @param currency  - ISO 4217
  */
 
-export function formatCurrencyAmount(amount, size = 'l', locale = 'en-EN', currency = 'EUR') {
+export function formatCurrencyAmount(amount, size = 'l', locale = 'en-EN', currency = 'EUR', precision = null) {
   let value = amount;
   let unit = ''; // Round number
 
@@ -172,12 +172,13 @@ export function formatCurrencyAmount(amount, size = 'l', locale = 'en-EN', curre
     default:
       value = Math.round(amount * 100) / 100;
       break;
-  } // To locale
+  }
 
+  const effectivePrecision = Number.isInteger(precision) ? precision : size === 'l' ? 2 : 0; // To locale
 
   const options = {
-    minimumFractionDigits: size === 'l' ? 2 : 0,
-    maximumFractionDigits: size === 'l' ? 2 : 0,
+    minimumFractionDigits: effectivePrecision,
+    maximumFractionDigits: effectivePrecision,
     useGrouping: true,
     style: 'currency',
     currency,

package/index.es.js

@@ -1,4 +1,4 @@
-/** @license HiPay-Material-UI v2.0.0-beta.58
+/** @license HiPay-Material-UI v2.0.0-beta.60
  *
  * 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.58
+/** @license HiPay-Material-UI v2.0.0-beta.60
  *
  * 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.58",
+  "version": "2.0.0-beta.60",
   "description": "React components that implement Google's Material Design.",
   "keywords": [
     "react",
@@ -16,7 +16,7 @@
     "type": "git",
     "url": "https://gitlab.hipay.org/backend/hipay-material-ui.git"
   },
-  "license": "MIT",
+  "license": "UNLICENSED",
   "bugs": {
     "url": "https://gitlab.hipay.org/backend/hipay-material-ui/issues"
   },
@@ -50,6 +50,7 @@
     "leaflet": "^1.3.4",
     "mdi-material-ui": "^5.4.0",
     "moment": "^2.22.2",
+    "moment-timezone": "^0.5.23",
     "normalize-scroll-left": "^0.1.2",
     "popper.js": "^1.14.1",
     "prop-types": "^15.6.0",