@hipay/hipay-material-ui 1.0.0-beta.6 → 1.0.0-beta.7

package/HiAlertModal/HiAlertModal.js

@@ -0,0 +1,247 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.styles = undefined;
+
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+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 _Dialog = require('material-ui/Dialog');
+
+var _Dialog2 = _interopRequireDefault(_Dialog);
+
+var _styles = require('../styles');
+
+var _HiButton = require('../HiButton');
+
+var _HiButton2 = _interopRequireDefault(_HiButton);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = exports.styles = function styles(theme) {
+    return {
+        classContent: {
+            fontSize: 14,
+            lineHeight: '24px',
+            color: '#484848'
+        },
+        classPaper: {
+            maxWidth: 300
+        },
+        classCancelButton: {
+            float: 'right'
+        },
+        classTitle: {
+            fontSize: 20,
+            fontFamily: theme.typography.fontFamily,
+            fontWeight: theme.typography.fontWeightLight,
+            lineHeight: '24px'
+        },
+        classAction: {
+            display: 'inline-block'
+        },
+        classDialogRoot: {
+            backgroundColor: 'rgba(0, 0, 0, 0.28)'
+        }
+    };
+};
+
+/**
+ * Pop up d'alert
+ */
+// @inheritedComponent Dialog
+
+var HiAlertModal = function (_React$PureComponent) {
+    (0, _inherits3.default)(HiAlertModal, _React$PureComponent);
+
+    function HiAlertModal(props) {
+        (0, _classCallCheck3.default)(this, HiAlertModal);
+
+        var _this = (0, _possibleConstructorReturn3.default)(this, (HiAlertModal.__proto__ || (0, _getPrototypeOf2.default)(HiAlertModal)).call(this, props));
+
+        _this.handleClickCancel = function () {
+            if (_this.props.onCancelClick) {
+                _this.props.onCancelClick();
+            }
+        };
+
+        _this.handleClickSubmit = function () {
+            if (_this.props.onSubmitClick) {
+                _this.props.onSubmitClick();
+            }
+        };
+
+        _this.handleOnClose = function () {
+            if (_this.props.onClose) {
+                _this.props.onClose();
+            }
+        };
+
+        _this.handleOnClose = _this.handleOnClose.bind(_this);
+        _this.handleClickCancel = _this.handleClickCancel.bind(_this);
+        _this.handleClickSubmit = _this.handleClickSubmit.bind(_this);
+        return _this;
+    }
+
+    // Appelé au clic du bouton d'annulation
+
+
+    // Appelé au clic du bouton de soumission
+
+
+    // Appelé si clic en dehors de la pop up
+
+
+    (0, _createClass3.default)(HiAlertModal, [{
+        key: 'render',
+
+
+        // Render
+        value: function render() {
+            var _props = this.props,
+                labelSubmitButton = _props.labelSubmitButton,
+                labelCancelButton = _props.labelCancelButton,
+                content = _props.content,
+                title = _props.title,
+                positive = _props.positive,
+                negative = _props.negative,
+                open = _props.open,
+                onCancelClick = _props.onCancelClick,
+                onSubmitClick = _props.onSubmitClick,
+                classes = _props.classes,
+                props = (0, _objectWithoutProperties3.default)(_props, ['labelSubmitButton', 'labelCancelButton', 'content', 'title', 'positive', 'negative', 'open', 'onCancelClick', 'onSubmitClick', 'classes']);
+
+            return _react2.default.createElement(
+                _Dialog2.default,
+                (0, _extends3.default)({
+                    open: open,
+                    onClose: this.handleOnClose,
+                    classes: { paper: classes.classPaper, root: classes.classDialogRoot }
+                }, props),
+                _react2.default.createElement(
+                    _Dialog.DialogTitle,
+                    { disableTypography: true, classes: { root: classes.classTitle } },
+                    title
+                ),
+                _react2.default.createElement(
+                    _Dialog.DialogContent,
+                    null,
+                    _react2.default.createElement(
+                        _Dialog.DialogContentText,
+                        { classes: { root: classes.classContent } },
+                        content
+                    )
+                ),
+                _react2.default.createElement(
+                    _Dialog.DialogActions,
+                    { classes: { root: classes.classAction } },
+                    _react2.default.createElement(
+                        _HiButton2.default,
+                        {
+                            onClick: this.handleClickSubmit,
+                            positive: positive,
+                            negative: negative
+                        },
+                        labelSubmitButton
+                    ),
+                    _react2.default.createElement(
+                        _HiButton2.default,
+                        {
+                            classes: { root: classes.classCancelButton },
+                            onClick: this.handleClickCancel
+                        },
+                        labelCancelButton
+                    )
+                )
+            );
+        }
+    }]);
+    return HiAlertModal;
+}(_react2.default.PureComponent);
+
+HiAlertModal.defaultProps = {
+    negative: false,
+    positive: false
+};
+HiAlertModal.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Surcharge les classes du composant
+     */
+    classes: _propTypes2.default.object,
+    /**
+     * Texte contenu dans la modal
+     */
+    content: _propTypes2.default.string,
+    /**
+     * Texte sur le bouton d'annulation
+     */
+    labelCancelButton: _propTypes2.default.string,
+    /**
+     * Texte sur le bouton de soumission
+     */
+    labelSubmitButton: _propTypes2.default.string,
+    /**
+     * Colore le bouton de soumission en rouge
+     */
+    negative: _propTypes2.default.bool,
+    /**
+     * Fonction de callback appelée au clic sur le bouton d'annulation
+     */
+    onCancelClick: _propTypes2.default.func,
+    /**
+     * Fonction de callback appelée au clic en dehors de la pop up
+     */
+    onClose: _propTypes2.default.func,
+    /**
+     * Fonction de callback appelée au clic sur le bouton de soumission
+     */
+    onSubmitClick: _propTypes2.default.func,
+    /**
+     * pop up ouverte ou pas
+     */
+    open: _propTypes2.default.bool.isRequired,
+    /**
+     * Colore le bouton de soumission en vert
+     */
+    positive: _propTypes2.default.bool,
+    /**
+     * Titre de la modal
+     */
+    title: _propTypes2.default.string
+} : {};
+exports.default = (0, _styles.withStyles)(styles, { name: 'HmuiHiAlertModal' })(HiAlertModal);

package/HiAlertModal/index.js

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _HiAlertModal = require('./HiAlertModal');
+
+Object.defineProperty(exports, 'default', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_HiAlertModal).default;
+  }
+});
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/HiExpansionPanel/HiExpansionPanel.js

@@ -0,0 +1,231 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.styles = undefined;
+
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+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 _ExpansionPanel = require('material-ui/ExpansionPanel');
+
+var _ExpansionPanel2 = _interopRequireDefault(_ExpansionPanel);
+
+var _Typography = require('material-ui/Typography');
+
+var _Typography2 = _interopRequireDefault(_Typography);
+
+var _MenuDown = require('mdi-material-ui/MenuDown');
+
+var _MenuDown2 = _interopRequireDefault(_MenuDown);
+
+var _styles = require('../styles');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// @inheritedComponent ExpansionPanel
+
+var styles = exports.styles = function styles(theme) {
+    return {
+        heading: {
+            fontSize: 20,
+            lineHeight: '24px',
+            fontWeight: theme.typography.fontWeightLight
+        },
+        secondaryHeading: {
+            fontSize: 11,
+            color: '#737373',
+            textAlign: 'right',
+            lineHeight: '24px',
+            fontWeight: theme.typography.fontWeightRegular,
+            verticalAlign: 'middle',
+            '&>svg': {
+                fontSize: 18,
+                marginLeft: 3,
+                marginBottom: -5
+            }
+        },
+        column: {
+            flexBasis: '100%'
+        },
+        panelSummary: {
+            '&>div:first-child': {
+                margin: '12px 0',
+                '&>div:last-child': {
+                    paddingRight: 8
+                }
+            },
+            '&>div:last-child': {
+                width: 16,
+                height: 16
+            }
+        },
+        panelSummaryExpanded: {
+            borderBottom: '1px solid #E3E6E7',
+            minHeight: 0
+        },
+        expandMoreIcon: {
+            margin: 0,
+            fontSize: 18,
+            width: 20
+        },
+        panel: {
+            boxShadow: 'none',
+            border: 'none'
+        },
+        panelDetails: {
+            padding: '8px 24px 8px'
+        },
+        disabledPanel: {
+            backgroundColor: '#ffffff',
+            opacity: 1
+        },
+        expandIconExpanded: {
+            transform: 'translateY(-50%) rotate(-90deg)'
+        }
+    };
+};
+
+var HiExpansionPanel = function (_React$PureComponent) {
+    (0, _inherits3.default)(HiExpansionPanel, _React$PureComponent);
+
+    function HiExpansionPanel() {
+        (0, _classCallCheck3.default)(this, HiExpansionPanel);
+        return (0, _possibleConstructorReturn3.default)(this, (HiExpansionPanel.__proto__ || (0, _getPrototypeOf2.default)(HiExpansionPanel)).apply(this, arguments));
+    }
+
+    (0, _createClass3.default)(HiExpansionPanel, [{
+        key: 'render',
+        value: function render() {
+            var _props = this.props,
+                disabled = _props.disabled,
+                heading = _props.heading,
+                secondaryHeading = _props.secondaryHeading,
+                secondaryHeadingDisabled = _props.secondaryHeadingDisabled,
+                secondaryHeadingIcon = _props.secondaryHeadingIcon,
+                children = _props.children,
+                classes = _props.classes,
+                props = (0, _objectWithoutProperties3.default)(_props, ['disabled', 'heading', 'secondaryHeading', 'secondaryHeadingDisabled', 'secondaryHeadingIcon', 'children', 'classes']);
+
+
+            var effectiveDisabled = disabled || !children;
+
+            return _react2.default.createElement(
+                _ExpansionPanel2.default,
+                (0, _extends3.default)({
+                    disabled: effectiveDisabled,
+                    classes: { root: classes.panel, disabled: classes.disabledPanel }
+                }, props),
+                _react2.default.createElement(
+                    _ExpansionPanel.ExpansionPanelSummary,
+                    {
+                        classes: {
+                            root: classes.panelSummary,
+                            disabled: classes.disabledPanel,
+                            expanded: classes.panelSummaryExpanded,
+                            expandIconExpanded: classes.expandIconExpanded
+                        },
+                        expandIcon: _react2.default.createElement(_MenuDown2.default, { classes: { root: classes.expandMoreIcon } })
+                    },
+                    _react2.default.createElement(
+                        'div',
+                        { className: classes.column },
+                        _react2.default.createElement(
+                            _Typography2.default,
+                            { classes: { root: classes.heading } },
+                            heading
+                        )
+                    ),
+                    _react2.default.createElement(
+                        'div',
+                        { className: classes.column },
+                        _react2.default.createElement(
+                            _Typography2.default,
+                            { classes: { root: classes.secondaryHeading } },
+                            !effectiveDisabled ? secondaryHeading : secondaryHeadingDisabled,
+                            secondaryHeadingIcon
+                        )
+                    )
+                ),
+                !!children && _react2.default.createElement(
+                    _ExpansionPanel.ExpansionPanelDetails,
+                    { classes: { root: classes.panelDetails } },
+                    children
+                )
+            );
+        }
+    }]);
+    return HiExpansionPanel;
+}(_react2.default.PureComponent);
+
+HiExpansionPanel.defaultProps = {
+    disabled: false,
+    secondaryHeading: '',
+    secondaryHeadingIcon: '',
+    secondaryHeadingDisabled: 'PAS ENCORE COMPLETE'
+};
+HiExpansionPanel.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Contenu du panel
+     */
+    children: _propTypes2.default.any,
+    /**
+     * Surcharge les classes du composant
+     */
+    classes: _propTypes2.default.object,
+    /**
+     * Désactivé
+     */
+    disabled: _propTypes2.default.bool,
+    /**
+     * Titre principal du panel
+     */
+    heading: _propTypes2.default.string.isRequired,
+    /**
+     * Titre secondaire du panel
+     */
+    secondaryHeading: _propTypes2.default.string,
+    /**
+     * Titre secondaire si désactivé
+     */
+    secondaryHeadingDisabled: _propTypes2.default.string,
+    /**
+     * Icone dans le titre secondaire du panel
+     */
+    secondaryHeadingIcon: _propTypes2.default.any
+} : {};
+exports.default = (0, _styles.withStyles)(styles, { name: 'HmuiHiExpansionPanel' })(HiExpansionPanel);

package/HiExpansionPanel/index.js

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _HiExpansionPanel = require('./HiExpansionPanel');
+
+Object.defineProperty(exports, 'default', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_HiExpansionPanel).default;
+  }
+});
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/HiForm/HiFormControl.js

@@ -175,6 +175,9 @@ var HiFormControl = function (_React$PureComponent) {
         key: 'handleFocus',
         value: function handleFocus(value) {
             this.setState({ focused: value });
+            if (value === false && this.state.hovered) {
+                this.setState({ hovered: false });
+            }
         }
     }, {
         key: 'handleHover',

package/HiSelect/HiSelect.js

@@ -163,43 +163,28 @@ var HiSelect = function (_React$PureComponent) {
 
         // Check if value is in options
         var valueInOptions = false;
-        var val = _this.props.value;
+        var val = props.value;
         // No options provided.
-        if (!_this.props.options.length || !val.length) {
+        if (!props.options.length || !val || !val.length) {
             valueInOptions = true;
+        } else {
+            // Check if an option match value prop.
+            props.options.forEach(function (item) {
+                if (!valueInOptions && val.indexOf(item.id) !== -1) {
+                    valueInOptions = true;
+                }
+            });
         }
-        // Check if an option match value prop.
-        _this.props.options.forEach(function (item) {
-            if (!valueInOptions && val.indexOf(item.id) !== -1) {
-                valueInOptions = true;
-            }
-        });
+
         if (!valueInOptions) {
             throw new Error('prop value provided does not match any option.');
         }
 
         if (props.hierarchic === true && props.options.length > 1) {
-            // Construct two associative arrays
-            // hierarchy[parentId] => children
-            // hierarchySelected[parentId] => selected children
-            var hierarchy = {};
-            var hierarchySelected = {};
-            var value = props.value || [];
-            if (!Array.isArray(value)) value = [props.value];
-            props.options.forEach(function (option) {
-                if (option.hasChildren === true && !hierarchy.hasOwnProperty(option.id)) {
-                    hierarchy[option.id] = [];
-                    hierarchySelected[option.id] = [];
-                } else if (option.hasOwnProperty('parentId')) {
-                    hierarchy[option.parentId].push(option.id);
-                    if (value.includes(option.id)) {
-                        hierarchySelected[option.parentId].push(option.id);
-                    }
-                }
-            });
+            var hierarchyTrees = _this.buildHierarchyTrees(props);
 
-            _this.state.hierarchy = hierarchy;
-            _this.state.hierarchySelected = hierarchySelected;
+            _this.state.hierarchy = hierarchyTrees.hierarchy;
+            _this.state.hierarchySelected = hierarchyTrees.hierarchySelected;
         }
 
         if (props.options.length > 0) {
@@ -238,6 +223,34 @@ var HiSelect = function (_React$PureComponent) {
                 });
                 this.setState({ nbOptions: optionsLength });
             }
+
+            if (nextProps.hierarchic === true && nextProps.options.length > 1) {
+                var hierarchyTrees = this.buildHierarchyTrees(nextProps);
+                this.setState({ hierarchy: hierarchyTrees.hierarchy, hierarchySelected: hierarchyTrees.hierarchySelected });
+            }
+        }
+    }, {
+        key: 'buildHierarchyTrees',
+        value: function buildHierarchyTrees(props) {
+            // Construct two associative arrays
+            // hierarchy[parentId] => children
+            // hierarchySelected[parentId] => selected children
+            var hierarchy = {};
+            var hierarchySelected = {};
+            var value = props.value || [];
+            if (!Array.isArray(value)) value = [props.value];
+            props.options.forEach(function (option) {
+                if (option.hasChildren === true && !hierarchy.hasOwnProperty(option.id)) {
+                    hierarchy[option.id] = [];
+                    hierarchySelected[option.id] = [];
+                } else if (option.hasOwnProperty('parentId')) {
+                    hierarchy[option.parentId].push(option.id);
+                    if (value.includes(option.id)) {
+                        hierarchySelected[option.parentId].push(option.id);
+                    }
+                }
+            });
+            return { hierarchy: hierarchy, hierarchySelected: hierarchySelected };
         }
 
         // Key down on list items
@@ -287,7 +300,8 @@ var HiSelect = function (_React$PureComponent) {
                 hoverIcon = _props.hoverIcon,
                 checkedIcon = _props.checkedIcon,
                 hierarchic = _props.hierarchic,
-                id = _props.id;
+                id = _props.id,
+                placeholder = _props.placeholder;
             var _state = this.state,
                 open = _state.open,
                 suggestions = _state.suggestions,
@@ -322,7 +336,7 @@ var HiSelect = function (_React$PureComponent) {
             }
 
             if (displayAsChip) {
-                var chipFilter = _react2.default.createElement(_HiChip2.default, { label: display, onDelete: this.handleRequestDelete });
+                var chipFilter = _react2.default.createElement(_HiChip2.default, { label: placeholder || display, onDelete: this.handleRequestDelete });
                 if (display) {
                     display = chipFilter;
                 }
@@ -356,7 +370,7 @@ var HiSelect = function (_React$PureComponent) {
                         null,
                         _react2.default.createElement(_SelectInput2.default, {
                             id: id,
-                            value: display,
+                            value: placeholder || display,
                             open: open,
                             focused: focused,
                             type: type,
@@ -808,6 +822,11 @@ HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
      * Les items parents sont sélectionnables
      */
     parentItemSelectable: _propTypes2.default.bool,
+    /**
+     * Placeholder affiché lorsque le select est fermé
+     * Surcharge le placeholder par défaut
+     */
+    placeholder: _propTypes2.default.string,
     /**
      * Affiche un input de recherche permettant de filtrer les options
      */