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

package/src/HiSelectableList/HiSelectableListItem.js

@@ -1,525 +0,0 @@
-import React, { useRef, useCallback } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { useEvent, useHoverDirty } from "react-use";
-import { makeStyles } from '@material-ui/core/styles';
-import ListItem from '@material-ui/core/ListItem';
-import ListSubheader from '@material-ui/core/ListSubheader';
-import HiIcon from '../HiIcon';
-import HiCheckbox from '../HiCheckbox';
-import HiColoredLabel from '../HiColoredLabel';
-import HiLoader from '../HiLoader';
-import { escapeHTML } from '../utils/helpers';
-
-export const useItemLabelStyles = makeStyles(theme => ({
-    label: {
-        maxWidth: '100%',
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        display: 'inline-block',
-        margin: '1px 0',
-    },
-}));
-
-function ItemLabel (props) {
-    const { color, label, labelHighlight, selected } = props;
-
-    const classes = useItemLabelStyles(props);
-
-    if (labelHighlight) {
-        const spanHighlight = (
-            <span
-                // eslint-disable-next-line react/no-danger
-                dangerouslySetInnerHTML={{
-                    __html: escapeHTML(labelHighlight),
-                }}
-            />
-        );
-
-        if (color && selected) {
-            return (
-                <HiColoredLabel
-                    color={color}
-                    label={spanHighlight}
-                />
-            );
-        }
-        return <span className={classes.label}>{spanHighlight}</span>;
-    }
-    if (color && selected) {
-        return <HiColoredLabel className={classes.coloredLabel} color={color} label={label} />;
-    }
-    return <div className={classes.label} title={label}>{label}</div>;
-
-}
-
-
-export const useStyles = makeStyles(theme => ({
-    root: {
-        paddingLeft: theme.spacing(1),
-    },
-    listItem: {
-        backgroundColor: theme.palette.background3,
-        color: theme.palette.neutral.dark,
-        padding: '5px 12px 5px 0px',
-        fontWeight: theme.typography.fontWeightRegular,
-        maxHeight: 56,
-        display: 'inline-flex',
-        alignItems: "center",
-        "&:not($disabled):not($pinned)": {
-            cursor: 'pointer',
-        },
-        '&$listItemInlineWithInfoWithoutSecondary': {
-            justifyContent: 'space-between',
-        },
-        '&$listItemWithoutSecondaryInline': {
-            display: 'block',
-        },
-        '&$inline': {
-            minHeight: 40,
-            '& $secondaryLabel': {
-                display: 'inline-block',
-            },
-        },
-        '&:focus': {
-            '&:not($disabled):not($pinned)': {
-                backgroundColor: theme.palette.action.hover,
-            },
-            outline: 'none',
-        },
-    },
-    listItemWithoutSecondaryInline: {},
-    listItemInlineWithInfoWithoutSecondary: {},
-    listItemHover: {
-        '&:hover:not($disabled):not($pinned)': {
-            backgroundColor: theme.palette.action.hover,
-            fontWeight: theme.typography.fontWeightMedium,
-        },
-    },
-    centered: {
-        textAlign: 'center',
-        width: '100%',
-    },
-    disabled: {
-        fontWeight: theme.typography.fontWeightLight,
-        cursor: 'default',
-        opacity: 'inherit',
-    },
-    selected: {
-        backgroundColor: theme.palette.action.selected,
-    },
-    pinned: {
-        zIndex:1,
-        display: 'inherit',
-        backgroundColor: theme.palette.background3,
-    },
-    thin: {
-        fontWeight: theme.typography.fontWeightLight,
-    },
-    loader: {
-        textAlign: 'center',
-        width: 1,
-        height: 22,
-        padding: theme.spacing(2, 0),
-        margin: 'auto',
-    },
-    listItemContent: {
-        ...theme.typography.b1,
-        fontWeight: 'inherit',
-        width: '100%',
-        minWidth: '50%',
-        padding: '5px 0',
-        '&$listItemContentSelected': {
-            marginBottom: 1,
-            marginLeft: theme.spacing(-1),
-        },
-        '& strong': {
-            fontWeight: theme.typography.fontWeightMedium,
-        },
-        display: 'contents',
-    },
-    listItemContentSelected: {},
-    highlight: {
-        fontWeight: theme.typography.fontWeightMedium,
-        color: theme.palette.neutral.main,
-        textTransform: 'uppercase',
-    },
-    primaryHighlight:{
-        fontWeight: theme.typography.fontWeightMedium,
-        color: theme.palette.primary.main,
-        textTransform: 'uppercase',
-    },
-    secondaryLabel: {
-        ...theme.typography.b3,
-        color: theme.palette.neutral.main,
-        fontWeight: theme.typography.fontWeightLight,
-        fontSize: 11,
-        marginLeft: theme.spacing(1),
-    },
-    inline: {},
-    info: {
-        ...theme.typography.b3,
-        color: theme.palette.neutral.main,
-        fontWeight: theme.typography.fontWeightLight,
-        fontSize: 12,
-        textOverflow: 'ellipsis',
-        textAlign: 'right',
-        alignSelf: 'center',
-    },
-    img: {
-        width: 24,
-        height: 'auto',
-        margin: '1px 4px 3px 4px',
-        verticalAlign: 'middle',
-    },
-    icon: props => {
-        return {
-            marginLeft: theme.spacing(1),
-            marginRight: theme.spacing(1),
-            verticalAlign: 'middle',
-            color: (props.selected && props.color) ? props.color : 'inherit',
-            fontSize: 20,
-        }
-    },
-    labelContent: {
-        display: '-webkit-flex',
-        paddingLeft: theme.spacing(1),
-        alignItems: 'center',
-        maxWidth: '85%',
-        '&$labelWithoutSecondaryInline': {
-            maxWidth: '100%',
-        },
-    },
-    labelWithoutSecondaryInline: {},
-    infosContent: {
-        display: 'flex',
-        alignItems: 'center',
-        paddingLeft: theme.spacing(1),
-        width: '100%',
-        justifyContent: 'space-between',
-        '&$infosInlineWithoutSecondary': {
-            width: 'auto',
-        },
-    },
-    infosInlineWithoutSecondary: {},
-    infosWithSecondaryInline: {},
-    infosWithoutSecondaryInline: {},
-}));
-
-/**
- * Construit un élément de liste sélectionnable (avec checkbox)
- * - la sélection/déséclection d'un item est géré avec KeyDown
- */
-function HiSelectableListItem (props) {
-
-    const {
-        centered,
-        selected,
-        disabled,
-        fallbackImage,
-        hideCheckbox,
-        onSelect,
-        indeterminate,
-        indeterminateIcon,
-        icon,
-        id,
-        img,
-        info,
-        hoverIcon,
-        checkedIcon,
-        level,
-        label,
-        labelHighlight,
-        paddingLeft,
-        pinned,
-        secondaryInline,
-        secondaryLabel,
-        thin,
-        type,
-        color,
-        item,
-    } = props;
-
-    const classes = useStyles(props);
-
-    const ref = useRef(null);
-    const isHovering = !!hoverIcon ? useHoverDirty(ref) : false;
-
-    const onKeyDown = useCallback(({ code }) => {
-        if (code === 'Space' || code === 'Enter') {
-            event.preventDefault();
-            event.stopPropagation();
-            if (item) onSelect(null, item);
-        }
-    }, [item]);
-
-    useEvent('keydown', onKeyDown, ref.current);
-
-    // Return simple loader list item
-    if (type === 'loader') {
-        return (
-            <ListItem>
-                <HiLoader
-                    className={classes.loader}
-                    loading
-                    size={8}
-                />
-            </ListItem>
-        );
-    }
-
-    let displayedIcon;
-    if (!disabled && isHovering && hoverIcon) {
-        displayedIcon = hoverIcon;
-    } else if (icon) {
-        displayedIcon = icon;
-    }
-
-    const ListItemComponentName = pinned ? ListSubheader : ListItem;
-
-    let itemIcon;
-    if (displayedIcon) {
-        const iconProps = {
-            className: classes.icon,
-            color: (selected && color) ? color : 'inherit',
-        };
-        if (typeof displayedIcon === 'string') {
-            itemIcon = <HiIcon icon={displayedIcon} {...iconProps} />;
-        } else if (typeof icon === 'object') {
-            itemIcon = {...displayedIcon};
-            itemIcon.props = {...itemIcon.props, ...iconProps};
-        }
-    }
-
-    return (
-        <ListItemComponentName
-            ref={ref}
-            id={id}
-            tabIndex={disabled || pinned ? '-1' : 0}
-            key={`li-${id}`}
-            classes={{ root: classes.root }}
-            className={classNames(
-                classes.listItem,
-                classes.listItemHover,
-                {
-                    [classes.disabled]: disabled,
-                    [classes.selected]: selected,
-                    [classes.thin]: thin,
-                    [classes.pinned]: pinned,
-                    [classes.inline]: secondaryInline,
-                    [classes.listItemWithoutSecondaryInline]: !secondaryInline,
-                    [classes.listItemInlineWithInfoWithoutSecondary]: secondaryInline && info && !secondaryLabel,
-                },
-            )}
-            disabled={disabled}
-            onClick={onSelect}
-            style={{ paddingLeft: `${paddingLeft + level * 32}px` }}
-        >
-            <div
-                className={classNames(
-                    classes.labelContent,
-                    {
-                        [classes.labelWithoutSecondaryInline]: (!secondaryInline || (!secondaryLabel && !info))
-                    },
-                )}
-            >
-                {(!hideCheckbox && !pinned) && (
-                    <HiCheckbox
-                        tabIndex={0}
-                        classes={{
-                            root: !secondaryInline
-                                ? classes.checkboxWithSecondaryInline
-                                : classes.checkbox,
-                        }}
-                        checked={selected}
-                        checkedIcon={checkedIcon}
-                        // color={disabled ? 'inherit' : 'primary'}
-                        disabled={disabled}
-                        icon={itemIcon}
-                        indeterminate={indeterminate}
-                        indeterminateIcon={indeterminateIcon}
-                    />
-                )}
-                {(type === 'image' && img) && (
-                    <img
-                        src={img}
-                        alt={''}
-                        onError={(e) => {
-                            if (fallbackImage) {
-                                e.target.src = `${fallbackImage}`;
-                            } else {
-                                e.target.style.display = 'none';
-                            }
-                        }}
-                        className={classes.img}
-                    />
-                )}
-                <div
-                    className={classNames(
-                        classes.listItemContent,
-                        {
-                            [classes.centered]: centered,
-                            [classes.highlight]: type === 'highlight',
-                            [classes.primaryHighlight]: type === 'primary-highlight',
-                            [classes.listItemContentSelected]: selected && color,
-                        },
-                    )}
-                    data-id={id}
-                >
-                    {(itemIcon && hideCheckbox) && (itemIcon)}
-                    <ItemLabel
-                        color={color}
-                        label={label}
-                        labelHighlight={labelHighlight}
-                        selected={selected}
-                    />
-                </div>
-            </div>
-            <div className={classNames(classes.infosContent, {
-                [classes.infosWithoutSecondaryInline]: !secondaryInline,
-                [classes.infosWithSecondaryInline]: !secondaryInline,
-                [classes.infosInlineWithoutSecondary]: secondaryInline && !secondaryLabel,
-            })}>
-                {!!secondaryLabel && (
-                    <div
-                        className={classNames(classes.secondaryLabel, {
-                            [classes.inline]: secondaryInline,
-                        })}
-                    >
-                        {secondaryLabel}
-                    </div>
-                )}
-                {!!info && <span className={classNames(classes.info)}>{info}</span>}
-            </div>
-        </ListItemComponentName>
-    );
-}
-
-HiSelectableListItem.propTypes = {
-    /**
-     * Centre le label de l'élément
-     */
-    centered: PropTypes.bool,
-    /**
-     * Icon affiché lorsque l'item est sélectionné
-     */
-    checkedIcon: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-    /**
-     * Useful to extend the style applied to components.
-     */
-    classes: PropTypes.object,
-    /**
-     * Display selected item as colored label
-     */
-    color: PropTypes.string,
-    /**
-     * Applique le style et désactive le click
-     */
-    disabled: PropTypes.bool,
-    /**
-     * Chemin vers l'image à afficher par défaut si une image n'est pas trouvée
-     */
-    fallbackImage: PropTypes.string,
-    /**
-     * 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.oneOfType([PropTypes.string, PropTypes.object]),
-    /**
-     * Icon affiché lorsque l'item n'est pas sélectionné
-     */
-    icon: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-    /**
-     * Icon affiché lorsque l'item n'est pas sélectionné
-     */
-    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    /**
-     * Path de l'image de l'élément de type image
-     */
-    img: PropTypes.string,
-    /**
-     * Items sélectionné partiellement
-     */
-    indeterminate: PropTypes.bool,
-    /**
-     * icon à afficher quand le composant a la prop indeterminate.
-     */
-    indeterminateIcon: PropTypes.string,
-    /**
-     * Text d'information affiché à droite de l'élément
-     */
-    info: PropTypes.string,
-    /**
-     * Label
-     */
-    label: PropTypes.string,
-    /**
-     * Label highlight (autorise le highlight du label via la balise <strong>)
-     */
-    labelHighlight: PropTypes.string,
-    /**
-     * Niveau de l'item, ajoute un padding à gauche de 16px
-     */
-    level: PropTypes.number,
-    /**
-     * Fonction de callback à la sélection de l'élément
-     */
-    onKeyDown: PropTypes.func,
-    /**
-     * Fonction de callback à la sélection de l'élément
-     */
-    onKeyUp: PropTypes.func,
-    /**
-     * Fonction de callback à la sélection de l'élément
-     */
-    onSelect: PropTypes.func,
-    /**
-     * Padding par défaut des éléments
-     */
-    paddingLeft: PropTypes.number,
-    /**
-     * Item display as pinned item, with sticky behavior
-     */
-    pinned: PropTypes.bool,
-    /**
-     * Définit si le second label s'affiche sur la même ligne ou en dessous
-     */
-    secondaryInline: PropTypes.bool,
-    /**
-     * Second label affiché à droite du label
-     */
-    secondaryLabel: PropTypes.string,
-    /**
-     * État de l'élément
-     */
-    selected: PropTypes.bool,
-    /**
-     * Display label as thin text (used to display parent items)
-     */
-    thin: PropTypes.bool,
-    /**
-     * Type de l'élément
-     */
-    type: PropTypes.string,
-};
-
-HiSelectableListItem.defaultProps = {
-    centered: false,
-    disabled: false,
-    hideCheckbox: false,
-    checkedIcon: 'check_box',
-    indeterminateIcon: 'indeterminate_check_box',
-    indeterminate: false,
-    level: 0,
-    paddingLeft: 4,
-    pinned: false,
-    secondaryInline: true,
-    selected: false,
-    thin: false,
-};
-
-export default HiSelectableListItem;

package/src/HiSelectableList/HiSelectableListItem.test.js

@@ -1,104 +0,0 @@
-import React from 'react';
-import { assert } from 'chai';
-import ListItem from '@material-ui/core/ListItem';
-import HiCheckbox from '../HiCheckbox';
-import { spy } from 'sinon';
-import { createShallow, createMount, getClasses } from '../test-utils';
-import HiSelectableListItem from './HiSelectableListItem';
-
-describe('<HiSelectableListItem />', () => {
-    let shallow;
-    let mount;
-    let classes;
-
-    before(() => {
-        shallow = createShallow({ dive: true });
-        classes = getClasses(<HiSelectableListItem />);
-    });
-
-    beforeEach(() => {
-        mount = createMount();
-    });
-
-    afterEach(() => {
-        mount.cleanUp();
-    });
-
-    it('should render a unselected checkbox', () => {
-        const wrapper = mount(
-            <HiSelectableListItem
-                selected={false}
-                checkbox
-                onSelect={() => {
-                    return null;
-                }}
-            />,
-        );
-        assert.strictEqual(wrapper.find(HiCheckbox).props().checked, false);
-    });
-
-    it('should render an item without the class inline', () => {
-        const wrapper = mount(<HiSelectableListItem secondaryInline={false} />);
-        assert.strictEqual(wrapper.find(ListItem).hasClass(classes.inline), false);
-    });
-
-    it('should render a selected checkbox', () => {
-        const wrapper = mount(
-            <HiSelectableListItem
-                selected
-                checkbox
-                onSelect={() => {
-                    return null;
-                }}
-            />,
-        );
-        assert.strictEqual(wrapper.find(HiCheckbox).props().checked, true);
-    });
-
-    it('should update if props selected change', () => {
-        const wrapper = mount(
-            <HiSelectableListItem
-                selected={false}
-                checkbox
-                onSelect={() => {
-                    return null;
-                }}
-            />,
-        );
-        assert.strictEqual(wrapper.find(HiCheckbox).props().checked, false);
-        wrapper.setProps({ selected: true });
-        wrapper.update();
-        assert.strictEqual(wrapper.find(HiCheckbox).props().checked, true);
-    });
-
-    it('should call onSelect on click event', () => {
-        const handleOnSelect = spy();
-
-        const wrapper = mount(<HiSelectableListItem selected={false} onSelect={handleOnSelect} />);
-        const listItem = wrapper.find(ListItem);
-        listItem.simulate('click');
-        assert.strictEqual(handleOnSelect.calledOnce, true);
-    });
-
-    it('should update state if element is hovered', () => {
-        const wrapper = shallow(
-            <HiSelectableListItem
-                selected={false}
-                onSelect={() => {
-                    return null;
-                }}
-            />,
-        );
-        const listItem = wrapper.dive().find(ListItem);
-        listItem.simulate('mouseenter');
-        assert.strictEqual(wrapper.state().hover, true);
-        listItem.simulate('mouseleave');
-        assert.strictEqual(wrapper.state().hover, false);
-    });
-
-    it('should handle hideCheckbox & disabled props', () => {
-        const wrapper = mount(<HiSelectableListItem selected hideCheckbox disabled />);
-        assert.strictEqual(wrapper.find(HiCheckbox).length, 0);
-        assert.strictEqual(wrapper.find(ListItem).props().disabled, true);
-    });
-});

package/src/HiSelectableList/index.js

@@ -1,3 +0,0 @@
-export { default } from './HiSelectableList';
-export { default as HiSelectableListItem } from './HiSelectableListItem';
-export { default as HiSelectableListHierarchic } from './HiSelectableListHierarchic';

package/src/HiStepper/DefaultIndicator.js

@@ -1,25 +0,0 @@
-import React from "react";
-import SvgIcon from "@material-ui/core/SvgIcon";
-import { makeStyles } from "@material-ui/core/styles";
-
-/**
- * Custom style for SvgIcon
- */
-const useStyles = makeStyles(theme => ({
-    root: {
-        width: 20,
-        height: 20
-    }
-}));
-
-const DefaultIndicator = () => {
-    const classes = useStyles();
-
-    return (
-        <SvgIcon className={classes.root} viewBox="0 0 20 20">
-            <circle  cx="10" cy="10" r="2" fill="white"/>
-        </SvgIcon>
-    );
-};
-
-export default DefaultIndicator;