@hipay/hipay-material-ui 3.5.0 → 3.5.1

package/src/HiForm/HiInput.js

@@ -1,580 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import keycode from 'keycode/index';
-import Input from '@material-ui/core/Input';
-import HiIcon from '../HiIcon';
-import HiIconButton from '../HiIconButton';
-import { withStyles } from '@material-ui/core/styles';
-
-export const styles = theme => ({
-    root: {
-        position: 'relative',
-        ...theme.typography.b1,
-        borderBottom: `1px solid ${theme.palette.input.bottomLine}`,
-        paddingLeft: 8,
-        backgroundColor: theme.palette.background2,
-        '&$focused': {
-            backgroundColor: '#ffffff',
-        },
-        width: '100%',
-        // Ajout d'1px pour ne pas avoir de décalage en mode error avec le border top
-        '&:$error': {
-            marginTop: 1,
-        },
-    },
-    inkbar: {
-        '&:not($error):after': {
-            backgroundColor: theme.palette.primary.main,
-            left: 0,
-            bottom: 0,
-            // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
-            content: '""',
-            height: 1,
-            position: 'absolute',
-            right: 0,
-            transform: 'scaleX(0)',
-            transition: theme.transitions.create('transform', {
-                duration: theme.transitions.duration.shorter,
-                easing: theme.transitions.easing.easeOut,
-            }),
-            pointerEvents: 'none', // Transparent to the hover style.
-        },
-        '&:not($error):hover:after': {
-            transform: 'scaleX(1)',
-        },
-        '&$focused:after': {
-            transform: 'scaleX(1)',
-        },
-    },
-    focused: {},
-    error: {
-        border: `1px solid ${theme.palette.negative.main}`,
-        paddingLeft: 8,
-        borderRadius: 2,
-    },
-    startAdornment: {
-        fontSize: 20,
-        zIndex: 1,
-        marginLeft: 0,
-        marginRight: 8,
-    },
-    startAdornmentDefaultColor: {
-        color: theme.palette.neutral.main,
-    },
-    startAdornmentFocus: {
-        color: theme.palette.neutral.dark,
-    },
-    startAdornmentDisabled: {
-        color: theme.palette.neutral.light,
-    },
-    rightIcon: {
-        fontSize: 20,
-        width: 39,
-        color: theme.palette.neutral.main,
-    },
-    rightIconFocus: {
-        color: theme.palette.neutral.dark,
-    },
-    rightIconDisabled: {
-        color: theme.palette.neutral.light,
-    },
-    rightIconError: {
-        // Ajout d'1px pour ne pas avoir de décalage en mode error avec le border right
-        marginRight: '-1px',
-    },
-    input: {
-        ...theme.typography.b1,
-        fontWeight: theme.typography.fontWeightRegular,
-        caretColor: theme.palette.primary.main,
-        display: 'flex',
-        alignItems: 'center',
-    },
-    inputPropsClassName: {
-        ...theme.typography.b1,
-        padding: 0,
-    },
-    inputText: {
-        height: 40,
-    },
-    inputTextArea: {
-        minHeight: 40,
-        paddingTop: 8,
-    },
-    iconPointer: {
-        zIndex: 2,
-        cursor: 'pointer',
-    },
-    eraseButton: {
-        height: 40,
-        width: 40,
-        display: 'inline-block',
-    },
-    eraseButtonLabel: {
-        position: 'relative',
-        top: -2,
-    },
-    disabled: {
-        borderBottom: 'none',
-    },
-    endAdornment: {
-        display: 'flex',
-        alignItems: 'center',
-        textAlign: 'center',
-    },
-});
-
-class HiInput extends React.PureComponent {
-    static propTypes = {
-        /**
-         * This property helps users to fill forms faster, especially on mobile devices.
-         * The name can be confusing, it's more like an autofill.
-         * You can learn more about it in this article
-         * https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill
-         */
-        autoComplete: PropTypes.string,
-        /**
-         * Si `true`, le champs input aura le focus après le mount.
-         */
-        autoFocus: PropTypes.bool,
-        /**
-         * Utile pour surcharger les classes
-         */
-        classes: PropTypes.object,
-        /**
-         * Utile pour surcharger les classes
-         */
-        className: PropTypes.string,
-        /**
-         * 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.
-         */
-        error: PropTypes.bool,
-        /**
-         * Force le focus de l'input et surcharge le comportement par défaut
-         * où le focus est géré dans le state.
-         */
-        focused: PropTypes.bool,
-        /**
-         * Utile pour surcharger les classes de l'input
-         */
-        inputClassName: PropTypes.string,
-        /**
-         * id de l'élément input
-         */
-        inputId: PropTypes.string,
-        /**
-         * Passe des props directement à l'input
-         */
-        inputProps: PropTypes.object,
-        /**
-         * Passe une ref callback au composant input
-         */
-        inputRef: PropTypes.func,
-        /**
-         * 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 click dans l'input
-         */
-        onClick: PropTypes.func,
-        /**
-         * Fonction de callback appelée au focus du champs
-         */
-        onFocus: PropTypes.func,
-        /**
-         * Fonction de callback appelée lorsqu'on tape une touche
-         */
-        onKeyDown: PropTypes.func,
-        /**
-         * 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
-         */
-        onMouseEnter: PropTypes.func,
-        /**
-         * Fonction de callback appelée lorsque le curseur quitte le champs
-         */
-        onMouseLeave: 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,
-        /**
-         * Fonction de callback appelée lorsque l'utilisateur tape sur "Entrée"
-         */
-        onSubmit: PropTypes.func,
-        /**
-         * Passe une ref callback au composant div parent
-         */
-        overlayRef: PropTypes.func,
-        /**
-         * Placeholder
-         */
-        placeholder: PropTypes.string,
-        /**
-         * Nombre de lignes pour les textArea
-         */
-        rows: PropTypes.number,
-        /**
-         * Active browser default spellcheck (red underline)
-         */
-        spellcheck: PropTypes.bool,
-        /**
-         * Icône à afficher à gauche de l'input
-         */
-        startAdornment: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-        /**
-         * Couleur de l'icône à afficher à gauche de l'input
-         */
-        startAdornmentColor: PropTypes.string,
-        /**
-         * Type du champs input. Doit être un type HTML5 valide.
-         */
-        type: PropTypes.string,
-        /**
-         * Valeur du champs de recherche
-         */
-        value: PropTypes.string,
-    };
-
-    static defaultProps = {
-        value: '',
-        placeholder: '',
-        inputId: '',
-        name: '',
-        startAdornment: '',
-        endAdornment: '',
-        type: 'text',
-        multiline: false,
-        error: false,
-        onlyNumbers: false,
-        spellcheck: false,
-    };
-
-    constructor() {
-        super();
-
-        this.state = {
-            focused: false,
-        };
-
-        this.handleChange = this.handleChange.bind(this);
-        this.handleFocus = this.handleFocus.bind(this);
-        this.handleDivClick = this.handleDivClick.bind(this);
-        this.handleBlur = this.handleBlur.bind(this);
-        this.handleReset = this.handleReset.bind(this);
-        this.handleMouseEnter = this.handleMouseEnter.bind(this);
-        this.handleMouseLeave = this.handleMouseLeave.bind(this);
-        this.getInputElement = this.getInputElement.bind(this);
-        this.handleOverlayRef = this.handleOverlayRef.bind(this);
-    }
-
-    static getDerivedStateFromProps(nextProps, prevState) {
-        if (typeof nextProps.focused !== 'undefined' && nextProps.focused !== prevState.focused) {
-            return {
-                focused: nextProps.focused,
-            };
-        }
-        return null;
-    }
-
-    getInputElement(el) {
-        this.inputElement = el;
-        if (this.props.inputRef) {
-            this.props.inputRef(this.inputElement);
-        }
-    }
-
-    handleChange(event) {
-        if (this.props.onChange) {
-            this.props.onChange(event);
-        }
-    }
-
-    handleReset() {
-        if (this.props.onReset) {
-            this.props.onReset();
-        }
-        this.inputElement.focus();
-    }
-
-    handleBlur(event) {
-        // Si on click sur un élément de HiInput, on garde le focus
-        // Par exemple sur l'icone reset
-        if (
-            event.relatedTarget &&
-            this.overlayNode &&
-            this.overlayNode.contains(event.relatedTarget)
-        ) {
-            // If blur came from erase icon => stay focused and don't call onBlur props
-            if (this.eraseIconNode && this.eraseIconNode.contains(event.relatedTarget)) {
-                event.preventDefault();
-                event.stopPropagation();
-            } else if (this.endAdornmentNode.contains(event.relatedTarget) && this.props.onBlur) {
-                this.props.onBlur(event);
-            }
-            event.preventDefault();
-            event.stopPropagation();
-        } else {
-            this.setState({ focused: false });
-            if (this.props.onBlur) {
-                this.props.onBlur(event);
-            }
-        }
-    }
-
-    handleFocus(event) {
-        if (this.endAdornmentNode && this.endAdornmentNode.contains(event.target)) {
-            event.stopPropagation();
-        } else {
-            if (!this.state.focused) {
-                this.setState({ focused: true });
-            }
-            // If focus came from erase icon => stay focused and don't call onFocus props
-            if (this.eraseIconNode && this.eraseIconNode.contains(event.relatedTarget)) {
-                event.preventDefault();
-                event.stopPropagation();
-            } else if (this.props.onFocus) {
-                this.props.onFocus(event);
-            }
-        }
-    }
-
-    handleKeyDown = (event) => {
-        const key = keycode(event);
-        if (this.props.onKeyDown) {
-            this.props.onKeyDown(event);
-        }
-        if (key === 'enter' && this.props.onSubmit) {
-            this.props.onSubmit(event);
-        }
-    };
-
-    handleClick = (event) => {
-        if (this.props.onClick) {
-            this.props.onClick(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();
-        }
-    }
-
-    handleMouseEnter() {
-        if (this.props.onMouseEnter) {
-            this.props.onMouseEnter();
-        }
-    }
-
-    handleMouseLeave() {
-        if (this.props.onMouseLeave) {
-            this.props.onMouseLeave();
-        }
-    }
-
-    handleOverlayRef(el) {
-        this.overlayNode = el;
-        if (this.props.overlayRef) {
-            this.props.overlayRef(el);
-        }
-    }
-
-    render() {
-        const {
-            value,
-            classes,
-            placeholder,
-            startAdornment,
-            endAdornment: endAdornmentProps,
-            className,
-            error,
-            type,
-            disabled,
-            autoComplete,
-            autoFocus,
-            inputId,
-            name,
-            multiline,
-            rows,
-            inputClassName,
-            onReset,
-            spellcheck,
-            startAdornmentColor,
-            inputProps,
-        } = this.props;
-
-        const { focused } = this.state;
-
-        const overlayProps = {
-            className: classNames(
-                classes.root,
-                {
-                    [classes.disabled]: disabled && !error,
-                    [classes.inkbar]: !disabled,
-                    [classes.focused]: focused,
-                    [classes.error]: error,
-                },
-                className,
-            ),
-            ...(!disabled && {
-                onClick: this.handleDivClick,
-                onMouseEnter: this.handleMouseEnter,
-                onMouseLeave: this.handleMouseLeave,
-            }),
-            ref: this.handleOverlayRef,
-        };
-
-        let leftIcon;
-        if (!!startAdornment) {
-            const leftIconProps = {
-                color: startAdornmentColor,
-                onClick: this.props.onLeftIconClick,
-                className: classNames(classes.startAdornment, {
-                    [classes.startAdornmentDefaultColor]: !startAdornmentColor,
-                    [classes.startAdornmentFocus]: focused && !startAdornmentColor,
-                    [classes.startAdornmentDisabled]: disabled && !startAdornmentColor,
-                    [classes.iconPointer]: this.props.onLeftIconClick,
-                })
-            };
-            if (typeof startAdornment === 'string') {
-                leftIcon = (
-                    <HiIcon
-                        icon={startAdornment}
-                        {...leftIconProps}
-                    />
-                );
-            } else if (typeof startAdornment === 'object') {
-                // Icon component as prop
-                leftIcon = { ...startAdornment };
-                leftIcon.props = {
-                    ...leftIcon.props,
-                    ...leftIconProps,
-                    className: `${leftIconProps.className} ${leftIcon.props.className}`,
-                };
-            }
-        }
-
-        // Build endAdornment with eraseIcon + endAdornmentProps
-        const eraseIcon = !multiline &&
-            onReset &&
-            focused &&
-            !disabled &&
-            value.length > 0 && (
-                <HiIconButton
-                    className={classes.eraseButton}
-                    classes={{ label: classes.eraseButtonLabel }}
-                    onClick={this.handleReset}
-                    onBlur={this.handleBlur}
-                    buttonRef={el => {
-                        this.eraseIconNode = el;
-                    }}
-                >
-                    <HiIcon icon="close" size={20} color="neutral" />
-                </HiIconButton>
-            );
-
-        let endAdornment = endAdornmentProps;
-        if (typeof endAdornmentProps === 'string' && endAdornmentProps !== '') {
-            endAdornment = (
-                <HiIcon
-                    icon={endAdornmentProps}
-                    size={20}
-                    color="neutral"
-                    onClick={this.props.onRightIconClick}
-                    className={classNames(classes.rightIcon, {
-                        [classes.rightIconFocus]: focused,
-                        [classes.rightIconDisabled]: disabled,
-                        [classes.rightIconError]: error,
-                        [classes.iconPointer]: this.props.onRightIconClick,
-                    })}
-                />
-            );
-        }
-
-        return (
-            <div {...overlayProps}>
-                <Input
-                    id={inputId}
-                    type={type}
-                    className={classes.input}
-                    disableUnderline
-                    onChange={this.handleChange}
-                    value={value}
-                    placeholder={placeholder}
-                    onFocus={this.handleFocus}
-                    onKeyDown={this.handleKeyDown}
-                    onClick={this.handleClick}
-                    onBlur={this.handleBlur}
-                    inputRef={this.getInputElement}
-                    disabled={disabled}
-                    multiline={multiline}
-                    rows={rows}
-                    fullWidth
-                    autoComplete={autoComplete}
-                    autoFocus={autoFocus}
-                    name={name}
-                    startAdornment={leftIcon}
-                    endAdornment={
-                        <div
-                            className={classes.endAdornment}
-                            ref={el => {
-                                this.endAdornmentNode = el;
-                            }}
-                        >
-                            {eraseIcon}
-                            {endAdornment}
-                        </div>
-                    }
-                    inputProps={{
-                        spellCheck: spellcheck ? "true" : "false",
-                        className: classNames(inputClassName, classes.inputPropsClassName, {
-                            [classes.inputText]: !multiline,
-                            [classes.inputTextArea]: multiline,
-                        }),
-                        ...inputProps,
-                    }}
-                />
-            </div>
-        );
-    }
-}
-
-export default withStyles(styles, { hiComponent: true, name: 'HiMuiHiInput' })(HiInput);