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

package/HiTopBar/HiTopBar.js

@@ -0,0 +1,635 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.styles = undefined;
+
+var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
+
+var _defineProperty3 = _interopRequireDefault(_defineProperty2);
+
+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 _Hidden = require('material-ui/Hidden');
+
+var _Hidden2 = _interopRequireDefault(_Hidden);
+
+var _AppBar = require('material-ui/AppBar');
+
+var _AppBar2 = _interopRequireDefault(_AppBar);
+
+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);
+
+var _Collapse = require('material-ui/transitions/Collapse');
+
+var _Collapse2 = _interopRequireDefault(_Collapse);
+
+var _mdiMaterialUi = require('mdi-material-ui');
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _Menu = require('material-ui/Menu');
+
+var _Menu2 = _interopRequireDefault(_Menu);
+
+var _withStyles = require('../styles/withStyles');
+
+var _withStyles2 = _interopRequireDefault(_withStyles);
+
+var _HiIconBuilder = require('../utils/HiIconBuilder');
+
+var _HiIconBuilder2 = _interopRequireDefault(_HiIconBuilder);
+
+var _HiBadge = require('../HiBadge');
+
+var _HiBadge2 = _interopRequireDefault(_HiBadge);
+
+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);
+
+var _colorManipulator = require('../styles/colorManipulator');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = exports.styles = function styles(theme) {
+    return {
+        root: {
+            width: '100%',
+            boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.16)'
+        },
+        colorPrimary: {
+            backgroundColor: theme.palette.background3,
+            color: (0, _colorManipulator.getContrastedTextColor)(theme.palette.background1, theme.palette.text.secondary, '#FFF')
+        },
+        colorPrimaryFocus: {
+            backgroundColor: theme.palette.background2,
+            color: (0, _colorManipulator.getContrastedTextColor)(theme.palette.background2, theme.palette.text.secondary, '#FFF')
+        },
+        toolbar: {
+            minHeight: 8 * theme.spacing.unit
+        },
+        leftButtonMobile: {
+            marginLeft: -1.5 * theme.spacing.unit,
+            marginRight: 1.5 * theme.spacing.unit
+        },
+        leftButton: {
+            paddingLeft: 0,
+            marginLeft: -1.5 * theme.spacing.unit,
+            minWidth: 16 * theme.spacing.unit
+        },
+        leftButtonLabel: {
+            color: theme.palette.text.secondary,
+            marginLeft: 2.5 * theme.spacing.unit,
+            fontSize: 14,
+            height: 16
+        },
+        flex: {
+            flex: 1
+        },
+        rightComponentMobile: {
+            marginRight: -1.5 * theme.spacing.unit
+        },
+        accountSelector: {
+            marginRight: 1.5 * theme.spacing.unit,
+            borderLeft: 'solid 1px',
+            borderColor: (0, _colorManipulator.fade)('#000', 0.12),
+            maxWidth: 264
+        },
+        accountSelectorButton: {
+            display: 'inline-block',
+            maxWidth: '100%'
+        },
+        accountSelectorButtonLabel: {
+            textOverflow: 'ellipsis',
+            overflow: 'hidden',
+            whiteSpace: 'nowrap'
+        },
+        iconButton: {
+            marginRight: -2 * theme.spacing.unit
+        },
+        showTopBarButton: {
+            position: 'absolute',
+            right: 33,
+            marginTop: 5
+        },
+        notificationButton: {
+            color: theme.palette.text.secondary,
+            minWidth: 32
+        },
+        searchInput: {
+            backgroundColor: theme.palette.background1 + ' !important'
+        },
+        searchInputFocused: {
+            backgroundColor: theme.palette.background3 + ' !important'
+        },
+        notificationBadge: {
+            marginRight: 10
+        },
+        endAdornmentButton: {
+            top: 2,
+            height: 18,
+            display: 'flex',
+            color: (0, _colorManipulator.fade)('#000', 0.38),
+            textTransform: 'capitalize',
+            fontWeight: theme.typography.fontWeightRegular,
+            minWidth: 50
+        },
+        endButtonWithClearIcon: {
+            top: -38
+        }
+    };
+};
+
+var _ref = _react2.default.createElement(_HiIconBuilder2.default, { icon: 'fa-bell-o', size: 25 });
+
+var _ref2 = _react2.default.createElement(_mdiMaterialUi.ArrowLeft, null);
+
+var _ref3 = _react2.default.createElement(_mdiMaterialUi.ChevronDoubleDown, null);
+
+var _ref4 = _react2.default.createElement(_mdiMaterialUi.ArrowLeft, null);
+
+var _ref5 = _react2.default.createElement(_mdiMaterialUi.Menu, null);
+
+var _ref6 = _react2.default.createElement(_mdiMaterialUi.DotsVertical, null);
+
+var HiTopBar = function (_React$Component) {
+    (0, _inherits3.default)(HiTopBar, _React$Component);
+
+    function HiTopBar(props) {
+        (0, _classCallCheck3.default)(this, HiTopBar);
+
+        var _this = (0, _possibleConstructorReturn3.default)(this, (HiTopBar.__proto__ || (0, _getPrototypeOf2.default)(HiTopBar)).call(this, props));
+
+        _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.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;
+    }
+
+    (0, _createClass3.default)(HiTopBar, [{
+        key: 'handleOpenMenu',
+        value: function handleOpenMenu(event) {
+            this.setState({ menuAnchor: event.currentTarget });
+        }
+    }, {
+        key: 'handleCloseMenu',
+        value: function handleCloseMenu() {
+            this.setState({ menuAnchor: null });
+        }
+    }, {
+        key: 'handleMenuItemClick',
+        value: function handleMenuItemClick(callback) {
+            this.setState({ menuAnchor: null });
+            callback();
+        }
+    }, {
+        key: 'toggleCollapse',
+        value: function toggleCollapse() {
+            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 _props = this.props,
+                classes = _props.classes,
+                theme = _props.theme,
+                notificationValue = _props.notificationValue,
+                beta = _props.beta,
+                hideable = _props.hideable,
+                hasSettings = _props.hasSettings,
+                hasAccountSelector = _props.hasAccountSelector,
+                translations = _props.translations,
+                onClickMenu = _props.onClickMenu,
+                accountSelectorContent = _props.accountSelectorContent;
+
+
+            var colorPrimaryClass = this.state.searchFocus ? classes.colorPrimaryFocus : classes.colorPrimary;
+
+            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 notificationButton = notificationValue > 0 ? _react2.default.createElement(
+                _HiButton2.default,
+                {
+                    className: classes.notificationButton,
+                    onClick: this.props.onClickNotifications
+                },
+                _react2.default.createElement(
+                    _HiBadge2.default,
+                    {
+                        value: notificationValue,
+                        classes: { root: classes.notificationBadge }
+                    },
+                    _ref
+                )
+            ) : '';
+
+            return _react2.default.createElement(
+                _AppBar2.default,
+                {
+                    classes: { root: classes.root, colorPrimary: colorPrimaryClass },
+                    position: this.props.position
+                },
+                _react2.default.createElement(
+                    _Hidden2.default,
+                    { smDown: true },
+                    _react2.default.createElement(
+                        'div',
+                        null,
+                        _react2.default.createElement(
+                            _Collapse2.default,
+                            { 'in': !this.state.collapsed },
+                            _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(
+                                        _HiButton2.default,
+                                        {
+                                            className: classes.leftButton,
+                                            onClick: this.handleClickMenu,
+                                            color: 'inherit'
+                                        },
+                                        _ref2,
+                                        _react2.default.createElement(
+                                            'span',
+                                            { className: classes.leftButtonLabel },
+                                            translations.back
+                                        )
+                                    ) : _react2.default.createElement(
+                                        _HiButton2.default,
+                                        {
+                                            className: classes.leftButton,
+                                            onClick: onClickMenu,
+                                            color: 'inherit'
+                                        },
+                                        _react2.default.createElement(_mdiMaterialUi.Menu, { style: { height: 24 } }),
+                                        _react2.default.createElement(
+                                            'span',
+                                            { className: classes.leftButtonLabel },
+                                            translations.menu
+                                        )
+                                    )
+                                ),
+                                _react2.default.createElement(
+                                    'div',
+                                    { className: classes.flex },
+                                    searchInput
+                                ),
+                                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
+                                        },
+                                        accountSelectorContent
+                                    )
+                                ),
+                                beta && _react2.default.createElement(_HiColoredLabel2.default, {
+                                    label: 'BETA',
+                                    beta: true,
+                                    color: theme.palette.neutral.dark
+                                }),
+                                (hideable || hasSettings) && _react2.default.createElement(
+                                    _IconButton2.default,
+                                    { color: 'inherit', className: classes.iconButton },
+                                    hideable && _react2.default.createElement(_mdiMaterialUi.ChevronDoubleUp, { onClick: this.toggleCollapse }),
+                                    hasSettings && _react2.default.createElement(_HiIconBuilder2.default, {
+                                        onClick: this.props.onClickSettings,
+                                        icon: 'fa-gear',
+                                        size: 24
+                                    })
+                                )
+                            )
+                        ),
+                        hideable && this.state.collapsed && _react2.default.createElement(
+                            _IconButton2.default,
+                            {
+                                onClick: this.toggleCollapse,
+                                color: 'inherit',
+                                className: classes.showTopBarButton
+                            },
+                            _ref3
+                        )
+                    )
+                ),
+                _react2.default.createElement(
+                    _Hidden2.default,
+                    { mdUp: true },
+                    _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(
+                                _IconButton2.default,
+                                { className: classes.leftButtonMobile, color: 'inherit' },
+                                _ref4
+                            ) : _react2.default.createElement(
+                                _IconButton2.default,
+                                {
+                                    className: classes.leftButtonMobile,
+                                    onClick: onClickMenu,
+                                    color: 'inherit'
+                                },
+                                _ref5
+                            )
+                        ),
+                        _react2.default.createElement(
+                            'div',
+                            { className: classes.flex },
+                            searchInput
+                        ),
+                        notificationButton,
+                        (hasAccountSelector || hasSettings) && _react2.default.createElement(
+                            'div',
+                            { className: classes.rightComponentMobile },
+                            _react2.default.createElement(
+                                _IconButton2.default,
+                                {
+                                    color: 'inherit',
+                                    onClick: this.handleOpenMenu,
+                                    'aria-owns': this.state.menuAnchor ? 'top-bar-mobile-menu' : null,
+                                    'aria-haspopup': 'true'
+                                },
+                                _ref6
+                            ),
+                            _react2.default.createElement(
+                                _Menu2.default,
+                                {
+                                    id: 'top-bar-mobile-menu',
+                                    anchorEl: this.state.menuAnchor,
+                                    open: Boolean(this.state.menuAnchor),
+                                    onClose: this.handleCloseMenu,
+                                    PaperProps: { style: { maxWidth: 264 } }
+                                },
+                                hasAccountSelector && _react2.default.createElement(
+                                    _Menu.MenuItem,
+                                    {
+                                        key: 'account-selector',
+                                        onClick: function onClick() {
+                                            return _this2.handleMenuItemClick(_this2.props.onClickAccountSelector);
+                                        },
+                                        classes: { root: classes.accountSelectorButtonLabel }
+                                    },
+                                    accountSelectorContent
+                                ),
+                                hasSettings && _react2.default.createElement(
+                                    _Menu.MenuItem,
+                                    {
+                                        key: 'settings',
+                                        onClick: function onClick() {
+                                            return _this2.handleMenuItemClick(_this2.props.onClickSettings);
+                                        }
+                                    },
+                                    'Settings'
+                                )
+                            )
+                        )
+                    )
+                )
+            );
+        }
+    }]);
+    return HiTopBar;
+}(_react2.default.Component);
+
+HiTopBar.defaultProps = {
+    hideable: false,
+    hasSettings: false,
+    hasAccountSelector: false,
+    translations: {
+        back: 'Back',
+        menu: 'Menu',
+        search: 'search',
+        all_types: 'All Types'
+    }
+};
+HiTopBar.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Contenu du bouton à droite de l'input de recherche (accountSelector)
+     */
+    accountSelectorContent: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.node]),
+    /**
+     * Définit si l'on doit afficher le bouton "Beta" ou non
+     */
+    beta: _propTypes2.default.bool,
+    /**
+     * Permet des surcharges de style
+     */
+    classes: _propTypes2.default.object,
+    /**
+     * Définit si l'on doit afficher le bouton "Account selector" ou non
+     */
+    hasAccountSelector: _propTypes2.default.bool,
+    /**
+     * Définit si l'on doit afficher le bouton "Settings" ou non
+     */
+    hasSettings: _propTypes2.default.bool,
+    /**
+     * La TopBar peut être cachée vie le bouton double chevron
+     */
+    hideable: _propTypes2.default.bool,
+    /**
+     * La valeur a afficher dans le boutton de notification.
+     */
+    notificationValue: _propTypes2.default.number,
+    /**
+     * 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
+     */
+    onClickMenu: _propTypes2.default.func.isRequired,
+    /**
+     * Fonction de callback au click sur le bouton de notifications
+     */
+    onClickNotifications: _propTypes2.default.func,
+    /**
+     * Fonction de callback au click sur le bouton "Retour" du menu
+     */
+    onClickReturn: _propTypes2.default.func.isRequired,
+    /**
+     * Fonction de callback au click sur le bouton "Settings" du menu
+     */
+    onClickSettings: _propTypes2.default.func,
+    /**
+     * Fonction de callback au blur du champs de recharge
+     */
+    onSearchBlur: _propTypes2.default.func,
+    /**
+     * Fonction de callback au focus sur le champs de recharge
+     */
+    onSearchFocus: _propTypes2.default.func,
+    /**
+     * @ignore
+     */
+    theme: _propTypes2.default.object,
+    /**
+     * Traductions
+     */
+    translations: _propTypes2.default.object
+} : {};
+exports.default = (0, _withStyles2.default)(styles, { withTheme: true, name: 'HmuiHiTopBar' })(HiTopBar);

package/HiTopBar/index.js

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