@hipay/hipay-material-ui 1.0.0-beta.1 → 1.0.0-beta.10

package/HiTopBar/HiTopBar.js

@@ -49,10 +49,6 @@ var _Toolbar = require('material-ui/Toolbar');
 
 var _Toolbar2 = _interopRequireDefault(_Toolbar);
 
-var _Button = require('material-ui/Button');
-
-var _Button2 = _interopRequireDefault(_Button);
-
 var _IconButton = require('material-ui/IconButton');
 
 var _IconButton2 = _interopRequireDefault(_IconButton);
@@ -87,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,15 +129,13 @@ var styles = exports.styles = function styles(theme) {
         rightComponentMobile: {
             marginRight: -1.5 * theme.spacing.unit
         },
-        accountSelector: {
+        accountSelectorButton: {
             marginRight: 1.5 * theme.spacing.unit,
             borderLeft: 'solid 1px',
             borderColor: (0, _colorManipulator.fade)('#000', 0.12),
-            maxWidth: 264
-        },
-        accountSelectorButton: {
             display: 'inline-block',
-            maxWidth: '100%'
+            minWidth: 144,
+            maxWidth: 288
         },
         accountSelectorButtonLabel: {
             textOverflow: 'ellipsis',
@@ -164,6 +154,10 @@ var styles = exports.styles = function styles(theme) {
             color: theme.palette.text.secondary,
             minWidth: 32
         },
+        beta: {
+            minWidth: 64,
+            maxWidth: 80
+        },
         searchInput: {
             backgroundColor: theme.palette.background1 + ' !important'
         },
@@ -174,16 +168,18 @@ var styles = exports.styles = function styles(theme) {
             marginRight: 10
         },
         endAdornmentButton: {
-            top: 2,
-            height: 18,
-            display: 'flex',
+            height: 32,
+            lineHeight: 32,
+            padding: 0,
+            margin: 0,
+            display: 'inline-block',
             color: (0, _colorManipulator.fade)('#000', 0.38),
             textTransform: 'capitalize',
             fontWeight: theme.typography.fontWeightRegular,
             minWidth: 50
         },
-        endButtonWithClearIcon: {
-            top: -38
+        collapseOverflow: {
+            overflow: 'inherit'
         }
     };
 };
@@ -210,21 +206,14 @@ var HiTopBar = function (_React$Component) {
 
         _this.state = {
             collapsed: false,
-            searchValue: '',
-            searchFocus: false,
             menuAnchor: null
         };
 
-        _this.toggleCollapse = _this.toggleCollapse.bind(_this);
-        _this.handleChange = _this.handleChange.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.handleResetSearch = _this.handleResetSearch.bind(_this);
-        _this.handleClickInputButton = _this.handleClickInputButton.bind(_this);
         return _this;
     }
 
@@ -245,62 +234,19 @@ var HiTopBar = function (_React$Component) {
             callback();
         }
     }, {
-        key: 'toggleCollapse',
-        value: function toggleCollapse() {
+        key: 'handleCollapse',
+        value: function handleCollapse() {
             this.setState({ collapsed: !this.state.collapsed });
         }
-    }, {
-        key: 'handleChange',
-        value: function handleChange(event) {
-            this.setState({ searchValue: event.target.value });
-        }
-    }, {
-        key: 'handleResetSearch',
-        value: function handleResetSearch() {
-            this.setState({ searchValue: '' });
-        }
-    }, {
-        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: '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,
@@ -312,43 +258,13 @@ var HiTopBar = function (_React$Component) {
                 hasAccountSelector = _props.hasAccountSelector,
                 translations = _props.translations,
                 onClickMenu = _props.onClickMenu,
-                accountSelectorContent = _props.accountSelectorContent;
-
-
-            var colorPrimaryClass = this.state.searchFocus ? classes.colorPrimaryFocus : classes.colorPrimary;
+                accountSelectorContent = _props.accountSelectorContent,
+                refButtons = _props.refButtons,
+                searchInput = _props.searchInput,
+                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: (0, _classnames2.default)(classes.endAdornmentButton, (0, _defineProperty3.default)({}, classes.endButtonWithClearIcon, this.state.searchValue.length > 0)),
-                    onClick: this.handleClickInputButton
-                },
-                _react2.default.createElement(
-                    _Hidden2.default,
-                    { smDown: true },
-                    _react2.default.createElement(
-                        'span',
-                        null,
-                        translations.all_types
-                    )
-                ),
-                _react2.default.createElement(_mdiMaterialUi.MenuDown, { style: { position: 'relative', top: -2, color: (0, _colorManipulator.fade)('#000', 0.54) } })
-            );
 
-            var searchInput = _react2.default.createElement(_HiInput2.default, {
-                name: 'top-bar-search',
-                placeholder: translations.search,
-                value: this.state.searchValue,
-                onChange: this.handleChange,
-                startAdornment: 'magnify',
-                endAdornment: endAdornment,
-                classes: { root: inputClass },
-                onFocus: this.handleFocus,
-                onBlur: this.handleBlur,
-                onReset: this.handleResetSearch
-            });
+            var colorPrimaryClass = searchFocus ? classes.colorPrimaryFocus : classes.colorPrimary;
 
             var notificationButton = notificationValue > 0 ? _react2.default.createElement(
                 _HiButton2.default,
@@ -380,16 +296,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 },
+                                    searchFocus ? _react2.default.createElement(
                                         _HiButton2.default,
                                         {
                                             className: classes.leftButton,
@@ -424,22 +341,19 @@ var HiTopBar = function (_React$Component) {
                                 ),
                                 notificationButton,
                                 hasAccountSelector && _react2.default.createElement(
-                                    'div',
-                                    { className: classes.accountSelector },
-                                    _react2.default.createElement(
-                                        _HiButton2.default,
-                                        {
-                                            color: 'inherit',
-                                            className: classes.accountSelectorButton,
-                                            classes: {
-                                                label: classes.accountSelectorButtonLabel
-                                            },
-                                            onClick: this.props.onClickAccountSelector
+                                    _HiButton2.default,
+                                    {
+                                        color: 'inherit',
+                                        className: classes.accountSelectorButton,
+                                        classes: {
+                                            label: classes.accountSelectorButtonLabel
                                         },
-                                        accountSelectorContent
-                                    )
+                                        onClick: this.props.onClickAccountSelector
+                                    },
+                                    accountSelectorContent
                                 ),
                                 beta && _react2.default.createElement(_HiColoredLabel2.default, {
+                                    className: classes.beta,
                                     label: 'BETA',
                                     beta: true,
                                     color: theme.palette.neutral.dark
@@ -447,7 +361,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.ChevronDoubleUp, { onClick: this.handleCollapse }),
                                     hasSettings && _react2.default.createElement(_HiIconBuilder2.default, {
                                         onClick: this.props.onClickSettings,
                                         icon: 'fa-gear',
@@ -459,7 +373,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
                             },
@@ -475,10 +389,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
@@ -555,6 +467,7 @@ HiTopBar.defaultProps = {
     hideable: false,
     hasSettings: false,
     hasAccountSelector: false,
+    searchFocus: false,
     translations: {
         back: 'Back',
         menu: 'Menu',
@@ -595,10 +508,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
      */
@@ -616,13 +525,22 @@ HiTopBar.propTypes = process.env.NODE_ENV !== "production" ? {
      */
     onClickSettings: _propTypes2.default.func,
     /**
-     * Fonction de callback au blur du champs de recharge
+     * 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']),
+    /**
+     *  Passe une ref callback à la div contenant les boutons "menu" et "back"
+     */
+    refButtons: _propTypes2.default.func,
+    /**
+     * Etat de focus.
      */
-    onSearchBlur: _propTypes2.default.func,
+    searchFocus: _propTypes2.default.bool.isRequired,
     /**
-     * Fonction de callback au focus sur le champs de recharge
+     * Input de recherche
      */
-    onSearchFocus: _propTypes2.default.func,
+    searchInput: _propTypes2.default.node.isRequired,
     /**
      * @ignore
      */

package/README.md

@@ -100,7 +100,7 @@ git flow init
 
 #### Pour rajouter des composants dans la liste "API"
 Il faut les rajouter tout en haut du markdown de la page dans la liste des "components:"
-Par exemple sur la page des tableaux : http://localhost:3000/demos/tables   
+Par exemple sur la page des tableaux : http://localhost:3000/demos/tables
 => Il faut les rajouter au fichier [hi-table.md](docs/src/pages/demos/hi-table/hi-table.md)
 
 #### Workflow d'une feature
@@ -174,23 +174,23 @@ prettier --write src/HiForm/HiInput.js
 ```
 
 ## Publish
-Le projet est publié sur un repo privé npm : https://www.npmjs.com/package/@vdossantos/hipay-material-ui
-
-Le projet hipay-material-ui n'est plus stocké dans un répôt sur la docker machine dans Nexus
-http://jira-nexus.hipay-pos-platform.com:8081
-
-Aller dans [Browse > npm-private](http://jira-nexus.hipay-pos-platform.com:8081/#browse/browse:npm-private)
-Login: admin
-Mdp : admin123
+Le projet est publié sur un repo privé npm : https://www.npmjs.com/package/@hipay/hipay-material-ui
 
 #### Publier une nouvelle version
+
+1. Changer la version dans package.json
+2. Build
 ```sh
 npm run build
-
-# Changer la version dans la build/package.json
-
+```
+3. Publish
+```sh
 cd build
+npm login
+# Username: hipay
+# Password: (voir avec la tribu PSYCHE)
 npm publish
+```
 
 # Si ERR d'authenitifcation
 npm adduser
@@ -234,4 +234,4 @@ au lieu de
 ### Problème d'import dans front-react
 Attention aux index.js.
 La bonne syntaxe est :
-export { default as MyComponente } from './MyComponente';
+export { default as MyComponente } from './MyComponente';

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,73 @@
+import _extends from 'babel-runtime/helpers/extends';
+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 => ({
+    label: _extends({
+        display: 'inline-block',
+        marginLeft: 12,
+        fontWeight: theme.typography.fontWeightRegular,
+        color: theme.palette.neutral.normal
+    }, theme.typography.body3),
+    active: {
+        fontWeight: theme.typography.fontWeightMedium
+    }
+});
+
+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 } = this.props;
+
+        return React.createElement(
+            HiStepper,
+            { activeStep: activeStep },
+            React.createElement(
+                'div',
+                null,
+                steps.map((step, index) => {
+                    const validConnector = step.status === 'validated' && index < steps.length - 1 && steps[index + 1].status === 'validated';
+                    return React.createElement(
+                        HiStep,
+                        {
+                            key: step.id,
+                            onClick: this.handleStep(index),
+                            isLast: index === steps.length - 1,
+                            validConnector: validConnector
+                        },
+                        React.createElement(
+                            HiStepLabel,
+                            {
+                                active: activeStep === index,
+                                status: step.status,
+                                notificationNumber: step.notificationNumber
+                            },
+                            step.label
+                        )
+                    );
+                })
+            )
+        );
+    }
+}
+
+HiBreadcrumb.defaultProps = {
+    activeStep: 0
+};
+HiBreadcrumb.propTypes = process.env.NODE_ENV !== "production" ? {
+    activeStep: PropTypes.number,
+    steps: PropTypes.array.isRequired,
+    handleStep: PropTypes.func
+} : {};
+export default withStyles(styles, { name: 'HmuiHiBreadcrumb' })(HiBreadcrumb);