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

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) {
@@ -216,7 +221,8 @@ class HiSelect extends React.PureComponent {
             hierarchic,
             id,
             placeholder,
-            staticPosition
+            staticPosition,
+            pinnedItem
         } = this.props;
 
         const { open, suggestions, focused } = this.state;
@@ -224,6 +230,11 @@ class HiSelect extends React.PureComponent {
         let display = '';
         const selectedIdList = Array.isArray(value) ? value : value ? [value] : [];
 
+        let _suggestions = [...suggestions];
+        if (pinnedItem) {
+            _suggestions = [pinnedItem, ...suggestions];
+        }
+
         if (this.state.dynamic && selectedIdList.length === 1) {
             display = translations.one_item_selected.replace('%s', selectedIdList.length);
         } else if (this.state.nbOptions !== selectedIdList.length && selectedIdList.length > 1) {
@@ -232,7 +243,11 @@ class HiSelect extends React.PureComponent {
             display = translations.all;
         } else if (selectedIdList.length === 1) {
             if (type !== 'icon') {
-                display = options.find(o => o.id === selectedIdList[0]).label;
+                let item = options.find(o => o.id === selectedIdList[0]);
+                if (!item && pinnedItem) {
+                    item = pinnedItem;
+                }
+                display = item.label;
             } else {
                 const optionSelected = options.find(o => o.id === selectedIdList[0]);
                 display = React.createElement(
@@ -289,7 +304,7 @@ class HiSelect extends React.PureComponent {
                     React.createElement(HiSelectableList, {
                         type: type,
                         parentItemSelectable: parentItemSelectable,
-                        itemList: suggestions,
+                        itemList: _suggestions,
                         onSelect: this.handleSelect,
                         selectedIdList: selectedIdList,
                         checkbox: checkbox,
@@ -395,7 +410,7 @@ var _initialiseProps = function () {
             this.handleClose();
         } else {
             if (!this.props.staticPosition) {
-                document.body.style.overflow = 'hidden';
+                //document.body.style.overflow = 'hidden';
             }
             this.setState({ open: true });
             const options = this.props.options.slice();
@@ -459,7 +474,7 @@ var _initialiseProps = function () {
             nextItem = getNextItemSelectable(document.activeElement, 'up');
         } else if (event.key === 'Tab') {
             if (!this.props.staticPosition) {
-                document.body.style.overflow = 'auto';
+                //document.body.style.overflow = 'auto';
             }
             this.setState({ open: false });
         }
@@ -484,7 +499,7 @@ var _initialiseProps = function () {
 
     this.handleClose = () => {
         if (!this.props.staticPosition) {
-            document.body.style.overflow = 'auto';
+            //document.body.style.overflow = 'auto';
         }
         this.setState({
             open: false
@@ -506,7 +521,7 @@ var _initialiseProps = function () {
     };
 
     this.handleSelect = (event, item) => {
-        const { multiple, value, name, onChange, options, hierarchic } = this.props;
+        const { multiple, value, onChange, options, hierarchic, pinnedItem } = this.props;
         const { hierarchySelected, hierarchy, nbOptions } = this.state;
         const hiSelected = _extends({}, hierarchySelected);
 
@@ -551,8 +566,20 @@ var _initialiseProps = function () {
                     hiSelected[item.parentId].splice(hiSelected[item.parentId].indexOf(item.id), 1);
                 }
             } else {
-                // item non sélectionné => on le sélectionne
-                if (item.hasChildren !== true) valueList.push(item.id);
+                if (pinnedItem && item.id === pinnedItem.id) {
+                    _Object$keys(hiSelected).map(parentItemId => {
+                        hiSelected[parentItemId] = [];
+                        return true;
+                    });
+                    valueList = [item.id];
+                } else {
+                    // item non sélectionné => on le sélectionne
+                    if (item.hasChildren !== true) valueList.push(item.id);
+
+                    if (pinnedItem && valueList.includes(pinnedItem.id)) {
+                        valueList.splice(valueList.indexOf(pinnedItem.id), 1);
+                    }
+                }
 
                 if (item.hasChildren === true) {
                     // Si item parent => on ajoute tous les enfants
@@ -735,6 +762,10 @@ HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
      * Les items parents sont sélectionnables
      */
     parentItemSelectable: PropTypes.bool,
+    /**
+     * Item épinglé en début de liste
+     */
+    pinnedItem: PropTypes.object,
     /**
      * Placeholder affiché lorsque le select est fermé
      * Surcharge le placeholder par défaut

package/es/HiSelect/HiSuggestSelect.js

@@ -116,11 +116,25 @@ class HiSuggestSelect extends React.PureComponent {
 
     render() {
         const _props = this.props,
-              { classes, translations, id, onSearch } = _props,
-              otherProps = _objectWithoutProperties(_props, ['classes', 'translations', 'id', 'onSearch']);
+              { classes, id, showMinLength, showNoResults, onSearch, translations } = _props,
+              otherProps = _objectWithoutProperties(_props, ['classes', 'id', 'showMinLength', 'showNoResults', 'onSearch', 'translations']);
 
         const { focused, options } = this.state;
-        const open = !!options.length && focused;
+
+        let optionsShown = options;
+
+        // If no results match
+        if (options.length === 0 && (showNoResults || showMinLength)) {
+            optionsShown = [{
+                id: '_no_result',
+                type: 'text',
+                disabled: true,
+                centered: true,
+                checkbox: false,
+                label: showNoResults ? translations.no_result_match : translations.min_length
+            }];
+        }
+        const open = !!optionsShown.length && focused;
 
         return React.createElement(
             'div',
@@ -137,6 +151,7 @@ class HiSuggestSelect extends React.PureComponent {
                     Target,
                     null,
                     React.createElement(HiInput, _extends({}, otherProps, {
+
                         inputId: id,
                         focused: focused,
                         inputRef: input => {
@@ -162,7 +177,7 @@ class HiSuggestSelect extends React.PureComponent {
                             Paper,
                             { className: classes.paper },
                             React.createElement(HiSelectableList, {
-                                itemList: options,
+                                itemList: optionsShown,
                                 selectedIdList: [],
                                 checkbox: false,
                                 onSelect: this.handleSelect,
@@ -178,7 +193,12 @@ class HiSuggestSelect extends React.PureComponent {
 }
 
 HiSuggestSelect.defaultProps = {
-    translations: {},
+    showMinLength: false,
+    showNoResults: false,
+    translations: {
+        no_result_match: 'No result match',
+        min_length: 'Veuillez saisir 3 caractères minimum'
+    },
     options: []
 };
 HiSuggestSelect.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -202,6 +222,14 @@ HiSuggestSelect.propTypes = process.env.NODE_ENV !== "production" ? {
      * Liste de suggestions.
      */
     options: PropTypes.array,
+    /**
+     * Permet d'afficher un message si pas assez de caractères
+     */
+    showMinLength: PropTypes.bool,
+    /**
+     * Permet d'afficher un message si aucune options n'est présente
+     */
+    showNoResults: PropTypes.bool,
     /**
      * Traductions (par défaut en anglais)
      */

package/es/HiSelectableList/HiSelectableListItem.js

@@ -295,51 +295,44 @@ class HiSelectableListItem extends React.Component {
             listItemProps.button = false;
         }
 
-        let iconAll;
-        if (item.id === '_all' && item.icon) {
-            iconAll = React.createElement(HiIconBuilder, { icon: item.icon, className: classes.checkboxIcon });
-        }
-
         // calcul du padding left
         let paddingLeft = 0;
 
         if (leftPadding) {
             paddingLeft = leftPadding;
-        } else {
-            // Si pas de hiérarchie, padding de 8px
-            if (!hierarchic) {
-                if (!effectiveCheckbox) {
-                    paddingLeft = 8;
+        } else if (!hierarchic) {
+            // Si pas de hiérarchie et sans checkbox, padding de 8px
+            if (!effectiveCheckbox) {
+                paddingLeft = 8;
+            }
+        } else if (selectable) {
+            // Si item selectionnable
+            // Si parent selectionnable
+            if (parentItemSelectable) {
+                // Si l'item contient une checkbox
+                if (effectiveCheckbox) {
+                    paddingLeft = 16 * level;
+                } else {
+                    paddingLeft = 16 * (level + 1);
                 }
-            } else if (selectable) {
-                // Si item selectionnable
-                // Si parent selectionnable
-                if (parentItemSelectable) {
-                    // Si l'item contient une checkbox
-                    if (effectiveCheckbox) {
-                        paddingLeft = 16 * level;
-                    } else {
-                        paddingLeft = 16 * (level + 1);
-                    }
-                } else if (level > 0) {
-                    if (effectiveCheckbox) {
-                        paddingLeft = 16 * (level - 1);
-                    } else {
-                        paddingLeft = 16 * level;
-                    }
-                } else if (!effectiveCheckbox) {
-                    if (item.id === '_all') {
-                        paddingLeft = 16;
-                    } else {
-                        paddingLeft = 16 * level;
-                    }
+            } else if (level > 0) {
+                if (effectiveCheckbox) {
+                    paddingLeft = 16 * (level - 1);
+                } else {
+                    paddingLeft = 16 * level;
                 }
-            } else {
-                paddingLeft = 16; // Padding de 16 par défaut
-                if (level > 0) {
+            } else if (!effectiveCheckbox) {
+                if (item.id === '_all') {
+                    paddingLeft = 16;
+                } else {
                     paddingLeft = 16 * level;
                 }
             }
+        } else {
+            paddingLeft = 16; // Padding de 16 par défaut
+            if (level > 0) {
+                paddingLeft = 16 * level;
+            }
         }
 
         listItemProps.style = { paddingLeft: `${paddingLeft}px` };
@@ -349,8 +342,8 @@ class HiSelectableListItem extends React.Component {
             iconDisplay = hoverIcon;
         } else if (item.hasChildren) {
             iconDisplay = parentIcon;
-        } else if (item.id === '_all') {
-            iconDisplay = iconAll;
+        } else if (item.type === 'icon' && item.icon) {
+            iconDisplay = React.createElement(HiIconBuilder, { icon: item.icon, className: classes.checkboxIcon });
         }
 
         return React.createElement(

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: [],

package/es/HiTable/HiTableHead.js

@@ -228,7 +228,8 @@ class HiTableHead extends React.Component {
                             align: column['align'],
                             sticky: firstColumn && sticky,
                             lookedUp: lookupColumns.includes(column.colId),
-                            fixedColumnWidth: fixedColumnWidth
+                            fixedColumnWidth: fixedColumnWidth,
+                            translations: translations.headerCell
                         });
                     }
                 }),
@@ -262,7 +263,7 @@ class HiTableHead extends React.Component {
                         columns: columns,
                         orderedColumns: orderedColumns,
                         mandatoryColumnId: mandatoryColumnId,
-                        translations: translations
+                        translations: translations.orderColumns
                     })
                 )
             ),
@@ -304,10 +305,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'
 };