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

package/es/HiTopBar/HiTopBar.js

@@ -0,0 +1,527 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Hidden from 'material-ui/Hidden';
+import AppBar from 'material-ui/AppBar';
+import Toolbar from 'material-ui/Toolbar';
+import Button from 'material-ui/Button';
+import IconButton from 'material-ui/IconButton';
+import Collapse from 'material-ui/transitions/Collapse';
+import { ChevronDoubleUp, ChevronDoubleDown, Menu as MenuIcon, ArrowLeft, DotsVertical, MenuDown } from 'mdi-material-ui';
+import classNames from 'classnames';
+import Menu, { MenuItem } from 'material-ui/Menu';
+import withStyles from '../styles/withStyles';
+import HiIconBuilder from '../utils/HiIconBuilder';
+import HiBadge from '../HiBadge';
+import HiButton from '../HiButton';
+import HiInput from '../HiForm/HiInput';
+import HiColoredLabel from '../HiColoredLabel';
+import { getContrastedTextColor, fade } from '../styles/colorManipulator';
+
+export const styles = theme => ({
+    root: {
+        width: '100%',
+        boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.16)'
+    },
+    colorPrimary: {
+        backgroundColor: theme.palette.background3,
+        color: getContrastedTextColor(theme.palette.background1, theme.palette.text.secondary, '#FFF')
+    },
+    colorPrimaryFocus: {
+        backgroundColor: theme.palette.background2,
+        color: 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: 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: fade('#000', 0.38),
+        textTransform: 'capitalize',
+        fontWeight: theme.typography.fontWeightRegular,
+        minWidth: 50
+    },
+    endButtonWithClearIcon: {
+        top: -38
+    }
+});
+
+var _ref = React.createElement(HiIconBuilder, { icon: 'fa-bell-o', size: 25 });
+
+var _ref2 = React.createElement(ArrowLeft, null);
+
+var _ref3 = React.createElement(ChevronDoubleDown, null);
+
+var _ref4 = React.createElement(ArrowLeft, null);
+
+var _ref5 = React.createElement(MenuIcon, null);
+
+var _ref6 = React.createElement(DotsVertical, null);
+
+class HiTopBar extends React.Component {
+
+    constructor(props) {
+        super(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);
+    }
+
+    handleOpenMenu(event) {
+        this.setState({ menuAnchor: event.currentTarget });
+    }
+
+    handleCloseMenu() {
+        this.setState({ menuAnchor: null });
+    }
+
+    handleMenuItemClick(callback) {
+        this.setState({ menuAnchor: null });
+        callback();
+    }
+
+    toggleCollapse() {
+        this.setState({ collapsed: !this.state.collapsed });
+    }
+
+    handleChange(event) {
+        this.setState({ searchValue: event.target.value });
+    }
+
+    handleResetSearch() {
+        this.setState({ searchValue: '' });
+    }
+
+    handleFocus() {
+        this.setState({ searchFocus: true });
+
+        if (this.props.onSearchFocus) {
+            this.props.onSearchFocus();
+        }
+    }
+
+    handleClickInputButton(event) {
+        this.setState({ searchFocus: true });
+
+        if (this.props.onClickInputButton) {
+            this.props.onClickInputButton();
+        }
+        // Stop propagation to cancel input focus
+        event.stopPropagation();
+    }
+
+    handleBlur(event) {
+        if (!this.overlay.contains(event.relatedTarget)) {
+            this.setState({ searchFocus: false });
+        }
+
+        if (this.props.onSearchBlur) {
+            this.props.onSearchBlur();
+        }
+    }
+
+    handleClickMenu() {
+        this.props.onClickReturn();
+        this.setState({ searchFocus: false });
+    }
+
+    render() {
+        const {
+            classes,
+            theme,
+            notificationValue,
+            beta,
+            hideable,
+            hasSettings,
+            hasAccountSelector,
+            translations,
+            onClickMenu,
+            accountSelectorContent
+        } = this.props;
+
+        const colorPrimaryClass = this.state.searchFocus ? classes.colorPrimaryFocus : classes.colorPrimary;
+
+        const inputClass = classNames({
+            [classes.searchInput]: !this.state.searchFocus,
+            [classes.searchInputFocused]: this.state.searchFocus
+        });
+
+        const endAdornment = React.createElement(
+            HiButton,
+            {
+                className: classNames(classes.endAdornmentButton, {
+                    [classes.endButtonWithClearIcon]: this.state.searchValue.length > 0
+                }),
+                onClick: this.handleClickInputButton
+            },
+            React.createElement(
+                Hidden,
+                { smDown: true },
+                React.createElement(
+                    'span',
+                    null,
+                    translations.all_types
+                )
+            ),
+            React.createElement(MenuDown, { style: { position: 'relative', top: -2, color: fade('#000', 0.54) } })
+        );
+
+        const searchInput = React.createElement(HiInput, {
+            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
+        });
+
+        const notificationButton = notificationValue > 0 ? React.createElement(
+            HiButton,
+            {
+                className: classes.notificationButton,
+                onClick: this.props.onClickNotifications
+            },
+            React.createElement(
+                HiBadge,
+                {
+                    value: notificationValue,
+                    classes: { root: classes.notificationBadge }
+                },
+                _ref
+            )
+        ) : '';
+
+        return React.createElement(
+            AppBar,
+            {
+                classes: { root: classes.root, colorPrimary: colorPrimaryClass },
+                position: this.props.position
+            },
+            React.createElement(
+                Hidden,
+                { smDown: true },
+                React.createElement(
+                    'div',
+                    null,
+                    React.createElement(
+                        Collapse,
+                        { 'in': !this.state.collapsed },
+                        React.createElement(
+                            Toolbar,
+                            { className: classes.toolbar },
+                            React.createElement(
+                                'div',
+                                { ref: div => this.overlay = div },
+                                this.state.searchFocus ? React.createElement(
+                                    HiButton,
+                                    {
+                                        className: classes.leftButton,
+                                        onClick: this.handleClickMenu,
+                                        color: 'inherit'
+                                    },
+                                    _ref2,
+                                    React.createElement(
+                                        'span',
+                                        { className: classes.leftButtonLabel },
+                                        translations.back
+                                    )
+                                ) : React.createElement(
+                                    HiButton,
+                                    {
+                                        className: classes.leftButton,
+                                        onClick: onClickMenu,
+                                        color: 'inherit'
+                                    },
+                                    React.createElement(MenuIcon, { style: { height: 24 } }),
+                                    React.createElement(
+                                        'span',
+                                        { className: classes.leftButtonLabel },
+                                        translations.menu
+                                    )
+                                )
+                            ),
+                            React.createElement(
+                                'div',
+                                { className: classes.flex },
+                                searchInput
+                            ),
+                            notificationButton,
+                            hasAccountSelector && React.createElement(
+                                'div',
+                                { className: classes.accountSelector },
+                                React.createElement(
+                                    HiButton,
+                                    {
+                                        color: 'inherit',
+                                        className: classes.accountSelectorButton,
+                                        classes: {
+                                            label: classes.accountSelectorButtonLabel
+                                        },
+                                        onClick: this.props.onClickAccountSelector
+                                    },
+                                    accountSelectorContent
+                                )
+                            ),
+                            beta && React.createElement(HiColoredLabel, {
+                                label: 'BETA',
+                                beta: true,
+                                color: theme.palette.neutral.dark
+                            }),
+                            (hideable || hasSettings) && React.createElement(
+                                IconButton,
+                                { color: 'inherit', className: classes.iconButton },
+                                hideable && React.createElement(ChevronDoubleUp, { onClick: this.toggleCollapse }),
+                                hasSettings && React.createElement(HiIconBuilder, {
+                                    onClick: this.props.onClickSettings,
+                                    icon: 'fa-gear',
+                                    size: 24
+                                })
+                            )
+                        )
+                    ),
+                    hideable && this.state.collapsed && React.createElement(
+                        IconButton,
+                        {
+                            onClick: this.toggleCollapse,
+                            color: 'inherit',
+                            className: classes.showTopBarButton
+                        },
+                        _ref3
+                    )
+                )
+            ),
+            React.createElement(
+                Hidden,
+                { mdUp: true },
+                React.createElement(
+                    Toolbar,
+                    { className: classes.toolbar },
+                    React.createElement(
+                        'div',
+                        { ref: div => this.overlay = div },
+                        this.state.searchFocus ? React.createElement(
+                            IconButton,
+                            { className: classes.leftButtonMobile, color: 'inherit' },
+                            _ref4
+                        ) : React.createElement(
+                            IconButton,
+                            {
+                                className: classes.leftButtonMobile,
+                                onClick: onClickMenu,
+                                color: 'inherit'
+                            },
+                            _ref5
+                        )
+                    ),
+                    React.createElement(
+                        'div',
+                        { className: classes.flex },
+                        searchInput
+                    ),
+                    notificationButton,
+                    (hasAccountSelector || hasSettings) && React.createElement(
+                        'div',
+                        { className: classes.rightComponentMobile },
+                        React.createElement(
+                            IconButton,
+                            {
+                                color: 'inherit',
+                                onClick: this.handleOpenMenu,
+                                'aria-owns': this.state.menuAnchor ? 'top-bar-mobile-menu' : null,
+                                'aria-haspopup': 'true'
+                            },
+                            _ref6
+                        ),
+                        React.createElement(
+                            Menu,
+                            {
+                                id: 'top-bar-mobile-menu',
+                                anchorEl: this.state.menuAnchor,
+                                open: Boolean(this.state.menuAnchor),
+                                onClose: this.handleCloseMenu,
+                                PaperProps: { style: { maxWidth: 264 } }
+                            },
+                            hasAccountSelector && React.createElement(
+                                MenuItem,
+                                {
+                                    key: 'account-selector',
+                                    onClick: () => this.handleMenuItemClick(this.props.onClickAccountSelector),
+                                    classes: { root: classes.accountSelectorButtonLabel }
+                                },
+                                accountSelectorContent
+                            ),
+                            hasSettings && React.createElement(
+                                MenuItem,
+                                {
+                                    key: 'settings',
+                                    onClick: () => this.handleMenuItemClick(this.props.onClickSettings)
+                                },
+                                'Settings'
+                            )
+                        )
+                    )
+                )
+            )
+        );
+    }
+}
+
+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: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+    /**
+     * Définit si l'on doit afficher le bouton "Beta" ou non
+     */
+    beta: PropTypes.bool,
+    /**
+     * Permet des surcharges de style
+     */
+    classes: PropTypes.object,
+    /**
+     * Définit si l'on doit afficher le bouton "Account selector" ou non
+     */
+    hasAccountSelector: PropTypes.bool,
+    /**
+     * Définit si l'on doit afficher le bouton "Settings" ou non
+     */
+    hasSettings: PropTypes.bool,
+    /**
+     * La TopBar peut être cachée vie le bouton double chevron
+     */
+    hideable: PropTypes.bool,
+    /**
+     * La valeur a afficher dans le boutton de notification.
+     */
+    notificationValue: PropTypes.number,
+    /**
+     * Fonction de callback au click sur l'accountSelector'
+     */
+    onClickAccountSelector: PropTypes.func,
+    /**
+     * Fonction de callback au click sur le menu
+     */
+    onClickInputButton: PropTypes.func.isRequired,
+    /**
+     * Fonction de callback au click sur le menu
+     */
+    onClickMenu: PropTypes.func.isRequired,
+    /**
+     * Fonction de callback au click sur le bouton de notifications
+     */
+    onClickNotifications: PropTypes.func,
+    /**
+     * Fonction de callback au click sur le bouton "Retour" du menu
+     */
+    onClickReturn: PropTypes.func.isRequired,
+    /**
+     * Fonction de callback au click sur le bouton "Settings" du menu
+     */
+    onClickSettings: PropTypes.func,
+    /**
+     * Fonction de callback au blur du champs de recharge
+     */
+    onSearchBlur: PropTypes.func,
+    /**
+     * Fonction de callback au focus sur le champs de recharge
+     */
+    onSearchFocus: PropTypes.func,
+    /**
+     * @ignore
+     */
+    theme: PropTypes.object,
+    /**
+     * Traductions
+     */
+    translations: PropTypes.object
+} : {};
+export default withStyles(styles, { withTheme: true, name: 'HmuiHiTopBar' })(HiTopBar);

package/es/HiTopBar/index.js

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

package/es/Hidden/Hidden.js

@@ -0,0 +1,107 @@
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+import React from 'react';
+import PropTypes from 'prop-types';
+import HiddenJs from './HiddenJs';
+import HiddenCss from './HiddenCss';
+
+/**
+ * Responsively hides children based on the selected implementation.
+ */
+function Hidden(props) {
+  const { implementation } = props,
+        other = _objectWithoutProperties(props, ['implementation']);
+
+  if (implementation === 'js') {
+    return React.createElement(HiddenJs, other);
+  }
+
+  return React.createElement(HiddenCss, other);
+}
+
+Hidden.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * The content of the component.
+   */
+  children: PropTypes.node,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * Specify which implementation to use.  'js' is the default, 'css' works better for server
+   * side rendering.
+   */
+  implementation: PropTypes.oneOf(['js', 'css']),
+  /**
+   * You can use this property when choosing the `js` implementation with server side rendering.
+   *
+   * As `window.innerWidth` is unavailable on the server,
+   * we default to rendering an empty componenent during the first mount.
+   * In some situation you might want to use an heristic to approximate
+   * the screen width of the client browser screen width.
+   *
+   * For instance, you could be using the user-agent or the client-hints.
+   * http://caniuse.com/#search=client%20hint
+   */
+  initialWidth: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
+  /**
+   * If true, screens this size and down will be hidden.
+   */
+  lgDown: PropTypes.bool,
+  /**
+   * If true, screens this size and up will be hidden.
+   */
+  lgUp: PropTypes.bool,
+  /**
+   * If true, screens this size and down will be hidden.
+   */
+  mdDown: PropTypes.bool,
+  /**
+   * If true, screens this size and up will be hidden.
+   */
+  mdUp: PropTypes.bool,
+  /**
+   * Hide the given breakpoint(s).
+   */
+  only: PropTypes.oneOfType([PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']), PropTypes.arrayOf(PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']))]),
+  /**
+   * If true, screens this size and down will be hidden.
+   */
+  smDown: PropTypes.bool,
+  /**
+   * If true, screens this size and up will be hidden.
+   */
+  smUp: PropTypes.bool,
+  /**
+   * If true, screens this size and down will be hidden.
+   */
+  xlDown: PropTypes.bool,
+  /**
+   * If true, screens this size and up will be hidden.
+   */
+  xlUp: PropTypes.bool,
+  /**
+   * If true, screens this size and down will be hidden.
+   */
+  xsDown: PropTypes.bool,
+  /**
+   * If true, screens this size and up will be hidden.
+   */
+  xsUp: PropTypes.bool
+} : {};
+
+Hidden.defaultProps = {
+  implementation: 'js',
+  lgDown: false,
+  lgUp: false,
+  mdDown: false,
+  mdUp: false,
+  smDown: false,
+  smUp: false,
+  xlDown: false,
+  xlUp: false,
+  xsDown: false,
+  xsUp: false
+};
+
+export default Hidden;