@hipay/hipay-material-ui 1.0.0-beta.3 → 1.0.0-beta.5

package/HiTopBar/HiTopBar.js

@@ -209,7 +209,7 @@ var HiTopBar = function (_React$Component) {
             menuAnchor: null
         };
 
-        _this.toggleCollapse = _this.toggleCollapse.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);
@@ -234,8 +234,8 @@ var HiTopBar = function (_React$Component) {
             callback();
         }
     }, {
-        key: 'toggleCollapse',
-        value: function toggleCollapse() {
+        key: 'handleCollapse',
+        value: function handleCollapse() {
             this.setState({ collapsed: !this.state.collapsed });
         }
     }, {
@@ -259,6 +259,7 @@ var HiTopBar = function (_React$Component) {
                 translations = _props.translations,
                 onClickMenu = _props.onClickMenu,
                 accountSelectorContent = _props.accountSelectorContent,
+                refButtons = _props.refButtons,
                 searchInput = _props.searchInput,
                 searchFocus = _props.searchFocus;
 
@@ -295,15 +296,16 @@ var HiTopBar = function (_React$Component) {
                         null,
                         _react2.default.createElement(
                             _Collapse2.default,
-                            { 'in': !this.state.collapsed, className: (0, _classnames2.default)((0, _defineProperty3.default)({}, classes.collapseOverflow, !hideable)) },
+                            {
+                                'in': !this.state.collapsed,
+                                className: (0, _classnames2.default)((0, _defineProperty3.default)({}, classes.collapseOverflow, !hideable))
+                            },
                             _react2.default.createElement(
                                 _Toolbar2.default,
                                 { className: classes.toolbar },
                                 _react2.default.createElement(
                                     'div',
-                                    { ref: function ref(div) {
-                                            return _this2.overlay = div;
-                                        } },
+                                    { ref: refButtons },
                                     searchFocus ? _react2.default.createElement(
                                         _HiButton2.default,
                                         {
@@ -359,7 +361,7 @@ var HiTopBar = function (_React$Component) {
                                 (hideable || hasSettings) && _react2.default.createElement(
                                     _IconButton2.default,
                                     { color: 'inherit', className: classes.iconButton },
-                                    hideable && _react2.default.createElement(_mdiMaterialUi.ChevronDoubleUp, { onClick: this.toggleCollapse }),
+                                    hideable && _react2.default.createElement(_mdiMaterialUi.ChevronDoubleUp, { onClick: this.handleCollapse }),
                                     hasSettings && _react2.default.createElement(_HiIconBuilder2.default, {
                                         onClick: this.props.onClickSettings,
                                         icon: 'fa-gear',
@@ -371,7 +373,7 @@ var HiTopBar = function (_React$Component) {
                         hideable && this.state.collapsed && _react2.default.createElement(
                             _IconButton2.default,
                             {
-                                onClick: this.toggleCollapse,
+                                onClick: this.handleCollapse,
                                 color: 'inherit',
                                 className: classes.showTopBarButton
                             },
@@ -387,9 +389,7 @@ var HiTopBar = function (_React$Component) {
                         { className: classes.toolbar },
                         _react2.default.createElement(
                             'div',
-                            { ref: function ref(div) {
-                                    return _this2.overlay = div;
-                                } },
+                            { ref: refButtons },
                             searchFocus ? _react2.default.createElement(
                                 _IconButton2.default,
                                 { className: classes.leftButtonMobile, color: 'inherit' },
@@ -533,6 +533,10 @@ HiTopBar.propTypes = process.env.NODE_ENV !== "production" ? {
      * [here](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning).
      */
     position: _propTypes2.default.oneOf(['fixed', 'absolute', 'sticky', 'static']),
+    /**
+     *  Passe une ref callback à la div contenant les boutons "menu" et "back"
+     */
+    refButtons: _propTypes2.default.func,
     /**
      * Etat de focus.
      */

package/es/HiChip/HiChip.js

@@ -87,12 +87,12 @@ function HiChip(props) {
             })
         },
         img && React.createElement('img', { className: classes.badge, src: img, alt: img }),
-        icon && React.createElement(HiIconBuilder, { className: classes.icon, icon: icon }),
+        icon && React.createElement(HiIconBuilder, { className: classes.icon, icon: icon, size: 16 }),
         onPrevious && React.createElement(HiIconBuilder, {
             className: classNames(classes.navigate),
             icon: 'menuLeft',
             onClick: onPrevious,
-            size: 20
+            size: 16
         }),
         React.createElement(
             'span',
@@ -103,13 +103,13 @@ function HiChip(props) {
             className: classNames(classes.navigate),
             icon: 'menuRight',
             onClick: onNext,
-            size: 20
+            size: 16
         }),
         onDelete && React.createElement(HiIconBuilder, {
             classes: { root: classes.eraseIcon },
             icon: 'closeCircle',
             onClick: onDelete,
-            size: 20
+            size: 16
         })
     );
 }

package/es/HiColoredLabel/HiColoredLabel.js

@@ -74,7 +74,7 @@ HiColoredLabel.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Label à afficher
      */
-    label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
+    label: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.node]).isRequired
 } : {};
 
 HiColoredLabel.defaultProps = {

package/es/HiDatePicker/HiDatePicker.js

@@ -52,21 +52,19 @@ class HiDatePicker extends React.Component {
     }
 
     handleDayChange(day, modifiers) {
-        if (this.props.onChange) {
-            if (modifiers.selected) {
-                // Deselect day
-                this.props.onChange(undefined);
-            } else {
-                // Keep Time if set
-                if (this.props.enableTime && day !== undefined) {
-                    if (this.props.value) {
-                        day.setHours(this.props.value.getHours(), this.props.value.getMinutes());
-                    } else {
-                        day.setHours(0, 0);
-                    }
+        if (modifiers.selected) {
+            // Deselect day
+            this.props.onChange(undefined);
+        } else {
+            // Keep Time if set
+            if (this.props.enableTime && day !== undefined) {
+                if (this.props.value) {
+                    day.setHours(this.props.value.getHours(), this.props.value.getMinutes());
+                } else {
+                    day.setHours(0, 0);
                 }
-                this.props.onChange(day);
             }
+            this.props.onChange(day);
         }
         if (day instanceof Date && !this.props.enableTime && modifiers.selected !== true) {
             // Hide overlay & remove focus on input
@@ -304,7 +302,7 @@ HiDatePicker.propTypes = process.env.NODE_ENV !== "production" ? {
      *
      * @param {Date} date sélectionnée
      */
-    onChange: PropTypes.func,
+    onChange: PropTypes.func.isRequired,
     /**
      * Callback au reset de l'input
      */

package/es/HiDatePicker/HiDateRangeSelector.js

@@ -105,7 +105,9 @@ export const styles = theme => ({
     },
     dateRangePicker: {
         width: 'calc(100% + 8px)'
-    }
+    },
+    smSelect: {},
+    smRangePicker: {}
 });
 
 class HiDateRangeSelector extends React.Component {
@@ -187,7 +189,7 @@ class HiDateRangeSelector extends React.Component {
             },
             React.createElement(
                 Grid,
-                { item: true, xs: 12, sm: 4 },
+                { item: true, xs: 12, sm: 4, classes: { 'grid-sm-4': classes.smSelect } },
                 React.createElement(HiSelectField, {
                     disabled: disabled,
                     error: error,
@@ -208,7 +210,7 @@ class HiDateRangeSelector extends React.Component {
             ),
             React.createElement(
                 Grid,
-                { item: true, xs: 12, sm: 8 },
+                { item: true, xs: 12, sm: 8, classes: { 'grid-sm-8': classes.smRangePicker } },
                 React.createElement(HiDateRangePicker, _extends({
                     classes: { root: classes.dateRangePicker },
                     id: idRange,
@@ -239,9 +241,7 @@ HiDateRangeSelector.defaultProps = {
         quarter: 'Quarter',
         week: 'Week',
         year: 'Year',
-
         days: 'days',
-
         custom_period: 'Custom Period',
         yesterday: 'Yesterday',
         last_24h: 'Last 24h',

package/es/HiForm/HiFormControl.js

@@ -98,8 +98,11 @@ class HiFormControl extends React.PureComponent {
         this.handleHover = this.handleHover.bind(this);
     }
 
-    handleHelperClick() {
+    handleHelperClick(event) {
         this.setState(prevState => ({ helperOpen: !prevState.helperOpen }));
+        if (event) {
+            event.preventDefault();
+        }
     }
 
     handleFocus(value) {
@@ -173,7 +176,7 @@ class HiFormControl extends React.PureComponent {
                     label: label,
                     required: required,
                     disabled: disabled,
-                    focused: focused || hovered
+                    focused: !disabled && (focused || hovered)
                 }, InputLabelProps),
                 !disabled && error && React.createElement(Alert, {
                     className: classes.errorIcon,

package/es/HiForm/HiInput.js

@@ -67,7 +67,7 @@ export const styles = theme => ({
     rightIcon: {
         margin: '0 8px',
         width: 18,
-        height: 40,
+        height: 39,
         color: theme.palette.neutral.normal
     },
     rightIconFocus: {
@@ -90,10 +90,10 @@ export const styles = theme => ({
         padding: 0
     }),
     inputText: {
-        height: 40
+        height: 39
     },
     inputTextarea: {
-        minHeight: 40,
+        minHeight: 39,
         paddingTop: 8
     },
     iconPointer: {
@@ -101,7 +101,7 @@ export const styles = theme => ({
         cursor: 'pointer'
     },
     eraseButton: {
-        height: 40,
+        height: 39,
         width: 40,
         display: 'inline-block'
     },

package/es/HiForm/HiSearchField.js

@@ -73,7 +73,7 @@ class HiSearchField extends React.Component {
 
             this.props.callbackFilteredList(filteredList);
         } else {
-            this.props.onSearch(searchedValue);
+            this.props.onSearch(event, searchedValue);
         }
     }