@hipay/hipay-material-ui 1.0.0-beta.27 → 1.0.0-beta.29

package/HiSelect/SelectInput.js

@@ -45,20 +45,32 @@ var _classnames = require('classnames');
 
 var _classnames2 = _interopRequireDefault(_classnames);
 
-var _ArrowDropDown = require('../svg-icons/ArrowDropDown');
+var _keycode = require('keycode');
 
-var _ArrowDropDown2 = _interopRequireDefault(_ArrowDropDown);
+var _keycode2 = _interopRequireDefault(_keycode);
 
 var _Icon = require('material-ui/Icon');
 
 var _Icon2 = _interopRequireDefault(_Icon);
 
-var _styles = require('../styles');
+var _IconButton = require('material-ui/IconButton');
+
+var _IconButton2 = _interopRequireDefault(_IconButton);
 
 var _ButtonBase = require('material-ui/ButtonBase');
 
 var _ButtonBase2 = _interopRequireDefault(_ButtonBase);
 
+var _ArrowDropDown = require('../svg-icons/ArrowDropDown');
+
+var _ArrowDropDown2 = _interopRequireDefault(_ArrowDropDown);
+
+var _styles = require('../styles');
+
+var _HiIconBuilder = require('../utils/HiIconBuilder');
+
+var _HiIconBuilder2 = _interopRequireDefault(_HiIconBuilder);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var styles = exports.styles = function styles(theme) {
@@ -140,6 +152,11 @@ var styles = exports.styles = function styles(theme) {
             backgroundColor: theme.palette.background3
         },
         error: {},
+        eraseButton: {
+            height: 24,
+            width: 24,
+            display: 'inline-block'
+        },
         label: (0, _extends3.default)({
             whiteSpace: 'nowrap',
             overflow: 'hidden',
@@ -177,21 +194,33 @@ var SelectInput = function (_React$PureComponent) {
         var _this = (0, _possibleConstructorReturn3.default)(this, (SelectInput.__proto__ || (0, _getPrototypeOf2.default)(SelectInput)).call(this, props));
 
         _this.handleKeyDown = function (event) {
-            if (event.key === 'ArrowDown') {
-                _this.props.onClick();
-            } else if (event.key === 'ArrowUp') {
+            var key = (0, _keycode2.default)(event);
+            if (['up', 'down', 'space'].includes(key)) {
+                event.preventDefault();
                 _this.props.onClick();
+            } else if (key === 'enter' && _this.props.onSubmit) {
+                event.preventDefault();
+                _this.props.onSubmit(event);
+            }
+        };
+
+        _this.handleClick = function (event) {
+            if ((!_this.resetIcon || !_this.resetIcon.contains(event.target)) && _this.props.onClick) {
+                _this.props.onClick(event);
             }
         };
 
         _this.handleKeyDown = _this.handleKeyDown.bind(_this);
+        _this.handleClick = _this.handleClick.bind(_this);
         return _this;
     }
 
     (0, _createClass3.default)(SelectInput, [{
         key: 'render',
         value: function render() {
-            var _classNames, _classNames2;
+            var _classNames,
+                _classNames2,
+                _this2 = this;
 
             var _props = this.props,
                 classes = _props.classes,
@@ -203,7 +232,9 @@ var SelectInput = function (_React$PureComponent) {
                 focused = _props.focused,
                 error = _props.error,
                 id = _props.id,
-                refElement = _props.refElement;
+                refElement = _props.refElement,
+                onReset = _props.onReset,
+                theme = _props.theme;
 
             // On utilise classNames pour variabiliser les styles et merge les classes appliquées
 
@@ -240,7 +271,7 @@ var SelectInput = function (_React$PureComponent) {
                 {
                     id: id,
                     className: rootClass,
-                    onClick: onClick,
+                    onClick: this.handleClick,
                     disabled: disabled,
                     onMouseEnter: this.props.onMouseEnter,
                     onMouseLeave: this.props.onMouseLeave,
@@ -256,6 +287,20 @@ var SelectInput = function (_React$PureComponent) {
                     { className: classes.label },
                     value
                 ),
+                onReset && _react2.default.createElement(
+                    'div',
+                    {
+                        ref: function ref(el) {
+                            _this2.resetIcon = el;
+                        }
+                    },
+                    _react2.default.createElement(_HiIconBuilder2.default, {
+                        icon: 'close',
+                        size: 24,
+                        color: theme.palette.neutral.normal,
+                        onClick: onReset
+                    })
+                ),
                 _react2.default.createElement(
                     _Icon2.default,
                     { classes: { root: iconClass } },
@@ -319,6 +364,14 @@ SelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
      * Fonction de callback à la pression de touche
      */
     onKeyDown: _propTypes2.default.func,
+    /**
+     * Fonction de callback appelée lorsqu'on vide le champs
+     */
+    onReset: _propTypes2.default.func,
+    /**
+     * Fonction de callback à la pression de la touche "Entrée"
+     */
+    onSubmit: _propTypes2.default.func,
     /**
      * Applique le style open et effectue une rotation de l'icône
      */
@@ -332,4 +385,4 @@ SelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
      */
     value: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number, _propTypes2.default.node])
 } : {};
-exports.default = (0, _styles.withStyles)(styles, { name: 'HmuiSelectInput' })(SelectInput);
+exports.default = (0, _styles.withStyles)(styles, { name: 'HmuiSelectInput', withTheme: true })(SelectInput);

package/HiSelectableList/HiSelectableListItem.js

@@ -453,7 +453,8 @@ var HiSelectableListItem = function (_React$Component) {
                     checkedIcon: checkedIcon,
                     indeterminate: indeterminate,
                     classes: { checked: classes.listItemIconChecked },
-                    className: classes.checkbox
+                    className: classes.checkbox,
+                    disabled: effectiveDisabled
                 }),
                 this.buildListItem(),
                 !!item.info && _react2.default.createElement(

package/HiTable/BodyCellBuilder.js

@@ -46,6 +46,10 @@ var _propTypes2 = _interopRequireDefault(_propTypes);
 
 var _reactContextmenu = require('react-contextmenu');
 
+var _moment = require('moment');
+
+var _moment2 = _interopRequireDefault(_moment);
+
 var _constants = require('./constants');
 
 var cst = _interopRequireWildcard(_constants);
@@ -130,6 +134,7 @@ var BodyCellBuilder = function (_React$Component) {
                 align = _props.align,
                 dense = _props.dense,
                 ellipsis = _props.ellipsis,
+                formatShort = _props.formatShort,
                 onSelect = _props.onSelect,
                 selectable = _props.selectable,
                 selected = _props.selected,
@@ -142,7 +147,9 @@ var BodyCellBuilder = function (_React$Component) {
                 fixedColumnWidth = _props.fixedColumnWidth,
                 disableContextMenu = _props.disableContextMenu,
                 detailInfos = _props.detailInfos,
-                props = (0, _objectWithoutProperties3.default)(_props, ['ukey', 'type', 'data', 'view', 'width', 'padding', 'align', 'dense', 'ellipsis', 'onSelect', 'selectable', 'selected', 'sticky', 'dateLocale', 'numberLocale', 'childrenCount', 'onOpenDetails', 'lookedUp', 'fixedColumnWidth', 'disableContextMenu', 'detailInfos']);
+                size = _props.size,
+                tabId = _props.tabId,
+                props = (0, _objectWithoutProperties3.default)(_props, ['ukey', 'type', 'data', 'view', 'width', 'padding', 'align', 'dense', 'ellipsis', 'formatShort', 'onSelect', 'selectable', 'selected', 'sticky', 'dateLocale', 'numberLocale', 'childrenCount', 'onOpenDetails', 'lookedUp', 'fixedColumnWidth', 'disableContextMenu', 'detailInfos', 'size', 'tabId']);
 
 
             var layoutProps = {
@@ -170,22 +177,12 @@ var BodyCellBuilder = function (_React$Component) {
 
                 switch (type) {
                     case cst.TYPE_ACCOUNT:
+                        layoutProps.title = data.value;
                         cellElement = _react2.default.createElement(_BodyCells.CellAccount, { value: data.value, color: data.color, sticky: sticky });
                         break;
 
-                    case cst.TYPE_ACCOUNT_NUMBER:
-                        cellElement = _react2.default.createElement(_BodyCells.CellAccountNumber, {
-                            value: data.value,
-                            country: data.country,
-                            expirationDate: data.expirationDate,
-                            expirationDateLabel: data.expirationDateLabel,
-                            statusColor: data.statusColor,
-                            issuer: data.issuer,
-                            sticky: sticky
-                        });
-                        break;
-
                     case cst.TYPE_ADDRESS:
+                        layoutProps.title = data.name + ', ' + data.value + ', ' + data.city;
                         cellElement = _react2.default.createElement(_BodyCells.CellAddress, {
                             name: data.name,
                             streetAddress: data.value,
@@ -199,6 +196,7 @@ var BodyCellBuilder = function (_React$Component) {
                         break;
 
                     case cst.TYPE_COUNTRY:
+                        layoutProps.title = data.label ? data.label : data.value;
                         cellElement = _react2.default.createElement(_BodyCells.CellCountry, {
                             label: data.label ? data.label : data.value,
                             path: data.img,
@@ -209,17 +207,19 @@ var BodyCellBuilder = function (_React$Component) {
                         break;
 
                     case cst.TYPE_DATE:
+                        if (!props.displayTime) layoutProps.title = (0, _moment2.default)(data.value).format('dddd DD MMMM YYYY HH:mm:ss');
                         cellElement = _react2.default.createElement(_BodyCells.CellDate, {
                             value: data.value,
                             locale: dateLocale,
                             view: view,
                             displayTime: props.displayTime,
                             sticky: sticky,
-                            formatShort: this.props.formatShort
+                            formatShort: formatShort
                         });
                         break;
 
                     case cst.TYPE_ICON:
+                        if (view === cst.VIEWS.SMALL) layoutProps.title = data.label ? data.label : data.value;
                         cellElement = _react2.default.createElement(_BodyCells.CellIcon, {
                             value: data.label ? data.label : data.value,
                             icon: data.icon,
@@ -230,16 +230,18 @@ var BodyCellBuilder = function (_React$Component) {
                         break;
 
                     case cst.TYPE_IMAGE:
+                        if (view === cst.VIEWS.SMALL) layoutProps.title = data.label ? data.label : data.value;
                         cellElement = _react2.default.createElement(_BodyCells.CellImage, {
                             value: data.label ? data.label : data.value,
                             path: data.img,
-                            size: this.props.size,
+                            size: size,
                             view: view,
                             sticky: sticky
                         });
                         break;
 
                     case cst.TYPE_NUMERIC:
+                        if (view !== cst.VIEWS.LARGE) layoutProps.title = data.label ? data.label : data.value;
                         cellElement = _react2.default.createElement(_BodyCells.CellNumeric, {
                             value: data.value,
                             currency: data.currency,
@@ -274,6 +276,7 @@ var BodyCellBuilder = function (_React$Component) {
                         break;
 
                     case cst.TYPE_STATUS:
+                        layoutProps.title = data.label ? data.label : data.value;
                         cellElement = _react2.default.createElement(_BodyCells.CellStatus, (0, _extends3.default)({
                             code: data.value,
                             value: data.label ? data.label : data.value,
@@ -287,6 +290,7 @@ var BodyCellBuilder = function (_React$Component) {
                         break;
 
                     case cst.TYPE_THIRD_PARTY_SECURITY:
+                        layoutProps.title = data.label ? data.label : data.value;
                         layoutProps.align = 'center';
                         cellElement = _react2.default.createElement(_BodyCells.CellThirdPartySecurity, {
                             value: data.value,
@@ -295,8 +299,10 @@ var BodyCellBuilder = function (_React$Component) {
                         });
                         break;
 
+                    case cst.TYPE_ACCOUNT_NUMBER:
                     case cst.TYPE_TEXT:
                     default:
+                        layoutProps.title = data.label ? data.label : data.value;
                         cellElement = _react2.default.createElement(_BodyCells.CellText, {
                             ukey: ukey,
                             value: data.label ? data.label : data.value,
@@ -311,7 +317,7 @@ var BodyCellBuilder = function (_React$Component) {
                 cellContent = disableContextMenu ? cellElement : _react2.default.createElement(
                     _reactContextmenu.ContextMenuTrigger,
                     {
-                        id: 'hitable_context_menu_' + this.props.tabId,
+                        id: 'hitable_context_menu_' + tabId,
                         collect: this.collectContextMenuDatas
                     },
                     cellElement

package/HiTable/BodyCells/CellAccount.js

@@ -70,11 +70,7 @@ var CellAccount = function (_React$Component) {
                 color = _props.color;
 
 
-            return _react2.default.createElement(
-                _Tooltip2.default,
-                { title: value, placement: 'bottom' },
-                _react2.default.createElement(_HiColoredLabel2.default, { label: value, color: color })
-            );
+            return _react2.default.createElement(_HiColoredLabel2.default, { label: value, color: color });
         }
     }]);
     return CellAccount;

package/HiTable/BodyCells/CellAddress.js

@@ -37,10 +37,6 @@ var _propTypes = require('prop-types');
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _Tooltip = require('../../Tooltip');
-
-var _Tooltip2 = _interopRequireDefault(_Tooltip);
-
 var _constants = require('../constants');
 
 var cst = _interopRequireWildcard(_constants);
@@ -49,16 +45,11 @@ var _withStyles = require('../../styles/withStyles');
 
 var _withStyles2 = _interopRequireDefault(_withStyles);
 
-var _CellLayout = require('./CellLayout');
-
-var _CellLayout2 = _interopRequireDefault(_CellLayout);
-
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 // @inheritedComponent CellLayout
-
 var styles = exports.styles = function styles(theme) {
     return {
         rightEllipsisSpan: {
@@ -120,48 +111,10 @@ var CellAddress = function (_React$Component) {
                 label += isoCountry;
             }
 
-            var tooltipContent = _react2.default.createElement(
-                'div',
-                null,
-                _react2.default.createElement(
-                    'div',
-                    null,
-                    name
-                ),
-                _react2.default.createElement(
-                    'div',
-                    null,
-                    streetAddress
-                ),
-                _react2.default.createElement(
-                    'div',
-                    null,
-                    _react2.default.createElement(
-                        'span',
-                        null,
-                        city + ', '
-                    ),
-                    _react2.default.createElement(
-                        'span',
-                        null,
-                        postalCode
-                    )
-                ),
-                _react2.default.createElement(
-                    'div',
-                    null,
-                    country
-                )
-            );
-
             return _react2.default.createElement(
-                _Tooltip2.default,
-                { title: tooltipContent, placement: this.props.sticky ? 'right' : 'bottom' },
-                _react2.default.createElement(
-                    'div',
-                    { className: classes.rightEllipsisSpan },
-                    label
-                )
+                'div',
+                { className: classes.rightEllipsisSpan },
+                label
             );
         }
     }]);

package/HiTable/BodyCells/CellCountry.js

@@ -41,10 +41,6 @@ var _CellImage = require('./CellImage');
 
 var _CellImage2 = _interopRequireDefault(_CellImage);
 
-var _Tooltip = require('../../Tooltip');
-
-var _Tooltip2 = _interopRequireDefault(_Tooltip);
-
 var _withStyles = require('../../styles/withStyles');
 
 var _withStyles2 = _interopRequireDefault(_withStyles);

package/HiTable/BodyCells/CellDate.js

@@ -47,10 +47,6 @@ var _withStyles = require('../../styles/withStyles');
 
 var _withStyles2 = _interopRequireDefault(_withStyles);
 
-var _Tooltip = require('../../Tooltip');
-
-var _Tooltip2 = _interopRequireDefault(_Tooltip);
-
 var _constants = require('../constants');
 
 var cst = _interopRequireWildcard(_constants);
@@ -110,8 +106,7 @@ var CellDate = function (_React$Component) {
             var date = (0, _moment2.default)(value);
             date.locale(locale);
 
-            var titleValue = displayTime ? date.format(this.formatLong) : date.format(this.formatLong.replace(' HH:mm:ss', ''));
-            var displayedValue = titleValue;
+            var displayedValue = displayTime ? date.format(this.formatLong) : date.format(this.formatLong.replace(' HH:mm:ss', ''));
             if (view === cst.VIEWS.SMALL) {
                 displayedValue = displayTime ? date.format(formatShort.replace('YYYY', 'YY') + ' HH:mm:ss') : date.format(formatShort.replace('YYYY', 'YY'));
             } else if (view === cst.VIEWS.MEDIUM) {
@@ -127,13 +122,9 @@ var CellDate = function (_React$Component) {
             }
 
             return _react2.default.createElement(
-                _Tooltip2.default,
-                { title: titleValue, placement: this.props.sticky ? 'right' : 'bottom' },
-                _react2.default.createElement(
-                    'div',
-                    { className: classes.rightEllipsisSpan },
-                    displayedValue
-                )
+                'div',
+                { className: classes.rightEllipsisSpan },
+                displayedValue
             );
         }
     }]);

package/HiTable/BodyCells/CellIcon.js

@@ -37,10 +37,6 @@ var _propTypes = require('prop-types');
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _Tooltip = require('../../Tooltip');
-
-var _Tooltip2 = _interopRequireDefault(_Tooltip);
-
 var _withStyles = require('../../styles/withStyles');
 
 var _withStyles2 = _interopRequireDefault(_withStyles);
@@ -62,13 +58,15 @@ var styles = exports.styles = {
         float: 'left'
     },
     label: {
-        margin: 5
-    },
-    wrapper: {
+        margin: '4px 0',
         whiteSpace: 'nowrap',
         overflow: 'hidden',
         textOverflow: 'ellipsis'
     },
+    wrapper: {
+        maxWidth: '100%',
+        display: 'inline-flex'
+    },
     nowrap: {
         whiteSpace: 'nowrap'
     }
@@ -103,33 +101,18 @@ var CellIcon = function (_React$Component) {
                 color = _props.color;
 
 
-            var iconElement = icon !== '' ? _react2.default.createElement(_HiIconBuilder2.default, { color: color, className: classes.icon, icon: icon, size: 18 }) : '';
+            var iconElement = icon !== '' ? _react2.default.createElement(_HiIconBuilder2.default, { color: color, className: classes.icon, icon: icon, width: 40, height: 24 }) : '';
 
-            var tooltipContent = _react2.default.createElement(
+            return _react2.default.createElement(
                 'div',
-                { className: classes.nowrap },
+                { className: classes.wrapper },
                 iconElement,
-                _react2.default.createElement(
+                view !== cst.VIEWS.SMALL && typeof value !== 'undefined' && _react2.default.createElement(
                     'span',
-                    null,
+                    { className: classes.label },
                     value
                 )
             );
-
-            return _react2.default.createElement(
-                _Tooltip2.default,
-                { title: tooltipContent, placement: this.props.sticky ? 'right' : 'bottom' },
-                _react2.default.createElement(
-                    'div',
-                    { className: classes.wrapper },
-                    iconElement,
-                    view !== cst.VIEWS.SMALL && typeof value !== 'undefined' && _react2.default.createElement(
-                        'span',
-                        { className: classes.label },
-                        value
-                    )
-                )
-            );
         }
     }]);
     return CellIcon;

package/HiTable/BodyCells/CellImage.js

@@ -121,17 +121,6 @@ var CellImage = function (_React$Component) {
                 size = _props.size;
 
 
-            var tooltipContent = _react2.default.createElement(
-                'div',
-                { className: classes.tooltipContainer },
-                _react2.default.createElement('img', { src: path, alt: value, className: classes.tooltipImg, width: size }),
-                _react2.default.createElement(
-                    'span',
-                    { className: classes.tooltipLabel },
-                    value
-                )
-            );
-
             var innerCellElement = null;
             if (path) {
                 if (view === cst.VIEWS.SMALL) {
@@ -164,16 +153,7 @@ var CellImage = function (_React$Component) {
                 );
             }
 
-            if (view === cst.VIEWS.LARGE) {
-                // Don't add tooltip for large view
-                return innerCellElement;
-            } else {
-                return _react2.default.createElement(
-                    _Tooltip2.default,
-                    { title: tooltipContent, placement: this.props.sticky ? 'right' : 'bottom' },
-                    innerCellElement
-                );
-            }
+            return innerCellElement;
         }
     }]);
     return CellImage;

package/HiTable/BodyCells/CellLayout.js

@@ -146,7 +146,8 @@ var CellLayout = function (_React$Component) {
                 onOpenDetails = _props.onOpenDetails,
                 theme = _props.theme,
                 padding = _props.padding,
-                lookedUp = _props.lookedUp;
+                lookedUp = _props.lookedUp,
+                title = _props.title;
 
 
             var offset = selectable ? dense ? 32 : 40 : 0;
@@ -189,7 +190,8 @@ var CellLayout = function (_React$Component) {
                             paddingLeft: selectable ? 0 : padding,
                             paddingRight: padding,
                             height: dense ? cst.CELL_HEIGHT_DENSE : cst.CELL_HEIGHT
-                        }
+                        },
+                        title: title
                     },
                     children,
                     childrenCount && _react2.default.createElement(
@@ -238,7 +240,8 @@ CellLayout.defaultProps = {
     fixedColumnWidth: true,
     sticky: false,
     padding: 8,
-    detailInfos: null
+    detailInfos: null,
+    title: null
 };
 CellLayout.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -305,6 +308,10 @@ CellLayout.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Nombre d'enfants
      */
-    childrenCount: _propTypes2.default.number
+    childrenCount: _propTypes2.default.number,
+    /**
+     * Html title attribute
+     */
+    title: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string])
 } : {};
 exports.default = (0, _styles.withStyles)(styles, { withTheme: true, name: 'HmuiCellLayout' })(CellLayout);

package/HiTable/BodyCells/CellNumeric.js

@@ -43,16 +43,6 @@ var _withStyles2 = _interopRequireDefault(_withStyles);
 
 var _hiHelpers = require('../../utils/hiHelpers');
 
-var _Tooltip = require('../../Tooltip');
-
-var _Tooltip2 = _interopRequireDefault(_Tooltip);
-
-var _constants = require('../constants');
-
-var cst = _interopRequireWildcard(_constants);
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var styles = exports.styles = function styles(theme) {
@@ -93,27 +83,17 @@ var CellNumeric = function (_React$Component) {
 
 
             var displayedValue = '';
-            var titleValue = '';
 
             if (currency) {
                 displayedValue = (0, _hiHelpers.formatCurrencyAmount)(value, view, locale, currency);
-                if (view === cst.VIEWS.LARGE) {
-                    titleValue = displayedValue;
-                } else {
-                    titleValue = (0, _hiHelpers.formatCurrencyAmount)(value, cst.VIEWS.LARGE, locale, currency);
-                }
             } else {
                 displayedValue = (0, _hiHelpers.formatNumber)(value, view, locale, precision);
             }
 
             return _react2.default.createElement(
-                _Tooltip2.default,
-                { title: titleValue, placement: this.props.sticky ? 'right' : 'bottom' },
-                _react2.default.createElement(
-                    'span',
-                    { className: classes.spanNumeric },
-                    displayedValue
-                )
+                'span',
+                { className: classes.spanNumeric },
+                displayedValue
             );
         }
     }]);