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

package/HiTopBar/HiTopBar.js

@@ -83,10 +83,6 @@ var _HiButton = require('../HiButton');
 
 var _HiButton2 = _interopRequireDefault(_HiButton);
 
-var _HiInput = require('../HiForm/HiInput');
-
-var _HiInput2 = _interopRequireDefault(_HiInput);
-
 var _HiColoredLabel = require('../HiColoredLabel');
 
 var _HiColoredLabel2 = _interopRequireDefault(_HiColoredLabel);
@@ -137,7 +133,9 @@ var styles = exports.styles = function styles(theme) {
             marginRight: 1.5 * theme.spacing.unit,
             borderLeft: 'solid 1px',
             borderColor: (0, _colorManipulator.fade)('#000', 0.12),
-            display: 'inline-block'
+            display: 'inline-block',
+            minWidth: 144,
+            maxWidth: 288
         },
         accountSelectorButtonLabel: {
             textOverflow: 'ellipsis',
@@ -156,6 +154,9 @@ var styles = exports.styles = function styles(theme) {
             color: theme.palette.text.secondary,
             minWidth: 32
         },
+        betaWithoutAccountSelector: {
+            marginLeft: 1.5 * theme.spacing.unit
+        },
         searchInput: {
             backgroundColor: theme.palette.background1 + ' !important'
         },
@@ -175,6 +176,9 @@ var styles = exports.styles = function styles(theme) {
             textTransform: 'capitalize',
             fontWeight: theme.typography.fontWeightRegular,
             minWidth: 50
+        },
+        collapseOverflow: {
+            overflow: 'inherit'
         }
     };
 };
@@ -183,7 +187,7 @@ var _ref = _react2.default.createElement(_HiIconBuilder2.default, { icon: 'fa-be
 
 var _ref2 = _react2.default.createElement(_mdiMaterialUi.ArrowLeft, null);
 
-var _ref3 = _react2.default.createElement(_mdiMaterialUi.ChevronDoubleDown, null);
+var _ref3 = _react2.default.createElement(_mdiMaterialUi.ChevronDown, null);
 
 var _ref4 = _react2.default.createElement(_mdiMaterialUi.ArrowLeft, null);
 
@@ -201,18 +205,14 @@ var HiTopBar = function (_React$Component) {
 
         _this.state = {
             collapsed: false,
-            searchFocus: false,
             menuAnchor: null
         };
 
-        _this.toggleCollapse = _this.toggleCollapse.bind(_this);
-        _this.handleFocus = _this.handleFocus.bind(_this);
-        _this.handleBlur = _this.handleBlur.bind(_this);
+        _this.handleCollapse = _this.handleCollapse.bind(_this);
         _this.handleClickMenu = _this.handleClickMenu.bind(_this);
         _this.handleOpenMenu = _this.handleOpenMenu.bind(_this);
         _this.handleCloseMenu = _this.handleCloseMenu.bind(_this);
         _this.handleMenuItemClick = _this.handleMenuItemClick.bind(_this);
-        _this.handleClickInputButton = _this.handleClickInputButton.bind(_this);
         return _this;
     }
 
@@ -233,52 +233,22 @@ var HiTopBar = function (_React$Component) {
             callback();
         }
     }, {
-        key: 'toggleCollapse',
-        value: function toggleCollapse() {
-            this.setState({ collapsed: !this.state.collapsed });
-        }
-    }, {
-        key: 'handleFocus',
-        value: function handleFocus() {
-            this.setState({ searchFocus: true });
-
-            if (this.props.onSearchFocus) {
-                this.props.onSearchFocus();
-            }
-        }
-    }, {
-        key: 'handleClickInputButton',
-        value: function handleClickInputButton(event) {
-            this.setState({ searchFocus: true });
-
-            if (this.props.onClickInputButton) {
-                this.props.onClickInputButton();
-            }
-            // Stop propagation to cancel input focus
-            event.stopPropagation();
-        }
-    }, {
-        key: 'handleBlur',
-        value: function handleBlur(event) {
-            if (!this.overlay.contains(event.relatedTarget)) {
-                this.setState({ searchFocus: false });
-            }
-
-            if (this.props.onSearchBlur) {
-                this.props.onSearchBlur();
+        key: 'handleCollapse',
+        value: function handleCollapse() {
+            if (this.props.onCollapse) {
+                this.props.onCollapse(!this.state.collapsed);
             }
+            this.setState({ collapsed: !this.state.collapsed });
         }
     }, {
         key: 'handleClickMenu',
         value: function handleClickMenu() {
             this.props.onClickReturn();
-            this.setState({ searchFocus: false });
         }
     }, {
         key: 'render',
         value: function render() {
-            var _classNames,
-                _this2 = this;
+            var _this2 = this;
 
             var _props = this.props,
                 classes = _props.classes,
@@ -291,44 +261,12 @@ var HiTopBar = function (_React$Component) {
                 translations = _props.translations,
                 onClickMenu = _props.onClickMenu,
                 accountSelectorContent = _props.accountSelectorContent,
+                refButtons = _props.refButtons,
                 searchInput = _props.searchInput,
-                searchValue = _props.searchValue;
-
-
-            var colorPrimaryClass = this.state.searchFocus ? classes.colorPrimaryFocus : classes.colorPrimary;
+                searchFocus = _props.searchFocus;
 
-            var inputClass = (0, _classnames2.default)((_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.searchInput, !this.state.searchFocus), (0, _defineProperty3.default)(_classNames, classes.searchInputFocused, this.state.searchFocus), _classNames));
-
-            var endAdornment = _react2.default.createElement(
-                _HiButton2.default,
-                {
-                    className: classes.endAdornmentButton,
-                    onClick: this.handleClickInputButton
-                },
-                _react2.default.createElement(
-                    _Hidden2.default,
-                    { smDown: true },
-                    _react2.default.createElement(
-                        'span',
-                        null,
-                        translations.all_types
-                    )
-                ),
-                _react2.default.createElement(_mdiMaterialUi.MenuDown, { style: { color: (0, _colorManipulator.fade)('#000', 0.54) } })
-            );
 
-            var input = searchInput || _react2.default.createElement(_HiInput2.default, {
-                name: 'top-bar-search',
-                placeholder: translations.search,
-                value: searchValue,
-                onChange: this.props.onSearchChange,
-                startAdornment: 'magnify',
-                endAdornment: endAdornment,
-                classes: { root: inputClass },
-                onFocus: this.handleFocus,
-                onBlur: this.handleBlur,
-                onReset: this.props.onSearchReset
-            });
+            var colorPrimaryClass = searchFocus ? classes.colorPrimaryFocus : classes.colorPrimary;
 
             var notificationButton = notificationValue > 0 ? _react2.default.createElement(
                 _HiButton2.default,
@@ -350,7 +288,8 @@ var HiTopBar = function (_React$Component) {
                 _AppBar2.default,
                 {
                     classes: { root: classes.root, colorPrimary: colorPrimaryClass },
-                    position: this.props.position
+                    position: this.props.position,
+                    id: 'top-bar'
                 },
                 _react2.default.createElement(
                     _Hidden2.default,
@@ -360,16 +299,17 @@ var HiTopBar = function (_React$Component) {
                         null,
                         _react2.default.createElement(
                             _Collapse2.default,
-                            { 'in': !this.state.collapsed },
+                            {
+                                'in': !this.state.collapsed,
+                                className: (0, _classnames2.default)((0, _defineProperty3.default)({}, classes.collapseOverflow, !hideable))
+                            },
                             _react2.default.createElement(
                                 _Toolbar2.default,
                                 { className: classes.toolbar },
                                 _react2.default.createElement(
                                     'div',
-                                    { ref: function ref(div) {
-                                            return _this2.overlay = div;
-                                        } },
-                                    this.state.searchFocus ? _react2.default.createElement(
+                                    { ref: refButtons, id: 'menu-button-container' },
+                                    searchFocus ? _react2.default.createElement(
                                         _HiButton2.default,
                                         {
                                             className: classes.leftButton,
@@ -399,8 +339,8 @@ var HiTopBar = function (_React$Component) {
                                 ),
                                 _react2.default.createElement(
                                     'div',
-                                    { className: classes.flex },
-                                    input
+                                    { id: 'quick-search-input', className: classes.flex },
+                                    searchInput
                                 ),
                                 notificationButton,
                                 hasAccountSelector && _react2.default.createElement(
@@ -411,11 +351,13 @@ var HiTopBar = function (_React$Component) {
                                         classes: {
                                             label: classes.accountSelectorButtonLabel
                                         },
-                                        onClick: this.props.onClickAccountSelector
+                                        onClick: this.props.onClickAccountSelector,
+                                        id: 'account-selector-button'
                                     },
                                     accountSelectorContent
                                 ),
                                 beta && _react2.default.createElement(_HiColoredLabel2.default, {
+                                    className: (0, _classnames2.default)((0, _defineProperty3.default)({}, classes.betaWithoutAccountSelector, !hasAccountSelector)),
                                     label: 'BETA',
                                     beta: true,
                                     color: theme.palette.neutral.dark
@@ -423,7 +365,7 @@ var HiTopBar = function (_React$Component) {
                                 (hideable || hasSettings) && _react2.default.createElement(
                                     _IconButton2.default,
                                     { color: 'inherit', className: classes.iconButton },
-                                    hideable && _react2.default.createElement(_mdiMaterialUi.ChevronDoubleUp, { onClick: this.toggleCollapse }),
+                                    hideable && _react2.default.createElement(_mdiMaterialUi.ChevronUp, { onClick: this.handleCollapse }),
                                     hasSettings && _react2.default.createElement(_HiIconBuilder2.default, {
                                         onClick: this.props.onClickSettings,
                                         icon: 'fa-gear',
@@ -435,7 +377,7 @@ var HiTopBar = function (_React$Component) {
                         hideable && this.state.collapsed && _react2.default.createElement(
                             _IconButton2.default,
                             {
-                                onClick: this.toggleCollapse,
+                                onClick: this.handleCollapse,
                                 color: 'inherit',
                                 className: classes.showTopBarButton
                             },
@@ -451,10 +393,8 @@ var HiTopBar = function (_React$Component) {
                         { className: classes.toolbar },
                         _react2.default.createElement(
                             'div',
-                            { ref: function ref(div) {
-                                    return _this2.overlay = div;
-                                } },
-                            this.state.searchFocus ? _react2.default.createElement(
+                            { ref: refButtons },
+                            searchFocus ? _react2.default.createElement(
                                 _IconButton2.default,
                                 { className: classes.leftButtonMobile, color: 'inherit' },
                                 _ref4
@@ -531,6 +471,7 @@ HiTopBar.defaultProps = {
     hideable: false,
     hasSettings: false,
     hasAccountSelector: false,
+    searchFocus: false,
     translations: {
         back: 'Back',
         menu: 'Menu',
@@ -560,7 +501,7 @@ HiTopBar.propTypes = process.env.NODE_ENV !== "production" ? {
      */
     hasSettings: _propTypes2.default.bool,
     /**
-     * La TopBar peut être cachée vie le bouton double chevron
+     * La TopBar peut être cachée vie le bouton chevron
      */
     hideable: _propTypes2.default.bool,
     /**
@@ -571,10 +512,6 @@ HiTopBar.propTypes = process.env.NODE_ENV !== "production" ? {
      * Fonction de callback au click sur l'accountSelector'
      */
     onClickAccountSelector: _propTypes2.default.func,
-    /**
-     * Fonction de callback au click sur le menu
-     */
-    onClickInputButton: _propTypes2.default.func.isRequired,
     /**
      * Fonction de callback au click sur le menu
      */
@@ -592,34 +529,26 @@ HiTopBar.propTypes = process.env.NODE_ENV !== "production" ? {
      */
     onClickSettings: _propTypes2.default.func,
     /**
-     * Fonction de callback au blur du champs de recharge (si searchInput vide)
-     */
-    onSearchBlur: _propTypes2.default.func,
-    /**
-     * Fonction de callback au changement du champs input (si searchInput vide)
-     */
-    onSearchChange: _propTypes2.default.func,
-    /**
-     * Fonction de callback au focus sur le champs de recherche (si searchInput vide)
+     * Fonction de callback au click sur le bouton chevron
      */
-    onSearchFocus: _propTypes2.default.func,
-    /**
-     * Fonction de callback au reset du champs de recherche (si searchInput vide)
-     */
-    onSearchReset: _propTypes2.default.func,
+    onCollapse: _propTypes2.default.func,
     /**
      * Positionement de la topBar. The behavior of the different options is described
      * [here](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning).
      */
     position: _propTypes2.default.oneOf(['fixed', 'absolute', 'sticky', 'static']),
     /**
-     * Input de recherche
+     *  Passe une ref callback à la div contenant les boutons "menu" et "back"
      */
-    searchInput: _propTypes2.default.node,
+    refButtons: _propTypes2.default.func,
     /**
-     * Valeur du champs de recherche (si searchInput vide)
+     * Etat de focus.
+     */
+    searchFocus: _propTypes2.default.bool.isRequired,
+    /**
+     * Input de recherche
      */
-    searchValue: _propTypes2.default.node,
+    searchInput: _propTypes2.default.node.isRequired,
     /**
      * @ignore
      */

package/es/HiAlertModal/HiAlertModal.js

@@ -0,0 +1,189 @@
+import _extends from 'babel-runtime/helpers/extends';
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+// @inheritedComponent Dialog
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import Dialog, { DialogActions, DialogContent, DialogContentText, DialogTitle } from 'material-ui/Dialog';
+import { withStyles } from '../styles';
+import HiButton from '../HiButton';
+
+export const styles = theme => ({
+    classContent: {
+        fontSize: 14,
+        lineHeight: '24px',
+        color: '#484848'
+    },
+    classPaper: {
+        maxWidth: 300
+    },
+    classCancelButton: {
+        float: 'right'
+    },
+    classTitle: {
+        fontSize: 20,
+        fontFamily: theme.typography.fontFamily,
+        fontWeight: theme.typography.fontWeightLight,
+        lineHeight: '24px'
+    },
+    classAction: {
+        display: 'inline-block'
+    },
+    classDialogRoot: {
+        backgroundColor: 'rgba(0, 0, 0, 0.28)'
+    }
+});
+
+/**
+ * Pop up d'alert
+ */
+class HiAlertModal extends React.PureComponent {
+
+    constructor(props) {
+        super(props);
+
+        this.handleClickCancel = () => {
+            if (this.props.onCancelClick) {
+                this.props.onCancelClick();
+            }
+        };
+
+        this.handleClickSubmit = () => {
+            if (this.props.onSubmitClick) {
+                this.props.onSubmitClick();
+            }
+        };
+
+        this.handleOnClose = () => {
+            if (this.props.onClose) {
+                this.props.onClose();
+            }
+        };
+
+        this.handleOnClose = this.handleOnClose.bind(this);
+        this.handleClickCancel = this.handleClickCancel.bind(this);
+        this.handleClickSubmit = this.handleClickSubmit.bind(this);
+    }
+
+    // Appelé au clic du bouton d'annulation
+
+
+    // Appelé au clic du bouton de soumission
+
+
+    // Appelé si clic en dehors de la pop up
+
+
+    // Render
+    render() {
+        const _props = this.props,
+              {
+            labelSubmitButton,
+            labelCancelButton,
+            content,
+            title,
+            positive,
+            negative,
+            open,
+            onCancelClick,
+            onSubmitClick,
+            classes
+        } = _props,
+              props = _objectWithoutProperties(_props, ['labelSubmitButton', 'labelCancelButton', 'content', 'title', 'positive', 'negative', 'open', 'onCancelClick', 'onSubmitClick', 'classes']);
+        return React.createElement(
+            Dialog,
+            _extends({
+                open: open,
+                onClose: this.handleOnClose,
+                classes: { paper: classes.classPaper, root: classes.classDialogRoot }
+            }, props),
+            React.createElement(
+                DialogTitle,
+                { disableTypography: true, classes: { root: classes.classTitle } },
+                title
+            ),
+            React.createElement(
+                DialogContent,
+                null,
+                React.createElement(
+                    DialogContentText,
+                    { classes: { root: classes.classContent } },
+                    content
+                )
+            ),
+            React.createElement(
+                DialogActions,
+                { classes: { root: classes.classAction } },
+                React.createElement(
+                    HiButton,
+                    {
+                        onClick: this.handleClickSubmit,
+                        positive: positive,
+                        negative: negative
+                    },
+                    labelSubmitButton
+                ),
+                React.createElement(
+                    HiButton,
+                    {
+                        classes: { root: classes.classCancelButton },
+                        onClick: this.handleClickCancel
+                    },
+                    labelCancelButton
+                )
+            )
+        );
+    }
+}
+
+HiAlertModal.defaultProps = {
+    negative: false,
+    positive: false
+};
+HiAlertModal.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Surcharge les classes du composant
+     */
+    classes: PropTypes.object,
+    /**
+     * Texte contenu dans la modal
+     */
+    content: PropTypes.string,
+    /**
+     * Texte sur le bouton d'annulation
+     */
+    labelCancelButton: PropTypes.string,
+    /**
+     * Texte sur le bouton de soumission
+     */
+    labelSubmitButton: PropTypes.string,
+    /**
+     * Colore le bouton de soumission en rouge
+     */
+    negative: PropTypes.bool,
+    /**
+     * Fonction de callback appelée au clic sur le bouton d'annulation
+     */
+    onCancelClick: PropTypes.func,
+    /**
+     * Fonction de callback appelée au clic en dehors de la pop up
+     */
+    onClose: PropTypes.func,
+    /**
+     * Fonction de callback appelée au clic sur le bouton de soumission
+     */
+    onSubmitClick: PropTypes.func,
+    /**
+     * pop up ouverte ou pas
+     */
+    open: PropTypes.bool.isRequired,
+    /**
+     * Colore le bouton de soumission en vert
+     */
+    positive: PropTypes.bool,
+    /**
+     * Titre de la modal
+     */
+    title: PropTypes.string
+} : {};
+export default withStyles(styles, { name: 'HmuiHiAlertModal' })(HiAlertModal);

package/es/HiAlertModal/index.js

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

package/es/HiBreadcrumb/HiBreadcrumb.js

@@ -0,0 +1,81 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '../styles';
+import HiStepper from './HiStepper';
+import HiStepLabel from './HiStepLabel';
+import HiStep from './HiStep';
+
+export const styles = theme => ({});
+
+class HiBreadcrumb extends React.PureComponent {
+    constructor(...args) {
+        var _temp;
+
+        return _temp = super(...args), this.handleStep = idx => () => {
+            this.props.handleStep(idx);
+        }, _temp;
+    }
+
+    render() {
+        const { activeStep, steps, type } = this.props;
+
+        return React.createElement(
+            HiStepper,
+            { activeStep: activeStep, type: type },
+            React.createElement(
+                'div',
+                null,
+                steps.map((step, index) => {
+                    const validConnector = step.status === 'validated' && index < steps.length - 1 && (steps[index + 1].status === 'validated' || steps[index + 1].status === 'active');
+
+                    return React.createElement(
+                        HiStep,
+                        {
+                            content: step.content,
+                            key: step.id,
+                            onClick: this.handleStep(index),
+                            isLast: index === steps.length - 1,
+                            validConnector: validConnector,
+                            type: type,
+                            steps: steps
+                        },
+                        React.createElement(
+                            HiStepLabel,
+                            {
+                                active: activeStep === index,
+                                status: step.status,
+                                notificationNumber: step.notificationNumber,
+                                type: type
+                            },
+                            step.label
+                        )
+                    );
+                })
+            )
+        );
+    }
+}
+
+HiBreadcrumb.defaultProps = {
+    activeStep: 0,
+    type: 'back'
+};
+HiBreadcrumb.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Which step is the active one
+     */
+    activeStep: PropTypes.number,
+    /**
+     * The collection of steps of the breadcrumb.
+     */
+    steps: PropTypes.array.isRequired,
+    /**
+     * The callback function handling the flow from one step to another
+     */
+    handleStep: PropTypes.func,
+    /**
+     * The Breadcrumb type
+     */
+    type: PropTypes.oneOf(['back', 'front-dark', 'front-light'])
+} : {};
+export default withStyles(styles, { name: 'HmuiHiBreadcrumb' })(HiBreadcrumb);