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

package/HiForm/HiFormControl.js

@@ -0,0 +1,377 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.styles = undefined;
+
+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 _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 _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _mdiMaterialUi = require('mdi-material-ui');
+
+var _Form = require('material-ui/Form');
+
+var _withStyles = require('../styles/withStyles');
+
+var _withStyles2 = _interopRequireDefault(_withStyles);
+
+var _HiFormLabel = require('./HiFormLabel');
+
+var _HiFormLabel2 = _interopRequireDefault(_HiFormLabel);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = exports.styles = function styles(theme) {
+    return {
+        helperTextClassName: {
+            color: theme.palette.neutral.normal,
+            fontSize: 11,
+            textAlign: 'right',
+            marginTop: 2
+        },
+        errorIcon: {
+            width: 19,
+            height: 19,
+            color: theme.palette.negative.normal,
+            position: 'absolute',
+            right: 8,
+            cursor: 'pointer',
+            top: '-2px'
+        },
+        errorDiv: (0, _extends3.default)({}, theme.typography.h5, {
+            backgroundColor: theme.palette.negative.normal,
+            color: '#FFFFFF',
+            padding: '16px 8px',
+            verticalAlign: 'middle',
+            borderRadius: 2,
+            position: 'relative',
+            marginBottom: 5,
+            fontWeight: theme.typography.fontWeightRegular
+        }),
+        arrowDown: {
+            width: 0,
+            height: 0,
+            borderLeft: '4px solid transparent',
+            borderRight: '4px solid transparent',
+            borderTop: '4px solid #000',
+            position: 'absolute',
+            bottom: -4,
+            right: 14
+        },
+        errorDivArrowDown: {
+            borderTopColor: theme.palette.negative.normal
+        },
+        helperIcon: {
+            width: 19,
+            height: 19,
+            color: theme.palette.neutral.normal,
+            position: 'absolute',
+            right: 8,
+            cursor: 'pointer',
+            top: '-2px'
+        },
+        helperIconActive: {
+            color: theme.palette.business.primary.normal
+        },
+        helperDiv: (0, _extends3.default)({}, theme.typography.h5, {
+            width: 'calc(100% - 16px)',
+            backgroundColor: '#ffffff',
+            color: theme.palette.neutral.dark,
+            padding: '16px 8px',
+            borderRadius: 2,
+            position: 'relative',
+            marginBottom: 5,
+            fontWeight: theme.typography.fontWeightRegular,
+            boxShadow: '0px 1px 7px rgba(0, 0, 0, 0.16)'
+        }),
+        helperDivArrowDown: {
+            borderTopColor: '#ffffff'
+        }
+    };
+};
+
+/**
+ * Champs input pour formulaire
+ */
+// @inheritedComponent FormControl
+
+var HiFormControl = function (_React$PureComponent) {
+    (0, _inherits3.default)(HiFormControl, _React$PureComponent);
+
+    function HiFormControl(props) {
+        (0, _classCallCheck3.default)(this, HiFormControl);
+
+        var _this = (0, _possibleConstructorReturn3.default)(this, (HiFormControl.__proto__ || (0, _getPrototypeOf2.default)(HiFormControl)).call(this, props));
+
+        _this.state = {
+            helperOpen: false,
+            focused: false,
+            hovered: false
+        };
+
+        _this.handleHelperClick = _this.handleHelperClick.bind(_this);
+        _this.handleFocus = _this.handleFocus.bind(_this);
+        _this.handleHover = _this.handleHover.bind(_this);
+        return _this;
+    }
+
+    (0, _createClass3.default)(HiFormControl, [{
+        key: 'handleHelperClick',
+        value: function handleHelperClick() {
+            this.setState(function (prevState) {
+                return { helperOpen: !prevState.helperOpen };
+            });
+        }
+    }, {
+        key: 'handleFocus',
+        value: function handleFocus(value) {
+            this.setState({ focused: value });
+        }
+    }, {
+        key: 'handleHover',
+        value: function handleHover(value) {
+            this.setState({ hovered: value });
+        }
+    }, {
+        key: 'render',
+        value: function render() {
+            var _this2 = this;
+
+            var _props = this.props,
+                children = _props.children,
+                classes = _props.classes,
+                className = _props.className,
+                disabled = _props.disabled,
+                error = _props.error,
+                errorText = _props.errorText,
+                id = _props.id,
+                label = _props.label,
+                InputLabelProps = _props.InputLabelProps,
+                helperText = _props.helperText,
+                helperIcon = _props.helperIcon,
+                FormHelperTextProps = _props.FormHelperTextProps,
+                fullWidth = _props.fullWidth,
+                required = _props.required,
+                multiline = _props.multiline,
+                rootRef = _props.rootRef,
+                maxLength = _props.maxLength,
+                nbChars = _props.nbChars,
+                others = (0, _objectWithoutProperties3.default)(_props, ['children', 'classes', 'className', 'disabled', 'error', 'errorText', 'id', 'label', 'InputLabelProps', 'helperText', 'helperIcon', 'FormHelperTextProps', 'fullWidth', 'required', 'multiline', 'rootRef', 'maxLength', 'nbChars']);
+            var _state = this.state,
+                helperOpen = _state.helperOpen,
+                focused = _state.focused,
+                hovered = _state.hovered;
+
+
+            return _react2.default.createElement(
+                _Form.FormControl,
+                (0, _extends3.default)({
+                    fullWidth: fullWidth,
+                    className: className,
+                    error: error,
+                    ref: rootRef
+                }, others),
+                !disabled && error && errorText && helperOpen && _react2.default.createElement(
+                    'div',
+                    { className: classes.errorDiv },
+                    _react2.default.createElement('div', {
+                        className: (0, _classnames2.default)(classes.arrowDown, classes.errorDivArrowDown)
+                    }),
+                    errorText
+                ),
+                !disabled && helperIcon && helperText && !error && helperOpen && _react2.default.createElement(
+                    'div',
+                    { className: classes.helperDiv },
+                    _react2.default.createElement('div', {
+                        className: (0, _classnames2.default)(classes.arrowDown, classes.helperDivArrowDown)
+                    }),
+                    helperText
+                ),
+                label && _react2.default.createElement(
+                    _HiFormLabel2.default,
+                    (0, _extends3.default)({
+                        htmlFor: id,
+                        label: label,
+                        required: required,
+                        disabled: disabled,
+                        focused: focused || hovered
+                    }, InputLabelProps),
+                    !disabled && error && _react2.default.createElement(_mdiMaterialUi.Alert, {
+                        className: classes.errorIcon,
+                        onClick: this.handleHelperClick
+                    }),
+                    !disabled && helperIcon && helperText && !error && _react2.default.createElement(_mdiMaterialUi.Information, {
+                        className: (0, _classnames2.default)(classes.helperIcon, (0, _defineProperty3.default)({}, classes.helperIconActive, helperOpen)),
+                        onClick: this.handleHelperClick
+                    })
+                ),
+                _react2.default.createElement(
+                    'div',
+                    {
+                        onMouseEnter: function onMouseEnter() {
+                            return _this2.handleHover(true);
+                        },
+                        onMouseLeave: function onMouseLeave() {
+                            return _this2.handleHover(false);
+                        },
+                        onFocus: function onFocus() {
+                            return _this2.handleFocus(true);
+                        },
+                        onBlur: function onBlur() {
+                            return _this2.handleFocus(false);
+                        }
+                    },
+                    children
+                ),
+                !multiline && helperText && !helperIcon && _react2.default.createElement(
+                    _Form.FormHelperText,
+                    (0, _extends3.default)({
+                        className: classes.helperTextClassName
+                    }, FormHelperTextProps),
+                    helperText
+                ),
+                multiline && _react2.default.createElement(
+                    _Form.FormHelperText,
+                    (0, _extends3.default)({
+                        className: classes.helperTextClassName
+                    }, FormHelperTextProps),
+                    nbChars,
+                    '/',
+                    maxLength
+                )
+            );
+        }
+    }]);
+    return HiFormControl;
+}(_react2.default.PureComponent);
+
+HiFormControl.defaultProps = {
+    fullWidth: true,
+    required: true,
+    disabled: false,
+    error: false,
+    errorText: '',
+    helperText: '',
+    helperIcon: false,
+    multiline: false,
+    nbChars: 0,
+    maxLength: 280
+};
+HiFormControl.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Contenu du form control
+     */
+    children: _propTypes2.default.node,
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: _propTypes2.default.object,
+    /**
+     * Classes CSS appliquées
+     */
+    className: _propTypes2.default.string,
+    /**
+     * Si `true`, l'input sera inactif.
+     */
+    disabled: _propTypes2.default.bool,
+    /**
+     * Si `true`, le champs sera en erreur.
+     */
+    error: _propTypes2.default.bool,
+    /**
+     * Texte de l'erreur
+     */
+    errorText: _propTypes2.default.string,
+    /**
+     * Propriétés appliquées au composant FormHelperText
+     */
+    FormHelperTextProps: _propTypes2.default.object,
+    /**
+     * Si `true`, le chamsp prendra toute la largeur.
+     */
+    fullWidth: _propTypes2.default.bool,
+    /**
+     * Si "true", le texte d'aide s'affichera seulement au clic sur l'icône "Information"
+     */
+    helperIcon: _propTypes2.default.bool,
+    /**
+     * Texte de l'aide
+     */
+    helperText: _propTypes2.default.string,
+    /**
+     * id de l'élément input
+     */
+    id: _propTypes2.default.string,
+    /**
+     * Propriétés appliquées au composant InputLabel
+     */
+    InputLabelProps: _propTypes2.default.object,
+    /**
+     * Label du champs
+     */
+    label: _propTypes2.default.string,
+    /**
+     * Nombre de caractères max pour un text area
+     * Valable uniquement si l'option multiline est à true
+     */
+    maxLength: _propTypes2.default.number,
+    /**
+     * Si `true`, le champs input sera un textarea
+     */
+    multiline: _propTypes2.default.bool,
+    /**
+     * Nombre de caractères autorisés pour les textArea
+     */
+    nbChars: _propTypes2.default.number,
+    /**
+     * true si champs obligatoire
+     */
+    required: _propTypes2.default.bool,
+    /**
+     * Passé à la prop ref du composant FormControl
+     */
+    rootRef: _propTypes2.default.string
+} : {};
+exports.default = (0, _withStyles2.default)(styles, { name: 'HmuiHiFormControl' })(HiFormControl);

package/HiForm/HiFormLabel.js

@@ -0,0 +1,180 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.styles = undefined;
+
+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 _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 _Input = require('material-ui/Input');
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _withStyles = require('../styles/withStyles');
+
+var _withStyles2 = _interopRequireDefault(_withStyles);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = exports.styles = function styles(theme) {
+    return {
+        root: (0, _extends3.default)({}, 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
+ */
+// @inheritedComponent InputLabel
+
+var HiFormLabel = function (_React$PureComponent) {
+    (0, _inherits3.default)(HiFormLabel, _React$PureComponent);
+
+    function HiFormLabel() {
+        (0, _classCallCheck3.default)(this, HiFormLabel);
+        return (0, _possibleConstructorReturn3.default)(this, (HiFormLabel.__proto__ || (0, _getPrototypeOf2.default)(HiFormLabel)).apply(this, arguments));
+    }
+
+    (0, _createClass3.default)(HiFormLabel, [{
+        key: 'render',
+        value: function render() {
+            var _props = this.props,
+                classes = _props.classes,
+                classNameProp = _props.className,
+                children = _props.children,
+                htmlFor = _props.htmlFor,
+                label = _props.label,
+                InputLabelProps = _props.InputLabelProps,
+                required = _props.required,
+                translations = _props.translations,
+                focused = _props.focused,
+                other = (0, _objectWithoutProperties3.default)(_props, ['classes', 'className', 'children', 'htmlFor', 'label', 'InputLabelProps', 'required', 'translations', 'focused']);
+
+
+            var className = (0, _classnames2.default)(classes.root, classNameProp);
+
+            return _react2.default.createElement(
+                _Input.InputLabel,
+                (0, _extends3.default)({
+                    htmlFor: htmlFor,
+                    className: className,
+                    focused: focused,
+                    required: false,
+                    FormControlClasses: {
+                        error: classes.labelErrorClassName,
+                        focused: classes.labelFocusedClassName
+                    }
+                }, InputLabelProps, other),
+                label,
+                !required && _react2.default.createElement(
+                    'span',
+                    { className: classes.optional },
+                    ' ',
+                    translations.optional
+                ),
+                children
+            );
+        }
+    }]);
+    return HiFormLabel;
+}(_react2.default.PureComponent);
+
+HiFormLabel.defaultProps = {
+    required: true,
+    translations: {
+        optional: 'optional'
+    }
+};
+HiFormLabel.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Contenu du form label
+     */
+    children: _propTypes2.default.node,
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: _propTypes2.default.object,
+    /**
+     * Classes CSS appliquées
+     */
+    className: _propTypes2.default.string,
+    /**
+     * Si "true", le label sera en mode focus
+     */
+    focused: _propTypes2.default.bool,
+    /**
+     * Useful to extend the style applied to components.
+     */
+    htmlFor: _propTypes2.default.string,
+    /**
+     * Props passées aux composant InputLabel
+     */
+    InputLabelProps: _propTypes2.default.object,
+    /**
+     * Valeur du label
+     */
+    label: _propTypes2.default.string,
+    /**
+     * Si "false", on ajoutera "optional"
+     */
+    required: _propTypes2.default.bool,
+    /**
+     * Chaines du composant
+     */
+    translations: _propTypes2.default.object
+} : {};
+exports.default = (0, _withStyles2.default)(styles, { name: 'HmuiHiFormLabel' })(HiFormLabel);