@hipay/hipay-material-ui 1.0.0-beta.18 → 1.0.0-beta.2

package/es/HiTable/BodyRow.js

@@ -112,7 +112,6 @@ class BodyRow extends React.PureComponent {
             theme,
             row,
             columns,
-            lookupColumns,
             orderedColumns,
             selectable,
             selected,
@@ -125,10 +124,11 @@ class BodyRow extends React.PureComponent {
             innerRow,
             isDetail
         } = _props,
-              other = _objectWithoutProperties(_props, ['classes', 'theme', 'row', 'columns', 'lookupColumns', 'orderedColumns', 'selectable', 'selected', 'onClick', 'view', 'dense', 'dateLocale', 'numberLocale', 'sticky', 'innerRow', 'isDetail']);
+              other = _objectWithoutProperties(_props, ['classes', 'theme', 'row', 'columns', 'orderedColumns', 'selectable', 'selected', 'onClick', 'view', 'dense', 'dateLocale', 'numberLocale', 'sticky', 'innerRow', 'isDetail']);
 
         const { style } = this.state;
 
+        let firstCol = true;
         let unfixedCol = true;
 
         const rowStyle = _extends({}, style, {
@@ -160,82 +160,65 @@ class BodyRow extends React.PureComponent {
                 key: `${row.rowId}-left-cell`,
                 className: patchDivClass
             }),
-            orderedColumns.map((colRef, index) => {
-
-                // Dynamic column settings (from OrderColumns)
-                const {
-                    colId: colRefId,
-                    displayed,
-                    view: colView
-                } = colRef,
+            orderedColumns.map(colRef => {
+                const { colId: colRefId, displayed, view: colView } = colRef,
                       colRefProps = _objectWithoutProperties(colRef, ['colId', 'displayed', 'view']);
+                if (displayed !== false) {
+                    // the first column is sticky (except checkbox)
+                    const first = firstCol;
+                    firstCol = false;
+                    const _columns$colRef$colId = columns[colRef.colId],
+                          {
+                        colId,
+                        align,
+                        datas,
+                        ellipsis,
+                        fixedWidth,
+                        type,
+                        width
+                    } = _columns$colRef$colId,
+                          columnProps = _objectWithoutProperties(_columns$colRef$colId, ['colId', 'align', 'datas', 'ellipsis', 'fixedWidth', 'type', 'width']);
+                    const data = row.datas[colRef.colId];
 
-                if (displayed === false) return null;
-
-                // the first column is sticky (except checkbox)
-                const first = index === 0;
-
-                // Static column settings
-                const _columns$colRefId = columns[colRefId],
-                      {
-                    colId,
-                    align,
-                    data: colData,
-                    ellipsis,
-                    fixedWidth,
-                    type,
-                    width
-                } = _columns$colRefId,
-                      columnProps = _objectWithoutProperties(_columns$colRefId, ['colId', 'align', 'data', 'ellipsis', 'fixedWidth', 'type', 'width']);
-
-                // view define in OrderColumn or table prop view by default
-                const effectiveView = colView || view;
-
-                // add clickable badge in cell to open children
-                const isParentAnchor = row.hasOwnProperty('parentAnchorColumn') && row.parentAnchorColumn === colId && row.hasOwnProperty('children') && row.children.length > 0;
+                    const effectiveView = colView || view;
+                    // add clickable badge in cell to open children
+                    const isParentAnchor = row.hasOwnProperty('parentAnchorColumn') && row.parentAnchorColumn === colId && row.hasOwnProperty('children') && row.children.length > 0;
 
-                // the first non fixed column is the only one not fixed
-                const unfixed = unfixedCol && fixedWidth !== true;
-                unfixedCol = unfixed ? false : unfixedCol;
+                    // the first non fixed column is the only one not fixed
+                    const unfixed = unfixedCol && fixedWidth !== true;
+                    unfixedCol = unfixedCol && fixedWidth !== true ? false : unfixedCol;
 
-                // add lookedUp style
-                const lookedUp = Array.isArray(lookupColumns) && lookupColumns.includes(colId);
-
-                // Cell data
-                let data = row.datas[colRefId];
-                // Get object data for column based on reference datas
-                if (data !== undefined && colData !== undefined) {
-                    const colItem = colData.find(item => item.id === data.value);
-                    if (colItem) {
-                        // Hydrate data object with reference item
-                        data = _extends({}, colItem, data);
+                    let lookedUp = false;
+                    if (this.props.lookupColumns && this.props.lookupColumns.includes(colId)) {
+                        lookedUp = true;
                     }
-                }
 
-                return React.createElement(BodyCellBuilder, _extends({}, other, {
-                    key: `${row.rowId}-${colId}-cell`,
-                    ukey: `${row.rowId}-${colId}-cell`,
-                    checkboxValue: row.rowId,
-                    type: type,
-                    data: data,
-                    ellipsis: ellipsis,
-                    align: align,
-                    view: effectiveView,
-                    padding: cst.DEFAULT_PADDING[view],
-                    width: width,
-                    fixedWidth: !unfixed,
-                    sticky: sticky && first,
-                    selectable: selectable && first,
-                    dateLocale: dateLocale,
-                    numberLocale: numberLocale,
-                    dense: dense,
-                    selected: selected,
-                    onSelect: this.handleSelect,
-                    onOpenDetails: this.handleOpenRowDetails,
-                    childrenCount: isParentAnchor ? row.children.length : null,
-                    colId: colId,
-                    lookedUp: lookedUp
-                }, columnProps, colRefProps));
+                    return React.createElement(BodyCellBuilder, _extends({}, other, {
+                        key: `${row.rowId}-${colId}-cell`,
+                        ukey: `${row.rowId}-${colId}-cell`,
+                        checkboxValue: row.rowId,
+                        type: type,
+                        datas: data,
+                        ellipsis: ellipsis,
+                        align: align,
+                        view: effectiveView,
+                        padding: cst.DEFAULT_PADDING[view],
+                        width: width,
+                        fixedWidth: !unfixed,
+                        sticky: sticky && first,
+                        selectable: selectable && first,
+                        dateLocale: dateLocale,
+                        numberLocale: numberLocale,
+                        dense: dense,
+                        selected: selected,
+                        onSelect: this.handleSelect,
+                        onOpenDetails: this.handleOpenRowDetails,
+                        childrenCount: isParentAnchor ? row.children.length : null,
+                        colId: colId,
+                        lookedUp: lookedUp
+                    }, columnProps, colRefProps));
+                }
+                return null;
             }),
             React.createElement(TableCell, {
                 style: {
@@ -258,8 +241,7 @@ BodyRow.defaultProps = {
     sticky: false,
     live: false,
     innerRow: false,
-    lookupColumns: [],
-    fixedColumnWidth: true
+    lookupColumns: []
 };
 BodyRow.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -270,11 +252,6 @@ BodyRow.propTypes = process.env.NODE_ENV !== "production" ? {
      * Densité d'affichage (joue sur la hauteur des lignes)
      */
     dense: PropTypes.bool,
-    /**
-     * Fixe la taille des colonnes selon le type de vue
-     * Sinon les colonnes s'adaptent à l'espace disponible
-     */
-    fixedColumnWidth: PropTypes.bool,
     /**
      * Applique le style d'une ligne intégrée a un sous-tableau
      */

package/es/HiTable/ColumnFilter.js

@@ -1,4 +1,3 @@
-import _Set from 'babel-runtime/core-js/set';
 import _extends from 'babel-runtime/helpers/extends';
 import React from 'react';
 import Popover from 'material-ui/Popover';
@@ -143,20 +142,20 @@ class ColumnFilter extends React.Component {
      * Sélectionne tous les items filtrés
      */
     selectAllFilters() {
-        this.setState(prevState => ({
-            selectedIdList: [...new _Set([...prevState.selectedIdList, ...prevState.suggestions.map(item => item.id)])]
-        }));
+        this.setState({ selectedIdList: this.state.suggestions.map(item => item.id) });
     }
 
     /**
      * Désélectionne tous les items filtrés
      */
     deselectAllFilters() {
-        this.setState(prevState => {
-            return {
-                selectedIdList: prevState.selectedIdList.filter(item => prevState.suggestions.find(suggestion => suggestion.id === item) === undefined)
-            };
+        const selectedIdList = this.state.selectedIdList;
+        this.state.suggestions.map(item => {
+            if (this.state.selectedIdList.includes(item.id)) {
+                selectedIdList.splice(this.state.selectedIdList.indexOf(item.id), 1);
+            }
         });
+        this.setState({ selectedIdList });
     }
 
     handleSort(direction) {
@@ -254,11 +253,7 @@ class ColumnFilter extends React.Component {
             React.createElement(
                 'div',
                 { className: classes.menuItemFilter },
-                React.createElement(
-                    'span',
-                    { style: { marginRight: 4 } },
-                    translations.filter
-                ),
+                translations.filter,
                 React.createElement(
                     HiPins,
                     {
@@ -302,8 +297,7 @@ class ColumnFilter extends React.Component {
                 itemList: suggestions,
                 selectedIdList: selectedIdList,
                 onSelect: this.toggleSelectItem,
-                leftPadding: 28,
-                checkbox: type !== 'icon'
+                leftPadding: 28
             }),
             React.createElement(
                 'div',

package/es/HiTable/HeaderCell.js

@@ -130,7 +130,6 @@ class HeaderCell extends React.PureComponent {
             classes,
             type,
             title,
-            smallTitle,
             selectable,
             selected,
             onSelect,
@@ -142,7 +141,7 @@ class HeaderCell extends React.PureComponent {
             view,
             dense,
             width = cst.DEFAULT_WIDTHS[type][view],
-            fixedColumnWidth,
+            fixedWidth,
             align = cst.ALIGN_RIGHT_TYPES.includes(type) ? 'right' : 'left',
             sticky,
             padding,
@@ -179,22 +178,19 @@ class HeaderCell extends React.PureComponent {
 
         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;
-        }
-
         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,
@@ -237,7 +233,7 @@ class HeaderCell extends React.PureComponent {
                             {
                                 className: classes.labelContainer + (_sorted ? ' ' + classes.labelContainerOrdered : '')
                             },
-                            view !== 's' ? title : smallTitle ? smallTitle : title
+                            title
                         ),
                         align !== 'right' && _icons
                     ) : React.createElement(
@@ -254,7 +250,7 @@ class HeaderCell extends React.PureComponent {
                         React.createElement(
                             'span',
                             { className: classes.labelContainer, style: { width: '100%' } },
-                            view !== 's' ? title : smallTitle ? smallTitle : title
+                            title
                         )
                     )
                 ),
@@ -283,7 +279,7 @@ HeaderCell.defaultProps = {
     sortDirection: 'asc',
     view: 'l',
     dense: false,
-    fixedColumnWidth: true,
+    fixedWidth: false,
     sticky: true,
     padding: 8
 };
@@ -363,7 +359,7 @@ HeaderCell.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * La largeur de la cellule est fixé (toutes les colonnes sauf une)
      */
-    fixedColumnWidth: PropTypes.bool,
+    fixedWidth: PropTypes.bool,
     /**
      * Title alignement, est déduit de type par défaut
      */

package/es/HiTable/HiTable.js

@@ -5,11 +5,10 @@ import ArrowUp from 'mdi-material-ui/ArrowUp';
 import isRequiredIf from 'react-proptype-conditional-require';
 import HiButton from '../HiButton';
 
-import { withStyles } from '../styles';
+import { withStyles, withTheme } from '../styles';
 import HiTableHead from './HiTableHead';
 import HiTableBody from './HiTableBody';
 import HiTableFooterScroll from './HiTableFooterScroll';
-import HiTableFooter from './HiTableFooter';
 import * as cst from './constants';
 import HiTableContextMenu from './HiTableContextMenu';
 
@@ -582,24 +581,13 @@ class HiTable extends React.Component {
             translations,
             view,
             groupBy,
-            lookupColumns,
-            loading,
-            fixedColumnWidth,
-            disableContextMenu,
-            footerContent
+            lookupColumns
         } = this.props;
 
         const { dateUpdate, isScrollToBottom, groupByIds } = this.state;
 
         const headerHeight = dense ? cst.CELL_HEADER_HEIGHT_DENSE : cst.CELL_HEADER_HEIGHT;
 
-        let nbColumnsDisplayed = 0;
-        orderedColumns.forEach(column => {
-            if (column.displayed !== false) {
-                nbColumnsDisplayed += 1;
-            }
-        });
-
         return React.createElement(
             'div',
             { className: classes.root },
@@ -639,8 +627,7 @@ class HiTable extends React.Component {
                         sticky: sticky,
                         view: view,
                         translations: translations,
-                        lookupColumns: lookupColumns,
-                        fixedColumnWidth: fixedColumnWidth
+                        lookupColumns: lookupColumns
                     }),
                     React.createElement(HiTableBody, {
                         tabId: tabId,
@@ -665,10 +652,7 @@ class HiTable extends React.Component {
                         groupBy: groupBy,
                         onClickNext: this.handleNextStickyRow,
                         groupByIds: groupByIds,
-                        lookupColumns: lookupColumns,
-                        loading: loading,
-                        fixedColumnWidth: fixedColumnWidth,
-                        disableContextMenu: disableContextMenu
+                        lookupColumns: lookupColumns
                     }),
                     infiniteScroll && React.createElement(HiTableFooterScroll, {
                         tabId: tabId,
@@ -677,15 +661,7 @@ class HiTable extends React.Component {
                         maxAutoRequest: 3,
                         isScrollToBottom: isScrollToBottom,
                         translations: translations
-                    }),
-                    !infiniteScroll && footerContent && React.createElement(
-                        HiTableFooter,
-                        {
-                            nbColumnsDisplayed: nbColumnsDisplayed,
-                            view: view
-                        },
-                        footerContent
-                    )
+                    })
                 ),
                 React.createElement(HiTableContextMenu, {
                     tabId: tabId,
@@ -698,7 +674,7 @@ class HiTable extends React.Component {
                     React.createElement(
                         HiButton,
                         {
-                            variant: 'raised',
+                            raised: true,
                             color: 'primary',
                             className: classes.backToTopButton,
                             onClick: () => this.scrollToTop()
@@ -741,10 +717,7 @@ HiTable.defaultProps = {
         }
     },
     view: 'l',
-    lookupColumns: [],
-    loading: false,
-    fixedColumnWidth: true,
-    disableContextMenu: true
+    lookupColumns: []
 };
 HiTable.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -771,27 +744,10 @@ HiTable.propTypes = process.env.NODE_ENV !== "production" ? {
      * Densité d'affichage (joue sur la hauteur des lignes)
      */
     dense: PropTypes.bool,
-    /**
-     * Active/désactive le menu contextuel au clic droit sur les cellules du tableau
-     */
-    disableContextMenu: PropTypes.bool.isRequired,
     /**
      * Active le filtre sur les colonnes filtrables
      */
     filterable: PropTypes.bool,
-    /**
-     * Fixe la taille des colonnes selon le type de vue
-     * Sinon les colonnes s'adaptent à l'espace disponible
-     */
-    fixedColumnWidth: PropTypes.bool,
-    /**
-     * Ajoute un footer avec le contenu footerContent à l'intérieur
-     */
-    footerContent: PropTypes.node,
-    /**
-     * Id de la colonne par laquelle sont regroupé les éléments
-     */
-    groupBy: PropTypes.string,
     /**
      * Ajoute le loader et le requestNextDatas en fin de tableau (si infiniteScroll activé)
      */
@@ -804,10 +760,6 @@ HiTable.propTypes = process.env.NODE_ENV !== "production" ? {
      * Ajoute l'infinite scroll
      */
     infiniteScroll: PropTypes.bool,
-    /**
-     * État du tableau en cours de chargement des données
-     */
-    loading: PropTypes.bool,
     /**
      * Identifiant de la ou des colonnes sur la/lesquelles il y a une 'lookup' search
      */
@@ -860,9 +812,6 @@ HiTable.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Fonction de callback sur le tri d'une colonne
      * Passe l'id de la colonne et la direction du tri (ou false si tri par défaut)
-     *
-     * @param {string} column id
-     * @param {string} direction
      */
     onSort: PropTypes.func,
     /**
@@ -918,6 +867,10 @@ HiTable.propTypes = process.env.NODE_ENV !== "production" ? {
      * Taille du tableau (L/M/S),
      * définit l'espace entre les cellules et leurs tailles par default
      */
-    view: PropTypes.oneOf(['l', 'm', 's'])
+    view: PropTypes.oneOf(['l', 'm', 's']),
+    /**
+     * Id de la colonne par laquelle sont regroupé les éléments
+     */
+    groupBy: PropTypes.string
 } : {};
 export default withStyles(styles, { withTheme: true, name: 'HmuiHiTable' })(HiTable);

package/es/HiTable/HiTableBody.js

@@ -2,24 +2,23 @@ import _extends from 'babel-runtime/helpers/extends';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { TableBody, TableRow } from 'material-ui/Table';
-import classNames from 'classnames';
-import { withStyles } from '../styles';
+import { withStyles, withTheme } from '../styles';
 import BodyRow from './BodyRow';
 import ChildRow from './ChildRow';
 import HiStickyRow from './HiStickyRow';
 import * as cst from './constants';
+import { SORTED_COLUMN_ERROR_MESSAGE } from './HiTableHead';
+import isRequiredIf from 'react-proptype-conditional-require';
 
 export const styles = theme => ({
     tbody: {
         position: 'relative',
-        width: '100%',
+        display: 'block' /* seperates the tbody from the header */
+        , width: '100%',
         overflowX: 'hidden',
         overflowY: 'auto',
         zIndex: 11
     },
-    tbodyFixedWidth: {
-        display: 'block' /* seperates the tbody from the header */
-    },
     tbodyRows: {
         backgroundColor: theme.palette.background3
     },
@@ -192,10 +191,7 @@ class HiTableBody extends React.Component {
             numberLocale,
             groupByIds,
             sortedColumnId,
-            lookupColumns,
-            loading,
-            fixedColumnWidth,
-            disableContextMenu
+            lookupColumns
         } = this.props;
 
         const { openedParentRowId, openedDetailsRowIdList } = this.state;
@@ -292,9 +288,7 @@ class HiTableBody extends React.Component {
                 row,
                 sticky,
                 tabId,
-                view,
-                fixedColumnWidth,
-                disableContextMenu
+                view
             });
 
             if (hasChildren && openedParentRowId === row.rowId) {
@@ -323,9 +317,7 @@ class HiTableBody extends React.Component {
                         view,
                         dense,
                         sticky,
-                        isDetail: true,
-                        fixedColumnWidth,
-                        disableContextMenu
+                        isDetail: true
                     };
 
                     tableRows.push(React.createElement(BodyRow, _extends({ key: `${row.rowId}-${detailRow.rowId}` }, detailRowProps)));
@@ -333,20 +325,12 @@ class HiTableBody extends React.Component {
             }
         });
 
-        const tBodyClasses = classNames(classes.tbody, {
-            [classes.tbodyFixedWidth]: fixedColumnWidth
-        });
-
         return React.createElement(
             TableBody,
             {
                 id: `${tabId}-body`,
-                className: tBodyClasses,
-                style: _extends({
-                    height
-                }, loading && {
-                    opacity: 0.6
-                }),
+                className: classes.tbody,
+                style: { height },
                 onScroll: onScroll
             },
             tableRows.map(tableRow => {
@@ -365,9 +349,7 @@ HiTableBody.defaultProps = {
     dense: false,
     height: 450,
     sticky: true,
-    view: 'l',
-    loading: false,
-    disableContextMenu: true
+    view: 'l'
 };
 HiTableBody.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -395,23 +377,10 @@ HiTableBody.propTypes = process.env.NODE_ENV !== "production" ? {
      * Densité d'affichage (joue sur la hauteur des lignes)
      */
     dense: PropTypes.bool,
-    /**
-     * Active/désactive le menu contextuel au clic droit sur les cellules du tableau
-     */
-    disableContextMenu: PropTypes.bool.isRequired,
-    /**
-     * Fixe la taille des colonnes selon le type de vue
-     * Sinon les colonnes s'adaptent à l'espace disponible
-     */
-    fixedColumnWidth: PropTypes.bool,
     /**
      * Hauteur du tableau (px)
      */
     height: PropTypes.number,
-    /**
-     * État du tableau en cours de chargement des données
-     */
-    loading: PropTypes.bool,
     /**
      * Identifiant de la ou des colonnes sur la/lesquelles il y a une 'lookup' search
      */

package/es/HiTable/HiTableContextMenu.js

@@ -39,8 +39,7 @@ class HiTableContextMenu extends React.Component {
         super(props);
 
         this.state = {
-            value: '',
-            label: ''
+            value: ''
         };
 
         this.handleContextMenuOpen = this.handleContextMenuOpen.bind(this);
@@ -51,10 +50,7 @@ class HiTableContextMenu extends React.Component {
     }
 
     handleContextMenuOpen(event) {
-        this.setState({
-            value: event.detail.data.value,
-            label: event.detail.data.label
-        });
+        this.setState({ value: event.detail.data.label });
     }
 
     handleClickCopy(event, data) {
@@ -104,7 +100,7 @@ class HiTableContextMenu extends React.Component {
                     React.createElement(
                         'span',
                         { className: classes.title },
-                        menuItem.title.replace('%s', this.state.label)
+                        menuItem.title.replace('%s', this.state.value)
                     )
                 );
             })

package/es/HiTable/HiTableFooterScroll.js

@@ -84,7 +84,7 @@ class HiTableFooterScroll extends React.Component {
         ) : React.createElement(
             HiButton,
             {
-                variant: 'raised',
+                raised: true,
                 color: 'primary',
                 className: classes.loadMoreButton,
                 onClick: () => this.handleRequestNextDatas(true)