@hipay/hipay-material-ui 1.0.0-beta.25 → 1.0.0-beta.27

package/HiTable/BodyCells/CellText.js

@@ -9,26 +9,26 @@ var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');
 
 var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);
 
-var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
-
-var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
-
 var _stringify = require('babel-runtime/core-js/json/stringify');
 
 var _stringify2 = _interopRequireDefault(_stringify);
 
-var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
 
-var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
 
-var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
 
-var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
 
 var _createClass2 = require('babel-runtime/helpers/createClass');
 
 var _createClass3 = _interopRequireDefault(_createClass2);
 
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
 var _inherits2 = require('babel-runtime/helpers/inherits');
 
 var _inherits3 = _interopRequireDefault(_inherits2);
@@ -53,42 +53,39 @@ var _constants = require('../constants');
 
 var cst = _interopRequireWildcard(_constants);
 
+var _HiColoredLabel = require('../../HiColoredLabel');
+
+var _HiColoredLabel2 = _interopRequireDefault(_HiColoredLabel);
+
+var _colorManipulator = require('../../styles/colorManipulator');
+
 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) {
-    return {
-        leftEllipsisSpan: {
-            display: 'inline-block',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            whiteSpace: 'pre',
-            direction: 'rtl'
-        },
-        rightEllipsisSpan: {
-            display: 'inline-block',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            whiteSpace: 'pre',
-            width: '100%'
-        },
-        noEllipsisSpan: {
-            display: 'inline-block',
-            overflow: 'hidden',
-            whiteSpace: 'pre'
-        }
-    };
+var styles = exports.styles = {
+    leftEllipsisSpan: {
+        display: 'inline-block',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'pre',
+        direction: 'rtl'
+    },
+    rightEllipsisSpan: {
+        display: 'inline-block',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'pre'
+    },
+    noEllipsisSpan: {
+        display: 'inline-block',
+        overflow: 'hidden',
+        whiteSpace: 'pre'
+    }
 };
 
 var CellText = function (_React$Component) {
     (0, _inherits3.default)(CellText, _React$Component);
-    (0, _createClass3.default)(CellText, [{
-        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);
-        }
-    }]);
 
     function CellText(props) {
         (0, _classCallCheck3.default)(this, CellText);
@@ -112,6 +109,11 @@ var CellText = function (_React$Component) {
         value: function componentDidMount() {
             this.buildEllipsis();
         }
+    }, {
+        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: 'componentDidUpdate',
         value: function componentDidUpdate() {
@@ -144,8 +146,9 @@ var CellText = function (_React$Component) {
 
             /**
              * Calcul l'espace pris par les 2 spans (les 2 moitiés du texte),
-             * si ils dépassent la largeur de la cellule, diminue d'autant et proportionnellement chaque span
-             * ajoute l'ellipse à gauche de la deuxième moitié du texte.
+             * si ils dépassent la largeur de la cellule :
+             * - diminue d'autant et proportionnellement chaque span
+             * - ajoute l'ellipse à gauche de la deuxième moitié du texte.
              */
             if (this.props.ellipsis === cst.ELLIPSIS_MIDDLE) {
                 if (this.cellText !== null) {
@@ -175,7 +178,8 @@ var CellText = function (_React$Component) {
             var _props = this.props,
                 classes = _props.classes,
                 value = _props.value,
-                ellipsis = _props.ellipsis;
+                ellipsis = _props.ellipsis,
+                color = _props.color;
 
 
             var start = void 0,
@@ -195,9 +199,15 @@ var CellText = function (_React$Component) {
                     }
                     valueElement = _react2.default.createElement(
                         'div',
-                        { ref: function ref(div) {
+                        {
+                            ref: function ref(div) {
                                 _this2.cellText = div;
-                            } },
+                            },
+                            style: {
+                                backgroundColor: color || 'inherit',
+                                color: color ? (0, _colorManipulator.getContrastedTextColor)(color, '#4C4C4C', '#FFF') : 'inherit'
+                            }
+                        },
                         _react2.default.createElement(
                             'span',
                             { className: classes.rightEllipsisSpan },
@@ -217,9 +227,15 @@ var CellText = function (_React$Component) {
                     end = valueString.substr(Math.round(valueString.length / 2));
                     valueElement = _react2.default.createElement(
                         'div',
-                        { ref: function ref(div) {
+                        {
+                            ref: function ref(div) {
                                 _this2.cellText = div;
-                            } },
+                            },
+                            style: {
+                                backgroundColor: color || 'inherit',
+                                color: color ? (0, _colorManipulator.getContrastedTextColor)(color, '#4C4C4C', '#FFF') : 'inherit'
+                            }
+                        },
                         _react2.default.createElement(
                             'span',
                             { className: classes.noEllipsisSpan },
@@ -234,7 +250,11 @@ var CellText = function (_React$Component) {
                     break;
 
                 case cst.ELLIPSIS_LEFT:
-                    valueElement = _react2.default.createElement(
+                    valueElement = color ? _react2.default.createElement(_HiColoredLabel2.default, {
+                        className: classes.leftEllipsisSpan,
+                        label: valueString,
+                        color: color
+                    }) : _react2.default.createElement(
                         'div',
                         { className: classes.leftEllipsisSpan, style: { width: '100%' } },
                         valueString
@@ -243,7 +263,11 @@ var CellText = function (_React$Component) {
 
                 case cst.ELLIPSIS_RIGHT:
                 default:
-                    valueElement = _react2.default.createElement(
+                    valueElement = color ? _react2.default.createElement(_HiColoredLabel2.default, {
+                        className: classes.rightEllipsisSpan,
+                        label: valueString,
+                        color: color
+                    }) : _react2.default.createElement(
                         'div',
                         { className: classes.rightEllipsisSpan, style: { width: '100%' } },
                         valueString
@@ -267,12 +291,16 @@ CellText.propTypes = process.env.NODE_ENV !== "production" ? {
      */
     classes: _propTypes2.default.object,
     /**
-     * Valeur à afficher
+     * Couleur du text & du background
      */
-    value: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]).isRequired,
+    color: _propTypes2.default.string,
     /**
      * Ellipsis
      */
-    ellipsis: _propTypes2.default.oneOf(['left', 'right', 'middle', 'name', 'after-first-word'])
+    ellipsis: _propTypes2.default.oneOf(['left', 'right', 'middle', 'name', 'after-first-word']),
+    /**
+     * Valeur à afficher
+     */
+    value: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]).isRequired
 } : {};
 exports.default = (0, _withStyles2.default)(styles, { name: 'HmuiCellText' })(CellText);

package/HiTable/HiStickyRow.js

@@ -133,8 +133,8 @@ var styles = exports.styles = function styles(theme) {
 
 var ONCHANGE_ERROR_MESSAGE = exports.ONCHANGE_ERROR_MESSAGE = 'Vous devez saisir la propriété "onChange" pour les lignes "selectable"';
 
-var HiStickyRow = function (_React$PureComponent) {
-    (0, _inherits3.default)(HiStickyRow, _React$PureComponent);
+var HiStickyRow = function (_React$Component) {
+    (0, _inherits3.default)(HiStickyRow, _React$Component);
 
     function HiStickyRow() {
         (0, _classCallCheck3.default)(this, HiStickyRow);
@@ -241,7 +241,7 @@ var HiStickyRow = function (_React$PureComponent) {
         }
     }]);
     return HiStickyRow;
-}(_react2.default.PureComponent);
+}(_react2.default.Component);
 
 HiStickyRow.defaultProps = {
     dense: false,

package/HiTable/HiTableFooter.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);
@@ -83,8 +79,11 @@ var HiTableFooter = function (_React$Component) {
 
     (0, _createClass3.default)(HiTableFooter, [{
         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);
+
+
+        // Table footer never need to be updated
+        value: function shouldComponentUpdate() {
+            return false;
         }
     }, {
         key: 'render',

package/README.md

@@ -224,13 +224,14 @@ Le projet est publié sur un repo privé npm : https://www.npmjs.com/package/@hi
 Avoir installé [conventional-changelog-cli](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-cli) pour générer le CHANGELOG à partir des commits git.
 ```sh
 npm install -g conventional-changelog-cli
+npm install -g cz-conventional-changelog
 ```
 
 1. Changer la version dans package.json
 2. Générer le fichier HI-CHANGELOG.md : ```npm run changelog```
 3. Commiter la release : ```git ci -am "chore(release): VERSION DATE```
 4. Build : ```npm run build```
-5. Publish : 
+5. Publish :
 
 ```sh
 cd build

package/es/HiChip/HiChip.js

@@ -99,6 +99,7 @@ function HiChip(props) {
         onDelete,
         prefix,
         onIconClick,
+        title,
         titleDelete,
         titleIcon,
         titleImg,
@@ -115,7 +116,8 @@ function HiChip(props) {
                 [classes.rightNavigation]: onNext,
                 [classes.deletable]: onDelete,
                 [classes.leftIccon]: icon
-            })
+            }),
+            title: title
         },
         prefix && React.createElement(
             'span',
@@ -131,14 +133,14 @@ function HiChip(props) {
             icon: icon,
             size: 16,
             onClick: onIconClick,
-            titleAccess: titleIcon
+            title: titleIcon
         }),
         onPrevious && React.createElement(HiIconBuilder, {
             className: classNames(classes.navigate),
             icon: 'menuLeft',
             onClick: onPrevious,
             size: 16,
-            titleAccess: titlePrevious
+            title: titlePrevious
         }),
         React.createElement(
             'span',
@@ -150,14 +152,14 @@ function HiChip(props) {
             icon: 'menuRight',
             onClick: onNext,
             size: 16,
-            titleAccess: titleNext
+            title: titleNext
         }),
         onDelete && React.createElement(HiIconBuilder, {
             classes: { root: classes.eraseIcon },
             icon: 'closeCircle',
             onClick: onDelete,
             size: 16,
-            titleAccess: titleDelete
+            title: titleDelete
         })
     );
 }
@@ -203,6 +205,10 @@ HiChip.propTypes = process.env.NODE_ENV !== "production" ? {
      * Préfixe dans le HiChip
      */
     prefix: PropTypes.string,
+    /**
+     * Titre du chip
+     */
+    title: PropTypes.string,
     /**
      * Titre de l'icône supprimer
      */

package/es/HiForm/HiFormControl.js

@@ -150,7 +150,7 @@ class HiFormControl extends React.PureComponent {
                 error: error,
                 ref: rootRef
             }, others),
-            !disabled && error && errorText && helperOpen && React.createElement(
+            error && errorText && helperOpen && React.createElement(
                 'div',
                 { className: classes.errorDiv },
                 React.createElement('div', {
@@ -158,7 +158,7 @@ class HiFormControl extends React.PureComponent {
                 }),
                 errorText
             ),
-            !disabled && helperIcon && helperText && !error && helperOpen && React.createElement(
+            helperIcon && helperText && !error && helperOpen && React.createElement(
                 'div',
                 {
                     className: classes.helperDiv
@@ -181,11 +181,11 @@ class HiFormControl extends React.PureComponent {
                     disabled: disabled,
                     focused: !disabled && (focused || hovered)
                 }, InputLabelProps),
-                !disabled && error && React.createElement(Alert, {
+                error && React.createElement(Alert, {
                     className: classes.errorIcon,
                     onClick: this.handleHelperClick
                 }),
-                !disabled && helperIcon && helperText && !error && React.createElement(Information, {
+                helperIcon && helperText && !error && React.createElement(Information, {
                     className: classNames(classes.helperIcon, {
                         [classes.helperIconActive]: helperOpen
                     }),

package/es/HiSelect/HiSelect.js

@@ -78,7 +78,7 @@ class HiSelect extends React.PureComponent {
             hierarchySelected: {},
             hierarchy: {},
             nbOptions: 0,
-            dynamic: false
+            dynamic: props.dynamic || false
         };
 
         // Check if value is in options
@@ -121,7 +121,7 @@ class HiSelect extends React.PureComponent {
                 }
             });
             this.state.nbOptions = optionsLength;
-        } else {
+        } else if (!props.dynamic) {
             this.state.dynamic = true;
         }
 
@@ -251,25 +251,26 @@ class HiSelect extends React.PureComponent {
         }
 
         if ((dynamic || loading) && selectedIdList.length === 1) {
-            display = translations.one_item_selected.replace('%s', selectedIdList.length);
+            display = translations.one_item_selected;
         } else if ((this.state.nbOptions !== selectedIdList.length || !hasAll) && selectedIdList.length > 1) {
             display = translations.n_items_selected.replace('%s', selectedIdList.length);
         } else if (this.state.nbOptions === selectedIdList.length && this.state.nbOptions > 1) {
             display = translations.all;
         } else if (selectedIdList.length === 1) {
-            if (type !== 'icon') {
-                let item = options.find(o => o.id === selectedIdList[0]);
-                if (!item && pinnedItem) {
+            let item = options.find(o => o.id === selectedIdList[0]);
+            if (item === undefined) {
+                display = translations.one_item_selected;
+            } else if (type !== 'icon') {
+                if (pinnedItem) {
                     item = pinnedItem;
                 }
                 display = item.label;
             } else {
-                const optionSelected = options.find(o => o.id === selectedIdList[0]);
                 display = React.createElement(
                     'span',
                     { className: classes.selectIconLabel },
-                    React.createElement(HiIconBuilder, { icon: optionSelected.icon, className: classes.labelIcon }),
-                    optionSelected.label
+                    React.createElement(HiIconBuilder, { icon: item.icon, className: classes.labelIcon }),
+                    item.label
                 );
             }
         }
@@ -403,6 +404,7 @@ HiSelect.defaultProps = {
     hierarchic: false,
     parentItemSelectable: false,
     displayAsChip: false,
+    dynamic: false,
     icon: React.createElement(CheckboxBlankOutline, { style: { width: 20, height: 20 } }),
     parentIcon: React.createElement(CheckboxBlankOutline, { style: { width: 20, height: 20 } }),
     hoverIcon: React.createElement(CheckboxBlankOutline, { style: { width: 20, height: 20 } }),
@@ -424,9 +426,9 @@ var _initialiseProps = function () {
         if (this.state.open) {
             this.handleClose();
         } else {
-            if (!this.props.staticPosition) {
-                //document.body.style.overflow = 'hidden';
-            }
+            /*if (!this.props.staticPosition) {
+                // document.body.style.overflow = 'hidden';
+            }*/
             this.setState({ open: true });
             const options = this.props.options.slice();
             this.handleSuggestions(options);
@@ -488,9 +490,11 @@ var _initialiseProps = function () {
         } else if (event.key === 'ArrowUp') {
             nextItem = getNextItemSelectable(document.activeElement, 'up');
         } else if (event.key === 'Tab') {
-            if (!this.props.staticPosition) {
-                //document.body.style.overflow = 'auto';
-            }
+            /* if (!this.props.staticPosition) {
+                document.body.style.overflow = 'auto';
+            } */
+            this.setState({ open: false });
+        } else if (event.key === 'Escape') {
             this.setState({ open: false });
         }
         if (nextItem) {
@@ -633,9 +637,9 @@ var _initialiseProps = function () {
                 }
             }
             this.setState({ hierarchySelected: hiSelected });
-            onChange(event, valueList);
+            onChange(event, valueList, item);
         } else {
-            onChange(event, item.id);
+            onChange(event, item.id, item);
             this.handleClose();
         }
     };
@@ -702,6 +706,12 @@ HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
      * Option permettant d'afficher les sélection sous forme de Chip.
      */
     displayAsChip: PropTypes.bool,
+    /**
+     * Option permettant de définir si les options du select sont dynamiques.
+     * Si les options du select sont initialisées à vide, alors ce sera mis à true
+     * automatiquement.
+     */
+    dynamic: PropTypes.bool.isRequired,
     /**
      * Applique le style error
      */

package/es/HiSelectableList/HiSelectableList.js

@@ -102,7 +102,7 @@ class HiSelectableList extends React.PureComponent {
                             hoverIcon: hoverIcon,
                             checkedIcon: checkedIcon,
                             checkbox: checkbox,
-                            level: parents.length,
+                            level: item.level ? item.level : parents.length,
                             disabled: disabledIds ? disabledIds.includes(item.id) : false
                         }, others));
                     }

package/es/HiSelectableList/HiSelectableListItem.js

@@ -313,7 +313,7 @@ class HiSelectableListItem extends React.Component {
 
         if (leftPadding) {
             paddingLeft = leftPadding;
-        } else if (!hierarchic) {
+        } else if (!hierarchic && level === 0) {
             // Si pas de hiérarchie et sans checkbox, padding de 8px
             if (!effectiveCheckbox) {
                 paddingLeft = 8;
@@ -330,9 +330,9 @@ class HiSelectableListItem extends React.Component {
                 }
             } else if (level > 0) {
                 if (effectiveCheckbox) {
-                    paddingLeft = 16 * (level - 1);
-                } else {
                     paddingLeft = 16 * level;
+                } else {
+                    paddingLeft = 16 * (level + 1);
                 }
             } else if (!effectiveCheckbox) {
                 if (item.id === '_all') {

package/es/HiTable/BodyCellBuilder.js

@@ -241,10 +241,11 @@ export default class BodyCellBuilder extends React.Component {
                 default:
                     cellElement = React.createElement(CellText, {
                         ukey: ukey,
-                        value: data.value,
+                        value: data.label ? data.label : data.value,
                         ellipsis: ellipsis,
                         view: view,
-                        sticky: sticky
+                        sticky: sticky,
+                        color: data.color
                     });
                     break;
             }

package/es/HiTable/BodyCells/CellAccount.js

@@ -3,9 +3,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Tooltip from '../../Tooltip';
 import HiColoredLabel from '../../HiColoredLabel';
-import withStyles from '../../styles/withStyles';
-
-export const styles = theme => ({});
 
 /**
  * Cette cellule permet d'afficher le nom d'un compte sous la forme d'un label coloré.
@@ -42,4 +39,4 @@ CellAccount.propTypes = process.env.NODE_ENV !== "production" ? {
      */
     value: PropTypes.string.isRequired
 } : {};
-export default withStyles(styles, { name: 'HmuiCellAccount' })(CellAccount);
+export default CellAccount;

package/es/HiTable/BodyCells/CellDate.js

@@ -3,12 +3,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import moment from 'moment';
 import 'moment/locale/fr';
-
 import withStyles from '../../styles/withStyles';
 import Tooltip from '../../Tooltip';
 import * as cst from '../constants';
 
-export const styles = theme => ({
+export const styles = {
     rightEllipsisSpan: {
         display: 'inline-block',
         overflow: 'hidden',
@@ -16,7 +15,7 @@ export const styles = theme => ({
         whiteSpace: 'pre',
         width: '100%'
     }
-});
+};
 
 /**
  * Cette cellule permet d'afficher une date en fonction de la locale de l'utilisateur
@@ -36,14 +35,14 @@ class CellDate extends React.Component {
         const { classes, displayTime, value, locale, view, formatShort } = this.props;
 
         const date = moment(value);
-        moment.locale(locale);
+        date.locale(locale);
 
-        const titleValue = displayTime ? date.format(this.formatLong) : date.format(this.formatLong.replace('HH:mm:ss', ''));
+        const titleValue = displayTime ? date.format(this.formatLong) : date.format(this.formatLong.replace(' HH:mm:ss', ''));
         let displayedValue = titleValue;
         if (view === cst.VIEWS.SMALL) {
-            displayedValue = displayTime ? date.format(formatShort.replace('YYYY', 'YY') + ' HH:mm:ss') : date.format(formatShort.replace('YYYY', 'YY'));
+            displayedValue = displayTime ? date.format(`${formatShort.replace('YYYY', 'YY')} HH:mm:ss`) : date.format(formatShort.replace('YYYY', 'YY'));
         } else if (view === cst.VIEWS.MEDIUM) {
-            displayedValue = displayTime ? date.format(formatShort + ' HH:mm:ss') : date.format(formatShort);
+            displayedValue = displayTime ? date.format(`${formatShort} HH:mm:ss`) : date.format(formatShort);
         }
 
         if (view === cst.VIEWS.LARGE) {
@@ -90,6 +89,11 @@ CellDate.propTypes = process.env.NODE_ENV !== "production" ? {
      * Locale moment
      */
     locale: PropTypes.string,
+    /**
+     * True si la colonne est la première colonne et
+     * doit avoir un comportement "sticky" lors du scroll horizontal
+     */
+    sticky: PropTypes.bool,
     /**
      * Date as string
      */

package/es/HiTable/BodyCells/CellRate.js

@@ -27,8 +27,8 @@ export const styles = theme => ({
     negative: {
         color: theme.palette.negative.normal
     },
-    middle: {
-        color: theme.palette.middle.normal
+    neutral: {
+        color: theme.palette.neutral.normal
     },
     spanIndicator: {
         fontSize: 11,
@@ -61,7 +61,7 @@ class CellRate extends React.Component {
 
         switch (trendchip) {
             case cst.NO_EVOLUTION:
-                trendIcon = React.createElement(Equal, { className: classes.trendChipIcon + ' ' + classes.middle });
+                trendIcon = React.createElement(Equal, { className: classes.trendChipIcon + ' ' + classes.neutral });
                 break;
             case cst.EVOLUTION_UP:
                 trendIcon = React.createElement(ArrowTopRight, {