@hipay/hipay-material-ui 3.12.1 → 3.12.2

package/src/HiSelectableList/HiSelectableList.js

@@ -1,393 +0,0 @@
-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

@@ -1,121 +0,0 @@
-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

@@ -1,173 +0,0 @@
-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);
-    });
-});