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

package/es/HiTable/BodyCells/CellDate.js

@@ -1,6 +1,8 @@
-import _extends from 'babel-runtime/helpers/extends';
+import _JSON$stringify from 'babel-runtime/core-js/json/stringify';
 import React from 'react';
 import PropTypes from 'prop-types';
+import moment from 'moment';
+import 'moment/locale/fr';
 
 import withStyles from '../../styles/withStyles';
 import Tooltip from '../../Tooltip';
@@ -20,45 +22,28 @@ export const styles = theme => ({
  * Cette cellule permet d'afficher une date en fonction de la locale de l'utilisateur
  */
 class CellDate extends React.Component {
+    constructor(...args) {
+        var _temp;
+
+        return _temp = super(...args), this.formatLong = 'dddd DD MMMM YYYY HH:mm:ss', _temp;
+    }
+
+    shouldComponentUpdate(nextProps, nextState) {
+        return _JSON$stringify(this.props) !== _JSON$stringify(nextProps) || _JSON$stringify(this.state) !== _JSON$stringify(nextState);
+    }
 
     render() {
-        const { classes, displayTime, value, locale, view } = this.props;
+        const { classes, displayTime, value, locale, view, formatShort } = this.props;
 
-        const date = new Date(value);
+        const date = moment(value);
+        moment.locale(locale);
 
-        let options = _extends({
-            weekday: 'long',
-            year: 'numeric',
-            month: 'long',
-            day: '2-digit'
-        }, displayTime && {
-            hour: '2-digit',
-            minute: '2-digit',
-            second: '2-digit'
-        });
-        const titleValue = date.toLocaleString(locale, options);
+        const titleValue = displayTime ? date.format(this.formatLong) : date.format(this.formatLong.replace('HH:mm:ss', ''));
         let displayedValue = titleValue;
         if (view === cst.VIEWS.SMALL) {
-            options = _extends({
-                year: '2-digit',
-                month: '2-digit',
-                day: '2-digit'
-            }, displayTime && {
-                hour: '2-digit',
-                minute: '2-digit'
-            });
-            displayedValue = date.toLocaleString(locale, options);
+            displayedValue = displayTime ? date.format(formatShort.replace('YYYY', 'YY') + ' HH:mm:ss') : date.format(formatShort.replace('YYYY', 'YY'));
         } else if (view === cst.VIEWS.MEDIUM) {
-            options = _extends({
-                year: 'numeric',
-                month: '2-digit',
-                day: '2-digit'
-            }, displayTime && {
-                hour: '2-digit',
-                minute: '2-digit',
-                second: '2-digit'
-            });
-            displayedValue = date.toLocaleString(locale, options);
+            displayedValue = displayTime ? date.format(formatShort + ' HH:mm:ss') : date.format(formatShort);
         }
 
         if (view === cst.VIEWS.LARGE) {
@@ -83,8 +68,9 @@ class CellDate extends React.Component {
 
 CellDate.defaultProps = {
     displayTime: false,
-    locale: 'en-EN',
-    view: 'l'
+    locale: 'en',
+    view: 'l',
+    formatShort: 'DD/MM/YYYY'
 };
 CellDate.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -96,11 +82,16 @@ CellDate.propTypes = process.env.NODE_ENV !== "production" ? {
      */
     displayTime: PropTypes.bool,
     /**
-     * Locale BCP 47
+     * Format de la date en vue small (ex: DD/MM/YYYY)
+     * @see https://momentjs.com/docs/#/parsing/string-format/
+     */
+    formatShort: PropTypes.string.isRequired,
+    /**
+     * Locale moment
      */
     locale: PropTypes.string,
     /**
-     * Volume/Amount
+     * Date as string
      */
     value: PropTypes.string.isRequired,
     /**

package/es/HiTable/BodyCells/CellIcon.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 Tooltip from '../../Tooltip';
@@ -26,7 +27,11 @@ export const styles = {
  * Cette cellule permet d'afficher une icône et un label (optionnel).
  * En vue small (s) elle affiche uniquement l'icône avec une largeur fixe.
  */
-class CellIcon extends React.PureComponent {
+class CellIcon extends React.Component {
+
+    shouldComponentUpdate(nextProps, nextState) {
+        return _JSON$stringify(this.props) !== _JSON$stringify(nextProps) || _JSON$stringify(this.state) !== _JSON$stringify(nextState);
+    }
 
     render() {
         const { classes, icon, value, view, color } = this.props;

package/es/HiTable/BodyCells/CellImage.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 Tooltip from '../../Tooltip';
@@ -45,7 +46,11 @@ export const styles = theme => ({
  * En vue large, aucun tooltip n'est affiché
  * En vue small (s) elle affiche uniquement l'image avec une largeur fixe.
  */
-class CellImage extends React.PureComponent {
+class CellImage extends React.Component {
+
+    shouldComponentUpdate(nextProps, nextState) {
+        return _JSON$stringify(this.props) !== _JSON$stringify(nextProps) || _JSON$stringify(this.state) !== _JSON$stringify(nextState);
+    }
 
     render() {
         const { classes, path, value, view, size } = this.props;

package/es/HiTable/BodyCells/CellNumeric.js

@@ -1,3 +1,4 @@
+import _JSON$stringify from 'babel-runtime/core-js/json/stringify';
 import React from 'react';
 import PropTypes from 'prop-types';
 
@@ -15,7 +16,11 @@ export const styles = theme => ({
 /**
  * Cette cellule permet d'afficher un volume ou un montant avec devise
  */
-class CellNumeric extends React.PureComponent {
+class CellNumeric extends React.Component {
+
+    shouldComponentUpdate(nextProps, nextState) {
+        return _JSON$stringify(this.props) !== _JSON$stringify(nextProps) || _JSON$stringify(this.state) !== _JSON$stringify(nextState);
+    }
 
     render() {
         const { classes, value, locale, currency, view, precision } = this.props;

package/es/HiTable/BodyCells/CellRate.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 classNames from 'classnames';
@@ -45,7 +46,11 @@ export const styles = theme => ({
  * Cette cellule permet d'afficher un pourcentage
  * avec une icône d'évolution (optionnelle) et un indicateur du type de données représentées (optionnel)
  */
-class CellRate extends React.PureComponent {
+class CellRate extends React.Component {
+
+    shouldComponentUpdate(nextProps, nextState) {
+        return _JSON$stringify(this.props) !== _JSON$stringify(nextProps) || _JSON$stringify(this.state) !== _JSON$stringify(nextState);
+    }
 
     render() {
 

package/es/HiTable/BodyCells/CellSentinel.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 Tooltip from '../../Tooltip';
@@ -21,7 +22,11 @@ export const styles = {
 /**
  * Cette cellule permet d'afficher le résultat de Sentinel (score & fraudResult & smartDecision)
  */
-class CellSentinel extends React.PureComponent {
+class CellSentinel extends React.Component {
+
+    shouldComponentUpdate(nextProps, nextState) {
+        return _JSON$stringify(this.props) !== _JSON$stringify(nextProps) || _JSON$stringify(this.state) !== _JSON$stringify(nextState);
+    }
 
     constructor(props) {
         super(props);

package/es/HiTable/BodyCells/CellStatus.js

@@ -1,3 +1,4 @@
+import _JSON$stringify from 'babel-runtime/core-js/json/stringify';
 import React from 'react';
 import PropTypes from 'prop-types';
 
@@ -18,7 +19,11 @@ export const styles = theme => ({
     }
 });
 
-class CellStatus extends React.PureComponent {
+class CellStatus 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, nbOperations, value, code, onOpenDetails } = this.props;

package/es/HiTable/BodyCells/CellText.js

@@ -1,3 +1,4 @@
+import _JSON$stringify from 'babel-runtime/core-js/json/stringify';
 import React from 'react';
 import PropTypes from 'prop-types';
 
@@ -27,7 +28,11 @@ export const styles = theme => ({
     }
 });
 
-class CellText extends React.PureComponent {
+class CellText extends React.Component {
+
+    shouldComponentUpdate(nextProps, nextState) {
+        return _JSON$stringify(this.props) !== _JSON$stringify(nextProps) || _JSON$stringify(this.state) !== _JSON$stringify(nextState);
+    }
 
     constructor(props) {
         super(props);

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';
@@ -73,6 +74,10 @@ export const ONCHANGE_ERROR_MESSAGE = 'Vous devez saisir la propriété "onChang
 
 class HiStickyRow extends React.PureComponent {
 
+    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;
         const buttonClasses = classNames(classes.button, { [classes.denseButton]: dense });
@@ -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
                 }),