@hipay/hipay-material-ui 1.0.0-beta.1 → 1.0.0-beta.11

package/es/HiTopBar/HiTopBar.js

@@ -3,17 +3,15 @@ import PropTypes from 'prop-types';
 import Hidden from 'material-ui/Hidden';
 import AppBar from 'material-ui/AppBar';
 import Toolbar from 'material-ui/Toolbar';
-import Button from 'material-ui/Button';
 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';
 
@@ -54,15 +52,13 @@ export const styles = theme => ({
     rightComponentMobile: {
         marginRight: -1.5 * theme.spacing.unit
     },
-    accountSelector: {
+    accountSelectorButton: {
         marginRight: 1.5 * theme.spacing.unit,
         borderLeft: 'solid 1px',
         borderColor: fade('#000', 0.12),
-        maxWidth: 264
-    },
-    accountSelectorButton: {
         display: 'inline-block',
-        maxWidth: '100%'
+        minWidth: 144,
+        maxWidth: 288
     },
     accountSelectorButtonLabel: {
         textOverflow: 'ellipsis',
@@ -81,6 +77,10 @@ export const styles = theme => ({
         color: theme.palette.text.secondary,
         minWidth: 32
     },
+    beta: {
+        minWidth: 64,
+        maxWidth: 80
+    },
     searchInput: {
         backgroundColor: `${theme.palette.background1} !important`
     },
@@ -91,16 +91,18 @@ export const styles = theme => ({
         marginRight: 10
     },
     endAdornmentButton: {
-        top: 2,
-        height: 18,
-        display: 'flex',
+        height: 32,
+        lineHeight: 32,
+        padding: 0,
+        margin: 0,
+        display: 'inline-block',
         color: fade('#000', 0.38),
         textTransform: 'capitalize',
         fontWeight: theme.typography.fontWeightRegular,
         minWidth: 50
     },
-    endButtonWithClearIcon: {
-        top: -38
+    collapseOverflow: {
+        overflow: 'inherit'
     }
 });
 
@@ -123,21 +125,14 @@ class HiTopBar extends React.Component {
 
         this.state = {
             collapsed: false,
-            searchValue: '',
-            searchFocus: false,
             menuAnchor: null
         };
 
-        this.toggleCollapse = this.toggleCollapse.bind(this);
-        this.handleChange = this.handleChange.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.handleResetSearch = this.handleResetSearch.bind(this);
-        this.handleClickInputButton = this.handleClickInputButton.bind(this);
     }
 
     handleOpenMenu(event) {
@@ -153,49 +148,12 @@ class HiTopBar extends React.Component {
         callback();
     }
 
-    toggleCollapse() {
+    handleCollapse() {
         this.setState({ collapsed: !this.state.collapsed });
     }
 
-    handleChange(event) {
-        this.setState({ searchValue: event.target.value });
-    }
-
-    handleResetSearch() {
-        this.setState({ searchValue: '' });
-    }
-
-    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() {
@@ -209,48 +167,13 @@ class HiTopBar extends React.Component {
             hasAccountSelector,
             translations,
             onClickMenu,
-            accountSelectorContent
+            accountSelectorContent,
+            refButtons,
+            searchInput,
+            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: classNames(classes.endAdornmentButton, {
-                    [classes.endButtonWithClearIcon]: this.state.searchValue.length > 0
-                }),
-                onClick: this.handleClickInputButton
-            },
-            React.createElement(
-                Hidden,
-                { smDown: true },
-                React.createElement(
-                    'span',
-                    null,
-                    translations.all_types
-                )
-            ),
-            React.createElement(MenuDown, { style: { position: 'relative', top: -2, color: fade('#000', 0.54) } })
-        );
-
-        const searchInput = React.createElement(HiInput, {
-            name: 'top-bar-search',
-            placeholder: translations.search,
-            value: this.state.searchValue,
-            onChange: this.handleChange,
-            startAdornment: 'magnify',
-            endAdornment: endAdornment,
-            classes: { root: inputClass },
-            onFocus: this.handleFocus,
-            onBlur: this.handleBlur,
-            onReset: this.handleResetSearch
-        });
+        const colorPrimaryClass = searchFocus ? classes.colorPrimaryFocus : classes.colorPrimary;
 
         const notificationButton = notificationValue > 0 ? React.createElement(
             HiButton,
@@ -282,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 },
+                                searchFocus ? React.createElement(
                                     HiButton,
                                     {
                                         className: classes.leftButton,
@@ -324,22 +252,19 @@ class HiTopBar extends React.Component {
                             ),
                             notificationButton,
                             hasAccountSelector && React.createElement(
-                                'div',
-                                { className: classes.accountSelector },
-                                React.createElement(
-                                    HiButton,
-                                    {
-                                        color: 'inherit',
-                                        className: classes.accountSelectorButton,
-                                        classes: {
-                                            label: classes.accountSelectorButtonLabel
-                                        },
-                                        onClick: this.props.onClickAccountSelector
+                                HiButton,
+                                {
+                                    color: 'inherit',
+                                    className: classes.accountSelectorButton,
+                                    classes: {
+                                        label: classes.accountSelectorButtonLabel
                                     },
-                                    accountSelectorContent
-                                )
+                                    onClick: this.props.onClickAccountSelector
+                                },
+                                accountSelectorContent
                             ),
                             beta && React.createElement(HiColoredLabel, {
+                                className: classes.beta,
                                 label: 'BETA',
                                 beta: true,
                                 color: theme.palette.neutral.dark
@@ -347,7 +272,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',
@@ -359,7 +284,7 @@ class HiTopBar extends React.Component {
                     hideable && this.state.collapsed && React.createElement(
                         IconButton,
                         {
-                            onClick: this.toggleCollapse,
+                            onClick: this.handleCollapse,
                             color: 'inherit',
                             className: classes.showTopBarButton
                         },
@@ -375,8 +300,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
@@ -447,6 +372,7 @@ HiTopBar.defaultProps = {
     hideable: false,
     hasSettings: false,
     hasAccountSelector: false,
+    searchFocus: false,
     translations: {
         back: 'Back',
         menu: 'Menu',
@@ -487,10 +413,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
      */
@@ -508,13 +430,22 @@ HiTopBar.propTypes = process.env.NODE_ENV !== "production" ? {
      */
     onClickSettings: PropTypes.func,
     /**
-     * Fonction de callback au blur du champs de recharge
+     * 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']),
+    /**
+     *  Passe une ref callback à la div contenant les boutons "menu" et "back"
+     */
+    refButtons: PropTypes.func,
+    /**
+     * Etat de focus.
      */
-    onSearchBlur: PropTypes.func,
+    searchFocus: PropTypes.bool.isRequired,
     /**
-     * Fonction de callback au focus sur le champs de recharge
+     * Input de recherche
      */
-    onSearchFocus: PropTypes.func,
+    searchInput: PropTypes.node.isRequired,
     /**
      * @ignore
      */

package/es/styles/createHiMuiTheme.js

@@ -89,6 +89,9 @@ const light = {
         appBar: '#fff',
         paper: '#fff',
         default: grey[50]
+    },
+    dot: {
+        neutral: '#707070'
     }
 };
 
@@ -156,6 +159,9 @@ const dark = {
         appBar: '#fff',
         paper: '#fff',
         default: grey[50]
+    },
+    dot: {
+        neutral: '#707070'
     }
 };
 
@@ -238,6 +244,10 @@ const typography = {
     body4: {
         fontSize: 12,
         fontFamily
+    },
+    body5: {
+        fontSize: 11,
+        fontFamily
     }
 };
 
@@ -271,6 +281,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/HiIconBuilder.js

@@ -4,11 +4,11 @@ import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutPropert
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import keycode from 'keycode/index';
 import hiGetMdiIcon from './hiGetMdiIcon';
 import { camelize } from './hiHelpers';
 import * as hiIcon from '../svg-icons';
 import { capitalizeFirstLetter } from './helpers';
-import keycode from "keycode/index";
 
 class HiIconBuilder extends PureComponent {
 
@@ -30,8 +30,8 @@ class HiIconBuilder extends PureComponent {
 
     render() {
         const _props = this.props,
-              { icon, size, className, style, onClick } = _props,
-              others = _objectWithoutProperties(_props, ['icon', 'size', 'className', 'style', 'onClick']);
+              { icon, size, className, style, onClick, color, backgroundColor } = _props,
+              others = _objectWithoutProperties(_props, ['icon', 'size', 'className', 'style', 'onClick', 'color', 'backgroundColor']);
 
         let props = {};
         if (onClick) {
@@ -49,7 +49,7 @@ class HiIconBuilder extends PureComponent {
                 className: classNames('fa', icon, className),
                 style: _extends({
                     fontSize: size
-                }, style),
+                }, color && { color }, backgroundColor && { backgroundColor, padding: 2, borderRadius: size }, style),
                 onClick: onClick
             }, props, others));
         }
@@ -65,7 +65,7 @@ class HiIconBuilder extends PureComponent {
             style: _extends({
                 height: size,
                 width: size
-            }, style),
+            }, color && { color }, backgroundColor && { backgroundColor, padding: 2, borderRadius: size }, style),
             onClick: onClick
         }, props, others));
     }
@@ -75,10 +75,18 @@ HiIconBuilder.defaultProps = {
     size: 20
 };
 HiIconBuilder.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Couleur du fond
+     */
+    backgroundColor: PropTypes.string,
     /**
      * Permet de surcharger la classe
      */
     className: PropTypes.string,
+    /**
+     * Couleur de l'icône
+     */
+    color: PropTypes.string,
     /**
      * Nom de l'icône
      */

package/es/utils/hiHelpers.js

@@ -147,7 +147,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 +167,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;
 }