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

package/es/HiTable/BodyCells/CellText.js

@@ -1,11 +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',
@@ -17,17 +19,16 @@ 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.PureComponent {
+class CellText extends React.Component {
 
     constructor(props) {
         super(props);
@@ -43,6 +44,10 @@ class CellText extends React.PureComponent {
         this.buildEllipsis();
     }
 
+    shouldComponentUpdate(nextProps, nextState) {
+        return _JSON$stringify(this.props) !== _JSON$stringify(nextProps) || _JSON$stringify(this.state) !== _JSON$stringify(nextState);
+    }
+
     componentDidUpdate() {
         this.buildEllipsis();
     }
@@ -68,8 +73,9 @@ class CellText extends React.PureComponent {
 
         /**
          * 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) {
@@ -89,13 +95,13 @@ class CellText extends React.PureComponent {
     }
 
     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:
@@ -108,13 +114,19 @@ class CellText extends React.PureComponent {
                 }
                 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',
@@ -130,9 +142,15 @@ class CellText extends React.PureComponent {
                 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 },
@@ -147,7 +165,11 @@ class CellText extends React.PureComponent {
                 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
@@ -156,7 +178,11 @@ class CellText extends React.PureComponent {
 
             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
@@ -178,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/BodyCells/CellThirdPartySecurity.js

@@ -1,3 +1,4 @@
+import _JSON$stringify from 'babel-runtime/core-js/json/stringify';
 // @inheritedComponent CellLayout
 
 import React from 'react';
@@ -19,7 +20,11 @@ export const styles = {
 /**
  * Cette cellule permet d'afficher une icône représentant le statut du 3DS.
  */
-class CellThirdPartySecurity extends React.PureComponent {
+class CellThirdPartySecurity extends React.Component {
+
+    shouldComponentUpdate(nextProps, nextState) {
+        return _JSON$stringify(this.props) !== _JSON$stringify(nextProps) || _JSON$stringify(this.state) !== _JSON$stringify(nextState);
+    }
 
     render() {
         const { classes, theme, label, value } = this.props;

package/es/HiTable/BodyRow.js

@@ -1,5 +1,6 @@
 import _extends from 'babel-runtime/helpers/extends';
 import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+import _JSON$stringify from 'babel-runtime/core-js/json/stringify';
 
 // @inheritedComponent BodyCellBuilder
 import React from 'react';
@@ -8,7 +9,7 @@ import classNames from 'classnames';
 import { TableRow, TableCell } from 'material-ui/Table';
 import { fade } from 'material-ui/styles/colorManipulator';
 import BodyCellBuilder from './BodyCellBuilder';
-import { withStyles, withTheme } from '../styles';
+import { withStyles } from '../styles';
 import * as cst from './constants';
 
 export const styles = theme => ({
@@ -45,7 +46,7 @@ export const styles = theme => ({
     }
 });
 
-class BodyRow extends React.PureComponent {
+class BodyRow extends React.Component {
 
     constructor(props) {
         super();
@@ -67,6 +68,10 @@ class BodyRow extends React.PureComponent {
         this.handleSelect = this.handleSelect.bind(this);
     }
 
+    shouldComponentUpdate(nextProps, nextState) {
+        return _JSON$stringify(this.props) !== _JSON$stringify(nextProps) || _JSON$stringify(this.state) !== _JSON$stringify(nextState);
+    }
+
     componentDidMount() {
         // Live data animation
         if (this.state.live) {

package/es/HiTable/ColumnFilter.js

@@ -30,9 +30,6 @@ export const styles = theme => ({
         padding: 10,
         color: theme.palette.neutral.normal
     },
-    menuItemSortable: {
-        paddingLeft: 8
-    },
     menuItemFilter: _extends({}, theme.typography.body1, {
         color: theme.palette.neutral.dark,
         fontWeight: theme.typography.fontWeightMedium,
@@ -200,7 +197,7 @@ class ColumnFilter extends React.Component {
             ),
             !!sortable && React.createElement(
                 'div',
-                { className: classes.menuItemSortable },
+                null,
                 React.createElement(
                     MenuItem,
                     {

package/es/HiTable/HeaderCell.js

@@ -1,3 +1,4 @@
+import _JSON$stringify from 'babel-runtime/core-js/json/stringify';
 import _extends from 'babel-runtime/helpers/extends';
 import React from 'react';
 import PropTypes from 'prop-types';
@@ -78,18 +79,19 @@ export const styles = theme => ({
 /**
  * Construit une cellule d'entête avec le titre, clickable, triable et filtrable
  */
-class HeaderCell extends React.PureComponent {
+class HeaderCell extends React.Component {
 
     constructor(props) {
         super(props);
 
+        this.anchorEl = null;
+
         this.onFilterClick = (event, columnDataset) => {
             this.openFilterMenu(event, columnDataset);
         };
 
         this.state = {
             filterOpen: false,
-            anchorEl: null,
             menuFilters: []
         };
 
@@ -100,16 +102,21 @@ class HeaderCell extends React.PureComponent {
         this.handleFilterChange = this.handleFilterChange.bind(this);
     }
 
+    shouldComponentUpdate(nextProps, nextState) {
+        return _JSON$stringify(nextProps) !== _JSON$stringify(this.props) || _JSON$stringify(nextState) !== _JSON$stringify(this.state);
+    }
+
     openFilterMenu(event, columnDataset) {
         this.setState({
             filterOpen: true,
-            anchorEl: event.currentTarget,
             menuFilters: columnDataset
         });
+        this.anchorEl = event.currentTarget;
     }
 
     handleClose() {
-        this.setState({ filterOpen: false, anchorEl: null, menuFilters: [] });
+        this.setState({ filterOpen: false, menuFilters: [] });
+        this.anchorEl = null;
     }
 
     /**
@@ -149,7 +156,7 @@ class HeaderCell extends React.PureComponent {
             translations
         } = this.props;
 
-        const { filterOpen, anchorEl, menuFilters } = this.state;
+        const { filterOpen, menuFilters } = this.state;
 
         const offset = selectable ? dense ? 32 : 40 : padding;
 
@@ -233,7 +240,6 @@ class HeaderCell extends React.PureComponent {
                                 _filterable ? this.onFilterClick(event, filterSource) : this.handleSort(sortDirection === 'asc' ? 'desc' : 'asc');
                             }
                         },
-                        align === 'right' && _icons,
                         React.createElement(
                             'span',
                             {
@@ -241,7 +247,7 @@ class HeaderCell extends React.PureComponent {
                             },
                             view !== 's' ? title : smallTitle || title
                         ),
-                        align !== 'right' && _icons
+                        _icons
                     ) : React.createElement(
                         'div',
                         {
@@ -268,7 +274,7 @@ class HeaderCell extends React.PureComponent {
                 filterValueList: menuFilters,
                 isOpen: filterOpen,
                 onClose: this.handleClose,
-                anchorEl: anchorEl,
+                anchorEl: this.anchorEl,
                 sortable: sortable,
                 onSort: this.handleSort,
                 onFilterChange: this.handleFilterChange,
@@ -288,7 +294,8 @@ HeaderCell.defaultProps = {
     dense: false,
     fixedColumnWidth: true,
     sticky: true,
-    padding: 8
+    padding: 8,
+    translations: {}
 };
 HeaderCell.propTypes = process.env.NODE_ENV !== "production" ? {
     /**

package/es/HiTable/HiStickyRow.js

@@ -1,3 +1,4 @@
+import _JSON$stringify from 'babel-runtime/core-js/json/stringify';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { TableRow, TableCell } from 'material-ui/Table';
@@ -71,7 +72,11 @@ 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);
+    }
 
     render() {
         const { classes, dense, colSpan, label, length, index, translations, view } = this.props;
@@ -112,18 +117,24 @@ class HiStickyRow extends React.PureComponent {
                         className: 'stickyRowContent',
                         style: {
                             position: 'relative',
-                            top: dense ? 3 : 2
+                            top: dense ? 3 : 2,
+                            display: 'flex',
+                            alignItems: 'center'
                         }
                     },
                     React.createElement(
-                        'span',
-                        { id: 'sticky-label', className: classes.label },
-                        label
-                    ),
-                    React.createElement(
-                        'span',
-                        { id: 'sticky-badge', style: { position: 'relative' } },
-                        React.createElement(HiChip, { label: length, classes: { root: classes.badgeRoot } })
+                        'div',
+                        null,
+                        React.createElement(
+                            'span',
+                            { id: 'sticky-label', className: classes.label },
+                            label
+                        ),
+                        React.createElement(
+                            'span',
+                            { id: 'sticky-badge', style: { position: 'relative' } },
+                            React.createElement(HiChip, { label: length, classes: { root: classes.badgeRoot } })
+                        )
                     ),
                     React.createElement(
                         Button,
@@ -204,10 +215,6 @@ HiStickyRow.propTypes = process.env.NODE_ENV !== "production" ? {
      * Objet contenant les éléments textuels du composant
      */
     translations: PropTypes.object.isRequired,
-    /**
-     * Valeur de la ligne
-     */
-    value: PropTypes.string,
     /**
      * Taille du tableau (L/M/S),
      * définit l'espace entre les cellules et leurs tailles par default

package/es/HiTable/HiTable.js

@@ -146,27 +146,9 @@ class HiTable extends React.Component {
 
         this.state = {
             dateUpdate: Date.now(),
-            isScrollToBottom: false,
-            groupByIds: {}
+            isScrollToBottom: false
         };
 
-        // create associative array (object) with sticky row key & its values
-        // => used for sticky row badges
-        if (props.groupBy) {
-            props.dataSource.map(row => {
-                let value = row.datas[props.groupBy].value;
-                let date = new Date(value);
-
-                if (date instanceof Date && isFinite(date)) {
-                    value = value.substr(0, 10);
-                }
-                if (!this.state.groupByIds.hasOwnProperty(value)) {
-                    this.state.groupByIds[value] = [];
-                }
-                this.state.groupByIds[value].push(row.datas);
-            });
-        }
-
         // Orderable
         this.openOrderColumnsMenu = this.openOrderColumnsMenu.bind(this);
         this.closeOrderColumnsMenu = this.closeOrderColumnsMenu.bind(this);
@@ -259,28 +241,10 @@ class HiTable extends React.Component {
         // Only if needed
         if (this.props.dataSource.length > prevProps.dataSource.length || this.props.dense !== prevProps.dense || this.props.sortedColumnId !== prevProps.sortedColumnId || this.props.sortDirection !== prevProps.sortDirection) {
             this.updateStickyRowsPosition();
-            if (this.props.dataSource.length > prevProps.dataSource.length) {
+            if (this.props.dataSource.length !== prevProps.dataSource.length) {
                 this.handleStickyRowPositions();
             }
         }
-        if (this.props.dataSource.length > prevProps.dataSource.length && this.props.groupBy) {
-            // create associative array (object) with sticky row key & its values
-            // => used for sticky row badges
-            let groupByIds = {};
-            this.props.dataSource.map(row => {
-                let value = row.datas[this.props.groupBy].value;
-                let date = new Date(value);
-
-                if (date instanceof Date && isFinite(date)) {
-                    value = value.substr(0, 10);
-                }
-                if (!groupByIds.hasOwnProperty(value)) {
-                    groupByIds[value] = [];
-                }
-                groupByIds[value].push(row.datas);
-            });
-            this.setState({ groupByIds: groupByIds });
-        }
 
         this.isScrollToBottom(this.scrollTop === this.tBody.scrollHeight - this.tBody.offsetHeight);
 
@@ -590,7 +554,7 @@ class HiTable extends React.Component {
             detailRowsOptions
         } = this.props;
 
-        const { dateUpdate, isScrollToBottom, groupByIds } = this.state;
+        const { dateUpdate, isScrollToBottom } = this.state;
 
         const headerHeight = dense ? cst.CELL_HEADER_HEIGHT_DENSE : cst.CELL_HEADER_HEIGHT;
 
@@ -665,7 +629,6 @@ class HiTable extends React.Component {
                         translations: translations.tableBody,
                         groupBy: groupBy,
                         onClickNext: this.handleNextStickyRow,
-                        groupByIds: groupByIds,
                         lookupColumns: lookupColumns,
                         loading: loading,
                         fixedColumnWidth: fixedColumnWidth,
@@ -691,6 +654,7 @@ class HiTable extends React.Component {
                 ),
                 React.createElement(HiTableContextMenu, {
                     tabId: tabId,
+                    columns: columns,
                     onSearch: this.props.onSearch,
                     onRedirect: this.props.onRedirect
                 }),

package/es/HiTable/HiTableBody.js

@@ -1,13 +1,18 @@
 import _extends from 'babel-runtime/helpers/extends';
+import _Object$values from 'babel-runtime/core-js/object/values';
+import _JSON$stringify from 'babel-runtime/core-js/json/stringify';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { TableBody, TableRow } from 'material-ui/Table';
 import classNames from 'classnames';
+import moment from 'moment';
+import 'moment/locale/fr';
 import { withStyles } from '../styles';
 import BodyRow from './BodyRow';
 import ChildRow from './ChildRow';
 import HiStickyRow from './HiStickyRow';
 import * as cst from './constants';
+import * as _ from 'lodash';
 
 export const styles = theme => ({
     tbody: {
@@ -62,7 +67,7 @@ export const styles = theme => ({
 class HiTableBody extends React.Component {
 
     constructor(props) {
-        super();
+        super(props);
 
         this.buildIndicator = row => {
             const { columns, dateLocale } = this.props;
@@ -92,15 +97,48 @@ class HiTableBody extends React.Component {
 
         this.state = {
             openedParentRowId: null,
-            openedDetailsRowIdList: []
+            openedDetailsRowIdList: [],
+            dataSource: props.dataSource,
+            groupByIds: {}
         };
 
+        if (props.groupBy && props.dataSource) {
+            let groupByIds = {};
+            props.dataSource.map(row => {
+                let value = row.datas[props.groupBy].value;
+                if (!groupByIds.hasOwnProperty(value)) {
+                    groupByIds[value] = [];
+                }
+                groupByIds[value].push(row.datas);
+            });
+            this.state.groupByIds = groupByIds;
+        }
+
         this.buildIndicator = this.buildIndicator.bind(this);
         this.setOpenedParentRowId = this.setOpenedParentRowId.bind(this);
         this.toggleOpenedDetailsRowId = this.toggleOpenedDetailsRowId.bind(this);
         this.positionStickyRowNextButton = this.positionStickyRowNextButton.bind(this);
+
+        //Monkeypatch TableRow
+        /*var that = this;
+        TableRow.prototype.shouldComponentUpdate = function shouldComponentUpdate(nextProps, nextState){
+          return (this.state.hovered !== nextState.hovered || this.props.selected !== nextProps.selected) && true;
+        }*/
+    }
+
+    deepCompare(object, base) {
+        var that = this;
+        return _.transform(object, (result, value, key) => {
+            if (!_.isEqual(value, base[key])) {
+                result[key] = _.isObject(value) && _.isObject(base[key]) ? that.deepCompare(value, base[key]) : value;
+            }
+        }).length > 0;
     }
 
+    /*shouldComponentUpdate(nextProps, nextState){
+      this.deepCompare(this.props,nextProps) || this.deepCompare(this.state,nextState);
+    }*/
+
     componentDidMount() {
         this.positionStickyRowNextButton();
     }
@@ -109,6 +147,30 @@ class HiTableBody extends React.Component {
         this.positionStickyRowNextButton();
     }
 
+    static getDerivedStateFromProps(props, state) {
+        let nextState = {};
+        if (props.groupBy && props.dataSource && props.dataSource.length > 0) {
+            if (_JSON$stringify(props.dataSource) !== _JSON$stringify(state.dataSource)) {
+                let groupByIds = {};
+                props.dataSource.map(row => {
+                    let value = row.datas[props.groupBy].value;
+                    if (!groupByIds.hasOwnProperty(value)) {
+                        groupByIds[value] = [];
+                    }
+                    groupByIds[value].push(row.datas);
+                });
+                nextState.groupByIds = groupByIds;
+            }
+        }
+        if (_JSON$stringify(props.dataSource) !== _JSON$stringify(state.dataSource)) {
+            nextState.dataSource = props.dataSource;
+        }
+        if (_Object$values(nextState).length > 0) {
+            return nextState;
+        }
+        return null;
+    }
+
     /**
      * Définit l'id de la ligne parente "ouverte" ou null
      * (remplace la ligne par un sous-tableau)
@@ -140,7 +202,7 @@ class HiTableBody extends React.Component {
                         }
                         button.parentElement.style.top = '4px';
                     }
-                    const label = button.previousSibling.previousSibling;
+                    const label = button.previousSibling;
                     button.style.left = `${tableContainer.offsetWidth - label.offsetWidth - 48 - 160}px`;
                 }
             });
@@ -177,7 +239,6 @@ class HiTableBody extends React.Component {
             tabId,
             columns,
             orderedColumns,
-            dataSource,
             onRowClick,
             selectable,
             onSelect,
@@ -192,7 +253,6 @@ class HiTableBody extends React.Component {
             translations,
             dateLocale,
             numberLocale,
-            groupByIds,
             sortedColumnId,
             lookupColumns,
             loading,
@@ -201,7 +261,7 @@ class HiTableBody extends React.Component {
             detailRowsOptions
         } = this.props;
 
-        const { openedParentRowId, openedDetailsRowIdList } = this.state;
+        const { openedParentRowId, openedDetailsRowIdList, groupByIds, dataSource } = this.state;
 
         let nbColumnsDisplayed = 0;
         orderedColumns.forEach(column => {
@@ -219,31 +279,21 @@ class HiTableBody extends React.Component {
             // Gestion du sticky group by
             if (typeof groupBy !== 'undefined' && groupBy === sortedColumnId) {
                 let currentGroupByValue = row.datas[groupBy].value;
-                const date = new Date(currentGroupByValue);
-                if (date instanceof Date && isFinite(date)) {
-                    currentGroupByValue = currentGroupByValue.substr(0, 10);
-                }
+
                 // TODO => condition for other columns type
                 if (columns[groupBy].type === cst.TYPE_DATE) {
-                    if (index === 0 || currentGroupByValue !== stickyRowValue) {
-                        stickyRowValue = currentGroupByValue;
-                        let label = stickyRowValue;
-                        if (date instanceof Date && isFinite(date)) {
-                            label = new Date(label);
-                            const options = {
-                                year: 'numeric',
-                                month: 'long',
-                                weekday: 'long',
-                                day: 'numeric'
-                            };
-                            label = label.toLocaleString(dateLocale, options);
-                            label = label.charAt(0).toUpperCase() + label.substr(1);
-                        }
+
+                    moment.locale(dateLocale);
+                    let date = moment(currentGroupByValue);
+                    let label = date.format('dddd D MMMM YYYY');
+
+                    if (index === 0 || label !== stickyRowValue) {
+
+                        stickyRowValue = label;
 
                         tableRows.push(React.createElement(HiStickyRow, {
                             key: `sticky_row_${row.rowId}`,
                             dense: dense,
-                            value: stickyRowValue,
                             label: label,
                             length: groupByIds[currentGroupByValue].length,
                             colSpan: nbColumnsDisplayed,
@@ -326,7 +376,9 @@ class HiTableBody extends React.Component {
                                 sticky,
                                 isDetail: true,
                                 fixedColumnWidth,
-                                disableContextMenu
+                                disableContextMenu,
+                                dateLocale,
+                                numberLocale
                             };
 
                             tableRows.push(React.createElement(BodyRow, _extends({ key: `${row.rowId}-${detailRow.rowId}` }, detailRowProps)));