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

package/es/HiMap/HiMapExpand.js

@@ -0,0 +1,145 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import ExpansionPanel, { ExpansionPanelSummary, ExpansionPanelDetails } from 'material-ui/ExpansionPanel';
+import Typography from 'material-ui/Typography';
+import { withStyles } from '../styles';
+import HiMap from '../HiMap';
+import HiIconBuilder from '../utils/HiIconBuilder';
+
+const styles = theme => ({
+    column: {
+        flexBasis: '33.33%'
+    },
+    root: {
+        flexGrow: 1,
+        boxShadow: 'none'
+    },
+    imgListItem: {
+        width: 24,
+        height: 'auto',
+        marginRight: 8,
+        verticalAlign: 'middle'
+    },
+    expandMoreIcon: {
+        margin: 0,
+        fontSize: 18,
+        width: 20
+    },
+    disabledIcon: {
+        color: theme.palette.action.disabled
+    },
+    panelSummaryExpanded: {
+        minHeight: 0
+    },
+    expandIconExpanded: {
+        transform: 'translateY(-50%) rotate(0)',
+        color: theme.palette.business.primary.light
+    },
+    panelSummary: {
+        '&>div:first-child': {
+            margin: '12px 0'
+        }
+    }
+});
+
+class HiMapExpand extends React.PureComponent {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            addressNotFound: false,
+            expanded: false
+        };
+        this.handleAddressNotFound = this.handleAddressNotFound.bind(this);
+        this.handleExpand = this.handleExpand.bind(this);
+    }
+
+    handleExpand() {
+        this.setState({ expanded: !this.state.addressNotFound && !this.state.expanded });
+    }
+
+    handleAddressNotFound() {
+        this.setState({ addressNotFound: true });
+    }
+
+    render() {
+        const { classes, address, countryFlagPath } = this.props;
+
+        const { addressNotFound, expanded } = this.state;
+
+        const flag = countryFlagPath ? React.createElement('img', { src: countryFlagPath, className: classes.imgListItem, alt: 'country flag' }) : '';
+
+        return React.createElement(
+            ExpansionPanel,
+            {
+                className: classes.root,
+                defaultExpanded: false,
+                expanded: expanded,
+                onChange: this.handleExpand
+            },
+            React.createElement(
+                ExpansionPanelSummary,
+                {
+                    classes: {
+                        root: classes.panelSummary,
+                        expanded: classes.panelSummaryExpanded,
+                        expandIconExpanded: classes.expandIconExpanded
+                    },
+                    expandIcon: React.createElement(HiIconBuilder, {
+                        icon: 'map_marker',
+                        style: { position: 'relative', top: 2, marginRight: 5 },
+                        className: classNames({
+                            root: classes.expandMoreIcon,
+                            [classes.disabledIcon]: addressNotFound
+                        })
+                    })
+                },
+                React.createElement(
+                    'div',
+                    { className: classes.column },
+                    React.createElement(
+                        Typography,
+                        { className: classes.heading },
+                        'Adresse'
+                    )
+                ),
+                React.createElement(
+                    'div',
+                    null,
+                    React.createElement(
+                        Typography,
+                        { className: classes.secondaryHeading },
+                        flag,
+                        address
+                    )
+                )
+            ),
+            React.createElement(
+                ExpansionPanelDetails,
+                { style: { padding: 0 } },
+                React.createElement(HiMap, { address: address, onAddressNotFound: this.handleAddressNotFound })
+            )
+        );
+    }
+}
+
+HiMapExpand.defaultProps = {
+    countryFlagPath: ''
+};
+HiMapExpand.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * The address to see in the Map component.
+     */
+    address: PropTypes.string.isRequired,
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: PropTypes.object.isRequired,
+    /**
+     * The path to the country flag image.
+     */
+    countryFlagPath: PropTypes.string
+} : {};
+
+export default withStyles(styles, { name: 'HmuiHiMapExpand' })(HiMapExpand);

package/es/HiMap/index.js

@@ -0,0 +1,2 @@
+export { default } from './HiMap';
+export { default as HiMapExpand } from './HiMapExpand';

package/es/HiSelect/HiSelect.js

@@ -28,7 +28,7 @@ export const styles = theme => ({
     },
     popper: {
         width: '100%',
-        zIndex: 9
+        zIndex: 11
     },
     paper: {
         borderRadius: '0px 2px',

package/es/HiTable/BodyCellBuilder.js

@@ -351,5 +351,5 @@ BodyCellBuilder.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Largeur de la cellule (hors padding), est déduit de view par défaut
      */
-    width: PropTypes.number
+    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
 } : {};

package/es/HiTable/BodyCells/CellCountry.js

@@ -73,7 +73,7 @@ CellCountry.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Value - code isoa2 (uppercase)
      */
-    value: PropTypes.string.isRequired,
+    value: PropTypes.string,
     /**
      * View (L/M/S)
      */

package/es/HiTable/BodyCells/CellImage.js

@@ -13,7 +13,10 @@ export const styles = theme => ({
         height: 'auto'
     },
     label: {
-        marginLeft: 5
+        marginLeft: 5,
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis'
     },
     tooltipImg: {
         width: 24,
@@ -26,10 +29,7 @@ export const styles = theme => ({
     },
     wrapper: {
         display: 'flex',
-        alignItems: 'center',
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis'
+        alignItems: 'center'
     },
     center: {
         textAlign: 'center'
@@ -125,7 +125,7 @@ CellImage.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Value
      */
-    value: PropTypes.string.isRequired,
+    value: PropTypes.string,
     /**
      * View (L/M/S)
      */

package/es/HiTable/BodyCells/CellLayout.js

@@ -187,7 +187,7 @@ CellLayout.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Largeur de la cellule (hors padding), est déduit de view par défaut
      */
-    width: PropTypes.number,
+    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     /**
      * Fixe la taille des colonnes selon le type de vue
      * Sinon les colonnes s'adaptent à l'espace disponible

package/es/HiTable/HeaderCell.js

@@ -141,7 +141,7 @@ class HeaderCell extends React.PureComponent {
             filterSource,
             view,
             dense,
-            width = cst.DEFAULT_WIDTHS[type][view],
+            width,
             fixedColumnWidth,
             align = cst.ALIGN_RIGHT_TYPES.includes(type) ? 'right' : 'left',
             sticky,
@@ -154,7 +154,7 @@ class HeaderCell extends React.PureComponent {
         let offset = selectable ? dense ? 32 : 40 : padding;
 
         // Inclue le padding et/ou la checkbox dans la largeur de la cellule
-        let _width = width + offset + padding;
+        let _width = (width || cst.DEFAULT_WIDTHS[type][view]) + offset + padding;
         // N'affiche pas le tri si il est désactivé.
         let _sorted = sortable && sorted;
         // N'active pas le filtre si il n'y a pas de jeu de donnée sur lesquelles filtrées.
@@ -190,6 +190,8 @@ class HeaderCell extends React.PureComponent {
             cellStyle.maxWidth = _width;
             cellStyle.minWidth = _width;
             cellStyle.width = _width;
+        } else if (width) {
+            cellStyle.width = width;
         }
 
         return React.createElement(
@@ -359,7 +361,7 @@ HeaderCell.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Largeur de la cellule (hors padding), est déduit de view par défaut
      */
-    width: PropTypes.number,
+    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     /**
      * La largeur de la cellule est fixé (toutes les colonnes sauf une)
      */

package/es/HiTable/HiTableFooter.js

@@ -10,7 +10,8 @@ export const styles = theme => ({
     },
     tfootCell: {
         borderTop: '1px solid',
-        borderTopColor: theme.palette.line.stepper
+        borderTopColor: theme.palette.line.stepper,
+        padding: 0
     },
     patchDiv: {
         position: 'relative',

package/es/HiTopBar/HiTopBar.js

@@ -194,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,
@@ -215,7 +216,7 @@ class HiTopBar extends React.Component {
                             { className: classes.toolbar },
                             React.createElement(
                                 'div',
-                                { ref: refButtons },
+                                { ref: refButtons, id: 'menu-button-container' },
                                 searchFocus ? React.createElement(
                                     HiButton,
                                     {
@@ -246,7 +247,7 @@ class HiTopBar extends React.Component {
                             ),
                             React.createElement(
                                 'div',
-                                { className: classes.flex },
+                                { id: 'quick-search-input', className: classes.flex },
                                 searchInput
                             ),
                             notificationButton,
@@ -258,7 +259,8 @@ class HiTopBar extends React.Component {
                                     classes: {
                                         label: classes.accountSelectorButtonLabel
                                     },
-                                    onClick: this.props.onClickAccountSelector
+                                    onClick: this.props.onClickAccountSelector,
+                                    id: 'account-selector-button'
                                 },
                                 accountSelectorContent
                             ),

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',
@@ -111,6 +112,7 @@ const dark = {
     selected: '#303030',
     placeholder: '#999999',
     disable: '#E0E0E0',
+    border: 'rgba(224, 224, 224, 1)',
     positive: {
         light: '#66CF66',
         normal: '#00AF00',

package/hmu/images/map_marker.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 365 560" enable-background="new 0 0 365 560" xml:space="preserve">
+<g>
+	<path fill="#00AEEF" d="M182.9,551.7c0,0.1,0.2,0.3,0.2,0.3S358.3,283,358.3,194.6c0-130.1-88.8-186.7-175.4-186.9   C96.3,7.9,7.5,64.5,7.5,194.6c0,88.4,175.3,357.4,175.3,357.4S182.9,551.7,182.9,551.7z M122.2,187.2c0-33.6,27.2-60.8,60.8-60.8   c33.6,0,60.8,27.2,60.8,60.8S216.5,248,182.9,248C149.4,248,122.2,220.8,122.2,187.2z"/>
+</g>
+</svg>

package/index.es.js

@@ -1,4 +1,4 @@
-/** @license Material-UI v1.0.0-beta.19
+/** @license Material-UI v1.0.0-beta.20
  *
  * 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.19
+/** @license Material-UI v1.0.0-beta.20
  *
  * 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.19",
+  "version": "1.0.0-beta.20",
   "description": "HiPay Material-UI Style Guide - React components that implement Google's Material Design from Material-UI.",
   "main": "./index.js",
   "repository": {
@@ -15,51 +15,53 @@
   "homepage": "http://material-ui.com/",
   "peerDependencies": {
     "react": "16.2.0",
-    "react-dom": "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",
+    "leaflet": "^1.3.1",
+    "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",
+    "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.1",
+    "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"
+    "react-event-listener": "^0.5.1",
+    "react-jss": "^8.1.0",
+    "react-leaflet": "^1.9.1",
+    "react-lifecycles-compat": "^1.0.2",
+    "react-pdf": "^3.0.4",
+    "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"

package/styles/createHiMuiTheme.js

@@ -69,6 +69,7 @@ var light = {
     selected: '#F8F9FB',
     placeholder: '#999999',
     disable: '#E0E0E0',
+    border: 'rgba(224, 224, 224, 1)',
     positive: {
         light: '#66CF66',
         normal: '#00AF00',
@@ -139,6 +140,7 @@ var dark = {
     selected: '#303030',
     placeholder: '#999999',
     disable: '#E0E0E0',
+    border: 'rgba(224, 224, 224, 1)',
     positive: {
         light: '#66CF66',
         normal: '#00AF00',