@hipay/hipay-material-ui 3.4.2 → 3.5.0

package/src/HiSelect/HiNestedSelect.js

@@ -0,0 +1,526 @@
+// @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);