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

package/es/HiBreadcrumb/HiStepper.js

@@ -0,0 +1,62 @@
+import _extends from 'babel-runtime/helpers/extends';
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { withStyles } from '../styles';
+import Paper from '../Paper';
+
+export const styles = theme => ({
+    root: {
+        display: 'flex',
+        padding: theme.spacing.unit * 3,
+        maxWidth: 160,
+        flexDirection: 'column'
+    }
+});
+
+class HiStepper extends React.PureComponent {
+
+    render() {
+        const _props = this.props,
+              { activeStep, children, classes, className: classNameProp } = _props,
+              other = _objectWithoutProperties(_props, ['activeStep', 'children', 'classes', 'className']);
+
+        const className = classNames(classes.root, classNameProp);
+
+        const childrenArray = React.Children.toArray(children.props.children);
+
+        const steps = childrenArray.map((step, index) => {
+            return React.cloneElement(step, _extends({ index, active: activeStep === index }, step.props));
+        });
+
+        return React.createElement(
+            Paper,
+            _extends({ square: true, elevation: 0, className: className }, other),
+            steps
+        );
+    }
+}
+
+HiStepper.defaultProps = {
+    activeStep: 0
+};
+HiStepper.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Set the active step (zero based index).
+     */
+    activeStep: PropTypes.number,
+    /**
+     * Two or more `<Step />` components.
+     */
+    children: PropTypes.node.isRequired,
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: PropTypes.object.isRequired,
+    /**
+     * @ignore
+     */
+    className: PropTypes.string
+} : {};
+export default withStyles(styles, { name: 'MuiHiStepper' })(HiStepper);

package/es/HiBreadcrumb/index.js

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

package/es/HiDatePicker/HiDateRangeSelector.js

@@ -27,7 +27,7 @@ export function buildDateRangeOptionByKey(key, t, format) {
             type = 'primary-highlight';
             break;
         case 'cd':
-            label = t.last_24h;
+            label = t.today;
             from = moment().subtract(1, 'day');
             to = moment();
             info = `${from.calendar()} ${t.to_now}`;

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

@@ -87,6 +87,17 @@ class HiFormControl extends React.PureComponent {
     constructor(props) {
         super(props);
 
+        this.handleFocus = value => () => {
+            this.setState({ focused: value });
+            if (value === false && this.state.hovered) {
+                this.setState({ hovered: false });
+            }
+        };
+
+        this.handleHover = value => () => {
+            this.setState({ hovered: value });
+        };
+
         this.state = {
             helperOpen: false,
             focused: false,
@@ -105,14 +116,6 @@ class HiFormControl extends React.PureComponent {
         }
     }
 
-    handleFocus(value) {
-        this.setState({ focused: value });
-    }
-
-    handleHover(value) {
-        this.setState({ hovered: value });
-    }
-
     render() {
         const _props = this.props,
               {
@@ -192,10 +195,10 @@ class HiFormControl extends React.PureComponent {
             React.createElement(
                 'div',
                 {
-                    onMouseEnter: () => this.handleHover(true),
-                    onMouseLeave: () => this.handleHover(false),
-                    onFocus: () => this.handleFocus(true),
-                    onBlur: () => this.handleFocus(false)
+                    onMouseEnter: this.handleHover(true),
+                    onMouseLeave: this.handleHover(false),
+                    onFocus: this.handleFocus(true),
+                    onBlur: this.handleFocus(false)
                 },
                 children
             ),

package/es/HiForm/HiSearchField.js

@@ -85,7 +85,7 @@ class HiSearchField extends React.Component {
         if (typeof this.props.onSearch === 'undefined') {
             this.props.callbackFilteredList(this.props.itemList);
         } else {
-            this.props.onSearch('');
+            this.props.onSearch(undefined, '');
         }
     }
 

package/es/HiPins/HiPins.js

@@ -15,7 +15,6 @@ export const styles = theme => ({
         textAlign: 'center',
         borderRadius: '45px',
         verticalAlign: 'middle',
-        margin: 0.5 * theme.spacing.unit,
         fontSize: 11,
         fontWeight: theme.typography.fontWeightMedium,
         fontFamily: theme.typography.fontFamily

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,11 +9,13 @@ 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: {
         padding: `${9}px 0px`,
-        fontWeight: theme.typography.fontWeightRegular
+        fontWeight: theme.typography.fontWeightRegular,
+        maxHeight: 40
     },
     listItemTitle: {
         padding: `${9}px 0px`,
@@ -50,9 +52,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',
@@ -103,6 +106,11 @@ export const styles = theme => ({
             color: '#000000'
         }
     },
+    labelHighlightColored: {
+        '&>strong': {
+            fontWeight: theme.typography.fontWeightMedium
+        }
+    },
     primaryHighlight: {
         fontWeight: theme.typography.fontWeightMedium,
         color: theme.palette.business.primary.normal,
@@ -139,8 +147,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 +166,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 +181,7 @@ class HiSelectableListItem extends React.Component {
                     return React.createElement(
                         'div',
                         { className: itemPrimaryHighlightClass, 'data-id': item.id },
-                        item.label
+                        this.getItemLabel(item)
                     );
                 case 'text':
                 default:
@@ -176,14 +192,12 @@ class HiSelectableListItem extends React.Component {
                     return React.createElement(
                         'div',
                         { className: itemTextClass, 'data-id': item.id },
-                        item.labelHighlight && React.createElement('span', {
-                            className: classes.labelHighlight,
-                            dangerouslySetInnerHTML: {
-                                __html: escapeHTML(item.labelHighlight)
-                            }
-                        }),
-                        !item.labelHighlight && item.label,
-                        React.createElement('span', { className: classes.listItemSecondaryText }),
+                        this.getItemLabel(item),
+                        React.createElement(
+                            'span',
+                            { className: classes.listItemSecondaryText },
+                            item.secondaryLabel
+                        ),
                         childrenIndicator
                     );
             }
@@ -201,6 +215,25 @@ class HiSelectableListItem extends React.Component {
         this.setState({ hover: !this.state.hover });
     }
 
+    getItemLabel(item) {
+        const { classes } = this.props;
+        if (!item.labelHighlight && item.color && this.props.selected) {
+            return React.createElement(HiColoredLabel, { color: item.color, label: item.label });
+        } else if (item.labelHighlight) {
+            const mLabel = React.createElement('span', {
+                className: item.color ? classes.labelHighlightColored : classes.labelHighlight,
+                dangerouslySetInnerHTML: {
+                    __html: escapeHTML(item.labelHighlight)
+                }
+            });
+            if (item.color && this.props.selected) {
+                return React.createElement(HiColoredLabel, { color: item.color, label: mLabel });
+            }
+            return mLabel;
+        }
+        return item.label;
+    }
+
     /**
      * Build list item from type
      */

package/es/HiTable/BodyCells/CellCountry.js

@@ -49,7 +49,7 @@ class CellCountry extends React.PureComponent {
     render() {
         const { classes, value, isoCode, view } = this.props;
 
-        let path = '/static/hmus/images/countries/' + isoCode.toLowerCase() + '.svg';
+        let path = '/static/hmu/images/countries/' + isoCode.toLowerCase() + '.svg';
 
         let tooltipContent = React.createElement(
             'div',

package/es/HiTable/BodyCells/CellLayout.js

@@ -28,6 +28,10 @@ export const styles = theme => ({
     lookedUp: {
         background: `linear-gradient(0deg, transparent 25%, #FFFF8D 10%, #FFFF8D 75%, transparent 30%)`,
         borderRadius: '45%'
+    },
+    pins: {
+        position: 'relative',
+        top: 3
     }
 });
 
@@ -115,7 +119,7 @@ class CellLayout extends React.Component {
                     },
                     React.createElement(
                         HiPins,
-                        { color: theme.palette.business.primary.normal },
+                        { color: theme.palette.business.primary.normal, className: classes.pins },
                         childrenCount
                     )
                 )

package/es/HiTable/BodyCells/CellStatus.js

@@ -11,6 +11,10 @@ export const styles = theme => ({
         display: 'inline-flex',
         alignItems: 'baseline',
         maxWidth: 'calc(100% - 36px)'
+    },
+    pins: {
+        position: 'relative',
+        bottom: 1
     }
 });
 
@@ -33,7 +37,7 @@ class CellStatus extends React.PureComponent {
                     React.createElement(HiColoredLabel, { label: value, color: color }),
                     React.createElement(
                         HiPins,
-                        { color: color, onClick: onOpenDetails },
+                        { color: color, onClick: onOpenDetails, className: classes.pins },
                         nbOperations
                     )
                 ) : React.createElement(HiColoredLabel, { label: value, color: color })

package/es/HiTable/BodyCells/CellText.js

@@ -17,7 +17,8 @@ export const styles = theme => ({
         display: 'inline-block',
         overflow: 'hidden',
         textOverflow: 'ellipsis',
-        whiteSpace: 'pre'
+        whiteSpace: 'pre',
+        width: '100%'
     },
     noEllipsisSpan: {
         display: 'inline-block',

package/es/HiTable/ColumnFilter.js

@@ -253,7 +253,11 @@ class ColumnFilter extends React.Component {
             React.createElement(
                 'div',
                 { className: classes.menuItemFilter },
-                translations.filter,
+                React.createElement(
+                    'span',
+                    { style: { marginRight: 4 } },
+                    translations.filter
+                ),
                 React.createElement(
                     HiPins,
                     {