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

package/HiTable/HeaderCell.js

@@ -9,10 +9,6 @@ var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
 
 var _defineProperty3 = _interopRequireDefault(_defineProperty2);
 
-var _stringify = require('babel-runtime/core-js/json/stringify');
-
-var _stringify2 = _interopRequireDefault(_stringify);
-
 var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
 
 var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
@@ -154,52 +150,45 @@ var styles = exports.styles = function styles(theme) {
  * Construit une cellule d'entête avec le titre, clickable, triable et filtrable
  */
 
-var HeaderCell = function (_React$Component) {
-    (0, _inherits3.default)(HeaderCell, _React$Component);
+var HeaderCell = function (_React$PureComponent) {
+    (0, _inherits3.default)(HeaderCell, _React$PureComponent);
 
     function HeaderCell(props) {
         (0, _classCallCheck3.default)(this, HeaderCell);
 
         var _this = (0, _possibleConstructorReturn3.default)(this, (HeaderCell.__proto__ || (0, _getPrototypeOf2.default)(HeaderCell)).call(this, props));
 
-        _this.anchorEl = null;
-
         _this.onFilterClick = function (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);
         return _this;
     }
 
     (0, _createClass3.default)(HeaderCell, [{
-        key: 'shouldComponentUpdate',
-        value: function shouldComponentUpdate(nextProps, nextState) {
-            return (0, _stringify2.default)(nextProps) !== (0, _stringify2.default)(this.props) || (0, _stringify2.default)(nextState) !== (0, _stringify2.default)(this.state);
-        }
-    }, {
         key: 'openFilterMenu',
         value: function openFilterMenu(event, columnDataset) {
             this.setState({
                 filterOpen: true,
+                anchorEl: event.currentTarget,
                 menuFilters: columnDataset
             });
-            this.anchorEl = event.currentTarget;
         }
     }, {
-        key: 'handleClose',
-        value: function handleClose() {
-            this.setState({ filterOpen: false, menuFilters: [] });
-            this.anchorEl = null;
+        key: 'closeFilterMenu',
+        value: function closeFilterMenu() {
+            this.setState({ filterOpen: false, anchorEl: null, menuFilters: [] });
         }
 
         /**
@@ -226,7 +215,6 @@ var HeaderCell = function (_React$Component) {
                 classes = _props.classes,
                 type = _props.type,
                 title = _props.title,
-                smallTitle = _props.smallTitle,
                 selectable = _props.selectable,
                 selected = _props.selected,
                 onSelect = _props.onSelect,
@@ -237,23 +225,24 @@ var HeaderCell = function (_React$Component) {
                 filterSource = _props.filterSource,
                 view = _props.view,
                 dense = _props.dense,
-                width = _props.width,
-                fixedColumnWidth = _props.fixedColumnWidth,
+                _props$width = _props.width,
+                width = _props$width === undefined ? cst.DEFAULT_WIDTHS[type][view] : _props$width,
+                fixedWidth = _props.fixedWidth,
                 _props$align = _props.align,
                 align = _props$align === undefined ? cst.ALIGN_RIGHT_TYPES.includes(type) ? 'right' : 'left' : _props$align,
                 sticky = _props.sticky,
                 padding = _props.padding,
-                lookedUp = _props.lookedUp,
-                translations = _props.translations;
+                lookedUp = _props.lookedUp;
             var _state = this.state,
                 filterOpen = _state.filterOpen,
+                anchorEl = _state.anchorEl,
                 menuFilters = _state.menuFilters;
 
 
             var offset = selectable ? dense ? 32 : 40 : padding;
 
             // Inclue le padding et/ou la checkbox dans la largeur de la cellule
-            var _width = (width || cst.DEFAULT_WIDTHS[type][view]) + offset + padding;
+            var _width = width + offset + padding;
             // N'affiche pas le tri si il est désactivé.
             var _sorted = sortable && sorted;
             // N'active pas le filtre si il n'y a pas de jeu de donnée sur lesquelles filtrées.
@@ -274,24 +263,19 @@ var HeaderCell = function (_React$Component) {
 
             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;
-            } else if (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,
@@ -328,14 +312,15 @@ var HeaderCell = function (_React$Component) {
                                     _filterable ? _this2.onFilterClick(event, filterSource) : _this2.handleSort(sortDirection === 'asc' ? 'desc' : 'asc');
                                 }
                             },
+                            align === 'right' && _icons,
                             _react2.default.createElement(
                                 'span',
                                 {
                                     className: classes.labelContainer + (_sorted ? ' ' + classes.labelContainerOrdered : '')
                                 },
-                                view !== 's' ? title : smallTitle || title
+                                title
                             ),
-                            _icons
+                            align !== 'right' && _icons
                         ) : _react2.default.createElement(
                             'div',
                             {
@@ -350,7 +335,7 @@ var HeaderCell = function (_React$Component) {
                             _react2.default.createElement(
                                 'span',
                                 { className: classes.labelContainer, style: { width: '100%' } },
-                                view !== 's' ? title : smallTitle || title
+                                title
                             )
                         )
                     ),
@@ -361,18 +346,17 @@ var HeaderCell = function (_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
                 })
             );
         }
     }]);
     return HeaderCell;
-}(_react2.default.Component);
+}(_react2.default.PureComponent);
 
 HeaderCell.defaultProps = {
     selectable: false,
@@ -382,56 +366,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: _propTypes2.default.string,
     /**
      * Useful to extend the style applied to components.
      */
     classes: _propTypes2.default.object,
-    /**
-     * Densité, défini la hauteur de la ligne
-     */
-    dense: _propTypes2.default.bool,
-    /**
-     * Ajoute le composant ColumnFilter, par défaut à True si filterSource est définie.
-     */
-    filterable: _propTypes2.default.bool,
-    /**
-     * Liste fermé des valeurs disponibles sur lesquelles filtrer (inclure/exclure)
-     */
-    filterSource: _propTypes2.default.array,
-    /**
-     * La largeur de la cellule est fixé (toutes les colonnes sauf une)
-     */
-    fixedColumnWidth: _propTypes2.default.bool,
     /**
      * Recherche lookup sur cette colonne
      */
     lookedUp: _propTypes2.default.bool,
-    /**
-     * Padding de la cellule (px)
-     */
-    padding: _propTypes2.default.number,
-    /**
-     * Fonction de callback au changement du filtre - passe la liste des id des valeurs incluses
-     */
-    onFilterChange: _propTypes2.default.func,
     /**
      * Fonction de callback au click du select
      */
     onSelect: _propTypes2.default.func,
-    /**
-     * Fonction de callback au tri - passe la direction du tri
-     */
-    onSort: _propTypes2.default.func,
     /**
      * Ajoute une checkbox
      */
@@ -445,40 +396,68 @@ HeaderCell.propTypes = process.env.NODE_ENV !== "production" ? {
      */
     smallTitle: _propTypes2.default.string,
     /**
-     * Ajoute la fonction de tri au click sur le label & dans le ColumnFilter
+     * Titre de la colonne
      */
-    sortable: _propTypes2.default.bool,
+    title: _propTypes2.default.string.isRequired,
     /**
-     * Sens du tri
+     * Type de cellule
      */
-    sortDirection: _propTypes2.default.oneOf(['asc', 'desc']),
+    type: _propTypes2.default.string.isRequired,
+    /**
+     * Ajoute la fonction de tri au click sur le label & dans le ColumnFilter
+     */
+    sortable: _propTypes2.default.bool,
     /**
      * Tri actif / inactif
      */
     sorted: _propTypes2.default.bool,
     /**
-     * True si la colonne est la première colonne et doit avoir un comportement "sticky" lors du scroll horizontal
+     * Sens du tri
      */
-    sticky: _propTypes2.default.bool,
+    sortDirection: _propTypes2.default.oneOf(['asc', 'desc']),
     /**
-     * Titre de la colonne
+     * Fonction de callback au tri - passe la direction du tri
      */
-    title: _propTypes2.default.string.isRequired,
+    onSort: _propTypes2.default.func,
     /**
-     * Traduction des chaînes affichées
+     * Ajoute le composant ColumnFilter, par défaut à True si filterSource est définie.
      */
-    translations: _propTypes2.default.object,
+    filterable: _propTypes2.default.bool,
     /**
-     * Type de cellule
+     * Liste fermé des valeurs disponibles sur lesquelles filtrer (inclure/exclure)
      */
-    type: _propTypes2.default.string.isRequired,
+    filterSource: _propTypes2.default.array,
+    /**
+     * Fonction de callback au changement du filtre - passe la liste des id des valeurs incluses
+     */
+    onFilterChange: _propTypes2.default.func,
     /**
      * View (L/M/S)
      */
     view: _propTypes2.default.oneOf(['l', 'm', 's']),
+    /**
+     * Densité, défini la hauteur de la ligne
+     */
+    dense: _propTypes2.default.bool,
     /**
      * Largeur de la cellule (hors padding), est déduit de view par défaut
      */
-    width: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string])
+    width: _propTypes2.default.number,
+    /**
+     * La largeur de la cellule est fixé (toutes les colonnes sauf une)
+     */
+    fixedWidth: _propTypes2.default.bool,
+    /**
+     * Title alignement, est déduit de type par défaut
+     */
+    align: _propTypes2.default.string,
+    /**
+     * True si la colonne est la première colonne et doit avoir un comportement "sticky" lors du scroll horizontal
+     */
+    sticky: _propTypes2.default.bool,
+    /**
+     * Padding de la cellule (px)
+     */
+    padding: _propTypes2.default.number
 } : {};
 exports.default = (0, _styles.withStyles)(styles, { withTheme: true, name: 'HmuiHeaderCell' })(HeaderCell);

package/HiTable/HiStickyRow.js

@@ -9,10 +9,6 @@ var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
 
 var _defineProperty3 = _interopRequireDefault(_defineProperty2);
 
-var _stringify = require('babel-runtime/core-js/json/stringify');
-
-var _stringify2 = _interopRequireDefault(_stringify);
-
 var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
 
 var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
@@ -133,8 +129,8 @@ var styles = exports.styles = function styles(theme) {
 
 var ONCHANGE_ERROR_MESSAGE = exports.ONCHANGE_ERROR_MESSAGE = 'Vous devez saisir la propriété "onChange" pour les lignes "selectable"';
 
-var HiStickyRow = function (_React$Component) {
-    (0, _inherits3.default)(HiStickyRow, _React$Component);
+var HiStickyRow = function (_React$PureComponent) {
+    (0, _inherits3.default)(HiStickyRow, _React$PureComponent);
 
     function HiStickyRow() {
         (0, _classCallCheck3.default)(this, HiStickyRow);
@@ -142,11 +138,6 @@ var HiStickyRow = function (_React$Component) {
     }
 
     (0, _createClass3.default)(HiStickyRow, [{
-        key: 'shouldComponentUpdate',
-        value: function shouldComponentUpdate(nextProps, nextState) {
-            return (0, _stringify2.default)(this.props) !== (0, _stringify2.default)(nextProps) || (0, _stringify2.default)(this.state) !== (0, _stringify2.default)(nextState);
-        }
-    }, {
         key: 'render',
         value: function render() {
             var _this2 = this;
@@ -198,24 +189,18 @@ var HiStickyRow = function (_React$Component) {
                             className: 'stickyRowContent',
                             style: {
                                 position: 'relative',
-                                top: dense ? 3 : 2,
-                                display: 'flex',
-                                alignItems: 'center'
+                                top: dense ? 3 : 2
                             }
                         },
                         _react2.default.createElement(
-                            'div',
-                            null,
-                            _react2.default.createElement(
-                                'span',
-                                { id: 'sticky-label', className: classes.label },
-                                label
-                            ),
-                            _react2.default.createElement(
-                                'span',
-                                { id: 'sticky-badge', style: { position: 'relative' } },
-                                _react2.default.createElement(_HiChip2.default, { label: length, classes: { root: classes.badgeRoot } })
-                            )
+                            'span',
+                            { id: 'sticky-label', className: classes.label },
+                            label
+                        ),
+                        _react2.default.createElement(
+                            'span',
+                            { id: 'sticky-badge', style: { position: 'relative' } },
+                            _react2.default.createElement(_HiChip2.default, { label: length, classes: { root: classes.badgeRoot } })
                         ),
                         _react2.default.createElement(
                             _Button2.default,
@@ -241,7 +226,7 @@ var HiStickyRow = function (_React$Component) {
         }
     }]);
     return HiStickyRow;
-}(_react2.default.Component);
+}(_react2.default.PureComponent);
 
 HiStickyRow.defaultProps = {
     dense: false,
@@ -302,6 +287,10 @@ HiStickyRow.propTypes = process.env.NODE_ENV !== "production" ? {
      * Objet contenant les éléments textuels du composant
      */
     translations: _propTypes2.default.object.isRequired,
+    /**
+     * Valeur de la ligne
+     */
+    value: _propTypes2.default.string,
     /**
      * Taille du tableau (L/M/S),
      * définit l'espace entre les cellules et leurs tailles par default