@hipay/hipay-material-ui 1.0.0-beta.1 → 1.0.0-beta.11

package/HiForm/HiFormControl.js

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

package/HiForm/HiInput.js

@@ -5,10 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.styles = undefined;
 
-var _typeof2 = require('babel-runtime/helpers/typeof');
-
-var _typeof3 = _interopRequireDefault(_typeof2);
-
 var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
 
 var _defineProperty3 = _interopRequireDefault(_defineProperty2);
@@ -45,8 +41,6 @@ var _propTypes = require('prop-types');
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _mdiMaterialUi = require('mdi-material-ui');
-
 var _Input = require('material-ui/Input');
 
 var _Input2 = _interopRequireDefault(_Input);
@@ -75,7 +69,7 @@ var styles = exports.styles = function styles(theme) {
             position: 'relative'
         }, theme.typography.body1, {
             borderBottom: '1px solid ' + theme.palette.input.bottomLine,
-            paddingLeft: 1,
+            paddingLeft: 8,
             backgroundColor: '#f5f5f5',
             '&$focused': {
                 backgroundColor: '#ffffff'
@@ -110,18 +104,16 @@ var styles = exports.styles = function styles(theme) {
                 transform: 'scaleX(1)'
             }
         },
+        focused: {},
         error: {
             border: '1px solid ' + theme.palette.negative.normal,
-            paddingLeft: 0,
+            paddingLeft: 8,
             borderRadius: 2
         },
         startAdornment: {
-            position: 'absolute',
-            left: 0,
-            top: '8px',
-            marginLeft: 8,
             color: theme.palette.neutral.normal,
-            zIndex: 1
+            zIndex: 1,
+            marginRight: 8
         },
         startAdornmentFocus: {
             color: theme.palette.neutral.dark
@@ -130,12 +122,9 @@ var styles = exports.styles = function styles(theme) {
             color: theme.palette.neutral.light
         },
         rightIcon: {
-            position: 'absolute',
-            right: 0,
-            top: '11px',
-            marginRight: 11,
-            width: '18px',
-            height: '18px',
+            margin: '0 8px',
+            width: 18,
+            height: 39,
             color: theme.palette.neutral.normal
         },
         rightIconFocus: {
@@ -150,57 +139,36 @@ var styles = exports.styles = function styles(theme) {
         },
         input: (0, _extends3.default)({}, theme.typography.body1, {
             fontWeight: theme.typography.fontWeightRegular,
-            caretColor: theme.palette.business.primary.normal
+            caretColor: theme.palette.business.primary.normal,
+            display: 'flex',
+            alignItems: 'center'
         }),
         inputPropsClassName: (0, _extends3.default)({}, theme.typography.body1, {
-            padding: '0 8px',
-            '&$inputWithStartAdornment': {
-                paddingLeft: 40
-            },
-            '&$inputWithClearIcon': {
-                paddingRight: 32
-            },
-            '&$inputWithRightIcon': {
-                paddingRight: 32
-            },
-            '&$inputWithRightButton': {
-                paddingRight: 140
-            },
-            '&$inputWithClearIcon&$inputWithRightIcon': {
-                paddingRight: 63
-            }
+            padding: 0
         }),
         inputText: {
-            height: 40
+            height: 39
         },
         inputTextarea: {
-            minHeight: 40,
+            minHeight: 39,
             paddingTop: 8
         },
-        inputWithStartAdornment: {},
-        inputWithClearIcon: {},
-        inputWithRightIcon: {},
-        inputWithRightButton: {},
         iconPointer: {
             zIndex: 2,
             cursor: 'pointer'
         },
         eraseButton: {
-            height: 40,
+            height: 39,
             width: 40,
-            '&$inputWithRightIcon,&$inputWithRightButton': {
-                right: 30
-            }
-        },
-        eraseIcon: {
-            width: 18,
-            height: 18,
-            color: theme.palette.neutral.normal
+            display: 'inline-block'
         },
         disabled: {
             borderBottom: 'none'
         },
-        focused: {}
+        endAdornment: {
+            display: 'flex',
+            alignItems: 'center'
+        }
     };
 };
 
@@ -239,8 +207,11 @@ var HiInput = function (_React$PureComponent) {
     }, {
         key: 'handleChange',
         value: function handleChange(event) {
+            var authorizedChar = '1234567890TOto<>';
             if (this.props.onChange) {
-                this.props.onChange(event);
+                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);
+                }
             }
         }
     }, {
@@ -307,14 +278,14 @@ var HiInput = function (_React$PureComponent) {
     }, {
         key: 'render',
         value: function render() {
-            var _classNames, _classNames4, _classNames5;
+            var _classNames, _classNames4;
 
             var _props = this.props,
                 value = _props.value,
                 classes = _props.classes,
                 placeholder = _props.placeholder,
                 startAdornment = _props.startAdornment,
-                endAdornment = _props.endAdornment,
+                endAdornmentProps = _props.endAdornment,
                 className = _props.className,
                 error = _props.error,
                 type = _props.type,
@@ -326,7 +297,8 @@ var HiInput = function (_React$PureComponent) {
                 multiline = _props.multiline,
                 rows = _props.rows,
                 inputClassName = _props.inputClassName,
-                onReset = _props.onReset;
+                onReset = _props.onReset,
+                theme = _props.theme;
             var focused = this.state.focused;
 
 
@@ -350,18 +322,26 @@ var HiInput = function (_React$PureComponent) {
                     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))
                 });
             }
+            // Build endAdornment with eraseIcon + endAdornmentProps
+            var eraseIcon = !multiline && onReset && focused && !disabled && value.length > 0 && _react2.default.createElement(
+                _IconButton2.default,
+                {
+                    className: classes.eraseButton,
+                    onClick: this.handleReset,
+                    onBlur: this.handleBlur
+                },
+                _react2.default.createElement(_HiIconBuilder2.default, { icon: 'close', size: 18, color: theme.palette.neutral.normal })
+            );
 
-            var endElement = void 0;
-            if (typeof endAdornment === 'string' && endAdornment !== '') {
+            var endAdornment = endAdornmentProps;
+            if (typeof endAdornmentProps === 'string' && endAdornmentProps !== '') {
                 var _classNames3;
 
-                endElement = _react2.default.createElement(_HiIconBuilder2.default, {
-                    icon: endAdornment,
+                endAdornment = _react2.default.createElement(_HiIconBuilder2.default, {
+                    icon: endAdornmentProps,
                     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))
                 });
-            } else if ((typeof endAdornment === 'undefined' ? 'undefined' : (0, _typeof3.default)(endAdornment)) === 'object') {
-                endElement = endAdornment;
             }
 
             return _react2.default.createElement(
@@ -370,7 +350,7 @@ var HiInput = function (_React$PureComponent) {
                 _react2.default.createElement(_Input2.default, {
                     id: inputId,
                     type: type,
-                    className: (0, _classnames2.default)(classes.input),
+                    className: classes.input,
                     disableUnderline: true,
                     onChange: this.handleChange,
                     value: value,
@@ -387,24 +367,16 @@ var HiInput = function (_React$PureComponent) {
                     autoFocus: autoFocus,
                     name: name,
                     startAdornment: leftIcon,
+                    endAdornment: _react2.default.createElement(
+                        'div',
+                        { className: classes.endAdornment },
+                        eraseIcon,
+                        endAdornment
+                    ),
                     inputProps: {
-                        className: (0, _classnames2.default)(inputClassName, classes.inputPropsClassName, (_classNames4 = {}, (0, _defineProperty3.default)(_classNames4, classes.inputWithClearIcon, onReset), (0, _defineProperty3.default)(_classNames4, classes.inputWithStartAdornment, startAdornment !== ''), (0, _defineProperty3.default)(_classNames4, classes.inputWithRightIcon, typeof endAdornment === 'string' && endAdornment !== ''), (0, _defineProperty3.default)(_classNames4, classes.inputWithRightButton, (typeof endAdornment === 'undefined' ? 'undefined' : (0, _typeof3.default)(endAdornment)) === 'object'), (0, _defineProperty3.default)(_classNames4, classes.inputText, !multiline), (0, _defineProperty3.default)(_classNames4, classes.inputTextarea, multiline), _classNames4))
+                        className: (0, _classnames2.default)(inputClassName, classes.inputPropsClassName, (_classNames4 = {}, (0, _defineProperty3.default)(_classNames4, classes.inputText, !multiline), (0, _defineProperty3.default)(_classNames4, classes.inputTextarea, multiline), _classNames4))
                     }
-                }),
-                !multiline && (endAdornment || onReset && !disabled) && _react2.default.createElement(
-                    'div',
-                    { style: { position: 'absolute', top: 0, right: 0, maxHeight: 40 } },
-                    !disabled && onReset && value.length > 0 && focused && _react2.default.createElement(
-                        _IconButton2.default,
-                        {
-                            className: (0, _classnames2.default)(classes.eraseButton, (_classNames5 = {}, (0, _defineProperty3.default)(_classNames5, classes.inputWithRightIcon, typeof endAdornment === 'string' && endAdornment !== ''), (0, _defineProperty3.default)(_classNames5, classes.inputWithRightButton, (typeof endAdornment === 'undefined' ? 'undefined' : (0, _typeof3.default)(endAdornment)) === 'object'), _classNames5)),
-                            onClick: this.handleReset,
-                            onBlur: this.handleBlur
-                        },
-                        _react2.default.createElement(_mdiMaterialUi.Close, { className: classes.eraseIcon })
-                    ),
-                    endAdornment && endElement
-                )
+                })
             );
         }
     }]);
@@ -420,7 +392,8 @@ HiInput.defaultProps = {
     endAdornment: '',
     type: 'text',
     multiline: false,
-    error: false
+    error: false,
+    onlyNumbers: false
 };
 HiInput.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -446,6 +419,10 @@ HiInput.propTypes = process.env.NODE_ENV !== "production" ? {
      * Rendre le champs désactivé
      */
     disabled: _propTypes2.default.bool,
+    /**
+     * Elément à afficher à droite de l'input, peut être un string ou un node
+     */
+    endAdornment: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.node]),
     /**
      * Si `true`, le champs input sera affiché en erreur.
      */
@@ -462,18 +439,6 @@ HiInput.propTypes = process.env.NODE_ENV !== "production" ? {
      * Passe une ref callback au composant input
      */
     inputRef: _propTypes2.default.func,
-    /**
-     * Icône à afficher à gauche de l'input
-     */
-    startAdornment: _propTypes2.default.string,
-    /**
-     * Icône à afficher à droite de l'input
-     */
-    endAdornment: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.node]),
-    /**
-     * Affiche un bouton à droite de l'input (Si true, pas de endAdornment)
-     */
-    endButton: _propTypes2.default.bool,
     /**
      * Si `true`, le champs input sera un textarea
      */
@@ -502,6 +467,10 @@ 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
      */
@@ -526,14 +495,18 @@ HiInput.propTypes = process.env.NODE_ENV !== "production" ? {
      * Placeholder
      */
     placeholder: _propTypes2.default.string,
-    /**
-     * Icône à afficher à droite de l'input
-     */
-    rightIcon: _propTypes2.default.string,
     /**
      * Nombre de lignes pour les textArea
      */
     rows: _propTypes2.default.number,
+    /**
+     * Icône à afficher à gauche de l'input
+     */
+    startAdornment: _propTypes2.default.string,
+    /**
+     * @ignore
+     */
+    theme: _propTypes2.default.object,
     /**
      * Type du champs input. Doit être un type HTML5 valide.
      */
@@ -543,4 +516,4 @@ HiInput.propTypes = process.env.NODE_ENV !== "production" ? {
      */
     value: _propTypes2.default.string
 } : {};
-exports.default = (0, _withStyles2.default)(styles, { name: 'HmuiHiInput' })(HiInput);
+exports.default = (0, _withStyles2.default)(styles, { name: 'HiMuiHiInput', withTheme: true })(HiInput);

package/HiForm/HiSearchField.js

@@ -124,7 +124,7 @@ var HiSearchField = function (_React$Component) {
 
                 this.props.callbackFilteredList(filteredList);
             } else {
-                this.props.onSearch(searchedValue);
+                this.props.onSearch(event, 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('');
+                this.props.onSearch(undefined, '');
             }
         }
     }, {

package/HiForm/index.js

@@ -67,4 +67,13 @@ Object.defineProperty(exports, 'HiSearchField', {
   }
 });
 
+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 }; }