@hipay/hipay-material-ui 3.11.1 → 3.12.0

package/src/HiSelect/HiSelectInput.js

@@ -0,0 +1,352 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+import ButtonBase from '@mui/material/ButtonBase';
+import Icon from '@mui/material/Icon';
+import HiIcon from '../HiIcon';
+import withStyles from '@mui/styles/withStyles';
+import keycode from 'keycode';
+import { isMobile } from 'react-device-detect';
+
+export const styles = (theme) => ({
+    root: {
+        width: '100%',
+        height: 40,
+        display: 'flex',
+        justifyContent: 'center',
+        padding: 8,
+        cursor: 'pointer',
+    },
+    rootMobile: {
+        backgroundColor: theme.palette.background2,
+    },
+    underline: {
+        '&:before': {
+            backgroundColor: theme.palette.input.bottomLine,
+            left: 0,
+            bottom: 0,
+            // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
+            content: '""',
+            height: 1,
+            position: 'absolute',
+            right: 0,
+            transition: theme.transitions.create('background-color', {
+                duration: theme.transitions.duration.shorter,
+                easing: theme.transitions.easing.ease,
+            }),
+            pointerEvents: 'none', // Transparent to the hover style.
+        },
+        '&:hover:not($disabled):before': {
+            backgroundColor: theme.palette.input.bottomLine,
+            height: 2,
+        },
+        '&$disabled:before': {
+            background: 'transparent',
+            backgroundImage: `linear-gradient(to right, ${theme.palette.input.bottomLine} 33%, transparent 0%)`,
+            backgroundPosition: 'left top',
+            backgroundRepeat: 'repeat-x',
+            backgroundSize: '5px 1px',
+        },
+    },
+    inkbar: {
+        '&:not($disabled)': {
+            '&:not($error):after': {
+                backgroundColor: theme.palette.primary.main,
+                left: 0,
+                bottom: 0,
+                // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
+                content: '""',
+                height: 1,
+                position: 'absolute',
+                right: 0,
+                transform: 'scaleX(0)',
+                transition: theme.transitions.create('transform', {
+                    duration: theme.transitions.duration.shorter,
+                    easing: theme.transitions.easing.easeOut,
+                }),
+                pointerEvents: 'none', // Transparent to the hover style.
+            },
+            '&:hover:after': {
+                transform: 'scaleX(1)',
+            },
+            '&$focused:after': {
+                transform: 'scaleX(1)',
+            },
+            '&$error': {
+                border: `1px solid ${theme.palette.negative.main}`,
+                borderRadius: 2,
+            },
+        },
+    },
+    disabled: {
+        color: theme.palette.text.disabled,
+        '&:before': {
+            display: 'none',
+        },
+    },
+    focused: {
+        backgroundColor: theme.palette.background3,
+    },
+    error: {},
+    label: {
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        ...theme.typography.b1,
+        display: 'inline-block',
+        width: '100%',
+    },
+    placeholder: {
+        color: theme.palette.grey[400],
+    },
+    icon: {
+        transition: theme.transitions.create(['opacity', 'transform'], {
+            duration: theme.transitions.duration.shorter,
+        }),
+    },
+    iconOpen: {
+        transform: 'rotate(90deg)',
+        color: theme.palette.primary.main,
+    },
+    iconClose: {
+        transform: 'rotate(0deg)',
+    },
+});
+
+/**
+ * @ignore - internal component.
+ */
+class HiSelectInput extends React.PureComponent {
+    static propTypes = {
+        /**
+         * Useful to extend the style applied to components.
+         */
+        classes: PropTypes.object,
+        /**
+         * If `true`, the select will be disabled.
+         */
+        disabled: PropTypes.bool,
+        /**
+         * Applique le style error
+         */
+        error: PropTypes.bool,
+        /**
+         * Applique le style focused
+         */
+        focused: PropTypes.bool,
+        /**
+         * id du select
+         */
+        id: PropTypes.string,
+        /**
+         * Affiche sous forme de div à la place d'un bouton.
+         * Si des éléments cliquables sont à l'intérieur.
+         */
+        noButton: PropTypes.bool,
+        /**
+         * Fonction de callback au blur du bouton
+         */
+        onBlur: PropTypes.func,
+        /**
+         * Fonction de callback au click sur l'input/bouton
+         */
+        onClick: PropTypes.func,
+        /**
+         * Fonction de callback au focus l'input/bouton
+         */
+        onFocus: PropTypes.func,
+        /**
+         * Fonction de callback à la pression de touche
+         */
+        onKeyDown: PropTypes.func,
+        /**
+         * Fonction de callback au survol de l'input
+         */
+        onMouseEnter: PropTypes.func,
+        /**
+         * Fonction de callback à la sortie du survol de l'input
+         */
+        onMouseLeave: PropTypes.func,
+        /**
+         * Fonction de callback appelée lorsqu'on vide le champs
+         */
+        onReset: PropTypes.func,
+        /**
+         * Fonction de callback à la pression de la touche "Entrée"
+         */
+        onSubmit: PropTypes.func,
+        /**
+         * Applique le style open et effectue une rotation de l'icône
+         */
+        open: PropTypes.bool,
+        /**
+         * Placeholder
+         */
+        placeholder: PropTypes.string,
+        /**
+         * Use that property to pass a ref callback to the native component.
+         */
+        refElement: PropTypes.func,
+        /**
+         * Valeur à afficher (déjà formattée)
+         */
+        value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.node]),
+    };
+
+    static defaultProps = {
+        disabled: false,
+        open: false,
+        focused: false,
+        noButton: false,
+        error: false,
+    };
+
+    handleKeyDown = (event) => {
+        const key = keycode(event);
+        if (this.props.onKeyDown) {
+            this.props.onKeyDown(event);
+        } else if (key === 'enter' && this.props.onSubmit) {
+            event.preventDefault();
+            this.props.onSubmit(event);
+        }
+    };
+
+    handleKeyDownReset = (event) => {
+        const key = keycode(event);
+        if (key === 'enter' || key === 'space') {
+            this.handleReset(event);
+            event.stopPropagation();
+            event.preventDefault();
+        }
+    };
+
+    handleClick = (event) => {
+        // Do not open select if press on resetIcon
+        if ((!this.resetIcon || !this.resetIcon.contains(event.target)) && this.props.onClick) {
+            // Do not open select if press enter on button => submit form
+            if (event.type !== 'keydown' || keycode(event) !== 'enter') {
+                this.props.onClick(event);
+            }
+        }
+    };
+
+    handleReset = (event) => {
+        this.props.onReset(event);
+        if (this.input) {
+            this.input.focus();
+        }
+    };
+
+    handleBlur = (event) => {
+        if ((!this.input || !this.input.contains(event.relatedTarget)) && this.props.onBlur) {
+            this.props.onBlur(event);
+        } /* else if (this.input && (!this.resetIcon || !this.resetIcon.contains(event.relatedTarget))) {
+            this.input.focus();
+        }*/
+    };
+
+    ref = (el) => {
+        this.input = el;
+        if (this.props.refElement) {
+            this.props.refElement(el);
+        }
+    };
+
+    render() {
+        const {
+            classes,
+            noButton,
+            disabled,
+            onClick,
+            onReset,
+            value,
+            open,
+            focused,
+            error,
+            id,
+            placeholder,
+        } = this.props;
+
+        // On utilise classNames pour variabiliser les styles et merge les classes appliquées
+        const rootClass = classNames(classes.root, classes.inkbar, classes.underline, {
+            [classes.disabled]: disabled,
+            [classes.focused]: focused,
+            [classes.error]: error && !focused,
+            [classes.rootMobile]: isMobile,
+        });
+
+        const iconClass = classNames(classes.icon, {
+            [classes.iconOpen]: open,
+            [classes.iconClose]: !open,
+        });
+
+        return noButton ? (
+            <div
+                id={id}
+                className={rootClass}
+                onClick={onClick}
+                onMouseEnter={this.props.onMouseEnter}
+                onMouseLeave={this.props.onMouseLeave}
+                onKeyDown={this.handleKeyDown}
+                onFocus={this.props.onFocus}
+                onBlur={this.props.onBlur}
+                role="button"
+                tabIndex="0"
+                ref={this.ref}
+            >
+                <span
+                    className={classNames(classes.label, {
+                        [classes.placeholder]: value === undefined,
+                    })}
+                >
+                    {value || placeholder}
+                </span>
+                <ArrowDropDownIcon className={iconClass} />
+            </div>
+        ) : (
+            <ButtonBase
+                component="div"
+                id={id}
+                className={rootClass}
+                onClick={this.handleClick}
+                disabled={disabled}
+                onMouseEnter={this.props.onMouseEnter}
+                onMouseLeave={this.props.onMouseLeave}
+                onKeyDown={this.handleKeyDown}
+                onFocus={this.props.onFocus}
+                onBlur={this.handleBlur}
+                ref={this.ref}
+            >
+                <span
+                    className={classNames(classes.label, {
+                        [classes.placeholder]: value === undefined,
+                    })}
+                >
+                    {value || placeholder}
+                </span>
+                {onReset && focused && (
+                    <div
+                        ref={(el) => {
+                            this.resetIcon = el;
+                        }}
+                    >
+                        <HiIcon
+                            icon="close"
+                            size={20}
+                            color="neutral"
+                            onClick={this.handleReset}
+                            onKeyDown={this.handleKeyDownReset}
+                            tabIndex={0}
+                        />
+                    </div>
+                )}
+                <Icon classes={{ root: iconClass }}>
+                    <ArrowDropDownIcon />
+                </Icon>
+            </ButtonBase>
+        );
+    }
+}
+
+export default withStyles(styles, { hiComponent: true, name: 'HmuiHiSelectInput' })(HiSelectInput);

package/src/HiSelect/HiSelectInput.test.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { assert } from 'chai';
+import { createShallow } from '../test-utils';
+import HiSelectInput from './HiSelectInput';
+import ButtonBase from '@mui/material/ButtonBase';
+import { spy } from 'sinon';
+
+describe('<SelectInput />', () => {
+    let shallow;
+
+    it('should render a ButtonBase', () => {
+        const handler = spy();
+        shallow = createShallow();
+        const wrapper = shallow(
+            <HiSelectInput
+                value="Zinédine Zidane"
+                open={false}
+                focused={false}
+                disabled={false}
+                onClick={handler}
+            />,
+        );
+        assert.strictEqual(wrapper.dive().find(ButtonBase).length, 1, 'should be a ButtonBase');
+    });
+});

package/src/HiSelect/HiSelectMobile.js

@@ -0,0 +1,129 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import withStyles from '@mui/styles/withStyles';
+
+export const styles = theme => ({
+    root: {
+        position: 'absolute',
+        opacity: '0',
+        marginTop: -40,
+        height: 40,
+    },
+});
+
+class HiSelectMobile extends React.Component{
+
+    static propTypes = {
+        /**
+         * Identifiant du select
+         */
+        id: PropTypes.string,
+        /**
+         * Liste des options du select
+         */
+        itemList: PropTypes.array.isRequired,
+        /**
+         * True s'il est possible de sélectionner plusieurs options
+         */
+        multiple: PropTypes.bool,
+        /**
+         * Fonction appelée lors de la sélection/désélection
+         */
+        onChange: PropTypes.func.isRequired,
+        /**
+         * Valeur(s) sélectionnée(s)
+         */
+        value: PropTypes.any,
+        /**
+         * Largeur du select
+         */
+        width: PropTypes.number,
+    };
+
+    static defaultProps = {
+        itemList: [],
+    };
+
+    buildOptionList = (itemList) => {
+        let optionList = [];
+        if (itemList.length) {
+            let parentId;
+            let groupList = [];
+            itemList.forEach(item => {
+                if (item.id !== '_all' && item.displayed !== false) {
+                    if (item.hasChildren) {
+                        if (groupList.length) {
+                            optionList.push(this.buildChildrenList(groupList));
+                            groupList = [];
+                        }
+                        parentId = item.id;
+                        groupList.push(item);
+                    } else if (parentId) {
+                        groupList.push(item);
+                    } else if (item.children) {
+                        optionList.push(this.buildChildrenList([item, ...item.children]));
+                    } else {
+                        optionList.push(<option key={item.id} data-item={JSON.stringify(item)} value={item.id}>{item.label}</option>);
+                    }
+                }
+            });
+            if (groupList.length) {
+                optionList.push(this.buildChildrenList(groupList));
+            }
+        }
+        return optionList;
+    };
+
+    buildChildrenList = (itemList) => {
+        const group = itemList.shift();
+        return (
+            <optgroup key={group.id} label={group.label}>
+                {itemList.map(item => {
+                    return <option key={item.id} data-item={JSON.stringify(item)} value={item.id}>{item.label}</option>;
+                })}
+            </optgroup>
+        );
+    };
+
+    handleChange = event => {
+        if (!this.props.multiple) {
+            const itemSelected = event.target[event.target.selectedIndex];
+            this.props.onChange(event, JSON.parse(itemSelected.getAttribute('data-item')));
+        } else {
+            // Multiple on mobile trigger on change with all selected items
+            let optionsSelected = [];
+            Array.prototype.forEach.call(event.target.options, option => {
+                if (option.selected) {
+                    optionsSelected.push(JSON.parse(option.getAttribute('data-item')));
+                }
+            });
+            this.props.onChange(event, optionsSelected);
+        }
+    };
+
+    render() {
+        const { classes, id, itemList, multiple, value } = this.props;
+
+        const additionalProps = {
+            ...(multiple && {
+                multiple: 'multiple',
+            }),
+        };
+
+        return (
+            <select
+                value={value}
+                style={{ width: this.props.width }}
+                onChange={this.handleChange}
+                className={classes.root}
+                name={id}
+                id={id}
+                {...additionalProps}
+            >
+                {this.buildOptionList(itemList)}
+            </select>
+        );
+    }
+}
+
+export default withStyles(styles)(HiSelectMobile);