@hipay/hipay-material-ui 2.0.0-beta.71 → 2.0.0-beta.73

package/HiCell/CellIcon.js

@@ -40,6 +40,10 @@ var styles = {
   wrapper: {
     maxWidth: '100%',
     display: 'inline-flex'
+  },
+  flexContent: {
+    display: 'flex',
+    justifyContent: 'flex-end'
   }
 };
 /**
@@ -63,6 +67,7 @@ function (_React$PureComponent) {
     key: "render",
     value: function render() {
       var _this$props = this.props,
+          align = _this$props.align,
           classes = _this$props.classes,
           color = _this$props.color,
           icon = _this$props.icon,
@@ -73,7 +78,7 @@ function (_React$PureComponent) {
 
       if (onClick) {
         return _react.default.createElement("div", {
-          className: classes.wrapper,
+          className: align === 'right' ? classes.flexContent : classes.wrapper,
           title: label
         }, _react.default.createElement(_HiIconButton.default, {
           color: 'inherit',
@@ -86,14 +91,15 @@ function (_React$PureComponent) {
           onClick: onClick
         }, _react.default.createElement(_HiIcon.default, {
           className: classes.icon,
-          icon: icon
+          icon: icon,
+          color: color
         }), view !== 's' && label && _react.default.createElement("span", {
           className: classes.label
         }, label)));
       }
 
       return _react.default.createElement("div", {
-        className: classes.wrapper,
+        className: align === 'right' ? classes.flexContent : classes.wrapper,
         title: label
       }, _react.default.createElement(_HiIcon.default, {
         color: 'inherit',
@@ -116,6 +122,11 @@ CellIcon.defaultProps = {
   color: 'neutral'
 };
 CellIcon.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Alignement de l'icône dans sa cellule
+   */
+  align: _propTypes.default.oneOf(['right']),
+
   /**
    * Useful to extend the style applied to components.
    */

package/HiForm/HiFormControl.js

@@ -91,7 +91,7 @@ var styles = function styles(theme) {
       verticalAlign: 'middle',
       borderRadius: 2,
       position: 'relative',
-      marginBottom: 8,
+      marginBottom: 22,
       fontWeight: theme.typography.fontWeightRegular
     }),
     arrowDown: {
@@ -106,7 +106,7 @@ var styles = function styles(theme) {
         left: 8
       },
       '&$arrowFullWidth': {
-        right: 13
+        right: 12
       }
     },
     arrowNotFullWidth: {},

package/HiForm/HiUploadField.js

@@ -60,7 +60,7 @@ function (_React$PureComponent) {
         if (value !== undefined) {
           empty = value.value !== null && !value.error ? false : empty;
           error = value.error || error;
-          errorText = errorText || value.errorMessage;
+          errorText += "".concat(value.errorMessage);
         }
       }
 

package/HiMap/HiMap.js

@@ -31,6 +31,10 @@ var _HiIcon = _interopRequireDefault(require("../HiIcon"));
 
 var _HiLoader = _interopRequireDefault(require("../HiLoader"));
 
+var _leaflet = _interopRequireDefault(require("leaflet"));
+
+var _reactLeaflet = require("react-leaflet");
+
 var apiUrl = 'https://nominatim.openstreetmap.org/search?q='; // The original CSS can be found here : https://unpkg.com/leaflet@1.3.1/dist/leaflet.css
 
 var styles = function styles(theme) {
@@ -119,12 +123,8 @@ var styles = function styles(theme) {
 };
 
 exports.styles = styles;
-var L;
-var Map;
-var TileLayer;
-var Marker;
 
-var _ref = _react.default.createElement(TileLayer, {
+var _ref = _react.default.createElement(_reactLeaflet.TileLayer, {
   url: "http://{s}.tile.openstreetmap.se/hydda/full/{z}/{x}/{y}.png"
 });
 
@@ -163,13 +163,6 @@ function (_React$PureComponent) {
     value: function componentDidMount() {
       this.mounted = true;
       this.findCoords();
-      /* eslint-disable */
-
-      L = require('leaflet');
-      Map = require('react-leaflet').Map;
-      Marker = require('react-leaflet').Marker;
-      TileLayer = require('react-leaflet').TileLayer;
-      /* eslint-enable */
     }
   }, {
     key: "componentWillUnmount",
@@ -255,18 +248,18 @@ function (_React$PureComponent) {
       var myIcon;
       if (notFound) element = translations.notFound;
 
-      if (loaded) {
-        myIcon = L.divIcon({
+      if (loaded && _leaflet.default && _reactLeaflet.Map) {
+        myIcon = _leaflet.default.divIcon({
           html: '<svg x="0px" y="0px" viewBox="0 0 365 560" enable-background="new 0 0 365 560" xml:space="preserve">\n' + '<path class="map_marker" ' + 'd="M182.9,551.7c0,0.1,0.2,0.3,0.2,0.3S358.3,283,358.3,194.6c0-130.1-88.8-186.7-175.4-186.9 ' + 'C96.3,7.9,7.5,64.5,7.5,194.6c0,88.4,175.3,357.4,175.3,357.4S182.9,551.7,182.9,551.7z' + ' M122.2,187.2c0-33.6,27.2-60.8,60.8-60.8 ' + 'c33.6,0,60.8,27.2,60.8,60.8S216.5,248,182.9,248C149.4,248,122.2,220.8,122.2,187.2z"/>\n' + '</svg>',
           iconSize: [24, 36],
           iconAnchor: [11, 36]
         });
-        element = _react.default.createElement(Map, {
+        element = _react.default.createElement(_reactLeaflet.Map, {
           zoom: zoom,
           center: position,
           className: classes.map,
           onViewportChange: this.handleScrollZoom
-        }, _ref, _react.default.createElement(Marker, {
+        }, _ref, _react.default.createElement(_reactLeaflet.Marker, {
           position: position,
           icon: myIcon
         }), _react.default.createElement("div", {

package/HiSelect/HiSelect.js

@@ -270,8 +270,10 @@ function (_React$PureComponent) {
         if (_this.props.onClick) _this.props.onClick(); // Gestion du focus
 
         if (!_this.props.searchable) {
-          // Sinon focus sur l'élément sélectionné
-          _this.focusOnSelectedItem(_this.props.value);
+          setTimeout(function () {
+            // Sinon focus sur l'élément sélectionné
+            _this.focusOnSelectedItem(_this.props.value);
+          }, 1);
         } else {
           if (_this.searchField) {
             setTimeout(function () {
@@ -285,17 +287,19 @@ function (_React$PureComponent) {
     _this.focusOnSelectedItem = function (selectedValue) {
       if (_this.overlay && _this.overlay.getElementsByTagName('li')[0]) {
         setTimeout(function () {
-          // On initialise au premier élément pour être sûr de ne pas se retrouver avec un focus of undefined
-          var 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 (_this.overlay) {
+            // On initialise au premier élément pour être sûr de ne pas se retrouver avec un focus of undefined
+            var 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();
+            if (item) {
+              item.focus();
+            }
           }
         }, 1);
       }

package/HiTable/HiCellBuilder.js

@@ -147,6 +147,7 @@ function (_React$PureComponent) {
 
             case cst.TYPE_ICON:
               return _react.default.createElement(_CellIcon.default, {
+                align: cell.align,
                 color: datacell.color,
                 icon: datacell.icon,
                 label: datacell.label,

package/HiTable/HiTableHeader.js

@@ -45,7 +45,10 @@ var styles = function styles(theme) {
     cell: {
       border: 'none',
       paddingRight: '13px',
-      paddingLeft: '13px'
+      paddingLeft: '13px',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap'
     },
     icon: {
       color: '#00ADE9'
@@ -101,6 +104,7 @@ function (_React$PureComponent) {
         }
       }, Object.keys(columns).map(function (key) {
         var _columns$key = columns[key],
+            align = _columns$key.align,
             colId = _columns$key.colId,
             type = _columns$key.type,
             label = _columns$key.label,
@@ -112,7 +116,7 @@ function (_React$PureComponent) {
           key: colId,
           className: classes.cell,
           sortDirection: orderBy === colId ? order : false,
-          numeric: cst.ALIGN_RIGHT_TYPES.includes(type),
+          numeric: cst.ALIGN_RIGHT_TYPES.includes(type) || align === 'right',
           title: headerTooltip
         }, sortable ? _react.default.createElement(_TableSortLabel.default, {
           active: orderBy === colId,

package/README.md

@@ -110,7 +110,7 @@ git flow init
 - Pour activer ESLint sur PHPStorm : File -> Settings -> Languages & Frameworks -> Code Qaulity Tools -> ESLint -> Enable
 
 #### Pour rajouter de la documentation dans les démos
-[Lire ce guide](https://github.com/callemall/material-ui/blob/v1-beta/CONTRIBUTING.md)
+[Lire ce guide](https://github.com/mui-org/material-ui/blob/v3.0.1/CONTRIBUTING.md)
 
 #### Pour rajouter des composants dans la liste "API"
 Il faut les rajouter tout en haut du markdown de la page dans la liste des "components:"

package/es/HiCell/CellIcon.js

@@ -16,6 +16,10 @@ export const styles = {
   wrapper: {
     maxWidth: '100%',
     display: 'inline-flex'
+  },
+  flexContent: {
+    display: 'flex',
+    justifyContent: 'flex-end'
   }
 };
 /**
@@ -26,6 +30,7 @@ export const styles = {
 class CellIcon extends React.PureComponent {
   render() {
     const {
+      align,
       classes,
       color,
       icon,
@@ -37,7 +42,7 @@ class CellIcon extends React.PureComponent {
 
     if (onClick) {
       return React.createElement("div", {
-        className: classes.wrapper,
+        className: align === 'right' ? classes.flexContent : classes.wrapper,
         title: label
       }, React.createElement(HiIconButton, {
         color: 'inherit',
@@ -50,14 +55,15 @@ class CellIcon extends React.PureComponent {
         onClick: onClick
       }, React.createElement(HiIcon, {
         className: classes.icon,
-        icon: icon
+        icon: icon,
+        color: color
       }), view !== 's' && label && React.createElement("span", {
         className: classes.label
       }, label)));
     }
 
     return React.createElement("div", {
-      className: classes.wrapper,
+      className: align === 'right' ? classes.flexContent : classes.wrapper,
       title: label
     }, React.createElement(HiIcon, {
       color: 'inherit',
@@ -79,6 +85,11 @@ CellIcon.defaultProps = {
   color: 'neutral'
 };
 CellIcon.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Alignement de l'icône dans sa cellule
+   */
+  align: PropTypes.oneOf(['right']),
+
   /**
    * Useful to extend the style applied to components.
    */

package/es/HiForm/HiFormControl.js

@@ -54,7 +54,7 @@ export const styles = theme => ({
     verticalAlign: 'middle',
     borderRadius: 2,
     position: 'relative',
-    marginBottom: 8,
+    marginBottom: 22,
     fontWeight: theme.typography.fontWeightRegular
   }),
   arrowDown: {
@@ -69,7 +69,7 @@ export const styles = theme => ({
       left: 8
     },
     '&$arrowFullWidth': {
-      right: 13
+      right: 12
     }
   },
   arrowNotFullWidth: {},

package/es/HiForm/HiUploadField.js

@@ -28,7 +28,7 @@ class HiUploadField extends React.PureComponent {
       if (value !== undefined) {
         empty = value.value !== null && !value.error ? false : empty;
         error = value.error || error;
-        errorText = errorText || value.errorMessage;
+        errorText += `${value.errorMessage}`;
       }
     }
 

package/es/HiMap/HiMap.js

@@ -4,6 +4,8 @@ import { withStyles } from '../styles';
 import HiButton from '../HiButton';
 import HiIcon from '../HiIcon';
 import HiLoader from '../HiLoader';
+import L from 'leaflet';
+import { Map, TileLayer, Marker } from 'react-leaflet';
 const apiUrl = 'https://nominatim.openstreetmap.org/search?q='; // The original CSS can be found here : https://unpkg.com/leaflet@1.3.1/dist/leaflet.css
 
 export const styles = theme => ({
@@ -88,10 +90,6 @@ export const styles = theme => ({
     }
   }
 });
-let L;
-let Map;
-let TileLayer;
-let Marker;
 
 var _ref = React.createElement(TileLayer, {
   url: "http://{s}.tile.openstreetmap.se/hydda/full/{z}/{x}/{y}.png"
@@ -122,13 +120,6 @@ class HiMap extends React.PureComponent {
   componentDidMount() {
     this.mounted = true;
     this.findCoords();
-    /* eslint-disable */
-
-    L = require('leaflet');
-    Map = require('react-leaflet').Map;
-    Marker = require('react-leaflet').Marker;
-    TileLayer = require('react-leaflet').TileLayer;
-    /* eslint-enable */
   }
 
   componentWillUnmount() {
@@ -204,7 +195,7 @@ class HiMap extends React.PureComponent {
     let myIcon;
     if (notFound) element = translations.notFound;
 
-    if (loaded) {
+    if (loaded && L && Map) {
       myIcon = L.divIcon({
         html: '<svg x="0px" y="0px" viewBox="0 0 365 560" enable-background="new 0 0 365 560" xml:space="preserve">\n' + '<path class="map_marker" ' + 'd="M182.9,551.7c0,0.1,0.2,0.3,0.2,0.3S358.3,283,358.3,194.6c0-130.1-88.8-186.7-175.4-186.9 ' + 'C96.3,7.9,7.5,64.5,7.5,194.6c0,88.4,175.3,357.4,175.3,357.4S182.9,551.7,182.9,551.7z' + ' M122.2,187.2c0-33.6,27.2-60.8,60.8-60.8 ' + 'c33.6,0,60.8,27.2,60.8,60.8S216.5,248,182.9,248C149.4,248,122.2,220.8,122.2,187.2z"/>\n' + '</svg>',
         iconSize: [24, 36],

package/es/HiSelect/HiSelect.js

@@ -208,8 +208,10 @@ class HiSelect extends React.PureComponent {
         if (this.props.onClick) this.props.onClick(); // Gestion du focus
 
         if (!this.props.searchable) {
-          // Sinon focus sur l'élément sélectionné
-          this.focusOnSelectedItem(this.props.value);
+          setTimeout(() => {
+            // Sinon focus sur l'élément sélectionné
+            this.focusOnSelectedItem(this.props.value);
+          }, 1);
         } else {
           if (this.searchField) {
             setTimeout(() => {
@@ -223,17 +225,19 @@ 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];
-          }
+          if (this.overlay) {
+            // 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();
+            if (item) {
+              item.focus();
+            }
           }
         }, 1);
       }

package/es/HiTable/HiCellBuilder.js

@@ -97,6 +97,7 @@ class HiCellBuilder extends React.PureComponent {
 
             case cst.TYPE_ICON:
               return React.createElement(CellIcon, {
+                align: cell.align,
                 color: datacell.color,
                 icon: datacell.icon,
                 label: datacell.label,

package/es/HiTable/HiTableHeader.js

@@ -16,7 +16,10 @@ const styles = theme => ({
   cell: {
     border: 'none',
     paddingRight: '13px',
-    paddingLeft: '13px'
+    paddingLeft: '13px',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap'
   },
   icon: {
     color: '#00ADE9'
@@ -50,6 +53,7 @@ class HiTableHeader extends React.PureComponent {
       }
     }, Object.keys(columns).map(key => {
       const {
+        align,
         colId,
         type,
         label,
@@ -62,7 +66,7 @@ class HiTableHeader extends React.PureComponent {
         key: colId,
         className: classes.cell,
         sortDirection: orderBy === colId ? order : false,
-        numeric: cst.ALIGN_RIGHT_TYPES.includes(type),
+        numeric: cst.ALIGN_RIGHT_TYPES.includes(type) || align === 'right',
         title: headerTooltip
       }, sortable ? React.createElement(TableSortLabel, {
         active: orderBy === colId,

package/es/hi-svg-icons/HiDownload.js

@@ -0,0 +1,13 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+
+var _ref = React.createElement("path", {
+  d: "M250 0C111.94 0 0 111.94 0 250s111.92 250 250 250 250-111.92 250-250S388.06 0 250 0zm-44.18 210.14V114.8h88.37v95.34h58.68L250 321.14l-102.87-111zM352.87 385.2H147.13v-32h205.74z"
+});
+
+const HiDownload = props => React.createElement("svg", _extends({
+  "data-name": "Calque 1",
+  viewBox: "0 0 500 500"
+}, props), _ref);
+
+export default HiDownload;

package/es/hi-svg-icons/index.js

@@ -14,4 +14,5 @@ export { default as HiTransaction } from './HiTransaction';
 export { default as HiUser } from './HiUser';
 export { default as HiWidget } from './HiWidget';
 export { default as HiActivity } from './HiActivity';
-export { default as HiPermission } from './HiPermission';
+export { default as HiPermission } from './HiPermission';
+export { default as HiDownload } from './HiDownload';

package/hi-svg-icons/HiDownload.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ref = _react.default.createElement("path", {
+  d: "M250 0C111.94 0 0 111.94 0 250s111.92 250 250 250 250-111.92 250-250S388.06 0 250 0zm-44.18 210.14V114.8h88.37v95.34h58.68L250 321.14l-102.87-111zM352.87 385.2H147.13v-32h205.74z"
+});
+
+var HiDownload = function HiDownload(props) {
+  return _react.default.createElement("svg", (0, _extends2.default)({
+    "data-name": "Calque 1",
+    viewBox: "0 0 500 500"
+  }, props), _ref);
+};
+
+var _default = HiDownload;
+exports.default = _default;

package/hi-svg-icons/index.js

@@ -107,6 +107,12 @@ Object.defineProperty(exports, "HiPermission", {
     return _HiPermission.default;
   }
 });
+Object.defineProperty(exports, "HiDownload", {
+  enumerable: true,
+  get: function get() {
+    return _HiDownload.default;
+  }
+});
 
 var _HiAccount = _interopRequireDefault(require("./HiAccount"));
 
@@ -140,4 +146,6 @@ var _HiWidget = _interopRequireDefault(require("./HiWidget"));
 
 var _HiActivity = _interopRequireDefault(require("./HiActivity"));
 
-var _HiPermission = _interopRequireDefault(require("./HiPermission"));
+var _HiPermission = _interopRequireDefault(require("./HiPermission"));
+
+var _HiDownload = _interopRequireDefault(require("./HiDownload"));

package/index.es.js

@@ -1,4 +1,4 @@
-/** @license HiPay-Material-UI v2.0.0-beta.71
+/** @license HiPay-Material-UI v2.0.0-beta.73
  *
  * 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.71
+/** @license HiPay-Material-UI v2.0.0-beta.73
  *
  * 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.71",
+  "version": "2.0.0-beta.73",
   "description": "React components that implement Google's Material Design.",
   "keywords": [
     "react",
@@ -47,7 +47,7 @@
     "jss-props-sort": "^6.0.0",
     "jss-vendor-prefixer": "^8.0.1",
     "keycode": "^2.1.9",
-    "leaflet": "^1.3.4",
+    "leaflet": "^1.4.0",
     "mdi-material-ui": "^5.4.0",
     "moment": "^2.22.2",
     "moment-timezone": "^0.5.23",
@@ -59,7 +59,7 @@
     "react-event-listener": "^0.6.2",
     "react-jss": "^8.1.0",
     "react-lazyload": "^2.5.0",
-    "react-leaflet": "^2.1.0",
+    "react-leaflet": "^2.2.1",
     "react-pdf": "^3.0.5",
     "react-spinners": "^0.4.5",
     "react-transition-group": "^2.2.1",