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

package/HiDatePicker/ListPicker.js

@@ -5,10 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.styles = undefined;
 
-var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
-
-var _defineProperty3 = _interopRequireDefault(_defineProperty2);
-
 var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
 
 var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
@@ -37,10 +33,6 @@ var _propTypes = require('prop-types');
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _classnames = require('classnames');
-
-var _classnames2 = _interopRequireDefault(_classnames);
-
 var _reactCustomScrollbars = require('react-custom-scrollbars');
 
 var _Menu = require('material-ui/Menu');
@@ -51,8 +43,6 @@ var _withStyles2 = _interopRequireDefault(_withStyles);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-//  weak
-
 var styles = exports.styles = function styles(theme) {
     return {
         itemRoot: {
@@ -66,12 +56,9 @@ var styles = exports.styles = function styles(theme) {
         },
         itemCentered: {
             margin: 'auto'
-        },
-        currentDateItem: {
-            color: theme.palette.business.primary.normal + ' !important'
         }
     };
-};
+}; //  weak
 
 var ListPicker = function (_React$PureComponent) {
     (0, _inherits3.default)(ListPicker, _React$PureComponent);
@@ -84,9 +71,7 @@ var ListPicker = function (_React$PureComponent) {
     (0, _createClass3.default)(ListPicker, [{
         key: 'componentDidMount',
         value: function componentDidMount() {
-            if (this.position && this.scrollbars) {
-                this.scrollbars.scrollTop((this.position - 2) * 40);
-            } else if (this.props.initAtMiddleScroll && this.scrollbars) {
+            if (this.props.initAtMiddleScroll && this.scrollbars) {
                 this.scrollbars.scrollTop((this.scrollbars.getScrollHeight() - this.scrollbars.getClientHeight()) / 2 + 20);
             }
         }
@@ -99,12 +84,8 @@ var ListPicker = function (_React$PureComponent) {
                 classes = _props.classes,
                 itemList = _props.itemList,
                 onItemClick = _props.onItemClick,
-                selectedItem = _props.selectedItem,
-                type = _props.type;
-
+                selectedItem = _props.selectedItem;
 
-            this.position = itemList.indexOf(selectedItem);
-            var now = new Date();
 
             return _react2.default.createElement(
                 _reactCustomScrollbars.Scrollbars,
@@ -117,9 +98,7 @@ var ListPicker = function (_React$PureComponent) {
                 _react2.default.createElement(
                     _Menu.MenuList,
                     null,
-                    itemList.map(function (item, index) {
-                        var labelClass = (0, _classnames2.default)(classes.itemCentered, (0, _defineProperty3.default)({}, classes.currentDateItem, type === 'year' && now.getFullYear() === item || type === 'month' && now.getMonth() === index));
-
+                    itemList.map(function (item) {
                         return _react2.default.createElement(
                             _Menu.MenuItem,
                             {
@@ -135,7 +114,7 @@ var ListPicker = function (_React$PureComponent) {
                             },
                             _react2.default.createElement(
                                 'span',
-                                { className: labelClass },
+                                { className: classes.itemCentered },
                                 item
                             )
                         );
@@ -148,7 +127,7 @@ var ListPicker = function (_React$PureComponent) {
 }(_react2.default.PureComponent);
 
 ListPicker.defaultProps = {
-    initAtMiddleScroll: true
+    initAtMiddleScroll: false
 };
 ListPicker.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -170,10 +149,6 @@ ListPicker.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Item sélectionné
      */
-    selectedItem: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]),
-    /**
-     * Type des données dans la liste
-     */
-    type: _propTypes2.default.oneOf(['year', 'month'])
+    selectedItem: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string])
 } : {};
 exports.default = (0, _withStyles2.default)(styles, { name: 'HmuiListPicker' })(ListPicker);

package/HiDatePicker/Overlays/CustomOverlayLayout.js

@@ -98,11 +98,9 @@ var CustomOverlayLayout = function CustomOverlayLayout(_ref) {
 
     var paperClass = (0, _classnames2.default)(classes.paper, (_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.left, side === 'from'), (0, _defineProperty3.default)(_classNames, classes.right, side === 'to'), _classNames));
 
-    var paperProps = (0, _extends3.default)({}, props);
-
     return _react2.default.createElement(
         _Paper2.default,
-        { className: paperClass, onBlur: paperProps.onBlur, onFocus: paperProps.onFocus },
+        { className: paperClass },
         _react2.default.createElement(
             'div',
             { className: classes.overlay },

package/HiDatePicker/Overlays/MonthPickerOverlay.js

@@ -89,17 +89,13 @@ var MonthPickerOverlay = function (_React$Component) {
                 props = (0, _objectWithoutProperties3.default)(_props, ['value', 'translations']);
 
 
-            var now = new Date();
-            var currentMonth = props.localeUtils ? props.localeUtils.getMonths()[now.getMonth()] : props.children.props.localeUtils.getMonths()[now.getMonth()];
-
             return _react2.default.createElement(
                 _CustomOverlayLayout2.default,
                 (0, _extends3.default)({ headerElement: translations.month }, props),
                 _react2.default.createElement(_ListPicker2.default, {
                     itemList: this.months,
                     onItemClick: this.handleMonthClick,
-                    selectedItem: currentMonth,
-                    type: 'month'
+                    selectedItem: value ? value.getMonth() : null
                 })
             );
         }

package/HiDatePicker/Overlays/Overlay.js

@@ -5,18 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.styles = undefined;
 
-var _extends2 = require('babel-runtime/helpers/extends');
-
-var _extends3 = _interopRequireDefault(_extends2);
-
 var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
 
 var _defineProperty3 = _interopRequireDefault(_defineProperty2);
 
-var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
-
-var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
-
 var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
@@ -42,15 +34,10 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var styles = exports.styles = function styles() {
     return {
         paper: {
+            position: 'absolute',
             width: '100%',
             zIndex: 10
         },
-        absolute: {
-            position: 'absolute'
-        },
-        relative: {
-            position: 'relative'
-        },
         left: {
             width: '200%',
             left: 0
@@ -70,18 +57,13 @@ var Overlay = function Overlay(_ref) {
 
     var classes = _ref.classes,
         children = _ref.children,
-        side = _ref.side,
-        staticPosition = _ref.staticPosition,
-        props = (0, _objectWithoutProperties3.default)(_ref, ['classes', 'children', 'side', 'staticPosition']);
-
-
-    var paperClass = (0, _classnames2.default)(classes.paper, (_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.left, side === 'from'), (0, _defineProperty3.default)(_classNames, classes.right, side === 'to'), (0, _defineProperty3.default)(_classNames, classes.absolute, staticPosition !== true), (0, _defineProperty3.default)(_classNames, classes.relative, staticPosition === true), _classNames));
+        side = _ref.side;
 
-    var paperProps = (0, _extends3.default)({}, props);
+    var paperClass = (0, _classnames2.default)(classes.paper, (_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.left, side === 'from'), (0, _defineProperty3.default)(_classNames, classes.right, side === 'to'), _classNames));
 
     return _react2.default.createElement(
         _Paper2.default,
-        { onBlur: paperProps.onBlur, onFocus: paperProps.onFocus, className: paperClass },
+        { className: paperClass },
         _react2.default.createElement(
             'div',
             { className: classes.overlay },

package/HiDatePicker/Overlays/YearPickerOverlay.js

@@ -116,8 +116,7 @@ var YearPickerOverlay = function (_React$Component) {
                 _react2.default.createElement(_ListPicker2.default, {
                     itemList: this.years,
                     onItemClick: this.handleYearClick,
-                    selectedItem: value ? value.getFullYear() : null,
-                    type: 'year'
+                    selectedItem: value ? value.getFullYear() : null
                 })
             );
         }

package/HiDatePicker/stylesheet.js

@@ -31,13 +31,6 @@ exports.default = function (theme) {
             width: 'calc(50% - 4px)',
             marginLeft: 4
         },
-        absolute: {
-            position: 'absolute'
-        },
-        dayPickerMargin: {
-            top: -337,
-            width: 'calc(100% - 4px)'
-        },
         // The container element
         container: {
             width: '100%',

package/HiForm/HiFormControl.js

@@ -61,12 +61,8 @@ var _HiFormLabel = require('./HiFormLabel');
 
 var _HiFormLabel2 = _interopRequireDefault(_HiFormLabel);
 
-var _hiHelpers = require('../utils/hiHelpers');
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-// @inheritedComponent FormControl
-
 var styles = exports.styles = function styles(theme) {
     return {
         helperTextClassName: {
@@ -120,7 +116,7 @@ var styles = exports.styles = function styles(theme) {
             color: theme.palette.business.primary.normal
         },
         helperDiv: (0, _extends3.default)({}, theme.typography.h5, {
-            width: '100%',
+            width: 'calc(100% - 16px)',
             backgroundColor: '#ffffff',
             color: theme.palette.neutral.dark,
             padding: '16px 8px',
@@ -128,8 +124,7 @@ var styles = exports.styles = function styles(theme) {
             position: 'relative',
             marginBottom: 5,
             fontWeight: theme.typography.fontWeightRegular,
-            boxShadow: '0px 1px 7px rgba(0, 0, 0, 0.16)',
-            lineHeight: 1.5
+            boxShadow: '0px 1px 7px rgba(0, 0, 0, 0.16)'
         }),
         helperDivArrowDown: {
             borderTopColor: '#ffffff'
@@ -140,6 +135,7 @@ var styles = exports.styles = function styles(theme) {
 /**
  * Champs input pour formulaire
  */
+// @inheritedComponent FormControl
 
 var HiFormControl = function (_React$PureComponent) {
     (0, _inherits3.default)(HiFormControl, _React$PureComponent);
@@ -149,21 +145,6 @@ var HiFormControl = function (_React$PureComponent) {
 
         var _this = (0, _possibleConstructorReturn3.default)(this, (HiFormControl.__proto__ || (0, _getPrototypeOf2.default)(HiFormControl)).call(this, props));
 
-        _this.handleFocus = function (value) {
-            return function () {
-                _this.setState({ focused: value });
-                if (value === false && _this.state.hovered) {
-                    _this.setState({ hovered: false });
-                }
-            };
-        };
-
-        _this.handleHover = function (value) {
-            return function () {
-                _this.setState({ hovered: value });
-            };
-        };
-
         _this.state = {
             helperOpen: false,
             focused: false,
@@ -178,17 +159,26 @@ var HiFormControl = function (_React$PureComponent) {
 
     (0, _createClass3.default)(HiFormControl, [{
         key: 'handleHelperClick',
-        value: function handleHelperClick(event) {
+        value: function handleHelperClick() {
             this.setState(function (prevState) {
                 return { helperOpen: !prevState.helperOpen };
             });
-            if (event) {
-                event.preventDefault();
-            }
+        }
+    }, {
+        key: 'handleFocus',
+        value: function handleFocus(value) {
+            this.setState({ focused: value });
+        }
+    }, {
+        key: 'handleHover',
+        value: function handleHover(value) {
+            this.setState({ hovered: value });
         }
     }, {
         key: 'render',
         value: function render() {
+            var _this2 = this;
+
             var _props = this.props,
                 children = _props.children,
                 classes = _props.classes,
@@ -233,17 +223,11 @@ var HiFormControl = function (_React$PureComponent) {
                 ),
                 !disabled && helperIcon && helperText && !error && helperOpen && _react2.default.createElement(
                     'div',
-                    {
-                        className: classes.helperDiv
-                    },
+                    { className: classes.helperDiv },
                     _react2.default.createElement('div', {
                         className: (0, _classnames2.default)(classes.arrowDown, classes.helperDivArrowDown)
-
                     }),
-                    _react2.default.createElement('span', {
-                        dangerouslySetInnerHTML: {
-                            __html: (0, _hiHelpers.escapeHTML)(helperText)
-                        } })
+                    helperText
                 ),
                 label && _react2.default.createElement(
                     _HiFormLabel2.default,
@@ -252,7 +236,7 @@ var HiFormControl = function (_React$PureComponent) {
                         label: label,
                         required: required,
                         disabled: disabled,
-                        focused: !disabled && (focused || hovered)
+                        focused: focused || hovered
                     }, InputLabelProps),
                     !disabled && error && _react2.default.createElement(_mdiMaterialUi.Alert, {
                         className: classes.errorIcon,
@@ -266,10 +250,18 @@ var HiFormControl = function (_React$PureComponent) {
                 _react2.default.createElement(
                     'div',
                     {
-                        onMouseEnter: this.handleHover(true),
-                        onMouseLeave: this.handleHover(false),
-                        onFocus: this.handleFocus(true),
-                        onBlur: this.handleFocus(false)
+                        onMouseEnter: function onMouseEnter() {
+                            return _this2.handleHover(true);
+                        },
+                        onMouseLeave: function onMouseLeave() {
+                            return _this2.handleHover(false);
+                        },
+                        onFocus: function onFocus() {
+                            return _this2.handleFocus(true);
+                        },
+                        onBlur: function onBlur() {
+                            return _this2.handleFocus(false);
+                        }
                     },
                     children
                 ),

package/HiForm/HiInput.js

@@ -70,7 +70,7 @@ var styles = exports.styles = function styles(theme) {
         }, theme.typography.body1, {
             borderBottom: '1px solid ' + theme.palette.input.bottomLine,
             paddingLeft: 8,
-            backgroundColor: theme.palette.background2,
+            backgroundColor: '#f5f5f5',
             '&$focused': {
                 backgroundColor: '#ffffff'
             },
@@ -107,7 +107,7 @@ var styles = exports.styles = function styles(theme) {
         focused: {},
         error: {
             border: '1px solid ' + theme.palette.negative.normal,
-            paddingLeft: 8,
+            paddingLeft: 0,
             borderRadius: 2
         },
         startAdornment: {
@@ -124,7 +124,7 @@ var styles = exports.styles = function styles(theme) {
         rightIcon: {
             margin: '0 8px',
             width: 18,
-            height: 39,
+            height: 40,
             color: theme.palette.neutral.normal
         },
         rightIconFocus: {
@@ -147,10 +147,10 @@ var styles = exports.styles = function styles(theme) {
             padding: 0
         }),
         inputText: {
-            height: 39
+            height: 40
         },
         inputTextarea: {
-            minHeight: 39,
+            minHeight: 40,
             paddingTop: 8
         },
         iconPointer: {
@@ -158,7 +158,7 @@ var styles = exports.styles = function styles(theme) {
             cursor: 'pointer'
         },
         eraseButton: {
-            height: 39,
+            height: 40,
             width: 40,
             display: 'inline-block'
         },
@@ -207,11 +207,8 @@ var HiInput = function (_React$PureComponent) {
     }, {
         key: 'handleChange',
         value: function handleChange(event) {
-            var authorizedChar = '1234567890TOto<>';
             if (this.props.onChange) {
-                if (authorizedChar.indexOf(event.target.value.charAt(event.target.value.length - 1)) >= 0 && this.props.onlyNumbers === true || this.props.onlyNumbers !== true) {
-                    this.props.onChange(event);
-                }
+                this.props.onChange(event);
             }
         }
     }, {
@@ -238,29 +235,20 @@ var HiInput = function (_React$PureComponent) {
     }, {
         key: 'handleFocus',
         value: function handleFocus(event) {
-            if (this.endAdornmentNode && this.endAdornmentNode.contains(event.target)) {
-                event.stopPropagation();
-            } else {
-                if (!this.state.focused) {
-                    this.setState({ focused: true });
-                }
-                if (this.props.onFocus) {
-                    this.props.onFocus(event);
-                }
-                this.inputElement.focus();
+            if (!this.state.focused) {
+                this.setState({ focused: true });
+            }
+            if (this.props.onFocus) {
+                this.props.onFocus(event);
             }
         }
     }, {
         key: 'handleDivClick',
-        value: function handleDivClick(event) {
-            if (this.endAdornmentNode && this.endAdornmentNode.contains(event.target)) {
-                event.stopPropagation();
-            } else {
-                if (!this.state.focused) {
-                    this.setState({ focused: true });
-                }
-                this.inputElement.focus();
+        value: function handleDivClick() {
+            if (!this.state.focused) {
+                this.setState({ focused: true });
             }
+            this.inputElement.focus();
         }
     }, {
         key: 'handleMouseEnter',
@@ -287,9 +275,7 @@ var HiInput = function (_React$PureComponent) {
     }, {
         key: 'render',
         value: function render() {
-            var _classNames,
-                _this2 = this,
-                _classNames4;
+            var _classNames, _classNames4;
 
             var _props = this.props,
                 value = _props.value,
@@ -380,9 +366,7 @@ var HiInput = function (_React$PureComponent) {
                     startAdornment: leftIcon,
                     endAdornment: _react2.default.createElement(
                         'div',
-                        { className: classes.endAdornment, ref: function ref(el) {
-                                return _this2.endAdornmentNode = el;
-                            } },
+                        { className: classes.endAdornment },
                         eraseIcon,
                         endAdornment
                     ),
@@ -405,8 +389,7 @@ HiInput.defaultProps = {
     endAdornment: '',
     type: 'text',
     multiline: false,
-    error: false,
-    onlyNumbers: false
+    error: false
 };
 HiInput.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -480,10 +463,6 @@ HiInput.propTypes = process.env.NODE_ENV !== "production" ? {
      * Fonction de callback appelée lorsqu'on clic sur l'icône de gauche
      */
     onLeftIconClick: _propTypes2.default.func,
-    /**
-     * Pour les input de type number (permet de bloquer la saisie des caractères non autorisés)
-     */
-    onlyNumbers: _propTypes2.default.bool,
     /**
      * Fonction de callback appelée lorsqu'on survole le champs
      */

package/HiForm/HiSearchField.js

@@ -124,7 +124,7 @@ var HiSearchField = function (_React$Component) {
 
                 this.props.callbackFilteredList(filteredList);
             } else {
-                this.props.onSearch(event, searchedValue);
+                this.props.onSearch(searchedValue);
             }
         }
     }, {
@@ -137,7 +137,7 @@ var HiSearchField = function (_React$Component) {
             if (typeof this.props.onSearch === 'undefined') {
                 this.props.callbackFilteredList(this.props.itemList);
             } else {
-                this.props.onSearch(undefined, '');
+                this.props.onSearch('');
             }
         }
     }, {

package/HiForm/index.js

@@ -67,22 +67,4 @@ Object.defineProperty(exports, 'HiSearchField', {
   }
 });
 
-var _HiSlider = require('./HiSlider');
-
-Object.defineProperty(exports, 'HiSlider', {
-  enumerable: true,
-  get: function get() {
-    return _interopRequireDefault(_HiSlider).default;
-  }
-});
-
-var _HiAddressField = require('./HiAddressField');
-
-Object.defineProperty(exports, 'HiAddressField', {
-  enumerable: true,
-  get: function get() {
-    return _interopRequireDefault(_HiAddressField).default;
-  }
-});
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/HiPins/HiPins.js

@@ -42,6 +42,7 @@ var styles = exports.styles = function styles(theme) {
             textAlign: 'center',
             borderRadius: '45px',
             verticalAlign: 'middle',
+            margin: 0.5 * theme.spacing.unit,
             fontSize: 11,
             fontWeight: theme.typography.fontWeightMedium,
             fontFamily: theme.typography.fontFamily