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

package/HiTable/BodyCells/CellThirdPartySecurity.js

@@ -33,24 +33,23 @@ var _propTypes = require('prop-types');
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _mdiMaterialUi = require('mdi-material-ui');
-
 var _Tooltip = require('../../Tooltip');
 
 var _Tooltip2 = _interopRequireDefault(_Tooltip);
 
 var _styles = require('../../styles');
 
+var _mdiMaterialUi = require('mdi-material-ui');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var styles = exports.styles = {
-    icon: {
-        width: 18,
-        height: 18
-    },
-    nowrap: {
-        whiteSpace: 'nowrap'
-    }
+var styles = exports.styles = function styles(theme) {
+    return {
+        icon: {
+            width: 18,
+            height: 18
+        }
+    };
 };
 
 /**
@@ -72,9 +71,10 @@ var CellThirdPartySecurity = function (_React$PureComponent) {
             var _props = this.props,
                 classes = _props.classes,
                 theme = _props.theme,
-                label = _props.label,
+                code = _props.code,
                 value = _props.value;
 
+
             var ECI_5 = 0; // authenticated
             var ECI_6 = 1; // cardholder not enrolled
             var ECI_7 = 2; //
@@ -83,47 +83,28 @@ var CellThirdPartySecurity = function (_React$PureComponent) {
             var AUTH_2 = 5; // force 3DS
 
             var icon = null;
-            switch (value) {
+            switch (code) {
                 case ECI_5:
-                    icon = _react2.default.createElement(_mdiMaterialUi.Lock, {
-                        className: classes.icon,
-                        style: { color: theme.palette.positive.normal }
-                    });
+                    icon = _react2.default.createElement(_mdiMaterialUi.Lock, { className: classes.icon, style: { color: theme.palette.positive.normal } });
                     break;
                 case ECI_6:
-                    icon = _react2.default.createElement(_mdiMaterialUi.LockOpen, {
-                        className: classes.icon,
-                        style: { color: theme.palette.middle.normal }
-                    });
+                    icon = _react2.default.createElement(_mdiMaterialUi.LockOpen, { className: classes.icon, style: { color: theme.palette.middle.normal } });
                     break;
                 case AUTH_1:
-                    icon = _react2.default.createElement(_mdiMaterialUi.LockOpenOutline, {
-                        className: classes.icon,
-                        style: { color: theme.palette.neutral.light }
-                    });
+                    icon = _react2.default.createElement(_mdiMaterialUi.LockOpenOutline, { className: classes.icon, style: { color: theme.palette.neutral.light } });
                     break;
                 case AUTH_2:
-                    icon = _react2.default.createElement(_mdiMaterialUi.LockOpen, {
-                        className: classes.icon,
-                        style: { color: theme.palette.neutral.light }
-                    });
+                    icon = _react2.default.createElement(_mdiMaterialUi.LockOpen, { className: classes.icon, style: { color: theme.palette.neutral.light } });
                     break;
                 case ECI_7:
                 case AUTH_0:
-                default:
                     icon = null;
                     break;
             }
 
-            var tooltipContent = _react2.default.createElement(
-                'div',
-                { className: classes.nowrap },
-                label
-            );
-
             return _react2.default.createElement(
                 _Tooltip2.default,
-                { title: tooltipContent, placement: this.props.sticky ? 'right' : 'bottom' },
+                { title: value, placement: this.props.sticky ? 'right' : 'bottom' },
                 _react2.default.createElement(
                     'div',
                     null,
@@ -140,14 +121,6 @@ CellThirdPartySecurity.propTypes = process.env.NODE_ENV !== "production" ? {
      * Useful to extend the style applied to components.
      */
     classes: _propTypes2.default.object,
-    /**
-     * Label
-     */
-    label: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]),
-    /**
-     * True si la colonne est sticky
-     */
-    sticky: _propTypes2.default.bool,
     /**
      * Useful to extend the theme applied to components.
      * Used theme props positive.normal, middle.normal, neutral.light
@@ -162,6 +135,10 @@ CellThirdPartySecurity.propTypes = process.env.NODE_ENV !== "production" ? {
      * AUTH_1 = 4; // ask for 3DS
      * AUTH_2 = 5; // force 3DS
      */
-    value: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string])
+    code: _propTypes2.default.number,
+    /**
+     * Label
+     */
+    value: _propTypes2.default.string
 } : {};
 exports.default = (0, _styles.withStyles)(styles, { withTheme: true, name: 'HmuiCellThirdPartySecurity' })(CellThirdPartySecurity);

package/HiTable/BodyRow.js

@@ -112,12 +112,6 @@ var BodyRow = function (_React$PureComponent) {
 
         var _this = (0, _possibleConstructorReturn3.default)(this, (BodyRow.__proto__ || (0, _getPrototypeOf2.default)(BodyRow)).call(this));
 
-        _this.handleOpenRowDetails = function (type) {
-            return function () {
-                _this.props.onOpenRowDetails(_this.props.row.rowId, type);
-            };
-        };
-
         _this.state = {
             live: props.live,
             style: {
@@ -171,6 +165,11 @@ var BodyRow = function (_React$PureComponent) {
                 this.props.onClick(this.props.row);
             }
         }
+    }, {
+        key: 'handleOpenRowDetails',
+        value: function handleOpenRowDetails() {
+            this.props.onOpenRowDetails(this.props.row.rowId);
+        }
     }, {
         key: 'handleSelect',
         value: function handleSelect() {
@@ -186,7 +185,6 @@ var BodyRow = function (_React$PureComponent) {
                 theme = _props.theme,
                 row = _props.row,
                 columns = _props.columns,
-                lookupColumns = _props.lookupColumns,
                 orderedColumns = _props.orderedColumns,
                 selectable = _props.selectable,
                 selected = _props.selected,
@@ -198,11 +196,11 @@ var BodyRow = function (_React$PureComponent) {
                 sticky = _props.sticky,
                 innerRow = _props.innerRow,
                 isDetail = _props.isDetail,
-                detailRowsOptions = _props.detailRowsOptions,
-                other = (0, _objectWithoutProperties3.default)(_props, ['classes', 'theme', 'row', 'columns', 'lookupColumns', 'orderedColumns', 'selectable', 'selected', 'onClick', 'view', 'dense', 'dateLocale', 'numberLocale', 'sticky', 'innerRow', 'isDetail', 'detailRowsOptions']);
+                other = (0, _objectWithoutProperties3.default)(_props, ['classes', 'theme', 'row', 'columns', 'orderedColumns', 'selectable', 'selected', 'onClick', 'view', 'dense', 'dateLocale', 'numberLocale', 'sticky', 'innerRow', 'isDetail']);
             var style = this.state.style;
 
 
+            var firstCol = true;
             var unfixedCol = true;
 
             var rowStyle = (0, _extends3.default)({}, style, {
@@ -215,19 +213,6 @@ var BodyRow = function (_React$PureComponent) {
             // If there is no datas don't display the row
             if (!row.hasOwnProperty('datas')) return false;
 
-            var detailsInfos = {};
-            if (row.details && row.details.length > 0) {
-                detailsInfos = row.details.reduce(function (memo, item) {
-                    if (item.rows.length > 0 && detailRowsOptions[item.type] && detailRowsOptions[item.type].anchor) {
-                        memo[detailRowsOptions[item.type].anchor] = (0, _extends3.default)({
-                            type: item.type,
-                            total: item.rows.length
-                        }, detailRowsOptions[item.type]);
-                    }
-                    return memo;
-                }, {});
-            }
-
             return _react2.default.createElement(
                 _Table.TableRow,
                 {
@@ -245,85 +230,67 @@ var BodyRow = function (_React$PureComponent) {
                     key: row.rowId + '-left-cell',
                     className: patchDivClass
                 }),
-                orderedColumns.map(function (colRef, index) {
-
-                    // Dynamic column settings (from OrderColumns)
+                orderedColumns.map(function (colRef) {
                     var colRefId = colRef.colId,
                         displayed = colRef.displayed,
                         colView = colRef.view,
                         colRefProps = (0, _objectWithoutProperties3.default)(colRef, ['colId', 'displayed', 'view']);
 
-
-                    if (displayed === false) return null;
-
-                    // the first column is sticky (except checkbox)
-                    var first = index === 0;
-
-                    // Static column settings
-                    var _columns$colRefId = columns[colRefId],
-                        colId = _columns$colRefId.colId,
-                        align = _columns$colRefId.align,
-                        colData = _columns$colRefId.data,
-                        ellipsis = _columns$colRefId.ellipsis,
-                        fixedWidth = _columns$colRefId.fixedWidth,
-                        type = _columns$colRefId.type,
-                        width = _columns$colRefId.width,
-                        columnProps = (0, _objectWithoutProperties3.default)(_columns$colRefId, ['colId', 'align', 'data', 'ellipsis', 'fixedWidth', 'type', 'width']);
-
-                    // view define in OrderColumn or table prop view by default
-
-                    var effectiveView = colView || view;
-
-                    // add clickable badge in cell to open children
-                    var isParentAnchor = row.hasOwnProperty('parentAnchorColumn') && row.parentAnchorColumn === colId && row.hasOwnProperty('children') && row.children.length > 0;
-
-                    // the first non fixed column is the only one not fixed
-                    var unfixed = unfixedCol && fixedWidth !== true;
-                    unfixedCol = unfixed ? false : unfixedCol;
-
-                    // add lookedUp style
-                    var lookedUp = Array.isArray(lookupColumns) && lookupColumns.includes(colId);
-
-                    // Cell data
-                    var data = row.datas[colRefId];
-                    // Get object data for column based on reference datas
-                    if (data !== undefined && colData !== undefined) {
-                        var colItem = colData.find(function (item) {
-                            return item.id === data.value;
-                        });
-                        if (colItem) {
-                            // Hydrate data object with reference item
-                            data = (0, _extends3.default)({}, colItem, data);
+                    if (displayed !== false) {
+                        // the first column is sticky (except checkbox)
+                        var first = firstCol;
+                        firstCol = false;
+                        var _columns$colRef$colId = columns[colRef.colId],
+                            colId = _columns$colRef$colId.colId,
+                            align = _columns$colRef$colId.align,
+                            datas = _columns$colRef$colId.datas,
+                            ellipsis = _columns$colRef$colId.ellipsis,
+                            fixedWidth = _columns$colRef$colId.fixedWidth,
+                            type = _columns$colRef$colId.type,
+                            width = _columns$colRef$colId.width,
+                            columnProps = (0, _objectWithoutProperties3.default)(_columns$colRef$colId, ['colId', 'align', 'datas', 'ellipsis', 'fixedWidth', 'type', 'width']);
+
+                        var data = row.datas[colRef.colId];
+
+                        var effectiveView = colView || view;
+                        // add clickable badge in cell to open children
+                        var isParentAnchor = row.hasOwnProperty('parentAnchorColumn') && row.parentAnchorColumn === colId && row.hasOwnProperty('children') && row.children.length > 0;
+
+                        // the first non fixed column is the only one not fixed
+                        var unfixed = unfixedCol && fixedWidth !== true;
+                        unfixedCol = unfixedCol && fixedWidth !== true ? false : unfixedCol;
+
+                        var lookedUp = false;
+                        if (_this3.props.lookupColumns && _this3.props.lookupColumns.includes(colId)) {
+                            lookedUp = true;
                         }
-                    }
 
-                    return _react2.default.createElement(_BodyCellBuilder2.default, (0, _extends3.default)({}, other, {
-                        key: row.rowId + '-' + colId + '-cell',
-                        ukey: row.rowId + '-' + colId + '-cell',
-                        checkboxValue: row.rowId,
-                        type: type,
-                        data: data,
-                        ellipsis: ellipsis,
-                        align: align,
-                        view: effectiveView,
-                        padding: cst.DEFAULT_PADDING[view],
-                        width: width,
-                        fixedWidth: !unfixed,
-                        sticky: sticky && first,
-                        selectable: selectable && first,
-                        dateLocale: dateLocale,
-                        numberLocale: numberLocale,
-                        dense: dense,
-                        selected: selected,
-                        onSelect: _this3.handleSelect
-                    }, detailsInfos[colId] && {
-                        onOpenDetails: _this3.handleOpenRowDetails(detailsInfos[colId].type),
-                        detailInfos: detailsInfos[colId]
-                    }, {
-                        childrenCount: isParentAnchor ? row.children.length : null,
-                        colId: colId,
-                        lookedUp: lookedUp
-                    }, columnProps, colRefProps));
+                        return _react2.default.createElement(_BodyCellBuilder2.default, (0, _extends3.default)({}, other, {
+                            key: row.rowId + '-' + colId + '-cell',
+                            ukey: row.rowId + '-' + colId + '-cell',
+                            checkboxValue: row.rowId,
+                            type: type,
+                            datas: data,
+                            ellipsis: ellipsis,
+                            align: align,
+                            view: effectiveView,
+                            padding: cst.DEFAULT_PADDING[view],
+                            width: width,
+                            fixedWidth: !unfixed,
+                            sticky: sticky && first,
+                            selectable: selectable && first,
+                            dateLocale: dateLocale,
+                            numberLocale: numberLocale,
+                            dense: dense,
+                            selected: selected,
+                            onSelect: _this3.handleSelect,
+                            onOpenDetails: _this3.handleOpenRowDetails,
+                            childrenCount: isParentAnchor ? row.children.length : null,
+                            colId: colId,
+                            lookedUp: lookedUp
+                        }, columnProps, colRefProps));
+                    }
+                    return null;
                 }),
                 _react2.default.createElement(_Table.TableCell, {
                     style: {
@@ -348,9 +315,7 @@ BodyRow.defaultProps = {
     sticky: false,
     live: false,
     innerRow: false,
-    lookupColumns: [],
-    fixedColumnWidth: true,
-    detailRowsOptions: {}
+    lookupColumns: []
 };
 BodyRow.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -361,15 +326,6 @@ BodyRow.propTypes = process.env.NODE_ENV !== "production" ? {
      * Densité d'affichage (joue sur la hauteur des lignes)
      */
     dense: _propTypes2.default.bool,
-    /**
-     * Options utilisées pour décrire le comportement de lignes de détails
-     */
-    detailRowsOptions: _propTypes2.default.object,
-    /**
-     * Fixe la taille des colonnes selon le type de vue
-     * Sinon les colonnes s'adaptent à l'espace disponible
-     */
-    fixedColumnWidth: _propTypes2.default.bool,
     /**
      * Applique le style d'une ligne intégrée a un sous-tableau
      */

package/HiTable/ChildRow.js

@@ -196,8 +196,7 @@ var ChildRow = function (_React$PureComponent) {
                 dense = _props.dense,
                 sticky = _props.sticky,
                 view = _props.view,
-                row = _props.row,
-                other = (0, _objectWithoutProperties3.default)(_props, ['classes', 'theme', 'onClose', 'parentRowId', 'parentRowDatas', 'parentIndicatorColumn', 'parentLabel', 'parentLabelIcon', 'children', 'columns', 'orderedColumns', 'selectable', 'selected', 'dateLocale', 'dense', 'sticky', 'view', 'row']);
+                other = (0, _objectWithoutProperties3.default)(_props, ['classes', 'theme', 'onClose', 'parentRowId', 'parentRowDatas', 'parentIndicatorColumn', 'parentLabel', 'parentLabelIcon', 'children', 'columns', 'orderedColumns', 'selectable', 'selected', 'dateLocale', 'dense', 'sticky', 'view']);
 
 
             var indicator = '';
@@ -226,7 +225,10 @@ var ChildRow = function (_React$PureComponent) {
                         _Table.TableBody,
                         null,
                         _react2.default.createElement(_BodyRow2.default, (0, _extends3.default)({
-                            row: row,
+                            row: {
+                                rowId: parentRowId,
+                                datas: parentRowDatas
+                            },
                             selectable: selectable,
                             selected: selected,
                             columns: columns,
@@ -362,6 +364,10 @@ ChildRow.propTypes = process.env.NODE_ENV !== "production" ? {
      * Données de la ligne parente
      */
     parentRowDatas: _propTypes2.default.object.isRequired,
+    /**
+     * Ligne des détails de la ligne parente
+     */
+    parentDetailRows: _propTypes2.default.array,
     /**
      * Indicateur du sous-ensemble (en général la date)
      */

package/HiTable/ColumnFilter.js

@@ -5,10 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.styles = undefined;
 
-var _set = require('babel-runtime/core-js/set');
-
-var _set2 = _interopRequireDefault(_set);
-
 var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');
 
 var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);
@@ -225,13 +221,9 @@ var ColumnFilter = function (_React$Component) {
     }, {
         key: 'selectAllFilters',
         value: function selectAllFilters() {
-            this.setState(function (prevState) {
-                return {
-                    selectedIdList: [].concat((0, _toConsumableArray3.default)(new _set2.default([].concat((0, _toConsumableArray3.default)(prevState.selectedIdList), (0, _toConsumableArray3.default)(prevState.suggestions.map(function (item) {
-                        return item.id;
-                    }))))))
-                };
-            });
+            this.setState({ selectedIdList: this.state.suggestions.map(function (item) {
+                    return item.id;
+                }) });
         }
 
         /**
@@ -241,15 +233,15 @@ var ColumnFilter = function (_React$Component) {
     }, {
         key: 'deselectAllFilters',
         value: function deselectAllFilters() {
-            this.setState(function (prevState) {
-                return {
-                    selectedIdList: prevState.selectedIdList.filter(function (item) {
-                        return prevState.suggestions.find(function (suggestion) {
-                            return suggestion.id === item;
-                        }) === undefined;
-                    })
-                };
+            var _this2 = this;
+
+            var selectedIdList = this.state.selectedIdList;
+            this.state.suggestions.map(function (item) {
+                if (_this2.state.selectedIdList.includes(item.id)) {
+                    selectedIdList.splice(_this2.state.selectedIdList.indexOf(item.id), 1);
+                }
             });
+            this.setState({ selectedIdList: selectedIdList });
         }
     }, {
         key: 'handleSort',
@@ -260,7 +252,7 @@ var ColumnFilter = function (_React$Component) {
     }, {
         key: 'render',
         value: function render() {
-            var _this2 = this;
+            var _this3 = this;
 
             var _props = this.props,
                 classes = _props.classes,
@@ -353,11 +345,7 @@ var ColumnFilter = function (_React$Component) {
                 _react2.default.createElement(
                     'div',
                     { className: classes.menuItemFilter },
-                    _react2.default.createElement(
-                        'span',
-                        { style: { marginRight: 4 } },
-                        translations.filter
-                    ),
+                    translations.filter,
                     _react2.default.createElement(
                         _HiPins2.default,
                         {
@@ -394,7 +382,7 @@ var ColumnFilter = function (_React$Component) {
                     itemList: filterValueList,
                     filterPropertyList: ['label'],
                     callbackFilteredList: function callbackFilteredList(filteredList) {
-                        return _this2.setState({ suggestions: filteredList });
+                        return _this3.setState({ suggestions: filteredList });
                     },
                     placeholder: translations.search
                 }),
@@ -403,8 +391,7 @@ var ColumnFilter = function (_React$Component) {
                     itemList: suggestions,
                     selectedIdList: selectedIdList,
                     onSelect: this.toggleSelectItem,
-                    leftPadding: 28,
-                    checkbox: type !== 'icon'
+                    leftPadding: 28
                 }),
                 _react2.default.createElement(
                     'div',

package/HiTable/HeaderCell.js

@@ -215,7 +215,6 @@ var HeaderCell = function (_React$PureComponent) {
                 classes = _props.classes,
                 type = _props.type,
                 title = _props.title,
-                smallTitle = _props.smallTitle,
                 selectable = _props.selectable,
                 selected = _props.selected,
                 onSelect = _props.onSelect,
@@ -228,7 +227,7 @@ var HeaderCell = function (_React$PureComponent) {
                 dense = _props.dense,
                 _props$width = _props.width,
                 width = _props$width === undefined ? cst.DEFAULT_WIDTHS[type][view] : _props$width,
-                fixedColumnWidth = _props.fixedColumnWidth,
+                fixedWidth = _props.fixedWidth,
                 _props$align = _props.align,
                 align = _props$align === undefined ? cst.ALIGN_RIGHT_TYPES.includes(type) ? 'right' : 'left' : _props$align,
                 sticky = _props.sticky,
@@ -264,22 +263,19 @@ var HeaderCell = function (_React$PureComponent) {
 
             var lookedUpClassName = (0, _classnames2.default)((0, _defineProperty3.default)({}, classes.lookedUp, lookedUp));
 
-            var cellStyle = {
-                padding: 0,
-                zIndex: sticky ? 13 : 12, // la cellule sticky doit être au dessus des autres cellules du header
-                backgroundColor: 'inherit',
-                textAlign: align
-            };
-
-            if (fixedColumnWidth) {
-                cellStyle.maxWidth = _width;
-                cellStyle.minWidth = _width;
-                cellStyle.width = _width;
-            }
-
             return _react2.default.createElement(
                 _Table.TableCell,
-                { style: cellStyle },
+                {
+                    style: {
+                        maxWidth: _width,
+                        minWidth: _width,
+                        width: _width,
+                        padding: 0,
+                        zIndex: sticky ? 13 : 12, // la cellule sticky doit être au dessus des autres cellules du header
+                        backgroundColor: 'inherit',
+                        textAlign: align
+                    }
+                },
                 _react2.default.createElement(
                     'div',
                     null,
@@ -322,7 +318,7 @@ var HeaderCell = function (_React$PureComponent) {
                                 {
                                     className: classes.labelContainer + (_sorted ? ' ' + classes.labelContainerOrdered : '')
                                 },
-                                view !== 's' ? title : smallTitle ? smallTitle : title
+                                title
                             ),
                             align !== 'right' && _icons
                         ) : _react2.default.createElement(
@@ -339,7 +335,7 @@ var HeaderCell = function (_React$PureComponent) {
                             _react2.default.createElement(
                                 'span',
                                 { className: classes.labelContainer, style: { width: '100%' } },
-                                view !== 's' ? title : smallTitle ? smallTitle : title
+                                title
                             )
                         )
                     ),
@@ -370,7 +366,7 @@ HeaderCell.defaultProps = {
     sortDirection: 'asc',
     view: 'l',
     dense: false,
-    fixedColumnWidth: true,
+    fixedWidth: false,
     sticky: true,
     padding: 8
 };
@@ -450,7 +446,7 @@ HeaderCell.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * 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
      */