@hipay/hipay-material-ui 1.0.0-beta.18 → 1.0.0-beta.2

package/HiSelectableList/HiSelectableListItem.js

@@ -69,18 +69,13 @@ var _HiIconBuilder = require('../utils/HiIconBuilder');
 
 var _HiIconBuilder2 = _interopRequireDefault(_HiIconBuilder);
 
-var _HiColoredLabel = require('../HiColoredLabel');
-
-var _HiColoredLabel2 = _interopRequireDefault(_HiColoredLabel);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var styles = exports.styles = function styles(theme) {
     return {
         listItem: {
             padding: 9 + 'px 0px',
-            fontWeight: theme.typography.fontWeightRegular,
-            maxHeight: 40
+            fontWeight: theme.typography.fontWeightRegular
         },
         listItemTitle: {
             padding: 9 + 'px 0px',
@@ -117,15 +112,11 @@ var styles = exports.styles = function styles(theme) {
             fontWeight: 'inherit',
             width: '100%'
         }),
-        listItemSecondaryText: (0, _extends3.default)({}, theme.typography.body5, {
+        listItemSecondaryText: (0, _extends3.default)({}, theme.typography.body4, {
             fontWeight: theme.typography.fontWeightLight,
-            marginLeft: theme.spacing.unit,
-            color: theme.palette.neutral.normal
+            marginLeft: theme.spacing.unit
         }),
         listItemInfoText: (0, _extends3.default)({
-            whiteSpace: 'nowrap',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
             color: theme.palette.neutral.normal
         }, theme.typography.body4, {
             fontWeight: theme.typography.fontWeightRegular,
@@ -171,11 +162,6 @@ var styles = exports.styles = function styles(theme) {
                 color: '#000000'
             }
         },
-        labelHighlightColored: {
-            '&>strong': {
-                fontWeight: theme.typography.fontWeightMedium
-            }
-        },
         primaryHighlight: {
             fontWeight: theme.typography.fontWeightMedium,
             color: theme.palette.business.primary.normal,
@@ -224,30 +210,22 @@ var HiSelectableListItem = function (_React$Component) {
                         'div',
                         { className: classes.listItemContent, 'data-id': item.id },
                         !effectiveCheckbox && _react2.default.createElement(_HiIconBuilder2.default, { icon: item.icon, className: classes.icon }),
-                        _this.getItemLabel(item),
-                        _react2.default.createElement(
-                            'span',
-                            { className: classes.listItemSecondaryText },
-                            item.secondaryLabel
-                        ),
+                        item.label,
+                        _react2.default.createElement('span', { className: classes.listItemSecondaryText }),
                         childrenIndicator
                     );
                 case 'image':
                     var img = '';
                     if (typeof item.img !== 'undefined') {
-                        img = _react2.default.createElement('img', { src: item.img, alt: item.img, className: classes.imgListItem });
+                        img = _react2.default.createElement('img', { src: item.img, className: classes.imgListItem });
                     }
 
                     return _react2.default.createElement(
                         'div',
                         { className: classes.listItemContent, 'data-id': item.id },
                         img,
-                        _this.getItemLabel(item),
-                        _react2.default.createElement(
-                            'span',
-                            { className: classes.listItemSecondaryText },
-                            item.secondaryLabel
-                        ),
+                        item.label,
+                        _react2.default.createElement('span', { className: classes.listItemSecondaryText }),
                         childrenIndicator
                     );
                 case 'primary-highlight':
@@ -257,7 +235,7 @@ var HiSelectableListItem = function (_React$Component) {
                     return _react2.default.createElement(
                         'div',
                         { className: itemPrimaryHighlightClass, 'data-id': item.id },
-                        _this.getItemLabel(item)
+                        item.label
                     );
                 case 'text':
                 default:
@@ -266,12 +244,14 @@ var HiSelectableListItem = function (_React$Component) {
                     return _react2.default.createElement(
                         'div',
                         { className: itemTextClass, 'data-id': item.id },
-                        _this.getItemLabel(item),
-                        _react2.default.createElement(
-                            'span',
-                            { className: classes.listItemSecondaryText },
-                            item.secondaryLabel
-                        ),
+                        item.labelHighlight && _react2.default.createElement('span', {
+                            className: classes.labelHighlight,
+                            dangerouslySetInnerHTML: {
+                                __html: (0, _hiHelpers.escapeHTML)(item.labelHighlight)
+                            }
+                        }),
+                        !item.labelHighlight && item.label,
+                        _react2.default.createElement('span', { className: classes.listItemSecondaryText }),
                         childrenIndicator
                     );
             }
@@ -291,27 +271,6 @@ var HiSelectableListItem = function (_React$Component) {
         value: function toggleHover() {
             this.setState({ hover: !this.state.hover });
         }
-    }, {
-        key: 'getItemLabel',
-        value: function getItemLabel(item) {
-            var classes = this.props.classes;
-
-            if (!item.labelHighlight && item.color && this.props.selected) {
-                return _react2.default.createElement(_HiColoredLabel2.default, { color: item.color, label: item.label });
-            } else if (item.labelHighlight) {
-                var mLabel = _react2.default.createElement('span', {
-                    className: item.color ? classes.labelHighlightColored : classes.labelHighlight,
-                    dangerouslySetInnerHTML: {
-                        __html: (0, _hiHelpers.escapeHTML)(item.labelHighlight)
-                    }
-                });
-                if (item.color && this.props.selected) {
-                    return _react2.default.createElement(_HiColoredLabel2.default, { color: item.color, label: mLabel });
-                }
-                return mLabel;
-            }
-            return item.label;
-        }
 
         /**
          * Build list item from type
@@ -478,38 +437,18 @@ HiSelectableListItem.defaultProps = {
     }
 };
 HiSelectableListItem.propTypes = process.env.NODE_ENV !== "production" ? {
-    /**
-     * Affiche une checkbox
-     */
-    checkbox: _propTypes2.default.bool,
-    /**
-     * Icon affiché lorsque l'item est sélectionné
-     */
-    checkedIcon: _propTypes2.default.node,
     /**
      * Useful to extend the style applied to components.
      */
     classes: _propTypes2.default.object,
     /**
-     * Applique le style et désactive le click
-     */
-    disabled: _propTypes2.default.bool,
-    /**
-     * Si "true", liste avec hierarchie
-     */
-    hierarchic: _propTypes2.default.bool,
-    /**
-     * Icon affiché lorsque l'item n'est pas sélectionné et qu'on le survole
-     */
-    hoverIcon: _propTypes2.default.node,
-    /**
-     * Icon affiché lorsque l'item n'est pas sélectionné
+     * État de l'élément
      */
-    icon: _propTypes2.default.node,
+    selected: _propTypes2.default.bool,
     /**
-     * Items sélectionné partiellement
+     * Type de l'élément
      */
-    indeterminate: _propTypes2.default.bool,
+    type: _propTypes2.default.string,
     /**
      * Élément dont la structure attendue dépend du type
      * paramètres requis:
@@ -517,45 +456,65 @@ HiSelectableListItem.propTypes = process.env.NODE_ENV !== "production" ? {
      * - label: string
      */
     item: _propTypes2.default.object.isRequired,
-    /**
-     * Padding par défaut des éléments
-     */
-    leftPadding: _propTypes2.default.number,
     /**
      * Niveau de l'item
      */
     level: _propTypes2.default.number,
     /**
-     * Nombre d'items enfants
+     * Affiche l'item en tant qu'item parent d'un groupe
      */
-    nbChildren: _propTypes2.default.number,
+    parentItem: _propTypes2.default.bool,
     /**
      * Fonction de callback à la sélection de l'élément
      */
     onSelect: _propTypes2.default.func,
     /**
-     * Icon affiché lorsqu'un item parent n'est pas sélectionné
+     * Applique le style et désactive le click
      */
-    parentIcon: _propTypes2.default.node,
+    disabled: _propTypes2.default.bool,
     /**
-     * Affiche l'item en tant qu'item parent d'un groupe
+     * Items sélectionné partiellement
      */
-    parentItem: _propTypes2.default.bool,
+    indeterminate: _propTypes2.default.bool,
     /**
      * Les items parents sont sélectionnables
      */
     parentItemSelectable: _propTypes2.default.bool,
     /**
-     * État de l'élément
+     * Nombre d'items enfants
      */
-    selected: _propTypes2.default.bool,
+    nbChildren: _propTypes2.default.number,
     /**
      * Traductions (par défaut en anglais)
      */
     translations: _propTypes2.default.object,
     /**
-     * Type de l'élément
+     * Icon affiché lorsque l'item n'est pas sélectionné
+     */
+    icon: _propTypes2.default.node,
+    /**
+     * Icon affiché lorsqu'un item parent n'est pas sélectionné
+     */
+    parentIcon: _propTypes2.default.node,
+    /**
+     * Icon affiché lorsque l'item n'est pas sélectionné et qu'on le survole
+     */
+    hoverIcon: _propTypes2.default.node,
+    /**
+     * Icon affiché lorsque l'item est sélectionné
+     */
+    checkedIcon: _propTypes2.default.node,
+    /**
+     * Affiche une checkbox
+     */
+    checkbox: _propTypes2.default.bool,
+    /**
+     * Si "true", liste avec hierarchie
+     */
+    hierarchic: _propTypes2.default.bool,
+    /**
+     * Padding par défaut des éléments
      */
-    type: _propTypes2.default.string
+    leftPadding: _propTypes2.default.number
 } : {};
 exports.default = (0, _withStyles2.default)(styles, { name: 'HmuiHiSelectableList' })(HiSelectableListItem);

package/HiSwitch/HiSwitchState.js

@@ -60,7 +60,7 @@ var styles = exports.styles = function styles(theme) {
             maxHeight: 40,
             marginRight: 12,
             padding: 4,
-            backgroundColor: theme.palette.background2,
+            backgroundColor: theme.palette.background1,
             borderRadius: '2px 2px 0 0',
             width: '100%',
             maxWidth: 200,

package/HiSwitch/index.js

@@ -12,12 +12,6 @@ Object.defineProperty(exports, 'default', {
     return _interopRequireDefault(_HiSwitch).default;
   }
 });
-Object.defineProperty(exports, 'HiSwitch', {
-  enumerable: true,
-  get: function get() {
-    return _interopRequireDefault(_HiSwitch).default;
-  }
-});
 
 var _HiSwitchState = require('./HiSwitchState');
 

package/HiTable/BodyCellBuilder.js

@@ -65,42 +65,57 @@ var BodyCellBuilder = function (_React$PureComponent) {
         return _this;
     }
 
-    /**
-     * CollecContextMenuDatas
-     *
-     * définit les données utilisées par le context menu (lookup, exclude, copy, redirect)
-     * - value : valeur sur laquelle on filtre
-     * - label : label de la value (traduite)
-     */
-
-
     (0, _createClass3.default)(BodyCellBuilder, [{
         key: 'collectContextMenuDatas',
-        value: function collectContextMenuDatas() {
-            var _props$data = this.props.data,
-                value = _props$data.value,
-                data = (0, _objectWithoutProperties3.default)(_props$data, ['value']);
-
-
-            var contextLabel = data.label ? data.label : value;
-
+        value: function collectContextMenuDatas(props) {
+            var label = '';
+            var value = null;
             switch (this.props.type) {
-
+                case cst.TYPE_ADDRESS:
+                    label = this.props.datas.name + ' ' + this.props.datas.streetAddress + ' ' + this.props.datas.city + ' ' + this.props.datas.postalCode + ' ' + this.props.datas.isoCountry;
+                    break;
+                case cst.TYPE_SENTINEL:
+                    label = this.props.datas.score + '|' + this.props.datas.fraudResult;
+                    if (this.props.smartDecision && typeof this.props.datas.automaticFraudReviewResult !== 'undefined') {
+                        label += '|' + this.props.datas.automaticFraudReviewResult;
+                    }
+                    break;
+                case cst.TYPE_ACCOUNT:
+                case cst.TYPE_ACCOUNT_NUMBER:
+                case cst.TYPE_ICON:
+                case cst.TYPE_IMAGE:
+                case cst.TYPE_NUMERIC:
+                case cst.TYPE_TEXT:
+                default:
+                    label = this.props.datas.value;
+                    break;
                 case cst.TYPE_DATE:
                     var options = { year: 'numeric', month: '2-digit', day: '2-digit' };
-                    var date = new Date(value);
-                    contextLabel = date.toLocaleString(this.props.dateLocale, options);
+                    var date = new Date(this.props.datas.value);
+                    label = date.toLocaleString(this.props.dateLocale, options);
+                    value = this.props.datas.value;
                     break;
-
                 case cst.TYPE_RATE:
-                    contextLabel = (0, _hiHelpers.formatRate)(value, this.props.view, this.props.numberLocale);
+                    label = (0, _hiHelpers.formatRate)(this.props.datas.value, this.props.view, this.props.numberLocale);
+                    value = this.props.datas.value;
+                    break;
+                case cst.TYPE_THIRD_PARTY_SECURITY:
+                case cst.TYPE_STATUS:
+                    label = this.props.datas.value;
+                    value = this.props.datas.code;
+                    break;
+                case cst.TYPE_COUNTRY:
+                    label = this.props.datas.value;
+                    value = this.props.datas.isoCode;
                     break;
             }
-
+            if (value === null) {
+                value = label;
+            }
             return {
                 id: this.props.checkboxValue,
                 column: this.props.colId,
-                label: contextLabel,
+                label: label,
                 value: value
             };
         }
@@ -110,9 +125,10 @@ var BodyCellBuilder = function (_React$PureComponent) {
             var _props = this.props,
                 ukey = _props.ukey,
                 type = _props.type,
-                data = _props.data,
+                datas = _props.datas,
                 view = _props.view,
                 width = _props.width,
+                fixedWidth = _props.fixedWidth,
                 padding = _props.padding,
                 align = _props.align,
                 dense = _props.dense,
@@ -126,15 +142,14 @@ var BodyCellBuilder = function (_React$PureComponent) {
                 childrenCount = _props.childrenCount,
                 onOpenDetails = _props.onOpenDetails,
                 lookedUp = _props.lookedUp,
-                fixedColumnWidth = _props.fixedColumnWidth,
-                disableContextMenu = _props.disableContextMenu,
-                props = (0, _objectWithoutProperties3.default)(_props, ['ukey', 'type', 'data', 'view', 'width', 'padding', 'align', 'dense', 'ellipsis', 'onSelect', 'selectable', 'selected', 'sticky', 'dateLocale', 'numberLocale', 'childrenCount', 'onOpenDetails', 'lookedUp', 'fixedColumnWidth', 'disableContextMenu']);
+                props = (0, _objectWithoutProperties3.default)(_props, ['ukey', 'type', 'datas', 'view', 'width', 'fixedWidth', 'padding', 'align', 'dense', 'ellipsis', 'onSelect', 'selectable', 'selected', 'sticky', 'dateLocale', 'numberLocale', 'childrenCount', 'onOpenDetails', 'lookedUp']);
 
 
             var layoutProps = {
                 type: type,
                 view: view,
                 width: width,
+                fixedWidth: fixedWidth,
                 align: align,
                 dense: dense,
                 onSelect: onSelect,
@@ -143,40 +158,37 @@ var BodyCellBuilder = function (_React$PureComponent) {
                 selected: selected,
                 sticky: sticky,
                 childrenCount: childrenCount,
-                lookedUp: lookedUp,
-                fixedColumnWidth: fixedColumnWidth
+                lookedUp: lookedUp
             };
 
-            var cellContent = void 0;
-            if (typeof data !== 'undefined') {
-
-                var cellElement = void 0;
+            var cellElement = void 0;
 
+            if (typeof datas !== 'undefined') {
                 switch (type) {
                     case cst.TYPE_ACCOUNT:
-                        cellElement = _react2.default.createElement(_BodyCells.CellAccount, { value: data.value, color: data.color, sticky: sticky });
+                        cellElement = _react2.default.createElement(_BodyCells.CellAccount, { value: datas.value, color: datas.color, sticky: sticky });
                         break;
 
                     case cst.TYPE_ACCOUNT_NUMBER:
                         cellElement = _react2.default.createElement(_BodyCells.CellAccountNumber, {
-                            value: data.value,
-                            country: data.country,
-                            expirationDate: data.expirationDate,
-                            expirationDateLabel: data.expirationDateLabel,
-                            statusColor: data.statusColor,
-                            issuer: data.issuer,
+                            value: datas.value,
+                            country: datas.country,
+                            expirationDate: datas.expirationDate,
+                            expirationDateLabel: datas.expirationDateLabel,
+                            statusColor: datas.statusColor,
+                            issuer: datas.issuer,
                             sticky: sticky
                         });
                         break;
 
                     case cst.TYPE_ADDRESS:
                         cellElement = _react2.default.createElement(_BodyCells.CellAddress, {
-                            name: data.name,
-                            streetAddress: data.value,
-                            city: data.city,
-                            postalCode: data.postalCode,
-                            country: data.country,
-                            isoCountry: data.isoCountry,
+                            name: datas.name,
+                            streetAddress: datas.streetAddress,
+                            city: datas.city,
+                            postalCode: datas.postalCode,
+                            country: datas.country,
+                            isoCountry: datas.isoCountry,
                             view: view,
                             sticky: sticky
                         });
@@ -184,9 +196,8 @@ var BodyCellBuilder = function (_React$PureComponent) {
 
                     case cst.TYPE_COUNTRY:
                         cellElement = _react2.default.createElement(_BodyCells.CellCountry, {
-                            label: data.label ? data.label : data.value,
-                            path: data.img,
-                            value: data.value,
+                            value: datas.value,
+                            isoCode: datas.isoCode,
                             view: view,
                             sticky: sticky
                         });
@@ -194,7 +205,7 @@ var BodyCellBuilder = function (_React$PureComponent) {
 
                     case cst.TYPE_DATE:
                         cellElement = _react2.default.createElement(_BodyCells.CellDate, {
-                            value: data.value,
+                            value: datas.value,
                             locale: dateLocale,
                             view: view,
                             displayTime: props.displayTime,
@@ -203,10 +214,10 @@ var BodyCellBuilder = function (_React$PureComponent) {
                         break;
 
                     case cst.TYPE_ICON:
+                        if (view === cst.VIEWS.SMALL) layoutProps.fixedWidth = true;
                         cellElement = _react2.default.createElement(_BodyCells.CellIcon, {
-                            value: data.label ? data.label : data.value,
-                            icon: data.icon,
-                            color: data.color,
+                            value: datas.value,
+                            icon: datas.icon,
                             view: view,
                             sticky: sticky
                         });
@@ -214,9 +225,8 @@ var BodyCellBuilder = function (_React$PureComponent) {
 
                     case cst.TYPE_IMAGE:
                         cellElement = _react2.default.createElement(_BodyCells.CellImage, {
-                            value: data.label ? data.label : data.value,
-                            path: data.img,
-                            size: this.props.size,
+                            value: datas.value,
+                            path: datas.path,
                             view: view,
                             sticky: sticky
                         });
@@ -224,9 +234,8 @@ var BodyCellBuilder = function (_React$PureComponent) {
 
                     case cst.TYPE_NUMERIC:
                         cellElement = _react2.default.createElement(_BodyCells.CellNumeric, {
-                            value: data.value,
-                            currency: data.currency,
-                            precision: data.precision,
+                            value: datas.value,
+                            currency: datas.currency,
                             locale: numberLocale,
                             view: view,
                             sticky: sticky
@@ -235,10 +244,10 @@ var BodyCellBuilder = function (_React$PureComponent) {
 
                     case cst.TYPE_RATE:
                         cellElement = _react2.default.createElement(_BodyCells.CellRate, {
-                            value: data.value,
-                            isPositive: data.isPositive,
-                            trendchip: data.trendchip,
-                            indicator: data.indicator,
+                            value: datas.value,
+                            isPositive: datas.isPositive,
+                            trendchip: datas.trendchip,
+                            indicator: datas.indicator,
                             locale: numberLocale,
                             view: view,
                             sticky: sticky
@@ -247,10 +256,10 @@ var BodyCellBuilder = function (_React$PureComponent) {
 
                     case cst.TYPE_SENTINEL:
                         cellElement = _react2.default.createElement(_BodyCells.CellSentinel, {
-                            score: data.score,
-                            fraudResult: data.value,
-                            automaticFraudReviewResult: data.automaticFraudReviewResult,
-                            pendingManualAction: data.pendingManualAction,
+                            score: datas.score,
+                            fraudResult: datas.fraudResult,
+                            automaticFraudReviewResult: datas.automaticFraudReviewResult,
+                            pendingManualAction: datas.pendingManualAction,
                             smartDecision: props.smartDecision,
                             sticky: sticky
                         });
@@ -258,9 +267,9 @@ var BodyCellBuilder = function (_React$PureComponent) {
 
                     case cst.TYPE_STATUS:
                         cellElement = _react2.default.createElement(_BodyCells.CellStatus, {
-                            code: data.value,
-                            nbOperations: data.count_operations,
-                            value: data.label ? data.label : data.value,
+                            code: datas.code,
+                            nbOperations: datas.count_operations,
+                            value: datas.value,
                             onOpenDetails: onOpenDetails,
                             sticky: sticky
                         });
@@ -268,9 +277,10 @@ var BodyCellBuilder = function (_React$PureComponent) {
 
                     case cst.TYPE_THIRD_PARTY_SECURITY:
                         layoutProps.align = 'center';
+                        layoutProps.fixedWidth = true;
                         cellElement = _react2.default.createElement(_BodyCells.CellThirdPartySecurity, {
-                            value: data.value,
-                            label: data.label ? data.label : data.value,
+                            value: datas.value,
+                            code: datas.code,
                             sticky: sticky
                         });
                         break;
@@ -279,24 +289,24 @@ var BodyCellBuilder = function (_React$PureComponent) {
                     default:
                         cellElement = _react2.default.createElement(_BodyCells.CellText, {
                             ukey: ukey,
-                            value: data.value,
+                            value: datas.value,
                             ellipsis: ellipsis,
                             view: view,
                             sticky: sticky
                         });
                         break;
                 }
-
-                cellContent = disableContextMenu ? cellElement : _react2.default.createElement(
-                    _reactContextmenu.ContextMenuTrigger,
-                    {
-                        id: 'hitable_context_menu_' + this.props.tabId,
-                        collect: this.collectContextMenuDatas
-                    },
-                    cellElement
-                );
             }
 
+            var cellContent = cellElement ? _react2.default.createElement(
+                _reactContextmenu.ContextMenuTrigger,
+                {
+                    id: 'hitable_context_menu_' + this.props.tabId,
+                    collect: this.collectContextMenuDatas
+                },
+                cellElement
+            ) : cellElement;
+
             return _react2.default.createElement(
                 _BodyCells.CellLayout,
                 layoutProps,
@@ -308,8 +318,7 @@ var BodyCellBuilder = function (_React$PureComponent) {
 }(_react2.default.PureComponent);
 
 BodyCellBuilder.defaultProps = {
-    ellipsis: 'right',
-    disableContextMenu: true
+    ellipsis: 'right'
 };
 exports.default = BodyCellBuilder;
 BodyCellBuilder.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -325,14 +334,10 @@ BodyCellBuilder.propTypes = process.env.NODE_ENV !== "production" ? {
      * Identifiant de la colonne
      */
     colId: _propTypes2.default.string,
-    /**
-     * Données de références
-     */
-    columnDatas: _propTypes2.default.array,
     /**
      * Données relatives au type de la cellule
      */
-    data: _propTypes2.default.object,
+    datas: _propTypes2.default.object,
     /**
      * Locale a utilisée pour l'affichage des dates
      */
@@ -341,19 +346,14 @@ BodyCellBuilder.propTypes = process.env.NODE_ENV !== "production" ? {
      * Densité, défini la hauteur de la ligne
      */
     dense: _propTypes2.default.bool,
-    /**
-     * Active/désactive le menu contextuel au clic droit sur les cellules du tableau
-     */
-    disableContextMenu: _propTypes2.default.bool.isRequired,
     /**
      * Ellipsis
      */
     ellipsis: _propTypes2.default.oneOf(['left', 'right', 'middle', 'name', 'after-first-word']),
     /**
-     * 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,
     /**
      * Recherche lookup sur cette colonne
      */