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

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 } }),
@@ -633,9 +635,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 +704,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/CellText.js

@@ -1,12 +1,13 @@
 import _JSON$stringify from 'babel-runtime/core-js/json/stringify';
 import React from 'react';
 import PropTypes from 'prop-types';
-
 import Tooltip from '../../Tooltip';
 import withStyles from '../../styles/withStyles';
 import * as cst from '../constants';
+import HiColoredLabel from '../../HiColoredLabel';
+import { getContrastedTextColor } from '../../styles/colorManipulator';
 
-export const styles = theme => ({
+export const styles = {
     leftEllipsisSpan: {
         display: 'inline-block',
         overflow: 'hidden',
@@ -18,22 +19,17 @@ export const styles = theme => ({
         display: 'inline-block',
         overflow: 'hidden',
         textOverflow: 'ellipsis',
-        whiteSpace: 'pre',
-        width: '100%'
+        whiteSpace: 'pre'
     },
     noEllipsisSpan: {
         display: 'inline-block',
         overflow: 'hidden',
         whiteSpace: 'pre'
     }
-});
+};
 
 class CellText extends React.Component {
 
-    shouldComponentUpdate(nextProps, nextState) {
-        return _JSON$stringify(this.props) !== _JSON$stringify(nextProps) || _JSON$stringify(this.state) !== _JSON$stringify(nextState);
-    }
-
     constructor(props) {
         super(props);
 
@@ -48,6 +44,10 @@ class CellText extends React.Component {
         this.buildEllipsis();
     }
 
+    shouldComponentUpdate(nextProps, nextState) {
+        return _JSON$stringify(this.props) !== _JSON$stringify(nextProps) || _JSON$stringify(this.state) !== _JSON$stringify(nextState);
+    }
+
     componentDidUpdate() {
         this.buildEllipsis();
     }
@@ -73,8 +73,9 @@ class CellText extends 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) {
@@ -94,13 +95,13 @@ class CellText extends React.Component {
     }
 
     render() {
-        const { classes, value, ellipsis } = this.props;
+        const { classes, value, ellipsis, color } = this.props;
 
         let start,
             end,
             valueElement = '';
 
-        let valueString = value.toString();
+        const valueString = value.toString();
 
         switch (ellipsis) {
             case cst.ELLIPSIS_AFTER_FIRST_WORD:
@@ -113,13 +114,19 @@ class CellText extends React.Component {
                 }
                 valueElement = React.createElement(
                     'div',
-                    { ref: div => {
+                    {
+                        ref: div => {
                             this.cellText = div;
-                        } },
+                        },
+                        style: {
+                            backgroundColor: color || 'inherit',
+                            color: color ? getContrastedTextColor(color, '#4C4C4C', '#FFF') : 'inherit'
+                        }
+                    },
                     React.createElement(
                         'span',
                         { className: classes.rightEllipsisSpan },
-                        start + ' '
+                        `${start} `
                     ),
                     React.createElement(
                         'span',
@@ -135,9 +142,15 @@ class CellText extends React.Component {
                 end = valueString.substr(Math.round(valueString.length / 2));
                 valueElement = React.createElement(
                     'div',
-                    { ref: div => {
+                    {
+                        ref: div => {
                             this.cellText = div;
-                        } },
+                        },
+                        style: {
+                            backgroundColor: color || 'inherit',
+                            color: color ? getContrastedTextColor(color, '#4C4C4C', '#FFF') : 'inherit'
+                        }
+                    },
                     React.createElement(
                         'span',
                         { className: classes.noEllipsisSpan },
@@ -152,7 +165,11 @@ class CellText extends React.Component {
                 break;
 
             case cst.ELLIPSIS_LEFT:
-                valueElement = React.createElement(
+                valueElement = color ? React.createElement(HiColoredLabel, {
+                    className: classes.leftEllipsisSpan,
+                    label: valueString,
+                    color: color
+                }) : React.createElement(
                     'div',
                     { className: classes.leftEllipsisSpan, style: { width: '100%' } },
                     valueString
@@ -161,7 +178,11 @@ class CellText extends React.Component {
 
             case cst.ELLIPSIS_RIGHT:
             default:
-                valueElement = React.createElement(
+                valueElement = color ? React.createElement(HiColoredLabel, {
+                    className: classes.rightEllipsisSpan,
+                    label: valueString,
+                    color: color
+                }) : React.createElement(
                     'div',
                     { className: classes.rightEllipsisSpan, style: { width: '100%' } },
                     valueString
@@ -183,12 +204,16 @@ CellText.propTypes = process.env.NODE_ENV !== "production" ? {
      */
     classes: PropTypes.object,
     /**
-     * Valeur à afficher
+     * Couleur du text & du background
      */
-    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+    color: PropTypes.string,
     /**
      * Ellipsis
      */
-    ellipsis: PropTypes.oneOf(['left', 'right', 'middle', 'name', 'after-first-word'])
+    ellipsis: PropTypes.oneOf(['left', 'right', 'middle', 'name', 'after-first-word']),
+    /**
+     * Valeur à afficher
+     */
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
 } : {};
 export default withStyles(styles, { name: 'HmuiCellText' })(CellText);

package/es/HiTable/HiStickyRow.js

@@ -72,7 +72,7 @@ export const styles = theme => ({
 
 export const ONCHANGE_ERROR_MESSAGE = 'Vous devez saisir la propriété "onChange" pour les lignes "selectable"';
 
-class HiStickyRow extends React.PureComponent {
+class HiStickyRow extends React.Component {
 
     shouldComponentUpdate(nextProps, nextState) {
         return _JSON$stringify(this.props) !== _JSON$stringify(nextProps) || _JSON$stringify(this.state) !== _JSON$stringify(nextState);

package/es/svg-icons/Cancel.js

@@ -1,3 +1,5 @@
+messageAlert;
+
 import React from 'react';
 import pure from 'recompose/pure';
 import SvgIcon from '../SvgIcon';

package/es/svg-icons/HiBriefcaseRescue.js

@@ -0,0 +1,15 @@
+import _extends from "babel-runtime/helpers/extends";
+import React from "react";
+
+var _ref = React.createElement("path", {
+    d: "M486 108H378V27a27 27 0 0 0-27-27H189a27 27 0 0 0-27 27v81H54a54.06 54.06 0 0 0-54 54v270a54.06 54.06 0 0 0 54 54h432a54.06 54.06 0 0 0 54-54V162a54.06 54.06 0 0 0-54-54zM216 54h108v54H216zm162 270h-81v81h-54v-81h-81v-54h81v-81h54v81h81z",
+    fill: "#767676"
+});
+
+const HiBriefcaseRescue = props => React.createElement(
+    "svg",
+    _extends({ viewBox: "0 0 540 486" }, props),
+    _ref
+);
+
+export default HiBriefcaseRescue;

package/es/svg-icons/index.js

@@ -8,4 +8,5 @@ export { default as HiRoute } from './HiRoute';
 export { default as HiSettlement } from './HiSettlement';
 export { default as HiTransaction } from './HiTransaction';
 export { default as HiUser } from './HiUser';
-export { default as HiWidget } from './HiWidget';
+export { default as HiWidget } from './HiWidget';
+export { default as HiBriefcaseRescue } from './HiBriefcaseRescue';

package/index.es.js

@@ -1,4 +1,4 @@
-/** @license Material-UI v1.0.0-beta.25
+/** @license Material-UI v1.0.0-beta.26
  *
  * 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 Material-UI v1.0.0-beta.25
+/** @license Material-UI v1.0.0-beta.26
  *
  * 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": "1.0.0-beta.25",
+  "version": "1.0.0-beta.26",
   "description": "HiPay Material-UI Style Guide - React components that implement Google's Material Design from Material-UI.",
   "main": "./index.js",
   "repository": {
@@ -23,6 +23,7 @@
     "babel-runtime": "^6.26.0",
     "brcast": "^3.0.1",
     "classnames": "^2.2.5",
+    "commitizen": "^2.10.1",
     "deepmerge": "^2.0.1",
     "dom-helpers": "^3.2.1",
     "hoist-non-react-statics": "^2.5.0",

package/svg-icons/Cancel.js

@@ -18,6 +18,8 @@ var _SvgIcon2 = _interopRequireDefault(_SvgIcon);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+messageAlert;
+
 /**
  * @ignore - internal component.
  */

package/svg-icons/HiBriefcaseRescue.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+var _extends2 = require("babel-runtime/helpers/extends");
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+var _react = require("react");
+
+var _react2 = _interopRequireDefault(_react);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _ref = _react2.default.createElement("path", {
+    d: "M486 108H378V27a27 27 0 0 0-27-27H189a27 27 0 0 0-27 27v81H54a54.06 54.06 0 0 0-54 54v270a54.06 54.06 0 0 0 54 54h432a54.06 54.06 0 0 0 54-54V162a54.06 54.06 0 0 0-54-54zM216 54h108v54H216zm162 270h-81v81h-54v-81h-81v-54h81v-81h54v81h81z",
+    fill: "#767676"
+});
+
+var HiBriefcaseRescue = function HiBriefcaseRescue(props) {
+    return _react2.default.createElement(
+        "svg",
+        (0, _extends3.default)({ viewBox: "0 0 540 486" }, props),
+        _ref
+    );
+};
+
+exports.default = HiBriefcaseRescue;

package/svg-icons/index.js

@@ -103,4 +103,13 @@ Object.defineProperty(exports, 'HiWidget', {
   }
 });
 
+var _HiBriefcaseRescue = require('./HiBriefcaseRescue');
+
+Object.defineProperty(exports, 'HiBriefcaseRescue', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_HiBriefcaseRescue).default;
+  }
+});
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }