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

package/HiForm/HiInput.js

@@ -0,0 +1,546 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.styles = undefined;
+
+var _typeof2 = require('babel-runtime/helpers/typeof');
+
+var _typeof3 = _interopRequireDefault(_typeof2);
+
+var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
+
+var _defineProperty3 = _interopRequireDefault(_defineProperty2);
+
+var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
+
+var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _mdiMaterialUi = require('mdi-material-ui');
+
+var _Input = require('material-ui/Input');
+
+var _Input2 = _interopRequireDefault(_Input);
+
+var _IconButton = require('material-ui/IconButton');
+
+var _IconButton2 = _interopRequireDefault(_IconButton);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _withStyles = require('../styles/withStyles');
+
+var _withStyles2 = _interopRequireDefault(_withStyles);
+
+var _HiIconBuilder = require('../utils/HiIconBuilder');
+
+var _HiIconBuilder2 = _interopRequireDefault(_HiIconBuilder);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = exports.styles = function styles(theme) {
+    return {
+        root: (0, _extends3.default)({
+            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: (0, _extends3.default)({}, theme.typography.body1, {
+            fontWeight: theme.typography.fontWeightRegular,
+            caretColor: theme.palette.business.primary.normal
+        }),
+        inputPropsClassName: (0, _extends3.default)({}, 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: {}
+    };
+};
+
+var HiInput = function (_React$PureComponent) {
+    (0, _inherits3.default)(HiInput, _React$PureComponent);
+
+    function HiInput() {
+        (0, _classCallCheck3.default)(this, HiInput);
+
+        var _this = (0, _possibleConstructorReturn3.default)(this, (HiInput.__proto__ || (0, _getPrototypeOf2.default)(HiInput)).call(this));
+
+        _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);
+        return _this;
+    }
+
+    (0, _createClass3.default)(HiInput, [{
+        key: 'getInputElement',
+        value: function getInputElement(el) {
+            this.inputElement = el;
+            if (this.props.inputRef) {
+                this.props.inputRef(this.inputElement);
+            }
+        }
+    }, {
+        key: 'handleChange',
+        value: function handleChange(event) {
+            if (this.props.onChange) {
+                this.props.onChange(event);
+            }
+        }
+    }, {
+        key: 'handleReset',
+        value: function handleReset() {
+            if (this.props.onReset) {
+                this.props.onReset();
+            }
+        }
+    }, {
+        key: 'handleBlur',
+        value: function 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);
+                }
+            }
+        }
+    }, {
+        key: 'handleFocus',
+        value: function handleFocus(event) {
+            if (!this.state.focused) {
+                this.setState({ focused: true });
+            }
+            if (this.props.onFocus) {
+                this.props.onFocus(event);
+            }
+        }
+    }, {
+        key: 'handleDivClick',
+        value: function handleDivClick() {
+            if (!this.state.focused) {
+                this.setState({ focused: true });
+            }
+            this.inputElement.focus();
+        }
+    }, {
+        key: 'handleMouseEnter',
+        value: function handleMouseEnter() {
+            if (this.props.onMouseEnter) {
+                this.props.onMouseEnter();
+            }
+        }
+    }, {
+        key: 'handleMouseLeave',
+        value: function handleMouseLeave() {
+            if (this.props.onMouseLeave) {
+                this.props.onMouseLeave();
+            }
+        }
+    }, {
+        key: 'handleOverlayRef',
+        value: function handleOverlayRef(el) {
+            this.overlayNode = el;
+            if (this.props.overlayRef) {
+                this.props.overlayRef(el);
+            }
+        }
+    }, {
+        key: 'render',
+        value: function render() {
+            var _classNames, _classNames4, _classNames5;
+
+            var _props = this.props,
+                value = _props.value,
+                classes = _props.classes,
+                placeholder = _props.placeholder,
+                startAdornment = _props.startAdornment,
+                endAdornment = _props.endAdornment,
+                className = _props.className,
+                error = _props.error,
+                type = _props.type,
+                disabled = _props.disabled,
+                autoComplete = _props.autoComplete,
+                autoFocus = _props.autoFocus,
+                inputId = _props.inputId,
+                name = _props.name,
+                multiline = _props.multiline,
+                rows = _props.rows,
+                inputClassName = _props.inputClassName,
+                onReset = _props.onReset;
+            var focused = this.state.focused;
+
+
+            var overlayProps = (0, _extends3.default)({
+                className: (0, _classnames2.default)(classes.root, (_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.disabled, disabled && !error), (0, _defineProperty3.default)(_classNames, classes.inkbar, !disabled), (0, _defineProperty3.default)(_classNames, classes.focused, focused), (0, _defineProperty3.default)(_classNames, classes.error, error), _classNames), className)
+            }, !disabled && {
+                onClick: this.handleDivClick,
+                onMouseEnter: this.handleMouseEnter,
+                onMouseLeave: this.handleMouseLeave
+            }, {
+                ref: this.handleOverlayRef
+            });
+
+            var leftIcon = void 0;
+            if (startAdornment) {
+                var _classNames2;
+
+                leftIcon = _react2.default.createElement(_HiIconBuilder2.default, {
+                    icon: startAdornment,
+                    onClick: this.props.onLeftIconClick,
+                    className: (0, _classnames2.default)(classes.startAdornment, (_classNames2 = {}, (0, _defineProperty3.default)(_classNames2, classes.startAdornmentFocus, focused), (0, _defineProperty3.default)(_classNames2, classes.startAdornmentDisabled, disabled), (0, _defineProperty3.default)(_classNames2, classes.iconPointer, this.props.onLeftIconClick), _classNames2))
+                });
+            }
+
+            var endElement = void 0;
+            if (typeof endAdornment === 'string' && endAdornment !== '') {
+                var _classNames3;
+
+                endElement = _react2.default.createElement(_HiIconBuilder2.default, {
+                    icon: endAdornment,
+                    onClick: this.props.onRightIconClick,
+                    className: (0, _classnames2.default)(classes.rightIcon, (_classNames3 = {}, (0, _defineProperty3.default)(_classNames3, classes.rightIconFocus, focused), (0, _defineProperty3.default)(_classNames3, classes.rightIconDisabled, disabled), (0, _defineProperty3.default)(_classNames3, classes.rightIconError, error), (0, _defineProperty3.default)(_classNames3, classes.iconPointer, this.props.onRightIconClick), _classNames3))
+                });
+            } else if ((typeof endAdornment === 'undefined' ? 'undefined' : (0, _typeof3.default)(endAdornment)) === 'object') {
+                endElement = endAdornment;
+            }
+
+            return _react2.default.createElement(
+                'div',
+                overlayProps,
+                _react2.default.createElement(_Input2.default, {
+                    id: inputId,
+                    type: type,
+                    className: (0, _classnames2.default)(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: (0, _classnames2.default)(inputClassName, classes.inputPropsClassName, (_classNames4 = {}, (0, _defineProperty3.default)(_classNames4, classes.inputWithClearIcon, onReset), (0, _defineProperty3.default)(_classNames4, classes.inputWithStartAdornment, startAdornment !== ''), (0, _defineProperty3.default)(_classNames4, classes.inputWithRightIcon, typeof endAdornment === 'string' && endAdornment !== ''), (0, _defineProperty3.default)(_classNames4, classes.inputWithRightButton, (typeof endAdornment === 'undefined' ? 'undefined' : (0, _typeof3.default)(endAdornment)) === 'object'), (0, _defineProperty3.default)(_classNames4, classes.inputText, !multiline), (0, _defineProperty3.default)(_classNames4, classes.inputTextarea, multiline), _classNames4))
+                    }
+                }),
+                !multiline && (endAdornment || onReset && !disabled) && _react2.default.createElement(
+                    'div',
+                    { style: { position: 'absolute', top: 0, right: 0, maxHeight: 40 } },
+                    !disabled && onReset && value.length > 0 && focused && _react2.default.createElement(
+                        _IconButton2.default,
+                        {
+                            className: (0, _classnames2.default)(classes.eraseButton, (_classNames5 = {}, (0, _defineProperty3.default)(_classNames5, classes.inputWithRightIcon, typeof endAdornment === 'string' && endAdornment !== ''), (0, _defineProperty3.default)(_classNames5, classes.inputWithRightButton, (typeof endAdornment === 'undefined' ? 'undefined' : (0, _typeof3.default)(endAdornment)) === 'object'), _classNames5)),
+                            onClick: this.handleReset,
+                            onBlur: this.handleBlur
+                        },
+                        _react2.default.createElement(_mdiMaterialUi.Close, { className: classes.eraseIcon })
+                    ),
+                    endAdornment && endElement
+                )
+            );
+        }
+    }]);
+    return HiInput;
+}(_react2.default.PureComponent);
+
+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: _propTypes2.default.string,
+    /**
+     * Si `true`, le champs input aura le focus après le mount.
+     */
+    autoFocus: _propTypes2.default.bool,
+    /**
+     * Utile pour surcharger les classes
+     */
+    classes: _propTypes2.default.object,
+    /**
+     * Utile pour surcharger les classes
+     */
+    className: _propTypes2.default.string,
+    /**
+     * Rendre le champs désactivé
+     */
+    disabled: _propTypes2.default.bool,
+    /**
+     * Si `true`, le champs input sera affiché en erreur.
+     */
+    error: _propTypes2.default.bool,
+    /**
+     * Utile pour surcharger les classes de l'input
+     */
+    inputClassName: _propTypes2.default.string,
+    /**
+     * id de l'élément input
+     */
+    inputId: _propTypes2.default.string,
+    /**
+     * Passe une ref callback au composant input
+     */
+    inputRef: _propTypes2.default.func,
+    /**
+     * Icône à afficher à gauche de l'input
+     */
+    startAdornment: _propTypes2.default.string,
+    /**
+     * Icône à afficher à droite de l'input
+     */
+    endAdornment: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.node]),
+    /**
+     * Affiche un bouton à droite de l'input (Si true, pas de endAdornment)
+     */
+    endButton: _propTypes2.default.bool,
+    /**
+     * Si `true`, le champs input sera un textarea
+     */
+    multiline: _propTypes2.default.bool,
+    /**
+     * Attribute name de l'élément `input`.
+     */
+    name: _propTypes2.default.string,
+    /**
+     * Fonction de callback appelée lorsqu'on quitte le champs input
+     */
+    onBlur: _propTypes2.default.func,
+    /**
+     * Fonction de callback appelée lorsqu'on remplie le champs de recherche
+     */
+    onChange: _propTypes2.default.func,
+    /**
+     * Fonction de callback appelée au focus du champs
+     */
+    onFocus: _propTypes2.default.func,
+    /**
+     * Fonction de callback appelée lorsqu'on tape une touche
+     */
+    onKeyDown: _propTypes2.default.func,
+    /**
+     * Fonction de callback appelée lorsqu'on clic sur l'icône de gauche
+     */
+    onLeftIconClick: _propTypes2.default.func,
+    /**
+     * Fonction de callback appelée lorsqu'on survole le champs
+     */
+    onMouseEnter: _propTypes2.default.func,
+    /**
+     * Fonction de callback appelée lorsque le curseur quitte le champs
+     */
+    onMouseLeave: _propTypes2.default.func,
+    /**
+     * Fonction de callback appelée lorsqu'on vide le champs de recherche
+     */
+    onReset: _propTypes2.default.func,
+    /**
+     * Fonction de callback appelée lorsqu'on clic sur l'icône de droite
+     */
+    onRightIconClick: _propTypes2.default.func,
+    /**
+     * Passe une ref callback au composant div parent
+     */
+    overlayRef: _propTypes2.default.func,
+    /**
+     * Placeholder
+     */
+    placeholder: _propTypes2.default.string,
+    /**
+     * Icône à afficher à droite de l'input
+     */
+    rightIcon: _propTypes2.default.string,
+    /**
+     * Nombre de lignes pour les textArea
+     */
+    rows: _propTypes2.default.number,
+    /**
+     * Type du champs input. Doit être un type HTML5 valide.
+     */
+    type: _propTypes2.default.string,
+    /**
+     * Valeur du champs de recherche
+     */
+    value: _propTypes2.default.string
+} : {};
+exports.default = (0, _withStyles2.default)(styles, { name: 'HmuiHiInput' })(HiInput);

package/HiForm/HiPasswordField.js

@@ -0,0 +1,134 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.styles = undefined;
+
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
+
+var _defineProperty3 = _interopRequireDefault(_defineProperty2);
+
+var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
+
+var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
+
+var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
+
+var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _withStyles = require('../styles/withStyles');
+
+var _withStyles2 = _interopRequireDefault(_withStyles);
+
+var _HiTextField = require('./HiTextField');
+
+var _HiTextField2 = _interopRequireDefault(_HiTextField);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = exports.styles = function styles(theme) {
+    return {
+        inputPassword: {
+            fontWeight: 'bolder',
+            fontFamily: 'Verdana, sans-serif',
+            letterSpacing: '4px',
+            fontSize: 25
+        }
+    };
+};
+
+/**
+ * Champs input email pour formulaire
+ */
+// @inheritedComponent HiTextField
+
+var HiPasswordField = function (_React$Component) {
+    (0, _inherits3.default)(HiPasswordField, _React$Component);
+
+    function HiPasswordField(props) {
+        (0, _classCallCheck3.default)(this, HiPasswordField);
+
+        var _this = (0, _possibleConstructorReturn3.default)(this, (HiPasswordField.__proto__ || (0, _getPrototypeOf2.default)(HiPasswordField)).call(this, props));
+
+        _this.state = {
+            showText: false
+        };
+
+        _this.handlePasswordToggle = _this.handlePasswordToggle.bind(_this);
+        return _this;
+    }
+
+    (0, _createClass3.default)(HiPasswordField, [{
+        key: 'handlePasswordToggle',
+        value: function handlePasswordToggle() {
+            this.setState({
+                showText: !this.state.showText
+            });
+        }
+    }, {
+        key: 'render',
+        value: function render() {
+            var _props = this.props,
+                classes = _props.classes,
+                HiInputProps = _props.HiInputProps,
+                otherProps = (0, _objectWithoutProperties3.default)(_props, ['classes', 'HiInputProps']);
+
+            var endAdornment = this.state.showText ? 'EyeOffOutline' : 'Eye';
+            var type = this.state.showText ? 'text' : 'password';
+
+            var inputClassName = (0, _classnames2.default)((0, _defineProperty3.default)({}, classes.inputPassword, !this.state.showText));
+
+            return _react2.default.createElement(_HiTextField2.default, (0, _extends3.default)({}, otherProps, {
+                type: type,
+                onRightIconClick: this.handlePasswordToggle,
+                HiInputProps: (0, _extends3.default)({}, HiInputProps, { endAdornment: endAdornment, placeholder: '', inputClassName: inputClassName })
+            }));
+        }
+    }]);
+    return HiPasswordField;
+}(_react2.default.Component);
+
+HiPasswordField.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: _propTypes2.default.object,
+    /**
+     * Fonction de callback appelée lorsqu'on clique sur l'icone "Eye"
+     */
+    handlePasswordToggle: _propTypes2.default.func
+} : {};
+exports.default = (0, _withStyles2.default)(styles, { name: 'HmuiHiPasswordField' })(HiPasswordField);