@hipay/hipay-material-ui 1.0.0-beta.29 → 1.0.0-beta.4

package/HiTable/BodyCells/CellIcon.js

@@ -5,10 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.styles = undefined;
 
-var _stringify = require('babel-runtime/core-js/json/stringify');
-
-var _stringify2 = _interopRequireDefault(_stringify);
-
 var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
 
 var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
@@ -37,6 +33,10 @@ var _propTypes = require('prop-types');
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
+var _Tooltip = require('../../Tooltip');
+
+var _Tooltip2 = _interopRequireDefault(_Tooltip);
+
 var _withStyles = require('../../styles/withStyles');
 
 var _withStyles2 = _interopRequireDefault(_withStyles);
@@ -53,23 +53,20 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var styles = exports.styles = {
-    icon: {
-        float: 'left'
-    },
-    label: {
-        margin: '4px 0',
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis'
-    },
-    wrapper: {
-        maxWidth: '100%',
-        display: 'inline-flex'
-    },
-    nowrap: {
-        whiteSpace: 'nowrap'
-    }
+var styles = exports.styles = function styles(theme) {
+    return {
+        icon: {
+            float: 'left'
+        },
+        label: {
+            margin: 5
+        },
+        wrapper: {
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis'
+        }
+    };
 };
 
 /**
@@ -77,8 +74,8 @@ var styles = exports.styles = {
  * En vue small (s) elle affiche uniquement l'icône avec une largeur fixe.
  */
 
-var CellIcon = function (_React$Component) {
-    (0, _inherits3.default)(CellIcon, _React$Component);
+var CellIcon = function (_React$PureComponent) {
+    (0, _inherits3.default)(CellIcon, _React$PureComponent);
 
     function CellIcon() {
         (0, _classCallCheck3.default)(this, CellIcon);
@@ -86,42 +83,49 @@ var CellIcon = function (_React$Component) {
     }
 
     (0, _createClass3.default)(CellIcon, [{
-        key: 'shouldComponentUpdate',
-        value: function shouldComponentUpdate(nextProps, nextState) {
-            return (0, _stringify2.default)(this.props) !== (0, _stringify2.default)(nextProps) || (0, _stringify2.default)(this.state) !== (0, _stringify2.default)(nextState);
-        }
-    }, {
         key: 'render',
         value: function render() {
             var _props = this.props,
                 classes = _props.classes,
                 icon = _props.icon,
                 value = _props.value,
-                view = _props.view,
-                color = _props.color;
+                view = _props.view;
 
 
-            var iconElement = icon !== '' ? _react2.default.createElement(_HiIconBuilder2.default, { color: color, className: classes.icon, icon: icon, width: 40, height: 24 }) : '';
+            var iconElement = _react2.default.createElement(_HiIconBuilder2.default, { className: classes.icon, icon: icon, size: 18 });
 
-            return _react2.default.createElement(
+            var tooltipContent = _react2.default.createElement(
                 'div',
-                { className: classes.wrapper },
+                null,
                 iconElement,
-                view !== cst.VIEWS.SMALL && typeof value !== 'undefined' && _react2.default.createElement(
+                _react2.default.createElement(
                     'span',
-                    { className: classes.label },
+                    null,
                     value
                 )
             );
+
+            return _react2.default.createElement(
+                _Tooltip2.default,
+                { title: tooltipContent, placement: this.props.sticky ? 'right' : 'bottom' },
+                _react2.default.createElement(
+                    'div',
+                    { className: classes.wrapper },
+                    iconElement,
+                    view !== cst.VIEWS.SMALL && typeof value !== 'undefined' && _react2.default.createElement(
+                        'span',
+                        { className: classes.label },
+                        value
+                    )
+                )
+            );
         }
     }]);
     return CellIcon;
-}(_react2.default.Component);
+}(_react2.default.PureComponent);
 
 CellIcon.defaultProps = {
-    icon: '',
-    view: 'l',
-    color: '#000'
+    view: 'l'
 };
 CellIcon.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -129,14 +133,9 @@ CellIcon.propTypes = process.env.NODE_ENV !== "production" ? {
      */
     classes: _propTypes2.default.object,
     /**
-     * Couleur de l'icône
-     */
-    color: _propTypes2.default.string.isRequired,
-    /**
-     * Icon name [from material-design-icons](https://materialdesignicons.com/)
-     * used by HiIconBuilder
+     * Icône name [from material-design-icons](https://materialdesignicons.com/)
      */
-    icon: _propTypes2.default.string,
+    icon: _propTypes2.default.string.isRequired,
     /**
      * Label
      */

package/HiTable/BodyCells/CellImage.js

@@ -5,10 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.styles = undefined;
 
-var _stringify = require('babel-runtime/core-js/json/stringify');
-
-var _stringify2 = _interopRequireDefault(_stringify);
-
 var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
 
 var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
@@ -56,37 +52,37 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var styles = exports.styles = function styles(theme) {
     return {
         img: {
+            width: 24,
             height: 'auto',
             float: 'left'
         },
         smallImg: {
+            width: 24,
             height: 'auto'
         },
         label: {
-            marginLeft: 5,
-            whiteSpace: 'nowrap',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis'
+            marginLeft: 5
         },
         tooltipImg: {
             width: 24,
             height: 'auto',
-            float: 'left'
+            float: 'left',
+            marginTop: 2
         },
         tooltipLabel: {
             marginLeft: 5,
+            position: 'relative',
+            bottom: 2,
             verticalAlign: 'middle'
+
         },
         wrapper: {
-            display: 'flex',
-            alignItems: 'center'
+            whiteSpace: 'nowrap',
+            overflow: "hidden",
+            textOverflow: "ellipsis"
         },
         center: {
             textAlign: 'center'
-        },
-        tooltipContainer: {
-            display: 'flex',
-            alignItems: 'center'
         }
     };
 };
@@ -97,8 +93,8 @@ var styles = exports.styles = function styles(theme) {
  * En vue small (s) elle affiche uniquement l'image avec une largeur fixe.
  */
 
-var CellImage = function (_React$Component) {
-    (0, _inherits3.default)(CellImage, _React$Component);
+var CellImage = function (_React$PureComponent) {
+    (0, _inherits3.default)(CellImage, _React$PureComponent);
 
     function CellImage() {
         (0, _classCallCheck3.default)(this, CellImage);
@@ -106,45 +102,38 @@ var CellImage = function (_React$Component) {
     }
 
     (0, _createClass3.default)(CellImage, [{
-        key: 'shouldComponentUpdate',
-        value: function shouldComponentUpdate(nextProps, nextState) {
-            return (0, _stringify2.default)(this.props) !== (0, _stringify2.default)(nextProps) || (0, _stringify2.default)(this.state) !== (0, _stringify2.default)(nextState);
-        }
-    }, {
         key: 'render',
         value: function render() {
             var _props = this.props,
                 classes = _props.classes,
                 path = _props.path,
                 value = _props.value,
-                view = _props.view,
-                size = _props.size;
+                view = _props.view;
 
 
+            var tooltipContent = _react2.default.createElement(
+                'div',
+                null,
+                _react2.default.createElement('img', { src: path, alt: value, className: classes.tooltipImg }),
+                _react2.default.createElement(
+                    'span',
+                    { className: classes.tooltipLabel },
+                    value
+                )
+            );
+
             var innerCellElement = null;
-            if (path) {
-                if (view === cst.VIEWS.SMALL) {
-                    innerCellElement = _react2.default.createElement(
-                        'div',
-                        { className: classes.center },
-                        _react2.default.createElement('img', { src: path, alt: value, className: classes.smallImg, width: size })
-                    );
-                } else {
-                    innerCellElement = _react2.default.createElement(
-                        'div',
-                        { className: classes.wrapper },
-                        _react2.default.createElement('img', { src: path, alt: value, className: classes.img, width: size }),
-                        !!value && _react2.default.createElement(
-                            'span',
-                            { className: classes.label },
-                            value
-                        )
-                    );
-                }
+            if (view === cst.VIEWS.SMALL) {
+                innerCellElement = _react2.default.createElement(
+                    'div',
+                    { className: classes.center },
+                    _react2.default.createElement('img', { src: path, alt: value, className: classes.smallImg })
+                );
             } else {
                 innerCellElement = _react2.default.createElement(
                     'div',
                     { className: classes.wrapper },
+                    _react2.default.createElement('img', { src: path, alt: value, className: classes.img }),
                     !!value && _react2.default.createElement(
                         'span',
                         { className: classes.label },
@@ -153,15 +142,20 @@ var CellImage = function (_React$Component) {
                 );
             }
 
-            return innerCellElement;
+            if (view === cst.VIEWS.LARGE) {
+                return innerCellElement;
+            } else {
+                return _react2.default.createElement(
+                    _Tooltip2.default,
+                    { title: tooltipContent, placement: this.props.sticky ? 'right' : 'bottom' },
+                    innerCellElement
+                );
+            }
         }
     }]);
     return CellImage;
-}(_react2.default.Component);
+}(_react2.default.PureComponent);
 
-CellImage.defaultProps = {
-    size: 24
-};
 CellImage.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Useful to extend the style applied to components.
@@ -170,13 +164,9 @@ CellImage.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Image path
      */
-    path: _propTypes2.default.string,
-    /**
-     * Image path
-     */
-    size: _propTypes2.default.number.isRequired,
+    path: _propTypes2.default.string.isRequired,
     /**
-     * Value
+     * Label
      */
     value: _propTypes2.default.string,
     /**

package/HiTable/BodyCells/CellLayout.js

@@ -83,10 +83,6 @@ var styles = exports.styles = function styles(theme) {
         lookedUp: {
             background: 'linear-gradient(0deg, transparent 25%, #FFFF8D 10%, #FFFF8D 75%, transparent 30%)',
             borderRadius: '45%'
-        },
-        pins: {
-            position: 'relative',
-            top: 3
         }
     };
 };
@@ -136,18 +132,15 @@ var CellLayout = function (_React$Component) {
                 dense = _props.dense,
                 _props$width = _props.width,
                 width = _props$width === undefined ? cst.DEFAULT_WIDTHS[type][view] : _props$width,
-                fixedColumnWidth = _props.fixedColumnWidth,
+                fixedWidth = _props.fixedWidth,
                 sticky = _props.sticky,
                 selectable = _props.selectable,
                 selected = _props.selected,
                 onSelect = _props.onSelect,
                 childrenCount = _props.childrenCount,
-                detailInfos = _props.detailInfos,
-                onOpenDetails = _props.onOpenDetails,
                 theme = _props.theme,
                 padding = _props.padding,
-                lookedUp = _props.lookedUp,
-                title = _props.title;
+                lookedUp = _props.lookedUp;
 
 
             var offset = selectable ? dense ? 32 : 40 : 0;
@@ -157,23 +150,22 @@ var CellLayout = function (_React$Component) {
 
             var lookedUpClassName = (0, _classnames2.default)(classes.flexContent, (0, _defineProperty3.default)({}, classes.lookedUp, lookedUp));
 
-            var cellStyle = {
-                zIndex: sticky ? 12 : 11,
-                textAlign: align,
-                position: sticky ? 'relative' : 'inherit',
-                border: 'none',
-                height: dense ? cst.CELL_HEIGHT_DENSE : cst.CELL_HEIGHT
-            };
-
-            if (fixedColumnWidth) {
-                cellStyle.maxWidth = _width;
-                cellStyle.minWidth = _width;
-                cellStyle.width = _width;
-            }
-
             return _react2.default.createElement(
                 _TableCell2.default,
-                { className: classes.root, style: cellStyle },
+                {
+                    className: classes.root,
+                    style: {
+                        maxWidth: _width,
+                        minWidth: _width,
+                        width: _width,
+                        // la cellule sticky doit être au dessus des autres cellules du body
+                        zIndex: sticky ? 12 : 11,
+                        textAlign: align,
+                        position: sticky ? 'relative' : 'inherit',
+                        border: 'none',
+                        height: dense ? cst.CELL_HEIGHT_DENSE : cst.CELL_HEIGHT
+                    }
+                },
                 !!selectable && _react2.default.createElement(_HiCheckbox2.default, {
                     classes: { root: classes.checkbox },
                     style: { margin: dense ? 6 : 10 },
@@ -190,8 +182,7 @@ var CellLayout = function (_React$Component) {
                             paddingLeft: selectable ? 0 : padding,
                             paddingRight: padding,
                             height: dense ? cst.CELL_HEIGHT_DENSE : cst.CELL_HEIGHT
-                        },
-                        title: title
+                        }
                     },
                     children,
                     childrenCount && _react2.default.createElement(
@@ -205,25 +196,9 @@ var CellLayout = function (_React$Component) {
                         },
                         _react2.default.createElement(
                             _HiPins2.default,
-                            { color: theme.palette.business.primary.normal, className: classes.pins },
+                            { color: theme.palette.business.primary.normal },
                             childrenCount
                         )
-                    ),
-                    detailInfos && _react2.default.createElement(
-                        'div',
-                        {
-                            style: {
-                                position: 'absolute',
-                                top: dense ? 2 : 6,
-                                right: 0
-                            },
-                            onClick: onOpenDetails
-                        },
-                        _react2.default.createElement(
-                            _HiPins2.default,
-                            { color: theme.palette.business.secondary.normal, className: classes.pins },
-                            detailInfos.total
-                        )
                     )
                 )
             );
@@ -237,11 +212,9 @@ CellLayout.defaultProps = {
     selectable: false,
     selected: false,
     dense: false,
-    fixedColumnWidth: true,
+    fixedWidth: false,
     sticky: false,
-    padding: 8,
-    detailInfos: null,
-    title: null
+    padding: 8
 };
 CellLayout.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -256,10 +229,6 @@ CellLayout.propTypes = process.env.NODE_ENV !== "production" ? {
      * Densité, défini la hauteur de la ligne
      */
     dense: _propTypes2.default.bool,
-    /**
-     * Ajoute un Chip affichant le nombre de ligne de détails de la ligne et permettant de les affichés via onOpenDetails
-     */
-    detailInfos: _propTypes2.default.object,
     /**
      * Recherche lookup sur cette colonne
      */
@@ -275,12 +244,11 @@ CellLayout.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Largeur de la cellule (hors padding), est déduit de view par défaut
      */
-    width: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]),
+    width: _propTypes2.default.number,
     /**
-     * Fixe la taille des colonnes selon le type de vue
-     * Sinon les colonnes s'adaptent à l'espace disponible
+     * La largeur de la cellule est fixé (toutes les colonnes sauf une)
      */
-    fixedColumnWidth: _propTypes2.default.bool,
+    fixedWidth: _propTypes2.default.bool,
     /**
      * Title alignement, est déduit de type par défaut
      */
@@ -308,10 +276,6 @@ CellLayout.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Nombre d'enfants
      */
-    childrenCount: _propTypes2.default.number,
-    /**
-     * Html title attribute
-     */
-    title: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string])
+    childrenCount: _propTypes2.default.number
 } : {};
 exports.default = (0, _styles.withStyles)(styles, { withTheme: true, name: 'HmuiCellLayout' })(CellLayout);

package/HiTable/BodyCells/CellNumeric.js

@@ -5,10 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.styles = undefined;
 
-var _stringify = require('babel-runtime/core-js/json/stringify');
-
-var _stringify2 = _interopRequireDefault(_stringify);
-
 var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
 
 var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
@@ -43,6 +39,16 @@ var _withStyles2 = _interopRequireDefault(_withStyles);
 
 var _hiHelpers = require('../../utils/hiHelpers');
 
+var _Tooltip = require('../../Tooltip');
+
+var _Tooltip2 = _interopRequireDefault(_Tooltip);
+
+var _constants = require('../constants');
+
+var cst = _interopRequireWildcard(_constants);
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var styles = exports.styles = function styles(theme) {
@@ -57,8 +63,8 @@ var styles = exports.styles = function styles(theme) {
  * Cette cellule permet d'afficher un volume ou un montant avec devise
  */
 
-var CellNumeric = function (_React$Component) {
-    (0, _inherits3.default)(CellNumeric, _React$Component);
+var CellNumeric = function (_React$PureComponent) {
+    (0, _inherits3.default)(CellNumeric, _React$PureComponent);
 
     function CellNumeric() {
         (0, _classCallCheck3.default)(this, CellNumeric);
@@ -66,11 +72,6 @@ var CellNumeric = function (_React$Component) {
     }
 
     (0, _createClass3.default)(CellNumeric, [{
-        key: 'shouldComponentUpdate',
-        value: function shouldComponentUpdate(nextProps, nextState) {
-            return (0, _stringify2.default)(this.props) !== (0, _stringify2.default)(nextProps) || (0, _stringify2.default)(this.state) !== (0, _stringify2.default)(nextState);
-        }
-    }, {
         key: 'render',
         value: function render() {
             var _props = this.props,
@@ -78,27 +79,36 @@ var CellNumeric = function (_React$Component) {
                 value = _props.value,
                 locale = _props.locale,
                 currency = _props.currency,
-                view = _props.view,
-                precision = _props.precision;
+                view = _props.view;
 
 
             var displayedValue = '';
+            var titleValue = '';
 
             if (currency) {
                 displayedValue = (0, _hiHelpers.formatCurrencyAmount)(value, view, locale, currency);
+                if (view === cst.VIEWS.LARGE) {
+                    titleValue = displayedValue;
+                } else {
+                    titleValue = (0, _hiHelpers.formatCurrencyAmount)(value, cst.VIEWS.LARGE, locale, currency);
+                }
             } else {
-                displayedValue = (0, _hiHelpers.formatNumber)(value, view, locale, precision);
+                displayedValue = (0, _hiHelpers.formatNumber)(value, view, locale);
             }
 
             return _react2.default.createElement(
-                'span',
-                { className: classes.spanNumeric },
-                displayedValue
+                _Tooltip2.default,
+                { title: titleValue, placement: this.props.sticky ? 'right' : 'bottom' },
+                _react2.default.createElement(
+                    'span',
+                    { className: classes.spanNumeric },
+                    displayedValue
+                )
             );
         }
     }]);
     return CellNumeric;
-}(_react2.default.Component);
+}(_react2.default.PureComponent);
 
 CellNumeric.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -117,10 +127,6 @@ CellNumeric.propTypes = process.env.NODE_ENV !== "production" ? {
      * Code de la devise (ISO 4217)
      */
     currency: _propTypes2.default.string,
-    /**
-     * Nombre de chiffres après la virgule
-     */
-    precision: _propTypes2.default.number,
     /**
      * View (L/M/S)
      */

package/HiTable/BodyCells/CellRate.js

@@ -9,10 +9,6 @@ var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
 
 var _defineProperty3 = _interopRequireDefault(_defineProperty2);
 
-var _stringify = require('babel-runtime/core-js/json/stringify');
-
-var _stringify2 = _interopRequireDefault(_stringify);
-
 var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
 
 var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
@@ -82,8 +78,8 @@ var styles = exports.styles = function styles(theme) {
         negative: {
             color: theme.palette.negative.normal
         },
-        neutral: {
-            color: theme.palette.neutral.normal
+        middle: {
+            color: theme.palette.middle.normal
         },
         spanIndicator: {
             fontSize: 11,
@@ -103,8 +99,8 @@ var styles = exports.styles = function styles(theme) {
  * avec une icône d'évolution (optionnelle) et un indicateur du type de données représentées (optionnel)
  */
 
-var CellRate = function (_React$Component) {
-    (0, _inherits3.default)(CellRate, _React$Component);
+var CellRate = function (_React$PureComponent) {
+    (0, _inherits3.default)(CellRate, _React$PureComponent);
 
     function CellRate() {
         (0, _classCallCheck3.default)(this, CellRate);
@@ -112,11 +108,6 @@ var CellRate = function (_React$Component) {
     }
 
     (0, _createClass3.default)(CellRate, [{
-        key: 'shouldComponentUpdate',
-        value: function shouldComponentUpdate(nextProps, nextState) {
-            return (0, _stringify2.default)(this.props) !== (0, _stringify2.default)(nextProps) || (0, _stringify2.default)(this.state) !== (0, _stringify2.default)(nextState);
-        }
-    }, {
         key: 'render',
         value: function render() {
             var _classNames, _classNames2;
@@ -136,7 +127,7 @@ var CellRate = function (_React$Component) {
 
             switch (trendchip) {
                 case cst.NO_EVOLUTION:
-                    trendIcon = _react2.default.createElement(_mdiMaterialUi.Equal, { className: classes.trendChipIcon + ' ' + classes.neutral });
+                    trendIcon = _react2.default.createElement(_mdiMaterialUi.Equal, { className: classes.trendChipIcon + ' ' + classes.middle });
                     break;
                 case cst.EVOLUTION_UP:
                     trendIcon = _react2.default.createElement(_mdiMaterialUi.ArrowTopRight, {
@@ -168,7 +159,7 @@ var CellRate = function (_React$Component) {
         }
     }]);
     return CellRate;
-}(_react2.default.Component);
+}(_react2.default.PureComponent);
 
 CellRate.defaultProps = {
     isPositive: true