@hipay/hipay-material-ui 2.0.0-beta.59 → 2.0.0-beta.61

package/es/HiForm/HiUploadField.js

@@ -2,43 +2,8 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import React from 'react';
 import PropTypes from 'prop-types';
-import withStyles from '../styles/withStyles';
 import HiFormControl from './HiFormControl';
 import HiUpload from './HiUpload';
-export const styles = theme => ({
-  flexContainer: {
-    display: '  flex',
-    alignItems: 'center'
-  },
-  statusIcon: {
-    height: '80px',
-    width: '80px',
-    marginRight: '8px',
-    padding: '24px',
-    borderRadius: '2px',
-    backgroundColor: theme.palette.local.background2,
-    border: `1px solid ${theme.palette.middle.main}`,
-    color: `${theme.palette.middle.main} !important`,
-    fontSize: '80px'
-  },
-  inputContainer: {
-    flex: '1',
-    width: 'calc(100% - 88px)'
-  },
-  empty: {
-    border: `1px solid ${theme.palette.input.bottomLine}`,
-    color: `${theme.palette.neutral.main} !important`
-  },
-  complete: {
-    border: `1px solid ${theme.palette.positive.main}`,
-    color: `${theme.palette.positive.main} !important`,
-    fontSize: '32px'
-  },
-  error: {
-    border: `1px solid ${theme.palette.negative.main}`,
-    color: `${theme.palette.negative.main} !important`
-  }
-});
 
 class HiUploadField extends React.PureComponent {
   render() {
@@ -48,9 +13,10 @@ class HiUploadField extends React.PureComponent {
       label,
       helperIcon,
       helperText,
-      values
+      values,
+      fullWidth
     } = _this$props,
-          others = _objectWithoutProperties(_this$props, ["className", "label", "helperIcon", "helperText", "values"]);
+          others = _objectWithoutProperties(_this$props, ["className", "label", "helperIcon", "helperText", "values", "fullWidth"]);
 
     let empty = true;
     let error = false;
@@ -72,7 +38,8 @@ class HiUploadField extends React.PureComponent {
       errorText: errorText,
       error: error,
       helperIcon: helperIcon,
-      helperText: helperText
+      helperText: helperText,
+      fullWidth: fullWidth
     }, React.createElement(HiUpload, _extends({
       values: values
     }, others)));
@@ -82,7 +49,9 @@ class HiUploadField extends React.PureComponent {
 
 HiUploadField.defaultProps = {
   helperText: '',
-  helperIcon: false
+  helperIcon: false,
+  seeFile: true,
+  fullWidth: false
 };
 HiUploadField.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
@@ -95,6 +64,11 @@ HiUploadField.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   className: PropTypes.string,
 
+  /**
+   * Si "true", applique l'attribut css correspondant
+   */
+  fullWidth: PropTypes.bool,
+
   /**
    * Si "true", le texte d'aide s'affichera seulement au clic sur l'icône "Information"
    */
@@ -130,12 +104,14 @@ HiUploadField.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   onSeeFile: PropTypes.func,
 
+  /**
+   * set to false to hide the eye button
+   */
+  seeFile: PropTypes.bool,
+
   /**
    * Valeurs des inputs
    */
   values: PropTypes.array
 } : {};
-export default withStyles(styles, {
-  hiComponent: true,
-  name: 'HmuiHiUploadField'
-})(HiUploadField);
+export default HiUploadField;

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/HiSelectNew/HiSelect.js

@@ -209,22 +209,20 @@ class HiSelect extends React.PureComponent {
     };
 
     this.focusOnSelectedItem = selectedValue => {
-      if (this.overlay && this.overlay.getElementsByTagName('li')[0]) {
-        setTimeout(() => {
-          // On initialise au premier élément pour être sûr de ne pas se retrouver avec un focus of undefined
-          let item = this.overlay.getElementsByTagName('li')[0];
-
-          if (selectedValue && typeof selectedValue === 'string') {
-            item = this.overlay.getElementsByTagName('li')[selectedValue];
-          } else if (selectedValue && typeof selectedValue === 'number') {
-            item = this.overlay.getElementsByTagName('li')[selectedValue - 1];
-          }
+      setTimeout(() => {
+        // On initialise au premier élément pour être sûr de ne pas se retrouver avec un focus of undefined
+        let item = this.overlay.getElementsByTagName('li')[0];
+
+        if (selectedValue && typeof selectedValue === 'string') {
+          item = this.overlay.getElementsByTagName('li')[selectedValue];
+        } else if (selectedValue && typeof selectedValue === 'number') {
+          item = this.overlay.getElementsByTagName('li')[selectedValue - 1];
+        }
 
-          if (item) {
-            item.focus();
-          }
-        }, 1);
-      }
+        if (item) {
+          item.focus();
+        }
+      }, 1);
     };
 
     this.handleClickAway = event => {
@@ -457,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);

package/es/HiSelectableList/HiSelectableList.js

@@ -61,6 +61,10 @@ class HiSelectableList extends React.PureComponent {
     };
 
     this.compareItem = (a, b) => {
+      if (this.props.comparItemFunc) {
+        return this.props.comparItemFunc(a, b);
+      }
+
       if (a.label === undefined || b.label === undefined) {
         return 0;
       }
@@ -123,6 +127,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
    */

package/es/HiSelectableList/HiSelectableListItem.js

@@ -34,7 +34,7 @@ export const styles = theme => ({
       display: 'block'
     },
     '&$inline': {
-      maxHeight: 40,
+      minHeight: 40,
       '& $secondaryLabel': {
         display: 'inline-block'
       }
@@ -91,7 +91,7 @@ export const styles = theme => ({
     '& strong': {
       fontWeight: theme.typography.fontWeightMedium
     },
-    display: 'inline-flex'
+    display: 'contents'
   }),
   listItemContentSelected: {},
   label: {
@@ -121,7 +121,6 @@ export const styles = theme => ({
     fontSize: 12,
     textOverflow: 'ellipsis',
     textAlign: 'right',
-    padding: '4px 0px 4px 8px',
     alignSelf: 'center'
   }),
   img: {
@@ -135,7 +134,7 @@ export const styles = theme => ({
     verticalAlign: 'middle'
   },
   labelContent: {
-    display: 'flex',
+    display: '-webkit-flex',
     alignItems: 'center',
     maxWidth: '85%',
     '&$labelWithoutSecondaryInline': {
@@ -153,9 +152,6 @@ export const styles = theme => ({
     },
     '&$infosWithoutSecondaryInline': {
       paddingLeft: 28
-    },
-    '&$infosWithSecondaryInline': {
-      marginTop: -8
     }
   },
   infosInlineWithoutSecondary: {},

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

@@ -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,
@@ -249,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';
@@ -261,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.59
+/** @license HiPay-Material-UI v2.0.0-beta.61
  *
  * 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.59
+/** @license HiPay-Material-UI v2.0.0-beta.61
  *
  * 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

@@ -1,8 +1,7 @@
 {
   "name": "@hipay/hipay-material-ui",
-  "private": false,
   "author": "HiPay PSYCHE Team",
-  "version": "2.0.0-beta.59",
+  "version": "2.0.0-beta.61",
   "description": "React components that implement Google's Material Design.",
   "keywords": [
     "react",
@@ -16,7 +15,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 +49,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",
@@ -75,4 +75,4 @@
   },
   "main": "./index.js",
   "module": "./index.es.js"
-}
+}

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: {