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

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 },
@@ -113,7 +95,7 @@ Overlay.propTypes = process.env.NODE_ENV !== "production" ? {
      * ReactDayPicker prop
      * The currently selected day or selected days
      */
-    selectedDay: _propTypes2.default.oneOfType([_propTypes2.default.object, _propTypes2.default.array, _propTypes2.default.string]),
+    selectedDay: _propTypes2.default.oneOfType([_propTypes2.default.object, _propTypes2.default.array]),
     /**
      * Définit comment construire le Paper dans le cas d'un double input
      */

package/HiDatePicker/stylesheet.js

@@ -31,20 +31,6 @@ exports.default = function (theme) {
             width: 'calc(50% - 4px)',
             marginLeft: 4
         },
-        absolute: {
-            position: 'absolute'
-        },
-        right4: {
-            right: 4
-        },
-        dayPickerMargin: {
-            top: -337,
-            width: 'calc(100% - 4px)'
-        },
-        rangePickerContainer: {
-            display: 'flex',
-            alignItems: 'flex-start'
-        },
         // The container element
         container: {
             width: '100%',

package/HiForm/HiFormControl.js

@@ -149,21 +149,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,
@@ -186,9 +171,21 @@ var HiFormControl = function (_React$PureComponent) {
                 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,
@@ -223,7 +220,7 @@ var HiFormControl = function (_React$PureComponent) {
                     error: error,
                     ref: rootRef
                 }, others),
-                error && errorText && helperOpen && _react2.default.createElement(
+                !disabled && error && errorText && helperOpen && _react2.default.createElement(
                     'div',
                     { className: classes.errorDiv },
                     _react2.default.createElement('div', {
@@ -231,7 +228,7 @@ var HiFormControl = function (_React$PureComponent) {
                     }),
                     errorText
                 ),
-                helperIcon && helperText && !error && helperOpen && _react2.default.createElement(
+                !disabled && helperIcon && helperText && !error && helperOpen && _react2.default.createElement(
                     'div',
                     {
                         className: classes.helperDiv
@@ -252,13 +249,13 @@ var HiFormControl = function (_React$PureComponent) {
                         label: label,
                         required: required,
                         disabled: disabled,
-                        focused: !disabled && (focused || hovered)
+                        focused: focused || hovered
                     }, InputLabelProps),
-                    error && _react2.default.createElement(_mdiMaterialUi.Alert, {
+                    !disabled && error && _react2.default.createElement(_mdiMaterialUi.Alert, {
                         className: classes.errorIcon,
                         onClick: this.handleHelperClick
                     }),
-                    helperIcon && helperText && !error && _react2.default.createElement(_mdiMaterialUi.Information, {
+                    !disabled && helperIcon && helperText && !error && _react2.default.createElement(_mdiMaterialUi.Information, {
                         className: (0, _classnames2.default)(classes.helperIcon, (0, _defineProperty3.default)({}, classes.helperIconActive, helperOpen)),
                         onClick: this.handleHelperClick
                     })
@@ -266,10 +263,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: {
@@ -122,6 +122,7 @@ var styles = exports.styles = function styles(theme) {
             color: theme.palette.neutral.light
         },
         rightIcon: {
+            margin: '0 8px',
             width: 18,
             height: 39,
             color: theme.palette.neutral.normal
@@ -134,7 +135,7 @@ var styles = exports.styles = function styles(theme) {
         },
         rightIconError: {
             // Ajout d'1px pour ne pas avoir de décalage en mode error avec le border right
-            marginRight: '-1px'
+            marginRight: 10
         },
         input: (0, _extends3.default)({}, theme.typography.body1, {
             fontWeight: theme.typography.fontWeightRegular,
@@ -219,7 +220,6 @@ var HiInput = function (_React$PureComponent) {
             if (this.props.onReset) {
                 this.props.onReset();
             }
-            this.inputElement.focus();
         }
     }, {
         key: 'handleBlur',
@@ -238,28 +238,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);
-                }
+            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',
@@ -286,9 +278,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,
@@ -308,8 +298,7 @@ var HiInput = function (_React$PureComponent) {
                 rows = _props.rows,
                 inputClassName = _props.inputClassName,
                 onReset = _props.onReset,
-                theme = _props.theme,
-                startAdornmentColor = _props.startAdornmentColor;
+                theme = _props.theme;
             var focused = this.state.focused;
 
 
@@ -324,17 +313,11 @@ var HiInput = function (_React$PureComponent) {
             });
 
             var leftIcon = void 0;
-            var startAdornmentStyle = { padding: 8 };
-            if (startAdornmentColor) {
-                startAdornmentStyle.color = startAdornmentColor;
-            }
             if (startAdornment) {
                 var _classNames2;
 
                 leftIcon = _react2.default.createElement(_HiIconBuilder2.default, {
                     icon: startAdornment,
-                    size: 36,
-                    style: startAdornmentStyle,
                     onClick: this.props.onLeftIconClick,
                     className: (0, _classnames2.default)(classes.startAdornment, (_classNames2 = {}, (0, _defineProperty3.default)(_classNames2, classes.startAdornmentFocus, focused), (0, _defineProperty3.default)(_classNames2, classes.startAdornmentDisabled, disabled), (0, _defineProperty3.default)(_classNames2, classes.iconPointer, this.props.onLeftIconClick), _classNames2))
                 });
@@ -347,7 +330,7 @@ var HiInput = function (_React$PureComponent) {
                     onClick: this.handleReset,
                     onBlur: this.handleBlur
                 },
-                _react2.default.createElement(_HiIconBuilder2.default, { icon: 'close', size: 36, color: theme.palette.neutral.normal, style: { padding: '8px' } })
+                _react2.default.createElement(_HiIconBuilder2.default, { icon: 'close', size: 18, color: theme.palette.neutral.normal })
             );
 
             var endAdornment = endAdornmentProps;
@@ -356,8 +339,6 @@ var HiInput = function (_React$PureComponent) {
 
                 endAdornment = _react2.default.createElement(_HiIconBuilder2.default, {
                     icon: endAdornmentProps,
-                    size: 36,
-                    style: { padding: '8px' },
                     onClick: this.props.onRightIconClick,
                     className: (0, _classnames2.default)(classes.rightIcon, (_classNames3 = {}, (0, _defineProperty3.default)(_classNames3, classes.rightIconFocus, focused), (0, _defineProperty3.default)(_classNames3, classes.rightIconDisabled, disabled), (0, _defineProperty3.default)(_classNames3, classes.rightIconError, error), (0, _defineProperty3.default)(_classNames3, classes.iconPointer, this.props.onRightIconClick), _classNames3))
                 });
@@ -388,12 +369,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
                     ),
@@ -527,10 +503,6 @@ HiInput.propTypes = process.env.NODE_ENV !== "production" ? {
      * Icône à afficher à gauche de l'input
      */
     startAdornment: _propTypes2.default.string,
-    /**
-     * Couleur de l'icône à afficher à gauche de l'input
-     */
-    startAdornmentColor: _propTypes2.default.string,
     /**
      * @ignore
      */

package/HiForm/HiPasswordField.js

@@ -63,9 +63,9 @@ var styles = exports.styles = function styles(theme) {
     return {
         inputPassword: {
             fontWeight: 'bolder',
-            fontFamily: 'inherit',
+            fontFamily: 'Verdana, sans-serif',
             letterSpacing: '4px',
-            fontSize: '1.6rem'
+            fontSize: 25
         }
     };
 };
@@ -114,12 +114,7 @@ var HiPasswordField = function (_React$Component) {
             return _react2.default.createElement(_HiTextField2.default, (0, _extends3.default)({}, otherProps, {
                 type: type,
                 onRightIconClick: this.handlePasswordToggle,
-                HiInputProps: (0, _extends3.default)({}, HiInputProps, {
-                    endAdornment: endAdornment,
-                    placeholder: '',
-                    inputClassName: inputClassName,
-                    autocomplete: 'on'
-                })
+                HiInputProps: (0, _extends3.default)({}, HiInputProps, { endAdornment: endAdornment, placeholder: '', inputClassName: inputClassName })
             }));
         }
     }]);

package/HiForm/HiSearchField.js

@@ -40,10 +40,6 @@ var _propTypes = require('prop-types');
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _reactProptypeConditionalRequire = require('react-proptype-conditional-require');
-
-var _reactProptypeConditionalRequire2 = _interopRequireDefault(_reactProptypeConditionalRequire);
-
 var _HiInput = require('../HiForm/HiInput');
 
 var _HiInput2 = _interopRequireDefault(_HiInput);
@@ -141,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('');
             }
         }
     }, {
@@ -173,9 +169,7 @@ HiSearchField.propTypes = process.env.NODE_ENV !== "production" ? {
      *
      * @param {array} suggestions
      */
-    callbackFilteredList: (0, _reactProptypeConditionalRequire2.default)(_propTypes2.default.func, function (props) {
-        return !props.hasOwnProperty('onSearch');
-    }, 'callbackFilteredList required'),
+    callbackFilteredList: _propTypes2.default.func.isRequired,
     /**
      * Liste des propriété de l'élément sur lesquelles filtrer (par défaut l'item lui même)
      */

package/HiForm/index.js

@@ -67,40 +67,4 @@ Object.defineProperty(exports, 'HiSearchField', {
   }
 });
 
-var _HiUpload = require('./HiUpload');
-
-Object.defineProperty(exports, 'HiUpload', {
-  enumerable: true,
-  get: function get() {
-    return _interopRequireDefault(_HiUpload).default;
-  }
-});
-
-var _HiUploadField = require('./HiUploadField');
-
-Object.defineProperty(exports, 'HiUploadField', {
-  enumerable: true,
-  get: function get() {
-    return _interopRequireDefault(_HiUploadField).default;
-  }
-});
-
-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/HiLoader/HiLoader.js

@@ -26,22 +26,15 @@ var styles = exports.styles = function styles() {
 };
 
 function HiLoader(props) {
-    var className = props.className,
-        theme = props.theme,
-        loading = props.loading,
-        _props$size = props.size,
-        size = _props$size === undefined ? 12 : _props$size;
-
-
-    return _react2.default.createElement(
-        'div',
-        { id: 'hi-loader', className: className },
-        _react2.default.createElement(_reactSpinners.PropagateLoader, {
-            loading: loading,
-            size: size,
-            color: theme.palette.business.primary.normal
-        })
-    );
+    var theme = props.theme,
+        loading = props.loading;
+
+
+    return _react2.default.createElement(_reactSpinners.PropagateLoader, {
+        loading: loading,
+        size: 12,
+        color: theme.palette.business.primary.normal
+    });
 }
 
 HiLoader.propTypes = process.env.NODE_ENV !== "production" ? {

package/HiPins/HiPins.js

@@ -37,11 +37,12 @@ var styles = exports.styles = function styles(theme) {
             display: 'inline-block',
             padding: '0 9px',
             height: 16,
-            lineHeight: '18px',
+            lineHeight: '16px',
             minWidth: 25,
             textAlign: 'center',
             borderRadius: '45px',
             verticalAlign: 'middle',
+            margin: 0.5 * theme.spacing.unit,
             fontSize: 11,
             fontWeight: theme.typography.fontWeightMedium,
             fontFamily: theme.typography.fontFamily
@@ -64,15 +65,13 @@ var styles = exports.styles = function styles(theme) {
 
 function HiPins(props) {
     var classes = props.classes,
-        theme = props.theme,
         children = props.children,
-        _props$color = props.color,
-        color = _props$color === undefined ? props.theme.palette.business.primary.normal : _props$color,
+        color = props.color,
         onClick = props.onClick,
         className = props.className;
 
 
-    var textColor = (0, _colorManipulator.getContrastedTextColor)(color, theme.palette.neutral.dark, '#FFF');
+    var textColor = (0, _colorManipulator.getContrastedTextColor)(color, props.theme.palette.neutral.dark, '#FFF');
 
     var divProps = {
         style: { backgroundColor: color, color: textColor }
@@ -94,7 +93,7 @@ HiPins.propTypes = process.env.NODE_ENV !== "production" ? {
     children: _propTypes2.default.node.isRequired,
     classes: _propTypes2.default.object.isRequired,
     className: _propTypes2.default.string,
-    color: _propTypes2.default.string,
+    color: _propTypes2.default.string.isRequired,
     onClick: _propTypes2.default.func
 } : {};
 exports.default = (0, _styles.withStyles)(styles, { withTheme: true, name: 'HmuiHiPins' })(HiPins);