@hipay/hipay-material-ui 1.0.0-beta.2 → 1.0.0-beta.21

package/HiBreadcrumb/HiStepLabel.js

@@ -0,0 +1,248 @@
+'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 _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 _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',
+            marginTop: -11,
+            marginBottom: -5
+        },
+        frontRoot: {
+            marginTop: -12,
+            marginBottom: -7
+        },
+        frontDarkRoot: {
+            marginTop: -13,
+            marginBottom: -6
+        },
+        hipin: {
+            marginLeft: 0
+        },
+        label: (0, _extends3.default)({
+            display: 'inline-block',
+            marginLeft: 4,
+            fontWeight: theme.typography.fontWeightRegular,
+            color: theme.palette.neutral.normal,
+            marginBottom: -4,
+            '&:hover': {
+                cursor: 'pointer'
+            }
+        }, theme.typography.body3),
+        labelContainer: {
+            marginBottom: 4
+        },
+        largeLabelContainer: {
+            maxWidth: 300
+        },
+        shortLabelContainer: {
+            maxWidth: 160
+        },
+        frontLabel: {
+            fontSize: 18,
+            fontWeight: theme.typography.fontWeightLight,
+            marginLeft: 11
+        },
+        validated: {
+            color: theme.palette.status[116]
+        },
+        refused: {
+            color: theme.palette.negative.normal
+        },
+        active: {
+            color: '#00ADE9'
+        },
+        activeStep: {
+            fontWeight: theme.typography.fontWeightMedium
+        },
+        warning: {
+            color: theme.palette.middle.normal
+        },
+        light: {
+            color: '#FFFFFF'
+        },
+        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
+        }
+    };
+};
+
+var HiStepLabel = function (_React$PureComponent) {
+    (0, _inherits3.default)(HiStepLabel, _React$PureComponent);
+
+    function HiStepLabel() {
+        (0, _classCallCheck3.default)(this, HiStepLabel);
+        return (0, _possibleConstructorReturn3.default)(this, (HiStepLabel.__proto__ || (0, _getPrototypeOf2.default)(HiStepLabel)).apply(this, arguments));
+    }
+
+    (0, _createClass3.default)(HiStepLabel, [{
+        key: 'render',
+        value: function render() {
+            var _classNames, _classNames2, _classNames3;
+
+            var _props = this.props,
+                active = _props.active,
+                children = _props.children,
+                classes = _props.classes,
+                classNameProp = _props.className,
+                notificationNumber = _props.notificationNumber,
+                status = _props.status,
+                type = _props.type,
+                other = (0, _objectWithoutProperties3.default)(_props, ['active', 'children', 'classes', 'className', 'notificationNumber', 'status', 'type']);
+
+
+            return _react2.default.createElement(
+                'span',
+                (0, _extends3.default)({
+                    className: (0, _classnames2.default)(classes.root, classNameProp, (_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.frontRoot, type === 'front-light'), (0, _defineProperty3.default)(_classNames, classes.frontDarkRoot, type === 'front-dark'), _classNames))
+                }, other),
+                _react2.default.createElement(
+                    'span',
+                    { className: classes.iconContainer },
+                    _react2.default.createElement(_HiStepIcon2.default, { active: active, status: status, type: type })
+                ),
+                _react2.default.createElement(
+                    'span',
+                    {
+                        className: (0, _classnames2.default)(classes.labelContainer, (_classNames2 = {}, (0, _defineProperty3.default)(_classNames2, classes.largeLabelContainer, type !== 'back'), (0, _defineProperty3.default)(_classNames2, classes.shortLabelContainer, type === 'back'), _classNames2))
+                    },
+                    _react2.default.createElement(
+                        'div',
+                        {
+                            className: (0, _classnames2.default)(classes.label, (_classNames3 = {}, (0, _defineProperty3.default)(_classNames3, classes.validated, status === 'validated'), (0, _defineProperty3.default)(_classNames3, classes.refused, status === 'refused'), (0, _defineProperty3.default)(_classNames3, classes.warning, status === 'warning'), (0, _defineProperty3.default)(_classNames3, classes.active, status === 'active'), (0, _defineProperty3.default)(_classNames3, classes.light, type === 'front-light'), (0, _defineProperty3.default)(_classNames3, classes.activeStep, active), (0, _defineProperty3.default)(_classNames3, classes.frontLabel, type !== 'back'), (0, _defineProperty3.default)(_classNames3, classes.shortEllipsis, notificationNumber > 0), (0, _defineProperty3.default)(_classNames3, classes.longEllipsis, notificationNumber === 0 && type === 'back'), _classNames3))
+                        },
+                        children
+                    ),
+                    notificationNumber > 0 && _react2.default.createElement(
+                        'span',
+                        { className: classes.pin },
+                        _react2.default.createElement(
+                            _HiPins2.default,
+                            {
+                                color: this.props.theme.palette.business.primary.normal,
+                                className: classes.hipin
+                            },
+                            notificationNumber
+                        )
+                    )
+                )
+            );
+        }
+    }]);
+    return HiStepLabel;
+}(_react2.default.PureComponent);
+
+HiStepLabel.defaultProps = {
+    active: false,
+    children: '',
+    notificationNumber: 0,
+    status: 'unreviewed',
+    type: 'back'
+};
+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,
+    /**
+     * The value to be displayed in the HiPin on the right of the label
+     */
+    notificationNumber: _propTypes2.default.number,
+    /**
+     * 'Unreviewed', 'refused', 'validated' et 'warning' sont les statuts pour tous les types de breadcrumb. 'active' est spécifique au Front dark
+     */
+    status: _propTypes2.default.oneOf(['unreviewed', 'refused', 'validated', 'warning', 'active']),
+    /**
+     * The Breadcrumb type
+     */
+    type: _propTypes2.default.oneOf(['back', 'front-light', 'front-dark'])
+} : {};
+exports.default = (0, _styles.withStyles)(styles, { name: 'MuiHiStepLabel', withTheme: true })(HiStepLabel);

package/HiBreadcrumb/HiStepper.js

@@ -0,0 +1,106 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.styles = undefined;
+
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+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: {
+            width: 340
+        }
+    };
+};
+
+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;
+
+
+            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(
+                'div',
+                { className: classes.root },
+                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
+} : {};
+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/HiCheckbox/HiCheckbox.js

@@ -65,7 +65,10 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 var styles = exports.styles = function styles(theme) {
     return {
-        root: {},
+        root: {
+            marginRight: 12,
+            marginLeft: 12
+        },
         checked: {
             color: theme.palette.business.primary.normal
         },

package/HiChip/HiChip.js

@@ -81,9 +81,12 @@ var styles = exports.styles = function styles(theme) {
             whiteSpace: 'nowrap',
             color: theme.palette.neutral.dark,
             overflow: 'hidden',
-            width: '100%',
             textOverflow: 'ellipsis'
         },
+        prefix: {
+            color: theme.palette.neutral.dark,
+            paddingRight: 4
+        },
         navigate: {
             // Remove grey highlight
             WebkitTapHighlightColor: 'transparent',
@@ -115,7 +118,8 @@ function HiChip(props) {
         img = props.img,
         onPrevious = props.onPrevious,
         onNext = props.onNext,
-        onDelete = props.onDelete;
+        onDelete = props.onDelete,
+        prefix = props.prefix;
 
 
     return _react2.default.createElement(
@@ -123,13 +127,19 @@ function HiChip(props) {
         {
             className: (0, _classnames2.default)(classes.root, (_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.leftNavigation, onPrevious), (0, _defineProperty3.default)(_classNames, classes.rightNavigation, onNext), (0, _defineProperty3.default)(_classNames, classes.deletable, onDelete), _classNames))
         },
+        prefix && _react2.default.createElement(
+            'span',
+            { className: classes.prefix },
+            prefix,
+            ' : '
+        ),
         img && _react2.default.createElement('img', { className: classes.badge, src: img, alt: img }),
-        icon && _react2.default.createElement(_HiIconBuilder2.default, { className: classes.icon, icon: icon }),
+        icon && _react2.default.createElement(_HiIconBuilder2.default, { className: classes.icon, icon: icon, size: 16 }),
         onPrevious && _react2.default.createElement(_HiIconBuilder2.default, {
             className: (0, _classnames2.default)(classes.navigate),
             icon: 'menuLeft',
             onClick: onPrevious,
-            size: 20
+            size: 16
         }),
         _react2.default.createElement(
             'span',
@@ -140,13 +150,13 @@ function HiChip(props) {
             className: (0, _classnames2.default)(classes.navigate),
             icon: 'menuRight',
             onClick: onNext,
-            size: 20
+            size: 16
         }),
         onDelete && _react2.default.createElement(_HiIconBuilder2.default, {
             classes: { root: classes.eraseIcon },
             icon: 'closeCircle',
             onClick: onDelete,
-            size: 20
+            size: 16
         })
     );
 }

package/HiChip/HiChipSwitch.js

@@ -213,7 +213,8 @@ var HiChipSwitch = function (_React$PureComponent) {
                 active = _props.active,
                 onClick = _props.onClick,
                 onSelectionClick = _props.onSelectionClick,
-                selection = _props.selection;
+                selection = _props.selection,
+                selectionTitle = _props.selectionTitle;
 
             var selectionProps = {
                 tabIndex: '-1'
@@ -223,7 +224,8 @@ var HiChipSwitch = function (_React$PureComponent) {
                     onClick: this.handleClickSelection,
                     role: 'button',
                     tabIndex: '0',
-                    onKeyDown: this.handleKeyDownSelection
+                    onKeyDown: this.handleKeyDownSelection,
+                    title: selectionTitle
                 };
             }
 
@@ -267,7 +269,8 @@ var HiChipSwitch = function (_React$PureComponent) {
 HiChipSwitch.defaultProps = {
     activeIcon: 'check',
     active: false,
-    selection: null
+    selection: null,
+    selectionTitle: ''
 };
 HiChipSwitch.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -301,6 +304,10 @@ HiChipSwitch.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * nombre de valeurs selectionnées.
      */
-    selection: _propTypes2.default.number
+    selection: _propTypes2.default.number,
+    /**
+     * Title de la selection.
+     */
+    selectionTitle: _propTypes2.default.string
 } : {};
 exports.default = (0, _withStyles2.default)(styles, { name: 'HmuiHiChipSwitch' })(HiChipSwitch);

package/HiColoredLabel/HiColoredLabel.js

@@ -60,6 +60,7 @@ var styles = exports.styles = function styles(theme) {
  */
 function HiColoredLabel(props) {
     var classes = props.classes,
+        className = props.className,
         label = props.label,
         color = props.color,
         active = props.active,
@@ -74,7 +75,7 @@ function HiColoredLabel(props) {
     return _react2.default.createElement(
         'div',
         {
-            className: (0, _classnames2.default)(classes.root, (0, _defineProperty3.default)({}, classes.beta, beta)),
+            className: (0, _classnames2.default)(classes.root, (0, _defineProperty3.default)({}, classes.beta, beta), className),
             style: {
                 backgroundColor: active ? color : (0, _colorManipulator.fade)(color, 0.08),
                 color: active ? (0, _colorManipulator.getContrastedTextColor)(color, '#4C4C4C', '#FFF') : color,
@@ -99,6 +100,10 @@ HiColoredLabel.propTypes = process.env.NODE_ENV !== "production" ? {
      * Surcharge les classes du composant
      */
     classes: _propTypes2.default.object,
+    /**
+     * Surcharge les classes du composant
+     */
+    className: _propTypes2.default.string,
     /**
      * Couleur du text & du background
      */
@@ -106,11 +111,12 @@ HiColoredLabel.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Label à afficher
      */
-    label: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]).isRequired
+    label: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number, _propTypes2.default.node]).isRequired
 } : {};
 
 HiColoredLabel.defaultProps = {
-    active: false
+    active: false,
+    color: '#737373'
 };
 
 exports.default = (0, _withStyles2.default)(styles, { name: 'HmuiHiColoredLabel' })(HiColoredLabel);

package/HiDatePicker/HiDatePicker.js

@@ -107,6 +107,7 @@ var HiDatePicker = function (_React$Component) {
         _this.handleDayChange = _this.handleDayChange.bind(_this);
         _this.handleCurrentMonthChange = _this.handleCurrentMonthChange.bind(_this);
         _this.handleReset = _this.handleReset.bind(_this);
+        _this.handleTimeChange = _this.handleTimeChange.bind(_this);
         _this.openPanel = _this.openPanel.bind(_this);
         _this.renderCaption = _this.renderCaption.bind(_this);
         _this.renderOverlay = _this.renderOverlay.bind(_this);
@@ -130,33 +131,26 @@ var HiDatePicker = function (_React$Component) {
     }, {
         key: 'handleDayChange',
         value: function handleDayChange(day, modifiers) {
-            var _this2 = this;
-
-            this.timeout = setTimeout(function () {
-                if (_this2.datePickerInput && _this2.datePickerInput.getInput()) {
-                    _this2.datePickerInput.getInput().focus();
-                }
-            }, 0);
-
-            if (modifiers.disabled) {
-                return; // TODO: delete ??
-            }
-
-            if (this.props.onChange) {
-                if (modifiers.selected) {
-                    // Deselect day
-                    this.props.onChange(undefined);
-                } else {
-                    // Keep Time if set
-                    if (this.props.enableTime) {
-                        if (this.props.value) {
-                            day.setHours(this.props.value.getHours(), this.props.value.getMinutes());
-                        } else {
-                            day.setHours(0, 0);
-                        }
+            if (modifiers.selected) {
+                // Deselect day
+                this.props.onChange(undefined);
+            } else {
+                // Keep Time if set
+                if (this.props.enableTime && day !== undefined) {
+                    if (this.props.value) {
+                        day.setHours(this.props.value.getHours(), this.props.value.getMinutes());
+                    } else {
+                        day.setHours(0, 0);
                     }
-                    this.props.onChange(day);
                 }
+                this.props.onChange(day);
+            }
+            if (day instanceof Date && !this.props.enableTime && modifiers.selected !== true) {
+                // Hide overlay & remove focus on input
+                document.activeElement.blur();
+            } else if (day instanceof Date && this.props.enableTime && modifiers.selected !== true) {
+                // Open Time panel after date selection
+                this.openPanel('time');
             }
         }
     }, {
@@ -188,6 +182,14 @@ var HiDatePicker = function (_React$Component) {
                 openedPanel: 'calendar'
             });
         }
+    }, {
+        key: 'handleTimeChange',
+        value: function handleTimeChange(date, precision) {
+            this.props.onChange(date);
+            if (date instanceof Date && precision === 'minute') {
+                document.activeElement.blur();
+            }
+        }
     }, {
         key: 'openPanel',
         value: function openPanel(panel) {
@@ -235,7 +237,7 @@ var HiDatePicker = function (_React$Component) {
         value: function renderTimePickerOverlay(propsOverlay) {
             var timePickerProps = {
                 value: this.props.value,
-                onChange: this.props.onChange,
+                onChange: this.handleTimeChange,
                 onCalendarClick: this.handleCalendarClick
             };
             return _react2.default.createElement(_TimePickerOverlay2.default, (0, _extends3.default)({ key: 'time-picker-overlay' }, timePickerProps, propsOverlay));
@@ -253,7 +255,7 @@ var HiDatePicker = function (_React$Component) {
     }, {
         key: 'render',
         value: function render() {
-            var _this3 = this;
+            var _this2 = this;
 
             var _props = this.props,
                 classes = _props.classes,
@@ -291,7 +293,7 @@ var HiDatePicker = function (_React$Component) {
                 navbarElement: function navbarElement(props2) {
                     return _react2.default.createElement(_Navbar2.default, (0, _extends3.default)({
                         showClockButton: enableTime,
-                        onClockClick: _this3.handleClockClick
+                        onClockClick: _this2.handleClockClick
                     }, props2));
                 },
                 captionElement: this.renderCaption,
@@ -320,7 +322,7 @@ var HiDatePicker = function (_React$Component) {
                 { className: classes.root },
                 _react2.default.createElement(_DayPickerInput2.default, {
                     ref: function ref(el) {
-                        _this3.datePickerInput = el;
+                        _this2.datePickerInput = el;
                     },
                     value: value,
                     hideOnDayClick: hideOnDayClick,
@@ -393,8 +395,10 @@ HiDatePicker.propTypes = process.env.NODE_ENV !== "production" ? {
     minimumDate: _propTypes2.default.instanceOf(Date),
     /**
      * Callback à la sélection d'une date
+     *
+     * @param {Date} date sélectionnée
      */
-    onChange: _propTypes2.default.func,
+    onChange: _propTypes2.default.func.isRequired,
     /**
      * Callback au reset de l'input
      */