@hipay/hipay-material-ui 3.5.0 → 3.6.0-rc1

package/src/HiSelect/HiNestedSelect.js

@@ -1,526 +0,0 @@
-// @inheritedComponent HiSelect
-import React from 'react';
-import PropTypes from 'prop-types';
-import HiSelect from './HiSelect';
-import HiIcon from '../HiIcon';
-import { withStyles } from '@material-ui/core/styles';
-import { foldAccents } from '../utils/helpers';
-
-/**
- * Return array of final item id in nested list (via props chlidren)
- * @param itemList
- * @param finalItemIdList
- * @returns {*[]}
- */
-function getRecursiveFinalItemIdList(itemList, finalItemIdList = []) {
-    return [
-        ...finalItemIdList,
-        ...itemList.reduce((memo, item) => {
-            if (item.children) {
-                return getRecursiveFinalItemIdList(item.children, memo);
-            }
-            return [...memo, item.id];
-        }, []),
-    ];
-}
-
-/**
- * Find item by id in nested list (via props children)
- * @param itemList
- * @param searchId
- * @returns {boolean}
- */
-function findFinalItemRecursively(itemList, searchId) {
-    let foundItem = false;
-    itemList.some(item => {
-        if (item.id === searchId) {
-            foundItem = item;
-        } else if (item.children && !foundItem) {
-            foundItem = findFinalItemRecursively(item.children, searchId);
-        }
-        return foundItem !== false;
-    });
-    return foundItem;
-}
-
-export const filterValue = function(item, searchValue) {
-    return searchValue === '' ||
-        foldAccents(
-            item.label
-                .toString()
-                .toLowerCase())
-                .search(foldAccents(searchValue.toLowerCase())) !== -1;
-};
-
-/**
- * Build item list by settings item props relative to the nested parent/child situation
- * Reduce the item list to build specified items (displayed, pinned, disabled, selected, indeterminate)
- * Parent item is selected if each children item is include in selectedItemIdList (s stay to true)
- * Parent item is indeterminate if it is not selected & not unselected (s goes false & u goes false)
- *
- * @param itemList - initial list of item
- * @param selectedItemIdList - global list of selected id
- * @param searchValue - search value on which filter item
- * @param visibleParent - visibility of the list parent item (default false)
- * @param pinnedParent - parent will be displayed as pinned items
- * @param disabledParent - parent will not be selectable
- * @param nbChildrenAsInfo - Show children number as info
- * @param translations - Translations
- * @returns {*}
- */
-function buildFilteredItemList(
-    itemList,
-    selectedItemIdList = [],
-    searchValue = '',
-    visibleParent = false,
-    pinnedParent = false,
-    disabledParent = false,
-    nbChildrenAsInfo = false,
-    translations,
-    filterFunc = filterValue,
-) {
-    return itemList.reduce(
-        ({ l: memoItemList, s: memoSelected, u: memoUnselected, v: memoVisible }, item) => {
-            const itemVisible = filterFunc(item, searchValue);
-            // Parent item
-            if (item.children) {
-                const {
-                    l: customizedChildren,
-                    s: selected,
-                    u: unselected,
-                    v: visible,
-                } = buildFilteredItemList(
-                    item.children,
-                    selectedItemIdList,
-                    searchValue,
-                    itemVisible,
-                    pinnedParent,
-                    disabledParent,
-                    nbChildrenAsInfo,
-                    translations,
-                    filterFunc,
-                );
-
-                if (nbChildrenAsInfo) {
-                    item.info = translations.n_children.replace('%s', item.children.length);
-                }
-
-                return {
-                    l: [
-                        ...memoItemList,
-                        {
-                            ...item,
-                            ...(disabledParent && {
-                                disabled: true,
-                                hideCheckbox: true, // don't display checkbox on disabled parent
-                            }),
-                            pinned: pinnedParent,
-                            children: customizedChildren,
-                            selected,
-                            indeterminate: !selected && !unselected,
-                            displayed: itemVisible || visible,
-                        },
-                    ],
-                    s: memoSelected && selected,
-                    u: memoUnselected && unselected,
-                    v: memoVisible || itemVisible || visible,
-                };
-            }
-            const itemSelected = selectedItemIdList.includes(item.id);
-            return {
-                l: [
-                    ...memoItemList,
-                    {
-                        displayed: itemVisible || visibleParent,
-                        ...item,
-                    },
-                ],
-                s: itemSelected && memoSelected,
-                u: !itemSelected && memoUnselected,
-                v: itemVisible || visibleParent || memoVisible,
-            };
-        },
-        { l: [], s: true, u: true, v: visibleParent },
-    );
-}
-
-export const styles = theme => ({
-    root: {
-        backgroundColor: theme.palette.background2,
-        maxWidth: 500,
-        width: '100%',
-        position: 'relative',
-    },
-    popper: {
-        // width: '100%',
-        zIndex: 1200,
-    },
-    paper: {
-        borderRadius: '0px 2px',
-        maxHeight: 480,
-        transition: 'none !important',
-    },
-    labelImg: {
-        height: 18,
-        width: 'auto',
-        margin: '0 4px',
-        verticalAlign: 'middle',
-    },
-    selectIconLabel: {
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        paddingRight: 16,
-        ...theme.typography.b1,
-        display: 'inline-flex',
-        width: '100%',
-    },
-    selectImgLabel: {
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        paddingRight: 16,
-        ...theme.typography.b1,
-        display: 'inline-flex',
-        width: '100%',
-    },
-});
-
-/**
- * HiNestedSelect hérite du composant HiSelect
- *
- * Sa fonction buildSelectProps construit la liste des options selon le comportement d'un object nested
- * (association parent/child via la prop children). Le composant accepte des props spécifique à cet utilisation,
- * comme disableParent ou pinnedParent. Uniquement les ids des enfants finaux (n'ayant pas d'enfants) sont considérés.
- * Comportement:
- * - si un parent est sélectionné, on ajoute tous ses enfants dans la liste des éléments sélectionné (mais pas le parent)
- * - si tous les enfants sont sélectionnés, le parent est affiché "selected".
- * - si une partie des enfants sont sélectionné, le parent est affiché "indeterminate".
- * - si aucun enfant n'est sélectionné, le parent est affiché "unselected".
- */
-class HiNestedSelect extends React.PureComponent {
-    static propTypes = {
-        /**
-         * Useful to extend the style applied to components.
-         */
-        classes: PropTypes.object,
-        /**
-         * Parent items are not selectable
-         */
-        disabledParent: PropTypes.bool,
-        /**
-         * Option permettant d'afficher les sélection sous forme de Chip.
-         */
-        displayAsChip: PropTypes.bool,
-        /*
-         * Fonction de filtrage custom
-         */
-        filterFunc: PropTypes.func,
-        /**
-         * Affiche l'élément 'All'
-         */
-        hasAll: PropTypes.bool,
-        /**
-         * id du select
-         */
-        id: PropTypes.string,
-        /**
-         * Ajoute un loader
-         */
-        loading: PropTypes.bool,
-        /**
-         * Autorise la sélection de plusieurs valeurs
-         */
-        multiple: PropTypes.bool,
-        /**
-         * Nom du champ de formulaire
-         */
-        name: PropTypes.string.isRequired,
-        /**
-         * Définit si l'on doit afficher le nombre d'enfants du parent dans son champ info
-         */
-        nbChildrenAsInfo: PropTypes.bool,
-        /**
-         * Fonction de callback qui renvoit la/les valeurs sélectionnées
-         *
-         * @param {object} event
-         * @param {string || array} value
-         */
-        onChange: PropTypes.func.isRequired,
-        /**
-         * Listes des options du select
-         */
-        options: PropTypes.array.isRequired,
-        /**
-         * Parent items are pinned, with sticky behavior (hide checkboxes but still selectable)
-         */
-        pinnedParent: PropTypes.bool,
-        /**
-         * Placeholder affiché lorsque le select est fermé
-         * Surcharge le placeholder par défaut
-         */
-        placeholder: PropTypes.string,
-        /**
-         * Affiche un input de recherche permettant de filtrer les options
-         */
-        searchable: PropTypes.bool,
-        /**
-         * Traductions (par défaut en anglais)
-         */
-        translations: PropTypes.object,
-        /**
-         * Value(s) du select
-         */
-        value: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.array]),
-    };
-
-    static defaultProps = {
-        disabledParent: false,
-        displayAsChip: false,
-        hasAll: false,
-        multiple: false,
-        pinnedParent: false,
-        searchable: false,
-        translations: {
-            all: 'All',
-            no_result_match: 'No result match',
-            search: 'Search',
-            n_items_selected: '%s items selected',
-            one_item_selected: '%s item selected',
-            n_children: '%s',
-            one_child: '%s item',
-        },
-        filterFunc: filterValue,
-    };
-
-    constructor(props) {
-        super(props);
-
-        this.handleSelect = this.handleSelect.bind(this);
-    }
-
-    /**
-     * Call onChange with the updated value
-     *
-     * - handle single value
-     * - handle multiple value
-     * - handle '_all' id
-     *
-     * @param event
-     * @param item
-     */
-    handleSelect = (event, item) => {
-        const { hasAll, multiple, onChange, options, value } = this.props;
-
-        if (!multiple) {
-            // single value
-            onChange(event, item.id, item);
-        } else if (hasAll && item.id === '_all') {
-            // ALL
-            const selectableItemIdList = getRecursiveFinalItemIdList(options);
-            if (value.length === selectableItemIdList.length) {
-                // unselect _all options
-                onChange(event, [], item);
-            } else {
-                // select _all options
-                onChange(event, selectableItemIdList, item);
-            }
-        } else if (item.children) {
-            // PARENT
-            const parentSelectableItemIdList = getRecursiveFinalItemIdList(item.children);
-            // deselect parent if every selectable child id is includes in value.
-            if (parentSelectableItemIdList.every(pid => value.includes(pid))) {
-                onChange(
-                    event,
-                    value.filter(vid => !parentSelectableItemIdList.includes(vid)),
-                    item,
-                );
-            } else {
-                // select parent > add each selectable child without duplicates.
-                onChange(
-                    event,
-                    [
-                        ...value.filter(vid => !parentSelectableItemIdList.includes(vid)),
-                        ...parentSelectableItemIdList,
-                    ],
-                    item,
-                );
-            }
-        } else if (value.includes(item.id)) {
-            // unselect item
-            onChange(event, value.filter(id => id !== item.id), item);
-        } else {
-            onChange(event, [...value, item.id], item);
-        }
-    };
-
-    /**
-     * Build itemList & inputValue from select props
-     * @param options
-     * @param value
-     * @param search
-     * @param loading
-     * @returns {{itemList: *[], inputValue: *}}
-     */
-    buildSelectProps = (options, value = [], search = '', loading = false) => {
-        const {
-            classes,
-            disabledParent,
-            hasAll,
-            iconAll,
-            multiple,
-            nbChildrenAsInfo,
-            pinnedParent,
-            translations,
-            filterFunc,
-        } = this.props;
-
-        // build item list
-        const {
-            l: filteredItemList,
-            s: allSelected,
-            u: allUnselected,
-            v: visible,
-        } = buildFilteredItemList(
-            options,
-            value,
-            search,
-            false,
-            pinnedParent,
-            disabledParent || !multiple,
-            nbChildrenAsInfo,
-            translations,
-            filterFunc,
-        );
-        const itemList = !visible
-            ? [
-                  ...(loading
-                      ? [
-                            {
-                                id: '_loading',
-                                type: 'loader',
-                                disabled: true,
-                                centered: true,
-                                hideCheckbox: true,
-                                label: 'loading',
-                            },
-                        ]
-                      : [
-                            {
-                                id: '_no_result',
-                                type: 'text',
-                                disabled: true,
-                                centered: true,
-                                hideCheckbox: true,
-                                label: translations.no_result_match,
-                            },
-                        ]),
-              ]
-            : [
-                  ...(loading
-                      ? [
-                            {
-                                id: '_loading',
-                                type: 'loader',
-                                disabled: true,
-                                centered: true,
-                                hideCheckbox: true,
-                                label: 'loading',
-                            },
-                        ]
-                      : []),
-                  ...(hasAll
-                      ? [
-                            {
-                                id: '_all',
-                                iconAll,
-                                label: translations.all,
-                                selected: allSelected,
-                                indeterminate: !allSelected && !allUnselected,
-                                displayed: search === '',
-                            },
-                        ]
-                      : []),
-                  ...filteredItemList,
-              ];
-
-        // build input value
-        let inputValue = '';
-        if (allSelected) {
-            inputValue = translations.all;
-        } else if (value.length > 1) {
-            inputValue = translations.n_items_selected.replace('%s', value.length);
-        } else if (value.length === 1) {
-            const selectedItem = findFinalItemRecursively(options, value[0]);
-            if (selectedItem === false) {
-                inputValue = translations.one_item_selected;
-            } else if (selectedItem.type === 'icon') {
-                inputValue = (
-                    <span className={classes.selectIconLabel}>
-                        <HiIcon className={classes.labelIcon} icon={selectedItem.icon} />
-                        {selectedItem.label}
-                    </span>
-                );
-            } else if (selectedItem.type === 'image') {
-                inputValue = (
-                    <span className={classes.selectImgLabel}>
-                        <img
-                            className={classes.labelImg}
-                            src={selectedItem.img}
-                            alt={selectedItem.label}
-                        />
-                        {selectedItem.label}
-                    </span>
-                );
-            } else {
-                inputValue = selectedItem.label;
-            }
-        }
-
-        return {
-            itemList,
-            inputValue,
-        };
-    };
-
-    render() {
-        const {
-            hasAll,
-            hiSelectableListProps,
-            multiple,
-            options,
-            searchable,
-            translations,
-            value,
-            ...other
-        } = this.props;
-
-        if (multiple) {
-            if (!Array.isArray(value)) {
-                throw new Error(
-                    'HiPay Material-UI: the `value` property must be an array ' +
-                        'when using the `HiSelect` component with `multiple`.',
-                );
-            }
-        }
-
-        return (
-            <HiSelect
-                buildSelectProps={this.buildSelectProps}
-                hasAll={hasAll}
-                hiSelectableListProps={{
-                    onSelect: this.handleSelect,
-                    ...hiSelectableListProps,
-                }}
-                multiple={multiple}
-                options={options}
-                searchable={searchable}
-                translations={translations}
-                value={value}
-                {...other}
-            />
-        );
-    }
-}
-
-export default withStyles(styles, { hiComponent: true, name: 'HmuiHiNestedSelect' })(HiNestedSelect);