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

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

package/es/utils/hiHelpers.js

@@ -16,9 +16,8 @@ export function camelize(string) {
  * @param number
  * @param size
  * @param locale
- * @param precision
  */
-export function formatNumber(number, size = 'l', locale = 'en-EN', precision) {
+export function formatNumber(number, size = 'l', locale = 'en-EN') {
     // Round number
     switch (size) {
         case 'l':
@@ -34,8 +33,8 @@ export function formatNumber(number, size = 'l', locale = 'en-EN', precision) {
 
     // To locale
     const options = {
-        minimumFractionDigits: typeof precision !== 'undefined' ? precision : size === 'l' ? 2 : 0,
-        maximumFractionDigits: typeof precision !== 'undefined' ? precision : size === 'l' ? 2 : 0,
+        minimumFractionDigits: size === 'l' ? 2 : 0,
+        maximumFractionDigits: size === 'l' ? 2 : 0,
         useGrouping: true
     };
 
@@ -148,7 +147,7 @@ export function arrayUnique(array) {
  * @param array
  */
 export function escapeHTML(unsafeStr) {
-    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/>');
+    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>');
 }
 
 /**
@@ -168,7 +167,7 @@ export function getNextItemSelectable(node, direction) {
     } else if (node.previousSibling === null) {
         return null;
     } else if (node.previousSibling.tabIndex === -1) {
-        return getNextItemSelectable(node.previousSibling, direction);
+        return this.getNextItemSelectable(node.previousSibling, direction);
     }
     return node.previousSibling;
 }

package/index.es.js

@@ -1,4 +1,4 @@
-/** @license Material-UI v1.0.0-beta.18
+/** @license Material-UI v1.0.0-beta.1
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/index.js

@@ -1,4 +1,4 @@
-/** @license Material-UI v1.0.0-beta.18
+/** @license Material-UI v1.0.0-beta.1
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/package.json

@@ -2,7 +2,7 @@
   "name": "@hipay/hipay-material-ui",
   "private": false,
   "author": "HiPay PSYCHE Team",
-  "version": "1.0.0-beta.18",
+  "version": "1.0.0-beta.2",
   "description": "HiPay Material-UI Style Guide - React components that implement Google's Material Design from Material-UI.",
   "main": "./index.js",
   "repository": {
@@ -14,52 +14,51 @@
   },
   "homepage": "http://material-ui.com/",
   "peerDependencies": {
-    "react": "16.2.0",
-    "react-dom": "15.3.0 || 16.0.0"
+    "react": "^15.3.0 || ^16.0.0",
+    "react-dom": "^15.3.0 || ^16.0.0"
   },
   "dependencies": {
-    "@types/jss": "9.3.0",
-    "@types/react-transition-group": "2.0.6",
-    "babel-runtime": "6.26.0",
-    "brcast": "3.0.1",
-    "classnames": "2.2.5",
-    "deepmerge": "2.0.1",
-    "dom-helpers": "3.2.1",
-    "hoist-non-react-statics": "2.5.0",
-    "jss": "9.3.3",
-    "jss-camel-case": "6.0.0",
-    "jss-default-unit": "8.0.2",
-    "jss-global": "3.0.0",
-    "jss-nested": "6.0.1",
-    "jss-props-sort": "6.0.0",
-    "jss-vendor-prefixer": "7.0.0",
-    "keycode": "2.1.9",
-    "lodash": "4.17.4",
-    "lz-string": "1.4.4",
+    "@types/jss": "^9.3.0",
+    "@types/react-transition-group": "^2.0.6",
+    "babel-runtime": "^6.26.0",
+    "brcast": "^3.0.1",
+    "classnames": "^2.2.5",
+    "deepmerge": "^2.0.1",
+    "dom-helpers": "^3.2.1",
+    "hoist-non-react-statics": "^2.5.0",
+    "jss": "^9.3.3",
+    "jss-camel-case": "^6.0.0",
+    "jss-default-unit": "^8.0.2",
+    "jss-global": "^3.0.0",
+    "jss-nested": "^6.0.1",
+    "jss-props-sort": "^6.0.0",
+    "jss-vendor-prefixer": "^7.0.0",
+    "keycode": "^2.1.9",
+    "lodash": "^4.2.0",
+    "lz-string": "^1.4.4",
     "material-ui": "1.0.0-beta.36",
-    "mdi-material-ui": "2.0.0",
-    "moment": "2.20.1",
-    "moment-timezone": "0.5.14",
-    "normalize-scroll-left": "0.1.2",
-    "prop-types": "15.6.0",
-    "react-addons-update": "15.6.2",
-    "react-contextmenu": "2.9.2",
-    "react-custom-scrollbars": "4.2.1",
-    "react-day-picker": "7.1.9",
-    "react-event-listener": "0.5.3",
-    "react-jss": "8.2.1",
-    "react-lifecycles-compat": "1.0.2",
-    "react-pdf": "3.0.5",
-    "react-popper": "0.8.2",
-    "react-proptype-conditional-require": "1.0.4",
-    "react-scrollbar-size": "2.0.2",
-    "react-sortable-hoc": "0.6.8",
-    "react-spinners": "0.2.6",
-    "react-transition-group": "2.2.1",
-    "recompose": "0.26.0",
-    "scroll": "2.0.3",
-    "validator": "9.4.0",
-    "warning": "3.0.0"
+    "mdi-material-ui": "^2.0.0",
+    "moment": "^2.19.1",
+    "moment-timezone": "^0.5.14",
+    "normalize-scroll-left": "^0.1.2",
+    "prop-types": "^15.6.0",
+    "react-addons-update": "^15.6.2",
+    "react-contextmenu": "^2.9.2",
+    "react-custom-scrollbars": "^4.2.1",
+    "react-day-picker": "^7.0.7",
+    "react-event-listener": "^0.5.1",
+    "react-jss": "^8.1.0",
+    "react-lifecycles-compat": "^1.0.2",
+    "react-popper": "^0.8.0",
+    "react-proptype-conditional-require": "^1.0.4",
+    "react-scrollbar-size": "^2.0.2",
+    "react-sortable-hoc": "^0.6.8",
+    "react-spinners": "^0.2.5",
+    "react-transition-group": "^2.2.1",
+    "recompose": "^0.26.0",
+    "scroll": "^2.0.3",
+    "validator": "^9.4.0",
+    "warning": "^3.0.0"
   },
   "resolutions": {
     "@types/react": "16.0.38"
@@ -75,4 +74,4 @@
   },
   "license": "ISC",
   "module": "./index.es.js"
-}
+}

package/styles/createHiMuiTheme.js

@@ -117,9 +117,6 @@ var light = {
         appBar: '#fff',
         paper: '#fff',
         default: _colors.grey[50]
-    },
-    dot: {
-        neutral: '#707070'
     }
 };
 
@@ -187,9 +184,6 @@ var dark = {
         appBar: '#fff',
         paper: '#fff',
         default: _colors.grey[50]
-    },
-    dot: {
-        neutral: '#707070'
     }
 };
 
@@ -272,10 +266,6 @@ var typography = {
     body4: {
         fontSize: 12,
         fontFamily: fontFamily
-    },
-    body5: {
-        fontSize: 11,
-        fontFamily: fontFamily
     }
 };
 
@@ -313,7 +303,6 @@ function createHiMuiTheme() {
         inputDisabled: shades[type].inputDisabled,
         tableLine: shades[type].tableLine,
         background: shades[type].background,
-        dot: shades[type].dot,
         status: statusPalette,
         primary: _colors.blue,
         secondary: _colors.yellow