@hipay/hipay-material-ui 1.0.0-beta.29 → 1.0.0-beta.3

package/es/HiTable/HeaderCell.js

@@ -1,4 +1,3 @@
-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';
@@ -8,6 +7,7 @@ import ButtonBase from 'material-ui/ButtonBase';
 import FilterVariantIcon from 'mdi-material-ui/FilterVariant';
 import MenuIcon from 'mdi-material-ui/Menu';
 import ArrowDownwardIcon from '../svg-icons/ArrowDownward';
+
 import HiCheckbox from '../HiCheckbox';
 import { withStyles, withTheme } from '../styles';
 import ColumnFilter from './ColumnFilter';
@@ -71,7 +71,7 @@ export const styles = theme => ({
         transform: 'scale(1,-1)'
     },
     lookedUp: {
-        background: 'linear-gradient(0deg, transparent 25%, #FFFF8D 10%, #FFFF8D 75%, transparent 30%)',
+        background: `linear-gradient(0deg, transparent 25%, #FFFF8D 10%, #FFFF8D 75%, transparent 30%)`,
         borderRadius: '45%'
     }
 });
@@ -79,44 +79,38 @@ export const styles = theme => ({
 /**
  * Construit une cellule d'entête avec le titre, clickable, triable et filtrable
  */
-class HeaderCell extends React.Component {
+class HeaderCell extends React.PureComponent {
 
     constructor(props) {
         super(props);
 
-        this.anchorEl = null;
-
         this.onFilterClick = (event, columnDataset) => {
             this.openFilterMenu(event, columnDataset);
         };
 
         this.state = {
             filterOpen: false,
+            anchorEl: null,
             menuFilters: []
         };
 
         this.onFilterClick = this.onFilterClick.bind(this);
         this.openFilterMenu = this.openFilterMenu.bind(this);
-        this.handleClose = this.handleClose.bind(this);
+        this.closeFilterMenu = this.closeFilterMenu.bind(this);
         this.handleSort = this.handleSort.bind(this);
         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, menuFilters: [] });
-        this.anchorEl = null;
+    closeFilterMenu() {
+        this.setState({ filterOpen: false, anchorEl: null, menuFilters: [] });
     }
 
     /**
@@ -136,7 +130,6 @@ class HeaderCell extends React.Component {
             classes,
             type,
             title,
-            smallTitle,
             selectable,
             selected,
             onSelect,
@@ -147,63 +140,57 @@ class HeaderCell extends React.Component {
             filterSource,
             view,
             dense,
-            width,
-            fixedColumnWidth,
+            width = cst.DEFAULT_WIDTHS[type][view],
+            fixedWidth,
             align = cst.ALIGN_RIGHT_TYPES.includes(type) ? 'right' : 'left',
             sticky,
             padding,
-            lookedUp,
-            translations
+            lookedUp
         } = this.props;
 
-        const { filterOpen, menuFilters } = this.state;
+        const { filterOpen, anchorEl, menuFilters } = this.state;
 
-        const offset = selectable ? dense ? 32 : 40 : padding;
+        let offset = selectable ? dense ? 32 : 40 : padding;
 
         // Inclue le padding et/ou la checkbox dans la largeur de la cellule
-        const _width = (width || cst.DEFAULT_WIDTHS[type][view]) + offset + padding;
+        let _width = width + offset + padding;
         // N'affiche pas le tri si il est désactivé.
-        const _sorted = sortable && sorted;
+        let _sorted = sortable && sorted;
         // N'active pas le filtre si il n'y a pas de jeu de donnée sur lesquelles filtrées.
-        const _filterable = filterable && typeof filterSource !== 'undefined' && filterSource.length > 0;
+        let _filterable = filterable && typeof filterSource !== 'undefined' && filterSource.length > 0;
 
         // La bordure n'est pas défini en css car elle s'appliquerait
         // sur le background et ne supporterait pas le scroll horizontal.
-        const sortedBorderElement = _sorted ? React.createElement('div', {
+        let sortedBorderElement = _sorted ? React.createElement('div', {
             className: classes.sortedBorder,
             style: { marginLeft: offset, marginRight: padding }
         }) : null;
 
         const sortIconClassName = classNames(classes.icon, classes.primary, {
-            [classes[`sort${sortDirection}`]]: !!sortDirection
+            [classes['sort' + sortDirection]]: !!sortDirection
         });
 
         const filterIconClassName = classNames(classes.icon, classes.primary, {
-            [classes[`filter${sortDirection}`]]: !!sortDirection
+            [classes['filter' + sortDirection]]: !!sortDirection
         });
 
-        const _icons = _filterable || sortable ? _filterable ? _sorted ? React.createElement(FilterVariantIcon, { className: filterIconClassName }) : React.createElement(MenuIcon, { className: classes.icon }) : _sorted && React.createElement(ArrowDownwardIcon, { className: sortIconClassName }) : '';
+        let _icons = _filterable || sortable ? _filterable ? _sorted ? React.createElement(FilterVariantIcon, { className: filterIconClassName }) : React.createElement(MenuIcon, { className: classes.icon }) : _sorted && React.createElement(ArrowDownwardIcon, { className: sortIconClassName }) : '';
 
         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;
-        } else if (width) {
-            cellStyle.width = width;
-        }
-
         return React.createElement(
             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
+                }
+            },
             React.createElement(
                 'div',
                 null,
@@ -240,14 +227,15 @@ class HeaderCell extends React.Component {
                                 _filterable ? this.onFilterClick(event, filterSource) : this.handleSort(sortDirection === 'asc' ? 'desc' : 'asc');
                             }
                         },
+                        align === 'right' && _icons,
                         React.createElement(
                             'span',
                             {
-                                className: classes.labelContainer + (_sorted ? ` ${classes.labelContainerOrdered}` : '')
+                                className: classes.labelContainer + (_sorted ? ' ' + classes.labelContainerOrdered : '')
                             },
-                            view !== 's' ? title : smallTitle || title
+                            title
                         ),
-                        _icons
+                        align !== 'right' && _icons
                     ) : React.createElement(
                         'div',
                         {
@@ -262,7 +250,7 @@ class HeaderCell extends React.Component {
                         React.createElement(
                             'span',
                             { className: classes.labelContainer, style: { width: '100%' } },
-                            view !== 's' ? title : smallTitle || title
+                            title
                         )
                     )
                 ),
@@ -273,12 +261,11 @@ class HeaderCell extends React.Component {
                 title: title,
                 filterValueList: menuFilters,
                 isOpen: filterOpen,
-                onClose: this.handleClose,
-                anchorEl: this.anchorEl,
+                onClose: this.closeFilterMenu,
+                anchorEl: anchorEl,
                 sortable: sortable,
                 onSort: this.handleSort,
-                onFilterChange: this.handleFilterChange,
-                translations: translations.columnFilter
+                onFilterChange: this.handleFilterChange
             })
         );
     }
@@ -292,56 +279,23 @@ HeaderCell.defaultProps = {
     sortDirection: 'asc',
     view: 'l',
     dense: false,
-    fixedColumnWidth: true,
+    fixedWidth: false,
     sticky: true,
-    padding: 8,
-    translations: {}
+    padding: 8
 };
 HeaderCell.propTypes = process.env.NODE_ENV !== "production" ? {
-    /**
-     * Title alignement, est déduit de type par défaut
-     */
-    align: PropTypes.string,
     /**
      * Useful to extend the style applied to components.
      */
     classes: PropTypes.object,
-    /**
-     * Densité, défini la hauteur de la ligne
-     */
-    dense: PropTypes.bool,
-    /**
-     * Ajoute le composant ColumnFilter, par défaut à True si filterSource est définie.
-     */
-    filterable: PropTypes.bool,
-    /**
-     * Liste fermé des valeurs disponibles sur lesquelles filtrer (inclure/exclure)
-     */
-    filterSource: PropTypes.array,
-    /**
-     * La largeur de la cellule est fixé (toutes les colonnes sauf une)
-     */
-    fixedColumnWidth: PropTypes.bool,
     /**
      * Recherche lookup sur cette colonne
      */
     lookedUp: PropTypes.bool,
-    /**
-     * Padding de la cellule (px)
-     */
-    padding: PropTypes.number,
-    /**
-     * Fonction de callback au changement du filtre - passe la liste des id des valeurs incluses
-     */
-    onFilterChange: PropTypes.func,
     /**
      * Fonction de callback au click du select
      */
     onSelect: PropTypes.func,
-    /**
-     * Fonction de callback au tri - passe la direction du tri
-     */
-    onSort: PropTypes.func,
     /**
      * Ajoute une checkbox
      */
@@ -355,40 +309,68 @@ HeaderCell.propTypes = process.env.NODE_ENV !== "production" ? {
      */
     smallTitle: PropTypes.string,
     /**
-     * Ajoute la fonction de tri au click sur le label & dans le ColumnFilter
+     * Titre de la colonne
      */
-    sortable: PropTypes.bool,
+    title: PropTypes.string.isRequired,
     /**
-     * Sens du tri
+     * Type de cellule
      */
-    sortDirection: PropTypes.oneOf(['asc', 'desc']),
+    type: PropTypes.string.isRequired,
+    /**
+     * Ajoute la fonction de tri au click sur le label & dans le ColumnFilter
+     */
+    sortable: PropTypes.bool,
     /**
      * Tri actif / inactif
      */
     sorted: PropTypes.bool,
     /**
-     * True si la colonne est la première colonne et doit avoir un comportement "sticky" lors du scroll horizontal
+     * Sens du tri
      */
-    sticky: PropTypes.bool,
+    sortDirection: PropTypes.oneOf(['asc', 'desc']),
     /**
-     * Titre de la colonne
+     * Fonction de callback au tri - passe la direction du tri
      */
-    title: PropTypes.string.isRequired,
+    onSort: PropTypes.func,
     /**
-     * Traduction des chaînes affichées
+     * Ajoute le composant ColumnFilter, par défaut à True si filterSource est définie.
      */
-    translations: PropTypes.object,
+    filterable: PropTypes.bool,
     /**
-     * Type de cellule
+     * Liste fermé des valeurs disponibles sur lesquelles filtrer (inclure/exclure)
      */
-    type: PropTypes.string.isRequired,
+    filterSource: PropTypes.array,
+    /**
+     * Fonction de callback au changement du filtre - passe la liste des id des valeurs incluses
+     */
+    onFilterChange: PropTypes.func,
     /**
      * View (L/M/S)
      */
     view: PropTypes.oneOf(['l', 'm', 's']),
+    /**
+     * Densité, défini la hauteur de la ligne
+     */
+    dense: PropTypes.bool,
     /**
      * Largeur de la cellule (hors padding), est déduit de view par défaut
      */
-    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+    width: PropTypes.number,
+    /**
+     * La largeur de la cellule est fixé (toutes les colonnes sauf une)
+     */
+    fixedWidth: PropTypes.bool,
+    /**
+     * Title alignement, est déduit de type par défaut
+     */
+    align: PropTypes.string,
+    /**
+     * True si la colonne est la première colonne et doit avoir un comportement "sticky" lors du scroll horizontal
+     */
+    sticky: PropTypes.bool,
+    /**
+     * Padding de la cellule (px)
+     */
+    padding: PropTypes.number
 } : {};
 export default withStyles(styles, { withTheme: true, name: 'HmuiHeaderCell' })(HeaderCell);

package/es/HiTable/HiStickyRow.js

@@ -1,4 +1,3 @@
-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';
@@ -72,11 +71,7 @@ export const styles = theme => ({
 
 export const ONCHANGE_ERROR_MESSAGE = 'Vous devez saisir la propriété "onChange" pour les lignes "selectable"';
 
-class HiStickyRow extends React.Component {
-
-    shouldComponentUpdate(nextProps, nextState) {
-        return _JSON$stringify(this.props) !== _JSON$stringify(nextProps) || _JSON$stringify(this.state) !== _JSON$stringify(nextState);
-    }
+class HiStickyRow extends React.PureComponent {
 
     render() {
         const { classes, dense, colSpan, label, length, index, translations, view } = this.props;
@@ -117,24 +112,18 @@ class HiStickyRow extends React.Component {
                         className: 'stickyRowContent',
                         style: {
                             position: 'relative',
-                            top: dense ? 3 : 2,
-                            display: 'flex',
-                            alignItems: 'center'
+                            top: dense ? 3 : 2
                         }
                     },
                     React.createElement(
-                        '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 } })
-                        )
+                        '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,
@@ -215,6 +204,10 @@ 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