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

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 { ChevronDoubleUp, ChevronDoubleDown, 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'
     }
 });
 
@@ -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,12 @@ class HiTopBar extends React.Component {
         callback();
     }
 
-    toggleCollapse() {
+    handleCollapse() {
         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() {
@@ -193,47 +167,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 +194,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 +205,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 +247,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 +259,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 +275,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(ChevronDoubleUp, { onClick: this.handleCollapse }),
                                 hasSettings && React.createElement(HiIconBuilder, {
                                     onClick: this.props.onClickSettings,
                                     icon: 'fa-gear',
@@ -338,7 +287,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 +303,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 +375,7 @@ HiTopBar.defaultProps = {
     hideable: false,
     hasSettings: false,
     hasAccountSelector: false,
+    searchFocus: false,
     translations: {
         back: 'Back',
         menu: 'Menu',
@@ -466,10 +416,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
      */
@@ -486,35 +432,23 @@ HiTopBar.propTypes = process.env.NODE_ENV !== "production" ? {
      * Fonction de callback au click sur le bouton "Settings" du menu
      */
     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)
-     */
-    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,
     /**
      * 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,8 +34,8 @@ 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
     };
 
@@ -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;
 }