@hipay/hipay-material-ui 1.0.0-beta.21 → 1.0.0-beta.22

package/HiLoader/HiLoader.js

@@ -30,11 +30,15 @@ function HiLoader(props) {
         loading = props.loading;
 
 
-    return _react2.default.createElement(_reactSpinners.PropagateLoader, {
-        loading: loading,
-        size: 12,
-        color: theme.palette.business.primary.normal
-    });
+    return _react2.default.createElement(
+        'div',
+        { id: 'hi-loader' },
+        _react2.default.createElement(_reactSpinners.PropagateLoader, {
+            loading: loading,
+            size: 12,
+            color: theme.palette.business.primary.normal
+        })
+    );
 }
 
 HiLoader.propTypes = process.env.NODE_ENV !== "production" ? {

package/HiSelect/HiSelect.js

@@ -107,7 +107,7 @@ var styles = exports.styles = function styles(theme) {
         },
         popper: {
             width: '100%',
-            zIndex: 11
+            zIndex: 1200
         },
         paper: {
             borderRadius: '0px 2px',
@@ -178,6 +178,11 @@ var HiSelect = function (_React$PureComponent) {
                     valueInOptions = true;
                 }
             });
+            if (!valueInOptions && props.pinnedItem) {
+                if (props.value.indexOf(props.pinnedItem.id) >= 0) {
+                    valueInOptions = true;
+                }
+            }
         }
 
         if (!valueInOptions) {

package/HiTable/HeaderCell.js

@@ -170,7 +170,7 @@ var HeaderCell = function (_React$PureComponent) {
 
         _this.onFilterClick = _this.onFilterClick.bind(_this);
         _this.openFilterMenu = _this.openFilterMenu.bind(_this);
-        _this.closeFilterMenu = _this.closeFilterMenu.bind(_this);
+        _this.handleClose = _this.handleClose.bind(_this);
         _this.handleSort = _this.handleSort.bind(_this);
         _this.handleFilterChange = _this.handleFilterChange.bind(_this);
         return _this;
@@ -186,8 +186,8 @@ var HeaderCell = function (_React$PureComponent) {
             });
         }
     }, {
-        key: 'closeFilterMenu',
-        value: function closeFilterMenu() {
+        key: 'handleClose',
+        value: function handleClose() {
             this.setState({ filterOpen: false, anchorEl: null, menuFilters: [] });
         }
 
@@ -232,7 +232,8 @@ var HeaderCell = function (_React$PureComponent) {
                 align = _props$align === undefined ? cst.ALIGN_RIGHT_TYPES.includes(type) ? 'right' : 'left' : _props$align,
                 sticky = _props.sticky,
                 padding = _props.padding,
-                lookedUp = _props.lookedUp;
+                lookedUp = _props.lookedUp,
+                translations = _props.translations;
             var _state = this.state,
                 filterOpen = _state.filterOpen,
                 anchorEl = _state.anchorEl,
@@ -323,7 +324,7 @@ var HeaderCell = function (_React$PureComponent) {
                                 {
                                     className: classes.labelContainer + (_sorted ? ' ' + classes.labelContainerOrdered : '')
                                 },
-                                view !== 's' ? title : smallTitle ? smallTitle : title
+                                view !== 's' ? title : smallTitle || title
                             ),
                             align !== 'right' && _icons
                         ) : _react2.default.createElement(
@@ -340,7 +341,7 @@ var HeaderCell = function (_React$PureComponent) {
                             _react2.default.createElement(
                                 'span',
                                 { className: classes.labelContainer, style: { width: '100%' } },
-                                view !== 's' ? title : smallTitle ? smallTitle : title
+                                view !== 's' ? title : smallTitle || title
                             )
                         )
                     ),
@@ -351,11 +352,12 @@ var HeaderCell = function (_React$PureComponent) {
                     title: title,
                     filterValueList: menuFilters,
                     isOpen: filterOpen,
-                    onClose: this.closeFilterMenu,
+                    onClose: this.handleClose,
                     anchorEl: anchorEl,
                     sortable: sortable,
                     onSort: this.handleSort,
-                    onFilterChange: this.handleFilterChange
+                    onFilterChange: this.handleFilterChange,
+                    translations: translations.columnFilter
                 })
             );
         }
@@ -376,18 +378,50 @@ HeaderCell.defaultProps = {
     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
      */
@@ -400,69 +434,41 @@ HeaderCell.propTypes = process.env.NODE_ENV !== "production" ? {
      * Titre condensé
      */
     smallTitle: _propTypes2.default.string,
-    /**
-     * Titre de la colonne
-     */
-    title: _propTypes2.default.string.isRequired,
-    /**
-     * Type de cellule
-     */
-    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,
     /**
      * Sens du tri
      */
     sortDirection: _propTypes2.default.oneOf(['asc', 'desc']),
     /**
-     * Fonction de callback au tri - passe la direction du tri
+     * Tri actif / inactif
      */
-    onSort: _propTypes2.default.func,
+    sorted: _propTypes2.default.bool,
     /**
-     * Ajoute le composant ColumnFilter, par défaut à True si filterSource est définie.
+     * True si la colonne est la première colonne et doit avoir un comportement "sticky" lors du scroll horizontal
      */
-    filterable: _propTypes2.default.bool,
+    sticky: _propTypes2.default.bool,
     /**
-     * Liste fermé des valeurs disponibles sur lesquelles filtrer (inclure/exclure)
+     * Titre de la colonne
      */
-    filterSource: _propTypes2.default.array,
+    title: _propTypes2.default.string.isRequired,
     /**
-     * Fonction de callback au changement du filtre - passe la liste des id des valeurs incluses
+     * Traduction des chaînes affichées
      */
-    onFilterChange: _propTypes2.default.func,
+    translations: _propTypes2.default.object,
     /**
-     * View (L/M/S)
+     * Type de cellule
      */
-    view: _propTypes2.default.oneOf(['l', 'm', 's']),
+    type: _propTypes2.default.string.isRequired,
     /**
-     * Densité, défini la hauteur de la ligne
+     * View (L/M/S)
      */
-    dense: _propTypes2.default.bool,
+    view: _propTypes2.default.oneOf(['l', 'm', 's']),
     /**
      * Largeur de la cellule (hors padding), est déduit de view par défaut
      */
-    width: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]),
-    /**
-     * La largeur de la cellule est fixé (toutes les colonnes sauf une)
-     */
-    fixedColumnWidth: _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
+    width: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string])
 } : {};
 exports.default = (0, _styles.withStyles)(styles, { withTheme: true, name: 'HmuiHeaderCell' })(HeaderCell);

package/HiTable/HiTable.js

@@ -770,7 +770,7 @@ var HiTable = function (_React$Component) {
                             height: headerHeight,
                             sticky: sticky,
                             view: view,
-                            translations: translations,
+                            translations: translations.tableHead,
                             lookupColumns: lookupColumns,
                             fixedColumnWidth: fixedColumnWidth
                         }),
@@ -793,7 +793,7 @@ var HiTable = function (_React$Component) {
                             onRowClick: onRowClick,
                             onScroll: this.handleVerticalScroll,
                             addNewRowRefs: this.addNewRowRefs,
-                            translations: translations,
+                            translations: translations.tableBody,
                             groupBy: groupBy,
                             onClickNext: this.handleNextStickyRow,
                             groupByIds: groupByIds,
@@ -809,7 +809,7 @@ var HiTable = function (_React$Component) {
                             requestNextDatas: requestNextDatas,
                             maxAutoRequest: 3,
                             isScrollToBottom: isScrollToBottom,
-                            translations: translations
+                            translations: translations.tableFooterScroll
                         }),
                         !infiniteScroll && footerContent && _react2.default.createElement(
                             _HiTableFooter2.default,
@@ -866,17 +866,7 @@ HiTable.defaultProps = {
     height: 450,
     sticky: true,
     translations: {
-        load_more: 'Load More',
-        back_to_top: 'Back to top',
-        get_the_n_new_items: 'See %s new items',
-        choose_and_organize_columns: 'Choose & organize columns',
-        search: 'Search',
-        time: 'Time',
-        stickyRow: {
-            button: {
-                next: 'Next day'
-            }
-        }
+        back_to_top: 'Back to top'
     },
     view: 'l',
     lookupColumns: [],

package/HiTable/HiTableHead.js

@@ -313,7 +313,8 @@ var HiTableHead = function (_React$Component) {
                                 align: column['align'],
                                 sticky: firstColumn && sticky,
                                 lookedUp: lookupColumns.includes(column.colId),
-                                fixedColumnWidth: fixedColumnWidth
+                                fixedColumnWidth: fixedColumnWidth,
+                                translations: translations.headerCell
                             });
                         }
                     }),
@@ -347,7 +348,7 @@ var HiTableHead = function (_React$Component) {
                             columns: columns,
                             orderedColumns: orderedColumns,
                             mandatoryColumnId: mandatoryColumnId,
-                            translations: translations
+                            translations: translations.orderColumns
                         })
                     )
                 ),
@@ -391,10 +392,7 @@ HiTableHead.defaultProps = {
     dense: false,
     sticky: true,
     translations: {
-        get_the_n_new_items: 'Get the %s new items',
-        choose_and_organize_columns: 'Choose & organize columns',
-        search: 'Search',
-        time: 'Time'
+        get_the_n_new_items: 'Get the %s new items'
     },
     view: 'l'
 };

package/es/HiLoader/HiLoader.js

@@ -8,11 +8,15 @@ export const styles = () => ({});
 function HiLoader(props) {
     const { theme, loading } = props;
 
-    return React.createElement(PropagateLoader, {
-        loading: loading,
-        size: 12,
-        color: theme.palette.business.primary.normal
-    });
+    return React.createElement(
+        'div',
+        { id: 'hi-loader' },
+        React.createElement(PropagateLoader, {
+            loading: loading,
+            size: 12,
+            color: theme.palette.business.primary.normal
+        })
+    );
 }
 
 HiLoader.propTypes = process.env.NODE_ENV !== "production" ? {

package/es/HiSelect/HiSelect.js

@@ -28,7 +28,7 @@ export const styles = theme => ({
     },
     popper: {
         width: '100%',
-        zIndex: 11
+        zIndex: 1200
     },
     paper: {
         borderRadius: '0px 2px',
@@ -94,6 +94,11 @@ class HiSelect extends React.PureComponent {
                     valueInOptions = true;
                 }
             });
+            if (!valueInOptions && props.pinnedItem) {
+                if (props.value.indexOf(props.pinnedItem.id) >= 0) {
+                    valueInOptions = true;
+                }
+            }
         }
 
         if (!valueInOptions) {

package/es/HiTable/HeaderCell.js

@@ -7,7 +7,6 @@ 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 +70,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%'
     }
 });
@@ -96,7 +95,7 @@ class HeaderCell extends React.PureComponent {
 
         this.onFilterClick = this.onFilterClick.bind(this);
         this.openFilterMenu = this.openFilterMenu.bind(this);
-        this.closeFilterMenu = this.closeFilterMenu.bind(this);
+        this.handleClose = this.handleClose.bind(this);
         this.handleSort = this.handleSort.bind(this);
         this.handleFilterChange = this.handleFilterChange.bind(this);
     }
@@ -109,7 +108,7 @@ class HeaderCell extends React.PureComponent {
         });
     }
 
-    closeFilterMenu() {
+    handleClose() {
         this.setState({ filterOpen: false, anchorEl: null, menuFilters: [] });
     }
 
@@ -146,36 +145,37 @@ class HeaderCell extends React.PureComponent {
             align = cst.ALIGN_RIGHT_TYPES.includes(type) ? 'right' : 'left',
             sticky,
             padding,
-            lookedUp
+            lookedUp,
+            translations
         } = this.props;
 
         const { filterOpen, anchorEl, menuFilters } = this.state;
 
-        let offset = selectable ? dense ? 32 : 40 : padding;
+        const offset = selectable ? dense ? 32 : 40 : padding;
 
         // Inclue le padding et/ou la checkbox dans la largeur de la cellule
-        let _width = (width || cst.DEFAULT_WIDTHS[type][view]) + offset + padding;
+        const _width = (width || cst.DEFAULT_WIDTHS[type][view]) + offset + padding;
         // N'affiche pas le tri si il est désactivé.
-        let _sorted = sortable && sorted;
+        const _sorted = sortable && sorted;
         // N'active pas le filtre si il n'y a pas de jeu de donnée sur lesquelles filtrées.
-        let _filterable = filterable && typeof filterSource !== 'undefined' && filterSource.length > 0;
+        const _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.
-        let sortedBorderElement = _sorted ? React.createElement('div', {
+        const 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
         });
 
-        let _icons = _filterable || sortable ? _filterable ? _sorted ? React.createElement(FilterVariantIcon, { className: filterIconClassName }) : React.createElement(MenuIcon, { className: classes.icon }) : _sorted && React.createElement(ArrowDownwardIcon, { className: sortIconClassName }) : '';
+        const _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 });
 
@@ -237,9 +237,9 @@ class HeaderCell extends React.PureComponent {
                         React.createElement(
                             'span',
                             {
-                                className: classes.labelContainer + (_sorted ? ' ' + classes.labelContainerOrdered : '')
+                                className: classes.labelContainer + (_sorted ? ` ${classes.labelContainerOrdered}` : '')
                             },
-                            view !== 's' ? title : smallTitle ? smallTitle : title
+                            view !== 's' ? title : smallTitle || title
                         ),
                         align !== 'right' && _icons
                     ) : React.createElement(
@@ -256,7 +256,7 @@ class HeaderCell extends React.PureComponent {
                         React.createElement(
                             'span',
                             { className: classes.labelContainer, style: { width: '100%' } },
-                            view !== 's' ? title : smallTitle ? smallTitle : title
+                            view !== 's' ? title : smallTitle || title
                         )
                     )
                 ),
@@ -267,11 +267,12 @@ class HeaderCell extends React.PureComponent {
                 title: title,
                 filterValueList: menuFilters,
                 isOpen: filterOpen,
-                onClose: this.closeFilterMenu,
+                onClose: this.handleClose,
                 anchorEl: anchorEl,
                 sortable: sortable,
                 onSort: this.handleSort,
-                onFilterChange: this.handleFilterChange
+                onFilterChange: this.handleFilterChange,
+                translations: translations.columnFilter
             })
         );
     }
@@ -290,18 +291,50 @@ HeaderCell.defaultProps = {
     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
      */
@@ -314,69 +347,41 @@ HeaderCell.propTypes = process.env.NODE_ENV !== "production" ? {
      * Titre condensé
      */
     smallTitle: PropTypes.string,
-    /**
-     * Titre de la colonne
-     */
-    title: PropTypes.string.isRequired,
-    /**
-     * Type de cellule
-     */
-    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,
     /**
      * Sens du tri
      */
     sortDirection: PropTypes.oneOf(['asc', 'desc']),
     /**
-     * Fonction de callback au tri - passe la direction du tri
+     * Tri actif / inactif
      */
-    onSort: PropTypes.func,
+    sorted: PropTypes.bool,
     /**
-     * Ajoute le composant ColumnFilter, par défaut à True si filterSource est définie.
+     * True si la colonne est la première colonne et doit avoir un comportement "sticky" lors du scroll horizontal
      */
-    filterable: PropTypes.bool,
+    sticky: PropTypes.bool,
     /**
-     * Liste fermé des valeurs disponibles sur lesquelles filtrer (inclure/exclure)
+     * Titre de la colonne
      */
-    filterSource: PropTypes.array,
+    title: PropTypes.string.isRequired,
     /**
-     * Fonction de callback au changement du filtre - passe la liste des id des valeurs incluses
+     * Traduction des chaînes affichées
      */
-    onFilterChange: PropTypes.func,
+    translations: PropTypes.object,
     /**
-     * View (L/M/S)
+     * Type de cellule
      */
-    view: PropTypes.oneOf(['l', 'm', 's']),
+    type: PropTypes.string.isRequired,
     /**
-     * Densité, défini la hauteur de la ligne
+     * View (L/M/S)
      */
-    dense: PropTypes.bool,
+    view: PropTypes.oneOf(['l', 'm', 's']),
     /**
      * Largeur de la cellule (hors padding), est déduit de view par défaut
      */
-    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    /**
-     * La largeur de la cellule est fixé (toutes les colonnes sauf une)
-     */
-    fixedColumnWidth: 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
+    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
 } : {};
 export default withStyles(styles, { withTheme: true, name: 'HmuiHeaderCell' })(HeaderCell);

package/es/HiTable/HiTable.js

@@ -639,7 +639,7 @@ class HiTable extends React.Component {
                         height: headerHeight,
                         sticky: sticky,
                         view: view,
-                        translations: translations,
+                        translations: translations.tableHead,
                         lookupColumns: lookupColumns,
                         fixedColumnWidth: fixedColumnWidth
                     }),
@@ -662,7 +662,7 @@ class HiTable extends React.Component {
                         onRowClick: onRowClick,
                         onScroll: this.handleVerticalScroll,
                         addNewRowRefs: this.addNewRowRefs,
-                        translations: translations,
+                        translations: translations.tableBody,
                         groupBy: groupBy,
                         onClickNext: this.handleNextStickyRow,
                         groupByIds: groupByIds,
@@ -678,7 +678,7 @@ class HiTable extends React.Component {
                         requestNextDatas: requestNextDatas,
                         maxAutoRequest: 3,
                         isScrollToBottom: isScrollToBottom,
-                        translations: translations
+                        translations: translations.tableFooterScroll
                     }),
                     !infiniteScroll && footerContent && React.createElement(
                         HiTableFooter,
@@ -731,17 +731,7 @@ HiTable.defaultProps = {
     height: 450,
     sticky: true,
     translations: {
-        load_more: 'Load More',
-        back_to_top: 'Back to top',
-        get_the_n_new_items: 'See %s new items',
-        choose_and_organize_columns: 'Choose & organize columns',
-        search: 'Search',
-        time: 'Time',
-        stickyRow: {
-            button: {
-                next: 'Next day'
-            }
-        }
+        back_to_top: 'Back to top'
     },
     view: 'l',
     lookupColumns: [],