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

package/es/HiForm/HiAddressField.js

@@ -0,0 +1,142 @@
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+import _extends from 'babel-runtime/helpers/extends';
+// @inheritedComponent HiSuggestSelectField
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import HiSuggestSelectField from '../HiSelect/HiSuggestSelectField';
+
+/**
+ * Champs input adresse pour formulaire
+ */
+class HiAddressField extends React.Component {
+    constructor(props) {
+        super(props);
+        this.autocompleteService = null;
+
+        this.displaySuggestions = (predictions, status) => {
+            if (status !== 'OK') {
+                // Si l'API renvoie un statut différent de 'OK'
+                // (par exemple ZERO_RESULTS), pas de prédictions
+            } else {
+                // Sinon je mets à jour les options du champ avec les prédictions de GMaps
+                const options = [];
+                let isExact = false;
+                predictions.forEach(prediction => {
+                    // Si le texte saisi est identique à une des propositions de GMaps,
+                    // on estime que la valeur de l'adresse est exacte,
+                    // même sans clic sur une proposition
+                    isExact = prediction.description === this.value ? true : isExact;
+                    options.push({
+                        id: prediction.id,
+                        label: prediction.description,
+                        labelHighlight: prediction.description.replace(new RegExp(this.value, 'gi'), '<strong>$&</strong>'),
+                        icon: prediction.types.indexOf('establishment') >= 0 ? 'domain' : 'map_marker',
+                        type: 'icon'
+                    });
+                }, this);
+                this.setState({ options, 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);
+    }
+
+    /**
+     * Au chargement du composant, je définis mon service autocomplete GMaps
+     */
+    componentDidMount() {
+        this.autocompleteService = new google.maps.places.AutocompleteService();
+    }
+
+    handleReset() {
+        this.props.onReset();
+        this.setState({
+            options: [],
+            isExact: false
+        });
+    }
+
+    handleSearch(event) {
+        // 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) {
+            // Liste des types à rechercher. Voir https://developers.google.com/places/web-service/autocomplete?hl=fr#place_types (ex : ['establishement', 'address']
+            const types = [];
+            // Liste des codes ISO Alpha-2 des pays où il faut rechercher (ex : ['fr', 'us'])
+            const countries = [];
+            // À 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;
+            if (this.autocompleteService) {
+                this.autocompleteService.getPlacePredictions({
+                    input: event.target.value,
+                    types,
+                    componentRestrictions: { country: countries }
+                }, this.displaySuggestions);
+            } else {
+                // Dans le cas où le service ne peut pas se charger (mode test par exemple).
+                this.displaySuggestions([], 'EMPTY_RESULT');
+            }
+        }
+        this.props.onSearch(event);
+        // Mise à jour du texte dans l'input
+        this.setState(_extends({}, !event.target.value && {
+            options: []
+        }));
+    }
+
+    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);
+    }
+
+    render() {
+        const _props = this.props,
+              { exactOnly, onSearch, onReset, onSelect } = _props,
+              otherProps = _objectWithoutProperties(_props, ['exactOnly', 'onSearch', 'onReset', 'onSelect']);
+        const { options, isExact } = this.state;
+
+        // On met le champ en erreur si une adresse exacte est éxigée
+        // et si l'adresse courante n'est pas complète
+        const showError = exactOnly && !isExact;
+
+        return React.createElement(HiSuggestSelectField, _extends({
+            options: options,
+            onSearch: this.handleSearch,
+            onReset: this.handleReset,
+            onSelect: this.handleSelect,
+            isExact: isExact,
+            error: showError
+        }, otherProps));
+    }
+}
+
+HiAddressField.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Est-ce qu'on n'accepte que les adresses trouvées par GMaps
+     */
+    exactOnly: PropTypes.bool,
+    /**
+     *  Callback function called to empty the field.
+     */
+    onReset: PropTypes.func,
+    /**
+     *  Callback function called when we write in the input.
+     */
+    onSearch: PropTypes.func,
+    /**
+     *  Callback function called when a suggestion is selected.
+     */
+    onSelect: PropTypes.func
+} : {};
+
+export default HiAddressField;

package/es/HiForm/HiFormControl.js

@@ -9,6 +9,7 @@ import { Alert, Information } from 'mdi-material-ui';
 import { FormControl, FormHelperText } from 'material-ui/Form';
 import withStyles from '../styles/withStyles';
 import HiFormLabel from './HiFormLabel';
+import { escapeHTML } from "../utils/hiHelpers";
 
 export const styles = theme => ({
     helperTextClassName: {
@@ -62,7 +63,7 @@ export const styles = theme => ({
         color: theme.palette.business.primary.normal
     },
     helperDiv: _extends({}, theme.typography.h5, {
-        width: 'calc(100% - 16px)',
+        width: '100%',
         backgroundColor: '#ffffff',
         color: theme.palette.neutral.dark,
         padding: '16px 8px',
@@ -70,7 +71,8 @@ export const 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'
@@ -85,6 +87,17 @@ class HiFormControl extends React.PureComponent {
     constructor(props) {
         super(props);
 
+        this.handleFocus = value => () => {
+            this.setState({ focused: value });
+            if (value === false && this.state.hovered) {
+                this.setState({ hovered: false });
+            }
+        };
+
+        this.handleHover = value => () => {
+            this.setState({ hovered: value });
+        };
+
         this.state = {
             helperOpen: false,
             focused: false,
@@ -96,16 +109,11 @@ class HiFormControl extends React.PureComponent {
         this.handleHover = this.handleHover.bind(this);
     }
 
-    handleHelperClick() {
+    handleHelperClick(event) {
         this.setState(prevState => ({ helperOpen: !prevState.helperOpen }));
-    }
-
-    handleFocus(value) {
-        this.setState({ focused: value });
-    }
-
-    handleHover(value) {
-        this.setState({ hovered: value });
+        if (event) {
+            event.preventDefault();
+        }
     }
 
     render() {
@@ -152,11 +160,17 @@ class HiFormControl extends React.PureComponent {
             ),
             !disabled && helperIcon && helperText && !error && helperOpen && React.createElement(
                 'div',
-                { className: classes.helperDiv },
+                {
+                    className: classes.helperDiv
+                },
                 React.createElement('div', {
                     className: classNames(classes.arrowDown, classes.helperDivArrowDown)
+
                 }),
-                helperText
+                React.createElement('span', {
+                    dangerouslySetInnerHTML: {
+                        __html: escapeHTML(helperText)
+                    } })
             ),
             label && React.createElement(
                 HiFormLabel,
@@ -165,7 +179,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,
@@ -181,10 +195,10 @@ class HiFormControl extends React.PureComponent {
             React.createElement(
                 'div',
                 {
-                    onMouseEnter: () => this.handleHover(true),
-                    onMouseLeave: () => this.handleHover(false),
-                    onFocus: () => this.handleFocus(true),
-                    onBlur: () => this.handleFocus(false)
+                    onMouseEnter: this.handleHover(true),
+                    onMouseLeave: this.handleHover(false),
+                    onFocus: this.handleFocus(true),
+                    onBlur: this.handleFocus(false)
                 },
                 children
             ),

package/es/HiForm/HiInput.js

@@ -1,7 +1,6 @@
 import _extends from 'babel-runtime/helpers/extends';
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Close } from 'mdi-material-ui';
 import Input from 'material-ui/Input';
 import IconButton from 'material-ui/IconButton';
 import classNames from 'classnames';
@@ -13,7 +12,7 @@ export const styles = theme => ({
         position: 'relative'
     }, theme.typography.body1, {
         borderBottom: `1px solid ${theme.palette.input.bottomLine}`,
-        paddingLeft: 1,
+        paddingLeft: 8,
         backgroundColor: '#f5f5f5',
         '&$focused': {
             backgroundColor: '#ffffff'
@@ -48,18 +47,16 @@ export const 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
@@ -68,12 +65,9 @@ export const 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: {
@@ -88,57 +82,36 @@ export const styles = theme => ({
     },
     input: _extends({}, theme.typography.body1, {
         fontWeight: theme.typography.fontWeightRegular,
-        caretColor: theme.palette.business.primary.normal
+        caretColor: theme.palette.business.primary.normal,
+        display: 'flex',
+        alignItems: 'center'
     }),
     inputPropsClassName: _extends({}, 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'
+    }
 });
 
 class HiInput extends React.PureComponent {
@@ -169,8 +142,11 @@ class HiInput extends React.PureComponent {
     }
 
     handleChange(event) {
+        const 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);
+            }
         }
     }
 
@@ -234,7 +210,7 @@ class HiInput extends React.PureComponent {
             classes,
             placeholder,
             startAdornment,
-            endAdornment,
+            endAdornment: endAdornmentProps,
             className,
             error,
             type,
@@ -246,7 +222,8 @@ class HiInput extends React.PureComponent {
             multiline,
             rows,
             inputClassName,
-            onReset
+            onReset,
+            theme
         } = this.props;
 
         const { focused } = this.state;
@@ -278,11 +255,21 @@ class HiInput extends React.PureComponent {
                 })
             });
         }
+        // Build endAdornment with eraseIcon + endAdornmentProps
+        const eraseIcon = !multiline && onReset && focused && !disabled && value.length > 0 && React.createElement(
+            IconButton,
+            {
+                className: classes.eraseButton,
+                onClick: this.handleReset,
+                onBlur: this.handleBlur
+            },
+            React.createElement(HiIconBuilder, { icon: 'close', size: 18, color: theme.palette.neutral.normal })
+        );
 
-        let endElement;
-        if (typeof endAdornment === 'string' && endAdornment !== '') {
-            endElement = React.createElement(HiIconBuilder, {
-                icon: endAdornment,
+        let endAdornment = endAdornmentProps;
+        if (typeof endAdornmentProps === 'string' && endAdornmentProps !== '') {
+            endAdornment = React.createElement(HiIconBuilder, {
+                icon: endAdornmentProps,
                 onClick: this.props.onRightIconClick,
                 className: classNames(classes.rightIcon, {
                     [classes.rightIconFocus]: focused,
@@ -291,8 +278,6 @@ class HiInput extends React.PureComponent {
                     [classes.iconPointer]: this.props.onRightIconClick
                 })
             });
-        } else if (typeof endAdornment === 'object') {
-            endElement = endAdornment;
         }
 
         return React.createElement(
@@ -301,7 +286,7 @@ class HiInput extends React.PureComponent {
             React.createElement(Input, {
                 id: inputId,
                 type: type,
-                className: classNames(classes.input),
+                className: classes.input,
                 disableUnderline: true,
                 onChange: this.handleChange,
                 value: value,
@@ -318,34 +303,19 @@ class HiInput extends React.PureComponent {
                 autoFocus: autoFocus,
                 name: name,
                 startAdornment: leftIcon,
+                endAdornment: React.createElement(
+                    'div',
+                    { className: classes.endAdornment },
+                    eraseIcon,
+                    endAdornment
+                ),
                 inputProps: {
                     className: classNames(inputClassName, classes.inputPropsClassName, {
-                        [classes.inputWithClearIcon]: onReset,
-                        [classes.inputWithStartAdornment]: startAdornment !== '',
-                        [classes.inputWithRightIcon]: typeof endAdornment === 'string' && endAdornment !== '',
-                        [classes.inputWithRightButton]: typeof endAdornment === 'object',
                         [classes.inputText]: !multiline,
                         [classes.inputTextarea]: multiline
                     })
                 }
-            }),
-            !multiline && (endAdornment || onReset && !disabled) && React.createElement(
-                'div',
-                { style: { position: 'absolute', top: 0, right: 0, maxHeight: 40 } },
-                !disabled && onReset && value.length > 0 && focused && React.createElement(
-                    IconButton,
-                    {
-                        className: classNames(classes.eraseButton, {
-                            [classes.inputWithRightIcon]: typeof endAdornment === 'string' && endAdornment !== '',
-                            [classes.inputWithRightButton]: typeof endAdornment === 'object'
-                        }),
-                        onClick: this.handleReset,
-                        onBlur: this.handleBlur
-                    },
-                    React.createElement(Close, { className: classes.eraseIcon })
-                ),
-                endAdornment && endElement
-            )
+            })
         );
     }
 }
@@ -359,7 +329,8 @@ HiInput.defaultProps = {
     endAdornment: '',
     type: 'text',
     multiline: false,
-    error: false
+    error: false,
+    onlyNumbers: false
 };
 HiInput.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -385,6 +356,10 @@ HiInput.propTypes = process.env.NODE_ENV !== "production" ? {
      * Rendre le champs désactivé
      */
     disabled: PropTypes.bool,
+    /**
+     * Elément à afficher à droite de l'input, peut être un string ou un node
+     */
+    endAdornment: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
     /**
      * Si `true`, le champs input sera affiché en erreur.
      */
@@ -401,18 +376,6 @@ HiInput.propTypes = process.env.NODE_ENV !== "production" ? {
      * Passe une ref callback au composant input
      */
     inputRef: PropTypes.func,
-    /**
-     * Icône à afficher à gauche de l'input
-     */
-    startAdornment: PropTypes.string,
-    /**
-     * Icône à afficher à droite de l'input
-     */
-    endAdornment: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    /**
-     * Affiche un bouton à droite de l'input (Si true, pas de endAdornment)
-     */
-    endButton: PropTypes.bool,
     /**
      * Si `true`, le champs input sera un textarea
      */
@@ -441,6 +404,10 @@ HiInput.propTypes = process.env.NODE_ENV !== "production" ? {
      * Fonction de callback appelée lorsqu'on clic sur l'icône de gauche
      */
     onLeftIconClick: PropTypes.func,
+    /**
+     * Pour les input de type number (permet de bloquer la saisie des caractères non autorisés)
+     */
+    onlyNumbers: PropTypes.bool,
     /**
      * Fonction de callback appelée lorsqu'on survole le champs
      */
@@ -465,14 +432,18 @@ HiInput.propTypes = process.env.NODE_ENV !== "production" ? {
      * Placeholder
      */
     placeholder: PropTypes.string,
-    /**
-     * Icône à afficher à droite de l'input
-     */
-    rightIcon: PropTypes.string,
     /**
      * Nombre de lignes pour les textArea
      */
     rows: PropTypes.number,
+    /**
+     * Icône à afficher à gauche de l'input
+     */
+    startAdornment: PropTypes.string,
+    /**
+     * @ignore
+     */
+    theme: PropTypes.object,
     /**
      * Type du champs input. Doit être un type HTML5 valide.
      */
@@ -482,4 +453,4 @@ HiInput.propTypes = process.env.NODE_ENV !== "production" ? {
      */
     value: PropTypes.string
 } : {};
-export default withStyles(styles, { name: 'HmuiHiInput' })(HiInput);
+export default withStyles(styles, { name: 'HiMuiHiInput', withTheme: true })(HiInput);

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);
         }
     }
 
@@ -85,7 +85,7 @@ class HiSearchField extends React.Component {
         if (typeof this.props.onSearch === 'undefined') {
             this.props.callbackFilteredList(this.props.itemList);
         } else {
-            this.props.onSearch('');
+            this.props.onSearch(undefined, '');
         }
     }
 

package/es/HiForm/index.js

@@ -4,4 +4,5 @@ export { default as HiFormLabel } from './HiFormLabel';
 export { default as HiInput } from './HiInput';
 export { default as HiPasswordField } from './HiPasswordField';
 export { default as HiTextField } from './HiTextField';
-export { default as HiSearchField } from './HiSearchField';
+export { default as HiSearchField } from './HiSearchField';
+export { default as HiAddressField } from './HiAddressField';