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

package/es/HiSelect/HiSelectField.js

@@ -0,0 +1,106 @@
+import _extends from 'babel-runtime/helpers/extends';
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+// @inheritedComponent HiSelect
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import HiFormControl from '../HiForm/HiFormControl';
+import HiSelect from './HiSelect';
+
+/**
+ * Champs input pour formulaire
+ */
+class HiSelectField extends React.PureComponent {
+
+  render() {
+    const _props = this.props,
+          {
+      label,
+      required,
+      disabled,
+      error,
+      errorText,
+      helperText,
+      helperIcon,
+      id,
+      name,
+      value,
+      options,
+      type,
+      multiple,
+      iconAll,
+      checkbox,
+      searchable,
+      translations
+    } = _props,
+          others = _objectWithoutProperties(_props, ['label', 'required', 'disabled', 'error', 'errorText', 'helperText', 'helperIcon', 'id', 'name', 'value', 'options', 'type', 'multiple', 'iconAll', 'checkbox', 'searchable', 'translations']);
+
+    return React.createElement(
+      HiFormControl,
+      {
+        id: id,
+        label: label,
+        required: required,
+        disabled: disabled,
+        error: error,
+        errorText: errorText,
+        helperText: helperText,
+        helperIcon: helperIcon
+      },
+      React.createElement(HiSelect, _extends({
+        id: id,
+        name: name,
+        value: value,
+        options: options,
+        type: type,
+        multiple: multiple,
+        iconAll: iconAll,
+        checkbox: checkbox,
+        searchable: searchable,
+        translations: translations,
+        onClick: this.handleClick,
+        onMouseEnter: this.handleMouseEnter,
+        onMouseLeave: this.handleMouseLeave,
+        onClose: this.handleClose,
+        disabled: disabled,
+        error: error
+      }, others))
+    );
+  }
+}
+
+HiSelectField.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Si `true`, l'input sera inactif.
+   */
+  disabled: PropTypes.bool,
+  /**
+   * Si `true`, le champs sera en erreur.
+   */
+  error: PropTypes.bool,
+  /**
+   * Texte de l'erreur
+   */
+  errorText: PropTypes.string,
+  /**
+   * Si "true", le texte d'aide s'affichera seulement au clic sur l'icône "Information"
+   */
+  helperIcon: PropTypes.bool,
+  /**
+   * Texte de l'aide
+   */
+  helperText: PropTypes.string,
+  /**
+   * id de l'élément input
+   */
+  id: PropTypes.string.isRequired,
+  /**
+   * Label du champs
+   */
+  label: PropTypes.string,
+  /**
+   * true si champs obligatoire
+   */
+  required: PropTypes.bool
+} : {};
+export default HiSelectField;

package/es/HiSelect/HiSuggestSelect.js

@@ -0,0 +1,223 @@
+import _extends from 'babel-runtime/helpers/extends';
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+// @inheritedComponent HiInput
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import classNames from 'classnames';
+import { findDOMNode } from 'react-dom';
+import Grow from 'material-ui/transitions/Grow';
+import Paper from 'material-ui/Paper';
+import ClickAwayListener from 'material-ui/utils/ClickAwayListener';
+import { Manager, Target, Popper } from 'react-popper';
+
+import HiSelectableList from '../HiSelectableList';
+import HiInput from '../HiForm/HiInput';
+
+import { withStyles } from '../styles';
+import { getNextItemSelectable } from '../utils/hiHelpers';
+
+export const styles = theme => ({
+    root: {
+        backgroundColor: theme.palette.background2,
+        maxWidth: 500,
+        minWidth: 250,
+        width: '100%'
+    },
+    popper: {
+        width: '100%',
+        transform: 'none',
+        zIndex: 9,
+        top: '100%'
+    },
+    popperClose: {
+        pointerEvents: 'none'
+    },
+    paper: {
+        borderRadius: '0px 2px',
+        maxHeight: 440,
+        transition: 'none'
+    }
+});
+
+class HiSuggestSelect extends React.PureComponent {
+
+    constructor(props) {
+        super(props);
+
+        this.handleSelect = (event, value) => {
+            document.body.style.overflow = 'auto';
+            this.props.onSelect(event, value);
+            const textInput = this.textInput;
+            if (textInput) {
+                setTimeout(() => {
+                    textInput.focus();
+                }, 1);
+            }
+        };
+
+        this.handleKeyDown = event => {
+            let nextItem;
+            if (event.key === 'ArrowDown') {
+                nextItem = getNextItemSelectable(document.activeElement, 'down');
+            } else if (event.key === 'ArrowUp') {
+                nextItem = getNextItemSelectable(document.activeElement, 'up');
+            } else if (event.key === 'Tab') {
+                document.body.style.overflow = 'auto';
+                this.setState({ open: false });
+            }
+            if (nextItem) {
+                nextItem.focus();
+            }
+        };
+
+        this.handleKeyDownSearch = event => {
+            if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+                document.body.style.overflow = 'hidden';
+                // On récupère la div parent "overlay"
+                const overlay = findDOMNode(this.overlay);
+                setTimeout(() => {
+                    // On recupère tous les items
+                    const items = overlay.getElementsByTagName('li');
+                    if (items.length) {
+                        // On focus sur le premier
+                        items[0].focus();
+                    }
+                }, 1);
+            }
+        };
+
+        this.state = {
+            focused: false,
+            options: props.options
+        };
+
+        this.handleSelect = this.handleSelect.bind(this);
+        this.handleClose = this.handleClose.bind(this);
+        this.handleBlur = this.handleBlur.bind(this);
+    }
+
+    componentWillReceiveProps(nextProps) {
+        this.setState({ options: nextProps.options });
+    }
+
+    handleClose() {
+        document.body.style.overflow = 'auto';
+        this.setState({
+            focused: false, // TODO - Make difference between open and focus
+            options: []
+        });
+    }
+
+    // Key down on list items
+
+
+    // Key down on search input
+
+
+    handleBlur(event) {
+        // Si on click sur un élément de HiInput, on garde le focus
+        // Par exemple sur l'icone reset
+        const overlay = this.overlay;
+        if (!event.relatedTarget || !this.overlay || !this.overlay.contains(event.relatedTarget)) {
+            this.setState({ options: [] });
+        }
+    }
+
+    render() {
+        const _props = this.props,
+              { classes, translations, id, onSearch } = _props,
+              otherProps = _objectWithoutProperties(_props, ['classes', 'translations', 'id', 'onSearch']);
+
+        const { focused, options } = this.state;
+        const open = !!options.length;
+        return React.createElement(
+            'div',
+            {
+                className: classes.root,
+                ref: el => {
+                    this.overlay = el;
+                }
+            },
+            React.createElement(
+                Manager,
+                null,
+                React.createElement(
+                    Target,
+                    null,
+                    React.createElement(HiInput, _extends({}, otherProps, {
+                        inputId: id,
+                        focused: focused,
+                        inputRef: input => {
+                            this.textInput = input;
+                        },
+                        onChange: onSearch,
+                        onKeyDown: this.handleKeyDownSearch,
+                        onBlur: this.handleBlur
+                    }))
+                ),
+                open && React.createElement(
+                    Popper,
+                    {
+                        placement: 'bottom-start',
+                        eventsEnabled: open,
+                        className: classNames(classes.popper, { [classes.popperClose]: !open })
+                    },
+                    React.createElement(
+                        ClickAwayListener,
+                        { onClickAway: this.handleClose },
+                        React.createElement(
+                            Grow,
+                            { 'in': open, id: 'menu-list', style: { transformOrigin: '0 0 0' } },
+                            React.createElement(
+                                Paper,
+                                { className: classes.paper },
+                                React.createElement(HiSelectableList, {
+                                    itemList: options,
+                                    selectedIdList: [],
+                                    checkbox: false,
+                                    onSelect: this.handleSelect,
+                                    translations: translations,
+                                    onKeyDown: this.handleKeyDown
+                                })
+                            )
+                        )
+                    )
+                )
+            )
+        );
+    }
+}
+
+HiSuggestSelect.defaultProps = {
+    translations: {},
+    options: []
+};
+HiSuggestSelect.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: PropTypes.object,
+    /**
+     * id de l'élément input
+     */
+    id: PropTypes.string,
+    /**
+     * Fonction de callback appelée lorsqu'on écrit dans le champ
+     */
+    onSearch: PropTypes.func,
+    /**
+     * Fonction de callback appelée lorsqu'on sélectionne une suggestion.
+     */
+    onSelect: PropTypes.func,
+    /**
+     * Liste de suggestions.
+     */
+    options: PropTypes.array,
+    /**
+     * Traductions (par défaut en anglais)
+     */
+    translations: PropTypes.object
+} : {};
+export default withStyles(styles, { name: 'HmuiHiSuggestSelect' })(HiSuggestSelect);

package/es/HiSelect/HiSuggestSelectField.js

@@ -0,0 +1,89 @@
+import _extends from 'babel-runtime/helpers/extends';
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+// @inheritedComponent HiSuggestSelect
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import HiFormControl from '../HiForm/HiFormControl';
+import HiSuggestSelect from './HiSuggestSelect';
+
+/**
+ * Champs input autosuggest pour formulaire avec label
+ */
+class HiSuggestSelectField extends React.PureComponent {
+
+    render() {
+        const _props = this.props,
+              {
+            label,
+            required,
+            disabled,
+            error,
+            errorText,
+            helperText,
+            helperIcon,
+            id
+        } = _props,
+              others = _objectWithoutProperties(_props, ['label', 'required', 'disabled', 'error', 'errorText', 'helperText', 'helperIcon', 'id']);
+
+        return React.createElement(
+            HiFormControl,
+            {
+                id: id,
+                label: label,
+                required: required,
+                disabled: disabled,
+                error: error,
+                errorText: errorText,
+                helperText: helperText,
+                helperIcon: helperIcon
+            },
+            React.createElement(HiSuggestSelect, _extends({
+                id: id,
+                translations: {
+                    all: 'Tous les pays',
+                    no_result_match: 'Aucun résultat correspondant',
+                    search: 'Recherche',
+                    n_items_selected: '%s pays sélectionnés',
+                    one_item_selected: '%s pays sélectionné'
+                }
+            }, others))
+        );
+    }
+}
+
+HiSuggestSelectField.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Si `true`, l'input sera inactif.
+     */
+    disabled: PropTypes.bool,
+    /**
+     * Si `true`, le champs sera en erreur.
+     */
+    error: PropTypes.bool,
+    /**
+     * Texte de l'erreur
+     */
+    errorText: PropTypes.string,
+    /**
+     * Si "true", le texte d'aide s'affichera seulement au clic sur l'icône "Information"
+     */
+    helperIcon: PropTypes.bool,
+    /**
+     * Texte de l'aide
+     */
+    helperText: PropTypes.string,
+    /**
+     * id de l'élément input
+     */
+    id: PropTypes.string,
+    /**
+     * Label du champs
+     */
+    label: PropTypes.string,
+    /**
+     * true si champs obligatoire
+     */
+    required: PropTypes.bool
+} : {};
+export default HiSuggestSelectField;

package/es/HiSelect/SelectInput.js

@@ -0,0 +1,262 @@
+import _extends from 'babel-runtime/helpers/extends';
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import ArrowDropDownIcon from '../svg-icons/ArrowDropDown';
+import Icon from 'material-ui/Icon';
+import { withStyles } from '../styles';
+
+import ButtonBase from 'material-ui/ButtonBase';
+
+export const styles = theme => ({
+    root: {
+        width: '100%',
+        height: 40,
+        maxWidth: 500,
+        justifyContent: 'flex-start',
+        padding: 8
+    },
+    underline: {
+        '&:before': {
+            backgroundColor: theme.palette.input.bottomLine,
+            left: 0,
+            bottom: 0,
+            // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
+            content: '""',
+            height: 1,
+            position: 'absolute',
+            right: 0,
+            transition: theme.transitions.create('background-color', {
+                duration: theme.transitions.duration.shorter,
+                easing: theme.transitions.easing.ease
+            }),
+            pointerEvents: 'none' // Transparent to the hover style.
+        },
+        '&:hover:not($disabled):before': {
+            backgroundColor: theme.palette.input.bottomLine,
+            height: 2
+        },
+        '&$disabled:before': {
+            background: 'transparent',
+            backgroundImage: `linear-gradient(to right, ${theme.palette.input.bottomLine} 33%, transparent 0%)`,
+            backgroundPosition: 'left top',
+            backgroundRepeat: 'repeat-x',
+            backgroundSize: '5px 1px'
+        }
+    },
+    inkbar: {
+        '&:not($disabled)': {
+            '&:after': {
+                backgroundColor: theme.palette.business.primary.normal,
+                left: 0,
+                bottom: 0,
+                // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
+                content: '""',
+                height: 1,
+                position: 'absolute',
+                right: 0,
+                transform: 'scaleX(0)',
+                transition: theme.transitions.create('transform', {
+                    duration: theme.transitions.duration.shorter,
+                    easing: theme.transitions.easing.easeOut
+                }),
+                pointerEvents: 'none' // Transparent to the hover style.
+            },
+            '&:hover:after': {
+                transform: 'scaleX(1)'
+            },
+            '&$focused:after': {
+                transform: 'scaleX(1)'
+            },
+            '&$error': {
+                border: `1px solid ${theme.palette.negative.normal}`,
+                borderRadius: 2
+            }
+        }
+    },
+    disabled: {
+        color: `${theme.palette.action.disabled}`,
+        backgroundColor: `${theme.palette.input.disabled}`,
+        '&:before': {
+            display: 'none'
+        }
+    },
+    focused: {
+        backgroundColor: theme.palette.background3
+    },
+    error: {},
+    label: _extends({
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        paddingRight: 16
+    }, theme.typography.body1, {
+        display: 'inline-flex',
+        width: '100%'
+    }),
+    icon: {
+        position: 'absolute',
+        display: 'flex',
+        alignItems: 'center',
+        right: 0,
+        height: 40,
+        transition: theme.transitions.create(['opacity', 'transform'], {
+            duration: theme.transitions.duration.shorter
+        })
+    },
+    iconOpen: {
+        transform: 'rotate(90deg)'
+    },
+    iconClose: {
+        transform: 'rotate(0deg)'
+    }
+});
+
+/**
+ * @ignore - internal component.
+ */
+
+var _ref = React.createElement(ArrowDropDownIcon, null);
+
+class SelectInput extends React.PureComponent {
+
+    constructor(props) {
+        super(props);
+
+        this.handleKeyDown = event => {
+            if (event.key === 'ArrowDown') {
+                this.props.onClick();
+            } else if (event.key === 'ArrowUp') {
+                this.props.onClick();
+            }
+        };
+
+        this.handleKeyDown = this.handleKeyDown.bind(this);
+    }
+
+    render() {
+        const { classes, noButton, disabled, onClick, value, open, focused, error, id } = this.props;
+
+        // On utilise classNames pour variabiliser les styles et merge les classes appliquées
+        const rootClass = classNames(classes.root, classes.inkbar, classes.underline, {
+            [classes.disabled]: disabled,
+            [classes.focused]: focused,
+            [classes.error]: error && !focused
+        });
+
+        const iconClass = classNames(classes.icon, {
+            [classes.iconOpen]: open,
+            [classes.iconClose]: !open
+        });
+
+        const render = noButton ? React.createElement(
+            'div',
+            {
+                id: id,
+                className: rootClass,
+                onClick: onClick,
+                disabled: disabled,
+                onMouseEnter: this.props.onMouseEnter,
+                onMouseLeave: this.props.onMouseLeave,
+                onKeyDown: this.handleKeyDown,
+                onFocus: this.props.onFocus,
+                onBlur: this.props.onBlur,
+                role: 'button',
+                tabIndex: '0'
+            },
+            React.createElement(
+                'span',
+                { className: classes.label },
+                value
+            ),
+            React.createElement(ArrowDropDownIcon, { className: iconClass })
+        ) : React.createElement(
+            ButtonBase,
+            {
+                id: id,
+                className: rootClass,
+                onClick: onClick,
+                disabled: disabled,
+                onMouseEnter: this.props.onMouseEnter,
+                onMouseLeave: this.props.onMouseLeave,
+                onKeyDown: this.handleKeyDown,
+                onFocus: this.props.onFocus,
+                onBlur: this.props.onBlur
+            },
+            React.createElement(
+                'span',
+                { className: classes.label },
+                value
+            ),
+            React.createElement(
+                Icon,
+                { classes: { root: iconClass } },
+                _ref
+            )
+        );
+
+        return render;
+    }
+}
+
+SelectInput.defaultProps = {
+    autoWidth: true,
+    disabled: false,
+    open: false,
+    focused: false,
+    noButton: false,
+    error: false
+};
+SelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: PropTypes.object,
+    /**
+     * If `true`, the select will be disabled.
+     */
+    disabled: PropTypes.bool,
+    /**
+     * Fonction de callback au blur du bouton
+     */
+    onBlur: PropTypes.func,
+    /**
+     * Fonction de callback au click sur l'input/bouton
+     */
+    onClick: PropTypes.func,
+    /**
+     * Fonction de callback au focus l'input/bouton
+     */
+    onFocus: PropTypes.func,
+    /**
+     * Fonction de callback à la pression de touche
+     */
+    onKeyDown: PropTypes.func,
+    /**
+     * Valeur à afficher (déjà formattée)
+     */
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.node]),
+    /**
+     * Applique le style open et effectue une rotation de l'icône
+     */
+    open: PropTypes.bool,
+    /**
+     * Affiche sous forme de div à la place d'un bouton.
+     * Si des éléments cliquables sont à l'intérieur.
+     */
+    noButton: PropTypes.bool,
+    /**
+     * Applique le style focused
+     */
+    focused: PropTypes.bool,
+    /**
+     * Applique le style error
+     */
+    error: PropTypes.bool,
+    /**
+     * id du select
+     */
+    id: PropTypes.string
+} : {};
+export default withStyles(styles, { name: 'HmuiSelectInput' })(SelectInput);

package/es/HiSelect/index.js

@@ -0,0 +1,11 @@
+export { default } from './HiSelect';
+import _HiSelect from './HiSelect';
+export { _HiSelect as HiSelect };
+import _HiSelectField from './HiSelectField';
+export { _HiSelectField as HiSelectField };
+import _SelectInput from './SelectInput';
+export { _SelectInput as SelectInput };
+import _HiSuggestSelect from './HiSuggestSelect';
+export { _HiSuggestSelect as HiSuggestSelect };
+import _HiSuggestSelectField from './HiSuggestSelectField';
+export { _HiSuggestSelectField as HiSuggestSelectField };