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

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
     },
@@ -150,16 +149,14 @@ class HiTableBody extends React.Component {
     /**
      * Définit les id des lignes dont les détails sont affichés ou null
      * (ajoute une ligne pour chaque détails)
-     * vérifie aussi le type du détail
      *
      * @param rowId
-     * @param type
      */
-    toggleOpenedDetailsRowId(rowId, type) {
+    toggleOpenedDetailsRowId(rowId) {
         this.setState(prevState => ({
-            openedDetailsRowIdList: prevState.openedDetailsRowIdList.find(item => item.id === rowId && item.type === type) ? prevState.openedDetailsRowIdList.filter(item => {
-                return item.id !== rowId || item.type !== type;
-            }) : [...prevState.openedDetailsRowIdList, { id: rowId, type: type }]
+            openedDetailsRowIdList: prevState.openedDetailsRowIdList.includes(rowId) ? prevState.openedDetailsRowIdList.filter(id => {
+                return id !== rowId;
+            }) : [...prevState.openedDetailsRowIdList, rowId]
         }));
         this.props.addNewRowRefs();
     }
@@ -194,11 +191,7 @@ class HiTableBody extends React.Component {
             numberLocale,
             groupByIds,
             sortedColumnId,
-            lookupColumns,
-            loading,
-            fixedColumnWidth,
-            disableContextMenu,
-            detailRowsOptions
+            lookupColumns
         } = this.props;
 
         const { openedParentRowId, openedDetailsRowIdList } = this.state;
@@ -269,6 +262,9 @@ class HiTableBody extends React.Component {
             // has children
             const hasChildren = row.hasOwnProperty('children') && row.children.length > 0;
 
+            // has detail rows
+            const hasDetailRows = row.hasOwnProperty('detailRows') && row.detailRows.length > 0;
+
             const BodyRowProps = _extends({
                 columns,
                 dateLocale,
@@ -280,9 +276,9 @@ class HiTableBody extends React.Component {
             }, hasChildren && {
                 openedAsParent: openedParentRowId === row.rowId,
                 onClick: this.setOpenedParentRowId // if row has children, onClick display the children
+            }, hasDetailRows && {
+                onOpenRowDetails: this.toggleOpenedDetailsRowId
             }, {
-                onOpenRowDetails: this.toggleOpenedDetailsRowId,
-                detailRowsOptions,
                 orderedColumns
             }, selectable && {
                 selectable,
@@ -292,9 +288,7 @@ class HiTableBody extends React.Component {
                 row,
                 sticky,
                 tabId,
-                view,
-                fixedColumnWidth,
-                disableContextMenu
+                view
             });
 
             if (hasChildren && openedParentRowId === row.rowId) {
@@ -305,6 +299,7 @@ class HiTableBody extends React.Component {
                     parentIndicatorColumn: row.parentIndicatorColumn,
                     parentLabel: row.parentLabel,
                     parentLabelIcon: row.parentLabelIcon,
+                    parentDetailRows: row.detailRows,
                     children: row.children,
                     onClose: this.setOpenedParentRowId
                 }, BodyRowProps)));
@@ -313,43 +308,29 @@ class HiTableBody extends React.Component {
             }
 
             // add opened detail rows
-            if (row.details && row.details.length > 0) {
-                row.details.forEach(detail => {
-                    if (detail.rows.length > 0 && openedDetailsRowIdList.find(item => item.id === row.rowId && item.type === detail.type)) {
-                        detail.rows.forEach(detailRow => {
-                            const detailRowProps = {
-                                row: detailRow,
-                                columns,
-                                orderedColumns,
-                                view,
-                                dense,
-                                sticky,
-                                isDetail: true,
-                                fixedColumnWidth,
-                                disableContextMenu
-                            };
+            if (hasDetailRows && openedDetailsRowIdList.includes(row.rowId)) {
+                row.detailRows.forEach(detailRow => {
+                    const detailRowProps = {
+                        row: detailRow,
+                        columns,
+                        orderedColumns,
+                        view,
+                        dense,
+                        sticky,
+                        isDetail: true
+                    };
 
-                            tableRows.push(React.createElement(BodyRow, _extends({ key: `${row.rowId}-${detailRow.rowId}` }, detailRowProps)));
-                        });
-                    }
+                    tableRows.push(React.createElement(BodyRow, _extends({ key: `${row.rowId}-${detailRow.rowId}` }, detailRowProps)));
                 });
             }
         });
 
-        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 => {
@@ -368,10 +349,7 @@ HiTableBody.defaultProps = {
     dense: false,
     height: 450,
     sticky: true,
-    view: 'l',
-    loading: false,
-    disableContextMenu: true,
-    detailRowsOptions: {}
+    view: 'l'
 };
 HiTableBody.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -399,27 +377,10 @@ HiTableBody.propTypes = process.env.NODE_ENV !== "production" ? {
      * Densité d'affichage (joue sur la hauteur des lignes)
      */
     dense: PropTypes.bool,
-    /**
-     * Options utilisées pour décrire le comportement de lignes de détails
-     */
-    detailRowsOptions: PropTypes.object,
-    /**
-     * 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)

package/es/HiTable/HiTableHead.js

@@ -3,7 +3,6 @@ import React from 'react';
 import { findDOMNode } from 'react-dom';
 import PropTypes from 'prop-types';
 import isRequiredIf from 'react-proptype-conditional-require';
-import classNames from 'classnames';
 
 import { TableHead, TableRow, TableCell } from 'material-ui/Table';
 import PlusCircleIcon from 'mdi-material-ui/PlusCircle';
@@ -19,13 +18,11 @@ import { MANDATORY_COLUMN_ERROR_MESSAGE } from './HiTable';
 export const styles = theme => ({
     thead: {
         position: 'relative',
-        width: '100%',
+        display: 'block' /*seperates the header from the body allowing it to be positioned*/
+        , width: '100%',
         overflow: 'visible',
         zIndex: 12
     },
-    theadFixedWidth: {
-        display: 'block' /*seperates the header from the body allowing it to be positioned*/
-    },
     theadRow: {
         backgroundColor: theme.palette.background3,
         zIndex: 12
@@ -151,16 +148,13 @@ class HiTableHead extends React.Component {
             sticky,
             translations,
             view,
-            lookupColumns,
-            fixedColumnWidth
+            lookupColumns
         } = this.props;
 
         const { hovered, openedOrderColumns, orderColumnsAnchorEl } = this.state;
 
         let headerProps = _extends({
-            className: classNames(classes.thead, {
-                [classes.theadFixedWidth]: fixedColumnWidth
-            })
+            className: classes.thead
         }, orderable && { onMouseEnter: this.handleEvent, onMouseLeave: this.handleEvent });
 
         let unfixedColumnIsSet = false,
@@ -207,8 +201,8 @@ class HiTableHead extends React.Component {
                         return React.createElement(HeaderCell, {
                             key: 'header-' + column.colId,
                             colId: column.colId,
-                            type: column['formType'] || column['type'] // define select items
-                            , title: column['label'],
+                            type: column['type'],
+                            title: column['label'],
                             smallTitle: column['reducedLabel'],
                             selectable: firstColumn && selectable,
                             selected: selectedIdList.length > 0 ? selectedIdList.length === dataSource.length ? true : 'mixed' : false,
@@ -227,8 +221,7 @@ class HiTableHead extends React.Component {
                             fixedWidth: fixed,
                             align: column['align'],
                             sticky: firstColumn && sticky,
-                            lookedUp: lookupColumns.includes(column.colId),
-                            fixedColumnWidth: fixedColumnWidth
+                            lookedUp: lookupColumns.includes(column.colId)
                         });
                     }
                 }),
@@ -336,11 +329,6 @@ HiTableHead.propTypes = process.env.NODE_ENV !== "production" ? {
      * 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,
     /**
      * Identifiant de la ou des colonnes sur la/lesquelles il y a une 'lookup' search
      */

package/es/HiTable/OrderColumns.js

@@ -63,8 +63,7 @@ export const styles = theme => ({
     controlLabelRoot: {
         marginLeft: 6,
         marginBottom: 8,
-        fontSize: 15,
-        width: 160
+        fontSize: 15
     },
     switchLabelRoot: {
         marginLeft: 15,
@@ -73,10 +72,7 @@ export const styles = theme => ({
     columnLabel: {
         position: 'relative',
         top: 5,
-        left: 5,
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap'
+        left: 5
     },
     label: {
         fontWeight: 'inherit'

package/es/HiTopBar/HiTopBar.js

@@ -5,13 +5,14 @@ import AppBar from 'material-ui/AppBar';
 import Toolbar from 'material-ui/Toolbar';
 import IconButton from 'material-ui/IconButton';
 import Collapse from 'material-ui/transitions/Collapse';
-import { ChevronDoubleUp, ChevronDoubleDown, Menu as MenuIcon, ArrowLeft, DotsVertical } from 'mdi-material-ui';
+import { ChevronDoubleUp, ChevronDoubleDown, Menu as MenuIcon, ArrowLeft, DotsVertical, MenuDown } from 'mdi-material-ui';
 import classNames from 'classnames';
 import Menu, { MenuItem } from 'material-ui/Menu';
 import withStyles from '../styles/withStyles';
 import HiIconBuilder from '../utils/HiIconBuilder';
 import HiBadge from '../HiBadge';
 import HiButton from '../HiButton';
+import HiInput from '../HiForm/HiInput';
 import HiColoredLabel from '../HiColoredLabel';
 import { getContrastedTextColor, fade } from '../styles/colorManipulator';
 
@@ -56,9 +57,7 @@ export const styles = theme => ({
         marginRight: 1.5 * theme.spacing.unit,
         borderLeft: 'solid 1px',
         borderColor: fade('#000', 0.12),
-        display: 'inline-block',
-        minWidth: 144,
-        maxWidth: 288
+        display: 'inline-block'
     },
     accountSelectorButtonLabel: {
         textOverflow: 'ellipsis',
@@ -77,9 +76,6 @@ export const styles = theme => ({
         color: theme.palette.text.secondary,
         minWidth: 32
     },
-    betaWithoutAccountSelector: {
-        marginLeft: 1.5 * theme.spacing.unit
-    },
     searchInput: {
         backgroundColor: `${theme.palette.background1} !important`
     },
@@ -99,9 +95,6 @@ export const styles = theme => ({
         textTransform: 'capitalize',
         fontWeight: theme.typography.fontWeightRegular,
         minWidth: 50
-    },
-    collapseOverflow: {
-        overflow: 'inherit'
     }
 });
 
@@ -124,14 +117,18 @@ class HiTopBar extends React.Component {
 
         this.state = {
             collapsed: false,
+            searchFocus: false,
             menuAnchor: null
         };
 
-        this.handleCollapse = this.handleCollapse.bind(this);
+        this.toggleCollapse = this.toggleCollapse.bind(this);
+        this.handleFocus = this.handleFocus.bind(this);
+        this.handleBlur = this.handleBlur.bind(this);
         this.handleClickMenu = this.handleClickMenu.bind(this);
         this.handleOpenMenu = this.handleOpenMenu.bind(this);
         this.handleCloseMenu = this.handleCloseMenu.bind(this);
         this.handleMenuItemClick = this.handleMenuItemClick.bind(this);
+        this.handleClickInputButton = this.handleClickInputButton.bind(this);
     }
 
     handleOpenMenu(event) {
@@ -147,12 +144,41 @@ class HiTopBar extends React.Component {
         callback();
     }
 
-    handleCollapse() {
+    toggleCollapse() {
         this.setState({ collapsed: !this.state.collapsed });
     }
 
+    handleFocus() {
+        this.setState({ searchFocus: true });
+
+        if (this.props.onSearchFocus) {
+            this.props.onSearchFocus();
+        }
+    }
+
+    handleClickInputButton(event) {
+        this.setState({ searchFocus: true });
+
+        if (this.props.onClickInputButton) {
+            this.props.onClickInputButton();
+        }
+        // Stop propagation to cancel input focus
+        event.stopPropagation();
+    }
+
+    handleBlur(event) {
+        if (!this.overlay.contains(event.relatedTarget)) {
+            this.setState({ searchFocus: false });
+        }
+
+        if (this.props.onSearchBlur) {
+            this.props.onSearchBlur();
+        }
+    }
+
     handleClickMenu() {
         this.props.onClickReturn();
+        this.setState({ searchFocus: false });
     }
 
     render() {
@@ -167,12 +193,47 @@ class HiTopBar extends React.Component {
             translations,
             onClickMenu,
             accountSelectorContent,
-            refButtons,
             searchInput,
-            searchFocus
+            searchValue
         } = this.props;
 
-        const colorPrimaryClass = searchFocus ? classes.colorPrimaryFocus : classes.colorPrimary;
+        const colorPrimaryClass = this.state.searchFocus ? classes.colorPrimaryFocus : classes.colorPrimary;
+
+        const inputClass = classNames({
+            [classes.searchInput]: !this.state.searchFocus,
+            [classes.searchInputFocused]: this.state.searchFocus
+        });
+
+        const endAdornment = React.createElement(
+            HiButton,
+            {
+                className: classes.endAdornmentButton,
+                onClick: this.handleClickInputButton
+            },
+            React.createElement(
+                Hidden,
+                { smDown: true },
+                React.createElement(
+                    'span',
+                    null,
+                    translations.all_types
+                )
+            ),
+            React.createElement(MenuDown, { style: { color: fade('#000', 0.54) } })
+        );
+
+        const input = searchInput || React.createElement(HiInput, {
+            name: 'top-bar-search',
+            placeholder: translations.search,
+            value: searchValue,
+            onChange: this.props.onSearchChange,
+            startAdornment: 'magnify',
+            endAdornment: endAdornment,
+            classes: { root: inputClass },
+            onFocus: this.handleFocus,
+            onBlur: this.handleBlur,
+            onReset: this.props.onSearchReset
+        });
 
         const notificationButton = notificationValue > 0 ? React.createElement(
             HiButton,
@@ -204,19 +265,14 @@ class HiTopBar extends React.Component {
                     null,
                     React.createElement(
                         Collapse,
-                        {
-                            'in': !this.state.collapsed,
-                            className: classNames({
-                                [classes.collapseOverflow]: !hideable
-                            })
-                        },
+                        { 'in': !this.state.collapsed },
                         React.createElement(
                             Toolbar,
                             { className: classes.toolbar },
                             React.createElement(
                                 'div',
-                                { ref: refButtons },
-                                searchFocus ? React.createElement(
+                                { ref: div => this.overlay = div },
+                                this.state.searchFocus ? React.createElement(
                                     HiButton,
                                     {
                                         className: classes.leftButton,
@@ -247,7 +303,7 @@ class HiTopBar extends React.Component {
                             React.createElement(
                                 'div',
                                 { className: classes.flex },
-                                searchInput
+                                input
                             ),
                             notificationButton,
                             hasAccountSelector && React.createElement(
@@ -263,9 +319,6 @@ class HiTopBar extends React.Component {
                                 accountSelectorContent
                             ),
                             beta && React.createElement(HiColoredLabel, {
-                                className: classNames({
-                                    [classes.betaWithoutAccountSelector]: !hasAccountSelector
-                                }),
                                 label: 'BETA',
                                 beta: true,
                                 color: theme.palette.neutral.dark
@@ -273,7 +326,7 @@ class HiTopBar extends React.Component {
                             (hideable || hasSettings) && React.createElement(
                                 IconButton,
                                 { color: 'inherit', className: classes.iconButton },
-                                hideable && React.createElement(ChevronDoubleUp, { onClick: this.handleCollapse }),
+                                hideable && React.createElement(ChevronDoubleUp, { onClick: this.toggleCollapse }),
                                 hasSettings && React.createElement(HiIconBuilder, {
                                     onClick: this.props.onClickSettings,
                                     icon: 'fa-gear',
@@ -285,7 +338,7 @@ class HiTopBar extends React.Component {
                     hideable && this.state.collapsed && React.createElement(
                         IconButton,
                         {
-                            onClick: this.handleCollapse,
+                            onClick: this.toggleCollapse,
                             color: 'inherit',
                             className: classes.showTopBarButton
                         },
@@ -301,8 +354,8 @@ class HiTopBar extends React.Component {
                     { className: classes.toolbar },
                     React.createElement(
                         'div',
-                        { ref: refButtons },
-                        searchFocus ? React.createElement(
+                        { ref: div => this.overlay = div },
+                        this.state.searchFocus ? React.createElement(
                             IconButton,
                             { className: classes.leftButtonMobile, color: 'inherit' },
                             _ref4
@@ -373,7 +426,6 @@ HiTopBar.defaultProps = {
     hideable: false,
     hasSettings: false,
     hasAccountSelector: false,
-    searchFocus: false,
     translations: {
         back: 'Back',
         menu: 'Menu',
@@ -414,6 +466,10 @@ HiTopBar.propTypes = process.env.NODE_ENV !== "production" ? {
      * Fonction de callback au click sur l'accountSelector'
      */
     onClickAccountSelector: PropTypes.func,
+    /**
+     * Fonction de callback au click sur le menu
+     */
+    onClickInputButton: PropTypes.func.isRequired,
     /**
      * Fonction de callback au click sur le menu
      */
@@ -431,22 +487,34 @@ HiTopBar.propTypes = process.env.NODE_ENV !== "production" ? {
      */
     onClickSettings: PropTypes.func,
     /**
-     * Positionement de la topBar. The behavior of the different options is described
-     * [here](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning).
+     * Fonction de callback au blur du champs de recharge (si searchInput vide)
      */
-    position: PropTypes.oneOf(['fixed', 'absolute', 'sticky', 'static']),
+    onSearchBlur: PropTypes.func,
+    /**
+     * Fonction de callback au changement du champs input (si searchInput vide)
+     */
+    onSearchChange: PropTypes.func,
+    /**
+     * Fonction de callback au focus sur le champs de recherche (si searchInput vide)
+     */
+    onSearchFocus: PropTypes.func,
     /**
-     *  Passe une ref callback à la div contenant les boutons "menu" et "back"
+     * Fonction de callback au reset du champs de recherche (si searchInput vide)
      */
-    refButtons: PropTypes.func,
+    onSearchReset: PropTypes.func,
     /**
-     * Etat de focus.
+     * Positionement de la topBar. The behavior of the different options is described
+     * [here](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning).
      */
-    searchFocus: PropTypes.bool.isRequired,
+    position: PropTypes.oneOf(['fixed', 'absolute', 'sticky', 'static']),
     /**
      * Input de recherche
      */
-    searchInput: PropTypes.node.isRequired,
+    searchInput: PropTypes.node,
+    /**
+     * Valeur du champs de recherche (si searchInput vide)
+     */
+    searchValue: PropTypes.node,
     /**
      * @ignore
      */

package/es/styles/createHiMuiTheme.js

@@ -89,9 +89,6 @@ const light = {
         appBar: '#fff',
         paper: '#fff',
         default: grey[50]
-    },
-    dot: {
-        neutral: '#707070'
     }
 };
 
@@ -159,9 +156,6 @@ const dark = {
         appBar: '#fff',
         paper: '#fff',
         default: grey[50]
-    },
-    dot: {
-        neutral: '#707070'
     }
 };
 
@@ -244,10 +238,6 @@ const typography = {
     body4: {
         fontSize: 12,
         fontFamily
-    },
-    body5: {
-        fontSize: 11,
-        fontFamily
     }
 };
 
@@ -281,7 +271,6 @@ function createHiMuiTheme(options = {}) {
         inputDisabled: shades[type].inputDisabled,
         tableLine: shades[type].tableLine,
         background: shades[type].background,
-        dot: shades[type].dot,
         status: statusPalette,
         primary: blue,
         secondary: yellow