@hipay/hipay-material-ui 1.0.0-beta.8 → 2.0.0-beta.35

package/es/HiForm/HiPasswordField.js

@@ -1,70 +1,78 @@
-import _extends from 'babel-runtime/helpers/extends';
-import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+import _extends from "@babel/runtime/helpers/extends";
+import _objectSpread from "@babel/runtime/helpers/objectSpread";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 // @inheritedComponent HiTextField
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import withStyles from '../styles/withStyles';
 import HiTextField from './HiTextField';
-
-export const styles = theme => ({
-    inputPassword: {
-        fontWeight: 'bolder',
-        fontFamily: 'Verdana, sans-serif',
-        letterSpacing: '4px',
-        fontSize: 25
-    }
+export const styles = () => ({
+  inputPassword: {
+    fontWeight: 'bolder',
+    fontFamily: 'inherit',
+    letterSpacing: '4px',
+    fontSize: '1.6rem'
+  }
 });
-
 /**
  * Champs input email pour formulaire
  */
-class HiPasswordField extends React.Component {
 
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            showText: false
-        };
-
-        this.handlePasswordToggle = this.handlePasswordToggle.bind(this);
-    }
+class HiPasswordField extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showText: false
+    };
+    this.handlePasswordToggle = this.handlePasswordToggle.bind(this);
+  }
 
-    handlePasswordToggle() {
-        this.setState({
-            showText: !this.state.showText
-        });
-    }
+  handlePasswordToggle() {
+    this.setState(prevState => ({
+      showText: !prevState.showText
+    }));
+  }
 
-    render() {
-        const _props = this.props,
-              { classes, HiInputProps } = _props,
-              otherProps = _objectWithoutProperties(_props, ['classes', 'HiInputProps']);
-        const endAdornment = this.state.showText ? 'EyeOffOutline' : 'Eye';
-        const type = this.state.showText ? 'text' : 'password';
+  render() {
+    const _this$props = this.props,
+          {
+      classes,
+      HiInputProps
+    } = _this$props,
+          otherProps = _objectWithoutProperties(_this$props, ["classes", "HiInputProps"]);
 
-        const inputClassName = classNames({
-            [classes.inputPassword]: !this.state.showText
-        });
+    const endAdornment = this.state.showText ? 'visibility_off' : 'visibility';
+    const type = this.state.showText ? 'text' : 'password';
+    const inputClassName = classNames({
+      [classes.inputPassword]: !this.state.showText
+    });
+    return React.createElement(HiTextField, _extends({}, otherProps, {
+      type: type,
+      onRightIconClick: this.handlePasswordToggle,
+      HiInputProps: _objectSpread({}, HiInputProps, {
+        endAdornment,
+        placeholder: '',
+        inputClassName,
+        autocomplete: 'on'
+      })
+    }));
+  }
 
-        return React.createElement(HiTextField, _extends({}, otherProps, {
-            type: type,
-            onRightIconClick: this.handlePasswordToggle,
-            HiInputProps: _extends({}, HiInputProps, { endAdornment, placeholder: '', inputClassName })
-        }));
-    }
 }
 
 HiPasswordField.propTypes = process.env.NODE_ENV !== "production" ? {
-    /**
-     * Useful to extend the style applied to components.
-     */
-    classes: PropTypes.object,
-    /**
-     * Fonction de callback appelée lorsqu'on clique sur l'icone "Eye"
-     */
-    handlePasswordToggle: PropTypes.func
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object,
+
+  /**
+   * Fonction de callback appelée lorsqu'on clique sur l'icone "Eye"
+   */
+  handlePasswordToggle: PropTypes.func
 } : {};
-export default withStyles(styles, { name: 'HmuiHiPasswordField' })(HiPasswordField);
+export default withStyles(styles, {
+  hiComponent: true,
+  name: 'HmuiHiPasswordField'
+})(HiPasswordField);

package/es/HiForm/HiSearchField.js

@@ -1,135 +1,148 @@
-import _extends from 'babel-runtime/helpers/extends';
-import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import React from 'react';
 import PropTypes from 'prop-types';
-import HiInput from '../HiForm/HiInput';
-
+import HiInput from './HiInput';
 /**
  * Construit une barre de recherche avec icône Search (Magnify),
  * permet de filtrer une liste d'éléments en spécifiant le nom de la/les propriétés sur lesquelles filtrer,
  * retour la liste d'élément filtré.
  * Un bouton reset s'affiche à la saisie permettant de réinitialiser l'input.
  */
+
 class HiSearchField extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      inputValue: ''
+    };
+    this.filterOnProperties = this.filterOnProperties.bind(this);
+    this.handleChange = this.handleChange.bind(this);
+    this.handleReset = this.handleReset.bind(this);
+  }
 
-    constructor(props) {
-        super(props);
+  filterOnProperties(item, search) {
+    if (!this.props.filterPropertyList || this.props.filterPropertyList.length < 1) {
+      // If no properties specify, search on item
+      return item.toString().toLowerCase().search(search.toLowerCase()) !== -1;
+    }
 
-        this.state = {
-            inputValue: ''
-        };
+    let searchSucceed = false;
+    this.props.filterPropertyList.forEach(filter => {
+      let itemProperty = null;
 
-        this.handleChange = this.handleChange.bind(this);
-        this.handleReset = this.handleReset.bind(this);
-    }
+      if (filter.indexOf('.') > 0) {
+        itemProperty = item[filter.split('.')[0]][filter.split('.')[1]];
+      } else {
+        itemProperty = item[filter];
+      }
 
-    filterOnProperties(item, search, properties) {
-        if (typeof properties === 'undefined' || properties.length < 1) {
-            // If no properties specify, search on item
-            return item.toString().toLowerCase().search(search.toLowerCase()) !== -1;
-        }
-        let searchSucceed = false;
-        properties.forEach(filter => {
-            let itemProperty = null;
-            if (filter.indexOf('.') > 0) {
-                itemProperty = item[filter.split('.')[0]][filter.split('.')[1]];
-            } else {
-                itemProperty = item[filter];
-            }
-            if (itemProperty.toString().toLowerCase().search(search.toLowerCase()) !== -1) {
-                searchSucceed = true;
-            }
-        });
-        return searchSucceed;
+      if (itemProperty.toString().toLowerCase().search(search.toLowerCase()) !== -1) {
+        searchSucceed = true;
+      }
+    });
+    return searchSucceed;
+  }
+
+  handleChange(event, inputValue) {
+    let searchedValue;
+
+    if (typeof inputValue !== 'undefined' && typeof event.target.value === 'undefined') {
+      searchedValue = inputValue;
+    } else {
+      searchedValue = event.target.value;
     }
 
-    handleChange(event, inputValue) {
-        let searchedValue;
-        if (typeof inputValue !== 'undefined' && typeof event.target.value === 'undefined') {
-            searchedValue = inputValue;
-        } else {
-            searchedValue = event.target.value;
-        }
-        this.setState({
-            inputValue: searchedValue
-        });
-
-        if (typeof this.props.onSearch === 'undefined') {
-            let currentParent = null;
-            const filteredList = [];
-            this.props.itemList.forEach(item => {
-                const add = this.filterOnProperties(item, searchedValue, this.props.filterPropertyList);
-                if (item.hasChildren === true && add === false) {
-                    currentParent = item;
-                }
-                if (add === true) {
-                    if (currentParent !== null && item.parentId === currentParent.id) {
-                        filteredList.push(currentParent);
-                        currentParent = null;
-                    }
-                    filteredList.push(item);
-                }
-            });
-
-            this.props.callbackFilteredList(filteredList);
-        } else {
-            this.props.onSearch(event, searchedValue);
+    this.setState({
+      inputValue: searchedValue
+    });
+
+    if (this.props.onSearch === undefined) {
+      let currentParent = null;
+      const filteredList = [];
+      this.props.itemList.forEach(item => {
+        const add = this.filterOnProperties(item, searchedValue);
+
+        if (item.hasChildren === true && add === false) {
+          currentParent = item;
         }
-    }
 
-    handleReset() {
-        this.setState({
-            inputValue: ''
-        });
+        if (add === true) {
+          if (currentParent !== null && item.parentId === currentParent.id) {
+            filteredList.push(currentParent);
+            currentParent = null;
+          }
 
-        if (typeof this.props.onSearch === 'undefined') {
-            this.props.callbackFilteredList(this.props.itemList);
-        } else {
-            this.props.onSearch(undefined, '');
+          filteredList.push(item);
         }
+      });
+      this.props.onFilteredList(filteredList);
+    } else {
+      this.props.onSearch(event, searchedValue);
     }
+  }
+
+  handleReset() {
+    this.setState({
+      inputValue: ''
+    });
 
-    render() {
-        const _props = this.props,
-              { placeholder } = _props,
-              others = _objectWithoutProperties(_props, ['placeholder']);
-
-        return React.createElement(HiInput, _extends({
-            placeholder: placeholder,
-            onReset: this.handleReset,
-            onChange: this.handleChange,
-            value: this.state.inputValue,
-            startAdornment: 'Magnify'
-        }, others));
+    if (typeof this.props.onSearch === 'undefined') {
+      this.props.onFilteredList(this.props.itemList);
+    } else {
+      this.props.onSearch(undefined, '');
     }
+  }
+
+  render() {
+    const _this$props = this.props,
+          {
+      placeholder
+    } = _this$props,
+          others = _objectWithoutProperties(_this$props, ["placeholder"]);
+
+    return React.createElement(HiInput, _extends({
+      placeholder: placeholder,
+      onReset: this.handleReset,
+      onChange: this.handleChange,
+      value: this.state.inputValue,
+      startAdornment: 'search'
+    }, others));
+  }
+
 }
+
 HiSearchField.defaultProps = {
-    placeholder: 'Search'
+  placeholder: 'Search'
 };
 HiSearchField.propTypes = process.env.NODE_ENV !== "production" ? {
-    /**
-     * Fonction de callback qui renvoie la liste d'éléments filtrée
-     *
-     * @param {array} suggestions
-     */
-    callbackFilteredList: PropTypes.func.isRequired,
-    /**
-     * Liste des propriété de l'élément sur lesquelles filtrer (par défaut l'item lui même)
-     */
-    filterPropertyList: PropTypes.array,
-    /**
-     * Liste d'éléments
-     */
-    itemList: PropTypes.array.isRequired,
-    /**
-     * Fonction de callback qui renvoit le texte saisi
-     *
-     * @param {string} value
-     */
-    onSearch: PropTypes.func,
-    /**
-     * Placeholder
-     */
-    placeholder: PropTypes.string
+  /**
+   * Liste des propriété de l'élément sur lesquelles filtrer (par défaut l'item lui même)
+   */
+  filterPropertyList: PropTypes.array,
+
+  /**
+   * Liste d'éléments
+   */
+  itemList: PropTypes.array.isRequired,
+
+  /**
+   * Fonction de callback qui renvoie la liste d'éléments filtrée
+   *
+   * @param {array} suggestions
+   */
+  onFilteredList: PropTypes.func,
+
+  /**
+   * Fonction de callback qui renvoit le texte saisi
+   *
+   * @param {string} value
+   */
+  onSearch: PropTypes.func,
+
+  /**
+   * Placeholder
+   */
+  placeholder: PropTypes.string
 } : {};
 export default HiSearchField;

package/es/HiForm/HiTextField.js

@@ -1,16 +1,14 @@
-import _extends from 'babel-runtime/helpers/extends';
+import _extends from "@babel/runtime/helpers/extends";
 // @inheritedComponent TextField
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import HiFormControl from './HiFormControl';
 import HiInput from './HiInput';
-
 /**
  * Champs input pour formulaire
  */
-class HiTextField extends React.PureComponent {
 
+class HiTextField extends React.PureComponent {
   constructor(props) {
     super(props);
 
@@ -21,7 +19,6 @@ class HiTextField extends React.PureComponent {
     this.state = {
       nbChars: props.value ? props.value.length : 0
     };
-
     this.handleBlur = this.handleBlur.bind(this);
     this.handleChange = this.handleChange.bind(this);
     this.handleFocus = this.handleFocus.bind(this);
@@ -35,12 +32,16 @@ class HiTextField extends React.PureComponent {
 
   handleChange(event) {
     const value = event.target.value;
+
     if (value.length <= this.props.maxLength) {
       if (this.props.onChange) {
         this.props.onChange(event);
       }
+
       if (this.props.multiline === true) {
-        this.setState({ nbChars: value.length });
+        this.setState({
+          nbChars: value.length
+        });
       }
     }
   }
@@ -72,48 +73,45 @@ class HiTextField extends React.PureComponent {
       rows,
       maxLength
     } = this.props;
-
-    const { nbChars } = this.state;
-
-    return React.createElement(
-      HiFormControl,
-      {
-        label: label,
-        required: required,
-        disabled: disabled,
-        className: className,
-        error: error,
-        id: id,
-        errorText: errorText,
-        helperText: helperText,
-        helperIcon: helperIcon,
-        multiline: multiline,
-        maxLength: maxLength,
-        nbChars: nbChars
-      },
-      React.createElement(HiInput, _extends({
-        inputId: id,
-        name: name,
-        type: type,
-        placeholder: placeholder,
-        value: value,
-        disabled: disabled,
-        error: error,
-        multiline: multiline,
-        fullWidth: fullWidth,
-        onBlur: this.handleBlur,
-        onChange: this.handleChange,
-        onReset: this.props.onReset,
-        onFocus: this.handleFocus,
-        onRightIconClick: this.props.onRightIconClick,
-        onLeftIconClick: this.props.onLeftIconClick,
-        rows: rows,
-        inputRef: input => {
-          this.input = input;
-        }
-      }, HiInputProps))
-    );
+    const {
+      nbChars
+    } = this.state;
+    return React.createElement(HiFormControl, {
+      label: label,
+      required: required,
+      disabled: disabled,
+      className: className,
+      error: error,
+      id: id,
+      errorText: errorText,
+      helperText: helperText,
+      helperIcon: helperIcon,
+      multiline: multiline,
+      maxLength: maxLength,
+      nbChars: nbChars
+    }, React.createElement(HiInput, _extends({
+      inputId: id,
+      name: name,
+      type: type,
+      placeholder: placeholder,
+      value: value,
+      disabled: disabled,
+      error: error,
+      multiline: multiline,
+      fullWidth: fullWidth,
+      onBlur: this.handleBlur,
+      onChange: this.handleChange,
+      onReset: this.props.onReset,
+      onFocus: this.handleFocus,
+      onRightIconClick: this.props.onRightIconClick,
+      onLeftIconClick: this.props.onLeftIconClick,
+      rows: rows,
+      inputRef: input => {
+        this.input = input;
+      }
+    }, HiInputProps)));
   }
+
 }
 
 HiTextField.defaultProps = {
@@ -134,103 +132,128 @@ HiTextField.propTypes = process.env.NODE_ENV !== "production" ? {
    * Useful to extend the style applied to components.
    */
   classes: PropTypes.object,
+
   /**
    * Classes CSS appliquées
    */
   className: PropTypes.string,
+
   /**
    * Si `true`, l'input sera inactif.
    */
   disabled: PropTypes.bool,
+
   /**
    * Si `true`, le champs sera en erreur.
    */
   error: PropTypes.bool,
+
   /**
    * Texte de l'erreur
    */
   errorText: PropTypes.string,
+
   /**
    * Si `true`, le chamsp prendra toute la largeur.
    */
   fullWidth: PropTypes.bool,
+
   /**
    * Si "true", le texte d'aide s'affichera seulement au clic sur l'icône "Information"
    */
   helperIcon: PropTypes.bool,
+
   /**
    * Texte de l'aide
    */
   helperText: PropTypes.string,
+
   /**
    * Propriétés appliquées au composant HiInput
    */
   HiInputProps: PropTypes.object,
+
   /**
    * id de l'élément input, utile pour lié le label
    */
   id: PropTypes.string.isRequired,
+
   /**
    * id de l'élément input
    */
   inputRef: PropTypes.func,
+
   /**
    * Label du champs
    */
   label: PropTypes.string,
+
   /**
    * Nombre de caractères max pour un text area
    * Valable uniquement si l'option multiline est à true
    */
   maxLength: PropTypes.number,
+
   /**
    * Si `true`, le champs input sera un textarea
    */
   multiline: PropTypes.bool,
+
   /**
    * Attribute name de l'élément `input`.
    */
   name: PropTypes.string,
+
   /**
    * Fonction de callback appelée lorsqu'on quitte le champs input
    */
   onBlur: PropTypes.func,
+
   /**
    * Fonction de callback appelée lorsqu'on remplie le champs de recherche
    */
   onChange: PropTypes.func,
+
   /**
    * Fonction de callback appelée au focus du champs
    */
   onFocus: PropTypes.func,
+
   /**
    * Fonction de callback appelée lorsqu'on clic sur l'icône de gauche
    */
   onLeftIconClick: PropTypes.func,
+
   /**
    * Fonction de callback appelée lorsqu'on vide le champs de recherche
    */
   onReset: PropTypes.func,
+
   /**
    * Fonction de callback appelée lorsqu'on clic sur l'icône de droite
    */
   onRightIconClick: PropTypes.func,
+
   /**
    * Placeholder
    */
   placeholder: PropTypes.string,
+
   /**
    * true si champs obligatoire
    */
   required: PropTypes.bool,
+
   /**
    * Nombre de lignes pour les textArea
    */
   rows: PropTypes.number,
+
   /**
    * Type du champs input. Doit être un type HTML5 valide.
    */
   type: PropTypes.string,
+
   /**
    * Valeur de l'élément input
    */

package/es/HiForm/index.js

@@ -3,5 +3,5 @@ export { default as HiFormControl } from './HiFormControl';
 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 HiTextField } from './HiTextField';