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

package/HiForm/HiAddressField.js

@@ -0,0 +1,187 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
+
+var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
+
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
+
+var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _HiSuggestSelectField = require('../HiSelect/HiSuggestSelectField');
+
+var _HiSuggestSelectField2 = _interopRequireDefault(_HiSuggestSelectField);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * Champs input adresse pour formulaire
+ */
+var HiAddressField = function (_React$Component) {
+    (0, _inherits3.default)(HiAddressField, _React$Component);
+
+    function HiAddressField(props) {
+        (0, _classCallCheck3.default)(this, HiAddressField);
+
+        var _this = (0, _possibleConstructorReturn3.default)(this, (HiAddressField.__proto__ || (0, _getPrototypeOf2.default)(HiAddressField)).call(this, props));
+
+        _this.displaySuggestions = function (predictions) {
+            // Sinon je mets à jour les options du champ avec les prédictions de GMaps
+            var options = [];
+            var isExact = false;
+            predictions.forEach(function (prediction) {
+                // Si le texte saisi est identique à une des propositions,
+                // on estime que la valeur de l'adresse est exacte,
+                // même sans clic sur une proposition
+                isExact = prediction.display_name === _this.value ? true : isExact;
+                // liste des types d'adresse : https://github.com/openstreetmap/Nominatim/blob/80df4d3b560f5b1fd550dcf8cdc09a992b69fee0/settings/partitionedtags.def
+                options.push({
+                    id: prediction.place_id,
+                    label: prediction.display_name,
+                    labelHighlight: prediction.display_name.replace(new RegExp(_this.value, 'gi'), '<strong>$&</strong>'),
+                    icon: ['amenity', 'building'].includes(prediction.category) ? 'domain' : 'map_marker',
+                    type: 'icon',
+                    key: prediction.id
+                });
+            }, _this);
+            _this.setState({ options: options, isExact: isExact });
+        };
+
+        _this.state = {
+            options: [],
+            isExact: false
+        };
+
+        _this.handleSearch = _this.handleSearch.bind(_this);
+        _this.handleSelect = _this.handleSelect.bind(_this);
+        _this.handleReset = _this.handleReset.bind(_this);
+        _this.displaySuggestions = _this.displaySuggestions.bind(_this);
+        return _this;
+    }
+
+    (0, _createClass3.default)(HiAddressField, [{
+        key: 'handleReset',
+        value: function handleReset() {
+            this.props.onReset();
+            this.setState({
+                options: [],
+                isExact: false
+            });
+        }
+    }, {
+        key: 'handleSearch',
+        value: function handleSearch(event) {
+            var _this2 = this;
+
+            // Je vérifie que le champ n'est pas vide car l'API lève une exception en cas d'input vide
+            if (event.target.value) {
+                // À chaque changement, la méthode getPlacesPredictions appelle la méthode
+                // displaySuggestions en lui fournissant un tableau de 5 prédictions
+                this.value = event.target.value;
+                var xhr = new XMLHttpRequest();
+                xhr.onreadystatechange = function () {
+                    if (xhr.readyState === XMLHttpRequest.DONE) {
+                        var response = JSON.parse(xhr.responseText);
+                        _this2.displaySuggestions(response, 'OK');
+                    }
+                };
+                xhr.open('GET', 'https://nominatim.openstreetmap.org/search?q=' + event.target.value + '&format=jsonv2&limit=5&bounded=1&dedupe=1&namedetails=1', true);
+                xhr.setRequestHeader('Content-type', 'application/json');
+                xhr.send();
+            }
+            this.props.onSearch(event);
+            // Mise à jour du texte dans l'input
+            this.setState((0, _extends3.default)({}, !event.target.value && {
+                options: []
+            }));
+        }
+    }, {
+        key: 'handleSelect',
+        value: function handleSelect(event, value) {
+            // Mise à jour de la valeur du champ + la valeur de l'adresse est exacte
+            this.setState({ options: [], isExact: true });
+            this.props.onSelect(event, value.label);
+        }
+    }, {
+        key: 'render',
+        value: function render() {
+            var _props = this.props,
+                exactOnly = _props.exactOnly,
+                onSearch = _props.onSearch,
+                onReset = _props.onReset,
+                onSelect = _props.onSelect,
+                otherProps = (0, _objectWithoutProperties3.default)(_props, ['exactOnly', 'onSearch', 'onReset', 'onSelect']);
+            var _state = this.state,
+                options = _state.options,
+                isExact = _state.isExact;
+
+            // On met le champ en erreur si une adresse exacte est éxigée
+            // et si l'adresse courante n'est pas complète
+
+            var showError = exactOnly && !isExact;
+
+            return _react2.default.createElement(_HiSuggestSelectField2.default, (0, _extends3.default)({
+                options: options,
+                onSearch: this.handleSearch,
+                onReset: this.handleReset,
+                onSelect: this.handleSelect,
+                isExact: isExact,
+                error: showError
+            }, otherProps));
+        }
+    }]);
+    return HiAddressField;
+}(_react2.default.Component); // @inheritedComponent HiSuggestSelectField
+
+HiAddressField.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Est-ce qu'on n'accepte que les adresses trouvées par GMaps
+     */
+    exactOnly: _propTypes2.default.bool,
+    /**
+     *  Callback function called to empty the field.
+     */
+    onReset: _propTypes2.default.func,
+    /**
+     *  Callback function called when we write in the input.
+     */
+    onSearch: _propTypes2.default.func,
+    /**
+     *  Callback function called when a suggestion is selected.
+     */
+    onSelect: _propTypes2.default.func
+} : {};
+
+exports.default = HiAddressField;

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

@@ -70,7 +70,7 @@ var styles = exports.styles = function styles(theme) {
         }, theme.typography.body1, {
             borderBottom: '1px solid ' + theme.palette.input.bottomLine,
             paddingLeft: 8,
-            backgroundColor: '#f5f5f5',
+            backgroundColor: theme.palette.background2,
             '&$focused': {
                 backgroundColor: '#ffffff'
             },
@@ -107,7 +107,7 @@ var styles = exports.styles = function styles(theme) {
         focused: {},
         error: {
             border: '1px solid ' + theme.palette.negative.normal,
-            paddingLeft: 0,
+            paddingLeft: 8,
             borderRadius: 2
         },
         startAdornment: {
@@ -122,9 +122,8 @@ var styles = exports.styles = function styles(theme) {
             color: theme.palette.neutral.light
         },
         rightIcon: {
-            margin: '0 8px',
             width: 18,
-            height: 40,
+            height: 39,
             color: theme.palette.neutral.normal
         },
         rightIconFocus: {
@@ -135,7 +134,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: 10
+            marginRight: '-1px'
         },
         input: (0, _extends3.default)({}, theme.typography.body1, {
             fontWeight: theme.typography.fontWeightRegular,
@@ -147,10 +146,10 @@ var styles = exports.styles = function styles(theme) {
             padding: 0
         }),
         inputText: {
-            height: 40
+            height: 39
         },
         inputTextarea: {
-            minHeight: 40,
+            minHeight: 39,
             paddingTop: 8
         },
         iconPointer: {
@@ -158,7 +157,7 @@ var styles = exports.styles = function styles(theme) {
             cursor: 'pointer'
         },
         eraseButton: {
-            height: 40,
+            height: 39,
             width: 40,
             display: 'inline-block'
         },
@@ -207,8 +206,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);
+                }
             }
         }
     }, {
@@ -235,20 +237,28 @@ var HiInput = function (_React$PureComponent) {
     }, {
         key: 'handleFocus',
         value: function handleFocus(event) {
-            if (!this.state.focused) {
-                this.setState({ focused: true });
-            }
-            if (this.props.onFocus) {
-                this.props.onFocus(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);
+                }
             }
         }
     }, {
         key: 'handleDivClick',
-        value: function handleDivClick() {
-            if (!this.state.focused) {
-                this.setState({ focused: true });
+        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();
             }
-            this.inputElement.focus();
         }
     }, {
         key: 'handleMouseEnter',
@@ -275,7 +285,9 @@ var HiInput = function (_React$PureComponent) {
     }, {
         key: 'render',
         value: function render() {
-            var _classNames, _classNames4;
+            var _classNames,
+                _this2 = this,
+                _classNames4;
 
             var _props = this.props,
                 value = _props.value,
@@ -315,6 +327,8 @@ var HiInput = function (_React$PureComponent) {
 
                 leftIcon = _react2.default.createElement(_HiIconBuilder2.default, {
                     icon: startAdornment,
+                    size: 36,
+                    style: { padding: '8px' },
                     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))
                 });
@@ -327,7 +341,7 @@ var HiInput = function (_React$PureComponent) {
                     onClick: this.handleReset,
                     onBlur: this.handleBlur
                 },
-                _react2.default.createElement(_HiIconBuilder2.default, { icon: 'close', size: 18, color: theme.palette.neutral.normal })
+                _react2.default.createElement(_HiIconBuilder2.default, { icon: 'close', size: 36, color: theme.palette.neutral.normal, style: { padding: '8px' } })
             );
 
             var endAdornment = endAdornmentProps;
@@ -336,6 +350,8 @@ 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))
                 });
@@ -366,7 +382,12 @@ var HiInput = function (_React$PureComponent) {
                     startAdornment: leftIcon,
                     endAdornment: _react2.default.createElement(
                         'div',
-                        { className: classes.endAdornment },
+                        {
+                            className: classes.endAdornment,
+                            ref: function ref(el) {
+                                return _this2.endAdornmentNode = el;
+                            }
+                        },
                         eraseIcon,
                         endAdornment
                     ),
@@ -389,7 +410,8 @@ HiInput.defaultProps = {
     endAdornment: '',
     type: 'text',
     multiline: false,
-    error: false
+    error: false,
+    onlyNumbers: false
 };
 HiInput.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -463,6 +485,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
      */

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, '');
             }
         }
     }, {