@hipay/hipay-material-ui 1.0.0-beta.7 → 1.0.0-beta.9

package/es/HiTable/BodyCellBuilder.js

@@ -79,7 +79,6 @@ export default class BodyCellBuilder extends React.PureComponent {
             datas,
             view,
             width,
-            fixedWidth,
             padding,
             align,
             dense,
@@ -92,15 +91,15 @@ export default class BodyCellBuilder extends React.PureComponent {
             numberLocale,
             childrenCount,
             onOpenDetails,
-            lookedUp
+            lookedUp,
+            fixedColumnWidth
         } = _props,
-              props = _objectWithoutProperties(_props, ['ukey', 'type', 'datas', 'view', 'width', 'fixedWidth', 'padding', 'align', 'dense', 'ellipsis', 'onSelect', 'selectable', 'selected', 'sticky', 'dateLocale', 'numberLocale', 'childrenCount', 'onOpenDetails', 'lookedUp']);
+              props = _objectWithoutProperties(_props, ['ukey', 'type', 'datas', 'view', 'width', 'padding', 'align', 'dense', 'ellipsis', 'onSelect', 'selectable', 'selected', 'sticky', 'dateLocale', 'numberLocale', 'childrenCount', 'onOpenDetails', 'lookedUp', 'fixedColumnWidth']);
 
         const layoutProps = {
             type,
             view,
             width,
-            fixedWidth,
             align,
             dense,
             onSelect,
@@ -109,7 +108,8 @@ export default class BodyCellBuilder extends React.PureComponent {
             selected,
             sticky,
             childrenCount,
-            lookedUp
+            lookedUp,
+            fixedColumnWidth
         };
 
         let cellElement;
@@ -165,7 +165,6 @@ export default class BodyCellBuilder extends React.PureComponent {
                     break;
 
                 case cst.TYPE_ICON:
-                    if (view === cst.VIEWS.SMALL) layoutProps.fixedWidth = true;
                     cellElement = React.createElement(CellIcon, {
                         value: datas.value,
                         icon: datas.icon,
@@ -228,7 +227,6 @@ export default class BodyCellBuilder extends React.PureComponent {
 
                 case cst.TYPE_THIRD_PARTY_SECURITY:
                     layoutProps.align = 'center';
-                    layoutProps.fixedWidth = true;
                     cellElement = React.createElement(CellThirdPartySecurity, {
                         value: datas.value,
                         code: datas.code,
@@ -298,9 +296,10 @@ BodyCellBuilder.propTypes = process.env.NODE_ENV !== "production" ? {
      */
     ellipsis: PropTypes.oneOf(['left', 'right', 'middle', 'name', 'after-first-word']),
     /**
-     * La largeur de la cellule est fixé (toutes les colonnes sauf une)
+     * Fixe la taille des colonnes selon le type de vue
+     * Sinon les colonnes s'adaptent à l'espace disponible
      */
-    fixedWidth: PropTypes.bool,
+    fixedColumnWidth: PropTypes.bool,
     /**
      * Recherche lookup sur cette colonne
      */

package/es/HiTable/BodyCells/CellLayout.js

@@ -28,6 +28,10 @@ export const styles = theme => ({
     lookedUp: {
         background: `linear-gradient(0deg, transparent 25%, #FFFF8D 10%, #FFFF8D 75%, transparent 30%)`,
         borderRadius: '45%'
+    },
+    pins: {
+        position: 'relative',
+        top: 3
     }
 });
 
@@ -57,34 +61,35 @@ class CellLayout extends React.Component {
         const {
             classes, type, children,
             align = cst.ALIGN_RIGHT_TYPES.includes(type) ? 'right' : 'left',
-            view, dense, width = cst.DEFAULT_WIDTHS[type][view], fixedWidth, sticky,
+            view, dense, width = cst.DEFAULT_WIDTHS[type][view], fixedColumnWidth, sticky,
             selectable, selected, onSelect, childrenCount, theme, padding,
             lookedUp
         } = this.props;
 
-        let offset = selectable ? dense ? 32 : 40 : 0;
+        const offset = selectable ? dense ? 32 : 40 : 0;
 
         // Inclus le padding et/ou la checkbox dans la largeur de la cellule
-        let _width = width + offset + (selectable ? padding : 2 * padding);
+        const _width = width + offset + (selectable ? padding : 2 * padding);
 
         const lookedUpClassName = classNames(classes.flexContent, { [classes.lookedUp]: lookedUp });
 
+        const cellStyle = {
+            zIndex: sticky ? 12 : 11,
+            textAlign: align,
+            position: sticky ? 'relative' : 'inherit',
+            border: 'none',
+            height: dense ? cst.CELL_HEIGHT_DENSE : cst.CELL_HEIGHT
+        };
+
+        if (fixedColumnWidth) {
+            cellStyle.maxWidth = _width;
+            cellStyle.minWidth = _width;
+            cellStyle.width = _width;
+        }
+
         return React.createElement(
             TableCell,
-            {
-                className: classes.root,
-                style: {
-                    maxWidth: _width,
-                    minWidth: _width,
-                    width: _width,
-                    // la cellule sticky doit être au dessus des autres cellules du body
-                    zIndex: sticky ? 12 : 11,
-                    textAlign: align,
-                    position: sticky ? 'relative' : 'inherit',
-                    border: 'none',
-                    height: dense ? cst.CELL_HEIGHT_DENSE : cst.CELL_HEIGHT
-                }
-            },
+            { className: classes.root, style: cellStyle },
             !!selectable && React.createElement(HiCheckbox, {
                 classes: { root: classes.checkbox },
                 style: { margin: dense ? 6 : 10 },
@@ -115,7 +120,7 @@ class CellLayout extends React.Component {
                     },
                     React.createElement(
                         HiPins,
-                        { color: theme.palette.business.primary.normal },
+                        { color: theme.palette.business.primary.normal, className: classes.pins },
                         childrenCount
                     )
                 )
@@ -129,7 +134,7 @@ CellLayout.defaultProps = {
     selectable: false,
     selected: false,
     dense: false,
-    fixedWidth: false,
+    fixedColumnWidth: true,
     sticky: false,
     padding: 8
 };
@@ -163,9 +168,10 @@ CellLayout.propTypes = process.env.NODE_ENV !== "production" ? {
      */
     width: PropTypes.number,
     /**
-     * La largeur de la cellule est fixé (toutes les colonnes sauf une)
+     * Fixe la taille des colonnes selon le type de vue
+     * Sinon les colonnes s'adaptent à l'espace disponible
      */
-    fixedWidth: PropTypes.bool,
+    fixedColumnWidth: PropTypes.bool,
     /**
      * Title alignement, est déduit de type par défaut
      */

package/es/HiTable/BodyCells/CellSentinel.js

@@ -21,7 +21,7 @@ export const styles = theme => ({
 class CellSentinel extends React.PureComponent {
 
     constructor(props) {
-        super();
+        super(props);
 
         this.getColorFromFraudResult = this.getColorFromFraudResult.bind(this);
     }
@@ -66,7 +66,8 @@ class CellSentinel extends React.PureComponent {
             fraudResult,
             automaticFraudReviewResult,
             pendingManualAction,
-            smartDecision
+            smartDecision,
+            hideFraudResult
         } = this.props;
 
         const scoreLabel = score > 0 ? `+${score}` : `${score}`;
@@ -97,14 +98,14 @@ class CellSentinel extends React.PureComponent {
             { title: tooltipContent, placement: this.props.sticky ? 'right' : 'bottom' },
             React.createElement(
                 'div',
-                null,
+                { style: { textAlign: 'right' } },
                 React.createElement(HiColoredLabel, {
                     label: scoreLabel,
                     color: this.getColorFromFraudResult(fraudResult.toLowerCase()),
                     classes: { root: classes.label },
                     active: pendingManualAction
                 }),
-                React.createElement(HiColoredLabel, {
+                !hideFraudResult && React.createElement(HiColoredLabel, {
                     label: fraudResult.toUpperCase().substr(0, 1),
                     color: this.getColorFromFraudResult(fraudResult),
                     classes: { root: classes.label },
@@ -124,6 +125,9 @@ class CellSentinel extends React.PureComponent {
     }
 }
 
+CellSentinel.defaultProps = {
+    hideFraudResult: false
+};
 CellSentinel.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Résultat de l'automaticFraudReview si la transaction est passée par SmartDecision
@@ -137,6 +141,10 @@ CellSentinel.propTypes = process.env.NODE_ENV !== "production" ? {
      * Résultat de la fraude
      */
     fraudResult: PropTypes.string.isRequired,
+    /**
+     * Si true le fraudResult ne sera pas affiché
+     */
+    hideFraudResult: PropTypes.bool.isRequired,
     /**
      * Signal qu'il attend une réponse manuelle
      */

package/es/HiTable/BodyCells/CellStatus.js

@@ -11,6 +11,10 @@ export const styles = theme => ({
         display: 'inline-flex',
         alignItems: 'baseline',
         maxWidth: 'calc(100% - 36px)'
+    },
+    pins: {
+        position: 'relative',
+        bottom: 1
     }
 });
 
@@ -33,7 +37,7 @@ class CellStatus extends React.PureComponent {
                     React.createElement(HiColoredLabel, { label: value, color: color }),
                     React.createElement(
                         HiPins,
-                        { color: color, onClick: onOpenDetails },
+                        { color: color, onClick: onOpenDetails, className: classes.pins },
                         nbOperations
                     )
                 ) : React.createElement(HiColoredLabel, { label: value, color: color })

package/es/HiTable/BodyCells/CellText.js

@@ -17,7 +17,8 @@ export const styles = theme => ({
         display: 'inline-block',
         overflow: 'hidden',
         textOverflow: 'ellipsis',
-        whiteSpace: 'pre'
+        whiteSpace: 'pre',
+        width: '100%'
     },
     noEllipsisSpan: {
         display: 'inline-block',

package/es/HiTable/BodyRow.js

@@ -241,7 +241,8 @@ BodyRow.defaultProps = {
     sticky: false,
     live: false,
     innerRow: false,
-    lookupColumns: []
+    lookupColumns: [],
+    fixedColumnWidth: true
 };
 BodyRow.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -252,6 +253,11 @@ BodyRow.propTypes = process.env.NODE_ENV !== "production" ? {
      * Densité d'affichage (joue sur la hauteur des lignes)
      */
     dense: PropTypes.bool,
+    /**
+     * Fixe la taille des colonnes selon le type de vue
+     * Sinon les colonnes s'adaptent à l'espace disponible
+     */
+    fixedColumnWidth: PropTypes.bool,
     /**
      * Applique le style d'une ligne intégrée a un sous-tableau
      */

package/es/HiTable/ColumnFilter.js

@@ -253,7 +253,11 @@ class ColumnFilter extends React.Component {
             React.createElement(
                 'div',
                 { className: classes.menuItemFilter },
-                translations.filter,
+                React.createElement(
+                    'span',
+                    { style: { marginRight: 4 } },
+                    translations.filter
+                ),
                 React.createElement(
                     HiPins,
                     {

package/es/HiTable/HeaderCell.js

@@ -141,7 +141,7 @@ class HeaderCell extends React.PureComponent {
             view,
             dense,
             width = cst.DEFAULT_WIDTHS[type][view],
-            fixedWidth,
+            fixedColumnWidth,
             align = cst.ALIGN_RIGHT_TYPES.includes(type) ? 'right' : 'left',
             sticky,
             padding,
@@ -178,19 +178,22 @@ class HeaderCell extends React.PureComponent {
 
         const lookedUpClassName = classNames({ [classes.lookedUp]: lookedUp });
 
+        const 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 React.createElement(
             TableCell,
-            {
-                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
-                }
-            },
+            { style: cellStyle },
             React.createElement(
                 'div',
                 null,
@@ -279,7 +282,7 @@ HeaderCell.defaultProps = {
     sortDirection: 'asc',
     view: 'l',
     dense: false,
-    fixedWidth: false,
+    fixedColumnWidth: true,
     sticky: true,
     padding: 8
 };
@@ -359,7 +362,7 @@ HeaderCell.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * La largeur de la cellule est fixé (toutes les colonnes sauf une)
      */
-    fixedWidth: PropTypes.bool,
+    fixedColumnWidth: PropTypes.bool,
     /**
      * Title alignement, est déduit de type par défaut
      */

package/es/HiTable/HiTable.js

@@ -581,7 +581,9 @@ class HiTable extends React.Component {
             translations,
             view,
             groupBy,
-            lookupColumns
+            lookupColumns,
+            loading,
+            fixedColumnWidth
         } = this.props;
 
         const { dateUpdate, isScrollToBottom, groupByIds } = this.state;
@@ -627,7 +629,8 @@ class HiTable extends React.Component {
                         sticky: sticky,
                         view: view,
                         translations: translations,
-                        lookupColumns: lookupColumns
+                        lookupColumns: lookupColumns,
+                        fixedColumnWidth: fixedColumnWidth
                     }),
                     React.createElement(HiTableBody, {
                         tabId: tabId,
@@ -652,7 +655,9 @@ class HiTable extends React.Component {
                         groupBy: groupBy,
                         onClickNext: this.handleNextStickyRow,
                         groupByIds: groupByIds,
-                        lookupColumns: lookupColumns
+                        lookupColumns: lookupColumns,
+                        loading: loading,
+                        fixedColumnWidth: fixedColumnWidth
                     }),
                     infiniteScroll && React.createElement(HiTableFooterScroll, {
                         tabId: tabId,
@@ -717,7 +722,9 @@ HiTable.defaultProps = {
         }
     },
     view: 'l',
-    lookupColumns: []
+    lookupColumns: [],
+    loading: false,
+    fixedColumnWidth: true
 };
 HiTable.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -748,6 +755,15 @@ HiTable.propTypes = process.env.NODE_ENV !== "production" ? {
      * Active le filtre sur les colonnes filtrables
      */
     filterable: PropTypes.bool,
+    /**
+     * Fixe la taille des colonnes selon le type de vue
+     * Sinon les colonnes s'adaptent à l'espace disponible
+     */
+    fixedColumnWidth: PropTypes.bool,
+    /**
+     * Id de la colonne par laquelle sont regroupé les éléments
+     */
+    groupBy: PropTypes.string,
     /**
      * Ajoute le loader et le requestNextDatas en fin de tableau (si infiniteScroll activé)
      */
@@ -760,6 +776,10 @@ HiTable.propTypes = process.env.NODE_ENV !== "production" ? {
      * Ajoute l'infinite scroll
      */
     infiniteScroll: PropTypes.bool,
+    /**
+     * État du tableau en cours de chargement des données
+     */
+    loading: PropTypes.bool,
     /**
      * Identifiant de la ou des colonnes sur la/lesquelles il y a une 'lookup' search
      */
@@ -867,10 +887,6 @@ HiTable.propTypes = process.env.NODE_ENV !== "production" ? {
      * Taille du tableau (L/M/S),
      * définit l'espace entre les cellules et leurs tailles par default
      */
-    view: PropTypes.oneOf(['l', 'm', 's']),
-    /**
-     * Id de la colonne par laquelle sont regroupé les éléments
-     */
-    groupBy: PropTypes.string
+    view: PropTypes.oneOf(['l', 'm', 's'])
 } : {};
 export default withStyles(styles, { withTheme: true, name: 'HmuiHiTable' })(HiTable);

package/es/HiTable/HiTableBody.js

@@ -2,23 +2,24 @@ import _extends from 'babel-runtime/helpers/extends';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { TableBody, TableRow } from 'material-ui/Table';
-import { withStyles, withTheme } from '../styles';
+import classNames from 'classnames';
+import { withStyles } from '../styles';
 import BodyRow from './BodyRow';
 import ChildRow from './ChildRow';
 import HiStickyRow from './HiStickyRow';
 import * as cst from './constants';
-import { SORTED_COLUMN_ERROR_MESSAGE } from './HiTableHead';
-import isRequiredIf from 'react-proptype-conditional-require';
 
 export const styles = theme => ({
     tbody: {
         position: 'relative',
-        display: 'block' /* seperates the tbody from the header */
-        , width: '100%',
+        width: '100%',
         overflowX: 'hidden',
         overflowY: 'auto',
         zIndex: 11
     },
+    tbodyFixedWidth: {
+        display: 'block' /* seperates the tbody from the header */
+    },
     tbodyRows: {
         backgroundColor: theme.palette.background3
     },
@@ -191,7 +192,9 @@ class HiTableBody extends React.Component {
             numberLocale,
             groupByIds,
             sortedColumnId,
-            lookupColumns
+            lookupColumns,
+            loading,
+            fixedColumnWidth
         } = this.props;
 
         const { openedParentRowId, openedDetailsRowIdList } = this.state;
@@ -288,7 +291,8 @@ class HiTableBody extends React.Component {
                 row,
                 sticky,
                 tabId,
-                view
+                view,
+                fixedColumnWidth
             });
 
             if (hasChildren && openedParentRowId === row.rowId) {
@@ -317,7 +321,8 @@ class HiTableBody extends React.Component {
                         view,
                         dense,
                         sticky,
-                        isDetail: true
+                        isDetail: true,
+                        fixedColumnWidth
                     };
 
                     tableRows.push(React.createElement(BodyRow, _extends({ key: `${row.rowId}-${detailRow.rowId}` }, detailRowProps)));
@@ -325,12 +330,20 @@ class HiTableBody extends React.Component {
             }
         });
 
+        const tBodyClasses = classNames(classes.tbody, {
+            [classes.tbodyFixedWidth]: fixedColumnWidth
+        });
+
         return React.createElement(
             TableBody,
             {
                 id: `${tabId}-body`,
-                className: classes.tbody,
-                style: { height },
+                className: tBodyClasses,
+                style: _extends({
+                    height
+                }, loading && {
+                    opacity: 0.6
+                }),
                 onScroll: onScroll
             },
             tableRows.map(tableRow => {
@@ -349,7 +362,8 @@ HiTableBody.defaultProps = {
     dense: false,
     height: 450,
     sticky: true,
-    view: 'l'
+    view: 'l',
+    loading: false
 };
 HiTableBody.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -377,10 +391,19 @@ HiTableBody.propTypes = process.env.NODE_ENV !== "production" ? {
      * Densité d'affichage (joue sur la hauteur des lignes)
      */
     dense: PropTypes.bool,
+    /**
+     * Fixe la taille des colonnes selon le type de vue
+     * Sinon les colonnes s'adaptent à l'espace disponible
+     */
+    fixedColumnWidth: PropTypes.bool,
     /**
      * Hauteur du tableau (px)
      */
     height: PropTypes.number,
+    /**
+     * État du tableau en cours de chargement des données
+     */
+    loading: PropTypes.bool,
     /**
      * Identifiant de la ou des colonnes sur la/lesquelles il y a une 'lookup' search
      */

package/es/HiTable/HiTableHead.js

@@ -3,6 +3,7 @@ import React from 'react';
 import { findDOMNode } from 'react-dom';
 import PropTypes from 'prop-types';
 import isRequiredIf from 'react-proptype-conditional-require';
+import classNames from 'classnames';
 
 import { TableHead, TableRow, TableCell } from 'material-ui/Table';
 import PlusCircleIcon from 'mdi-material-ui/PlusCircle';
@@ -18,11 +19,13 @@ import { MANDATORY_COLUMN_ERROR_MESSAGE } from './HiTable';
 export const styles = theme => ({
     thead: {
         position: 'relative',
-        display: 'block' /*seperates the header from the body allowing it to be positioned*/
-        , width: '100%',
+        width: '100%',
         overflow: 'visible',
         zIndex: 12
     },
+    theadFixedWidth: {
+        display: 'block' /*seperates the header from the body allowing it to be positioned*/
+    },
     theadRow: {
         backgroundColor: theme.palette.background3,
         zIndex: 12
@@ -148,13 +151,16 @@ class HiTableHead extends React.Component {
             sticky,
             translations,
             view,
-            lookupColumns
+            lookupColumns,
+            fixedColumnWidth
         } = this.props;
 
         const { hovered, openedOrderColumns, orderColumnsAnchorEl } = this.state;
 
         let headerProps = _extends({
-            className: classes.thead
+            className: classNames(classes.thead, {
+                [classes.theadFixedWidth]: fixedColumnWidth
+            })
         }, orderable && { onMouseEnter: this.handleEvent, onMouseLeave: this.handleEvent });
 
         let unfixedColumnIsSet = false,
@@ -221,7 +227,8 @@ class HiTableHead extends React.Component {
                             fixedWidth: fixed,
                             align: column['align'],
                             sticky: firstColumn && sticky,
-                            lookedUp: lookupColumns.includes(column.colId)
+                            lookedUp: lookupColumns.includes(column.colId),
+                            fixedColumnWidth: fixedColumnWidth
                         });
                     }
                 }),
@@ -329,6 +336,11 @@ HiTableHead.propTypes = process.env.NODE_ENV !== "production" ? {
      * Active le filtre sur les colonnes filtrables
      */
     filterable: PropTypes.bool,
+    /**
+     * Fixe la taille des colonnes selon le type de vue
+     * Sinon les colonnes s'adaptent à l'espace disponible
+     */
+    fixedColumnWidth: PropTypes.bool,
     /**
      * Identifiant de la ou des colonnes sur la/lesquelles il y a une 'lookup' search
      */

package/es/HiTable/OrderColumns.js

@@ -63,7 +63,8 @@ export const styles = theme => ({
     controlLabelRoot: {
         marginLeft: 6,
         marginBottom: 8,
-        fontSize: 15
+        fontSize: 15,
+        width: 160
     },
     switchLabelRoot: {
         marginLeft: 15,
@@ -72,7 +73,10 @@ export const styles = theme => ({
     columnLabel: {
         position: 'relative',
         top: 5,
-        left: 5
+        left: 5,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap'
     },
     label: {
         fontWeight: 'inherit'

package/es/styles/createHiMuiTheme.js

@@ -89,6 +89,9 @@ const light = {
         appBar: '#fff',
         paper: '#fff',
         default: grey[50]
+    },
+    dot: {
+        neutral: '#707070'
     }
 };
 
@@ -156,6 +159,9 @@ const dark = {
         appBar: '#fff',
         paper: '#fff',
         default: grey[50]
+    },
+    dot: {
+        neutral: '#707070'
     }
 };
 
@@ -275,6 +281,7 @@ function createHiMuiTheme(options = {}) {
         inputDisabled: shades[type].inputDisabled,
         tableLine: shades[type].tableLine,
         background: shades[type].background,
+        dot: shades[type].dot,
         status: statusPalette,
         primary: blue,
         secondary: yellow

package/index.es.js

@@ -1,4 +1,4 @@
-/** @license Material-UI v1.0.0-beta.7
+/** @license Material-UI v1.0.0-beta.9
  *
  * 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.7
+/** @license Material-UI v1.0.0-beta.9
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.