@hipay/hipay-material-ui 3.4.1 → 3.5.0

package/src/HiSelect/HiSuggestSelect.js

@@ -0,0 +1,309 @@
+// @inheritedComponent HiInput
+import React from 'react';
+import PropTypes from 'prop-types';
+import Grow from '@material-ui/core/Grow';
+import Paper from '@material-ui/core/Paper';
+import classNames from 'classnames';
+import HiSelectableList from '../HiSelectableList';
+import HiInput from '../HiForm/HiInput';
+import { withStyles } from '@material-ui/core/styles';
+import Popper from '@material-ui/core/Popper';
+import { getNextItemSelectable } from '../utils/helpers';
+import keycode from 'keycode';
+
+export const styles = theme => ({
+    root: {
+        backgroundColor: theme.palette.background2,
+        maxWidth: 500,
+        minWidth: 200,
+        width: '100%',
+    },
+    popper: {
+        width: '100% !important',
+        transform: 'none !important',
+        zIndex: '9 !important',
+        top: '100% !important',
+        textOverflow: 'ellipsis',
+    },
+    paper: {
+        borderRadius: '0px 2px',
+        maxHeight: 440,
+        transition: 'none',
+    },
+    alignRight: {
+        right: 0,
+    },
+});
+
+class HiSuggestSelect extends React.PureComponent {
+    static propTypes = {
+        /**
+         * Align popper on right or left of container
+         */
+        align: PropTypes.oneOf(['left', 'right']),
+        /**
+         * Useful to extend the style applied to components.
+         */
+        classes: PropTypes.object,
+        /**
+         * id de l'élément input
+         */
+        id: PropTypes.string,
+        /**
+         * Object that contains the style for Input component
+         */
+        inputClasses: PropTypes.object,
+        /**
+         * Passe une ref callback au composant input
+         */
+        inputRef: PropTypes.func,
+        /**
+         * Ajoute un loader
+         */
+        loading: PropTypes.bool,
+        /**
+         * Fonction de callback appelée lorsqu'on blur le champ de recherche
+         */
+        onBlurInput: PropTypes.func,
+        /**
+         * Fonction de callback appelée lorsqu'on focus le champs de recherche
+         */
+        onFocusInput: PropTypes.func,
+        /**
+         * 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,
+        /**
+         * Permet d'afficher un message si pas assez de caractères
+         */
+        showMinLength: PropTypes.bool,
+        /**
+         * Permet d'afficher un message si aucune options n'est présente
+         */
+        showNoResults: PropTypes.bool,
+        /**
+         * Traductions (par défaut en anglais)
+         */
+        translations: PropTypes.object,
+    };
+
+    static defaultProps = {
+        align: 'left',
+        showMinLength: false,
+        showNoResults: false,
+        translations: {
+            no_result_match: 'Aucun résultat correspondant',
+            min_length: 'Veuillez saisir 3 caractères minimum',
+        },
+        options: [],
+    };
+
+    static getDerivedStateFromProps(props, state) {
+        if (JSON.stringify(props.options) !== JSON.stringify(state.options)) {
+            return {
+                options: props.options,
+                suggestionFocusIndex: -1,
+            };
+        }
+        return null;
+    }
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            focused: false,
+            options: props.options,
+            suggestionFocusIndex: -1,
+        };
+    }
+
+    getInputElement = el => {
+        this.textInput = el;
+        if (this.props.inputRef) {
+            this.props.inputRef(this.textInput);
+        }
+    };
+
+    handleSelect = (event, value) => {
+        document.body.style.overflow = 'auto';
+        this.props.onSelect(event, value);
+        const textInput = this.textInput;
+        if (textInput) {
+            setTimeout(() => {
+                textInput.focus();
+                textInput.scrollLeft = textInput.scrollWidth;
+            }, 1);
+        }
+    };
+
+    // Key down on list items
+    handleKeyDown = event => {
+        let nextItem;
+        const key = keycode(event);
+        if (key === 'down') {
+            event.preventDefault();
+            nextItem = getNextItemSelectable(document.activeElement, 'down');
+        } else if (key === 'up') {
+            event.preventDefault();
+            nextItem = getNextItemSelectable(document.activeElement, 'up');
+        } else if (key === 'tab') {
+            document.body.style.overflow = 'auto';
+        } else if (key === 'escape' || 'enter') {
+            event.preventDefault();
+            const item = this.props.options.find(elem => String(elem.id) === event.target.id);
+            this.handleSelect(null, item);
+        }
+        if (nextItem) {
+            nextItem.focus();
+        }
+    };
+
+    // Key down on search input
+    handleKeyDownSearch = event => {
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            if (this.state.suggestionFocusIndex < this.props.options.length - 1) {
+                this.setState(prevState => ({
+                    suggestionFocusIndex: prevState.suggestionFocusIndex + 1,
+                }));
+            }
+        } else if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            if (this.state.suggestionFocusIndex >= 0) {
+                this.setState(prevState => ({
+                    suggestionFocusIndex: prevState.suggestionFocusIndex - 1,
+                }));
+            }
+        } else if (event.key === 'Enter' && this.state.suggestionFocusIndex >= 0) {
+            event.preventDefault();
+            // Suggestion focused
+            this.handleSelect(event, this.state.options[this.state.suggestionFocusIndex]);
+        } else if (event.key === 'Escape') {
+            this.setState({ options: [], suggestionFocusIndex: -1 });
+        }
+    };
+
+    handleFocus = event => {
+        this.setState({ focused: true });
+        if (this.props.onFocusInput) {
+            this.props.onFocusInput(event);
+        }
+    };
+
+    handleBlur = event => {
+        // Si on click sur un élément de HiInput, on garde le focus
+        // Par exemple sur l'icone reset
+        if (!event.relatedTarget || !this.overlay || !this.overlay.contains(event.relatedTarget)) {
+            this.setState({ options: [], focused: false, suggestionFocusIndex: -1 });
+            if (this.props.onBlurInput) {
+                this.props.onBlurInput(event);
+            }
+        }
+    };
+
+    render() {
+        const {
+            classes,
+            id,
+            loading,
+            showMinLength,
+            showNoResults,
+            onSearch,
+            translations,
+            align,
+            inputClasses,
+            ...otherProps
+        } = this.props;
+
+        const { focused, options, suggestionFocusIndex } = this.state;
+
+        let optionsShown = options;
+
+        // If loading
+        if (loading) {
+            optionsShown = [
+                {
+                    id: '_loading',
+                    type: 'loader',
+                    disabled: true,
+                    centered: true,
+                    checkbox: false,
+                    label: 'loading',
+                },
+            ];
+        } else if (options.length === 0 && (showNoResults || showMinLength)) {
+            // If no result match
+            optionsShown = [
+                {
+                    id: '_no_result',
+                    type: 'text',
+                    disabled: true,
+                    centered: true,
+                    checkbox: false,
+                    label: showNoResults ? translations.no_result_match : translations.min_length,
+                },
+            ];
+        }
+
+        const open = !!optionsShown.length && focused;
+
+        return (
+            <div
+                className={classes.root}
+                ref={el => {
+                    this.overlay = el;
+                }}
+            >
+                <HiInput
+                    {...otherProps}
+                    inputId={id}
+                    focused={focused}
+                    inputRef={this.getInputElement}
+                    onChange={onSearch}
+                    onKeyDown={this.handleKeyDownSearch}
+                    onBlur={this.handleBlur}
+                    onFocus={this.handleFocus}
+                    classes={inputClasses}
+                />
+                {
+                    open && (
+                        <Popper
+                            disablePortal
+                            anchorEl={this.textInput}
+                            placement="bottom-start"
+                            className={classNames(classes.popper, { [classes.alignRight]: align === 'right' })}
+                            open
+                        >
+                            <Grow in={open} id="menu-list" style={{ transformOrigin: '0 0 0' }}>
+                                <Paper className={classes.paper}>
+                                    <HiSelectableList
+                                        itemList={optionsShown}
+                                        selectedIdList={[]}
+                                        hideCheckbox
+                                        onSelect={this.handleSelect}
+                                        translations={translations}
+                                        onKeyDown={this.handleKeyDown}
+                                        suggestionFocusIndex={suggestionFocusIndex}
+                                    />
+                                </Paper>
+                            </Grow>
+                        </Popper>
+                    )
+                }
+            </div>
+        );
+    }
+}
+
+export default withStyles(styles, { hiComponent: true, name: 'HmuiHiSuggestSelect' })(
+    HiSuggestSelect,
+);

package/src/HiSelect/HiSuggestSelectField.js

@@ -0,0 +1,95 @@
+// @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 {
+    static propTypes = {
+        /**
+         * Surcharge des styles
+         */
+        className: PropTypes.string,
+        /**
+         * 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,
+    };
+
+    render() {
+        const {
+            label,
+            required,
+            disabled,
+            error,
+            errorText,
+            helperText,
+            helperIcon,
+            id,
+            className,
+            ...others
+        } = this.props;
+
+        return (
+            <HiFormControl
+                id={id}
+                label={label}
+                required={required}
+                disabled={disabled}
+                error={error}
+                errorText={errorText}
+                helperText={helperText}
+                helperIcon={helperIcon}
+                className={className}
+            >
+                <HiSuggestSelect
+                    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é',
+                    }}
+                    disabled={disabled}
+                    error={error}
+                    {...others}
+                />
+            </HiFormControl>
+        );
+    }
+}
+
+export default HiSuggestSelectField;

package/src/HiSelect/index.js

@@ -0,0 +1,8 @@
+export { default } from './HiSelect';
+export { default as HiNestedSelect } from './HiNestedSelect';
+export { default as HiSelectField } from './HiSelectField';
+export { default as HiSelectInput } from './HiSelectInput';
+export { default as HiSelectContent } from './HiSelectContent';
+export { default as HiNestedSelectContent, findFinalItemRecursively, getRecursiveFinalItemIdList } from './HiNestedSelectContent';
+export { default as HiSuggestSelect } from './HiSuggestSelect';
+export { default as HiSuggestSelectField } from './HiSuggestSelectField';

package/src/HiSelectableList/HiSelectableList.js

@@ -0,0 +1,289 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import List from '@material-ui/core/List';
+import { withStyles } from '@material-ui/core/styles';
+import HiSelectableListItem from './HiSelectableListItem';
+import { getNextItemSelectable, foldAccents } from '../utils/helpers';
+import keycode from 'keycode';
+import LazyLoad, { forceCheck } from 'react-lazyload';
+import classNames from 'classnames';
+
+export const styles = theme => ({
+    root: {
+        padding: 0,
+        backgroundColor: theme.palette.background3,
+    },
+    suggestionFocus: {
+        backgroundColor: theme.palette.action.hover,
+        fontWeight: theme.typography.fontWeightMedium,
+    },
+});
+
+/**
+ * Construit une liste d'item sélectionnable (avec checkbox)
+ * - la navigation au clavier est gérée par l'event KeyDown
+ * - le premier focus est géré sur le DidMount
+ */
+class HiSelectableList extends React.PureComponent {
+    static propTypes = {
+        /**
+         * Définit si tous les items de la liste sont sélectionnés
+         */
+        allSelected: PropTypes.bool,
+        /**
+         * Icon affiché lorsque l'item est sélectionné
+         */
+        checkedIcon: PropTypes.node,
+        /**
+         * Useful to extend the style applied to components.
+         */
+        classes: PropTypes.object,
+        /**
+         * Fonction de comparaison utilisée pour les tris
+         */
+        comparItemFunc: PropTypes.func,
+        /**
+         * Désactive la listes
+         */
+        disabled: PropTypes.bool,
+        /**
+         * Liste des ids des items disabled
+         */
+        disabledItemIdList: PropTypes.array,
+        /**
+         * N'affiche pas de checkboxes
+         */
+        hideCheckbox: PropTypes.bool,
+        /**
+         * Icon affiché lorsque l'item n'est pas sélectionné et qu'on le survole
+         */
+        hoverIcon: PropTypes.node,
+        /**
+         * Icon affiché lorsque l'item n'est pas sélectionné
+         */
+        icon: PropTypes.node,
+        /**
+         * Liste d'éléments ([ { id: '', label: '', ... } ])
+         */
+        itemList: PropTypes.array.isRequired,
+        /**
+         * Active lazyloading on list items
+         */
+        lazy: PropTypes.bool,
+        /**
+         * Fonction de callback à la sélection d'un item, renvoie l'item sélectionné
+         *
+         * @param {object} event The event source of the callback
+         * @param {object} item selected/unselected
+         */
+        onSelect: PropTypes.func.isRequired,
+        /**
+         * Overlay récupéré au niveau de la div précédant le HiSelectInput
+         */
+        overlay: PropTypes.object,
+        /**
+         * Liste des id des éléments sélectionnés
+         */
+        selectedItemIdList: PropTypes.array,
+        /**
+         * Index de l'item "focus"
+         */
+        suggestionFocusIndex: PropTypes.number,
+        /**
+         * Tri des éléments selon leur label
+         */
+        sort: PropTypes.bool,
+        /**
+         * Liste des éléments à placer en premier, peu import le tri
+         */
+        sortAppendList: PropTypes.array,
+        /**
+         * Value(s) du select
+         */
+        value: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.array]),
+    };
+
+    static defaultProps = {
+        allSelected: false,
+        disabled: false,
+        disabledItemIdList: [],
+        hideCheckbox: false,
+        lazy: true,
+        selectedItemIdList: [],
+        sort: false,
+        sortAppendList: ['_all'],
+    };
+
+    componentDidMount() {
+        // Focus on last item selected
+        if (this.props.overlay && this.props.overlay.getElementsByTagName('li')[0]) {
+            if ((Array.isArray(this.props.value) && this.props.value.length > 0) || (!Array.isArray(this.props.value) && this.props.value)) {
+                let item = this.props.overlay.getElementsByTagName('li')[0];
+                let lastSelectedValue = Array.isArray(this.props.value) ? this.props.value[this.props.value.length-1] : this.props.value;
+                let index = 0;
+                this.props.itemList.forEach(option => {
+                    if (option.id === lastSelectedValue) {
+                        item = this.props.overlay.getElementsByTagName('li')[index];
+                    }
+                    index++;
+                    if (option.children && option.children.length) {
+                        option.children.forEach(option => {
+                            if (option.id === lastSelectedValue) {
+                                item = this.props.overlay.getElementsByTagName('li')[index];
+                            }
+                            index++;
+                        });
+                    }
+                });
+                item && item.focus();
+            }
+        }
+    }
+
+    componentDidUpdate(prevProps) {
+        if (this.props.lazy && prevProps.itemList !== this.props.itemList) {
+            forceCheck();
+        }
+    }
+
+    handleSelect = item => event => {
+        this.props.onSelect(event, item);
+    };
+
+    handleKeyDown = event => {
+        let nextItem;
+        const key = keycode(event);
+        if (key === 'down') {
+            event.preventDefault();
+            nextItem = getNextItemSelectable(document.activeElement, 'down');
+        } else if (key === 'up') {
+            event.preventDefault();
+            nextItem = getNextItemSelectable(document.activeElement, 'up');
+        }
+        if (nextItem) {
+            nextItem.focus();
+        }
+    };
+
+    /**
+     * Build list item and children items
+     *
+     * @param item
+     * @param index
+     * @param level
+     * @returns {*}
+     */
+    buildRecursiveListItem = (item, index, level = 0) => {
+        const {
+            checkedIcon,
+            disabled,
+            disabledItemIdList,
+            hideCheckbox,
+            hoverIcon,
+            icon,
+            lazy,
+            selectedItemIdList,
+            sort,
+            onKeyDown,
+            onKeyUp,
+            suggestionFocusIndex,
+            classes,
+            ...others
+        } = this.props;
+
+        if (sort && item.children) {
+            item.children.sort(this.compareItem);
+        }
+        const placeholderContent = (
+            <div style={{ width: '90%', padding: '8px 6px', height: 40, position: 'sticky', left: 0 }}>
+                <div style={{ backgroundColor: '#F5F5F5', width: '100%', height: '100%', borderRadius: 4 }} />
+            </div>
+        );
+
+        const itemComponent = (
+            <React.Fragment key={item.id}>
+                <HiSelectableListItem
+                    {...others}
+                    checkedIcon={checkedIcon}
+                    disabled={disabled || disabledItemIdList.includes(item.id)}
+                    hideCheckbox={hideCheckbox}
+                    hoverIcon={hoverIcon}
+                    icon={icon}
+                    level={level}
+                    onSelect={this.handleSelect(item)}
+                    onKeyDown={onKeyDown}
+                    onKeyUp={onKeyUp}
+                    selected={selectedItemIdList.includes(item.id)}
+                    // item props override upper props (disabled, hideCheckbox, icon, level...)
+                    item={item}
+                    classes={{ listItem: classNames({ [classes.suggestionFocus]: index === suggestionFocusIndex }) }}
+                    {...item}
+                />
+                {(item.children && item.children.length > 0) && (
+                    item.children
+                        .filter(subItem => !(subItem.displayed === false))
+                        .map(subItem => this.buildRecursiveListItem(subItem, index, level + 1))
+                )}
+            </React.Fragment>
+        );
+
+        if (lazy) {
+            return (
+                <LazyLoad
+                    key={item.id}
+                    height={40}
+                    offset={400}
+                    once
+                    overflow
+                    placeholder={placeholderContent}
+                >
+                    {itemComponent}
+                </LazyLoad>
+            );
+        }
+
+        return itemComponent;
+    };
+
+    compareItem = (a, b) => {
+        if (this.props.comparItemFunc) {
+            return this.props.comparItemFunc(a, b);
+        }
+        if (a.label === undefined || b.label === undefined) {
+            return 0;
+        }
+        const sortAppendList = this.props.sortAppendList;
+        if (sortAppendList.indexOf(a.id) < sortAppendList.indexOf(b.id)) {
+            return 1;
+        }
+        if (sortAppendList.indexOf(a.id) > sortAppendList.indexOf(b.id)) {
+            return -1;
+        }
+        return foldAccents(a.label.toString().toLowerCase()) > foldAccents(b.label.toString().toLowerCase()) ? 1 : -1;
+    };
+
+    render() {
+        const { classes, itemList, sort } = this.props;
+
+        if (sort) {
+            itemList.sort(this.compareItem);
+        }
+
+        return (
+            <List
+                className={classes.root}
+                onKeyDown={this.handleKeyDown}
+                innerRef={el => {
+                    this.el = el;
+                }}>
+                {itemList
+                    .filter(item => !(item.displayed === false)) // don't remove if undefined
+                    .map((item, index) => this.buildRecursiveListItem(item, index))}
+            </List>
+        );
+    }
+}
+
+export default withStyles(styles, { hiComponent: true, name: 'HmuiHiSelectableList', index: 51 })(
+    HiSelectableList,
+);