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

package/HiBreadcrumb/HiStepLabel.js

@@ -0,0 +1,182 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.styles = undefined;
+
+var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
+
+var _defineProperty3 = _interopRequireDefault(_defineProperty2);
+
+var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
+
+var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
+
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _styles = require('../styles');
+
+var _HiStepIcon = require('./HiStepIcon');
+
+var _HiStepIcon2 = _interopRequireDefault(_HiStepIcon);
+
+var _HiPins = require('../HiPins');
+
+var _HiPins2 = _interopRequireDefault(_HiPins);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = exports.styles = function styles(theme) {
+    return {
+        root: {
+            display: 'flex',
+            alignItems: 'center'
+        },
+        test: {
+            marginLeft: '0 '
+        },
+        vertical: {
+            marginTop: -10,
+            marginBottom: -6
+        },
+        label: (0, _extends3.default)({
+            display: 'inline-block',
+            marginLeft: 4,
+            fontWeight: theme.typography.fontWeightRegular,
+            color: theme.palette.neutral.normal,
+            marginBottom: -4
+        }, theme.typography.body3),
+        labelContainer: {
+            marginBottom: 4,
+            maxWidth: 160
+        },
+        validated: {
+            color: theme.palette.status[116]
+        },
+        refused: {
+            color: theme.palette.negative.normal
+        },
+        active: {
+            fontWeight: theme.typography.fontWeightMedium
+        },
+        warning: {
+            color: theme.palette.middle.normal
+        },
+        pin: {
+            marginLeft: 4
+        },
+        shortEllipsis: {
+            display: 'inline-block',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'pre',
+            maxWidth: 51
+        },
+        longEllipsis: {
+            display: 'inline-block',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'pre',
+            maxWidth: 90
+        }
+    };
+};
+
+function HiStepLabel(props) {
+    var _classNames2;
+
+    var active = props.active,
+        children = props.children,
+        classes = props.classes,
+        classNameProp = props.className,
+        icon = props.icon,
+        notificationNumber = props.notificationNumber,
+        orientation = props.orientation,
+        status = props.status,
+        other = (0, _objectWithoutProperties3.default)(props, ['active', 'children', 'classes', 'className', 'icon', 'notificationNumber', 'orientation', 'status']);
+
+
+    return _react2.default.createElement(
+        'span',
+        (0, _extends3.default)({
+            className: (0, _classnames2.default)(classes.root, (0, _defineProperty3.default)({}, classes.vertical, orientation === 'vertical'), classNameProp)
+        }, other),
+        icon && _react2.default.createElement(
+            'span',
+            { className: classes.iconContainer },
+            _react2.default.createElement(_HiStepIcon2.default, { active: active, status: status })
+        ),
+        _react2.default.createElement(
+            'span',
+            { className: classes.labelContainer },
+            _react2.default.createElement(
+                'div',
+                {
+                    className: (0, _classnames2.default)(classes.label, (_classNames2 = {}, (0, _defineProperty3.default)(_classNames2, classes.validated, status === 'validated'), (0, _defineProperty3.default)(_classNames2, classes.refused, status === 'refused'), (0, _defineProperty3.default)(_classNames2, classes.warning, status === 'warning'), (0, _defineProperty3.default)(_classNames2, classes.active, active), (0, _defineProperty3.default)(_classNames2, classes.shortEllipsis, notificationNumber > 0), (0, _defineProperty3.default)(_classNames2, classes.longEllipsis, notificationNumber === 0), _classNames2))
+                },
+                children
+            ),
+            notificationNumber > 0 && _react2.default.createElement(
+                'span',
+                { className: classes.pin },
+                _react2.default.createElement(
+                    _HiPins2.default,
+                    {
+                        color: props.theme.palette.business.primary.normal,
+                        className: classes.test
+                    },
+                    notificationNumber
+                )
+            )
+        )
+    );
+}
+
+HiStepLabel.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * @ignore
+     * Sets the step as active. Is passed to child components.
+     */
+    active: _propTypes2.default.bool,
+    /**
+     * In most cases will simply be a string containing a title for the label.
+     */
+    children: _propTypes2.default.node,
+    /**
+     * Custom styles for component.
+     */
+    classes: _propTypes2.default.object.isRequired,
+    /**
+     * @ignore
+     */
+    className: _propTypes2.default.string,
+    /**
+     * @ignore
+     */
+    orientation: _propTypes2.default.oneOf(['horizontal', 'vertical']),
+
+    status: _propTypes2.default.oneOf(['unreviewed', 'refused', 'validated', 'warning'])
+} : {};
+
+HiStepLabel.defaultProps = {
+    active: false,
+    status: 'unreviewed',
+    orientation: 'vertical'
+};
+
+exports.default = (0, _styles.withStyles)(styles, { name: 'MuiHiStepLabel', withTheme: true })(HiStepLabel);

package/HiBreadcrumb/HiStepper.js

@@ -0,0 +1,125 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.styles = undefined;
+
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
+
+var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
+
+var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
+
+var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _styles = require('../styles');
+
+var _Paper = require('../Paper');
+
+var _Paper2 = _interopRequireDefault(_Paper);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = exports.styles = function styles(theme) {
+    return {
+        root: {
+            display: 'flex',
+            padding: theme.spacing.unit * 3,
+            maxWidth: 160,
+            flexDirection: 'column'
+        }
+    };
+};
+
+var HiStepper = function (_React$PureComponent) {
+    (0, _inherits3.default)(HiStepper, _React$PureComponent);
+
+    function HiStepper() {
+        (0, _classCallCheck3.default)(this, HiStepper);
+        return (0, _possibleConstructorReturn3.default)(this, (HiStepper.__proto__ || (0, _getPrototypeOf2.default)(HiStepper)).apply(this, arguments));
+    }
+
+    (0, _createClass3.default)(HiStepper, [{
+        key: 'render',
+        value: function render() {
+            var _props = this.props,
+                activeStep = _props.activeStep,
+                children = _props.children,
+                classes = _props.classes,
+                classNameProp = _props.className,
+                other = (0, _objectWithoutProperties3.default)(_props, ['activeStep', 'children', 'classes', 'className']);
+
+
+            var className = (0, _classnames2.default)(classes.root, classNameProp);
+
+            var childrenArray = _react2.default.Children.toArray(children.props.children);
+
+            var steps = childrenArray.map(function (step, index) {
+                return _react2.default.cloneElement(step, (0, _extends3.default)({ index: index, active: activeStep === index }, step.props));
+            });
+
+            return _react2.default.createElement(
+                _Paper2.default,
+                (0, _extends3.default)({ square: true, elevation: 0, className: className }, other),
+                steps
+            );
+        }
+    }]);
+    return HiStepper;
+}(_react2.default.PureComponent);
+
+HiStepper.defaultProps = {
+    activeStep: 0
+};
+HiStepper.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Set the active step (zero based index).
+     */
+    activeStep: _propTypes2.default.number,
+    /**
+     * Two or more `<Step />` components.
+     */
+    children: _propTypes2.default.node.isRequired,
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: _propTypes2.default.object.isRequired,
+    /**
+     * @ignore
+     */
+    className: _propTypes2.default.string
+} : {};
+exports.default = (0, _styles.withStyles)(styles, { name: 'MuiHiStepper' })(HiStepper);

package/HiBreadcrumb/index.js

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

package/HiDatePicker/HiDateRangeSelector.js

@@ -85,7 +85,7 @@ function buildDateRangeOptionByKey(key, t, format) {
             type = 'primary-highlight';
             break;
         case 'cd':
-            label = t.last_24h;
+            label = t.today;
             from = (0, _moment2.default)().subtract(1, 'day');
             to = (0, _moment2.default)();
             info = from.calendar() + ' ' + t.to_now;

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,24 +186,9 @@ var HiFormControl = function (_React$PureComponent) {
                 event.preventDefault();
             }
         }
-    }, {
-        key: 'handleFocus',
-        value: function handleFocus(value) {
-            this.setState({ focused: value });
-            if (value === false && this.state.hovered) {
-                this.setState({ hovered: false });
-            }
-        }
-    }, {
-        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,
@@ -266,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/HiSelectableList/HiSelectableListItem.js

@@ -79,7 +79,8 @@ 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',
@@ -170,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,
@@ -261,13 +267,7 @@ 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 && _this.getItemLabel(item),
+                        _this.getItemLabel(item),
                         _react2.default.createElement(
                             'span',
                             { className: classes.listItemSecondaryText },
@@ -295,8 +295,21 @@ var HiSelectableListItem = function (_React$Component) {
     }, {
         key: 'getItemLabel',
         value: function getItemLabel(item) {
-            if (item.color) {
+            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;
         }

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'