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

package/es/HiForm/HiFormLabel.js

@@ -0,0 +1,122 @@
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+import _extends from 'babel-runtime/helpers/extends';
+// @inheritedComponent InputLabel
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { InputLabel } from 'material-ui/Input';
+import classNames from 'classnames';
+import withStyles from '../styles/withStyles';
+
+export const styles = theme => ({
+    root: _extends({}, theme.typography.h4, {
+        fontWeight: theme.typography.fontWeightRegular,
+        color: theme.palette.neutral.normal,
+        position: 'inherit',
+        transform: 'inherit',
+        marginBottom: 2
+    }),
+    labelErrorClassName: {
+        color: theme.palette.negative.normal
+    },
+    labelFocusedClassName: {
+        color: theme.palette.business.primary.normal
+    },
+    optional: {
+        fontSize: 11,
+        marginLeft: 4,
+        color: theme.palette.neutral.normal
+    }
+});
+
+/**
+ * Label pour champs de formulaire
+ */
+class HiFormLabel extends React.PureComponent {
+
+    render() {
+        const _props = this.props,
+              {
+            classes,
+            className: classNameProp,
+            children,
+            htmlFor,
+            label,
+            InputLabelProps,
+            required,
+            translations,
+            focused
+        } = _props,
+              other = _objectWithoutProperties(_props, ['classes', 'className', 'children', 'htmlFor', 'label', 'InputLabelProps', 'required', 'translations', 'focused']);
+
+        const className = classNames(classes.root, classNameProp);
+
+        return React.createElement(
+            InputLabel,
+            _extends({
+                htmlFor: htmlFor,
+                className: className,
+                focused: focused,
+                required: false,
+                FormControlClasses: {
+                    error: classes.labelErrorClassName,
+                    focused: classes.labelFocusedClassName
+                }
+            }, InputLabelProps, other),
+            label,
+            !required && React.createElement(
+                'span',
+                { className: classes.optional },
+                ' ',
+                translations.optional
+            ),
+            children
+        );
+    }
+}
+
+HiFormLabel.defaultProps = {
+    required: true,
+    translations: {
+        optional: 'optional'
+    }
+};
+HiFormLabel.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Contenu du form label
+     */
+    children: PropTypes.node,
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: PropTypes.object,
+    /**
+     * Classes CSS appliquées
+     */
+    className: PropTypes.string,
+    /**
+     * Si "true", le label sera en mode focus
+     */
+    focused: PropTypes.bool,
+    /**
+     * Useful to extend the style applied to components.
+     */
+    htmlFor: PropTypes.string,
+    /**
+     * Props passées aux composant InputLabel
+     */
+    InputLabelProps: PropTypes.object,
+    /**
+     * Valeur du label
+     */
+    label: PropTypes.string,
+    /**
+     * Si "false", on ajoutera "optional"
+     */
+    required: PropTypes.bool,
+    /**
+     * Chaines du composant
+     */
+    translations: PropTypes.object
+} : {};
+export default withStyles(styles, { name: 'HmuiHiFormLabel' })(HiFormLabel);

package/es/HiForm/HiInput.js

@@ -0,0 +1,485 @@
+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';
+import withStyles from '../styles/withStyles';
+import HiIconBuilder from '../utils/HiIconBuilder';
+
+export const styles = theme => ({
+    root: _extends({
+        position: 'relative'
+    }, theme.typography.body1, {
+        borderBottom: `1px solid ${theme.palette.input.bottomLine}`,
+        paddingLeft: 1,
+        backgroundColor: '#f5f5f5',
+        '&$focused': {
+            backgroundColor: '#ffffff'
+        },
+        width: '100%',
+        // Ajout d'1px pour ne pas avoir de décalage en mode error avec le border top
+        '&:not($error)': {
+            marginTop: 1
+        }
+    }),
+    inkbar: {
+        '&:not($error):after': {
+            backgroundColor: theme.palette.business.primary.normal,
+            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)'
+        }
+    },
+    error: {
+        border: `1px solid ${theme.palette.negative.normal}`,
+        paddingLeft: 0,
+        borderRadius: 2
+    },
+    startAdornment: {
+        position: 'absolute',
+        left: 0,
+        top: '8px',
+        marginLeft: 8,
+        color: theme.palette.neutral.normal,
+        zIndex: 1
+    },
+    startAdornmentFocus: {
+        color: theme.palette.neutral.dark
+    },
+    startAdornmentDisabled: {
+        color: theme.palette.neutral.light
+    },
+    rightIcon: {
+        position: 'absolute',
+        right: 0,
+        top: '11px',
+        marginRight: 11,
+        width: '18px',
+        height: '18px',
+        color: theme.palette.neutral.normal
+    },
+    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: 10
+    },
+    input: _extends({}, theme.typography.body1, {
+        fontWeight: theme.typography.fontWeightRegular,
+        caretColor: theme.palette.business.primary.normal
+    }),
+    inputPropsClassName: _extends({}, theme.typography.body1, {
+        padding: '0 8px',
+        '&$inputWithStartAdornment': {
+            paddingLeft: 40
+        },
+        '&$inputWithClearIcon': {
+            paddingRight: 32
+        },
+        '&$inputWithRightIcon': {
+            paddingRight: 32
+        },
+        '&$inputWithRightButton': {
+            paddingRight: 140
+        },
+        '&$inputWithClearIcon&$inputWithRightIcon': {
+            paddingRight: 63
+        }
+    }),
+    inputText: {
+        height: 40
+    },
+    inputTextarea: {
+        minHeight: 40,
+        paddingTop: 8
+    },
+    inputWithStartAdornment: {},
+    inputWithClearIcon: {},
+    inputWithRightIcon: {},
+    inputWithRightButton: {},
+    iconPointer: {
+        zIndex: 2,
+        cursor: 'pointer'
+    },
+    eraseButton: {
+        height: 40,
+        width: 40,
+        '&$inputWithRightIcon,&$inputWithRightButton': {
+            right: 30
+        }
+    },
+    eraseIcon: {
+        width: 18,
+        height: 18,
+        color: theme.palette.neutral.normal
+    },
+    disabled: {
+        borderBottom: 'none'
+    },
+    focused: {}
+});
+
+class HiInput extends React.PureComponent {
+
+    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);
+    }
+
+    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();
+        }
+    }
+
+    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)) {
+            event.stopPropagation();
+        } else {
+            this.setState({ focused: false });
+            if (this.props.onBlur) {
+                this.props.onBlur(event);
+            }
+        }
+    }
+
+    handleFocus(event) {
+        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 });
+        }
+        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,
+            className,
+            error,
+            type,
+            disabled,
+            autoComplete,
+            autoFocus,
+            inputId,
+            name,
+            multiline,
+            rows,
+            inputClassName,
+            onReset
+        } = this.props;
+
+        const { focused } = this.state;
+
+        const overlayProps = _extends({
+            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) {
+            leftIcon = React.createElement(HiIconBuilder, {
+                icon: startAdornment,
+                onClick: this.props.onLeftIconClick,
+                className: classNames(classes.startAdornment, {
+                    [classes.startAdornmentFocus]: focused,
+                    [classes.startAdornmentDisabled]: disabled,
+                    [classes.iconPointer]: this.props.onLeftIconClick
+                })
+            });
+        }
+
+        let endElement;
+        if (typeof endAdornment === 'string' && endAdornment !== '') {
+            endElement = React.createElement(HiIconBuilder, {
+                icon: endAdornment,
+                onClick: this.props.onRightIconClick,
+                className: classNames(classes.rightIcon, {
+                    [classes.rightIconFocus]: focused,
+                    [classes.rightIconDisabled]: disabled,
+                    [classes.rightIconError]: error,
+                    [classes.iconPointer]: this.props.onRightIconClick
+                })
+            });
+        } else if (typeof endAdornment === 'object') {
+            endElement = endAdornment;
+        }
+
+        return React.createElement(
+            'div',
+            overlayProps,
+            React.createElement(Input, {
+                id: inputId,
+                type: type,
+                className: classNames(classes.input),
+                disableUnderline: true,
+                onChange: this.handleChange,
+                value: value,
+                placeholder: placeholder,
+                onFocus: this.handleFocus,
+                onKeyDown: this.props.onKeyDown,
+                onBlur: this.handleBlur,
+                inputRef: this.getInputElement,
+                disabled: disabled,
+                multiline: multiline,
+                rows: rows,
+                fullWidth: true,
+                autoComplete: autoComplete,
+                autoFocus: autoFocus,
+                name: name,
+                startAdornment: leftIcon,
+                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
+            )
+        );
+    }
+}
+
+HiInput.defaultProps = {
+    value: '',
+    placeholder: '',
+    inputId: '',
+    name: '',
+    startAdornment: '',
+    endAdornment: '',
+    type: 'text',
+    multiline: false,
+    error: false
+};
+HiInput.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * 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,
+    /**
+     * Si `true`, le champs input sera affiché en erreur.
+     */
+    error: PropTypes.bool,
+    /**
+     * Utile pour surcharger les classes de l'input
+     */
+    inputClassName: PropTypes.string,
+    /**
+     * id de l'élément input
+     */
+    inputId: PropTypes.string,
+    /**
+     * 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
+     */
+    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 tape une touche
+     */
+    onKeyDown: 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 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,
+    /**
+     * Passe une ref callback au composant div parent
+     */
+    overlayRef: PropTypes.func,
+    /**
+     * Placeholder
+     */
+    placeholder: PropTypes.string,
+    /**
+     * Icône à afficher à droite de l'input
+     */
+    rightIcon: PropTypes.string,
+    /**
+     * Nombre de lignes pour les textArea
+     */
+    rows: PropTypes.number,
+    /**
+     * Type du champs input. Doit être un type HTML5 valide.
+     */
+    type: PropTypes.string,
+    /**
+     * Valeur du champs de recherche
+     */
+    value: PropTypes.string
+} : {};
+export default withStyles(styles, { name: 'HmuiHiInput' })(HiInput);

package/es/HiForm/HiPasswordField.js

@@ -0,0 +1,70 @@
+import _extends from 'babel-runtime/helpers/extends';
+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
+    }
+});
+
+/**
+ * Champs input email pour formulaire
+ */
+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
+        });
+    }
+
+    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';
+
+        const inputClassName = classNames({
+            [classes.inputPassword]: !this.state.showText
+        });
+
+        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
+} : {};
+export default withStyles(styles, { name: 'HmuiHiPasswordField' })(HiPasswordField);