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

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,8 +218,12 @@ 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':
@@ -228,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':
@@ -239,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:
@@ -254,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
                     );
             }
@@ -275,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/hmus/images/countries/' + isoCode.toLowerCase() + '.svg';
+            var path = '/static/hmu/images/countries/' + isoCode.toLowerCase() + '.svg';
 
             var tooltipContent = _react2.default.createElement(
                 'div',

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/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) {

package/es/HiSelect/HiSelect.js

@@ -83,43 +83,28 @@ class HiSelect extends React.PureComponent {
 
         // Check if value is in options
         let valueInOptions = false;
-        const val = this.props.value;
+        const 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(item => {
+                if (!valueInOptions && val.indexOf(item.id) !== -1) {
+                    valueInOptions = true;
+                }
+            });
         }
-        // Check if an option match value prop.
-        this.props.options.forEach(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
-            const hierarchy = {};
-            const hierarchySelected = {};
-            let value = props.value || [];
-            if (!Array.isArray(value)) value = [props.value];
-            props.options.forEach(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);
-                    }
-                }
-            });
+            const 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) {
@@ -155,6 +140,33 @@ class HiSelect extends React.PureComponent {
             });
             this.setState({ nbOptions: optionsLength });
         }
+
+        if (nextProps.hierarchic === true && nextProps.options.length > 1) {
+            const hierarchyTrees = this.buildHierarchyTrees(nextProps);
+            this.setState({ hierarchy: hierarchyTrees.hierarchy, hierarchySelected: hierarchyTrees.hierarchySelected });
+        }
+    }
+
+    buildHierarchyTrees(props) {
+        // Construct two associative arrays
+        // hierarchy[parentId] => children
+        // hierarchySelected[parentId] => selected children
+        const hierarchy = {};
+        const hierarchySelected = {};
+        let value = props.value || [];
+        if (!Array.isArray(value)) value = [props.value];
+        props.options.forEach(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, hierarchySelected };
     }
 
     // Key down on list items
@@ -201,7 +213,8 @@ class HiSelect extends React.PureComponent {
             hoverIcon,
             checkedIcon,
             hierarchic,
-            id
+            id,
+            placeholder
         } = this.props;
 
         const { open, suggestions, focused } = this.state;
@@ -230,7 +243,7 @@ class HiSelect extends React.PureComponent {
         }
 
         if (displayAsChip) {
-            const chipFilter = React.createElement(HiChip, { label: display, onDelete: this.handleRequestDelete });
+            const chipFilter = React.createElement(HiChip, { label: placeholder || display, onDelete: this.handleRequestDelete });
             if (display) {
                 display = chipFilter;
             }
@@ -266,7 +279,7 @@ class HiSelect extends React.PureComponent {
                     null,
                     React.createElement(SelectInput, {
                         id: id,
-                        value: display,
+                        value: placeholder || display,
                         open: open,
                         focused: focused,
                         type: type,
@@ -696,6 +709,11 @@ HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
      * Les items parents sont sélectionnables
      */
     parentItemSelectable: PropTypes.bool,
+    /**
+     * Placeholder affiché lorsque le select est fermé
+     * Surcharge le placeholder par défaut
+     */
+    placeholder: PropTypes.string,
     /**
      * Affiche un input de recherche permettant de filtrer les options
      */

package/es/HiSelectableList/HiSelectableListItem.js

@@ -9,6 +9,7 @@ import HiCheckbox from '../HiCheckbox';
 import withStyles from '../styles/withStyles';
 import { escapeHTML } from '../utils/hiHelpers';
 import HiIconBuilder from '../utils/HiIconBuilder';
+import HiColoredLabel from '../HiColoredLabel';
 
 export const styles = theme => ({
     listItem: {
@@ -50,9 +51,10 @@ export const styles = theme => ({
         fontWeight: 'inherit',
         width: '100%'
     }),
-    listItemSecondaryText: _extends({}, theme.typography.body4, {
+    listItemSecondaryText: _extends({}, theme.typography.body5, {
         fontWeight: theme.typography.fontWeightLight,
-        marginLeft: theme.spacing.unit
+        marginLeft: theme.spacing.unit,
+        color: theme.palette.neutral.normal
     }),
     listItemInfoText: _extends({
         whiteSpace: 'nowrap',
@@ -139,8 +141,12 @@ class HiSelectableListItem extends React.Component {
                         'div',
                         { className: classes.listItemContent, 'data-id': item.id },
                         !effectiveCheckbox && React.createElement(HiIconBuilder, { icon: item.icon, className: classes.icon }),
-                        item.label,
-                        React.createElement('span', { className: classes.listItemSecondaryText }),
+                        this.getItemLabel(item),
+                        React.createElement(
+                            'span',
+                            { className: classes.listItemSecondaryText },
+                            item.secondaryLabel
+                        ),
                         childrenIndicator
                     );
                 case 'image':
@@ -154,8 +160,12 @@ class HiSelectableListItem extends React.Component {
                         'div',
                         { className: classes.listItemContent, 'data-id': item.id },
                         img,
-                        item.label,
-                        React.createElement('span', { className: classes.listItemSecondaryText }),
+                        this.getItemLabel(item),
+                        React.createElement(
+                            'span',
+                            { className: classes.listItemSecondaryText },
+                            item.secondaryLabel
+                        ),
                         childrenIndicator
                     );
                 case 'primary-highlight':
@@ -165,7 +175,7 @@ class HiSelectableListItem extends React.Component {
                     return React.createElement(
                         'div',
                         { className: itemPrimaryHighlightClass, 'data-id': item.id },
-                        item.label
+                        this.getItemLabel(item)
                     );
                 case 'text':
                 default:
@@ -182,8 +192,12 @@ class HiSelectableListItem extends React.Component {
                                 __html: escapeHTML(item.labelHighlight)
                             }
                         }),
-                        !item.labelHighlight && item.label,
-                        React.createElement('span', { className: classes.listItemSecondaryText }),
+                        !item.labelHighlight && this.getItemLabel(item),
+                        React.createElement(
+                            'span',
+                            { className: classes.listItemSecondaryText },
+                            item.secondaryLabel
+                        ),
                         childrenIndicator
                     );
             }
@@ -201,6 +215,13 @@ class HiSelectableListItem extends React.Component {
         this.setState({ hover: !this.state.hover });
     }
 
+    getItemLabel(item) {
+        if (item.color) {
+            return React.createElement(HiColoredLabel, { color: item.color, label: item.label });
+        }
+        return item.label;
+    }
+
     /**
      * Build list item from type
      */