@hipay/hipay-material-ui 3.11.2 → 3.12.0

package/src/HiSelectableList/HiSelectableList.js

@@ -0,0 +1,393 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Collapse from '@mui/material/Collapse';
+import List from '@mui/material/List';
+import withStyles from '@mui/styles/withStyles';
+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,
+    },
+    parentRoot: {
+        '&:focus': {
+            backgroundColor: theme.palette.action.hover,
+            fontWeight: theme.typography.fontWeightMedium,
+        },
+    },
+});
+
+const findSelectedItemParent = (arr, id) => {
+    if (id) {
+        let res = arr.find((p) => p.children?.map((o) => o.id).includes(id));
+        if (res) return res.id;
+    }
+    return null;
+};
+
+/**
+ * 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,
+        /**
+         * Disable padding on child items
+         */
+        noPadding: 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'],
+        collapseParent: false,
+    };
+
+    constructor(props) {
+        super(props);
+
+        let openedParent;
+        if (props.collapseParent) {
+            if (props.selectedItemIdList[0]) {
+                openedParent = findSelectedItemParent(props.itemList, props.selectedItemIdList[0]);
+            } else {
+                openedParent = props.itemList[0].id;
+            }
+        }
+
+        this.state = {
+            openedParent: openedParent,
+        };
+    }
+
+    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) => {
+        if (this.props.collapseParent && item.children) {
+            this.setState((prevState) => ({
+                openedParent: prevState.openedParent === item.id ? null : item.id,
+            }));
+        } else {
+            this.props.onSelect(event, item);
+        }
+    };
+
+    handleKeyDown = (event) => {
+        if (this.props.onKeyDown) {
+            this.props.onKeyDown(event);
+        } else {
+            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, group = null) => {
+        const {
+            checkedIcon,
+            disabled,
+            disabledItemIdList,
+            hideCheckbox,
+            hoverIcon,
+            icon,
+            lazy,
+            selectedItemIdList,
+            sort,
+            onKeyDown,
+            onKeyUp,
+            suggestionFocusIndex,
+            classes,
+            noPadding,
+            ...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 handleKeyDown = () => {
+            if (onKeyDown) {
+                onKeyDown();
+            }
+        };
+
+        const itemComponent = (
+            <React.Fragment key={item.id}>
+                <HiSelectableListItem
+                    {...others}
+                    checkedIcon={checkedIcon}
+                    disabled={disabled || disabledItemIdList.includes(item.id)}
+                    hideCheckbox={hideCheckbox}
+                    hoverIcon={hoverIcon}
+                    icon={icon}
+                    level={noPadding ? 0 : level}
+                    onSelect={item.selectable !== false ? this.handleSelect(item) : undefined}
+                    onKeyDown={item.selectable !== false ? handleKeyDown : undefined}
+                    onKeyUp={onKeyUp}
+                    selected={selectedItemIdList.includes(item.id)}
+                    // item props override upper props (disabled, hideCheckbox, icon, level...)
+                    item={item}
+                    classes={{
+                        root: classes.parentRoot,
+                        listItem: classNames({
+                            [classes.suggestionFocus]: index === suggestionFocusIndex,
+                        }),
+                    }}
+                    collapseHeader={
+                        this.props.collapseParent && item.children && item.children.length > 0
+                    }
+                    opened={this.state.openedParent === item.id}
+                    group={group}
+                    {...item}
+                />
+                {item.children &&
+                    item.children.length > 0 &&
+                    (this.props.collapseParent && level === 0 ? (
+                        <Collapse
+                            id={`group-${item.id}`}
+                            in={this.state.openedParent === item.id}
+                            timeout="auto"
+                        >
+                            {item.children
+                                .filter((subItem) => !(subItem.displayed === false))
+                                .map((subItem) =>
+                                    this.buildRecursiveListItem(subItem, index, level + 1, item.id),
+                                )}
+                        </Collapse>
+                    ) : (
+                        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}
+                ref={(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,
+);

package/src/HiSelectableList/HiSelectableList.md

@@ -0,0 +1,121 @@
+HiSelectableList example:
+
+```js
+import React, { useCallback, useState } from 'react';
+import Box from '@material-ui/core/Box';
+import FormGroup from '@material-ui/core/FormGroup';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import HiSwitch from '../HiSwitch';
+import Tag from 'mdi-material-ui/Tag';
+
+import HiSelectableList from './HiSelectableList';
+import HiSelectableListItem from './HiSelectableListItem';
+
+const options = [
+    { id: "a", label: "Option A" },
+    { id: "b", label: "Option B" },
+    { id: "c", label: "Option C", icon: <Tag/> },
+];
+
+const DemoList = () => {
+    
+    const [value, setValue] = useState();
+    
+    return (
+        <Box display="block" m={1}>
+            <HiSelectableList
+                itemList={options}
+                selectedItemIdList={[value]}
+                onSelect={(e,v) => setValue(v)}
+            />
+            {/*<FormGroup>
+                 <FormControlLabel
+                     control={
+                         <HiSwitch
+                             checked={multiple}
+                             onChange={(event, checked) =>
+                                 this.setState(prevState => ({
+                                     multiple: checked,
+                                     hasAll: checked ? prevState.hasAll : false,
+                                     value: checked
+                                         ? [prevState.value]
+                                         : prevState.value[0],
+                                 }))
+                             }
+                             color="primary"
+                         />
+                     }
+                     label="multiple"
+                 />
+             </FormGroup>*/}
+        </Box>
+    );
+};
+<DemoList/>
+```
+
+HiSelectableList example:
+
+```js
+import React, { useCallback, useState } from 'react';
+import { useToggle } from "react-use";
+import Box from '@material-ui/core/Box';
+import FormGroup from '@material-ui/core/FormGroup';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import HiSwitch from '../HiSwitch';
+
+import HiSelectableList from './HiSelectableList';
+import HiSelectableListItem from './HiSelectableListItem';
+
+
+const DemoItem = () => {
+    
+    const [selected, toggleSelected] = useToggle(false);
+    const [hideCheckbox, toggleHideCheckbox] = useToggle(false);
+    const [hasImg, toggleImg] = useToggle(false);
+    const [hasIcon, toggleIcon] = useToggle(false);
+    const [hasColor, toggleColor] = useToggle(false);
+    const [hasInfo, toggleInfo] = useToggle(false);
+    const [hasCheckedIcon, toggleCheckedIcon] = useToggle(false);
+    
+    return (
+        <Box display="block" m={1}>
+            <HiSelectableListItem
+                label={"Sample label"}
+                onSelect={toggleSelected}
+                selected={selected}
+
+                type={"image"}
+                
+                img={hasImg ? "public/assets/countries/fr.svg" : undefined}
+                color={hasColor ? "secondary" : undefined}
+                info={hasInfo ? "secondary info label" : undefined}
+                icon={hasIcon ? "hi_transaction" : undefined}
+                checkedIcon={hasCheckedIcon ? "hi_transaction" : undefined}
+                hideCheckbox={hideCheckbox}
+            />
+            <FormGroup>
+                {[
+                    [hasImg, toggleImg, "Image"],
+                    [hasIcon, toggleIcon, "Custom icon (hi_transaction)"],
+                    [hasColor, toggleColor, "Color (secondary)"],
+                    [hasInfo, toggleInfo, "Info label"],
+                    [hasCheckedIcon, toggleCheckedIcon, "Custom checked icon (hi_transaction)"],
+                    [hideCheckbox, toggleHideCheckbox, "Hide checkbox"],
+                ].map(([value, callback, label]) => (
+                    <FormControlLabel
+                         control={
+                             <HiSwitch
+                                 checked={value}
+                                 onChange={callback}
+                             />
+                         }
+                         label={label}
+                     />
+                ))}
+            </FormGroup>
+        </Box>
+    );
+};
+<DemoItem/>
+```

package/src/HiSelectableList/HiSelectableList.test.js

@@ -0,0 +1,173 @@
+import React from 'react';
+import { assert } from 'chai';
+import { spy } from 'sinon';
+import List from '@mui/material/List';
+import LazyLoad from 'react-lazyload';
+import { createShallow, createMount, getClasses } from '../test-utils';
+import HiSelectableList from './HiSelectableList';
+import HiSelectableListItem from './HiSelectableListItem';
+
+describe('<HiSelectableList />', () => {
+    let shallow;
+    let classes;
+    let mount;
+
+    before(() => {
+        shallow = createShallow({ dive: true });
+        classes = getClasses(
+            <HiSelectableList
+                itemList={[]}
+                selectedIdList={[]}
+                onSelect={() => {
+                    return null;
+                }}
+                lazy={false}
+            />,
+        );
+    });
+
+    beforeEach(() => {
+        mount = createMount();
+    });
+
+    afterEach(() => {
+        mount.cleanUp();
+    });
+
+    it('should render a ul', () => {
+        const wrapper = mount(
+            <HiSelectableList
+                itemList={[]}
+                selectedIdList={[]}
+                onSelect={() => {
+                    return null;
+                }}
+                lazy={false}
+            />,
+        );
+        assert.strictEqual(wrapper.find('ul').length, 1);
+    });
+
+    it('should render as many li as items', () => {
+        const itemList = [
+            { id: 'zz', label: 'Zizou' },
+            { id: 'zze', label: 'Zizou encore' },
+            { id: 'ep', label: 'Emmanuel Petit' },
+        ];
+        const selectedIdList = ['zz'];
+        const wrapper = mount(
+            <HiSelectableList
+                itemList={itemList}
+                selectedIdList={selectedIdList}
+                onSelect={() => {
+                    return null;
+                }}
+                lazy={false}
+            />,
+        );
+        assert.strictEqual(wrapper.find(HiSelectableListItem).length, itemList.length);
+    });
+
+    it('should render with the root classes', () => {
+        const wrapper = shallow(
+            <HiSelectableList
+                itemList={[]}
+                selectedIdList={[]}
+                onSelect={() => {
+                    return null;
+                }}
+                lazy={false}
+            />,
+        );
+        assert.strictEqual(wrapper.find(List).hasClass(classes.root), true);
+    });
+
+    it('should call onSelect with selectedItem', () => {
+        const itemList = [
+            { id: 'zz', label: 'Zizou' },
+            { id: 'zze', label: 'Zizou encore' },
+            { id: 'ep', label: 'Emmanuel Petit' },
+        ];
+        const handleOnSelect = spy();
+        const wrapper = mount(
+            <HiSelectableList
+                itemList={itemList}
+                selectedIdList={[]}
+                onSelect={handleOnSelect}
+                lazy={false}
+            />,
+        );
+
+        const firstCheckbox = wrapper.find("input[type='checkbox']").first();
+        firstCheckbox.simulate('click');
+
+        assert.strictEqual(handleOnSelect.calledOnce, true);
+        assert.strictEqual(handleOnSelect.args[0][1], itemList[0]);
+    });
+
+    it('should sort items', () => {
+        const itemList = [
+            { id: 'zz', label: 'Zizou' },
+            { id: 'zze', label: 'Zizou encore' },
+            { id: 'ep', label: 'Emmanuel Petit' },
+        ];
+        const handleOnSelect = spy();
+        const wrapper = mount(
+            <HiSelectableList
+                hideCheckbox
+                itemList={itemList}
+                selectedIdList={[]}
+                onSelect = {handleOnSelect}
+                sort
+                lazy={false}
+        />);
+
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(0).text(), 'Emmanuel Petit');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(1).text(), 'Zizou');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(2).text(), 'Zizou encore');
+    });
+
+    it('should custom sort items', () => {
+        const itemList = [
+            { id: 'zz', label: 'Zizou' },
+            { id: 'zze', label: 'Zizou encore' },
+            { id: 'ep', label: 'Emmanuel Petit' },
+        ];
+        const handleOnSelect = spy();
+        const compareItemFunc = function(a, b) {
+            return a.label.length > b.label.length ? 1 : -1;
+        };
+        const wrapper = mount(
+            <HiSelectableList
+                hideCheckbox
+                itemList={itemList}
+                selectedIdList={[]}
+                onSelect={handleOnSelect}
+                sort
+                comparItemFunc={compareItemFunc}
+                lazy={false}
+        />);
+
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(0).text(), 'Zizou');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(1).text(), 'Zizou encore');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(2).text(), 'Emmanuel Petit');
+    });
+
+    it('should render with lazyload', () => {
+        const itemList = [
+            { id: 'zz', label: 'Zizou' },
+            { id: 'zze', label: 'Zizou encore' },
+            { id: 'ep', label: 'Emmanuel Petit' },
+        ];
+        const wrapper = shallow(
+            <HiSelectableList
+                itemList={itemList}
+                selectedIdList={[]}
+                onSelect={() => {
+                    return null;
+                }}
+            />,
+        );
+        assert.strictEqual(wrapper.find(LazyLoad).length, 3);
+    });
+});