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

package/HiSelect/HiSelect.js

@@ -163,46 +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 (!val.length) {
-                valueInOptions = true;
-            }
-            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) {
@@ -241,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
@@ -290,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,
@@ -325,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;
                 }
@@ -359,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,
@@ -811,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
      */

package/HiSelectableList/HiSelectableListItem.js

@@ -69,6 +69,10 @@ var _HiIconBuilder = require('../utils/HiIconBuilder');
 
 var _HiIconBuilder2 = _interopRequireDefault(_HiIconBuilder);
 
+var _HiColoredLabel = require('../HiColoredLabel');
+
+var _HiColoredLabel2 = _interopRequireDefault(_HiColoredLabel);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var styles = exports.styles = function styles(theme) {
@@ -112,9 +116,10 @@ var styles = exports.styles = function styles(theme) {
             fontWeight: 'inherit',
             width: '100%'
         }),
-        listItemSecondaryText: (0, _extends3.default)({}, theme.typography.body4, {
+        listItemSecondaryText: (0, _extends3.default)({}, theme.typography.body5, {
             fontWeight: theme.typography.fontWeightLight,
-            marginLeft: theme.spacing.unit
+            marginLeft: theme.spacing.unit,
+            color: theme.palette.neutral.normal
         }),
         listItemInfoText: (0, _extends3.default)({
             whiteSpace: 'nowrap',
@@ -213,13 +218,18 @@ var HiSelectableListItem = function (_React$Component) {
                         'div',
                         { className: classes.listItemContent, 'data-id': item.id },
                         !effectiveCheckbox && _react2.default.createElement(_HiIconBuilder2.default, { icon: item.icon, className: classes.icon }),
-                        item.label,
-                        _react2.default.createElement('span', { className: classes.listItemSecondaryText }),
+                        _this.getItemLabel(item),
+                        _react2.default.createElement(
+                            'span',
+                            { className: classes.listItemSecondaryText },
+                            item.secondaryLabel
+                        ),
                         childrenIndicator
                     );
                 case 'image':
                     var img = '';
                     if (typeof item.img !== 'undefined') {
+
                         img = _react2.default.createElement('img', { src: item.img, className: classes.imgListItem });
                     }
 
@@ -227,8 +237,12 @@ var HiSelectableListItem = function (_React$Component) {
                         'div',
                         { className: classes.listItemContent, 'data-id': item.id },
                         img,
-                        item.label,
-                        _react2.default.createElement('span', { className: classes.listItemSecondaryText }),
+                        _this.getItemLabel(item),
+                        _react2.default.createElement(
+                            'span',
+                            { className: classes.listItemSecondaryText },
+                            item.secondaryLabel
+                        ),
                         childrenIndicator
                     );
                 case 'primary-highlight':
@@ -238,7 +252,7 @@ var HiSelectableListItem = function (_React$Component) {
                     return _react2.default.createElement(
                         'div',
                         { className: itemPrimaryHighlightClass, 'data-id': item.id },
-                        item.label
+                        _this.getItemLabel(item)
                     );
                 case 'text':
                 default:
@@ -253,8 +267,12 @@ var HiSelectableListItem = function (_React$Component) {
                                 __html: (0, _hiHelpers.escapeHTML)(item.labelHighlight)
                             }
                         }),
-                        !item.labelHighlight && item.label,
-                        _react2.default.createElement('span', { className: classes.listItemSecondaryText }),
+                        !item.labelHighlight && _this.getItemLabel(item),
+                        _react2.default.createElement(
+                            'span',
+                            { className: classes.listItemSecondaryText },
+                            item.secondaryLabel
+                        ),
                         childrenIndicator
                     );
             }
@@ -274,6 +292,14 @@ var HiSelectableListItem = function (_React$Component) {
         value: function toggleHover() {
             this.setState({ hover: !this.state.hover });
         }
+    }, {
+        key: 'getItemLabel',
+        value: function getItemLabel(item) {
+            if (item.color) {
+                return _react2.default.createElement(_HiColoredLabel2.default, { color: item.color, label: item.label });
+            }
+            return item.label;
+        }
 
         /**
          * Build list item from type

package/HiTable/BodyCells/CellCountry.js

@@ -112,7 +112,7 @@ var CellCountry = function (_React$PureComponent) {
                 view = _props.view;
 
 
-            var path = '/static/images/countries/' + isoCode.toLowerCase() + '.svg';
+            var path = '/static/hmu/images/countries/' + isoCode.toLowerCase() + '.svg';
 
             var tooltipContent = _react2.default.createElement(
                 'div',

package/HiTopBar/HiTopBar.js

@@ -508,10 +508,6 @@ HiTopBar.propTypes = process.env.NODE_ENV !== "production" ? {
      * Fonction de callback au click sur l'accountSelector'
      */
     onClickAccountSelector: _propTypes2.default.func,
-    /**
-     * Fonction de callback au click sur le menu
-     */
-    onClickInputButton: _propTypes2.default.func.isRequired,
     /**
      * Fonction de callback au click sur le menu
      */

package/es/HiAlertModal/HiAlertModal.js

@@ -0,0 +1,189 @@
+import _extends from 'babel-runtime/helpers/extends';
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+// @inheritedComponent Dialog
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import Dialog, { DialogActions, DialogContent, DialogContentText, DialogTitle } from 'material-ui/Dialog';
+import { withStyles } from '../styles';
+import HiButton from '../HiButton';
+
+export const styles = theme => ({
+    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
+ */
+class HiAlertModal extends React.PureComponent {
+
+    constructor(props) {
+        super(props);
+
+        this.handleClickCancel = () => {
+            if (this.props.onCancelClick) {
+                this.props.onCancelClick();
+            }
+        };
+
+        this.handleClickSubmit = () => {
+            if (this.props.onSubmitClick) {
+                this.props.onSubmitClick();
+            }
+        };
+
+        this.handleOnClose = () => {
+            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);
+    }
+
+    // Appelé au clic du bouton d'annulation
+
+
+    // Appelé au clic du bouton de soumission
+
+
+    // Appelé si clic en dehors de la pop up
+
+
+    // Render
+    render() {
+        const _props = this.props,
+              {
+            labelSubmitButton,
+            labelCancelButton,
+            content,
+            title,
+            positive,
+            negative,
+            open,
+            onCancelClick,
+            onSubmitClick,
+            classes
+        } = _props,
+              props = _objectWithoutProperties(_props, ['labelSubmitButton', 'labelCancelButton', 'content', 'title', 'positive', 'negative', 'open', 'onCancelClick', 'onSubmitClick', 'classes']);
+        return React.createElement(
+            Dialog,
+            _extends({
+                open: open,
+                onClose: this.handleOnClose,
+                classes: { paper: classes.classPaper, root: classes.classDialogRoot }
+            }, props),
+            React.createElement(
+                DialogTitle,
+                { disableTypography: true, classes: { root: classes.classTitle } },
+                title
+            ),
+            React.createElement(
+                DialogContent,
+                null,
+                React.createElement(
+                    DialogContentText,
+                    { classes: { root: classes.classContent } },
+                    content
+                )
+            ),
+            React.createElement(
+                DialogActions,
+                { classes: { root: classes.classAction } },
+                React.createElement(
+                    HiButton,
+                    {
+                        onClick: this.handleClickSubmit,
+                        positive: positive,
+                        negative: negative
+                    },
+                    labelSubmitButton
+                ),
+                React.createElement(
+                    HiButton,
+                    {
+                        classes: { root: classes.classCancelButton },
+                        onClick: this.handleClickCancel
+                    },
+                    labelCancelButton
+                )
+            )
+        );
+    }
+}
+
+HiAlertModal.defaultProps = {
+    negative: false,
+    positive: false
+};
+HiAlertModal.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Surcharge les classes du composant
+     */
+    classes: PropTypes.object,
+    /**
+     * Texte contenu dans la modal
+     */
+    content: PropTypes.string,
+    /**
+     * Texte sur le bouton d'annulation
+     */
+    labelCancelButton: PropTypes.string,
+    /**
+     * Texte sur le bouton de soumission
+     */
+    labelSubmitButton: PropTypes.string,
+    /**
+     * Colore le bouton de soumission en rouge
+     */
+    negative: PropTypes.bool,
+    /**
+     * Fonction de callback appelée au clic sur le bouton d'annulation
+     */
+    onCancelClick: PropTypes.func,
+    /**
+     * Fonction de callback appelée au clic en dehors de la pop up
+     */
+    onClose: PropTypes.func,
+    /**
+     * Fonction de callback appelée au clic sur le bouton de soumission
+     */
+    onSubmitClick: PropTypes.func,
+    /**
+     * pop up ouverte ou pas
+     */
+    open: PropTypes.bool.isRequired,
+    /**
+     * Colore le bouton de soumission en vert
+     */
+    positive: PropTypes.bool,
+    /**
+     * Titre de la modal
+     */
+    title: PropTypes.string
+} : {};
+export default withStyles(styles, { name: 'HmuiHiAlertModal' })(HiAlertModal);

package/es/HiAlertModal/index.js

@@ -0,0 +1 @@
+export { default } from './HiAlertModal';

package/es/HiColoredLabel/HiColoredLabel.js

@@ -78,7 +78,8 @@ HiColoredLabel.propTypes = process.env.NODE_ENV !== "production" ? {
 } : {};
 
 HiColoredLabel.defaultProps = {
-    active: false
+    active: false,
+    color: '#737373'
 };
 
 export default withStyles(styles, { name: 'HmuiHiColoredLabel' })(HiColoredLabel);

package/es/HiDatePicker/HiDateRangeSelector.js

@@ -127,6 +127,9 @@ class HiDateRangeSelector extends React.Component {
                 if (selectedOption) {
                     this.props.onChange('from', selectedOption.from.toDate());
                     this.props.onChange('to', selectedOption.to.toDate());
+                    if (this.props.returnSelectValue === true) {
+                        this.props.onChange('period', value);
+                    }
                 }
             }
         };
@@ -231,6 +234,7 @@ HiDateRangeSelector.defaultProps = {
     availableOptionKeys: ['cd', 'pd', 'cw', 'pw', 'cm', 'pm', 'cq', 'pq', 'cy', 'custom'],
     defaultPreset: 'cd',
     enableTime: false,
+    returnSelectValue: false,
     locale: 'fr-FR',
     format: 'YYYY-DD-MM',
     translations: {
@@ -325,6 +329,10 @@ HiDateRangeSelector.propTypes = process.env.NODE_ENV !== "production" ? {
      * true si champs obligatoire
      */
     required: PropTypes.bool,
+    /**
+     * Retourne la valeur du select de la période au change du select
+     */
+    returnSelectValue: PropTypes.bool.isRequired,
     /**
      * Date de fin sélectionnée
      */

package/es/HiExpansionPanel/HiExpansionPanel.js

@@ -0,0 +1,170 @@
+import _extends from 'babel-runtime/helpers/extends';
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+// @inheritedComponent ExpansionPanel
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import ExpansionPanel, { ExpansionPanelSummary, ExpansionPanelDetails } from 'material-ui/ExpansionPanel';
+import Typography from 'material-ui/Typography';
+import MenuDownIcon from 'mdi-material-ui/MenuDown';
+import { withStyles } from '../styles';
+
+export const styles = theme => ({
+    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)'
+    }
+});
+
+class HiExpansionPanel extends React.PureComponent {
+
+    render() {
+        const _props = this.props,
+              {
+            disabled,
+            heading,
+            secondaryHeading,
+            secondaryHeadingDisabled,
+            secondaryHeadingIcon,
+            children,
+            classes
+        } = _props,
+              props = _objectWithoutProperties(_props, ['disabled', 'heading', 'secondaryHeading', 'secondaryHeadingDisabled', 'secondaryHeadingIcon', 'children', 'classes']);
+
+        const effectiveDisabled = disabled || !children;
+
+        return React.createElement(
+            ExpansionPanel,
+            _extends({
+                disabled: effectiveDisabled,
+                classes: { root: classes.panel, disabled: classes.disabledPanel }
+            }, props),
+            React.createElement(
+                ExpansionPanelSummary,
+                {
+                    classes: {
+                        root: classes.panelSummary,
+                        disabled: classes.disabledPanel,
+                        expanded: classes.panelSummaryExpanded,
+                        expandIconExpanded: classes.expandIconExpanded
+                    },
+                    expandIcon: React.createElement(MenuDownIcon, { classes: { root: classes.expandMoreIcon } })
+                },
+                React.createElement(
+                    'div',
+                    { className: classes.column },
+                    React.createElement(
+                        Typography,
+                        { classes: { root: classes.heading } },
+                        heading
+                    )
+                ),
+                React.createElement(
+                    'div',
+                    { className: classes.column },
+                    React.createElement(
+                        Typography,
+                        { classes: { root: classes.secondaryHeading } },
+                        !effectiveDisabled ? secondaryHeading : secondaryHeadingDisabled,
+                        secondaryHeadingIcon
+                    )
+                )
+            ),
+            !!children && React.createElement(
+                ExpansionPanelDetails,
+                { classes: { root: classes.panelDetails } },
+                children
+            )
+        );
+    }
+}
+
+HiExpansionPanel.defaultProps = {
+    disabled: false,
+    secondaryHeading: '',
+    secondaryHeadingIcon: '',
+    secondaryHeadingDisabled: 'PAS ENCORE COMPLETE'
+};
+HiExpansionPanel.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Contenu du panel
+     */
+    children: PropTypes.any,
+    /**
+     * Surcharge les classes du composant
+     */
+    classes: PropTypes.object,
+    /**
+     * Désactivé
+     */
+    disabled: PropTypes.bool,
+    /**
+     * Titre principal du panel
+     */
+    heading: PropTypes.string.isRequired,
+    /**
+     * Titre secondaire du panel
+     */
+    secondaryHeading: PropTypes.string,
+    /**
+     * Titre secondaire si désactivé
+     */
+    secondaryHeadingDisabled: PropTypes.string,
+    /**
+     * Icone dans le titre secondaire du panel
+     */
+    secondaryHeadingIcon: PropTypes.any
+} : {};
+export default withStyles(styles, { name: 'HmuiHiExpansionPanel' })(HiExpansionPanel);

package/es/HiExpansionPanel/index.js

@@ -0,0 +1 @@
+export { default } from './HiExpansionPanel';

package/es/HiForm/HiFormControl.js

@@ -107,6 +107,9 @@ class HiFormControl extends React.PureComponent {
 
     handleFocus(value) {
         this.setState({ focused: value });
+        if (value === false && this.state.hovered) {
+            this.setState({ hovered: false });
+        }
     }
 
     handleHover(value) {