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

package/es/HiTable/HiTableFooterScroll.js

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

package/es/HiTable/HiTableHead.js

@@ -3,6 +3,7 @@ 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';
@@ -18,11 +19,13 @@ import { MANDATORY_COLUMN_ERROR_MESSAGE } from './HiTable';
 export const styles = theme => ({
     thead: {
         position: 'relative',
-        display: 'block' /*seperates the header from the body allowing it to be positioned*/
-        , width: '100%',
+        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
@@ -148,13 +151,16 @@ class HiTableHead extends React.Component {
             sticky,
             translations,
             view,
-            lookupColumns
+            lookupColumns,
+            fixedColumnWidth
         } = this.props;
 
         const { hovered, openedOrderColumns, orderColumnsAnchorEl } = this.state;
 
         let headerProps = _extends({
-            className: classes.thead
+            className: classNames(classes.thead, {
+                [classes.theadFixedWidth]: fixedColumnWidth
+            })
         }, orderable && { onMouseEnter: this.handleEvent, onMouseLeave: this.handleEvent });
 
         let unfixedColumnIsSet = false,
@@ -201,8 +207,8 @@ class HiTableHead extends React.Component {
                         return React.createElement(HeaderCell, {
                             key: 'header-' + column.colId,
                             colId: column.colId,
-                            type: column['type'],
-                            title: column['label'],
+                            type: column['formType'] || column['type'] // define select items
+                            , title: column['label'],
                             smallTitle: column['reducedLabel'],
                             selectable: firstColumn && selectable,
                             selected: selectedIdList.length > 0 ? selectedIdList.length === dataSource.length ? true : 'mixed' : false,
@@ -221,7 +227,8 @@ class HiTableHead extends React.Component {
                             fixedWidth: fixed,
                             align: column['align'],
                             sticky: firstColumn && sticky,
-                            lookedUp: lookupColumns.includes(column.colId)
+                            lookedUp: lookupColumns.includes(column.colId),
+                            fixedColumnWidth: fixedColumnWidth
                         });
                     }
                 }),
@@ -329,6 +336,11 @@ 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,7 +63,8 @@ export const styles = theme => ({
     controlLabelRoot: {
         marginLeft: 6,
         marginBottom: 8,
-        fontSize: 15
+        fontSize: 15,
+        width: 160
     },
     switchLabelRoot: {
         marginLeft: 15,
@@ -72,7 +73,10 @@ export const styles = theme => ({
     columnLabel: {
         position: 'relative',
         top: 5,
-        left: 5
+        left: 5,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap'
     },
     label: {
         fontWeight: 'inherit'

package/es/HiTopBar/HiTopBar.js

@@ -5,14 +5,13 @@ 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, MenuDown } from 'mdi-material-ui';
+import { ChevronUp, ChevronDown, Menu as MenuIcon, ArrowLeft, DotsVertical } 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';
 
@@ -57,7 +56,9 @@ export const styles = theme => ({
         marginRight: 1.5 * theme.spacing.unit,
         borderLeft: 'solid 1px',
         borderColor: fade('#000', 0.12),
-        display: 'inline-block'
+        display: 'inline-block',
+        minWidth: 144,
+        maxWidth: 288
     },
     accountSelectorButtonLabel: {
         textOverflow: 'ellipsis',
@@ -76,6 +77,9 @@ export const styles = theme => ({
         color: theme.palette.text.secondary,
         minWidth: 32
     },
+    betaWithoutAccountSelector: {
+        marginLeft: 1.5 * theme.spacing.unit
+    },
     searchInput: {
         backgroundColor: `${theme.palette.background1} !important`
     },
@@ -95,6 +99,9 @@ export const styles = theme => ({
         textTransform: 'capitalize',
         fontWeight: theme.typography.fontWeightRegular,
         minWidth: 50
+    },
+    collapseOverflow: {
+        overflow: 'inherit'
     }
 });
 
@@ -102,7 +109,7 @@ var _ref = React.createElement(HiIconBuilder, { icon: 'fa-bell-o', size: 25 });
 
 var _ref2 = React.createElement(ArrowLeft, null);
 
-var _ref3 = React.createElement(ChevronDoubleDown, null);
+var _ref3 = React.createElement(ChevronDown, null);
 
 var _ref4 = React.createElement(ArrowLeft, null);
 
@@ -117,18 +124,14 @@ class HiTopBar extends React.Component {
 
         this.state = {
             collapsed: false,
-            searchFocus: false,
             menuAnchor: null
         };
 
-        this.toggleCollapse = this.toggleCollapse.bind(this);
-        this.handleFocus = this.handleFocus.bind(this);
-        this.handleBlur = this.handleBlur.bind(this);
+        this.handleCollapse = this.handleCollapse.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) {
@@ -144,41 +147,15 @@ class HiTopBar extends React.Component {
         callback();
     }
 
-    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();
+    handleCollapse() {
+        if (this.props.onCollapse) {
+            this.props.onCollapse(!this.state.collapsed);
         }
+        this.setState({ collapsed: !this.state.collapsed });
     }
 
     handleClickMenu() {
         this.props.onClickReturn();
-        this.setState({ searchFocus: false });
     }
 
     render() {
@@ -193,47 +170,12 @@ class HiTopBar extends React.Component {
             translations,
             onClickMenu,
             accountSelectorContent,
+            refButtons,
             searchInput,
-            searchValue
+            searchFocus
         } = this.props;
 
-        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 colorPrimaryClass = searchFocus ? classes.colorPrimaryFocus : classes.colorPrimary;
 
         const notificationButton = notificationValue > 0 ? React.createElement(
             HiButton,
@@ -255,7 +197,8 @@ class HiTopBar extends React.Component {
             AppBar,
             {
                 classes: { root: classes.root, colorPrimary: colorPrimaryClass },
-                position: this.props.position
+                position: this.props.position,
+                id: 'top-bar'
             },
             React.createElement(
                 Hidden,
@@ -265,14 +208,19 @@ class HiTopBar extends React.Component {
                     null,
                     React.createElement(
                         Collapse,
-                        { 'in': !this.state.collapsed },
+                        {
+                            'in': !this.state.collapsed,
+                            className: classNames({
+                                [classes.collapseOverflow]: !hideable
+                            })
+                        },
                         React.createElement(
                             Toolbar,
                             { className: classes.toolbar },
                             React.createElement(
                                 'div',
-                                { ref: div => this.overlay = div },
-                                this.state.searchFocus ? React.createElement(
+                                { ref: refButtons, id: 'menu-button-container' },
+                                searchFocus ? React.createElement(
                                     HiButton,
                                     {
                                         className: classes.leftButton,
@@ -302,8 +250,8 @@ class HiTopBar extends React.Component {
                             ),
                             React.createElement(
                                 'div',
-                                { className: classes.flex },
-                                input
+                                { id: 'quick-search-input', className: classes.flex },
+                                searchInput
                             ),
                             notificationButton,
                             hasAccountSelector && React.createElement(
@@ -314,11 +262,15 @@ class HiTopBar extends React.Component {
                                     classes: {
                                         label: classes.accountSelectorButtonLabel
                                     },
-                                    onClick: this.props.onClickAccountSelector
+                                    onClick: this.props.onClickAccountSelector,
+                                    id: 'account-selector-button'
                                 },
                                 accountSelectorContent
                             ),
                             beta && React.createElement(HiColoredLabel, {
+                                className: classNames({
+                                    [classes.betaWithoutAccountSelector]: !hasAccountSelector
+                                }),
                                 label: 'BETA',
                                 beta: true,
                                 color: theme.palette.neutral.dark
@@ -326,7 +278,7 @@ class HiTopBar extends React.Component {
                             (hideable || hasSettings) && React.createElement(
                                 IconButton,
                                 { color: 'inherit', className: classes.iconButton },
-                                hideable && React.createElement(ChevronDoubleUp, { onClick: this.toggleCollapse }),
+                                hideable && React.createElement(ChevronUp, { onClick: this.handleCollapse }),
                                 hasSettings && React.createElement(HiIconBuilder, {
                                     onClick: this.props.onClickSettings,
                                     icon: 'fa-gear',
@@ -338,7 +290,7 @@ class HiTopBar extends React.Component {
                     hideable && this.state.collapsed && React.createElement(
                         IconButton,
                         {
-                            onClick: this.toggleCollapse,
+                            onClick: this.handleCollapse,
                             color: 'inherit',
                             className: classes.showTopBarButton
                         },
@@ -354,8 +306,8 @@ class HiTopBar extends React.Component {
                     { className: classes.toolbar },
                     React.createElement(
                         'div',
-                        { ref: div => this.overlay = div },
-                        this.state.searchFocus ? React.createElement(
+                        { ref: refButtons },
+                        searchFocus ? React.createElement(
                             IconButton,
                             { className: classes.leftButtonMobile, color: 'inherit' },
                             _ref4
@@ -426,6 +378,7 @@ HiTopBar.defaultProps = {
     hideable: false,
     hasSettings: false,
     hasAccountSelector: false,
+    searchFocus: false,
     translations: {
         back: 'Back',
         menu: 'Menu',
@@ -455,7 +408,7 @@ HiTopBar.propTypes = process.env.NODE_ENV !== "production" ? {
      */
     hasSettings: PropTypes.bool,
     /**
-     * La TopBar peut être cachée vie le bouton double chevron
+     * La TopBar peut être cachée vie le bouton chevron
      */
     hideable: PropTypes.bool,
     /**
@@ -466,10 +419,6 @@ 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
      */
@@ -487,34 +436,26 @@ HiTopBar.propTypes = process.env.NODE_ENV !== "production" ? {
      */
     onClickSettings: PropTypes.func,
     /**
-     * Fonction de callback au blur du champs de recharge (si searchInput vide)
-     */
-    onSearchBlur: PropTypes.func,
-    /**
-     * Fonction de callback au changement du champs input (si searchInput vide)
+     * Fonction de callback au click sur le bouton chevron
      */
-    onSearchChange: PropTypes.func,
-    /**
-     * Fonction de callback au focus sur le champs de recherche (si searchInput vide)
-     */
-    onSearchFocus: PropTypes.func,
-    /**
-     * Fonction de callback au reset du champs de recherche (si searchInput vide)
-     */
-    onSearchReset: PropTypes.func,
+    onCollapse: 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).
      */
     position: PropTypes.oneOf(['fixed', 'absolute', 'sticky', 'static']),
     /**
-     * Input de recherche
+     *  Passe une ref callback à la div contenant les boutons "menu" et "back"
      */
-    searchInput: PropTypes.node,
+    refButtons: PropTypes.func,
     /**
-     * Valeur du champs de recherche (si searchInput vide)
+     * Etat de focus.
+     */
+    searchFocus: PropTypes.bool.isRequired,
+    /**
+     * Input de recherche
      */
-    searchValue: PropTypes.node,
+    searchInput: PropTypes.node.isRequired,
     /**
      * @ignore
      */

package/es/styles/createHiMuiTheme.js

@@ -41,6 +41,7 @@ const light = {
     selected: '#F8F9FB',
     placeholder: '#999999',
     disable: '#E0E0E0',
+    border: 'rgba(224, 224, 224, 1)',
     positive: {
         light: '#66CF66',
         normal: '#00AF00',
@@ -89,6 +90,9 @@ const light = {
         appBar: '#fff',
         paper: '#fff',
         default: grey[50]
+    },
+    dot: {
+        neutral: '#707070'
     }
 };
 
@@ -108,6 +112,7 @@ const dark = {
     selected: '#303030',
     placeholder: '#999999',
     disable: '#E0E0E0',
+    border: 'rgba(224, 224, 224, 1)',
     positive: {
         light: '#66CF66',
         normal: '#00AF00',
@@ -156,6 +161,9 @@ const dark = {
         appBar: '#fff',
         paper: '#fff',
         default: grey[50]
+    },
+    dot: {
+        neutral: '#707070'
     }
 };
 
@@ -238,6 +246,10 @@ const typography = {
     body4: {
         fontSize: 12,
         fontFamily
+    },
+    body5: {
+        fontSize: 11,
+        fontFamily
     }
 };
 
@@ -271,6 +283,7 @@ 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

package/es/utils/hiHelpers.js

@@ -16,8 +16,9 @@ export function camelize(string) {
  * @param number
  * @param size
  * @param locale
+ * @param precision
  */
-export function formatNumber(number, size = 'l', locale = 'en-EN') {
+export function formatNumber(number, size = 'l', locale = 'en-EN', precision) {
     // Round number
     switch (size) {
         case 'l':
@@ -33,12 +34,12 @@ export function formatNumber(number, size = 'l', locale = 'en-EN') {
 
     // To locale
     const options = {
-        minimumFractionDigits: size === 'l' ? 2 : 0,
-        maximumFractionDigits: size === 'l' ? 2 : 0,
+        minimumFractionDigits: typeof precision !== 'undefined' ? precision : size === 'l' ? 2 : 0,
+        maximumFractionDigits: typeof precision !== 'undefined' ? precision : size === 'l' ? 2 : 0,
         useGrouping: true
     };
 
-    return number.toLocaleString(locale, options);
+    return number.toLocaleString(locale.replace(/_/g, '-'), options);
 }
 
 /**
@@ -90,7 +91,7 @@ export function formatCurrencyAmount(amount, size = 'l', locale = 'en-EN', curre
         currencyDisplay: 'symbol'
     };
 
-    let returnValue = value.toLocaleString(locale, options);
+    let returnValue = value.toLocaleString(locale.replace(/_/g, '-'), options);
 
     // Place unit (k, M) after number (don't move currency symbol !)
     if (unit !== '') {
@@ -118,7 +119,7 @@ export function formatRate(rate, size = 'l', locale = 'en-EN') {
         style: 'percent'
     };
 
-    return rate.toLocaleString(locale, options);
+    return rate.toLocaleString(locale.replace(/_/g, '-'), options);
 }
 
 /**
@@ -147,7 +148,7 @@ export function arrayUnique(array) {
  * @param array
  */
 export function escapeHTML(unsafeStr) {
-    return unsafeStr.replace('<strong>', '[[').replace('</strong>', ']]').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\"/g, '&quot;').replace(/\'/g, '&#39;').replace('[[', '<strong>').replace(']]', '</strong>');
+    return unsafeStr.replace(/<br\/?>/g, '[br]').replace(/<strong>/g, '[[').replace(/<\/?strong>/g, ']]').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\"/g, '&quot;').replace(/\'/g, '&#39;').replace(/\[\[/g, '<strong>').replace(/\]\]/g, '</strong>').replace(/\[br\]/g, '<br/>');
 }
 
 /**
@@ -167,7 +168,7 @@ export function getNextItemSelectable(node, direction) {
     } else if (node.previousSibling === null) {
         return null;
     } else if (node.previousSibling.tabIndex === -1) {
-        return this.getNextItemSelectable(node.previousSibling, direction);
+        return getNextItemSelectable(node.previousSibling, direction);
     }
     return node.previousSibling;
 }