@hipay/hipay-material-ui 1.0.0-beta.28 → 1.0.0-beta.3

package/es/HiForm/HiFormControl.js

@@ -87,17 +87,6 @@ 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,
@@ -109,11 +98,16 @@ class HiFormControl extends React.PureComponent {
         this.handleHover = this.handleHover.bind(this);
     }
 
-    handleHelperClick(event) {
+    handleHelperClick() {
         this.setState(prevState => ({ helperOpen: !prevState.helperOpen }));
-        if (event) {
-            event.preventDefault();
-        }
+    }
+
+    handleFocus(value) {
+        this.setState({ focused: value });
+    }
+
+    handleHover(value) {
+        this.setState({ hovered: value });
     }
 
     render() {
@@ -150,7 +144,7 @@ class HiFormControl extends React.PureComponent {
                 error: error,
                 ref: rootRef
             }, others),
-            error && errorText && helperOpen && React.createElement(
+            !disabled && error && errorText && helperOpen && React.createElement(
                 'div',
                 { className: classes.errorDiv },
                 React.createElement('div', {
@@ -158,7 +152,7 @@ class HiFormControl extends React.PureComponent {
                 }),
                 errorText
             ),
-            helperIcon && helperText && !error && helperOpen && React.createElement(
+            !disabled && helperIcon && helperText && !error && helperOpen && React.createElement(
                 'div',
                 {
                     className: classes.helperDiv
@@ -179,13 +173,13 @@ class HiFormControl extends React.PureComponent {
                     label: label,
                     required: required,
                     disabled: disabled,
-                    focused: !disabled && (focused || hovered)
+                    focused: focused || hovered
                 }, InputLabelProps),
-                error && React.createElement(Alert, {
+                !disabled && error && React.createElement(Alert, {
                     className: classes.errorIcon,
                     onClick: this.handleHelperClick
                 }),
-                helperIcon && helperText && !error && React.createElement(Information, {
+                !disabled && helperIcon && helperText && !error && React.createElement(Information, {
                     className: classNames(classes.helperIcon, {
                         [classes.helperIconActive]: helperOpen
                     }),
@@ -195,10 +189,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

@@ -13,7 +13,7 @@ export const styles = theme => ({
     }, theme.typography.body1, {
         borderBottom: `1px solid ${theme.palette.input.bottomLine}`,
         paddingLeft: 8,
-        backgroundColor: theme.palette.background2,
+        backgroundColor: '#f5f5f5',
         '&$focused': {
             backgroundColor: '#ffffff'
         },
@@ -50,7 +50,7 @@ export const styles = theme => ({
     focused: {},
     error: {
         border: `1px solid ${theme.palette.negative.normal}`,
-        paddingLeft: 8,
+        paddingLeft: 0,
         borderRadius: 2
     },
     startAdornment: {
@@ -65,8 +65,9 @@ export const styles = theme => ({
         color: theme.palette.neutral.light
     },
     rightIcon: {
+        margin: '0 8px',
         width: 18,
-        height: 39,
+        height: 40,
         color: theme.palette.neutral.normal
     },
     rightIconFocus: {
@@ -77,7 +78,7 @@ export const 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: _extends({}, theme.typography.body1, {
         fontWeight: theme.typography.fontWeightRegular,
@@ -89,10 +90,10 @@ export const styles = theme => ({
         padding: 0
     }),
     inputText: {
-        height: 39
+        height: 40
     },
     inputTextarea: {
-        minHeight: 39,
+        minHeight: 40,
         paddingTop: 8
     },
     iconPointer: {
@@ -100,7 +101,7 @@ export const styles = theme => ({
         cursor: 'pointer'
     },
     eraseButton: {
-        height: 39,
+        height: 40,
         width: 40,
         display: 'inline-block'
     },
@@ -153,7 +154,6 @@ class HiInput extends React.PureComponent {
         if (this.props.onReset) {
             this.props.onReset();
         }
-        this.inputElement.focus();
     }
 
     handleBlur(event) {
@@ -170,27 +170,19 @@ class HiInput extends React.PureComponent {
     }
 
     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);
         }
     }
 
-    handleDivClick(event) {
-        if (this.endAdornmentNode && this.endAdornmentNode.contains(event.target)) {
-            event.stopPropagation();
-        } else {
-            if (!this.state.focused) {
-                this.setState({ focused: true });
-            }
-            this.inputElement.focus();
+    handleDivClick() {
+        if (!this.state.focused) {
+            this.setState({ focused: true });
         }
+        this.inputElement.focus();
     }
 
     handleMouseEnter() {
@@ -231,8 +223,7 @@ class HiInput extends React.PureComponent {
             rows,
             inputClassName,
             onReset,
-            theme,
-            startAdornmentColor
+            theme
         } = this.props;
 
         const { focused } = this.state;
@@ -253,15 +244,9 @@ class HiInput extends React.PureComponent {
         });
 
         let leftIcon;
-        let startAdornmentStyle = { padding: 8 };
-        if (startAdornmentColor) {
-            startAdornmentStyle.color = startAdornmentColor;
-        }
         if (startAdornment) {
             leftIcon = React.createElement(HiIconBuilder, {
                 icon: startAdornment,
-                size: 36,
-                style: startAdornmentStyle,
                 onClick: this.props.onLeftIconClick,
                 className: classNames(classes.startAdornment, {
                     [classes.startAdornmentFocus]: focused,
@@ -278,15 +263,13 @@ class HiInput extends React.PureComponent {
                 onClick: this.handleReset,
                 onBlur: this.handleBlur
             },
-            React.createElement(HiIconBuilder, { icon: 'close', size: 36, color: theme.palette.neutral.normal, style: { padding: '8px' } })
+            React.createElement(HiIconBuilder, { icon: 'close', size: 18, color: theme.palette.neutral.normal })
         );
 
         let endAdornment = endAdornmentProps;
         if (typeof endAdornmentProps === 'string' && endAdornmentProps !== '') {
             endAdornment = React.createElement(HiIconBuilder, {
                 icon: endAdornmentProps,
-                size: 36,
-                style: { padding: '8px' },
                 onClick: this.props.onRightIconClick,
                 className: classNames(classes.rightIcon, {
                     [classes.rightIconFocus]: focused,
@@ -322,10 +305,7 @@ class HiInput extends React.PureComponent {
                 startAdornment: leftIcon,
                 endAdornment: React.createElement(
                     'div',
-                    {
-                        className: classes.endAdornment,
-                        ref: el => this.endAdornmentNode = el
-                    },
+                    { className: classes.endAdornment },
                     eraseIcon,
                     endAdornment
                 ),
@@ -460,10 +440,6 @@ HiInput.propTypes = process.env.NODE_ENV !== "production" ? {
      * Icône à afficher à gauche de l'input
      */
     startAdornment: PropTypes.string,
-    /**
-     * Couleur de l'icône à afficher à gauche de l'input
-     */
-    startAdornmentColor: PropTypes.string,
     /**
      * @ignore
      */

package/es/HiForm/HiPasswordField.js

@@ -11,9 +11,9 @@ import HiTextField from './HiTextField';
 export const styles = theme => ({
     inputPassword: {
         fontWeight: 'bolder',
-        fontFamily: 'inherit',
+        fontFamily: 'Verdana, sans-serif',
         letterSpacing: '4px',
-        fontSize: '1.6rem'
+        fontSize: 25
     }
 });
 
@@ -52,12 +52,7 @@ class HiPasswordField extends React.Component {
         return React.createElement(HiTextField, _extends({}, otherProps, {
             type: type,
             onRightIconClick: this.handlePasswordToggle,
-            HiInputProps: _extends({}, HiInputProps, {
-                endAdornment,
-                placeholder: '',
-                inputClassName,
-                autocomplete: 'on'
-            })
+            HiInputProps: _extends({}, HiInputProps, { endAdornment, placeholder: '', inputClassName })
         }));
     }
 }

package/es/HiForm/HiSearchField.js

@@ -2,7 +2,6 @@ import _extends from 'babel-runtime/helpers/extends';
 import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
 import React from 'react';
 import PropTypes from 'prop-types';
-import isRequiredIf from 'react-proptype-conditional-require';
 import HiInput from '../HiForm/HiInput';
 
 /**
@@ -74,7 +73,7 @@ class HiSearchField extends React.Component {
 
             this.props.callbackFilteredList(filteredList);
         } else {
-            this.props.onSearch(event, searchedValue);
+            this.props.onSearch(searchedValue);
         }
     }
 
@@ -86,7 +85,7 @@ class HiSearchField extends React.Component {
         if (typeof this.props.onSearch === 'undefined') {
             this.props.callbackFilteredList(this.props.itemList);
         } else {
-            this.props.onSearch(undefined, '');
+            this.props.onSearch('');
         }
     }
 
@@ -113,7 +112,7 @@ HiSearchField.propTypes = process.env.NODE_ENV !== "production" ? {
      *
      * @param {array} suggestions
      */
-    callbackFilteredList: isRequiredIf(PropTypes.func, props => !props.hasOwnProperty('onSearch'), 'callbackFilteredList required'),
+    callbackFilteredList: PropTypes.func.isRequired,
     /**
      * Liste des propriété de l'élément sur lesquelles filtrer (par défaut l'item lui même)
      */

package/es/HiForm/index.js

@@ -4,8 +4,4 @@ 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 HiUpload } from './HiUpload';
-export { default as HiUploadField } from './HiUploadField';
-export { default as HiSlider } from './HiSlider';
-export { default as HiAddressField } from './HiAddressField';
+export { default as HiSearchField } from './HiSearchField';

package/es/HiLoader/HiLoader.js

@@ -6,17 +6,13 @@ import withStyles from '../styles/withStyles';
 export const styles = () => ({});
 
 function HiLoader(props) {
-    const { className, theme, loading, size = 12 } = props;
+    const { theme, loading } = props;
 
-    return React.createElement(
-        'div',
-        { id: 'hi-loader', className: className },
-        React.createElement(PropagateLoader, {
-            loading: loading,
-            size: size,
-            color: theme.palette.business.primary.normal
-        })
-    );
+    return React.createElement(PropagateLoader, {
+        loading: loading,
+        size: 12,
+        color: theme.palette.business.primary.normal
+    });
 }
 
 HiLoader.propTypes = process.env.NODE_ENV !== "production" ? {

package/es/HiPins/HiPins.js

@@ -10,11 +10,12 @@ export const 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
@@ -33,9 +34,9 @@ export const styles = theme => ({
  *
  */
 function HiPins(props) {
-    const { classes, theme, children, color = props.theme.palette.business.primary.normal, onClick, className } = props;
+    const { classes, children, color, onClick, className } = props;
 
-    const textColor = getContrastedTextColor(color, theme.palette.neutral.dark, '#FFF');
+    const textColor = getContrastedTextColor(color, props.theme.palette.neutral.dark, '#FFF');
 
     const divProps = {
         style: { backgroundColor: color, color: textColor }
@@ -59,7 +60,7 @@ HiPins.propTypes = process.env.NODE_ENV !== "production" ? {
     children: PropTypes.node.isRequired,
     classes: PropTypes.object.isRequired,
     className: PropTypes.string,
-    color: PropTypes.string,
+    color: PropTypes.string.isRequired,
     onClick: PropTypes.func
 } : {};
 export default withStyles(styles, { withTheme: true, name: 'HmuiHiPins' })(HiPins);