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

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: '#f5f5f5',
+        backgroundColor: theme.palette.background2,
         '&$focused': {
             backgroundColor: '#ffffff'
         },
@@ -50,7 +50,7 @@ export const styles = theme => ({
     focused: {},
     error: {
         border: `1px solid ${theme.palette.negative.normal}`,
-        paddingLeft: 0,
+        paddingLeft: 8,
         borderRadius: 2
     },
     startAdornment: {
@@ -65,9 +65,8 @@ export const styles = theme => ({
         color: theme.palette.neutral.light
     },
     rightIcon: {
-        margin: '0 8px',
         width: 18,
-        height: 40,
+        height: 39,
         color: theme.palette.neutral.normal
     },
     rightIconFocus: {
@@ -78,7 +77,7 @@ export const 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: _extends({}, theme.typography.body1, {
         fontWeight: theme.typography.fontWeightRegular,
@@ -90,10 +89,10 @@ export const styles = theme => ({
         padding: 0
     }),
     inputText: {
-        height: 40
+        height: 39
     },
     inputTextarea: {
-        minHeight: 40,
+        minHeight: 39,
         paddingTop: 8
     },
     iconPointer: {
@@ -101,7 +100,7 @@ export const styles = theme => ({
         cursor: 'pointer'
     },
     eraseButton: {
-        height: 40,
+        height: 39,
         width: 40,
         display: 'inline-block'
     },
@@ -142,8 +141,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);
+            }
         }
     }
 
@@ -167,19 +169,27 @@ class HiInput extends React.PureComponent {
     }
 
     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);
+            }
         }
     }
 
-    handleDivClick() {
-        if (!this.state.focused) {
-            this.setState({ focused: true });
+    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();
     }
 
     handleMouseEnter() {
@@ -244,6 +254,8 @@ class HiInput extends React.PureComponent {
         if (startAdornment) {
             leftIcon = React.createElement(HiIconBuilder, {
                 icon: startAdornment,
+                size: 36,
+                style: { padding: '8px' },
                 onClick: this.props.onLeftIconClick,
                 className: classNames(classes.startAdornment, {
                     [classes.startAdornmentFocus]: focused,
@@ -260,13 +272,15 @@ class HiInput extends React.PureComponent {
                 onClick: this.handleReset,
                 onBlur: this.handleBlur
             },
-            React.createElement(HiIconBuilder, { icon: 'close', size: 18, color: theme.palette.neutral.normal })
+            React.createElement(HiIconBuilder, { icon: 'close', size: 36, color: theme.palette.neutral.normal, style: { padding: '8px' } })
         );
 
         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,
@@ -302,7 +316,10 @@ class HiInput extends React.PureComponent {
                 startAdornment: leftIcon,
                 endAdornment: React.createElement(
                     'div',
-                    { className: classes.endAdornment },
+                    {
+                        className: classes.endAdornment,
+                        ref: el => this.endAdornmentNode = el
+                    },
                     eraseIcon,
                     endAdornment
                 ),
@@ -326,7 +343,8 @@ HiInput.defaultProps = {
     endAdornment: '',
     type: 'text',
     multiline: false,
-    error: false
+    error: false,
+    onlyNumbers: false
 };
 HiInput.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -400,6 +418,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
      */

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/HiSlider.js

@@ -0,0 +1,309 @@
+import _extends from 'babel-runtime/helpers/extends';
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import withStyles from '../styles/withStyles';
+import HiIconBuilder from '../utils/HiIconBuilder';
+import HiFormControl from '../HiForm/HiFormControl';
+
+export const styles = theme => ({
+    barContainer: {
+        width: '100%',
+        position: 'relative',
+        margin: '0 7px'
+    },
+    barHidden: {
+        width: '100%',
+        opacity: 0,
+        position: 'absolute',
+        top: '7px',
+        zIndex: '2'
+    },
+    mainContainer: _extends({}, theme.typography.body1, {
+        display: 'flex',
+        flexWrap: 'nowrap',
+        alignItems: 'center'
+    }),
+    topContainer: {
+        display: 'flex',
+        flexWrap: 'nowrap',
+        height: '18px'
+    },
+    bottomContainer: {
+        display: 'flex',
+        flexWrap: 'nowrap',
+        height: '18px'
+    },
+    barValue: {
+        display: 'flex',
+        width: '100%',
+        height: '4px',
+        borderRadius: '2px',
+        backgroundColor: theme.palette.business.primary.normal,
+        position: 'absolute',
+        zIndex: '2'
+    },
+    arrow: {
+        position: 'absolute',
+        zIndex: '1',
+        color: theme.palette.business.primary.normal,
+        transform: 'translate(-50%,-25%)',
+        transition: 'transform 300ms cubic-bezier(0.4, 0, 0.2, 1)',
+        transitionProperty: 'transform color'
+    },
+    focused: {
+        transform: 'scale(1.7) translate(-29%, -11%)',
+        color: theme.palette.business.primary.dark
+    },
+    leftLabel: {
+        color: theme.palette.business.primary.normal,
+        left: '0px',
+        position: 'absolute',
+        fontSize: '11px',
+        alignSelf: 'flex-end'
+    },
+    rightLabel: {
+        color: '#737373',
+        right: '0px',
+        position: 'absolute',
+        fontSize: '11px',
+        alignSelf: 'flex-end'
+    },
+    textValue: {
+        position: 'absolute',
+        zIndex: '2'
+    }
+});
+
+/**
+ * HiSlider component
+ */
+class HiSlider extends React.Component {
+
+    constructor(props) {
+        super(props);
+        this.leftLabelWidth = 0;
+        this.rightLabelWidth = 0;
+        this.textValueWidth = 0;
+        this.barContainerWidth = 0;
+
+        this.handleFocus = isFocused => () => {
+            this.setState({ focused: isFocused });
+        };
+
+        this.state = {
+            focused: false
+        };
+
+        this.leftLabel;
+        this.rightLabel;
+        this.textValue;
+        this.barContainer;
+
+        this.handleChange = this.handleChange.bind(this);
+        this.handleFocus = this.handleFocus.bind(this);
+    }
+
+    /**
+     * Measures several components once they are mounted.
+     * If the value and a label (left or right) are hovered,
+     * we hide this label.
+     */
+    componentDidMount() {
+        this.leftLabelWidth = this.leftLabel.offsetWidth;
+        this.rightLabelWidth = this.rightLabel.offsetWidth;
+        this.textValueWidth = this.textValue.offsetWidth;
+        this.barContainerWidth = this.barContainer.offsetWidth;
+        let { hoveringLeft, hoveringRight } = this.getHovering();
+        if (hoveringLeft || hoveringRight) {
+            this.forceUpdate();
+        }
+    }
+
+    handleChange(event) {
+        this.props.onChange(parseFloat(event.target.value));
+        this.textValueWidth = this.textValue.offsetWidth;
+    }
+
+    /**
+     * Calculates if the labels are hovered.
+     */
+    getHovering() {
+        const ratio = (this.props.value - this.props.min) / (this.props.max - this.props.min);
+        const hoveringLeft = this.leftLabelWidth - (ratio * this.barContainerWidth - ratio * this.textValueWidth) > 0;
+        const hoveringRight = this.barContainerWidth - ratio * this.barContainerWidth - this.rightLabelWidth - (1 - ratio) * this.textValueWidth < 0;
+        return { hoveringLeft, hoveringRight };
+    }
+
+    render() {
+        const {
+            classes,
+            className,
+            min,
+            max,
+            leftLabel,
+            rightLabel,
+            step,
+            suffix,
+            id,
+            label,
+            theme,
+            value
+        } = this.props;
+        const { focused } = this.state;
+        const ratio = (value - min) / (max - min);
+        const percentage = ratio * 100;
+        const { hoveringLeft, hoveringRight } = this.getHovering();
+        const barColor = focused ? theme.palette.business.primary.dark : theme.palette.business.primary.normal;
+        return (
+            // HiFormControl pour l'affichage du label
+            React.createElement(
+                HiFormControl,
+                {
+                    id: id,
+                    label: label,
+                    className: className,
+                    onFocus: this.handleFocus(true),
+                    onBlur: this.handleFocus(false)
+                },
+                React.createElement(
+                    'div',
+                    { className: classes.mainContainer },
+                    React.createElement(
+                        'div',
+                        null,
+                        min,
+                        suffix
+                    ),
+                    React.createElement(
+                        'div',
+                        { className: classes.barContainer, ref: div => this.barContainer = div },
+                        React.createElement(
+                            'div',
+                            { className: classes.topContainer },
+                            !hoveringLeft && React.createElement(
+                                'div',
+                                {
+                                    className: classes.leftLabel,
+                                    ref: div => this.leftLabel = div
+                                },
+                                leftLabel
+                            ),
+                            React.createElement(
+                                'div',
+                                {
+                                    className: classes.textValue,
+                                    style: {
+                                        left: `${percentage}%`,
+                                        transform: `translate(-${percentage}%)`
+                                    },
+                                    ref: div => this.textValue = div
+                                },
+                                value,
+                                suffix
+                            ),
+                            !hoveringRight && React.createElement(
+                                'div',
+                                {
+                                    className: classes.rightLabel,
+                                    ref: div => this.rightLabel = div
+                                },
+                                rightLabel
+                            )
+                        ),
+                        React.createElement('div', {
+                            className: classes.barValue,
+                            style: {
+                                background: `linear-gradient(to right, ${barColor}, ${barColor} ${percentage}%, #E0E0E0 ${percentage}%, #E0E0E0)`
+                            }
+                        }),
+                        React.createElement('input', {
+                            type: 'range',
+                            min: min,
+                            max: max,
+                            value: value,
+                            onChange: this.handleChange,
+                            className: classes.barHidden,
+                            step: step
+                        }),
+                        React.createElement(
+                            'div',
+                            { className: classes.bottomContainer },
+                            React.createElement(HiIconBuilder, {
+                                className: classNames(classes.arrow, {
+                                    [classes.focused]: focused
+                                }),
+                                icon: 'menu_up',
+                                size: 24,
+                                style: { left: `${percentage}%` }
+                            })
+                        )
+                    ),
+                    React.createElement(
+                        'div',
+                        null,
+                        max,
+                        suffix
+                    )
+                )
+            )
+        );
+    }
+}
+
+HiSlider.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: PropTypes.object,
+    /**
+     * Classes CSS appliquées.
+     */
+    className: PropTypes.string,
+    /**
+     * Id de l'élément input
+     */
+    id: PropTypes.string.isRequired,
+    /**
+     * Label du champ
+     */
+    label: PropTypes.string,
+    /**
+     * The label to show on the left.
+     */
+    leftLabel: PropTypes.string,
+    /**
+     * The Maximum value for the slider.
+     */
+    max: PropTypes.number.isRequired,
+    /**
+     * The Minimum value for the slider.
+     */
+    min: PropTypes.number.isRequired,
+    /**
+     * Fonction de callback appelée lorsqu'on change la valeur du slider.
+     */
+    onChange: PropTypes.func,
+    /**
+     * The label to show on the right
+     */
+    rightLabel: PropTypes.string,
+    /**
+     * The step between two selectable values.
+     */
+    step: PropTypes.number,
+    /**
+     * The suffix to show after each number.
+     */
+    suffix: PropTypes.string,
+    /**
+     * @ignore
+     */
+    theme: PropTypes.object,
+    /**
+     * The
+     * value of the input.
+     */
+    value: PropTypes.number
+} : {};
+export default withStyles(styles, { name: 'HmuiHiSlider', withTheme: true })(HiSlider);

package/es/HiForm/HiUpload.js

@@ -0,0 +1,194 @@
+import _extends from 'babel-runtime/helpers/extends';
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+// @inheritedComponent HiUploadField
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import withStyles from '../styles/withStyles';
+import withTheme from '../styles/withTheme';
+import HiFormControl from './HiFormControl';
+import HiUploadField from './HiUploadField';
+import HiIconBuilder from '../utils/HiIconBuilder';
+
+export const styles = theme => ({
+    flexContainer: {
+        display: '  flex',
+        alignItems: 'center'
+    },
+    statusIcon: {
+        color: theme.palette.text.icon,
+        marginRight: '8px',
+        padding: '24px',
+        borderRadius: '2px',
+        border: `1px solid ${theme.palette.input.bottomLine}`,
+        backgroundColor: theme.palette.local.background2,
+        '&:not($empty)': {
+            border: `1px solid ${theme.palette.middle.normal}`,
+            color: `${theme.palette.middle.normal}`
+        },
+        '&$complete': {
+            border: `1px solid ${theme.palette.positive.normal}`,
+            color: `${theme.palette.positive.normal}`
+        },
+        '&$error': {
+            border: `1px solid ${theme.palette.negative.normal}`,
+            color: `${theme.palette.negative.normal}`
+        }
+    },
+    inputContainer: {
+        flex: '1'
+    },
+    empty: {},
+    complete: {},
+    error: {}
+});
+
+class HiUpload extends React.PureComponent {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            params: new Array(this.props.inputs.length)
+        };
+
+        this.handleChange = this.handleChange.bind(this);
+        this.handleClear = this.handleClear.bind(this);
+        this.handleSeeFile = this.handleSeeFile.bind(this);
+    }
+
+    handleChange(param, index) {
+        this.setState(prevState => {
+            const oldParams = [...prevState.params];
+            oldParams.splice(index, 1, param);
+            return {
+                params: oldParams
+            };
+        });
+    }
+
+    handleClear(index) {
+        this.setState(prevState => {
+            const oldParams = [...prevState.params];
+            oldParams.splice(index, 1, undefined);
+            return {
+                params: oldParams
+            };
+        });
+    }
+
+    handleSeeFile(file) {
+        this.props.onSeeFile(file);
+    }
+
+    render() {
+        const _props = this.props,
+              { inputs, className, classes, label, helperIcon, helperText } = _props,
+              others = _objectWithoutProperties(_props, ['inputs', 'className', 'classes', 'label', 'helperIcon', 'helperText']);
+
+        const { params } = this.state;
+
+        let complete = true;
+        let empty = true;
+        let error = false;
+        let errorText = '';
+
+        for (let i = 0, len = params.length; i < len; i += 1) {
+            const param = params[i];
+            if (param !== undefined) {
+                complete = param.value === null || param.error ? false : complete;
+                empty = param.value !== null && !param.error ? false : empty;
+                error = param.error || error;
+                errorText = errorText || param.errorMessage;
+            } else {
+                complete = false;
+            }
+        }
+
+        const statusClass = classNames(classes.statusIcon, {
+            [classes.empty]: empty,
+            [classes.complete]: complete,
+            [classes.error]: error
+        });
+
+        let icon;
+
+        if (error) {
+            icon = 'alert';
+        } else if (complete) {
+            icon = 'check_circle';
+        } else {
+            icon = 'upload';
+        }
+
+        return React.createElement(
+            HiFormControl,
+            {
+                label: label,
+                className: className,
+                errorText: errorText,
+                error: error,
+                helperIcon: helperIcon,
+                helperText: helperText
+            },
+            React.createElement(
+                'div',
+                { className: classes.flexContainer },
+                React.createElement(HiIconBuilder, { className: statusClass, size: 80, icon: icon }),
+                React.createElement(
+                    'div',
+                    { className: classes.inputContainer },
+                    inputs.map((item, index) => React.createElement(HiUploadField, _extends({
+                        maxSize: item.maxSize,
+                        acceptedTypes: item.acceptedTypes,
+                        placeholder: item.placeholder,
+                        value: params[index] ? params[index].value : null,
+                        error: params[index] ? params[index].error : null,
+                        errorMessage: params[index] ? params[index].errorMessage : null,
+                        onSeeFile: this.handleSeeFile,
+                        onClear: this.handleClear,
+                        onChange: this.handleChange,
+                        index: index,
+                        key: item.id
+                    }, others)))
+                )
+            )
+        );
+    }
+}
+
+HiUpload.defaultProps = {
+    helperText: '',
+    helperIcon: false
+};
+HiUpload.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", le texte d'aide s'affichera seulement au clic sur l'icône "Information"
+     */
+    helperIcon: PropTypes.bool,
+    /**
+     * Texte de l'aide
+     */
+    helperText: PropTypes.string,
+    /**
+     * Array containing each of the inputs the component has to show (represented by an object).
+     */
+    inputs: PropTypes.array.isRequired,
+    /**
+     * The label of the global input.
+     */
+    label: PropTypes.string,
+    /**
+     * The method given to see the file.
+     */
+    onSeeFile: PropTypes.func
+} : {};
+export default withStyles(styles, { name: 'HmuiHiUpload', withTheme: true })(HiUpload);