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

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

@@ -149,6 +149,21 @@ var HiFormControl = function (_React$PureComponent) {
 
         var _this = (0, _possibleConstructorReturn3.default)(this, (HiFormControl.__proto__ || (0, _getPrototypeOf2.default)(HiFormControl)).call(this, props));
 
+        _this.handleFocus = function (value) {
+            return function () {
+                _this.setState({ focused: value });
+                if (value === false && _this.state.hovered) {
+                    _this.setState({ hovered: false });
+                }
+            };
+        };
+
+        _this.handleHover = function (value) {
+            return function () {
+                _this.setState({ hovered: value });
+            };
+        };
+
         _this.state = {
             helperOpen: false,
             focused: false,
@@ -171,21 +186,9 @@ var HiFormControl = function (_React$PureComponent) {
                 event.preventDefault();
             }
         }
-    }, {
-        key: 'handleFocus',
-        value: function handleFocus(value) {
-            this.setState({ focused: value });
-        }
-    }, {
-        key: 'handleHover',
-        value: function handleHover(value) {
-            this.setState({ hovered: value });
-        }
     }, {
         key: 'render',
         value: function render() {
-            var _this2 = this;
-
             var _props = this.props,
                 children = _props.children,
                 classes = _props.classes,
@@ -263,18 +266,10 @@ var HiFormControl = function (_React$PureComponent) {
                 _react2.default.createElement(
                     'div',
                     {
-                        onMouseEnter: function onMouseEnter() {
-                            return _this2.handleHover(true);
-                        },
-                        onMouseLeave: function onMouseLeave() {
-                            return _this2.handleHover(false);
-                        },
-                        onFocus: function onFocus() {
-                            return _this2.handleFocus(true);
-                        },
-                        onBlur: function onBlur() {
-                            return _this2.handleFocus(false);
-                        }
+                        onMouseEnter: this.handleHover(true),
+                        onMouseLeave: this.handleHover(false),
+                        onFocus: this.handleFocus(true),
+                        onBlur: this.handleFocus(false)
                     },
                     children
                 ),

package/HiForm/HiSearchField.js

@@ -137,7 +137,7 @@ var HiSearchField = function (_React$Component) {
             if (typeof this.props.onSearch === 'undefined') {
                 this.props.callbackFilteredList(this.props.itemList);
             } else {
-                this.props.onSearch('');
+                this.props.onSearch(undefined, '');
             }
         }
     }, {

package/HiPins/HiPins.js

@@ -42,7 +42,6 @@ var styles = exports.styles = function 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/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
      */

package/HiSelectableList/HiSelectableListItem.js

@@ -69,13 +69,18 @@ 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) {
     return {
         listItem: {
             padding: 9 + 'px 0px',
-            fontWeight: theme.typography.fontWeightRegular
+            fontWeight: theme.typography.fontWeightRegular,
+            maxHeight: 40
         },
         listItemTitle: {
             padding: 9 + 'px 0px',
@@ -112,9 +117,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',
@@ -165,6 +171,11 @@ var styles = exports.styles = function styles(theme) {
                 color: '#000000'
             }
         },
+        labelHighlightColored: {
+            '&>strong': {
+                fontWeight: theme.typography.fontWeightMedium
+            }
+        },
         primaryHighlight: {
             fontWeight: theme.typography.fontWeightMedium,
             color: theme.palette.business.primary.normal,
@@ -213,8 +224,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 +243,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 +258,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:
@@ -248,14 +267,12 @@ var HiSelectableListItem = function (_React$Component) {
                     return _react2.default.createElement(
                         'div',
                         { className: itemTextClass, 'data-id': item.id },
-                        item.labelHighlight && _react2.default.createElement('span', {
-                            className: classes.labelHighlight,
-                            dangerouslySetInnerHTML: {
-                                __html: (0, _hiHelpers.escapeHTML)(item.labelHighlight)
-                            }
-                        }),
-                        !item.labelHighlight && item.label,
-                        _react2.default.createElement('span', { className: classes.listItemSecondaryText }),
+                        _this.getItemLabel(item),
+                        _react2.default.createElement(
+                            'span',
+                            { className: classes.listItemSecondaryText },
+                            item.secondaryLabel
+                        ),
                         childrenIndicator
                     );
             }
@@ -275,6 +292,27 @@ var HiSelectableListItem = function (_React$Component) {
         value: function toggleHover() {
             this.setState({ hover: !this.state.hover });
         }
+    }, {
+        key: 'getItemLabel',
+        value: function getItemLabel(item) {
+            var classes = this.props.classes;
+
+            if (!item.labelHighlight && item.color && this.props.selected) {
+                return _react2.default.createElement(_HiColoredLabel2.default, { color: item.color, label: item.label });
+            } else if (item.labelHighlight) {
+                var mLabel = _react2.default.createElement('span', {
+                    className: item.color ? classes.labelHighlightColored : classes.labelHighlight,
+                    dangerouslySetInnerHTML: {
+                        __html: (0, _hiHelpers.escapeHTML)(item.labelHighlight)
+                    }
+                });
+                if (item.color && this.props.selected) {
+                    return _react2.default.createElement(_HiColoredLabel2.default, { color: item.color, label: mLabel });
+                }
+                return mLabel;
+            }
+            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/HiTable/BodyCells/CellLayout.js

@@ -83,6 +83,10 @@ var styles = exports.styles = function styles(theme) {
         lookedUp: {
             background: 'linear-gradient(0deg, transparent 25%, #FFFF8D 10%, #FFFF8D 75%, transparent 30%)',
             borderRadius: '45%'
+        },
+        pins: {
+            position: 'relative',
+            top: 3
         }
     };
 };
@@ -196,7 +200,7 @@ var CellLayout = function (_React$Component) {
                         },
                         _react2.default.createElement(
                             _HiPins2.default,
-                            { color: theme.palette.business.primary.normal },
+                            { color: theme.palette.business.primary.normal, className: classes.pins },
                             childrenCount
                         )
                     )

package/HiTable/BodyCells/CellStatus.js

@@ -55,6 +55,10 @@ var styles = exports.styles = function styles(theme) {
             display: 'inline-flex',
             alignItems: 'baseline',
             maxWidth: 'calc(100% - 36px)'
+        },
+        pins: {
+            position: 'relative',
+            bottom: 1
         }
     };
 };
@@ -93,7 +97,7 @@ var CellStatus = function (_React$PureComponent) {
                         _react2.default.createElement(_HiColoredLabel2.default, { label: value, color: color }),
                         _react2.default.createElement(
                             _HiPins2.default,
-                            { color: color, onClick: onOpenDetails },
+                            { color: color, onClick: onOpenDetails, className: classes.pins },
                             nbOperations
                         )
                     ) : _react2.default.createElement(_HiColoredLabel2.default, { label: value, color: color })

package/HiTable/BodyCells/CellText.js

@@ -66,7 +66,8 @@ var styles = exports.styles = function styles(theme) {
             display: 'inline-block',
             overflow: 'hidden',
             textOverflow: 'ellipsis',
-            whiteSpace: 'pre'
+            whiteSpace: 'pre',
+            width: '100%'
         },
         noEllipsisSpan: {
             display: 'inline-block',

package/HiTable/ColumnFilter.js

@@ -345,7 +345,11 @@ var ColumnFilter = function (_React$Component) {
                 _react2.default.createElement(
                     'div',
                     { className: classes.menuItemFilter },
-                    translations.filter,
+                    _react2.default.createElement(
+                        'span',
+                        { style: { marginRight: 4 } },
+                        translations.filter
+                    ),
                     _react2.default.createElement(
                         _HiPins2.default,
                         {

package/HiTable/HiTable.js

@@ -705,7 +705,8 @@ var HiTable = function (_React$Component) {
                 translations = _props.translations,
                 view = _props.view,
                 groupBy = _props.groupBy,
-                lookupColumns = _props.lookupColumns;
+                lookupColumns = _props.lookupColumns,
+                loading = _props.loading;
             var _state = this.state,
                 dateUpdate = _state.dateUpdate,
                 isScrollToBottom = _state.isScrollToBottom,
@@ -780,7 +781,8 @@ var HiTable = function (_React$Component) {
                             groupBy: groupBy,
                             onClickNext: this.handleNextStickyRow,
                             groupByIds: groupByIds,
-                            lookupColumns: lookupColumns
+                            lookupColumns: lookupColumns,
+                            loading: loading
                         }),
                         infiniteScroll && _react2.default.createElement(_HiTableFooterScroll2.default, {
                             tabId: tabId,
@@ -849,7 +851,8 @@ HiTable.defaultProps = {
         }
     },
     view: 'l',
-    lookupColumns: []
+    lookupColumns: [],
+    loading: false
 };
 HiTable.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -880,6 +883,10 @@ HiTable.propTypes = process.env.NODE_ENV !== "production" ? {
      * Active le filtre sur les colonnes filtrables
      */
     filterable: _propTypes2.default.bool,
+    /**
+     * Id de la colonne par laquelle sont regroupé les éléments
+     */
+    groupBy: _propTypes2.default.string,
     /**
      * Ajoute le loader et le requestNextDatas en fin de tableau (si infiniteScroll activé)
      */
@@ -892,6 +899,10 @@ HiTable.propTypes = process.env.NODE_ENV !== "production" ? {
      * Ajoute l'infinite scroll
      */
     infiniteScroll: _propTypes2.default.bool,
+    /**
+     * État du tableau en cours de chargement des données
+     */
+    loading: _propTypes2.default.bool,
     /**
      * Identifiant de la ou des colonnes sur la/lesquelles il y a une 'lookup' search
      */
@@ -1003,10 +1014,6 @@ HiTable.propTypes = process.env.NODE_ENV !== "production" ? {
      * Taille du tableau (L/M/S),
      * définit l'espace entre les cellules et leurs tailles par default
      */
-    view: _propTypes2.default.oneOf(['l', 'm', 's']),
-    /**
-     * Id de la colonne par laquelle sont regroupé les éléments
-     */
-    groupBy: _propTypes2.default.string
+    view: _propTypes2.default.oneOf(['l', 'm', 's'])
 } : {};
 exports.default = (0, _styles.withStyles)(styles, { withTheme: true, name: 'HmuiHiTable' })(HiTable);

package/HiTable/HiTableBody.js

@@ -281,7 +281,8 @@ var HiTableBody = function (_React$Component) {
                 numberLocale = _props.numberLocale,
                 groupByIds = _props.groupByIds,
                 sortedColumnId = _props.sortedColumnId,
-                lookupColumns = _props.lookupColumns;
+                lookupColumns = _props.lookupColumns,
+                loading = _props.loading;
             var _state = this.state,
                 openedParentRowId = _state.openedParentRowId,
                 openedDetailsRowIdList = _state.openedDetailsRowIdList;
@@ -421,7 +422,11 @@ var HiTableBody = function (_React$Component) {
                 {
                     id: tabId + '-body',
                     className: classes.tbody,
-                    style: { height: height },
+                    style: (0, _extends3.default)({
+                        height: height
+                    }, loading && {
+                        opacity: 0.6
+                    }),
                     onScroll: onScroll
                 },
                 tableRows.map(function (tableRow) {
@@ -442,7 +447,8 @@ HiTableBody.defaultProps = {
     dense: false,
     height: 450,
     sticky: true,
-    view: 'l'
+    view: 'l',
+    loading: false
 };
 HiTableBody.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -474,6 +480,10 @@ HiTableBody.propTypes = process.env.NODE_ENV !== "production" ? {
      * Hauteur du tableau (px)
      */
     height: _propTypes2.default.number,
+    /**
+     * État du tableau en cours de chargement des données
+     */
+    loading: _propTypes2.default.bool,
     /**
      * Identifiant de la ou des colonnes sur la/lesquelles il y a une 'lookup' search
      */

package/HiTable/OrderColumns.js

@@ -141,7 +141,8 @@ var styles = exports.styles = function styles(theme) {
         controlLabelRoot: {
             marginLeft: 6,
             marginBottom: 8,
-            fontSize: 15
+            fontSize: 15,
+            width: 160
         },
         switchLabelRoot: {
             marginLeft: 15,
@@ -150,7 +151,10 @@ var styles = exports.styles = function styles(theme) {
         columnLabel: {
             position: 'relative',
             top: 5,
-            left: 5
+            left: 5,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap'
         },
         label: {
             fontWeight: 'inherit'